O poder do HTML5
Apresentação

@DavidsonAlencar

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

(21) 2557.3810

Gestor Projetos Web

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

• Estágio atual do HTML5
• Evolução
• Como g...
A Origem
Primeira Página na Web

Tim Berners-Lee
Evolução
WHATWG

WHATWG
Web Hypertext Application Technology Working Group
A União
Dias Atuais da Web
VANTAGENS
Vantagens

É melhor. É o atual. É poderoso.
Vantagens

É melhor. É o atual. É poderoso.

Veio resolver uma
série de problemas
Realidade

Cross-Plataform
VOCÊ AINDA NÃO
ESTÁ UTILIZANDO
O HTML5?
POR QUAL
MOTIVO?
Curiosidade…

CSS 2.1
Curiosidade…

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

http://html5test.com/results/desktop.html
Compatibilidade - Mobile

http://html5test.com/results/mobile.html
Compatibilidade…
Compatibilidade – IE6 ainda existe?
Compatibilidade

http://www.modernizr.com/
Compatibilidade

HTML5

CSS3

•
•
•
•
•
•
•
•

•
•
•
•
•
•
•
•

appCache
Canvas
Drag’n Drop
HTML5 Audio/Vídeo
IndexedDB
We...
Compatibilidade

HTML5

CSS3

•
•
•
•
•
•
•
•

•
•
•
•
•
•
•
•

appCache
Canvas
Drag’n Drop
HTML5 Audio/Vídeo
IndexedDB
We...
Compatibilidade – Navegadores

http://www.modernizr.com/
HTML5 - APIs

Semântica

CSS3

Multimídia

Acesso a
Dispositivos

Performance;
Integração

Offline;
Armazenamento

3D; Grá...
HTML5 - APIs

Semântica

CSS3

Multimídia

Acesso a
Dispositivos

Performance;
Integração

Offline;
Armazenamento

3D; Grá...
HTML5 – APIs

Semântica

CSS3

Multimídia

Acesso a
Dispositivos

Performance;
Integração

Offline;
Armazenamento

3D; Grá...
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=“a...
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>...
HTML5 – Formulário
• <input type=“???” />
type="tel"
type="search"
type="url"
type="email"
type="datetime"
type="date"
typ...
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" val...
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="]">...
HTML5 – abbr

<acronym>

<abbr>

<p>O <abbr title="World Wide Web Consortium"> W3C
</abbr> é responsável pela padronização...
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/web...
HTML5 – APIs – Multimídia - Áudio
<audio controls>
<source src="dream-theater.aac" type="audio/aac">
<source src="dream-th...
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,
opti...
HTML5 – APIs – Device Access – GeoLocation

id = navigator.geolocation.watchPosition(
successCallback,
errorCallback,
opti...
HTML5 – APIs – Device Access – GeoLocation
HTML5 – APIs – Device Access – GeoLocation
Taxibeat

Easy Taxi

99Taxis
HTML5 – APIs – Device Access – Device Orientation

Y

Z
X
HTML5 – APIs – Device Access – Device Orientation

Y

Z
X

alpha
HTML5 – APIs – Device Access – Device Orientation

Y

Z
X

beta
HTML5 – APIs – Device Access – Device Orientation

Y

Z
X

gamma
HTML5 – APIs – Device Access – Device Orientation
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>
HTML5 – APIs – Gráficos – Canvas
<canvas></canvas>

JavaScript:
• ctx.rect(x,y,l,a)
• ctx.fillRect(x,y,l,a)
• ctx.fill()
•...
HTML5 – APIs – Gráficos – Canvas
HTML5 – APIs – Gráficos – WebGL

O futuro do HTML5
3D Web
HTML5 – APIs – Gráficos – WebGL com three.js

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

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)"></...
HTML5 – APIs – Performance – Conteúdo Editável
<div id="editable" contenteditable="true">
Este conteúdo é editavel.<br/><b...
HTML5 – APIs – Performance – FullScreen
HTML5 – APIs – Performance – WebWorker
HTML5 – APIs – Performance – WebWorker
HTML5 – APIs – Performance – WebWorker
Web Page

