algumas html5 api's para usar já!

HTML5featuresparausarnofuturojá!

@w3cbrasil@w3cteam

@yaso@vanessametonini

W3C

Hámuitotempoatrás...TimBLpropôsaWebem1989(há23anos)-URI+HTTP+HTML

Hámuitotempoatrás...

http://www.w3.org/History/1989/proposal.html

01/10/1994noMIT,LaboratóriodeCiênciadaComputação

• aWebem1989-há24anos

• oW3Cem1994-há19anos

Apolêmicaveio.

hojeHTML5Étambémumatecnologia,mastambémumasiglaquehojeabrangeumaextensaplataformadepadrõesparadarmaispoderaobrowser.

WhatWG

ResponsávelpordesenvolverfeaturesResponsávelportestareproduzirDEMOS

ResponsávelpormanteroHTML5desde2004

http://www.whatwg.org/

HTMLW3CWGResponsávelporpromoverouso

Responsávelpordesenvolvercomopadrãorecomendável

Responsávelpeladocumentação

http://dev.w3.org/html5/

ReferênciasHTML5.1

HTMLWorkingGroup

GitHubW3Cdeliverables

WebPlatformList

HTMLDiff

WhatWG

HTML5VocabW3C

HTML5TestSupport

OquesãoAPI'sAPI'sespecificamcomooscomponentesdeumsoftwaredeveminteragirentresi.

Umadivisãopropostaprafacilitar...Comunicação/rede:comunicaçãoentrebrowsers,WebRTC,WebsocketAPI...Devices:statusdabateria,orientação,geolocation,TouchEvents...DOM:customelements,SelectorsAPI,shadowDOM...Media:WebAudioAPI,EME,MediacaptureAPI...AmbienteOS:contactsAPI,ClipboardAPIandEvents,WebAlarmsAPIspec...Segurança:WebCryptoAPI,WebCryptoKeydiscovery...Armazenamento:QuotamanagementAPI,WebStorage...Userinteraction:IndieUIevents,InputMethodsEditorAPI...

Maisde78especificaçõesatualmente.Vejamaisemw3.org

API's*novinhas*Nome:Element.classList

Adicionarumaclasseàlistadeclassesdeumelemento;

removerumaclassedeumalistadeclassesdeumelemento;

alternaraexistênciadeumaclassenalistadeclassesdeumelemento;

verificarsealistadeclassesdeumelementocontémumaclasseespecífica;

varelementClasses=elementNodeReference.classList;

Exemplo(TiffanyB.Brown)

API's*novinhas*Nome:Element.dataset(data-*)

varstring=element.dataset.camelCasedName;element.dataset.camelCasedName=string;

PermitecarregarcustomdataattributesemelementosHTML.

Exemplo.(RobertNyman)

API's*novinhas*Nome:ContextMenuAPI

Permiteinteraçãocommenusdeoutrocontexto(desktop,browser,etc)contextmenu=menu_id

Exemplo.(PaulRoget-Mozilla)

*Firefox

API's*dorolê*Nome:Geolocation

Permitequevocêtroqueinformaçõesrelacionadasàlocalizaçãocomoutrosrecursos.

functionget_location(){navigator.geolocation.getCurrentPosition(show_map);}

obs:nuncaenviardadosdegeolocalizaçãodeusuáriossemsuaexpressapermissão[1]

[1]http://www.w3.org/TR/geolocation-API/#security

Exemplo.(DGlobalTech)

API's*dorolê*Nome:CalendarAPI

Utilizadaparaacessarserviçosdecalendáriodeusuários.https://github.com/blackberry/BB10-WebWorks-Samples/tree/master/pimcalendarfunctionsuccess(events){//dosomethingwithresultinglistofobjectsfor(variinevents)alert(events[i].id);}functionerror(err){//dosomethingwithresultingerrorsalert(err.code);}//Performancalendarsearch.InitiallyfilterthelisttoCalendarrecordsstarting//beforeApril9,2011@5pm(UTC).navigator.calendar.findEvents(success,error,{filter:{startBefore:'2011-04-10T05:00:00+12:00'}});

Exemplo.(BlackBerry)

API's*dorolê*Nome:ContactsAPI

OuPicContactsIntent[WebIntents=DeviceAPI'SWG+PublicAppsWG]

Permiteinteraçãocomferramentasdearmazenamentodecontatosdousuário.(pergunteantes!)

Atéagora,gmail,twittereOSAdressBook.

API's*demídia*Nome:WebAudioAPI

PermiteprocessaresintetizaráudioemaplicaçõesWeb.https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html

Exemplo1.(GangnamStyle-Mozilla)

Exemplo2.(AlexGibson-GitHub)

API's*demídia*Nome:WebMIDIAPI

Esta-fantásticaAPI-permitequeaplicaçõesseconectemcomdevicesdeproduçãoáudio,ouinputdousuárioparasimulação,entreoutrasbrincadeiras.

Exemplo.(MidiDrums-GitHub)

API's*novinhas*

Nome:FullscreenAPI

Permiterealizarfullscreenemqualquerelemento.Muitoútilparadesenvolvimentodejogos.

Exemplo.(BananBread-Mozilla)

API's*esquecidas*

Nome:TexttrackAPI

TexttrackoferecemétodosparamanipularlegendasnoHTML5paraelementosdeáudioevídeo<video><sourcesrc="http://video-js.zencoder.com/oceans-clip.mp4"type='video/mp4'/><trackkind="captions"src="http://example.com/path/to/captions.vtt"srclang="en"label="English"default></video>

Exemplo.(LongTailVideo)

API's*dorolê*Nome:DragandDrop

Aespecificaçãodefineummecanismobaseadoemeventos,aAPIdoJavaScript,eumamarcaçãoadicionalparadeclararquequalquertipodeelementopossaserarrastadoemumapágina.Arrastaresoltaremumnavegadornativosignificaaplicativosdawebmaisrápidosemaisresponsivos.

**ObjetoDataTransfer:ApropriedadedataTransferéoverdadeirosegredodomovimentoarrastar-e-soltar.Eladetémosdadosenviadosemumaaçãodesoltar.dataTransferédefinidanoeventodragstartelida/manipuladanoeventodrop.

Achamadadee.dataTransfer.setData(format,data)definiráoconteúdodoobjetoparaomimetypeeacargadedadostransmitidacomoargumentos.

Exemplo.(HTML5demos)

API's*dorolê*

Estaespecificaçãopermiteacessoàcâmeraemdevicesvariados.

navigator.getUserMedia();

Exemplo:DavidWalsh

API's*novinhas*

Nome:BatteryAPI

ÉumaAPIqueconcentraesforçosemaplicaçõesmobileparaproveracessoàinformaçõessobreníveldabateriaestatus.

window.navigator.battery

Exemplo.(DavidWalsh)