html5code 110120120405 phpapp01

Prévia do material em texto

Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011 
 
 
Campus Party 2011 
Desenvolvimento Web : HTML5, CSS3 & JavaScript 
Fábio Flatschart 
 
 
 
 
Estande do Senac – Zona Expo 13 | Campus Party 2011 | Janeiro 2011 
Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011 
 
 
Fábio Flatschart 
Consultor Educacional da Adobe Systems do Brasil. 
 
Consultor das áreas de Internet e Computação Gráfica da Gerência de 
Desenvolvimento (GD2) do SENAC/SP na produção de eventos, novas 
parcerias e desenvolvimento de cursos livres, de nível médio, superior e de 
pós-graduação. 
 
Autor e escritor técnico (Editora Brasport e Editora SENAC/SP). 
 
Professor da UNIFMU 
 
Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011 
 
 
WEB 
Arquitetura cliente < > servidor 
Modelo de localização universal - URL (Uniform Resource Locator) 
Protocolo de comunicação - HTTP (Hypertext Transfer Protocol) 
Linguagem de marcação - HTML (HyperText Markup Language) 
Documento estruturado na forma de hipertexto 
Browser (navegador) como recurso de visualização do documento pelo 
cliente 
 
 
Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011 
 
 
HTML 
 
1991 HTML 
1994 HTML 2 
1996 CSS 1 + JavaScript 
1997 HTML 4 
1998 CSS 2 
2000 XHTML 1 
2002 Tableless ( XHTML + CSS + JavaScript) 
2005 AJAX 
2009 HTML 5 
 
 
Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011 
 
 
HTML5 
O HTML 5 é desenvolvido em uma colaboração entre o W3C e 
WHATWG e sua especificação, ainda não concluída, deve ser 
candidata a uma recomendação do W3C em 2012. 
 
Pelas características modulares do seu desenvolvimento, as 
empresas, fabricantes dos navegadores, desenvolvedores, 
designers e usuários não necessitam aguardar a especificação final 
da linguagem para colocá-la em uso. 
 
W3C - World Wide Web Consortium 
WHATWG - Web Hypertext Application Technology Working Group 
Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011 
 
 
HTML5 
Esta especificação introduz novas tags orientadas para auxiliar no 
desenvolvimento web baseado em padrões compatíveis com todos 
dispositivos, na marcação semântica do código, na manipulação de 
elementos do CSS e do JavaScript através da definição de APIs da 
arquitetura Web e na alternativa ao uso de aplicativos externos. 
 
 
Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011 
 
 
Client Side 
A organização do desenvolvimento de projetos web em camadas 
independentes confere flexibilidade e modularidade ao fluxo de 
trabalho para web integrando equipes multidisciplinares de 
planejamento, produção, arquitetura da informação, design e 
programação. 
 
Marcação HTML 
Apresentação CSS 
Comportamento JavaScript 
 
 
Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011 
 
 
APIs 
Uma API (Application Programming Interface) é uma interface que 
permite a interação entre os softwares facilitando sua integração de 
maneira semelhante à uma interface que auxilia na comunicação 
entre nós, usuários, e os diversos dispositivos com os quais 
convivemos no nosso dia a dia. 
 
 
 
 
 
 
Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011 
 
 
Client Side HTML5 
O HTML 5 aceita um conjunto de APIs que fortalece, integra e 
valoriza a camada de desenvolvimento do lado do usuário (client 
side) através de aplicações que permitem geolocalização, controle 
de áudio e vídeo, arrastar componentes (drag & drop), desenhar 
bitmaps (canvas) e criar aplicações offline entre outras. 
 
Marcação 
APIs 
HTML 
Apresentação CSS 
Comportamento JavaScript 
Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011 
 
 
Compatibilidade 
Renderização dos browsers 
 
