1. YAPC::Brasil - 2011
HTML5 ,
e eu com isso?
“Uma novidade só é conhecida, verdadeiramente,
Marcio Ferreira quando as pessoas certas ouvem falar dela”
@_marcioferreira – Renato Alexandre dos Santos Freitas
2. 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
3. my life → 4, camada → insights → semântica → multímidia → offline → API js
4. my life → 4, camada → insights → semântica → multímidia → offline → API js
+
5. my life → 4, camada → insights → semântica → multímidia → offline → API js
6. my life → 4, camada → insights → semântica → multímidia → offline → API js
● HTML Document Representation - Character
sets, character encodings, and entities ● Alignment, font styles, and horizontal rules
Basic HTML data types - Character data, colors, ● Frames - Multi-view presentation of documents
●
lengths, URIs, content types, etc. ● Forms - User-input Forms: Text Fields, Buttons,
Menus, and more
● The global structure of an HTML document - The
HEAD and BODY of a document ● Scripts - Animated Documents and Smart Forms
● Language information and text direction - ● SGML reference information for HTML - Formal
International considerations for text definition of HTML and validation
Document Type Definition
● Text - Paragraphs, Lines, and Phrases ●
● Transitional Document Type Definition
● Lists - Unordered, Ordered, and Definition Lists
● Frameset Document Type Definition
● Tables
● Character entity references in HTML 4
● Links - Hypertext and Media-Independent Links
● Style Sheets - Adding style to HTML documents
● Objects, Images, and Applets
7. my life → 4, camada → insights → semântica → multímidia → offline → API js
text, multimedia, and hyperlink
goal of making the Web truly World Wide
8. my life → 4, camada → insights → semântica → multímidia → offline → API js
HTML4
HTML – conteúdo
CSS 1, 2.1 – formatação
Javascript – eventos usuário
9. my life →4, camada → insights → semântica → multímidia → offline → API js
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.
10. my life →4, camada →insights→ semântica → multímidia → offline → API js
<!DOCTYPE html>
● header
● nav
● section
● article
● aside
● footer
● figcaption
● figure
● hgroup
● mark
11. 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
12. my life →4, camada →insights→ semântica → multímidia → offline → API js
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
13. my life →4, camada →insights→ semântica → multímidia → offline → API js
<video>, <audio>
● autoplay
● controls
● loop
● muted
● preload
● src
14. my life →4, camada →insights→ semântica → multímidia → offline → API js
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
*
15. my life →4, camada →insights→ semântica → multímidia → offline → API js
cache
ApplicationCache
<body onload="updateIndiktor()" ononline="updateIndiktor()" onoffline="updateIndiktor()">
navigator.onLine ? 'online' : 'offline';
16. my life →4, camada →insights→ semântica → multímidia → offline → API js
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"));
17. my life →4, camada →insights→ semântica → multímidia → offline → API js
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"));
18. my life →4, camada →insights→ semântica → multímidia → offline → API js
websocket
Var socket = New WebSocket(host)
Socket.onopen, onmessage, onclose
socket.readyState
Socket.Send
Socket.close
19. my life →4, camada →insights→ semântica → multímidia → offline → API js
web worker
var worker = new Worker("myscript.js");
worker.onmessage
worker.onerror
worker.postMessage
worker.close
20. my life →4, camada →insights→ semântica → multímidia → offline → API js
geolocation
navigator.geolocation.getCurrentPosition(showpos)
navigator.geolocation.watchPosition(showpos,erropos)
position.coords.latitude,
position.coords.longitude
21. my life →4, camada →insights→ semântica → multímidia → offline → API js
history
go, back e forward
history.pushState(data,title[,url])
history.replaceState(data,title[,url])
window.onpopstate
22. ?!@#$%&*
YAPC::Brasil
HTML5,
E eu com isso?
@_marcioferreira