HTML5 - A nova fronteira no desenvolvimento de aplicações WEB

flatschart.com

Semana de Tecnologia UniToledo Araçatuba - 28 de setembro de 2011 flatschart.com

HTML5A nova fronteira no desenvolvimento de aplicações WEB flatschart.com

Fábio FlatschartNo mercado WEB desde 1997, é consultor dedesenvolvimento e implantação de soluções e ferramentasda Adobe Systems Brasil.Autor e escritor técnico da Editora Brasport e daEditora SENAC/SPNo SENAC /SP atuou no atendimento corporativo eintermediação de parcerias com grandes empresas comoAdobe, Apple, Editora ABRIL, Microsoft, UOL e W3C.Certificado em HTML5 pelo W3C escritório Brasil.FGV MBA MarketingUSJT Criação Visual e MultimídiaUSP Escola de Comunicação e Artes flatschart.com

Conexões@fabioflatslideshare.net/fabioflatdelicio.us/fabioflatlinkedin.com/in/fabioflat flatschart.com

O HTML5 não é uma ruptura, é a continuidade e evolução do modeloconcebido por Tim Berners-Lee nos anos 1990INTRO flatschart.com

WEBArquitetura cliente < > servidorModelo de localização universalURL - Uniform Resource LocatorProtocolo de comunicaçãoHTTP - Hypertext Transfer ProtocolLinguagem de marcaçãoHTML - HyperText Markup LanguageDocumento estruturado na forma de hipertextoBrowser (navegador) como recurso de visualização do documento pelo cliente flatschart.com

Client SideA organização do desenvolvimento de projetos web em camadas independentesconfere flexibilidade e modularidade ao fluxo de trabalho para web integrandoequipes multidisciplinares de planejamento, produção, arquitetura da informação,design e programação. Marcação HTML Apresentação CSS Comportamento JavaScript flatschart.com

HTML1991 HTML1994 HTML 21996 CSS 1 + JavaScript1997 HTML 41998 CSS 22000 XHTML 12002 Tableless2005 AJAX2009 HTML 5 flatschart.com

HTML5O HTML 5 é especificação do W3C, ainda não concluída, que deve ser candidata a umarecomendação em 2012.Pelas características modulares do seu desenvolvimento, as empresas, fabricantes dosnavegadores, desenvolvedores, designers e usuários não necessitam aguardar aespecificação final da linguagem para colocá-la em uso.Esta nova especificação introduz novos elementos (tags) orientados para auxiliar nodesenvolvimento web baseado em padrões compatíveis com todos dispositivos, namarcação semântica do código, na manipulação de elementos do CSS e do JavaScriptatravés da definição de APIs da arquitetura Web.World Wide Web Consortium - Escritório Brasilhttp://www.w3c.br flatschart.com

APIsO HTML 5 aceita um conjunto de APIs que fortalece, integra e valoriza a camada dedesenvolvimento do lado do usuário (client side) através de aplicações que permitemgeolocalização, controle de áudio e vídeo, arrastar componentes (drag & drop),desenhar bitmaps (canvas), criar aplicações offline e outras. Marcação HTML Apresentação Comportamento APIs CSS JavaScript flatschart.com

APIsO HTML5 não é uma ruptura, é a continuidade e evolução do modelo concebido porTim Berners-Lee nos anos 1990 HTML5 HTML CSS APIs + JS flatschart.com

CompatibilidadeRenderizaçã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, SymbianA cada nova versão mais recursos são suportados e a concorrência entre osfabricantes é grande de maneira que quando um fabricante implementa umafuncionalidade é quase sempre seguido de perto pelos demais. flatschart.com

Compatibilidadehttp://html5test.comTesta e avalia a compatibilidade do seu browser com os elementos específicos doHTML5http://html5readiness.comMostra como o suporte ao HTML5 evoluiu de 2008 até hojehttp://caniuse.comExibe tabelas de compatibilidade para recursos de HTML5, CSS3, SVG e outrastecnologias web flatschart.com

Compatibilidade<head></head>O script acima é de Remy Sharp e está hospedado no Google Project Hosting .Você pode usá-lo livremente em seus projetos. flatschart.com

front end developer flatschart.com

A simplicidade é o último grau de sofisticaçãoNOVIDADES flatschart.com

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> flatschart.com

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"> flatschart.com

Estrutura básica<!DOCTYPE html><html lang="pt-br"><head><meta charset="utf-8"><title>Estrutura básica</title></head><body></body></html> flatschart.com

Saber o significado das palavras é essencial para o entendimento!SEMÂNTICA flatschart.com

Elementos estruturaisUmas das maiores novidades do HTML5 é a possibilidade de atribuir às diversasseções estuturais do documento um elemento próprio, nativo da linguagem. HTML4 / XHTML HTML5 <body> <body> <div id="topo"></div> <header></header> <div id="navegacao"></div> <nav></nav> <div id="principal"></div> <article></article> <div id="lateral"></div> <aside></aside> <div id="rodape"></div> <footer></footer> </body> </body> flatschart.com

Formulários <input type="email"> <input type="url"><input type="number"><input type="search"> <input type="range"> <input type="date"> <input type="week"> http://bit.ly/nrGXhw flatschart.com

O que eu ouço, esqueço. O que eu vejo, lembro. O que eu faço, aprendo.MULTIMÍDIA flatschart.com

