html5 sestinfo 2012

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

http://pt.wikipedia.org/wiki/HTML

http://pt.wikipedia.org/wiki/HTML

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



Adoção do HTML5

http://html5test.com

7



Adoção do HTML5no mobile

http://mobilehtml5.org/

8



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


22


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

http://www.html5rocks.com/pt/

http://www.html5rocks.com/pt/





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://www.html5rocks.com/

http://www.html5rocks.com/









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

html5 sestinfo 2012

Documents