Introdução ao Desenvolvimento front-end (2019)

Desenvolvimento
Front-end
USE FIREFOX E APOIE
UMA INTERNET LIVRE

Olá, eu sou o Gustavo Teodoro

HTML
CSS JS
Semântica
Estilo Interação

Mapa de
Aprendizado Front-
end
Caio Vaccaro
Medium | Mapa
caiovaccaro.com.br/TechDomain.html

HTML (HyperText Markup Language, ou Linguagem de Marcação
de HiperTexto) é o componente mais básico da web. Ela serve
para definir o conteúdo e a estrutura básica de uma página web.
https://developer.mozilla.org/pt-BR/docs/Web/HTML

A HTML usa Markup (Marcação) para mostrar textos, imagens e
outros conteúdos para visualização em um navegador Internet.
Marcadores HTML incluem elementos especiais, tais como
<head>, <title>, <body>, <header>, <footer>, <article>, <section>,
<p>, <div>, <span> e <img>, entre outros.

CSS (Cascading Style Sheet - Folha de Estilo em Cascata) é usado
para estilizar e criar layout de paginas web - Por exemplo para
alterar fonte, cor, tamanho e espaçamento do conteúdo, dividir o
conteudo em múltiplas colunas, ou adicionar animações e outros
componentes decorativos.
https://developer.mozilla.org/pt-BR/docs/Aprender/CSS/

JavaScript é uma linguagem de programação que permite a
você implementar itens complexos em páginas web — toda vez
que uma página da web faz mais do que simplesmente mostrar a
você informação estática — mostrando conteúdo que se atualiza
em um intervalo de tempo, mapas interativos ou gráficos 2D/3D
animados, etc. — você pode apostar que o JavaScript
provavelmente está envolvido.
https://developer.mozilla.org/pt-BR/docs/Learn/JavaScript/

3˚ camada do bolo das tecnologias
padrões da web

O que ele pode realmente fazer?
● Armazenar conteúdo útil em variáveis. No exemplo, a propósito, nós pedimos que
um novo nome seja inserido e armazenamos o nome em uma variável chamada
nome.
● Operações com pedaços de texto (conhecidos como "strings" em programação). No
exemplo, nós pegamos a string "Jogador 1: " e concatenamos (juntamos) com a
variável nome para criar o texto completo "Jogador 1: Chris".
● Executar o código em resposta a determinados eventos que ocorrem em uma
página da Web. Nós usamos o click no nosso exemplo para que quando clicassem
no botão, rodasse o código que atualiza o texto.
● E muito mais!

APIs (Application Programming
Interfaces)

API DOM (Document Object Model)
A API DOM (Document Object Model) permite a você manipular HTML e CSS,
criando, removendo e mudando HTML, aplicando dinamicamente novos
estilos para a sua página, etc. Toda vez que você vê uma janela popup
aparecer em uma página, ou vê algum novo conteúdo sendo exibido (como
nós vimos na nossa simples demonstração), isso é o DOM em ação.

API de Geolocalização
A API de Geolocalização recupera
informações geográficas. É assim que o
Google Maps consegue entontrar sua
localização e colocar em um mapa.

APIs Canvas e WebGL
As APIs Canvas e WebGL permite a você criar
gráficos 2D e 3D animados.

APIs de áudio e vídeo
APIs de áudio e vídeo como
HTMLMediaElement e WebRTC permitem a
você fazer coisas realmente interessantes com
multimídia, tanto tocar música e vídeo em
uma página da web, como capturar vídeos
com a sua câmera e exibir no computador de
outra pessoa.

API de terceiros
● A API do Twitter permite a você fazer coisas como exibir seus últimos tweets no
seu website.
● A API do Google Maps permite a você inserir mapas customizados no seu site e
outras diversas funcionalidades.
● A API do Spotify permite a você inserir informações de álbuns, playlists e outras
features da plataforma no seu website.

Tipos
Esse é um bug antigo em JS, mas um do tipo
que é provável de nunca ser consertado. Muitos
códigos na Web dependem desse bug e
portanto consertá-lo iria trazer ainda mais bugs!

JavaScript Object Notation (JSON)
JSON (JavaScript Object Notation - Notação de Objetos JavaScript) é uma formatação
leve de troca de dados. Para seres humanos, é fácil de ler e escrever. Para máquinas, é
fácil de interpretar e gerar. Está baseado em um subconjunto da linguagem de
programação JavaScript, Standard ECMA-262 3a Edição -Dezembro - 1999. JSON é em
formato texto e completamente independente de linguagem, pois usa convenções
que são familiares às linguagens C e familiares, incluindo C++, C#, Java, JavaScript, Perl,
Python e muitas outras. Estas propriedades fazem com que JSON seja um formato ideal
de troca de dados.

AJAX
AJAX é o acrônimo para JavaScript assíncrono + XML. Não é exatamente uma
tecnologia nova, mas um termo empregado em 2005 por Jesse James Garrett para
descrever uma nova forma de utilizar em conjunto algumas tecnologias, incluindo
HTML ou XHTML, CSS, JavaScript, DOMl, XML, XSLT, e o mais importante: objeto
XMLHttpRequest.Quando essas tecnologias são combinadas no modelo AJAX, as
aplicações web que a utilizam são capazes de fazer rapidamente atualizações
incrementais para a interface do usuário sem recarregar a página inteira do navegador.
Isso torna a aplicação mais rápida e sensível às ações do usuário.

XMLHttpRequest vs the Fetch API
XMLHttpRequest example / Fetch API Example

Introdução ao Desenvolvimento front-end (2019)

Mais conteúdo relacionado

Mais procurados

Semelhante a Introdução ao Desenvolvimento front-end (2019)

Mais de Gustavo Teodoro

Introdução ao Desenvolvimento front-end (2019)