Front End
Módulo I
Primeira Aula
Brincando com alguns elementos!
Alguns elementos HTML
- Header
- Footer
- Section
- Div
- Nav
- Headings
- Link
- Listas
- Table
- Img
E muito mais...
http://www.w3schools.com/tags/ref_byfunc.asp
Leitura complementar:
O que é HTML?
HTML
HyperText Markup Language é uma linguagem de MARCAÇÃO interpretada por navegadores (agentes de usuário) para produzir páginas web.
Criada por Tim Berners-Lee, físico e cientista da computação, no CERN em 1990.
Mantida e especificada pelo W3C (World Wide Web Consortium). A primeira versão foi baseada no SGML (Standard Generalized Markup Language), metalinguagem para definição de linguagens de marcação.
-
Em Dezembro de 1997, a World Wide Web Consortium (W3C) publicou a HTML 4.0.
-
Menos de dois meses depois, um grupo de trabalho separado da W3C publicou o XML 1.0.
-
Em 1998, foi lançado um rascunho de uma especificação interna que simplesmente reformulou a HTML no XML sem adicionar nenhum novo elemento ou atributo. Esta especificação posteriormente ficou conhecida como “XHTML 1.0.”
-
Em junho de 2004, o WHAT Working Group nasceu. O WHAT Working Group fez dois rascunhos de especificação importantes, O Web Forms 2.0 e o Web Application 1.0.
-
Em outubro de 2006, W3C e WHAT Working Group se juntaram para evoluir o HTML.
-
Uma das primeiras coisas que o recém re-formado W3C HTML Working Group decidiu mudar é o nome de "Web Applications 1.0" para "HTML5".
-
E agora que estamos aqui falando sobre o tal do HTML5
HTML 5
HTML5: o que há de novo?
Novas Tags
...Mais semântica!
<header></header>
<main></main>
<aside></aside>
<nav></nav>
<time></time>
<details></details>
<output></output>
<figure></figure>
Leitura complementar:
Nova sintaxe de atributos
<input type="text" value="John" disabled>
<input type="text" value=John>
<input type="text" value='John'>
<input type="text" value="John">
APIs
Canvas
“uma tela bitmap de resolução dependente que pode ser usada para renderizar gráficos, jogos, ou outras imagens em tempo real.” A tag canvas é um retângulo na sua página, onde você pode usar JavaScript para desenhar o que você quiser
APIs
Audio/Video
O HTML5 introduz o suporte de mídia embutido por meio dos elementos <audio> e <video>, oferecendo a possibilidade de incorporar facilmente mídia em documentos HTML.
APIs
Offline
Uma aplicacão web offline é uma lista de URLs — HTML, CSS, JavaScript e outros recurso. A página inicial aponta para essa lista, chamada de arquivo manifesto, um arquivo texto. Um navegador irá ler o arquivo manifesto, baixar os recursos, cachear localmente, e manter os arquivos locais atualizados à medida que são alterados. Quando você tentar acessar as aplicações web sem uma conexão de rede, seu navegador web irá automaticamente apontar para as cópias locais.
APIs
Web Storage
Armazenamento de pares de chave/valor localmente, dentro do navegador do cliente. Semelhante aos cookies, mas não são enviados ao servidor. Implementado de forma nativa nos navegadores.
API dividida em: Session Storage e Local Storage
Boçalizando:
APIs
E mais...
Drag and drop
Web Sockets
Web Workers
FullScreen
Microdata
Web Messaging
PageVisibility
ContextMenu
Battery
Notifications
Exercício:
Vídeo com botões para tocar, pausar, aumentar e diminuir o volume
Tableless: regra suprema!
Semântica: aprendam isso!
Semântica
Um HTML semântico carrega significado independente da sua apresentação visual. Isso é particularmente importante quando o conteúdo será consumido por clientes não visuais:
Leitor de tela para ouvir sua página.
Robôs de buscas - SEO.
Estrutura de um arquivo HTML
Editores/IDEs
Mão na massa:
Formulários
FallBacks e Suporte
modernizr.com
caniuse.com
Leitura complementar:
Fallbacks e Suporte
Tipo e tipos
É hora do desafio!
Front End - Módulo I - 1° Aula
By Wilmerson da Silva