CanvasO elemento canvas,novidade do HTML 5, permite que a informação para aconstrução de imagens baseadas em pixels seja inserida diretamente no código dodocumento.O elemento canvas apenas delimita em que local da tela isto acontece. O processode desenho é controlado por uma API específica para este elemento que interage comJavaScript.<canvas id="figura" width="300" height="300"></canvas><button onClick="desenhar()">Desenhar</button><script>function desenhar(){ var desenho = document.getElementById(figura); var context = desenho.getContext(2d); context.fillStyle = #00FFFF‘; context.fillRect(50,50,200, 200); }</script> http://bit.ly/nK6JCx flatschart.com

SVG<svg ><rect width="90" height="60" x="10" y="100"fill="#00FFCC" stroke="#FF0000" stroke-width="3" ></svg>No HTML5 o formato SVG (Scalable Vectorial Graphics) pode ser embutidodiretamente embutido no documento com o uso do elemento img<img src="imagens/rabisco.svg" alt="Rabisco em SVG">canvas bitmapsvg vetorhttp://bit.ly/rqqZuK flatschart.com

Áudio<audio src="mozart_trompa.mp3" controls></audio>Opção para vários formatos e opção de download do arquivo, visível quando obrowser do usuário não oferecer suporte para nenhum dos formatos indicados oupara o elemento audio.<audio controls><source src="mozart_trompa.aac"/><source src="mozart_trompa.ogg"/><source src="mozart_trompa.mp3"/><p>Baixe o arquivo<a href="mozart_trompa.mp3">.mp3</a></p></audio> http://bit.ly/nDeClI flatschart.com

VídeoA compatibilidade dos browsers ainda é problemática, mas existem váriasmaneiras de contornar esta questão como, por exemplo, usar formatosalternativos, indicar um link para download e incluir o uso do Flash Player para areprodução do vídeo.<video height="272" width="360" controls preload poster=“poster_video.jpg"><source src="videos/video.m4v"/><source src="videos/video.ogv"/><source src="videos/video.webm"/><p><a href="videos/video.m4v">Baixe o vídeo</a></p></video> http://bit.ly/oKtdlTContainer Vídeo Áudio SuporteMPEG4 H.264 AAC Chrome, Safari, IE9OGG Theora Vorbis Chrome, Firefox, OperaWebM VP8 Vorbis Chrome , Firefox, IE9, Opera flatschart.com

O HTML não é uma linguagem de programaçãoAPIS flatschart.com

APIs“O HTML não é uma linguagem de programação”Apesar desta afirmação soar estranha para muitos, sempre devemos lembrar de que oHTML é uma linguagem de marcação e de que sozinho ele não consegue formatar,manipular ou criar conteúdo. APIs Demo Web Storage http://slides.html5rocks.com/#web-storage Drag & Drop http://slides.html5rocks.com/#drag-and-drop Desktop Drag-In http://slides.html5rocks.com/#drag-in Desktop Drag-Out http://slides.html5rocks.com/#drag-out Geolocation http://slides.html5rocks.com/#geolocation Device Orientation http://slides.html5rocks.com/#slide-orientation Speech Input http://slides.html5rocks.com/#speech-input

O estilo está sob as palavras como dentro delas. É igualmente a alma e acarne de uma obraESTILO flatschart.com

CSS3@font-faceEfeitos de textoColunasCor e transparênciaBordasTransiçõesAnimaçõesMedia querieshttp://bit.ly/p4vtpShttp://slides.html5rocks.com/#css3-title flatschart.com

Mobile não é uma tecnologia é um estilo de vidaWEB APPS flatschart.com

flatschart.com

Aplicativos Mobile HTML5PlayboyFinancial TimesLinkedinZeewe flatschart.com

Mudança do fluxo de traballhoMINI CASE flatschart.com

Mini CaseParceria com a Soyuz SistemasMigração do fluxo de trabalho para produçãode apresentações em HTML5 para Sistema UNOInternacional do Grupo Santillana / EditoraModernaEnvolvimento e treinamento da equipeDesigners | DevelopersDo PSD ao CODE com semânticaCrossbrowserPermite distribuição para iOS e AndroidPermite empacotamento Adobe AIR (Webkit)Base para produção de futura ferramentacolaborativa flatschart.com

Você é o que você compartilha LINKS E REFERÊNCIAS flatschart.com

Links e ReferênciasLivro HTML5 – Embarque Imediatohttp://flatschart.com/html5/HTML5 Doctor, helping you implement HTML5 todayhttp://html5doctor.com/DIVE INTO HTML5http://diveintohtml5.org/ Adobe HTML5 and CSS3 development http://www.adobe.com/devnet/html5.htmlHTML5: Edition for Web Authorshttp://dev.w3.org/html5/spec-author-view/ HTML5 and CSS3 - Adobe - The Expressive Web - Beta http://beta.theexpressiveweb.com/W3C Brasilhttp://www.w3c.br Adobe Dreamweaver CS5.5 http://www.adobe.com/br/products/dreamweaver.htmlCurso de HTML5 do W3C Brasilhttp://www.w3c.br/Cursos/CursoHTML5 Adobe Labs http://labs.adobe.com/Stickmanhttp://www.drawastickman.com/20 Lições - Googlehttp://www.20thingsilearned.com/pt-BR flatschart.com

Fica a dica PUBLICAÇÕES flatschart.com

Publicaçõesflatschart.com

Muito obrigado ! @fabioflat fabioflat@gmail.com flatschart.com flatschart.com

http://quadrodosbemois.com.br	240
http://paper.li	27
http://a0.twimg.com	4
http://twitter.com	1
http://translate.googleusercontent.com	1

HTML5 - A nova fronteira no desenvolvimento de aplicações WEB

by Fábio Flatschart on Sep 28, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

5 Embeds 273

Statistics

HTML5 - A nova fronteira no desenvolvimento de aplicações WEB — Presentation Transcript