View
169
Download
0
Category
Preview:
DESCRIPTION
Vamos analisar o que mudou nesta nova versão, e o que você precisa saber sobre desenvolvimento Front End avançado com HTML5.
Citation preview
3
O que é HTML5?
O HTML5 é a nova versão do HTML4.
W3C focava suas atencoes para a criacão do XHTML 2.0;
Já a WHATWG trabalhava em uma versão do HTML que trazia mais
flexibilidade para a producão de websites e sistemas baseados na web.
W3C (World Wide Web Consortium)
WHATWG (Web Hypertext Application Technology Working Group)
4
O que é HTML5?
Ao contrário das versoes anteriores, o HTML5 fornece ferramentas para a
CSS e ao Javascript para fazerem seu trabalho da melhor maneira
possivel permitindo por meio de suas APIs, a manipulacão das
caracteristicas destes elementos, de forma que o website ou a aplicacão
continue leve e funcional.
5
O que é HTML5?
ANTES
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
14
O que mudou no mercado?
Fluxo de desenvolvimentoGeralmente o fluxo padrão de desenvolvimento é linear, principalmente
em equipes pequenas (agencias, produtoras, etc).
Com os padrões web, esse cenário muda para fluxo paralelo.
17
O que mudou no mercado?
wireframeprototipo
design
wireframeprototipo
front-end
wireframeprototipo
back-end
20
O que tem de novo no HTML5?
O que mudou com HTML5?
➢ Novos elementos;
➢ Novos atributos;
➢ Total suporte a CSS3;
➢ Áudio e Video;
➢ Gráficos 2D e 3D;
➢ Local Storage;
➢ Local SQL Database;
➢ Aplicacoes web;
➢ Muito mais...
21
O que tem de novo no HTML5?
Elementos Semânticos
Novos elementos para cabeçalhos, rodapés, menus, seções, artigos e
outros.
Também tivemos uma melhoria significativa em elementos de
formulários como novos atributos, inputs e validações automáticas.
23
O que tem de novo no HTML5?
Gráficos 2D e 3D
Podemos desenhar gráficos ou objetos mais facilmente;
➢ Canvas;
➢ SVG;
➢ CSS3 (2D/3D)
24
O que tem de novo no HTML5?
Multimédia
Podemos assistir videos, ouvir músicas mais fácil do que nunca.
➢ Audio API
➢ Video API
25
O que tem de novo no HTML5?
Aplicações com HTML5
Hoje conseguimos fazer grandes aplicacoes mais facilmente do que
nunca com HTML5;
➢ Local data storage;
➢ Local file access;
➢ Local SQL database;
➢ Application cache;
➢ Javascript workers;
➢ XHTMLHttpRequest 2;
26
O que tem de novo no HTML5?
Além disso ainda podemos fazer muito mais como aplicacoes em tempo
real, acessar hardware dos dispositivos (Desktop / Mobile) e fazer
aplicacoes mais performáticas.
28
O que eu preciso saber antes?
Eis que surge a pergunta:“O que eu preciso saber antes de comecar a usar HTML5?”
29
O que eu preciso saber antes?
HTML + CSS + JavaScriptAgora depende de até onde você pretende evoluir.
30
O que eu preciso saber antes?
Entenda o princípio das coisasA base continua sendo HTML e CSS, então não precisamos pensar muito
e ver que HTML5 e CSS3 é o primeiro passo.
31
O que eu preciso saber antes?
Aprenda JavaScriptJavaScript é uma linguagem de programacão de fácil aprendizado e
muito poderosa por sinal. Teste coisas novas, imagine como certa
funcionalidade acontece e entenda que JavaScript não é jQuery.
32
O que eu preciso saber antes?
Estude aquilo que você usaA tecnologia muda constantemente, se saiu algo novo por que não
aprender? Design Responsivo, novas ferramentas, atualizações...
33
O que eu preciso saber antes?
Sim, você vai ter que aturar o IEMesmo com novas versões de navegadores, o mercado ainda utiliza
versoes que ainda não dão suporte a certas funcionalidades do HTML5.
35
Mas e o Google?
Utilizando HTML5 da forma certa, você pode ter certeza que além do seu
código ficar mais organizado, o valor semântico da informacão vai fazer
mais sentido para os motores de busca.
Assim você aumenta a probabilidade de seu site ficar em uma melhor
posicão e isso também faz você ser valorizado.
38
E tem mais...
O mercado mobile está crescendo rápido em todo o mundo e podemos
desenvolver aplicacoes móveis com HTML5.
Recommended