html5 - w3c · hoje html5 É também uma tecnologia, mas também uma sigla que hoje abrange uma...
TRANSCRIPT
![Page 1: HTML5 - W3C · hoje HTML5 É também uma tecnologia, mas também uma sigla que hoje abrange uma extensa plataforma de padrões para dar mais poder ao browser](https://reader033.vdocuments.mx/reader033/viewer/2022041615/5e3b371dbc20296a2c60f59b/html5/thumbnails/1.jpg)
HTML5featuresparausarnofuturojá!
@w3cbrasil@w3cteam
![Page 2: HTML5 - W3C · hoje HTML5 É também uma tecnologia, mas também uma sigla que hoje abrange uma extensa plataforma de padrões para dar mais poder ao browser](https://reader033.vdocuments.mx/reader033/viewer/2022041615/5e3b371dbc20296a2c60f59b/html5/thumbnails/2.jpg)
@yaso@vanessametonini
![Page 3: HTML5 - W3C · hoje HTML5 É também uma tecnologia, mas também uma sigla que hoje abrange uma extensa plataforma de padrões para dar mais poder ao browser](https://reader033.vdocuments.mx/reader033/viewer/2022041615/5e3b371dbc20296a2c60f59b/html5/thumbnails/3.jpg)
W3C
![Page 4: HTML5 - W3C · hoje HTML5 É também uma tecnologia, mas também uma sigla que hoje abrange uma extensa plataforma de padrões para dar mais poder ao browser](https://reader033.vdocuments.mx/reader033/viewer/2022041615/5e3b371dbc20296a2c60f59b/html5/thumbnails/4.jpg)
Hámuitotempoatrás...TimBLpropôsaWebem1989(há23anos)-URI+HTTP+HTML
![Page 5: HTML5 - W3C · hoje HTML5 É também uma tecnologia, mas também uma sigla que hoje abrange uma extensa plataforma de padrões para dar mais poder ao browser](https://reader033.vdocuments.mx/reader033/viewer/2022041615/5e3b371dbc20296a2c60f59b/html5/thumbnails/5.jpg)
Hámuitotempoatrás...
http://www.w3.org/History/1989/proposal.html
01/10/1994noMIT,LaboratóriodeCiênciadaComputação
• aWebem1989-há24anos
• oW3Cem1994-há19anos
![Page 6: HTML5 - W3C · hoje HTML5 É também uma tecnologia, mas também uma sigla que hoje abrange uma extensa plataforma de padrões para dar mais poder ao browser](https://reader033.vdocuments.mx/reader033/viewer/2022041615/5e3b371dbc20296a2c60f59b/html5/thumbnails/6.jpg)
![Page 7: HTML5 - W3C · hoje HTML5 É também uma tecnologia, mas também uma sigla que hoje abrange uma extensa plataforma de padrões para dar mais poder ao browser](https://reader033.vdocuments.mx/reader033/viewer/2022041615/5e3b371dbc20296a2c60f59b/html5/thumbnails/7.jpg)
Apolêmicaveio.
![Page 8: HTML5 - W3C · hoje HTML5 É também uma tecnologia, mas também uma sigla que hoje abrange uma extensa plataforma de padrões para dar mais poder ao browser](https://reader033.vdocuments.mx/reader033/viewer/2022041615/5e3b371dbc20296a2c60f59b/html5/thumbnails/8.jpg)
hojeHTML5Étambémumatecnologia,mastambémumasiglaquehojeabrangeumaextensaplataformadepadrõesparadarmaispoderaobrowser.
![Page 9: HTML5 - W3C · hoje HTML5 É também uma tecnologia, mas também uma sigla que hoje abrange uma extensa plataforma de padrões para dar mais poder ao browser](https://reader033.vdocuments.mx/reader033/viewer/2022041615/5e3b371dbc20296a2c60f59b/html5/thumbnails/9.jpg)
WhatWG
ResponsávelpordesenvolverfeaturesResponsávelportestareproduzirDEMOS
ResponsávelpormanteroHTML5desde2004
http://www.whatwg.org/
![Page 10: HTML5 - W3C · hoje HTML5 É também uma tecnologia, mas também uma sigla que hoje abrange uma extensa plataforma de padrões para dar mais poder ao browser](https://reader033.vdocuments.mx/reader033/viewer/2022041615/5e3b371dbc20296a2c60f59b/html5/thumbnails/10.jpg)
HTMLW3CWGResponsávelporpromoverouso
Responsávelpordesenvolvercomopadrãorecomendável
Responsávelpeladocumentação
http://dev.w3.org/html5/
![Page 11: HTML5 - W3C · hoje HTML5 É também uma tecnologia, mas também uma sigla que hoje abrange uma extensa plataforma de padrões para dar mais poder ao browser](https://reader033.vdocuments.mx/reader033/viewer/2022041615/5e3b371dbc20296a2c60f59b/html5/thumbnails/11.jpg)
ReferênciasHTML5.1
HTMLWorkingGroup
GitHubW3Cdeliverables
WebPlatformList
HTMLDiff
WhatWG
HTML5VocabW3C
HTML5TestSupport
![Page 12: HTML5 - W3C · hoje HTML5 É também uma tecnologia, mas também uma sigla que hoje abrange uma extensa plataforma de padrões para dar mais poder ao browser](https://reader033.vdocuments.mx/reader033/viewer/2022041615/5e3b371dbc20296a2c60f59b/html5/thumbnails/12.jpg)
OquesãoAPI'sAPI'sespecificamcomooscomponentesdeumsoftwaredeveminteragirentresi.
![Page 13: HTML5 - W3C · hoje HTML5 É também uma tecnologia, mas também uma sigla que hoje abrange uma extensa plataforma de padrões para dar mais poder ao browser](https://reader033.vdocuments.mx/reader033/viewer/2022041615/5e3b371dbc20296a2c60f59b/html5/thumbnails/13.jpg)
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
![Page 14: HTML5 - W3C · hoje HTML5 É também uma tecnologia, mas também uma sigla que hoje abrange uma extensa plataforma de padrões para dar mais poder ao browser](https://reader033.vdocuments.mx/reader033/viewer/2022041615/5e3b371dbc20296a2c60f59b/html5/thumbnails/14.jpg)
API's*novinhas*Nome:Element.classList
Adicionarumaclasseàlistadeclassesdeumelemento;
removerumaclassedeumalistadeclassesdeumelemento;
alternaraexistênciadeumaclassenalistadeclassesdeumelemento;
verificarsealistadeclassesdeumelementocontémumaclasseespecífica;
varelementClasses=elementNodeReference.classList;
Exemplo(TiffanyB.Brown)
![Page 15: HTML5 - W3C · hoje HTML5 É também uma tecnologia, mas também uma sigla que hoje abrange uma extensa plataforma de padrões para dar mais poder ao browser](https://reader033.vdocuments.mx/reader033/viewer/2022041615/5e3b371dbc20296a2c60f59b/html5/thumbnails/15.jpg)
API's*novinhas*Nome:Element.dataset(data-*)
varstring=element.dataset.camelCasedName;element.dataset.camelCasedName=string;
PermitecarregarcustomdataattributesemelementosHTML.
Exemplo.(RobertNyman)
![Page 16: HTML5 - W3C · hoje HTML5 É também uma tecnologia, mas também uma sigla que hoje abrange uma extensa plataforma de padrões para dar mais poder ao browser](https://reader033.vdocuments.mx/reader033/viewer/2022041615/5e3b371dbc20296a2c60f59b/html5/thumbnails/16.jpg)
API's*novinhas*Nome:ContextMenuAPI
Permiteinteraçãocommenusdeoutrocontexto(desktop,browser,etc)contextmenu=menu_id
Exemplo.(PaulRoget-Mozilla)
*Firefox
![Page 17: HTML5 - W3C · hoje HTML5 É também uma tecnologia, mas também uma sigla que hoje abrange uma extensa plataforma de padrões para dar mais poder ao browser](https://reader033.vdocuments.mx/reader033/viewer/2022041615/5e3b371dbc20296a2c60f59b/html5/thumbnails/17.jpg)
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)
![Page 18: HTML5 - W3C · hoje HTML5 É também uma tecnologia, mas também uma sigla que hoje abrange uma extensa plataforma de padrões para dar mais poder ao browser](https://reader033.vdocuments.mx/reader033/viewer/2022041615/5e3b371dbc20296a2c60f59b/html5/thumbnails/18.jpg)
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)
![Page 19: HTML5 - W3C · hoje HTML5 É também uma tecnologia, mas também uma sigla que hoje abrange uma extensa plataforma de padrões para dar mais poder ao browser](https://reader033.vdocuments.mx/reader033/viewer/2022041615/5e3b371dbc20296a2c60f59b/html5/thumbnails/19.jpg)
API's*dorolê*Nome:ContactsAPI
OuPicContactsIntent[WebIntents=DeviceAPI'SWG+PublicAppsWG]
Permiteinteraçãocomferramentasdearmazenamentodecontatosdousuário.(pergunteantes!)
Atéagora,gmail,twittereOSAdressBook.
![Page 20: HTML5 - W3C · hoje HTML5 É também uma tecnologia, mas também uma sigla que hoje abrange uma extensa plataforma de padrões para dar mais poder ao browser](https://reader033.vdocuments.mx/reader033/viewer/2022041615/5e3b371dbc20296a2c60f59b/html5/thumbnails/20.jpg)
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)
![Page 21: HTML5 - W3C · hoje HTML5 É também uma tecnologia, mas também uma sigla que hoje abrange uma extensa plataforma de padrões para dar mais poder ao browser](https://reader033.vdocuments.mx/reader033/viewer/2022041615/5e3b371dbc20296a2c60f59b/html5/thumbnails/21.jpg)
API's*demídia*Nome:WebMIDIAPI
Esta-fantásticaAPI-permitequeaplicaçõesseconectemcomdevicesdeproduçãoáudio,ouinputdousuárioparasimulação,entreoutrasbrincadeiras.
Exemplo.(MidiDrums-GitHub)
![Page 22: HTML5 - W3C · hoje HTML5 É também uma tecnologia, mas também uma sigla que hoje abrange uma extensa plataforma de padrões para dar mais poder ao browser](https://reader033.vdocuments.mx/reader033/viewer/2022041615/5e3b371dbc20296a2c60f59b/html5/thumbnails/22.jpg)
API's*novinhas*
Nome:FullscreenAPI
Permiterealizarfullscreenemqualquerelemento.Muitoútilparadesenvolvimentodejogos.
Exemplo.(BananBread-Mozilla)
![Page 23: HTML5 - W3C · hoje HTML5 É também uma tecnologia, mas também uma sigla que hoje abrange uma extensa plataforma de padrões para dar mais poder ao browser](https://reader033.vdocuments.mx/reader033/viewer/2022041615/5e3b371dbc20296a2c60f59b/html5/thumbnails/23.jpg)
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)
![Page 24: HTML5 - W3C · hoje HTML5 É também uma tecnologia, mas também uma sigla que hoje abrange uma extensa plataforma de padrões para dar mais poder ao browser](https://reader033.vdocuments.mx/reader033/viewer/2022041615/5e3b371dbc20296a2c60f59b/html5/thumbnails/24.jpg)
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)
![Page 25: HTML5 - W3C · hoje HTML5 É também uma tecnologia, mas também uma sigla que hoje abrange uma extensa plataforma de padrões para dar mais poder ao browser](https://reader033.vdocuments.mx/reader033/viewer/2022041615/5e3b371dbc20296a2c60f59b/html5/thumbnails/25.jpg)
API's*dorolê*
Estaespecificaçãopermiteacessoàcâmeraemdevicesvariados.
navigator.getUserMedia();
Exemplo:DavidWalsh
![Page 26: HTML5 - W3C · hoje HTML5 É também uma tecnologia, mas também uma sigla que hoje abrange uma extensa plataforma de padrões para dar mais poder ao browser](https://reader033.vdocuments.mx/reader033/viewer/2022041615/5e3b371dbc20296a2c60f59b/html5/thumbnails/26.jpg)
API's*novinhas*
Nome:BatteryAPI
ÉumaAPIqueconcentraesforçosemaplicaçõesmobileparaproveracessoàinformaçõessobreníveldabateriaestatus.
window.navigator.battery
Exemplo.(DavidWalsh)