Yan Magalhães
Front End Developer at Ingresso Rápido
HTML 5
O poder além das tags
Yan Magalhães
Web Developer na
Ciência da Computação (In progress)
Primeiramente....
Participe de Eventos!
AVISOS
Esta palestra não tem 130 slides!
AVISOS
Esta palestra tem MUITO código.
HORA DO SHOW
HTML 5
O poder além das tags
Agenda
- A história da Web
- O HTML5
- Novas Tags
- O que são API's
- WEB APIS
1.
A história da Web
2008
2010
2014
2.
As novidades do HTML5
Doctype
<!DOCTYPE html>
<html lang="pt-br">
...resto do documento omitido
</html>Novos elementos
<section>
/* Utilizado para representar uma seção generica
de um documento */
<nav>
/* Utilizado para representar elementos de navegação,
geralmente links (menu) */
<header>
/* Utilizado para estruturar cabeçalhos da página */
<main>
/* Define o conteúdo principal dentro do <body> em sua
página */
<aside>
/* Utilizado para referenciar conteúdos que não estejam
atrelados ao conteúdo principal da página. */Novos elementos
<article>
/* Utilizado para tornar mais indepente alguma
região do documento */
<footer>
/* Utilizado para representar a seção de rodapé */
<canvas>
/* Utilizado para desenhar gráficos ou animações 2D (JS) */
<audio>
/* Carregar conteúdos de áudio */
<video>
/* Carregar conteúdos de vídeo */Formulários
/* Novos tipos de campos*/
<input type="color"/> // Colorpicker
<input type="date" /> // Calendar
<input type="search" /> // Search
<input type="email" /> // E-mail
/* Validação de Campos */
<input type="text" name="descricao"
id="descricao" required="true" />Indo além
Mas é só isso que posso fazer com a Web?
Mas o que é uma API mesmo?
API
Application Programming Interface, é um conjunto de funcionalidades e padrões de programação que permite o acesso as funcionalidades de alguma aplicação. São bastante utilizadas quando se quer oferecer o seu software como um serviço, ou como consumo deste serviço para a criação do seu próprio software.
3.
WEB API's
Web Storage
Permite o armazenamento de informações, através de chave/valor, dentro do browser, de uma forma mais eficiente que os cookies.
Exemplo
/* Salvando os Dados */
var names = ["Yan", "Nariga", "Narigomon"];
localStorage.setItem('names', names);
/* Buscando os Dados */
localStorage.getItem('names');
/* Retirando do Web Storage */
localStorage.clear();Geolocation
Permite obter os dados da localização do usuário em sua página. Só é possível mediante aprovação do usuário.
Exemplo
/* Utilizamos o objeto geolocation para ter
acesso as informações.
A função getCurrentPosition inicia uma requisição assíncrona, que ao
ser executada, retorna um objeto do tipo Geoposition */
navigator.geolocation.getCurrentPosition(function(position) {
console.debug(position.coords.latitude,
position.coords.longitude);
});
Generic Sensor
Utilização de um sensor que capta a intensidade da luz em um ambiente
Exemplo
// Disponivel apenas para Firefox em Mac OSX
window.addEventListener("devicelight", function (event) {
var intensity = event.value;
console.log(intensity);
});Network Information
Fornecem informações sobre a rede, situação da conexação e da banda de rede.
Exemplo
console.log(navigator.onLine ? 'true' : 'false');Vibration
Permite acessar a API de Vibration do device.
Exemplo
/* Utilizamos o objeto Vibrate para fazer as Vibrações */
/* Vibração Única */
navigator.vibrate(200);
/* Sequência de vibrações, com intervalos
de tempo */
navigator.vibrate([100, 200, 200, 200, 500]);Notifications
Permite configurar e exibir notificações no navegador e na área de trabalho do usuário .
Exemplo
/* Para emitir notificações, usamos o objeto Notification*/
Notification.requestPermission(function (permission) {
/* Após autorização do usuario, podemos emitir a
notificação */
if (permission === "granted") {
var notification = new Notification("Olá Pessoal");
}
});Page Visibility
Permite checar se a página está visível ou não, através das abas
Exemplo
function checkVisibility() {
if (document.hidden) {
console.log('Tab is hidden');
} else {
console.log('Tab is focused, lets rock');
}
}
/* Atribuo uma função quando acontecer o
evento visibilitychange */
document.addEventListener("visibilitychange", checkVisibility,
false);Batery Status
Permite o acesso as informaçõs de bateria do dispositivo,expectativa de tempo de carregamento ou descarga da bateria.
Exemplo
/* Atraves do metodo getBattery, uma promise é executada,
retornando os dados do estado da bateria */
navigator.getBattery().then(function(battery) {
updateChargeInfo();
battery.addEventListener('chargingchange', function(){
updateChargeInfo();
});
function updateChargeInfo(){
console.log("Battery charging? "
+ (battery.charging ? "Yes" : "No"));
}
});Device Orientation
Possibilita acesso as coordenadas de orientação física de um dispositivo, acelerômetro e giroscópio
Exemplo
function getOrientation(event) {
var absolute = event.absolute;
var alpha = event.alpha;
var beta = event.beta;
var gamma = event.gamma;
}
window.addEventListener('deviceorientation',
getOrientation);Web Sockets
Permitem que seja possível abrir um canal de comunicação, entre o navegador do usuário e um servidor. Podemos enviar mensagens para o servidor e receber respostas orientadas a eventos, sem a necessidade de realizar uma requisição ao servidor.
Web Audio
Permite realizar diversas operações e manuseios de arquivos de audio. Síntese e processamento de audios em páginas web. Podemos criar funções e manipular efeitos de audio.
E muitas, muitas outras existem.
4.
Dicas finais
http://caniuse.com/
Vamos explorar a Web
O que você quer fazer com isso?
/yanmagale
/yaanmagale
/yaanmagalhaes
Obrigado Galera \o/
https://slides.com/yanmagale/html5-semana-computacao
https://github.com/yanmagale/html5-semana-computacao
HTML5 - O poder além das tags
By Yan Magalhães
HTML5 - O poder além das tags
Palestra apresentada na Semana da Engenharia e Computação, em Betim, Faculdade Pitágoras, 05/10/2016 e 06/10/2016