processar
cálculo 1

mostrar

mostrar

cálculo 2

Web Worker
cálculo 1
pr...
HTML5 – APIs – Performance – WebWorker
• Podem usar:
– Objeto navigator,
– Objeto location (somente leitura),
– Importar o...
HTML5 – APIs – Performance – WebWorker
• Não podem usar:
– Objeto window
– Objeto document
– Objeto parent
– DOM
HTML5 – APIs – Performance – WebWorker
webpage.js

webworker.js
HTML5 – APIs – Performance – WebWorker
webpage.js

webworker.js
HTML5 – APIs – Performance – WebWorker
webpage.js

webworker.js
HTML5 – APIs – Performance – WebWorker
HTML5 – APIs – Conectividade

Conectividade
HTML5 – APIs – Conectividade – Server-Sent Event
ctivi

POLLING

HTTP
Server
Existe nova msg?

não
Existe nova msg?
não
Ex...
HTML5 – APIs – Conectividade – Server-Sent Event
ctivi

LONG POLLING

HTTP
Server
Existe nova msg?

não
Davi

Existe nova ...
HTML5 – APIs – Conectividade – Server-Sent Event
ctivi

SERVER-SENT EVENT

HTTP
Server

não

não
Davi
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
ctivi

HTTP: request e response

HTTP
Server

Davi
“olá”

Existe nova msg?
Davi d...
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
HTML5 – APIs – Armazenamento
• Web Storage:
• localStorage x sessionStorage

•
•
•
•
•
•

WebSQL DB
Indexed DB
AppCache
Fi...
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 Bac...
HTML5 – APIs – CSS3 – Media Queries
Monitor Grande

Monitor Médio

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

Tablet

