HTML5, Mobile Web e além - Computer on the beach 2015

HTML5, Mobile Web e além
Computer on the Beach
Março - 2015
Reinaldo Ferraz
W3C Brasil

A Web é uma ótima
plataforma para
desenvolvimento de software

10 Dicas rápidas para
desenvolvimento web mobile
Um resumo baseado em
http://mobilewebbestpractices.com

Saiba quando usar um framework

Não reduza o tamanho do seu site do desktop

Utilize a estratégia de Mobile First

Estruturação do conteúdo é importante

Desenvolva para múltiplas formas de entrada e
navegação

Mantenha os formulários simples

Proporcione link para o site completo

Otimize performance
http://browserdiet.com/pt/

Use Emuladores para testes
http://www.mobilexweb.com/emulators

24
Doctype:
HTML4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<SCRIPT LANGUAGE="JavaScript">
var now = new Date();
var month_array = new
Array("Janeiro","Fevereiro","Março","Abril","Maio","Junho","Julho","Agosto","Setembro","Out
ubro","Novembro","Dezembro");
document.write("<form name=date_list><table bgcolor=silver><tr><td>");
document.write("<select name=month
onchange=change_month(this.options.selectedIndex)>");
for(i=0;i<month_array.length;i++)
{
if (now.getMonth() != i)
{document.write ("<option value="+i+">"+month_array[i]);}
else
{document.write ("<option value="+i+" selected>"+month_array[i]);}
}
document.write("</select>");
document.write("</td><td>");
document.write ("<select name=year
onchange=change_year(this.options[this.options.selectedIndex])>");
for(i=1950;i<3000;i++)
{
if (now.getYear() != i)
{document.write("<option value="+i+">"+i);}
else
{document.write("<option value="+i+" selected>"+i);}
}

@media all and (min-width:500px)
{ … }
@media (min-width:500px)
{ … }

@media (orientation: portrait)
{ ...}
@media (orientation: landscape)
{ ...}

.logo01, .logo02, .logo03 {
background-image: url('../images/logos.png');
background-repeat: no-repeat;
}
.logo01 {
height: 100px;
weight: 60px;
background-position: -5px -5px;
}
.logo02 {
height: 122px;
weight: 60px;
background-position: -5px -143px;
}
.logo03 {
height: 145px;
weight: 60px;
background-position: -5px -288px; }

CSS:
a:hover
a:focus
JavaScript:
onmouseover="#"
onfocus="#"
onmouseout="#"
onblur="#"

Vibration API
A especificação tem como objetivo definir uma API
que fornece acesso ao mecanismo de vibração do
dispositivo. A vibração é uma forma de feedback tátil
e que pode ser controlada e manipulada conforme a
necessidade. Em setembro de 2014, o status dessa
documentação dentro do W3C era “W3C Candidate
Recomendation”.
http://www.w3.org/TR/2014/CR-vibration-20140909/

Ambient Light Events
Define um meio para tratar os eventos que
correspondem à detecção de luz por sensores. A
documentação aborda o viés técnico e questões
interessantes como a preocupação com segurança
e considerações sobre privacidade. Também é uma
“W3C Candidate Recomendation”.
http://www.w3.org/TR/2013/CR-ambient-light-
20131001/

HTML Media Capture
O documento define uma extensão do HTML que
facilita o acesso do usuário ao mecanismo de
captura de mídia de um dispositivo, como uma
câmera ou um microfone, utilizando simples
formulários. Isso pode facilitar muito aquela selfie
para uma aplicação de compartilhamento de fotos,
por exemplo. É importante não confundir essa API
com a especificação Media Capture and Streams,
que possibilita uma manipulação mais complexa e
refinada do acesso à câmera e microfone do
usuário.
http://www.w3.org/TR/2014/CR-html-media-capture-
20140909/

Battery Status API
A especificação de status da bateria define um meio
para os desenvolvedores web determinarem
programaticamente o estado da bateria do
dispositivo que hospeda a aplicação. Sabendo o
estado da bateria, os desenvolvedores são capazes
de criar conteúdo web e aplicações que são
eficientes em termos de energia, levando a uma
melhor experiência do usuário.
http://www.w3.org/TR/2012/CR-battery-status-
20120508/

Geolocation API
Velha conhecida dos desenvolvedores, essa
documentação define uma API que fornece acesso
via script para informações de localização
geográfica associada ao dispositivo. A
documentação sobre geolocalização é uma
Recomendação do W3C desde outubro de 2013.
Esse documento é o único da lista que não foi criado
pelo Device APIs Working Group, e sim pelo W3C
Geolocation Working Group.
http://www.w3.org/TR/geolocation-API/

Mobile Web pode ser o
novo toca fitas de carro

A Internet das Coisas
tem um enorme potencial.

http://share.cisco.com/internet-of-things.html

E estão cada vez mais
presentes na nossa vida

A Web das Coisas é
essencialmente sobre o papel das
tecnologias da Web para facilitar o
desenvolvimento de aplicações e
serviços para as coisas e sua
representação virtual
http://www.w3.org/community/wot/wiki/Main_Page

Camada de aplicação e serviços

Padronização é a chave da
Internet das Coisas

Garantir que os padrões W3C sejam
implementados “royalty free”,
incentivando a inovação e a
disponibilidade da comunidade de
desenvolvedores Web.
http://www.w3.org/community/wot/wiki/Main_Page

Data Formats
Interface
Definitions
Security Privacy
...

http://www.w3.org/community/wot/

http://www.w3.org/standards/semanticweb/data

http://www.w3.org/community/web-bluetooth/

http://www.streetline.com/parking-analytics/

As máquinas vão dominar o mundo

Participe da construção da
Web dentro do W3C

Tks
reinaldo@nic.br @reinaldoferraz
w3cbrasil@nic.br @w3cbrasil Facebook.com/W3CBrasil

HTML5, Mobile Web e além - Computer on the beach 2015

Mais conteúdo relacionado

Mais procurados

Destaque

Semelhante a HTML5, Mobile Web e além - Computer on the beach 2015

Mais de Reinaldo Ferraz

HTML5, Mobile Web e além - Computer on the beach 2015