html5 sestinfo 2012
DESCRIPTION
Palestra HTML5- Novidades, adoção e mobile apresentada durante a SestInfo 2012 na Universidade Metodista de São Paulo.TRANSCRIPT
novidades, adoção e mobile.Rafael Guimarães Sakurai @rafaelsakurai
Rodrigo Cascarrolho @rodrigocasca
SESTINFO 2012Universidade Metodista de São Paulo
1
Web
Evolução do HTML
Adoção do HTML5
HTML5
APIs do HTML5
HTML5 no mobile
Referências
Agenda
2
Web1992����������� ������������������ -����������� ������������������ Web����������� ������������������ 1.0Web����������� ������������������ Sintática����������� ������������������ -����������� ������������������ documentos
2003����������� ������������������ -����������� ������������������ Web����������� ������������������ SocialMashup
1992 - Web 1.0Web sintática - documentos
2006����������� ������������������ Interpretações,����������� ������������������
inferências����������� ������������������ e����������� ������������������ relações
3
HTML (HYPERTEXT MARKUP LANGUAGE - LINGUAGEM DE MARCAÇÃO DE HIPERTEXTO) É UMA LINGUAGEM DE MARCAÇÃO
UTILIZADA PARA PRODUZIR PÁGINAS NA WEB E SÃO INTERPRETADOS POR NAVEGADORES.
(HTTP://PT.WIKIPEDIA.ORG/WIKI/HTML)
<HTML> <HEAD> <TITLE>TÍTULO DA PÁGINA</TITLE>
<META NAME="KEYWORDS" CONTENT="HTML, CSS, XML" /> </HEAD> <BODY> <H1>PRIMEIRO NÍVEL DÉ TÍTULO.</H1> <P>APENAS UM PARÁGRAFO.</P> </BODY></HTML>
O que é HTML?
4
História HTML199119951997199920002001
2004200720142022
HTML 1.0HTML 2.0jan/HTML 3.2 - dez/HTML4HTML 4.01XHTML 1.0XHTML 1.1
XHTML 2.0 - W3CUnião WHATWG + W3C
HTML5 - WHATWG
HTML5 - FINAL100% completo*
1996 CSS1 + JavaScript
1998 CSS2
2002 Tableless
2005 Ajax
5
Adoção do HTML5
http://html5readiness.com/
HTML5 PARSINGCORS
CONTENTEDITABLE
SVG
GEOLOCATION
SVG FILTERS
FORMS
WEB SOCKET
WEB W
ORKERS
DRAG AND DROPCAN
VASVIDEO
AUDIO
WEB STO
RAGE
QUERY SELECTO
RBO
RDER
RADIU
S
MULTIPLE BACKGROUNDS
MEDIA QUERIESTABLE DISPLAYTRANSITIONS@FONT-FACEFLEX
BOX LAYOUT
GENERA
TED CO
NTENT
TRANSFO
RMS
ANIM
ATIO
NS
SVG
AS BAC
KGRO
UND
3D T
RANS
FORM
S
DATA
URI
S
INDEX
ED D
ATA
BASE
6
HTML5
+ +HTML<!doctype����������� ������������������ html><html>����������� ������������������ ����������� ������������������ <head>����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ <meta����������� ������������������ charset="utf-8"����������� ������������������ />����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ <title>Html5</title>����������� ������������������ ����������� ������������������ </head>����������� ������������������ ����������� ������������������ <body>����������� ������������������ ����������� ������������������ </body></html>
Marcação
CSS3<link����������� ������������������ rel="stylesheet"����������� ������������������ href="estilo.css">
Apresentação
JavaScript
<script����������� ������������������ src="arquivo.js"></script>
Comportamento
9
Semântica Armazenamento Arquivo Conectividade
Multimídia 3D/Gráficos Desempenho Apresentação
HTML5NovasAPIs
10
• Novos elementos de mídia.
• Novos elementos estruturais.
• Novos atributos.
• Novos tipos de formulário.
• Novos tipos de relação de links.
• Nova semântica para a internacionalização.
• Nova sintaxe de microdados para semântica adicional.
HTML5 - Semântica<!doctype����������� ������������������ html><html>����������� ������������������ ����������� ������������������ <head>����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ <meta����������� ������������������ charset="utf-8"����������� ������������������ />����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ <title>Html5</title>����������� ������������������ ����������� ������������������ </head>����������� ������������������ ����������� ������������������ <body>����������� ������������������ ����������� ������������������ </body></html>
11
HTML5 - Semântica
HTML4
HTML5
novas tagsfacilita uso de JavaScriptSEO - Search Engine Optimization
12
HTML5 - Semântica
<form> <label for="CEP">CEP: <input type=”text” id="CEP" required pattern="\d{5}-?\d{3}" /> </label>
<input type="email" required placeholder=”[email protected]" />
<input type="number" name="quantity" min="1" max="5" />
<input type="color" />
<input type="submit" value="Enviar" /></form>
Sem necessidade de JS para validações
Novos tipo
s input
13
HTML5 - Armazenamento
• Web Storage.
• Cache da aplicação.
• Indexed Database API.
• Eventos online e offline.
14
HTML5 - Armazenamento
localStorage.setItem(“nome”, “Rafael Sakurai”);
localStorage.getItem(“nome”);
localStorage.removeItem(“nome”);
localStorage.clear();Web����������� ������������������ Storage
Chave Valorguardar
pegar
apagar
limpar
15
HTML5 - Acesso ao Arquivo
• Ler arquivo (síncrono ou assíncrono).
• Gravar arquivo temporário.
• Arrastar e soltar (drag-and-drop).
• Upload.
• Validações (formato, tamanho, etc).
• Gravação off-line.
16
HTML5 - Acesso ao Arquivo
var����������� ������������������ file����������� ������������������ =����������� ������������������ event.dataTransfer.files[0];getElementById('name').textContent����������� ������������������ =����������� ������������������ file.fileName;getElementById('size').textContent����������� ������������������ =����������� ������������������ file.fileSize;getElementById('type').textContent����������� ������������������ =����������� ������������������ file.type;getElementById('last').textContent����������� ������������������ =����������� ������������������ file.lastModifiedDate.toString();
var����������� ������������������ fs����������� ������������������ =����������� ������������������ requestFileSystemSync(TEMPORARY,����������� ������������������ 1024*1024);var����������� ������������������ fileEntry����������� ������������������ =����������� ������������������ fs.root.getFile('log.txt',����������� ������������������ {create:����������� ������������������ true});
Criar um arquivo
temporário
17
HTML5 - Conectividade
• Web Sockets e Server-Sent Events(SSE).
• Web Sockets são bidirecionais.
• SSE - push.
• Aplicação: chat, jogos, monitoramento (jogos, saúde, processos de TI).
18
HTML5 - Conectividade
var����������� ������������������ source����������� ������������������ =����������� ������������������ new����������� ������������������ EventSource('/stats');source.addEventListener('connections',����������� ������������������ updateConnections,false);source.addEventListener('requests',����������� ������������������ updateRequests,����������� ������������������ false);source.addEventListener('uptime',����������� ������������������ updateUptime,����������� ������������������ false);
var����������� ������������������ connection����������� ������������������ =����������� ������������������ new����������� ������������������ WebSocket('ws://dominio/texto',����������� ������������������ ['soap',����������� ������������������ 'xmpp']);connection.onmessage����������� ������������������ =����������� ������������������ function����������� ������������������ (e)����������� ������������������ {����������� ������������������ ����������� ������������������ console.log('Server:����������� ������������������ '����������� ������������������ +����������� ������������������ e.data);};connection.send('your����������� ������������������ message');
Web Socket
SSE
19
HTML5 - Multimídia
<audio����������� ������������������ id="id_audio"����������� ������������������ src="arquivo.mp3"����������� ������������������ controls></audio>
MP3, Wav, Ogg
<video����������� ������������������ id="video"����������� ������������������ autoplay="true"����������� ������������������ controls>����������� ������������������ <source����������� ������������������ src="BigBuckBunny_640x360.mp4"����������� ������������������ type="video/mp4"/></video>
MP4, WebM, Ogg
video����������� ������������������ =����������� ������������������ document.getElementById('video');if����������� ������������������ (video.paused����������� ������������������ ==����������� ������������������ false)����������� ������������������ {video.pause();
}����������� ������������������ else����������� ������������������ {video.play();
}20
HTML5 - 3D/Gráficos
2D Canvas
var canvas = document.getElementById('cubo');var context = canvas.getContext('2d');
context.beginPath();context.lineWidth = 4;context.clearRect (75, 75, 70, 70); context.strokeRect(75, 75, 70, 70);context.clearRect (50, 50, 70, 70); context.strokeRect(50, 50, 70, 70);context.clearRect (75, 75, 45, 45); context.strokeRect(75, 75, 45, 45);context.moveTo(75, 75); context.lineTo(50, 50); context.moveTo(146, 75); context.lineTo(120, 50); context.moveTo(50, 120); context.lineTo(75, 145); context.moveTo(120, 120); context.lineTo(145, 145); context.stroke();context.closePath();
21
HTML5 - 3D/Gráficos
22
HTML5 - 3D/Gráficos
23
HTML5 - Desempenho
• Aceleração do hardware.
• Cache local e database indexada.
• Retorna de chamadas assíncronas.
• Sprites (muitas imagens em um único arquivo).
• Diminuir tamanho de js, css e html.
24
HTML5 - Desempenho
http://peacekeeper.futuremark.com
http://ie.microsoft.com/testdrive/Views/SiteMap
25
HTML5 - Desempenho
26
HTML5 - Apresentação
27
HTML5 - Mobile
28
HTML5 - Mobile
• Microfone
• Camera
• Orientação (Landscape ou Portrait)
• Tela multi toque
• Gestos
• GPS
• Navegadores
29
HTML5 - Mobile<meta name="viewport" content="width=device-width, initial-scale=2.0">
30
HTML5 - Mobile@media screen and (orientation: portrait) { #orientation:after { content: "Portrait orientation"; } body { text-align: center; font-weight: bold; color: blue; }}
@media screen and (orientation: landscape) { #orientation:after { content: "Landscape orientation"; } body { text-align: center; font-weight: bold; color: red; }}
31
Playground
http://playground.html5rocks.com/
32
Tutoriaishttp://www.html5rocks.com/pt/
http://html5doctor.com/
http://www.html-5-tutorial.com/
33
Templates
http://www.initializr.com/
http://br.html5boilerplate.com/
http://html5boilerplate.com/mobile
34
http://html5test.com/compare/browser/ff12/chrome18/ie09.html
http://en.wikipedia.org/wiki/HTML5
http://www.html5rocks.com
http://www.broken-links.com/2009/10/06/building-html5-video-controls-with-javascript/
http://html5test.com/
http://madebyevan.com/webgl-water/
Referências
35
http://chrome.angrybirds.com/
http://www.benjoffe.com/code/games/torus/
http://www.cuttherope.ie/
http://agent8ball.com/
http://bejeweled.popcap.com/html5/0.9.12.9490/html5/Bejeweled.html
http://ie.microsoft.com/testdrive/Graphics/CanvasPinball/Default.html
http://wolfenstein.bethsoft.com/game_EU.php
Referências
36
http://getfirebug.com/
http://www.opera.com/dragonfly/
http://www.smushit.com/ysmush.it/
https://developers.google.com/web-toolkit/speedtracer/
http://yslow.org/
https://developers.google.com/speed/pagespeed/
http://peacekeeper.futuremark.com/
http://ie.microsoft.com/testdrive/Views/SiteMap/
Referências
37
Obrigado!
@rafaelsakurai @rodrigocasca
38