31
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

Embed Size (px)

DESCRIPTION

Quais são os desafios e as oportunidades que essa tecnologia vai propiciar, qual é o impacto no desenvolvimento para internet e como a Adobe pode auxiliá-los a usufruir aos máximos dos benefícios do HTML 5 e suas linguagens parceiras (CSS e Java Script)

Citation preview

Page 1: Desenvolvimento Web : HTML5, CSS3 & JavaScript

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

Page 2: Desenvolvimento Web : HTML5, CSS3 & JavaScript

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

Page 3: Desenvolvimento Web : HTML5, CSS3 & JavaScript

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

Page 4: Desenvolvimento Web : HTML5, CSS3 & JavaScript

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

Page 5: Desenvolvimento Web : HTML5, CSS3 & JavaScript

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

Page 6: Desenvolvimento Web : HTML5, CSS3 & JavaScript

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.

Page 7: Desenvolvimento Web : HTML5, CSS3 & JavaScript

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

Page 8: Desenvolvimento Web : HTML5, CSS3 & 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.

Page 9: Desenvolvimento Web : HTML5, CSS3 & JavaScript

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

Page 10: Desenvolvimento Web : HTML5, CSS3 & 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

Page 11: Desenvolvimento Web : HTML5, CSS3 & JavaScript

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.

Page 12: Desenvolvimento Web : HTML5, CSS3 & JavaScript

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>

Page 13: Desenvolvimento Web : HTML5, CSS3 & JavaScript

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>

Page 14: Desenvolvimento Web : HTML5, CSS3 & JavaScript

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

Page 15: Desenvolvimento Web : HTML5, CSS3 & JavaScript

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>

Page 16: Desenvolvimento Web : HTML5, CSS3 & JavaScript

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">

Page 17: Desenvolvimento Web : HTML5, CSS3 & JavaScript

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

Page 18: Desenvolvimento Web : HTML5, CSS3 & JavaScript

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">

Page 19: Desenvolvimento Web : HTML5, CSS3 & JavaScript

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.

Page 20: Desenvolvimento Web : HTML5, CSS3 & JavaScript

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

Page 21: Desenvolvimento Web : HTML5, CSS3 & JavaScript

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

Page 22: Desenvolvimento Web : HTML5, CSS3 & JavaScript

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>

Page 23: Desenvolvimento Web : HTML5, CSS3 & JavaScript

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

Page 24: Desenvolvimento Web : HTML5, CSS3 & JavaScript

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

Page 25: Desenvolvimento Web : HTML5, CSS3 & JavaScript

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

Page 26: Desenvolvimento Web : HTML5, CSS3 & JavaScript

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

Page 27: Desenvolvimento Web : HTML5, CSS3 & JavaScript

Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011

Geo Location API

http://html5demos.com/geo

Page 28: Desenvolvimento Web : HTML5, CSS3 & JavaScript

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

Page 29: Desenvolvimento Web : HTML5, CSS3 & JavaScript

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

Page 30: Desenvolvimento Web : HTML5, CSS3 & JavaScript

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

Page 31: Desenvolvimento Web : HTML5, CSS3 & JavaScript

Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011

Muito obrigado !

flatschart.com quadrodosbemois.com.br @fabioflat