html5 - a nova fronteira no desenvolvimento de aplicações web
DESCRIPTION
HTML5 - A nova fronteira no desenvolvimento de aplicações WEBMaterial apresentado na Semana de Tecnologia UniToledoAraçatuba - 28 de setembro de 2011TRANSCRIPT
![Page 1: HTML5 - A nova fronteira no desenvolvimento de aplicações WEB](https://reader035.vdocuments.pub/reader035/viewer/2022081516/557da95fd8b42a351d8b46ab/html5/thumbnails/1.jpg)
flatschart.com
![Page 2: HTML5 - A nova fronteira no desenvolvimento de aplicações WEB](https://reader035.vdocuments.pub/reader035/viewer/2022081516/557da95fd8b42a351d8b46ab/html5/thumbnails/2.jpg)
Semana de Tecnologia UniToledo Araçatuba - 28 de setembro de 2011
flatschart.com
![Page 3: HTML5 - A nova fronteira no desenvolvimento de aplicações WEB](https://reader035.vdocuments.pub/reader035/viewer/2022081516/557da95fd8b42a351d8b46ab/html5/thumbnails/3.jpg)
HTML5 A nova fronteira no desenvolvimento de
aplicações WEB
flatschart.com
![Page 4: HTML5 - A nova fronteira no desenvolvimento de aplicações WEB](https://reader035.vdocuments.pub/reader035/viewer/2022081516/557da95fd8b42a351d8b46ab/html5/thumbnails/4.jpg)
Fábio Flatschart No mercado WEB desde 1997, é consultor de desenvolvimento e implantação de soluções e ferramentas da Adobe Systems Brasil. Autor e escritor técnico da Editora Brasport e da Editora SENAC/SP No SENAC /SP atuou no atendimento corporativo e intermediação de parcerias com grandes empresas como Adobe, Apple, Editora ABRIL, Microsoft, UOL e W3C. Certificado em HTML5 pelo W3C escritório Brasil. FGV MBA Marketing USJT Criação Visual e Multimídia USP Escola de Comunicação e Artes
flatschart.com
![Page 5: HTML5 - A nova fronteira no desenvolvimento de aplicações WEB](https://reader035.vdocuments.pub/reader035/viewer/2022081516/557da95fd8b42a351d8b46ab/html5/thumbnails/5.jpg)
Conexões
@fabioflat
slideshare.net/fabioflat
delicio.us/fabioflat
linkedin.com/in/fabioflat flatschart.com
![Page 6: HTML5 - A nova fronteira no desenvolvimento de aplicações WEB](https://reader035.vdocuments.pub/reader035/viewer/2022081516/557da95fd8b42a351d8b46ab/html5/thumbnails/6.jpg)
INTRO
O HTML5 não é uma ruptura, é a continuidade e evolução do modelo concebido por Tim Berners-Lee nos anos 1990
flatschart.com
![Page 7: HTML5 - A nova fronteira no desenvolvimento de aplicações WEB](https://reader035.vdocuments.pub/reader035/viewer/2022081516/557da95fd8b42a351d8b46ab/html5/thumbnails/7.jpg)
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
flatschart.com
![Page 8: HTML5 - A nova fronteira no desenvolvimento de aplicações WEB](https://reader035.vdocuments.pub/reader035/viewer/2022081516/557da95fd8b42a351d8b46ab/html5/thumbnails/8.jpg)
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.
flatschart.com
Marcação HTML
Apresentação CSS
Comportamento JavaScript
![Page 9: HTML5 - A nova fronteira no desenvolvimento de aplicações WEB](https://reader035.vdocuments.pub/reader035/viewer/2022081516/557da95fd8b42a351d8b46ab/html5/thumbnails/9.jpg)
HTML
flatschart.com
1991 HTML
1994 HTML 2
1996 CSS 1 + JavaScript
1997 HTML 4
1998 CSS 2
2000 XHTML 1
2002 Tableless
2005 AJAX
2009 HTML 5
![Page 10: HTML5 - A nova fronteira no desenvolvimento de aplicações WEB](https://reader035.vdocuments.pub/reader035/viewer/2022081516/557da95fd8b42a351d8b46ab/html5/thumbnails/10.jpg)
HTML5 O HTML 5 é especificação do W3C, ainda não concluída, que deve ser candidata a uma recomendação 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. Esta nova especificação introduz novos elementos (tags) orientados 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. World Wide Web Consortium - Escritório Brasil http://www.w3c.br
flatschart.com
![Page 11: HTML5 - A nova fronteira no desenvolvimento de aplicações WEB](https://reader035.vdocuments.pub/reader035/viewer/2022081516/557da95fd8b42a351d8b46ab/html5/thumbnails/11.jpg)
APIs 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), criar aplicações offline e outras.
flatschart.com
Marcação
APIs HTML
Apresentação CSS
Comportamento JavaScript
![Page 12: HTML5 - A nova fronteira no desenvolvimento de aplicações WEB](https://reader035.vdocuments.pub/reader035/viewer/2022081516/557da95fd8b42a351d8b46ab/html5/thumbnails/12.jpg)
APIs O HTML5 não é uma ruptura, é a continuidade e evolução do modelo concebido por Tim Berners-Lee nos anos 1990
flatschart.com
HTML5 HTML CSS APIs + JS
![Page 13: HTML5 - A nova fronteira no desenvolvimento de aplicações WEB](https://reader035.vdocuments.pub/reader035/viewer/2022081516/557da95fd8b42a351d8b46ab/html5/thumbnails/13.jpg)
Compatibilidade Renderização dos browsers 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.
flatschart.com
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 14: HTML5 - A nova fronteira no desenvolvimento de aplicações WEB](https://reader035.vdocuments.pub/reader035/viewer/2022081516/557da95fd8b42a351d8b46ab/html5/thumbnails/14.jpg)
Compatibilidade 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
flatschart.com
![Page 15: HTML5 - A nova fronteira no desenvolvimento de aplicações WEB](https://reader035.vdocuments.pub/reader035/viewer/2022081516/557da95fd8b42a351d8b46ab/html5/thumbnails/15.jpg)
Compatibilidade
<head>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head> O script acima é de Remy Sharp e está hospedado no Google Project Hosting .Você pode usá-lo livremente em seus projetos.
flatschart.com
![Page 16: HTML5 - A nova fronteira no desenvolvimento de aplicações WEB](https://reader035.vdocuments.pub/reader035/viewer/2022081516/557da95fd8b42a351d8b46ab/html5/thumbnails/16.jpg)
front end developer flatschart.com
![Page 17: HTML5 - A nova fronteira no desenvolvimento de aplicações WEB](https://reader035.vdocuments.pub/reader035/viewer/2022081516/557da95fd8b42a351d8b46ab/html5/thumbnails/17.jpg)
front end developer flatschart.com
![Page 18: HTML5 - A nova fronteira no desenvolvimento de aplicações WEB](https://reader035.vdocuments.pub/reader035/viewer/2022081516/557da95fd8b42a351d8b46ab/html5/thumbnails/18.jpg)
NOVIDADES A simplicidade é o último grau de sofisticação
flatschart.com
![Page 19: HTML5 - A nova fronteira no desenvolvimento de aplicações WEB](https://reader035.vdocuments.pub/reader035/viewer/2022081516/557da95fd8b42a351d8b46ab/html5/thumbnails/19.jpg)
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>
flatschart.com
![Page 20: HTML5 - A nova fronteira no desenvolvimento de aplicações WEB](https://reader035.vdocuments.pub/reader035/viewer/2022081516/557da95fd8b42a351d8b46ab/html5/thumbnails/20.jpg)
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">
flatschart.com
![Page 21: HTML5 - A nova fronteira no desenvolvimento de aplicações WEB](https://reader035.vdocuments.pub/reader035/viewer/2022081516/557da95fd8b42a351d8b46ab/html5/thumbnails/21.jpg)
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
![Page 22: HTML5 - A nova fronteira no desenvolvimento de aplicações WEB](https://reader035.vdocuments.pub/reader035/viewer/2022081516/557da95fd8b42a351d8b46ab/html5/thumbnails/22.jpg)
SEMÂNTICA Saber o significado das palavras é essencial para o entendimento!
flatschart.com
![Page 23: HTML5 - A nova fronteira no desenvolvimento de aplicações WEB](https://reader035.vdocuments.pub/reader035/viewer/2022081516/557da95fd8b42a351d8b46ab/html5/thumbnails/23.jpg)
Elementos estruturais
HTML4 / XHTML
<body>
<div id="topo"></div>
<div id="navegacao"></div>
<div id="principal"></div>
<div id="lateral"></div>
<div id="rodape"></div>
</body>
HTML5
<body>
<header></header>
<nav></nav>
<article></article>
<aside></aside>
<footer></footer>
</body>
flatschart.com
Umas das maiores novidades do HTML5 é a possibilidade de atribuir às diversas seções estuturais do documento um elemento próprio, nativo da linguagem.
![Page 24: HTML5 - A nova fronteira no desenvolvimento de aplicações WEB](https://reader035.vdocuments.pub/reader035/viewer/2022081516/557da95fd8b42a351d8b46ab/html5/thumbnails/24.jpg)
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
![Page 25: HTML5 - A nova fronteira no desenvolvimento de aplicações WEB](https://reader035.vdocuments.pub/reader035/viewer/2022081516/557da95fd8b42a351d8b46ab/html5/thumbnails/25.jpg)
MULTIMÍDIA O que eu ouço, esqueço. O que eu vejo, lembro. O que eu faço, aprendo.
flatschart.com
![Page 26: HTML5 - A nova fronteira no desenvolvimento de aplicações WEB](https://reader035.vdocuments.pub/reader035/viewer/2022081516/557da95fd8b42a351d8b46ab/html5/thumbnails/26.jpg)
Canvas O elemento canvas,novidade do HTML 5, permite que a informação para a construção de imagens baseadas em pixels seja inserida diretamente no código do documento. O elemento canvas apenas delimita em que local da tela isto acontece. O processo de desenho é controlado por uma API específica para este elemento que interage com JavaScript. <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
![Page 27: HTML5 - A nova fronteira no desenvolvimento de aplicações WEB](https://reader035.vdocuments.pub/reader035/viewer/2022081516/557da95fd8b42a351d8b46ab/html5/thumbnails/27.jpg)
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 embutido diretamente embutido no documento com o uso do elemento img <img src="imagens/rabisco.svg" alt="Rabisco em SVG">
canvas bitmap svg vetor http://bit.ly/rqqZuK
flatschart.com
![Page 28: HTML5 - A nova fronteira no desenvolvimento de aplicações WEB](https://reader035.vdocuments.pub/reader035/viewer/2022081516/557da95fd8b42a351d8b46ab/html5/thumbnails/28.jpg)
Áudio <audio src="mozart_trompa.mp3" controls></audio>
Opção para vários formatos e opção de download do arquivo, visível quando o browser do usuário não oferecer suporte para nenhum dos formatos indicados ou para 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
![Page 29: HTML5 - A nova fronteira no desenvolvimento de aplicações WEB](https://reader035.vdocuments.pub/reader035/viewer/2022081516/557da95fd8b42a351d8b46ab/html5/thumbnails/29.jpg)
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, indicar um link para download e incluir o uso do Flash Player para a reproduçã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/oKtdlT
flatschart.com
Container Vídeo Áudio Suporte
MPEG4 H.264 AAC Chrome, Safari, IE9
OGG Theora Vorbis Chrome, Firefox, Opera
WebM VP8 Vorbis Chrome , Firefox, IE9, Opera
![Page 30: HTML5 - A nova fronteira no desenvolvimento de aplicações WEB](https://reader035.vdocuments.pub/reader035/viewer/2022081516/557da95fd8b42a351d8b46ab/html5/thumbnails/30.jpg)
APIS
O HTML não é uma linguagem de programação
flatschart.com
![Page 31: HTML5 - A nova fronteira no desenvolvimento de aplicações WEB](https://reader035.vdocuments.pub/reader035/viewer/2022081516/557da95fd8b42a351d8b46ab/html5/thumbnails/31.jpg)
APIs “O HTML não é uma linguagem de programação” Apesar desta afirmação soar estranha para muitos, sempre devemos lembrar de que o HTML é 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
![Page 32: HTML5 - A nova fronteira no desenvolvimento de aplicações WEB](https://reader035.vdocuments.pub/reader035/viewer/2022081516/557da95fd8b42a351d8b46ab/html5/thumbnails/32.jpg)
ESTILO
O estilo está sob as palavras como dentro delas. É igualmente a alma e a carne de uma obra
flatschart.com
![Page 33: HTML5 - A nova fronteira no desenvolvimento de aplicações WEB](https://reader035.vdocuments.pub/reader035/viewer/2022081516/557da95fd8b42a351d8b46ab/html5/thumbnails/33.jpg)
CSS3 @font-face Efeitos de texto Colunas Cor e transparência Bordas Transições Animações Media queries http://bit.ly/p4vtpS http://slides.html5rocks.com/#css3-title
flatschart.com
![Page 34: HTML5 - A nova fronteira no desenvolvimento de aplicações WEB](https://reader035.vdocuments.pub/reader035/viewer/2022081516/557da95fd8b42a351d8b46ab/html5/thumbnails/34.jpg)
WEB APPS
Mobile não é uma tecnologia é um estilo de vida
flatschart.com
![Page 35: HTML5 - A nova fronteira no desenvolvimento de aplicações WEB](https://reader035.vdocuments.pub/reader035/viewer/2022081516/557da95fd8b42a351d8b46ab/html5/thumbnails/35.jpg)
flatschart.com
![Page 36: HTML5 - A nova fronteira no desenvolvimento de aplicações WEB](https://reader035.vdocuments.pub/reader035/viewer/2022081516/557da95fd8b42a351d8b46ab/html5/thumbnails/36.jpg)
Aplicativos Mobile HTML5
Playboy
Financial Times
Zeewe
flatschart.com
![Page 37: HTML5 - A nova fronteira no desenvolvimento de aplicações WEB](https://reader035.vdocuments.pub/reader035/viewer/2022081516/557da95fd8b42a351d8b46ab/html5/thumbnails/37.jpg)
MINI CASE Mudança do fluxo de traballho
flatschart.com
![Page 38: HTML5 - A nova fronteira no desenvolvimento de aplicações WEB](https://reader035.vdocuments.pub/reader035/viewer/2022081516/557da95fd8b42a351d8b46ab/html5/thumbnails/38.jpg)
Mini Case Parceria com a Soyuz Sistemas Migração do fluxo de trabalho para produção de apresentações em HTML5 para Sistema UNO Internacional do Grupo Santillana / Editora Moderna Envolvimento e treinamento da equipe Designers | Developers Do PSD ao CODE com semântica Crossbrowser Permite distribuição para iOS e Android Permite empacotamento Adobe AIR (Webkit) Base para produção de futura ferramenta colaborativa
flatschart.com
![Page 39: HTML5 - A nova fronteira no desenvolvimento de aplicações WEB](https://reader035.vdocuments.pub/reader035/viewer/2022081516/557da95fd8b42a351d8b46ab/html5/thumbnails/39.jpg)
LINKS E REFERÊNCIAS Você é o que você compartilha
flatschart.com
![Page 40: HTML5 - A nova fronteira no desenvolvimento de aplicações WEB](https://reader035.vdocuments.pub/reader035/viewer/2022081516/557da95fd8b42a351d8b46ab/html5/thumbnails/40.jpg)
Links e Referências Livro HTML5 – Embarque Imediato http://flatschart.com/html5/ HTML5 Doctor, helping you implement HTML5 today http://html5doctor.com/ DIVE INTO HTML5 http://diveintohtml5.org/ HTML5: Edition for Web Authors http://dev.w3.org/html5/spec-author-view/ W3C Brasil http://www.w3c.br Curso de HTML5 do W3C Brasil http://www.w3c.br/Cursos/CursoHTML5 Stickman http://www.drawastickman.com/ 20 Lições - Google http://www.20thingsilearned.com/pt-BR
Adobe HTML5 and CSS3 development http://www.adobe.com/devnet/html5.html HTML5 and CSS3 - Adobe - The Expressive Web - Beta http://beta.theexpressiveweb.com/ Adobe Dreamweaver CS5.5 http://www.adobe.com/br/products/dreamweaver.html Adobe Labs http://labs.adobe.com/
flatschart.com
![Page 41: HTML5 - A nova fronteira no desenvolvimento de aplicações WEB](https://reader035.vdocuments.pub/reader035/viewer/2022081516/557da95fd8b42a351d8b46ab/html5/thumbnails/41.jpg)
PUBLICAÇÕES Fica a dica
flatschart.com
![Page 43: HTML5 - A nova fronteira no desenvolvimento de aplicações WEB](https://reader035.vdocuments.pub/reader035/viewer/2022081516/557da95fd8b42a351d8b46ab/html5/thumbnails/43.jpg)
Muito obrigado !
@fabioflat
flatschart.com
flatschart.com