yapc::brasil 2011 - html5, e eu com isso?
DESCRIPTION
Por que desenvolvedores devem aprender HTML5, o que isso implica no seu dia a diaTRANSCRIPT
![Page 1: YAPC::Brasil 2011 - HTML5, e eu com isso?](https://reader034.vdocuments.com.br/reader034/viewer/2022051611/54b937424a7959064f8b45b4/html5/thumbnails/1.jpg)
YAPC::Brasil - 2011
HTML5,
e eu com isso?
“Uma novidade só é conhecida, verdadeiramente, quando as pessoas certas ouvem falar dela”
– Renato Alexandre dos Santos Freitas
Marcio Ferreira@_marcioferreira
![Page 2: YAPC::Brasil 2011 - HTML5, e eu com isso?](https://reader034.vdocuments.com.br/reader034/viewer/2022051611/54b937424a7959064f8b45b4/html5/thumbnails/2.jpg)
Agenda
● it's my life
● HTML4, camada
● insights HTML5
● semântica
● multímidia
● offline – cache, persistência chave/valor
● API js – websockets, web workers, geo, history
![Page 3: YAPC::Brasil 2011 - HTML5, e eu com isso?](https://reader034.vdocuments.com.br/reader034/viewer/2022051611/54b937424a7959064f8b45b4/html5/thumbnails/3.jpg)
my life → 4, camada → insights → semântica → multímidia → offline → API js
![Page 4: YAPC::Brasil 2011 - HTML5, e eu com isso?](https://reader034.vdocuments.com.br/reader034/viewer/2022051611/54b937424a7959064f8b45b4/html5/thumbnails/4.jpg)
my life → 4, camada → insights → semântica → multímidia → offline → API js
+
![Page 5: YAPC::Brasil 2011 - HTML5, e eu com isso?](https://reader034.vdocuments.com.br/reader034/viewer/2022051611/54b937424a7959064f8b45b4/html5/thumbnails/5.jpg)
my life → 4, camada → insights → semântica → multímidia → offline → API js
![Page 6: YAPC::Brasil 2011 - HTML5, e eu com isso?](https://reader034.vdocuments.com.br/reader034/viewer/2022051611/54b937424a7959064f8b45b4/html5/thumbnails/6.jpg)
● HTML Document Representation - Character sets, character encodings, and entities
● Basic HTML data types - Character data, colors, lengths, URIs, content types, etc.
● The global structure of an HTML document - The HEAD and BODY of a document
● Language information and text direction - International considerations for text
● Text - Paragraphs, Lines, and Phrases
● Lists - Unordered, Ordered, and Definition Lists
● Tables
● Links - Hypertext and Media-Independent Links
● Objects, Images, and Applets
● Alignment, font styles, and horizontal rules
● Frames - Multi-view presentation of documents
● Forms - User-input Forms: Text Fields, Buttons, Menus, and more
● Scripts - Animated Documents and Smart Forms
● SGML reference information for HTML - Formal definition of HTML and validation
● Document Type Definition
● Transitional Document Type Definition
● Frameset Document Type Definition
● Character entity references in HTML 4
● Style Sheets - Adding style to HTML documents
my life → 4, camada → insights → semântica → multímidia → offline → API js
![Page 7: YAPC::Brasil 2011 - HTML5, e eu com isso?](https://reader034.vdocuments.com.br/reader034/viewer/2022051611/54b937424a7959064f8b45b4/html5/thumbnails/7.jpg)
text, multimedia, and hyperlink
goal of making the Web truly World Wide
my life → 4, camada → insights → semântica → multímidia → offline → API js
![Page 8: YAPC::Brasil 2011 - HTML5, e eu com isso?](https://reader034.vdocuments.com.br/reader034/viewer/2022051611/54b937424a7959064f8b45b4/html5/thumbnails/8.jpg)
HTML4
HTML – conteúdo
CSS 1, 2.1 – formatação
Javascript – eventos usuário
my life → 4, camada → insights → semântica → multímidia → offline → API js
![Page 9: YAPC::Brasil 2011 - HTML5, e eu com isso?](https://reader034.vdocuments.com.br/reader034/viewer/2022051611/54b937424a7959064f8b45b4/html5/thumbnails/9.jpg)
HTML5
new features are introduced to help Web application authors, new elements are introduced based on research into prevailing authoring practices, and special attention has been given to defining clear conformance criteria for user agents in an effort to improve interoperability.
my life →4, camada → insights → semântica → multímidia → offline → API js
![Page 10: YAPC::Brasil 2011 - HTML5, e eu com isso?](https://reader034.vdocuments.com.br/reader034/viewer/2022051611/54b937424a7959064f8b45b4/html5/thumbnails/10.jpg)
my life →4, camada →insights→ semântica → multímidia → offline → API js
<!DOCTYPE html>
● header● nav● section● article● aside● footer● figcaption● figure● hgroup● mark
![Page 11: YAPC::Brasil 2011 - HTML5, e eu com isso?](https://reader034.vdocuments.com.br/reader034/viewer/2022051611/54b937424a7959064f8b45b4/html5/thumbnails/11.jpg)
my life →4, camada →insights→ semântica → multímidia → offline → API js
<input>
● attributes● autocomplete● action● pattern - regex● multiple - list● formnovalidate● min/max/step
● type● email● url● date/datetime/datetime-local/month/week/time● range/number
![Page 12: YAPC::Brasil 2011 - HTML5, e eu com isso?](https://reader034.vdocuments.com.br/reader034/viewer/2022051611/54b937424a7959064f8b45b4/html5/thumbnails/12.jpg)
crawler – hoje (baseado em xpath - id, class, position, etc -, se o mesmo mudar...)
$html->findnodes( '//div/p/p[1] | //div/p/font[1] | //div/p/...' ); #sintática
crawler – amanhã (baseado na semantica das tags - não mais id, class, position)
$html->section->article->header; #semântica
$html->section->article->figcaption; #semântica
my life →4, camada →insights→ semântica → multímidia → offline → API js
![Page 13: YAPC::Brasil 2011 - HTML5, e eu com isso?](https://reader034.vdocuments.com.br/reader034/viewer/2022051611/54b937424a7959064f8b45b4/html5/thumbnails/13.jpg)
my life →4, camada →insights→ semântica → multímidia → offline → API js
<video>, <audio>
● autoplay● controls● loop● muted● preload● src
![Page 14: YAPC::Brasil 2011 - HTML5, e eu com isso?](https://reader034.vdocuments.com.br/reader034/viewer/2022051611/54b937424a7959064f8b45b4/html5/thumbnails/14.jpg)
cache
<html manifest="myapp.manifest"> onde armazenar se offline
CACHE MANIFEST
CACHE: arquivos que desejo obter cache se offline
index.html
FALLBACK:
page.html fallback-page.html requisição para page.html usa cache de fallback-page.html
NETWORK: quem não deve se obter cache
*
my life →4, camada →insights→ semântica → multímidia → offline → API js
![Page 15: YAPC::Brasil 2011 - HTML5, e eu com isso?](https://reader034.vdocuments.com.br/reader034/viewer/2022051611/54b937424a7959064f8b45b4/html5/thumbnails/15.jpg)
cacheApplicationCache
<body onload="updateIndiktor()" ononline="updateIndiktor()" onoffline="updateIndiktor()">
navigator.onLine ? 'online' : 'offline';
my life →4, camada →insights→ semântica → multímidia → offline → API js
![Page 16: YAPC::Brasil 2011 - HTML5, e eu com isso?](https://reader034.vdocuments.com.br/reader034/viewer/2022051611/54b937424a7959064f8b45b4/html5/thumbnails/16.jpg)
persistência chave/valor● document.cookie morreu
● Web storage● SessionStorage janela / LocalStorage persiste
– sessionStorage.setItem("evento", "YAPC::Brasil")
– sessionStorage.getItem("evento")
– RemoveItem('evento')
– clear()
– return string!var edition = { number: 2011 };
sessionStorage.setItem("edition", JSON.stringify(edition) );var _edition = JSON.parse(sessionStorage.getItem("edition"));
my life →4, camada →insights→ semântica → multímidia → offline → API js
![Page 17: YAPC::Brasil 2011 - HTML5, e eu com isso?](https://reader034.vdocuments.com.br/reader034/viewer/2022051611/54b937424a7959064f8b45b4/html5/thumbnails/17.jpg)
document.cookie
Web storage
SessionStorage janela / LocalStorage persiste– sessionStorage.setItem("evento", "YAPC::Brasil")
– sessionStorage.getItem("evento")
– RemoveItem('evento')
– clear()
– return string!var edition = { number: 2011 };
sessionStorage.setItem("edition", JSON.stringify(edition) );
var _edition = JSON.parse(sessionStorage.getItem("edition"));
my life →4, camada →insights→ semântica → multímidia → offline → API js
![Page 18: YAPC::Brasil 2011 - HTML5, e eu com isso?](https://reader034.vdocuments.com.br/reader034/viewer/2022051611/54b937424a7959064f8b45b4/html5/thumbnails/18.jpg)
websocketVar socket = New WebSocket(host)
Socket.onopen, onmessage, onclose
socket.readyState
Socket.Send
Socket.close
my life →4, camada →insights→ semântica → multímidia → offline → API js
![Page 19: YAPC::Brasil 2011 - HTML5, e eu com isso?](https://reader034.vdocuments.com.br/reader034/viewer/2022051611/54b937424a7959064f8b45b4/html5/thumbnails/19.jpg)
web worker
var worker = new Worker("myscript.js");
worker.onmessage
worker.onerror
worker.postMessage
worker.close
my life →4, camada →insights→ semântica → multímidia → offline → API js
![Page 20: YAPC::Brasil 2011 - HTML5, e eu com isso?](https://reader034.vdocuments.com.br/reader034/viewer/2022051611/54b937424a7959064f8b45b4/html5/thumbnails/20.jpg)
geolocationnavigator.geolocation.getCurrentPosition(showpos)
navigator.geolocation.watchPosition(showpos,erropos)
position.coords.latitude,
position.coords.longitude
my life →4, camada →insights→ semântica → multímidia → offline → API js
![Page 21: YAPC::Brasil 2011 - HTML5, e eu com isso?](https://reader034.vdocuments.com.br/reader034/viewer/2022051611/54b937424a7959064f8b45b4/html5/thumbnails/21.jpg)
historygo, back e forward
history.pushState(data,title[,url])
history.replaceState(data,title[,url])
window.onpopstate
my life →4, camada →insights→ semântica → multímidia → offline → API js
![Page 22: YAPC::Brasil 2011 - HTML5, e eu com isso?](https://reader034.vdocuments.com.br/reader034/viewer/2022051611/54b937424a7959064f8b45b4/html5/thumbnails/22.jpg)
?!@#$%&*
YAPC::BrasilHTML5,
E eu com isso?
@_marcioferreira