O poder do HTML5

Apresentação

@DavidsonAlencar

/cursoiLearn
www.iLearn.com.br
cursos@iLearn.com.br

(21) 2557.3810

Gestor Projetos Web

Professor Conteudista iLearn
• Formações Web Mobile HTML5
• Canvas Games

Objetivo
• Vantagens do HTML5
• APIs em projetos Web
• Principais benefícios

• Estágio atual do HTML5
• Evolução
• Como gerar negócios

Primeira Página na Web

Tim Berners-Lee

WHATWG

WHATWG
Web Hypertext Application Technology Working Group

Vantagens

É melhor. É o atual. É poderoso.

Vantagens

É melhor. É o atual. É poderoso.

Veio resolver uma
série de problemas

VOCÊ AINDA NÃO
ESTÁ UTILIZANDO
O HTML5?

Curiosidade…

CSS 2.1
10 anos da sua criação e até agora continua um candidato a recomendação

Compatibilidade - Desktop

http://html5test.com/results/desktop.html

Compatibilidade - Mobile

http://html5test.com/results/mobile.html

Compatibilidade – IE6 ainda existe?

Compatibilidade

http://www.modernizr.com/

Compatibilidade

HTML5

CSS3

•
•
•
•
•
•
•
•

•
•
•
•
•
•
•
•

appCache
Canvas
Drag’n Drop
HTML5 Audio/Vídeo
IndexedDB
WebSockets
Web Workers
outros...

@font-face
background-size
border-radius
Fexible box model (flexbox)
Multiple backgrounds
CSS Animations
CSS 3D Transitions
outros....

Compatibilidade

HTML5

CSS3

•
•
•
•
•
•
•
•

•
•
•
•
•
•
•
•

appCache
Canvas
Drag’n Drop
HTML5 Audio/Vídeo
IndexedDB
WebSockets
Web Workers
outros...

@font-face
background-size
border-radius
Fexible box model (flexbox)
Multiple backgrounds
CSS Animations
CSS 3D Transitions
outros....

Fallbacks e Polyfills

Compatibilidade – Navegadores

http://www.modernizr.com/

HTML5 - APIs

Semântica

CSS3

Multimídia

Acesso a
Dispositivos

Performance;
Integração

Offline;
Armazenamento

3D; Gráficos; Efeitos

Conectividade

HTML5 – APIs

Semântica

CSS3

Multimídia

Acesso a
Dispositivos

Performance;
Integração

Offline;
Armazenamento

3D; Gráficos; Efeitos

Conectividade

HTML5 – APIs – Semântica

Semântica

HTML5: Estrutura do (X)HTML
<div class=“header”>

<div class=“section”>
<div class=“header”>
<div id=“nav”>

<div class=“article”>

<div class=“footer”>

<div class=“footer”>

<div id=“aside”>

HTML5: Dados Estatísticos

Fonte: https://developers.google.com/

HTML5: Estrutura do HTML5
<header>

<section>
<header>

<nav>

<article>

<footer>

<footer>

<aside>

HTML5

Escreva menos
e
faça mais...

HTML5

...mas nem tanto!!!
<!DOCTYPE HTML>
<meta charset="utf-8">
<title>HTML5</title>
<p>Meu primeiro HTML5</p>

HTML5 – Validador da W3C
<!DOCTYPE HTML>
<meta charset="utf-8">
<title>HTML5</title>
<p>Meu primeiro programa em HTML5</p>

http://validator.w3.org/check

HTML5 – Formulário
• <input type=“???” />
type="tel"
type="search"
type="url"
type="email"
type="datetime"
type="date"
type="month"
type="week"
type="time"
type="datetime-local"
type="number"
type="range"
type="color"

HTML5 – Formulário
Atributos
•
•
•
•
•

