api's do html5 - davidson alencar - webbr2013
DESCRIPTION
Baseado no impacto dos dispositivos móveis e da sua produtividade, serão demonstradas as vantagens da adoção do HTML5 e suas APIs em projetos Web, tendo como os principais benefícios: portabilidade, fácil manutenção, otimização de recursos e resultados. Será discutido o estágio atual do HTML5, tendências, como gerar negócios com a tecnologia e também soluções que podem ser adotadas enquanto os navegadores dos dispositivos móveis não implementam todos os recursos da especificação do HTML5.TRANSCRIPT
O poder do HTML5
/cursoiLearn
www.iLearn.com.br
(21) 2557.3810
Gestor Projetos Web
Professor Conteudista iLearn
• Formações Web Mobile HTML5
• Canvas Games
@DavidsonAlencar
Apresentação
Objetivo
• Vantagens do HTML5
• APIs em projetos Web
• Principais benefícios
• Estágio atual do HTML5
• Evolução
• Como gerar negócios
A Origem
Primeira Página na Web
Tim Berners-Lee
Evolução
WHATWGWeb Hypertext Application Technology Working Group
WHATWG
A União
Dias Atuais da Web
VANTAGENS
É melhor. É o atual. É poderoso.
Vantagens
É melhor. É o atual. É poderoso.
Veio resolver umasérie de problemas
Vantagens
Cross-Plataform
Realidade
VOCÊ AINDA NÃO ESTÁ UTILIZANDO O HTML5?
POR QUAL MOTIVO?
CSS 2.1
Curiosidade…
CSS 2.110 anos da sua criação e até agora continua um candidato a recomendação
Curiosidade…
Compatibilidade
Compatibilidade - Desktop
http://html5test.com/results/desktop.html
Compatibilidade - Mobile
http://html5test.com/results/mobile.html
Compatibilidade…
Compatibilidade – IE6 ainda existe?
http://www.modernizr.com/
Compatibilidade
Compatibilidade
HTML5• appCache• Canvas• Drag’n Drop• HTML5 Audio/Vídeo• IndexedDB• WebSockets• Web Workers• outros...
CSS3• @font-face• background-size• border-radius• Fexible box model (flexbox)• Multiple backgrounds• CSS Animations• CSS 3D Transitions• outros....
Compatibilidade
HTML5• appCache• Canvas• Drag’n Drop• HTML5 Audio/Vídeo• IndexedDB• WebSockets• Web Workers• outros...
CSS3• @font-face• background-size• border-radius• Fexible box model (flexbox)• Multiple backgrounds• CSS Animations• CSS 3D Transitions• outros....
Fallbacks e Polyfills
http://www.modernizr.com/
Compatibilidade – Navegadores
HTML5 - APIs
3D; Gráficos; EfeitosMultimídia
Performance; Integração
Acesso a Dispositivos
Offline;Armazenamento Conectividade
Semântica CSS3
HTML5 - APIs
3D; Gráficos; EfeitosMultimídia
Performance; Integração
Acesso a Dispositivos
Offline;Armazenamento Conectividade
Semântica CSS3
HTML5 – APIs
3D; Gráficos; EfeitosMultimídia
Performance; Integração
Acesso a Dispositivos
Offline;Armazenamento Conectividade
Semântica CSS3
HTML5 – APIs – Semântica
Semântica
HTML5: Estrutura do (X)HTML
<div class=“header”>
<div class=“footer”>
<div id=“nav”> <div id=“aside”>
<div class=“section”>
<div class=“header”>
<div class=“footer”>
<div class=“article”>
Fonte: https://developers.google.com/
HTML5: Dados Estatísticos
<header>
<footer>
<nav> <aside>
<section>
<header>
<footer>
<article>
HTML5: Estrutura do HTML5
HTML5
Escreva menos e
faça mais...
...mas nem tanto!!!
<!DOCTYPE HTML><meta charset="utf-8"><title>HTML5</title><p>Meu primeiro HTML5</p>
HTML5
<!DOCTYPE HTML><meta charset="utf-8"><title>HTML5</title><p>Meu primeiro programa em HTML5</p>
http://validator.w3.org/check
HTML5 – Validador da W3C
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
• <input type=“???” />
Atributos
• accept=“image/*”• multiple• pattern=“\([0-9]{2}\)” • placeholder• required
• outros...
HTML5 – Formulário
<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 – DataList
<progress value="0" max="100" id="progress"></progress> <output name="result"></output>
HTML5 – Progress
HTML5 – MathML
Binomial Coefficient
Sophomore's dream
Divergence
Complex number
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>
<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>
<acronym>
HTML5 – abbr
<abbr>
HTML5 – APIs – Multimídia
Multimídia
<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 - Vídeo
<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 - Áudio
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
HTML5 – APIs – Device Access – GeoLocation
navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options
);
HTML5 – APIs – Device Access – GeoLocation
id = navigator.geolocation.watchPosition(successCallback, errorCallback, options
);navigator.geolocation.clearWatch(id);
HTML5 – APIs – Device Access – GeoLocation
Taxibeat 99Taxis
HTML5 – APIs – Device Access – GeoLocation
Easy Taxi
HTML5 – APIs – Device Access – Device Orientation
Y ZX
HTML5 – APIs – Device Access – Device Orientation
Y ZX
alpha
HTML5 – APIs – Device Access – Device Orientation
Y ZX
beta
HTML5 – APIs – Device Access – Device Orientation
YX
Z
gamma
HTML5 – APIs – Device Access – Device Orientation
HTML5 – APIs – Device Access – Device Motion
HTML5 – APIs – Gráficos
2D/3D, Gráficos e Efeitos
Fonte: http://www.google.com/doodles/googles-15th-birthday
HTML5 – APIs – Gráficos - Canvas
<canvas width=”300” height=”150” id=“desenho1”></canvas>
HTML5 – APIs – Gráficos – Canvas
<canvas></canvas>
JavaScript:• ctx.rect(x,y,l,a)• ctx.fillRect(x,y,l,a)• ctx.fill()• etc..
HTML5 – APIs – Gráficos – Canvas
HTML5 – APIs – Gráficos – Canvas
HTML5 – APIs – Gráficos – WebGL
O futuro do HTML53D Web
http://threejs.org/
HTML5 – APIs – Gráficos – WebGL com three.js
http://helloracer.com/webgl/
HTML5 – APIs – Gráficos – WebGL com three.js
http://gravitymovie.warnerbros.com
HTML5 – APIs – Gráficos – WebGL com three.js
http://hexgl.bkcore.com/
HTML5 – APIs – Gráficos – WebGL com three.js
http://www.zygotebody.com
HTML5 – APIs – Gráficos – WebGL
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
HTML5 – APIs – Performance – WebWorker
HTML5 – APIs – Performance – WebWorker
processar
cálculo 1
mostrar
cálculo 2
Web Page
processar
cálculo 2
mostrar
cálculo 1Web Worker
mostrar
HTML5 – APIs – Performance – WebWorker
• 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.
HTML5 – APIs – Performance – WebWorker
• Não podem usar:– Objeto window
– Objeto document
– Objeto parent
– DOM
HTML5 – APIs – Performance – WebWorker
webworker.js
webpage.js
HTML5 – APIs – Performance – WebWorker
webworker.js
webpage.js
HTML5 – APIs – Performance – WebWorker
webworker.js
webpage.js
HTML5 – APIs – Performance – WebWorker
HTML5 – APIs – Conectividade
Conectividade
HTML5 – APIs – Conectividade – Server-Sent Event
ctiviHTTP
ServerPOLLING
Existe nova msg?
não
“olá”
Davi
Existe nova msg?
não
Existe nova msg?
não
Existe nova msg?
Davi disse: “olá”
HTML5 – APIs – Conectividade – Server-Sent Event
ctiviHTTP
ServerLONG POLLING
Existe nova msg?
não
“olá”
DaviExiste nova msg?
Davi disse: “olá”
HTML5 – APIs – Conectividade – Server-Sent Event
ctiviHTTP
ServerSERVER-SENT EVENT
“olá”
Davi
não
não
não
Davi disse: “olá”
HTML5 – APIs – Conectividade – Server-Sent Event
serversent.js
serversent.php
HTML5 – APIs – Conectividade – Server-Sent Event
serversent.js
serversent.php
HTML5 – APIs – Conectividade – Server-Sent Event
serversent.js
serversent.php
HTML5 – APIs – Conectividade – Server-Sent Event
serversent.js
serversent.php
Dispara Server-Sent Event
HTML5 – APIs – Conectividade – Server-Sent Event
serversent.js
serversent.php
HTML5 – APIs – Conectividade - WebSocket
ctiviHTTP
Server
WebSocketServer
HTTP: request e response
WebSocket: bidirecional
Existe nova msg?
Davi disse: “olá”
“olá”
Davi
Davi
Davi disse: “olá”
“olá”
HTML5 – APIs – Conectividade - WebSocket
HTML5 – APIs – Conectividade - WebSocket
connection.send(‘minha mensagem’);
HTML5 – APIs – Conectividade - WebSocket
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
HTML5 – APIs – Armazenamento
HTML5 – APIs – Armazenamento
App IconPopQuiz
HTML5 – APIs – Armazenamento – WebSQL
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
Fonte: http://stuffandnonsense.co.uk/
Monitor Grande Monitor Médio Tablet Mobile
HTML5 – APIs – CSS3 – Media Queries
Monitor Grande
@media screen and (min-width: 1024) { /* Estilos aplicados em telas MAIORES que 1024px */ }
HTML5 – APIs – CSS3 – Media Queries
Monitor Médio
@media screen and (max-width: 1024px) { /* Estilos aplicados em telas MENORES que 1024px */ }
HTML5 – APIs – CSS3 – Media Queries
Tablet
@media screen and (max-width: 700px) { /* Estilos aplicados em telas MENORES que 700px */ }
HTML5 – APIs – CSS3 – Media Queries
Mobile
@media screen and (max-width: 480px) { /* Estilos aplicados em telas MENORES que 480px */ }
HTML5 – APIs – CSS3 – Media Queries
Página
/*Estilos da página*/
@media screen and (min-width: 1024px) { /*customizações MONITOR GRANDE*/ }
@media screen and (max-width: 1024px) { /*customizações MONITOR MÉDIO */}
@media screen and (max-width: 700px) { /*customizações TABLET */}
@media screen and (max-width: 1024px) { /*customizações MOBILE */}
Sites Recomendados:
HTML5gallery.com.br
Sites Recomendados
Sites Recomendados
WebPlatform.org
Sites Recomendados
(21) 2557.3810iLearn Treinamentoswww.iLearn.com.br
Publique seus site de HTML5 em
www.HTLM5Gallery.com.br
Venha fazer convênio com o iLearn e treine seus funcionários
Obrigado!
Davidson [email protected]
@davidsonalencarIn/davidsonalencar
Código fonte dos exemplos: http://github.com/davidsonalencar/webbr2013
Venha fazer convênio com o iLearn e treine seus funcionários
Obrigado!