Mobile
HTML5 – APIs – CSS3 – Media Queries
Monitor Grande
@media screen and (min-width: 1024) {

/*
Estilos aplicados em telas MA...
HTML5 – APIs – CSS3 – Media Queries
Monitor Médio
@media screen and (max-width: 1024px) {

/*
Estilos aplicados em telas M...
HTML5 – APIs – CSS3 – Media Queries
Tablet
@media screen and (max-width: 700px) {

/*
Estilos aplicados em telas MENORES
q...
HTML5 – APIs – CSS3 – Media Queries
Mobile
@media screen and (max-width: 480px) {

/*
Estilos aplicados em telas MENORES
q...
HTML5 – APIs – CSS3 – Media Queries
Página
/*Estilos da página*/
@media screen and (min-width: 1024px) {
/*customizações M...
Sites Recomendados:
Sites Recomendados

HTML5gallery.com.br
Sites Recomendados
Sites Recomendados

WebPlatform.org
Obrigado!

Publique seus site de HTML5 em

www.HTLM5Gallery.com.br
(21) 2557.3810
iLearn Treinamentos
www.iLearn.com.br
cu...
Obrigado!

Davidson Alencar
davidson.t.i@gmail.com
@davidsonalencar
In/davidsonalencar
Código fonte dos exemplos: http://g...
API's do HTML5 - Davidson Alencar - WebBR2013
Upcoming SlideShare
Loading in …5
×

API's do HTML5 - Davidson Alencar - WebBR2013

920 views

Published on

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.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
920
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
10
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • 94
  • Emresposta do lento desenvolvimento da w3cnaespecificacao de novospadroes web2004
  • 2007
  • ----- Meeting Notes (16/11/13 19:19) -----class
  • Outros exemplos: NASA, GUI etc
  • Nos meus teste nao funcionou no chrome
  • Outros exemplos: NASA, GUI etc
  • ----- Meeting Notes (16/11/13 20:05) -----acesso a dispositivo
  • http://slides.html5rocks.com/#geolocation----- Meeting Notes (16/11/13 20:05) -----numero correto do ambient light
  • http://slides.html5rocks.com/#geolocation
  • http://slides.html5rocks.com/#geolocation
  • http://slides.html5rocks.com/#geolocation
  • http://slides.html5rocks.com/#geolocation
  • http://slides.html5rocks.com/#geolocation
  • http://slides.html5rocks.com/#geolocation
  • http://slides.html5rocks.com/#geolocation
  • http://slides.html5rocks.com/#geolocation
  • http://slides.html5rocks.com/#geolocation
  • http://slides.html5rocks.com/#geolocation
  • http://slides.html5rocks.com/#geolocation
  • Sobrecarrega http
  • Evolve hack para um processoinfinitoinfinito
  • Projetadoparasereficiente, cria um canal unidirecional doservidorpara o cliente,ReconexaoautomaticaSao enviadotradicionalmentepelo http
  • Websocket –protocoloricobidirecionl. Cria um canal de duasvias, maisatraenteem -&gt;Exemplos: jogos, app de mensagens, qualquersistema de tempo realStatus de amigos, cotaçoes de acoes, noticiasDominiodiferenteNaoesquecam do ajaxxmlhttprequest
  • ----- Meeting Notes (16/11/13 21:02) -----identificar exemplos reais
  • ----- Meeting Notes (16/11/13 21:02) -----identificar exemplos reais
  • http://www.w3.org/TR/css3-mediaqueries/http://guilhermegoulart.wordpress.com/category/web-design/css/
  • API's do HTML5 - Davidson Alencar - WebBR2013

    1. 1. O poder do HTML5
    2. 2. 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
    3. 3. Objetivo • Vantagens do HTML5 • APIs em projetos Web • Principais benefícios • Estágio atual do HTML5 • Evolução • Como gerar negócios
    4. 4. A Origem
    5. 5. Primeira Página na Web Tim Berners-Lee
    6. 6. Evolução
    7. 7. WHATWG WHATWG Web Hypertext Application Technology Working Group
    8. 8. A União
    9. 9. Dias Atuais da Web
    10. 10. VANTAGENS
    11. 11. Vantagens É melhor. É o atual. É poderoso.
    12. 12. Vantagens É melhor. É o atual. É poderoso. Veio resolver uma série de problemas
    13. 13. Realidade Cross-Plataform
    14. 14. VOCÊ AINDA NÃO ESTÁ UTILIZANDO O HTML5?
    15. 15. POR QUAL MOTIVO?
    16. 16. Curiosidade… CSS 2.1
    17. 17. Curiosidade… CSS 2.1 10 anos da sua criação e até agora continua um candidato a recomendação
    18. 18. Compatibilidade
    19. 19. Compatibilidade - Desktop http://html5test.com/results/desktop.html
    20. 20. Compatibilidade - Mobile http://html5test.com/results/mobile.html
    21. 21. Compatibilidade…
    22. 22. Compatibilidade – IE6 ainda existe?
    23. 23. Compatibilidade http://www.modernizr.com/
    24. 24. 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....
    25. 25. 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
    26. 26. Compatibilidade – Navegadores http://www.modernizr.com/
    27. 27. HTML5 - APIs Semântica CSS3 Multimídia Acesso a Dispositivos Performance; Integração Offline; Armazenamento 3D; Gráficos; Efeitos Conectividade
    28. 28. HTML5 - APIs Semântica CSS3 Multimídia Acesso a Dispositivos Performance; Integração Offline; Armazenamento 3D; Gráficos; Efeitos Conectividade
    29. 29. HTML5 – APIs Semântica CSS3 Multimídia Acesso a Dispositivos Performance; Integração Offline; Armazenamento 3D; Gráficos; Efeitos Conectividade
    30. 30. HTML5 – APIs – Semântica Semântica
    31. 31. 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”>
    32. 32. HTML5: Dados Estatísticos Fonte: https://developers.google.com/
    33. 33. HTML5: Estrutura do HTML5 <header> <section> <header> <nav> <article> <footer> <footer> <aside>
    34. 34. HTML5 Escreva menos e faça mais...
    35. 35. HTML5 ...mas nem tanto!!! <!DOCTYPE HTML> <meta charset="utf-8"> <title>HTML5</title> <p>Meu primeiro HTML5</p>
    36. 36. 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
    37. 37. 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"
    38. 38. HTML5 – Formulário Atributos • • • • • accept=“image/*” multiple pattern=“([0-9]{2})” placeholder required • outros...
    39. 39. 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>
    40. 40. HTML5 – Progress <progress value="0" max="100" id="progress"> </progress> <output name="result"></output>
    41. 41. HTML5 – MathML Binomial Coefficient Complex number Divergence Sophomore's dream Moore determinant
    42. 42. 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>
    43. 43. 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>
    44. 44. HTML5 – APIs – Multimídia Multimídia
    45. 45. 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>
    46. 46. 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>
    47. 47. HTML5 – APIs – Multimídia - GetUserMedia navigator.getUserMedia ( config, successCallback, errorCallback );
    48. 48. HTML5 – APIs – Multimídia - GetUserMedia
    49. 49. HTML5 – APIs – Device Access Acesso a Dispositivos
    50. 50. HTML5 – APIs – Device Access– Ambient Light Aumente e diminua o som com a luz
    51. 51. HTML5 – APIs – Device Access – Speech <input type="text" lang="pt-br" x-webkit-speech />
    52. 52. HTML5 – APIs – Device Access – GeoLocation
    53. 53. HTML5 – APIs – Device Access – GeoLocation navigator.geolocation.getCurrentPosition( successCallback, errorCallback, options );
    54. 54. HTML5 – APIs – Device Access – GeoLocation id = navigator.geolocation.watchPosition( successCallback, errorCallback, options ); navigator.geolocation.clearWatch(id);
    55. 55. HTML5 – APIs – Device Access – GeoLocation
    56. 56. HTML5 – APIs – Device Access – GeoLocation Taxibeat Easy Taxi 99Taxis
    57. 57. HTML5 – APIs – Device Access – Device Orientation Y Z X
    58. 58. HTML5 – APIs – Device Access – Device Orientation Y Z X alpha
    59. 59. HTML5 – APIs – Device Access – Device Orientation Y Z X beta
    60. 60. HTML5 – APIs – Device Access – Device Orientation Y Z X gamma
    61. 61. HTML5 – APIs – Device Access – Device Orientation
    62. 62. HTML5 – APIs – Device Access – Device Motion
    63. 63. HTML5 – APIs – Gráficos 2D/3D, Gráficos e Efeitos
    64. 64. HTML5 – APIs – Gráficos - Canvas Fonte: http://www.google.com/doodles/googles-15th-birthday
    65. 65. HTML5 – APIs – Gráficos – Canvas <canvas width=”300” height=”150” id=“desenho1”> </canvas>
    66. 66. HTML5 – APIs – Gráficos – Canvas <canvas></canvas> JavaScript: • ctx.rect(x,y,l,a) • ctx.fillRect(x,y,l,a) • ctx.fill() • etc..
    67. 67. HTML5 – APIs – Gráficos – Canvas
    68. 68. HTML5 – APIs – Gráficos – WebGL O futuro do HTML5 3D Web
    69. 69. HTML5 – APIs – Gráficos – WebGL com three.js http://threejs.org/
    70. 70. HTML5 – APIs – Gráficos – WebGL com three.js http://helloracer.com/webgl/
    71. 71. HTML5 – APIs – Gráficos – WebGL com three.js http://gravitymovie.warnerbros.com
    72. 72. HTML5 – APIs – Gráficos – WebGL com three.js http://hexgl.bkcore.com/
    73. 73. HTML5 – APIs – Gráficos – WebGL http://www.zygotebody.com
    74. 74. HTML5 – APIs – Performance Performance e Integração
    75. 75. 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)" /> ...
    76. 76. 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>
    77. 77. HTML5 – APIs – Performance – FullScreen
    78. 78. HTML5 – APIs – Performance – WebWorker
    79. 79. HTML5 – APIs – Performance – WebWorker
    80. 80. 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
    81. 81. 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.
    82. 82. HTML5 – APIs – Performance – WebWorker • Não podem usar: – Objeto window – Objeto document – Objeto parent – DOM
    83. 83. HTML5 – APIs – Performance – WebWorker webpage.js webworker.js
    84. 84. HTML5 – APIs – Performance – WebWorker webpage.js webworker.js
    85. 85. HTML5 – APIs – Performance – WebWorker webpage.js webworker.js
    86. 86. HTML5 – APIs – Performance – WebWorker
    87. 87. HTML5 – APIs – Conectividade Conectividade
    88. 88. 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á”
    89. 89. HTML5 – APIs – Conectividade – Server-Sent Event ctivi LONG POLLING HTTP Server Existe nova msg? não Davi Existe nova msg? “olá” Davi disse: “olá”
    90. 90. HTML5 – APIs – Conectividade – Server-Sent Event ctivi SERVER-SENT EVENT HTTP Server não não Davi não Davi disse: “olá” “olá”
    91. 91. HTML5 – APIs – Conectividade – Server-Sent Event serversent.js serversent.php
    92. 92. HTML5 – APIs – Conectividade – Server-Sent Event serversent.js serversent.php
    93. 93. HTML5 – APIs – Conectividade – Server-Sent Event serversent.js serversent.php
    94. 94. HTML5 – APIs – Conectividade – Server-Sent Event serversent.js serversent.php Dispara Server-Sent Event
    95. 95. HTML5 – APIs – Conectividade – Server-Sent Event serversent.js serversent.php
    96. 96. HTML5 – APIs – Conectividade - WebSocket ctivi HTTP: request e response HTTP Server Davi “olá” Existe nova msg? Davi disse: “olá” WebSocket: bidirecional WebSocket Server Davi “olá” Davi disse: “olá”
    97. 97. HTML5 – APIs – Conectividade - WebSocket
    98. 98. HTML5 – APIs – Conectividade - WebSocket connection.send(‘minha mensagem’);
    99. 99. HTML5 – APIs – Conectividade - WebSocket http://martinsikora.com/nodejs-and-websocket-simple-chat-tutorial
    100. 100. HTML5 – APIs – Armazenamento Offline e Armazenamento
    101. 101. HTML5 – APIs – Armazenamento • Web Storage: • localStorage x sessionStorage • • • • • • WebSQL DB Indexed DB AppCache File APIs FileSystem APIs Eventos: • Online • Offline
    102. 102. HTML5 – APIs – Armazenamento App IconPopQuiz
    103. 103. HTML5 – APIs – Armazenamento – WebSQL
    104. 104. HTML5 – APIs – Armazenamento – WebSQL
    105. 105. HTML5 – APIs – Armazenamento - IndexedDB
    106. 106. HTML5 – APIs – CSS3 Estilos – CSS3
    107. 107. 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
    108. 108. HTML5 – APIs – CSS3 – Media Queries Monitor Grande Monitor Médio Fonte: http://stuffandnonsense.co.uk/ Tablet Mobile
    109. 109. HTML5 – APIs – CSS3 – Media Queries Monitor Grande @media screen and (min-width: 1024) { /* Estilos aplicados em telas MAIORES que 1024px */ }
    110. 110. HTML5 – APIs – CSS3 – Media Queries Monitor Médio @media screen and (max-width: 1024px) { /* Estilos aplicados em telas MENORES que 1024px */ }
    111. 111. HTML5 – APIs – CSS3 – Media Queries Tablet @media screen and (max-width: 700px) { /* Estilos aplicados em telas MENORES que 700px */ }
    112. 112. HTML5 – APIs – CSS3 – Media Queries Mobile @media screen and (max-width: 480px) { /* Estilos aplicados em telas MENORES que 480px */ }
    113. 113. 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 */ }
    114. 114. Sites Recomendados:
    115. 115. Sites Recomendados HTML5gallery.com.br
    116. 116. Sites Recomendados
    117. 117. Sites Recomendados WebPlatform.org
    118. 118. 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
    119. 119. 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

    ×