accept=“image/*”
multiple
pattern=“([0-9]{2})”
placeholder
required

• outros...

HTML5 – DataList
<input type="text" name="bairro" list="listaSites">
<datalist id="listaSites">
<option label="iLearn" value="http://www.iLearn.com.br">
<option label="Web.br" value="http://conferenciaweb.w3c.br">
<option label="W3C Brasil" value="http://www.w3c.br">
<option label="W3C" value="http://www.w3.org">
</datalist>

HTML5 – Progress
<progress value="0" max="100" id="progress">
</progress>
<output name="result"></output>

HTML5 – MathML
Binomial Coefficient
Complex number
Divergence
Sophomore's dream

Moore determinant

HTML5 – MathML
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<mi>A</mi>
<mo>=</mo>
<mfenced open="[" close="]">
<mtable>
<mtr>
<mtd><mi>x</mi></mtd>
<mtd><mi>y</mi></mtd>
</mtr>
<mtr>
<mtd><mi>z</mi></mtd>
<mtd><mi>w</mi></mtd>
</mtr>
</mtable>
</mfenced>
</mrow>
</math>

HTML5 – abbr

<acronym>

<abbr>

<p>O <abbr title="World Wide Web Consortium"> W3C
</abbr> é responsável pela padronização da <abbr
title="World Wide Web">Web</abbr>.</p>
<p>Endereço da iLearn fica na <abbr title="Travessa">
Trv. </abbr> do Ouvidor, 17 - 3º andar</p>

HTML5 – APIs – Multimídia

Multimídia

HTML5 – APIs – Multimídia - Vídeo
<video width="500" height="400" controls>
<source src="os-simpsons.webm" type='video/webm"'>
<source src="os-simpsons.ogv" type='video/ogg"'>
<source src="os-simpsons.mp4" type='video/mp4"'>
<p>Seu navegador não suporta a tag vídeo</p>
</video>

HTML5 – APIs – Multimídia - Áudio
<audio controls>
<source src="dream-theater.aac" type="audio/aac">
<source src="dream-theater.ogg" type="audio/ogg">
<source src="dream-theater.mp3" type="audio/mpeg">
<p>seu navegador não suporta audio</p>
</audio>

HTML5 – APIs – Multimídia - GetUserMedia

navigator.getUserMedia (
config,
successCallback,
errorCallback
);

HTML5 – APIs – Multimídia - GetUserMedia

HTML5 – APIs – Device Access

Acesso a Dispositivos

HTML5 – APIs – Device Access– Ambient Light

Aumente e diminua o som com a luz

HTML5 – APIs – Device Access – Speech
<input type="text" lang="pt-br" x-webkit-speech />

HTML5 – APIs – Device Access – GeoLocation


navigator.geolocation.getCurrentPosition(
successCallback,
errorCallback,
options
);


id = navigator.geolocation.watchPosition(
successCallback,
errorCallback,
options
);
navigator.geolocation.clearWatch(id);

Taxibeat

Easy Taxi

99Taxis

HTML5 – APIs – Device Access – Device Orientation

Y

Z
X


Y

Z
X

alpha


Y

Z
X

beta


Y

Z
X

gamma

HTML5 – APIs – Device Access – Device Motion

HTML5 – APIs – Gráficos

2D/3D, Gráficos e Efeitos

HTML5 – APIs – Gráficos - Canvas

Fonte: http://www.google.com/doodles/googles-15th-birthday

HTML5 – APIs – Gráficos – Canvas

<canvas width=”300” height=”150” id=“desenho1”>
</canvas>

<canvas></canvas>

JavaScript:
• ctx.rect(x,y,l,a)
• ctx.fillRect(x,y,l,a)
• ctx.fill()
• etc..

HTML5 – APIs – Gráficos – WebGL

O futuro do HTML5
3D Web

HTML5 – APIs – Gráficos – WebGL com three.js

http://threejs.org/


http://helloracer.com/webgl/


http://gravitymovie.warnerbros.com


http://hexgl.bkcore.com/

HTML5 – APIs – Gráficos – WebGL

http://www.zygotebody.com

HTML5 – APIs – Performance

Performance e Integração

HTML5 – APIs – Performance – Drag and Drop
<div id="retangulo" ondrop="soltar(event)" ondragover="permiteSoltar(event)"></div>
<img id=“webbr" src="webbr.png" draggable="true" ondragstart="arrastar(event)" />
...

HTML5 – APIs – Performance – Conteúdo Editável
<div id="editable" contenteditable="true">
Este conteúdo é editavel.<br/><br/>
Também estou guardando via localStorage.
</div>

HTML5 – APIs – Performance – FullScreen

HTML5 – APIs – Performance – WebWorker

Web Page

processar
cálculo 1

mostrar

mostrar

cálculo 2

Web Worker
cálculo 1
processar

mostrar
cálculo 2

• Podem usar:
– Objeto navigator,
– Objeto location (somente leitura),
– Importar outros arquivos JS com o método importScripts()
– Utilizar objetos do JS como:
• Object, Array, Date, Math, String,

– Ajax – XMLHttpRequest,
– Métodos temporizadores:
• setTimeout() / clearTimeout() e setInterval() / clearInterval()

– Criar outros WebWorkers.

• Não podem usar:
– Objeto window
– Objeto document
– Objeto parent
– DOM

webpage.js

webworker.js

HTML5 – APIs – Conectividade

Conectividade

HTML5 – APIs – Conectividade – Server-Sent Event
ctivi

POLLING

HTTP
Server
Existe nova msg?

não
Existe nova msg?
não
Existe nova msg?
Davi

não
“olá”
Existe nova msg?
Davi disse: “olá”

ctivi

LONG POLLING

HTTP
Server
Existe nova msg?

não
Davi

Existe nova msg?

“olá”

ctivi

SERVER-SENT EVENT

HTTP
Server

não

não
Davi
não


“olá”

serversent.js

serversent.php

serversent.js

serversent.php

Dispara
Server-Sent Event

HTML5 – APIs – Conectividade - WebSocket
ctivi

HTTP: request e response

HTTP
Server

Davi
“olá”

Existe nova msg?

WebSocket: bidirecional

WebSocket
Server

Davi
“olá”



connection.send(‘minha mensagem’);


http://martinsikora.com/nodejs-and-websocket-simple-chat-tutorial

HTML5 – APIs – Armazenamento

Offline e Armazenamento

• Web Storage:
• localStorage x sessionStorage

•
•
•
•
•
•

WebSQL DB
Indexed DB
AppCache
File APIs
FileSystem APIs
Eventos:
• Online
• Offline


App IconPopQuiz

HTML5 – APIs – Armazenamento – WebSQL

HTML5 – APIs – Armazenamento - IndexedDB

HTML5 – APIs – CSS3

Estilos – CSS3

HTML5 – APIs – CSS3
•
•
•
•
•
•
•
•

@font-face
background-colo
border-image
border-radius
box-shadow
FlexBox
Multiple Backgrounds
Opacity

•
•
•
•
•
•
•
•

CSS Coluns
text-shadow
CSS Animations
CSS Gradientes
CSS Reflections
CSS 2D Tranformations
CSS 3D Tranformations
CSS Transitions

HTML5 – APIs – CSS3 – Media Queries
Monitor Grande

Monitor Médio

Fonte: http://stuffandnonsense.co.uk/

Tablet

Mobile

Monitor Grande
@media screen and (min-width: 1024) {

/*
Estilos aplicados em telas MAIORES
que 1024px
*/
}

Monitor Médio
@media screen and (max-width: 1024px) {

/*
Estilos aplicados em telas MENORES
que 1024px
*/
}

Tablet

/*
que 700px
*/
}

Mobile

/*
que 480px
*/
}

Página
/*Estilos da página*/
@media screen and (min-width: 1024px) {
/*customizações MONITOR GRANDE*/
}
/*customizações MONITOR MÉDIO */
}
/*customizações TABLET */
}
/*customizações MOBILE */
}

Sites Recomendados

HTML5gallery.com.br

Sites Recomendados

WebPlatform.org

Obrigado!

Publique seus site de HTML5 em

www.HTLM5Gallery.com.br
(21) 2557.3810
iLearn Treinamentos
www.iLearn.com.br
cursos@iLearn.com.br

Venha fazer convênio com o iLearn e
treine seus funcionários

Obrigado!

Davidson Alencar
davidson.t.i@gmail.com
@davidsonalencar
In/davidsonalencar
Código fonte dos exemplos: http://github.com/davidsonalencar/webbr2013

Venha fazer convênio com o iLearn e
treine seus funcionários

O poder do HTML5

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a O poder do HTML5

Semelhante a O poder do HTML5 (20)

O poder do HTML5

Notas do Editor