Desenvolvimento Web : HTML5, CSS3 & JavaScript

  • 14,379 views
Uploaded 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 …

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)

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • muito bom o material obg....
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
14,379
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
359
Comments
1
Likes
16

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Geo Location APIhttp://html5demos.com/geoDesenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
  • 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. 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. 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. Muito obrigado ! flatschart.com quadrodosbemois.com.br @fabioflatDesenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011