View
4.764
Download
2
Category
Preview:
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
Citation preview
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)
Recommended