Motor Browsers 
Gecko Firefox, SeaMonkey, Camino, K-Meleon 
Presto Opera, Opera Mobile, Nintendo Wii, Nintendo DS e DSi 
Trident Internet Explorer 
WebKit Chrome, Safari (incluindo iPhones e iPads), Adobe AIR, 
Android, Palm webOS, Symbian 
 
Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011 
 
 
Compatibilidade 
A cada nova versão mais recursos são suportados e a concorrência 
entre os fabricantes é grande de maneira que quando um fabricante 
implementa uma funcionalidade é quase sempre seguido de perto 
pelos demais. 
 
 
 
 
 
 
 
Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011 
 
 
Compatibilidade 
<head> 
<style>article, footer, header, hgroup, nav {display: block;}</style> 
<script> 
document.createElement("article"); 
document.createElement("footer"); 
document.createElement("header"); 
document.createElement("hgroup"); 
document.createElement("nav"); 
</script> 
</head> 
Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011 
 
 
Compatibilidade 
 
<head> 
<!--[if IE]> 
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"> 
</script> 
<![endif]--> 
</head> 
 
 
 
 
 
Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011 
 
 
Compatiblidade 
 
http://html5test.com 
Testa e avalia a compatibilidade do seu browser com os elementos 
específicos do HTML5 
 
http://html5readiness.com 
Mostra como o suporte ao HTML5 evoluiu de 2008 até hoje 
 
http://caniuse.com 
Exibe tabelas de compatibilidade para recursos de HTML5, CSS3, 
SVG e outras tecnologias web 
Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011 
 
 
HTML5 - DOCTYPE 
 
HTML 4.01 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 
 
XHTML 1.0 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
 
HTML5 
 <!DOCTYPE html> 
Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011 
 
 
HTML5 - Charset 
 
HTML 4.01 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
 
XHTML 1.0 
<?xml version="1.0" encoding="UTF-8"?> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
HTML5 
<meta charset="utf-8"> 
 
 
Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011 
 
 
Estrutura básica 
 
<!DOCTYPE html> 
<html lang="pt-br"> 
<head> 
<meta charset="utf-8" /> 
<title>HTML5 - Estrutura básica</title> 
</head> 
<body> 
</body> 
</html> 
 
 
 
http://flatschart.com/html5/basico.html 
Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011 
 
 
CSS & JavaScript 
 
HTML5 
HTML CSS APIs + JS 
 
<script src="externo.js"></script> 
<link rel="stylesheet" href="estilo.css"> 
 
 
Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011 
 
 
Estrutura Semântica 
Umas das maiores novidades do HTML5 é a possibilidade de atribuir 
às diversas seções estuturais do documento um elemento próprio, 
nativo da linguagem. Os designers e desenvolvedores podem agora 
utilizar estes novos elementos do HTML5 para identificar o 
cabeçalho, o rodapé, a barra de navegação e outras seções que 
antes eram marcadas como um elemento genérico sem valor 
semântico específico através da utilização do elemento div. 
 
 
 
 
Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011 
 
 
Estrutura Semântica 
 
<body> 
<header>…</header><nav>...</nav> 
<article>...</article> 
<aside>...</aside> 
<footer>...</footer> 
</body> 
 
 
http://flatschart.com/html5/layout.html 
Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011 
 
 
Formulários 
No quesito formulário, o HTML5 trouxe grandes avanços, entre eles tipos específicos de entrada de 
dados, controle de datas, validação e formatação de campos. Nesta área, o OPERA é quem lidera o 
ranking de compatibilidade. 
 
<input type="number"> 
<input type="search"> 
<input type="range"> 
<input type="email"> 
<input type="date"> 
<input type="url"> 
<input type="week"> 
 
autofocus | placeholder 
 
 
http://flatschart.com/html5/formulario_estados2.html 
Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011 
 
 
Vídeo 
A compatibilidade dos browsers ainda é problemática, mas existem 
várias maneiras de contornar esta questão como, por exemplo, usar 
formatos alternativos (da mesma maneira que no caso do áudio), 
indicar um link para download e oferecer a possibilidade opcional de 
uso do Flash Player para a reprodução do vídeo. 
 
