html5 sestinfo 2012

Post on 09-Jun-2015

4.722 Views

Category:

Documents

1 Downloads

Preview:

Click to see full reader

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

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=”seunome@dominio.com" />

        <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

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

Obrigado!

@rafaelsakurai @rodrigocasca

38

top related