YAPC::Brasil 2011 - HTML5, e eu com isso?

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

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

my life → 4, camada → insights → semântica → multímidia → offline → API js


+


● 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


text, multimedia, and hyperlink

goal of making the Web truly World Wide


HTML4

HTML – conteúdo

CSS 1, 2.1 – formatação

Javascript – eventos usuário


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

my life →4, camada →insights→ semântica → multímidia → offline → API js

<!DOCTYPE html>

● header● nav● section● article● aside● footer● figcaption● figure● hgroup● mark


<input>

● attributes● autocomplete● action● pattern - regex● multiple - list● formnovalidate● min/max/step

● type● email● url● date/datetime/datetime-local/month/week/time● range/number

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



<video>, <audio>

● autoplay● controls● loop● muted● preload● src

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

*


cacheApplicationCache

<body onload="updateIndiktor()" ononline="updateIndiktor()" onoffline="updateIndiktor()">

navigator.onLine ? 'online' : 'offline';


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"));


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"));


websocketVar socket = New WebSocket(host)

Socket.onopen, onmessage, onclose

socket.readyState

Socket.Send

Socket.close


web worker

var worker = new Worker("myscript.js");

worker.onmessage

worker.onerror

worker.postMessage

worker.close


geolocationnavigator.geolocation.getCurrentPosition(showpos)

navigator.geolocation.watchPosition(showpos,erropos)

position.coords.latitude,

position.coords.longitude


historygo, back e forward

history.pushState(data,title[,url])

history.replaceState(data,title[,url])

window.onpopstate


?!@#$%&*

YAPC::BrasilHTML5,

E eu com isso?

@_marcioferreira

Technology

YAPC::Brasil 2011 - HTML5, e eu com isso?