<video src=" video.ogv" ></video> 
 
 
 
 
Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011 
 
 
Vídeo 
 
Container Vídeo Áudio Suporte 
MPEG4 H.264 AAC Chrome, Safari 
OGG Theora Vorbis Chrome, Firefox, Opera 
WebM VP8 Vorbis Chrome , Firefox4*, IE9*, Opera 
 
 
 
 
 
 
 
 
 
http://flatschart.com/html5/video.html 
Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011 
 
 
SVG 
No HTML5 o formato SVG (Scalable Vectorial Graphics) pode ser 
embutido diretamente embutido no documento com o uso do 
elemento img 
 
<img src="imagens/rabisco.svg" alt="Rabisco em SVG" /> 
 
<svg > 
<rect width="90" height="60" x="10" y="100" fill="#00FFCC" stroke="#FF0000" 
stroke-width="3" /> 
</svg> 
 
http://flatschart.com/html5/svg.html 
Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011 
 
 
CSS3 
radius 
shadow 
opacidade(RGBA) 
media queries 
criação de múltiplas colunas de texto 
fontes 
 
 
 
 
http://flatschart.com/html5/teste_css3.html 
http://flatschart.com/html5/citrus 
 
Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011 
 
 
Canvas API 
<canvas id="figura" width="300" height="300"></canvas> 
 
 
 
canvas bitmap 
svg vetor 
 
 
 
 
 
 
http://html5demos.com/canvas-grad 
http://flatschart.com/html5/canvas_simples.html 
Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011 
 
 
Geo Location API 
 
http://html5demos.com/geo 
 
 
 
 
 
 
 
 
 
Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011 
 
 
ADOBE 
A Adobe oferece, e continuará oferecendo cada vez mais, suporte ao HTML5 
 
O Adobe AIR inclui suporte para HTML5 
 
A Adobe tem o compromisso de oferecer suporte a HTML5 em suas principais ferramentas de design e 
desenvolvimento na Web 
 
As implementações de HTML5 diferenciarão e limitarão a adoção de recursos avançados, incluindo o 
suporte a marcações de vídeo 
 
A Adobe oferece a melhor linha de ferramentas da categoria usada por 3,5 milhões de designers e 
desenvolvedores 
 
O HTML5 exigirá e será beneficiado pelo investimento da Adobe na variedade de ferramentas 
 
Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011 
 
 
Adobe 
Adobe Edge HTML5 
http://tv.adobe.com/watch/adc-presents/preview-of-the-edge-prototype-tool-for-html5-/ 
 
Adobe Dreamweaver CS5 HTML5 Pack 
http://labs.adobe.com/downloads/html5pack.html 
 
Adobe Illustrator CS5 HTML5 Pack 
http://labs.adobe.com/technologies/illustrator_html5 
 
Dreamweaver, jQuery and jQuery Mobile 
http://tv.adobe.com/watch/max-2010-develop/getting-started-with-jquery-mobile 
 
Adobe Dreamweaver HTML5 Video Player widget 
http://blogs.adobe.com/dreamweaver/2010/10/adobe-announces-the-html5-video-player-widget.htm 
 
Para a distribuição de vídeo, soluções híbridas envolvendo Flash e HTML5 permitem atingir todos os targets 
http://www.gotoandlearn.com/play.php?id=128 
Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011 
 
 
Referências 
 
adobe.com/br 
tv.adobe.com 
labs.adobe.com 
adobe.com/devnet.html 
adobe.com/newsletters/edge 
 
diveintohtml5.org 
html5doctor.com 
html5demos.com 
dev.w3.org/html5/spec-author-view 
 
Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011 
 
 
Muito obrigado ! 
 
 
 
 
 
flatschart.com 
quadrodosbemois.com.br 
@fabioflat