Algumas Html5 API's para usar já!
26
HTML5 features para usar no futuro já! @w3cbrasil @w3cteam
-
Upload
yasodara-cordova -
Category
Entertainment & Humor
-
view
4.764 -
download
2
description
HTML5 hoje pode ser considerada a linguagem mais importante do core da World Wide Web. Desde 2004, quando essa versão foi proposta pelo WHATWG, os recursos e funcionalidades têm crescido exponencialmente, com o objetivo de levar a web a um novo patamar. A quantidade de ferramentas e recursos que visam tornar os desenvolvedores mais produtivos também cresceu muito. Esta palestra faz um apanhado das funcionalidades do HTML5, principalmente as APIs
Transcript of 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)
