HTML5
features	para	usar	no	futuro	já!	
@w3cbrasil
@w3cteam
@yaso
@vanessametonini
W3C
Há	muito	tempo	atrás...
TimBL	propôs	a	Web	em	1989		(há	23	anos)	-	URI	+	HTTP	+	HTML
Há	muito	tempo	atrás...
http://www.w3.org/History/1989/proposal.html
01/10/1994	no	MIT,	Laboratório	de	Ciência	da	Computaç...
A	polêmica	veio.
hoje	HTML5	
É	também	uma	tecnologia,	mas	também	uma	sigla	que	hoje	abrange	uma	extensa	plataforma	de
padrões	para	dar	mais...
WhatWG
Responsável	por	desenvolver	features
Responsável	por	testar	e	produzir	DEMOS
Responsável	por	manter	o	HTML5	desde	2...
HTML	W3C	WG
Responsável	por	promover	o	uso
Responsável	por	desenvolver	como	padrão	recomendável
Responsável	pela	documenta...
Referências	
HTML5.1
HTML	Working	Group	
GitHub	W3C	deliverables
Web	Platform	List
HTML	Diff
WhatWG
HTML5	Vocab	W3C
HTML5	...
O	que	são	API's
API's	especificam	como	os	componentes	de	um	software	devem	interagir	entre
si.
Uma	divisão	proposta	pra	facilitar...	
Comunicação/rede:	comunicação	entre	browsers,	WebRTC,	Websocket	API...
Devices:	sta...
API's		*novinhas*
Nome:	Element.classList	
Adicionar	uma	classe	à	lista	de	classes	de	um	elemento;
remover	uma	classe	de	u...
API's		*novinhas*
Nome:	Element.dataset	(data-*)
var	string	=	element.dataset.camelCasedName;
element.dataset.camelCasedNa...
API's		*novinhas*
Nome:	ContextMenu	API
Permite	interação	com	menus	de	outro	contexto	(desktop,	browser,	etc)	
contextmenu...
API's		*do	rolê*
Nome:	Geolocation	
Permite	que	você	troque	informações	relacionadas	à	localização	com	outros	recursos.
fu...
API's		*do	rolê*
Nome:	Calendar	API
Utilizada	para	acessar	serviços	de	calendário	de	usuários.	
https://github.com/blackbe...
API's		*do	rolê*	
Nome:	Contacts	API	
Ou	Pic	Contacts	Intent	[Web	Intents	=	Device	API'S	WG	+	Public	Apps	WG]
Permite	inte...
API's		*de	mídia*
Nome:	WebAudio	API
Permite	processar	e	sintetizar	áudio	em	aplicações	Web.		
https://dvcs.w3.org/hg/audi...
API's		*de	mídia*
Nome:	Web	MIDI	API
Esta	-	fantástica	API	-	permite	que	aplicações	se	conectem	com	devices	de
produção	áu...
API's		*novinhas*
Nome:	Fullscreen	API
Permite	realizar	full	screen	em	qualquer	elemento.	Muito	útil	para
desenvolvimento	...
API's		*esquecidas*
Nome:	Text	track	API
Text	track	oferece	métodos	para	manipular	legendas	no	HTML5	para	elementos	de	áud...
API's		*do	rolê*
Nome:	Drag	and	Drop
A	especificação	define	um	mecanismo	baseado	em	eventos,	a	API	do	JavaScript,	e	uma	ma...
API's		*do	rolê*
Esta	especificação	permite	acesso	à	câmera	em	devices	variados.	
navigator.getUserMedia();
Exemplo:	David...
API's		*novinhas*
Nome:	Battery	API
É	uma	API	que	concentra	esforços	em	aplicações	mobile	para	prover	acesso	à	informações...
Algumas Html5 API's para usar já!
Upcoming SlideShare
Loading in …5
×

Algumas Html5 API's para usar já!

5,060 views
4,905 views

Published on

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

Published in: Entertainment & Humor
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,060
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
14
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Algumas Html5 API's para usar já!

  1. 1. HTML5 features para usar no futuro já! @w3cbrasil @w3cteam
  2. 2. @yaso @vanessametonini
  3. 3. W3C
  4. 4. Há muito tempo atrás... TimBL propôs a Web em 1989 (há 23 anos) - URI + HTTP + HTML
  5. 5. Há muito tempo atrás... http://www.w3.org/History/1989/proposal.html 01/10/1994 no MIT, Laboratório de Ciência da Computação • a Web em 1989 - há 24 anos • o W3C em 1994 - há 19 anos
  6. 6. A polêmica veio.
  7. 7. 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.
  8. 8. WhatWG Responsável por desenvolver features Responsável por testar e produzir DEMOS Responsável por manter o HTML5 desde 2004 http://www.whatwg.org/
  9. 9. HTML W3C WG Responsável por promover o uso Responsável por desenvolver como padrão recomendável Responsável pela documentação http://dev.w3.org/html5/
  10. 10. Referências HTML5.1 HTML Working Group GitHub W3C deliverables Web Platform List HTML Diff WhatWG HTML5 Vocab W3C HTML5 Test Support
  11. 11. O que são API's API's especificam como os componentes de um software devem interagir entre si.
  12. 12. Uma divisão proposta pra facilitar... Comunicação/rede: comunicação entre browsers, WebRTC, Websocket API... Devices: status da bateria, orientação, geolocation, Touch Events... DOM: custom elements, Selectors API, shadow DOM... Media: Web Audio API, EME, Media capture API... Ambiente OS: contacts API, Clipboard API and Events, Web Alarms API spec... Segurança: Web Crypto API, WebCryptoKey discovery... Armazenamento: Quota management API, Web Storage... User interaction: Indie UI events, Input Methods Editor API... Mais de 78 especificações atualmente. Veja mais em w3.org
  13. 13. API's *novinhas* Nome: Element.classList Adicionar uma classe à lista de classes de um elemento; remover uma classe de uma lista de classes de um elemento; alternar a existência de uma classe na lista de classes de um elemento; verificar se a lista de classes de um elemento contém uma classe específica; var elementClasses = elementNodeReference.classList; Exemplo (Tiffany B. Brown)
  14. 14. API's *novinhas* Nome: Element.dataset (data-*) var string = element.dataset.camelCasedName; element.dataset.camelCasedName = string; Permite carregar custom data attributes em elementos HTML. Exemplo. (Robert Nyman)
  15. 15. API's *novinhas* Nome: ContextMenu API Permite interação com menus de outro contexto (desktop, browser, etc) contextmenu=menu_id Exemplo. (Paul Roget - Mozilla) *Firefox
  16. 16. API's *do rolê* Nome: Geolocation Permite que você troque informações relacionadas à localização com outros recursos. function get_location() { navigator.geolocation.getCurrentPosition(show_map); } obs: nunca enviar dados de geolocalização de usuários sem sua expressa permissão [1] [1] http://www.w3.org/TR/geolocation-API/#security Exemplo. (DGlobalTech)
  17. 17. API's *do rolê* Nome: Calendar API Utilizada para acessar serviços de calendário de usuários. https://github.com/blackberry/BB10-WebWorks-Samples/tree/master/pimcalendarfunction success (events) { // do something with resulting list of objects for (var i in events) alert(events[i].id); } function error (err) { // do something with resulting errors alert(err.code); } // Perform an calendar search. Initially filter the list to Calendar records starting // before April 9, 2011 @ 5pm (UTC). navigator.calendar.findEvents( success, error, { filter: { startBefore: '2011-04-10T05:00:00+12:00' } }); Exemplo. (BlackBerry)
  18. 18. API's *do rolê* Nome: Contacts API Ou Pic Contacts Intent [Web Intents = Device API'S WG + Public Apps WG] Permite interação com ferramentas de armazenamento de contatos do usuário. (pergunte antes!) Até agora, gmail, twitter e OS Adress Book.
  19. 19. API's *de mídia* Nome: WebAudio API Permite processar e sintetizar áudio em aplicações Web. https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html Exemplo 1. (Gangnam Style - Mozilla) Exemplo 2. (Alex Gibson - GitHub)
  20. 20. API's *de mídia* Nome: Web MIDI API Esta - fantástica API - permite que aplicações se conectem com devices de produção áudio, ou input do usuário para simulação, entre outras brincadeiras. Exemplo. (MidiDrums - GitHub)
  21. 21. API's *novinhas* Nome: Fullscreen API Permite realizar full screen em qualquer elemento. Muito útil para desenvolvimento de jogos. Exemplo. (Banan Bread - Mozilla)
  22. 22. API's *esquecidas* Nome: Text track API Text track oferece métodos para manipular legendas no HTML5 para elementos de áudio e vídeo <video> <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' /> <track kind="captions" src="http://example.com/path/to/captions.vtt" srclang="en" label="English" default> </video> Exemplo. (Long Tail Video)
  23. 23. API's *do rolê* Nome: Drag and Drop A especificação define um mecanismo baseado em eventos, a API do JavaScript, e uma marcação adicional para declarar que qualquer tipo de elemento possa ser arrastado em uma página. Arrastar e soltar em um navegador nativo significa aplicativos da web mais rápidos e mais responsivos. **Objeto DataTransfer: A propriedade dataTransfer é o verdadeiro segredo do movimento arrastar- e-soltar. Ela detém os dados enviados em uma ação de soltar. dataTransfer é definida no evento dragstart e lida/manipulada no evento drop. A chamada de e.dataTransfer.setData(format, data) definirá o conteúdo do objeto para o mimetype e a carga de dados transmitida como argumentos. Exemplo. (HTML5 demos)
  24. 24. API's *do rolê* Esta especificação permite acesso à câmera em devices variados. navigator.getUserMedia(); Exemplo: David Walsh
  25. 25. API's *novinhas* Nome: Battery API É uma API que concentra esforços em aplicações mobile para prover acesso à informações sobre nível da bateria e status. window.navigator.battery Exemplo. (David Walsh)

×