Campus Party 2011Desenvolvimento Web : HTML5, CSS3 & JavaScriptFábio FlatschartEstande do Senac – Zona Expo 13 | Campus Pa...
Fábio FlatschartConsultor Educacional da Adobe Systems do Brasil.Consultor das áreas de Internet e Computação Gráfica da G...
WEBArquitetura cliente < > servidorModelo de localização universal - URL (Uniform Resource Locator)Protocolo de comunicaçã...
HTML1991 HTML1994 HTML 21996 CSS 1 + JavaScript1997 HTML 41998 CSS 22000 XHTML 12002 Tableless ( XHTML + CSS + JavaScript)...
HTML5O HTML 5 é desenvolvido em uma colaboração entre o W3C eWHATWG e sua especificação, ainda não concluída, deve sercand...
HTML5Esta especificação introduz novas tags orientadas para auxiliar nodesenvolvimento web baseado em padrões compatíveis ...
Client SideA organização do desenvolvimento de projetos web em camadasindependentes confere flexibilidade e modularidade a...
APIsUma API (Application Programming Interface) é uma interface quepermite a interação entre os softwares facilitando sua ...
Client Side HTML5O HTML 5 aceita um conjunto de APIs que fortalece, integra evaloriza a camada de desenvolvimento do lado ...
CompatibilidadeRenderização dos browsersMotor                             BrowsersGecko                             Firefo...
CompatibilidadeA cada nova versão mais recursos são suportados e a concorrênciaentre os fabricantes é grande de maneira qu...
Compatibilidade<head><style>article, footer, header, hgroup, nav {display: block;}</style><script>document.createElement("...
Compatibilidade<head><!--[if IE]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--></h...
Compatiblidadehttp://html5test.comTesta e avalia a compatibilidade do seu browser com os elementosespecíficos do HTML5http...
HTML5 - DOCTYPEHTML 4.01<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">XHTML 1.0...
HTML5 - CharsetHTML 4.01<meta http-equiv="Content-Type" content="text/html; charset=utf-8">XHTML 1.0<?xml version="1.0" en...
Estrutura básica<!DOCTYPE html><html lang="pt-br"><head><meta charset="utf-8" /><title>HTML5 - Estrutura básica</title></h...
CSS & JavaScript                                                       HTML5                HTML                          ...
Estrutura SemânticaUmas das maiores novidades do HTML5 é a possibilidade de atribuiràs diversas seções estuturais do docum...
Estrutura Semântica<body><header>…</header><nav>...</nav><article>...</article><aside>...</aside><footer>...</footer></bod...
FormuláriosNo quesito formulário, o HTML5 trouxe grandes avanços, entre eles tipos específicos de entrada dedados, control...
VídeoA compatibilidade dos browsers ainda é problemática, mas existemvárias maneiras de contornar esta questão como, por e...
VídeoContainer                    Vídeo            Áudio             SuporteMPEG4                        H.264            ...
SVGNo HTML5 o formato SVG (Scalable Vectorial Graphics) pode serembutido diretamente embutido no documento com o uso doele...
CSS3radiusshadowopacidade(RGBA)media queriescriação de múltiplas colunas de textofonteshttp://flatschart.com/html5/teste_c...
Canvas API<canvas id="figura" width="300" height="300"></canvas>canvas bitmapsvg vetorhttp://html5demos.com/canvas-gradhtt...
Geo Location APIhttp://html5demos.com/geoDesenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party ...
ADOBEA Adobe oferece, e continuará oferecendo cada vez mais, suporte ao HTML5O Adobe AIR inclui suporte para HTML5A Adobe ...
AdobeAdobe Edge HTML5http://tv.adobe.com/watch/adc-presents/preview-of-the-edge-prototype-tool-for-html5-/Adobe Dreamweave...
Referênciasadobe.com/brtv.adobe.comlabs.adobe.comadobe.com/devnet.htmladobe.com/newsletters/edgediveintohtml5.orghtml5doct...
Muito obrigado !                                                              flatschart.com                              ...
Upcoming SlideShare
Loading in...5
×

Desenvolvimento Web : HTML5, CSS3 & JavaScript

15,959

Published on

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)

1 Comment
18 Likes
Statistics
Notes
  • muito bom o material obg....
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
15,959
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
480
Comments
1
Likes
18
Embeds 0
No embeds

