YAPC::Brasil 2011 - HTML5, e eu com isso?
2 likes331 views
The document discusses HTML5 and its implications. It begins with an overview of HTML4 and introduces new features in HTML5 like semantic elements, multimedia capabilities, offline support through caching, and new JavaScript APIs for websockets, web workers, geolocation and browser history. The presentation covers how these changes impact developers and provides examples of using the new HTML5 features.
![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](https://image.slidesharecdn.com/apresentacao-111105082502-phpapp02/85/YAPC-Brasil-2011-HTML5-e-eu-com-isso-12-320.jpg)
![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](https://image.slidesharecdn.com/apresentacao-111105082502-phpapp02/85/YAPC-Brasil-2011-HTML5-e-eu-com-isso-21-320.jpg)
YAPC::Brasil 2011 - HTML5, e eu com isso?
- 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