Construindo a web mobile de amanhã

CONSTRUINDO A WEB MOBILE DE AMANHÃ técnicas e algumas práticas

http://jcemer.com

MOTIVAÇÃO para que estamos aqui hoje

Conheça um tanto da história da web e seu encontro
com os dispositivos móveis. Quais os principais desafios de escrever código para celulares, tablets e demais suportes. A mensagem final será como definir conteúdo adaptável e pronto para as evoluções que ainda estão por vir.

HISTÓRIA desde onde tudo começou

HIPERMÍDIA Mídias em um suporte computacional com a devida marcação
e interligações com demais documentos

Desde a validação de formulários até a criação de interfaces
ricas. Seu uso é para aprimorar a usabilidade das páginas através da adição de interatividade JAVASCRIPT

FOLHAS   DE ESTILO Atribuir diferente aparência ao conteúdo através
da declaração de fontes, cores, margens, alturas, larguras e muito mais.

FLASH   PLAYER SVG CANVAS AUDIO &  VIDEO WEBGL

SUPORTES distribuindo conteúdo

DESKTOPS LAPTOPS TVS TOUCH LAPTOPS SMARTPHONES TOTENS TELÃO DIGITAL TABLETS
GOOGLE GLASS

DESKTOPS LAPTOPS TVS TOUCH LAPTOPS SMARTPHONES TOTENS TELÃO DIGITAL TABLETS
GOOGLE GLASS BROWSERS APPS  APPLE STORE   NETFLIX  STEAM

This is a day I have been looking forward to
for two and a half years 2007

MOBILE iPhone foi lançado com uma versão mobile do navegador
Safari

VIEWPORT Área igual a do display que determina qual o
limite de apresentação do conteúdo CONCEITO ANTIGO

MOBILE  VIEWPORT A viewport não é necessariamente do tamanho do
display

A largura da viewport é definida por padrão como 980px

O iPhone quando lançado conseguia visualizar a maioria dos sites
da internet

META  VIEWPORT Define a relação entre display e viewport

Quais as resoluções dos celulares dos nossos usuários? - CLIENTE

http://www.paintcodeapp.com/news/ ultimate-guide-to-iphone-resolutions

http://www.idownloadblog.com/2013/07/30/ the-terrible-state-of-android-fragmentation/

ASPECT RATIO Diferentes escalas de proporção entre largura e altura

16:10 3:4 2:3

Não existe mobile web, a web é uma só! -
SÉRGIO LOPES

RESPONSIVE DESIGN aprimorando experiência

Entrega de uma experiência ótima de leitura e navegação independente
de dispositivo

MOBILE DESKTOP TABLET

LAYOUT Conteúdo que se adequa à viewport seguindo suas dimensões
FLUIDO 80%

Conteúdo que se adequa à viewport seguindo suas dimensões FLUIDO
LAYOUT 80%

conteúdo que se adequa à   viewport seguindo suas  
dimensões conteúdo que se adequa à   viewport seguindo suas   conteúdo que se adequa à   viewport uindo  

TAMANHO DE   FONTE Não existe especificação para o tamanho
básico da fonte, o aplicativo escolhe o mais adequado

TAMANHO DE   FONTE RELATIVO Unidades de medida baseadas em
elementos anscestrais ou outras propriedades

MEDIDA EM Tamanho de fonte relativo ao tamanho de fonte
definido ou herdado no elemento pai FONTE

MEDIDA EM FONTE <body> Foo <div style="font-size: 0.5em"> bar <span
style="font-size: 2em"> fizz </span> </div> </body> Foo bar ﬁzz

MEDIDA REM Tamanho de fonte relativo ao tamanho de fonte
definido no <html> FONTE

MEDIDA REM FONTE <body> Foo <div style="font-size: 0.5rem"> bar <span
style="font-size: 2rem"> fizz </span> </div> </body> Foo bar ﬁzz

MEDIDAS RELATIVAS Esqueça as medidas absolutas, elas são legado de
outras mídias

% EM & REM VIEWPORT   UNITS

MEDIA QUERIES Regras de estilo específicas aplicadas a diferentes aspectos
do dispositivo

@media print { a[href]::after {
content: " (" attr(href) ")"; } } CSS

TRILHA ESPECIAL DE DESENVOLVIMENTO NO ENCONTRO LOCAWEB PROMETE TRAZER NOVIDADES
E ASSUNTOS PERTINENTES DA ÁREA LOREM IPSUM IS SIMPLY DUMMY TEXT OF THE PRINTING AND TYPESETTING INDUSTRY. LOREM