No notes for slide

Desenvolvimento Web : HTML5, CSS3 & JavaScript

  1. 1. Campus Party 2011Desenvolvimento Web : HTML5, CSS3 & JavaScriptFábio FlatschartEstande do Senac – Zona Expo 13 | Campus Party 2011 | Janeiro 2011Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
  2. 2. Fábio FlatschartConsultor Educacional da Adobe Systems do Brasil.Consultor das áreas de Internet e Computação Gráfica da Gerência deDesenvolvimento (GD2) do SENAC/SP na produção de eventos, novasparcerias e desenvolvimento de cursos livres, de nível médio, superior e depós-graduação.Autor e escritor técnico (Editora Brasport e Editora SENAC/SP).Professor da UNIFMUDesenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
  3. 3. WEBArquitetura cliente < > servidorModelo 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 hipertextoBrowser (navegador) como recurso de visualização do documento peloclienteDesenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
  4. 4. HTML1991 HTML1994 HTML 21996 CSS 1 + JavaScript1997 HTML 41998 CSS 22000 XHTML 12002 Tableless ( XHTML + CSS + JavaScript)2005 AJAX2009 HTML 5Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
  5. 5. HTML5O HTML 5 é desenvolvido em uma colaboração entre o W3C eWHATWG e sua especificação, ainda não concluída, deve sercandidata a uma recomendação do W3C em 2012.Pelas características modulares do seu desenvolvimento, asempresas, fabricantes dos navegadores, desenvolvedores,designers e usuários não necessitam aguardar a especificação finalda linguagem para colocá-la em uso.W3C - World Wide Web ConsortiumWHATWG - Web Hypertext Application Technology Working GroupDesenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
  6. 6. HTML5Esta especificação introduz novas tags orientadas para auxiliar nodesenvolvimento web baseado em padrões compatíveis com todosdispositivos, na marcação semântica do código, na manipulação deelementos do CSS e do JavaScript através da definição de APIs daarquitetura Web e na alternativa ao uso de aplicativos externos.Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
  7. 7. Client SideA organização do desenvolvimento de projetos web em camadasindependentes confere flexibilidade e modularidade ao fluxo detrabalho para web integrando equipes multidisciplinares deplanejamento, produção, arquitetura da informação, design eprogramação. Marcação HTML Apresentação CSS Comportamento JavaScriptDesenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
  8. 8. APIsUma API (Application Programming Interface) é uma interface quepermite a interação entre os softwares facilitando sua integração demaneira semelhante à uma interface que auxilia na comunicaçãoentre nós, usuários, e os diversos dispositivos com os quaisconvivemos no nosso dia a dia.Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
  9. 9. Client Side HTML5O HTML 5 aceita um conjunto de APIs que fortalece, integra evaloriza a camada de desenvolvimento do lado do usuário (clientside) através de aplicações que permitem geolocalização, controlede áudio e vídeo, arrastar componentes (drag & drop), desenharbitmaps (canvas) e criar aplicações offline entre outras. Marcação HTML Apresentação Comportamento APIs CSS JavaScriptDesenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
  10. 10. CompatibilidadeRenderização dos browsersMotor BrowsersGecko Firefox, SeaMonkey, Camino, K-MeleonPresto Opera, Opera Mobile, Nintendo Wii, Nintendo DS e DSiTrident Internet ExplorerWebKit Chrome, Safari (incluindo iPhones e iPads), Adobe AIR, Android, Palm webOS, SymbianDesenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
  11. 11. CompatibilidadeA cada nova versão mais recursos são suportados e a concorrênciaentre os fabricantes é grande de maneira que quando um fabricanteimplementa uma funcionalidade é quase sempre seguido de pertopelos demais.Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
  12. 12. 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
  13. 13. 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
  14. 14. Compatiblidadehttp://html5test.comTesta e avalia a compatibilidade do seu browser com os elementosespecíficos do HTML5http://html5readiness.comMostra como o suporte ao HTML5 evoluiu de 2008 até hojehttp://caniuse.comExibe tabelas de compatibilidade para recursos de HTML5, CSS3,SVG e outras tecnologias webDesenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
  15. 15. HTML5 - DOCTYPEHTML 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
  16. 16. HTML5 - CharsetHTML 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
  17. 17. 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.htmlDesenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
  18. 18. 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
  19. 19. Estrutura SemânticaUmas 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 agorautilizar estes novos elementos do HTML5 para identificar ocabeçalho, o rodapé, a barra de navegação e outras seções queantes eram marcadas como um elemento genérico sem valorsemântico específico através da utilização do elemento div.Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
  20. 20. Estrutura Semântica<body><header>…</header><nav>...</nav><article>...</article><aside>...</aside><footer>...</footer></body>http://flatschart.com/html5/layout.htmlDesenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
  21. 21. FormuláriosNo quesito formulário, o HTML5 trouxe grandes avanços, entre eles tipos específicos de entrada dedados, controle de datas, validação e formatação de campos. Nesta área, o OPERA é quem lidera oranking de compatibilidade.<input type="number"><input type="search"><input type="range"><input type="email"><input type="date"><input type="url"><input type="week">autofocus | placeholderhttp://flatschart.com/html5/formulario_estados2.htmlDesenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
  22. 22. VídeoA compatibilidade dos browsers ainda é problemática, mas existemvárias maneiras de contornar esta questão como, por exemplo, usarformatos alternativos (da mesma maneira que no caso do áudio),indicar um link para download e oferecer a possibilidade opcional deuso 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
  23. 23. VídeoContainer Vídeo Áudio SuporteMPEG4 H.264 AAC Chrome, SafariOGG Theora Vorbis Chrome, Firefox, OperaWebM VP8 Vorbis Chrome , Firefox4*, IE9*, Operahttp://flatschart.com/html5/video.htmlDesenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
  24. 24. SVGNo HTML5 o formato SVG (Scalable Vectorial Graphics) pode serembutido diretamente embutido no documento com o uso doelemento 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.htmlDesenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
  25. 25. CSS3radiusshadowopacidade(RGBA)media queriescriação de múltiplas colunas de textofonteshttp://flatschart.com/html5/teste_css3.htmlhttp://flatschart.com/html5/citrusDesenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
  26. 26. Canvas API<canvas id="figura" width="300" height="300"></canvas>canvas bitmapsvg vetorhttp://html5demos.com/canvas-gradhttp://flatschart.com/html5/canvas_simples.htmlDesenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
  27. 27. Geo Location APIhttp://html5demos.com/geoDesenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
  28. 28. ADOBEA Adobe oferece, e continuará oferecendo cada vez mais, suporte ao HTML5O Adobe AIR inclui suporte para HTML5A Adobe tem o compromisso de oferecer suporte a HTML5 em suas principais ferramentas de design edesenvolvimento na WebAs implementações de HTML5 diferenciarão e limitarão a adoção de recursos avançados, incluindo osuporte a marcações de vídeoA Adobe oferece a melhor linha de ferramentas da categoria usada por 3,5 milhões de designers edesenvolvedoresO HTML5 exigirá e será beneficiado pelo investimento da Adobe na variedade de ferramentasDesenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
  29. 29. AdobeAdobe Edge HTML5http://tv.adobe.com/watch/adc-presents/preview-of-the-edge-prototype-tool-for-html5-/Adobe Dreamweaver CS5 HTML5 Packhttp://labs.adobe.com/downloads/html5pack.htmlAdobe Illustrator CS5 HTML5 Packhttp://labs.adobe.com/technologies/illustrator_html5Dreamweaver, jQuery and jQuery Mobilehttp://tv.adobe.com/watch/max-2010-develop/getting-started-with-jquery-mobileAdobe Dreamweaver HTML5 Video Player widgethttp://blogs.adobe.com/dreamweaver/2010/10/adobe-announces-the-html5-video-player-widget.htmPara a distribuição de vídeo, soluções híbridas envolvendo Flash e HTML5 permitem atingir todos os targetshttp://www.gotoandlearn.com/play.php?id=128Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
  30. 30. Referênciasadobe.com/brtv.adobe.comlabs.adobe.comadobe.com/devnet.htmladobe.com/newsletters/edgediveintohtml5.orghtml5doctor.comhtml5demos.comdev.w3.org/html5/spec-author-viewDesenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
  31. 31. Muito obrigado ! flatschart.com quadrodosbemois.com.br @fabioflatDesenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
  1. Gostou de algum slide específico?

    Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

×