O documento apresenta uma palestra sobre desenvolvimento web utilizando HTML5, CSS3 e JavaScript ministrada por Fábio Flatschart na Campus Party 2011. A palestra aborda as principais novidades e recursos das tecnologias HTML5, CSS3 e JavaScript, incluindo elementos semânticos, formulários, vídeo, SVG, Canvas API e compatibilidade entre navegadores.
1. 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
2. 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
3. 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
4. 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
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
6. 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.
7. 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
8. 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.
9. 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
10. 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
11. 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.
12. 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>
13. 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>
14. 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
15. 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>
16. 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">
18. 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">
19. 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.
20. 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
21. 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
22. 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>
23. 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
24. 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
25. 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
26. 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
27. Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
Geo Location API
http://html5demos.com/geo
28. 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
29. 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
30. 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
31. Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
Muito obrigado !
flatschart.com quadrodosbemois.com.br @fabioflat