TRILHA ESPECIAL DE DESENVOLVIMENTO NO ENCONTRO LOCAWEB (HTTP://LOCAWEB.COM.BR) PROMETE TRAZER
NOVIDADES E ASSUNTOS PERTINENTES DA ÁREA LOREM IPSUM IS SIMPLY DUMMY TEXT OF THE PRINTING AND TYPESETTING INDUSTRY. LOREM

@media print { a[href]::after {
content: " (" attr(href) ")"; } } Adiciona ao fim do conteúdo o href Somente em impressão CSS

TIPO DE MÍDIA TAMANHO   DE TELA DENSIDADE DE  
PIXELS RESOLUÇÃO ORIENTAÇÃO PROFUNDIDADE DE   CORES

/* iPad landscape */ @media screen and (max-width: 1024px) {
/* Styles */ } ! /* iPad portrait */ @media screen and (max-width: 768px) { /* Styles */ } ! /* iPhone portrait */ @media screen and (max-width: 320px) { /* Styles */ }

Evite a criação de muitos breakpoints e não os faça
com base em dispositivos

Grade fluída é sua aliada: é mais simples e facilita
a manutenção

Uma única URL, código e conteúdo para manter; além de
um único deploy - DIEGO EIS

Responsive Design != one size fits all Don’t get hung
up thinking that media queries are the only tool in your toolbox. - BRAD FROST

Assuma menos, considere que seus usuários não estão em telas
grandes ou tenham uma velocidade de conexão adequada

- BRAD FROST

PROGRESSIVE   ENHANCEMENT Foque no conteúdo e adicione funcionalidades mesmo
que só compatíveis com suportes específicos

MODERNIZR Detecte funcionalidades e apresente o conteúdo de diferentes maneiras

http://diveintohtml5.info/everything.html

SUPORTE A HTML5 SUPORTE A CSS3 SUPORTE A AUDIO  
E VIDEO SUPORTE A   PLUGINS TIPOS DE INPUT

var isTouch = (function () { return ('ontouchstart'
in window || 'onmsgesturechange' in window); })(); ! var gestures = { start: isTouch ? 'touchstart' : 'mousedown', move: isTouch ? 'touchmove' : 'mousemove', stop: isTouch ? 'touchend touchcancel' : 'mouseup' }; JAVASCRIPT

QUALIDADE DE   CONEXÃO NÍVEL DE BATERIA ILUMINAÇÃO DO  
AMBIENTE GIROSCÓPIO

RWD + SERVER-SIDE COMPONENTS Componentes do projeto são concebidos no
servidor com base no suporte computacional Cuidado, não abuse

DESIGN   RESPONSIVO ! DESIGN   ADAPTATIVO está contido no

- BRAD FROST

LEGIBILIDADE Diferentes tamanhos e resoluções de telas utilizadas em diferentes
distâncias em relação ao usuário

Nem sempre saber o tamanho da tela é o bastante

INTERAÇÃO Diferentes propostas de interação com o documento em cada
dispositivo

PINCH ZOOM Ferramenta do usuário para navegar na página

Desabilita o pinch zoom que, por padrão, é habilitado <meta
name="viewport"  content="width=device-width,   user-scalable=no">

Na maioria das vezes que a pagina não tem pinch
zoom é porque foi mal feita!

GESTOS Em geral o aplicativo se adapta aos periféricos disponíveis,
não reescreva comportamentos padrões

OFFLINE WEB APPLICATIONS Manter o conteúdo no cache do dispositivo
pode ser uma boa alternativa Confira sobre Service Workers

FUTURE FRIENDLY abrace o imprevisível

Disruption will only accelerate. The quantity and diversity of connected
devices —many of which we haven't imagined yet— will explode, as will the quantity and diversity of the people around the world who use them. Our existing standards, workflows, and infrastructure won't hold up. Today's onslaught of devices is already pushing them to the breaking point. They can't withstand what's ahead. Proprietary solutions will dominate at first. Innovation necessarily precedes

withstand what's ahead. Proprietary solutions will dominate at first. Innovation
necessarily precedes standardization. Technologists will scramble to these solutions before realizing (yet again) that a standardized platform is needed to maintain sanity. The standards process will be painfully slow. We will struggle with (and eventually agree upon) appropriate standards. During this period, the web will fall even further behind proprietary solutions.

http://futurefriendlyweb.com/thinking.html

REALIDADE não fuja dela

UBIQUIDADE FLEXIBILIDADE PERFORMANCE ENHANCEMENT FUTURE   FRIENDLY - BRAD FROST

INSPIRAÇÃO e referências no assunto

JOHN ALLSOPP ETHAN   MARCOTTE BRAD FROST LUKE   WROBLEWSKI
MARCELO   OLIVEIRA SÉRGIO LOPES DIEGO EIS

The control which designers know in the print medium, and
often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. But first, we must "accept the ebb and flow of things." - JOHN ALLSOPP (2000)

OBRIGADO A TODOS @jcemer façam a web de amanhã

Construindo a web mobile de amanhã

Construindo a web mobile de amanhã

More Decks by Jean Carlo Emer

Other Decks in Technology

Featured

Transcript