Hipermídia as avessas

Hipermídia as avessas seu conteúdo na web por diferentes formas

Hipermídia reunião de várias mídias num suporte computacional de forma
não-linear

Avesso praticamente a anti-matéria de qualquer coisa, mas que apesar
de tudo, faz parte do contexto

Hipermídia as avessas uma mídia entregue para diferentes suportes computacionais

Jean Carlo Emer github.com/jcemer twitter.com/jcemer speakerdeck.com/jcemer artesão da internet Marcelo
Oliveira github.com/askoth twitter.com/askoth front-end mothafucka

http://speakerdeck.com/jcemer/ hipermidia-as-avessas

Desktops Laptops TVs Touch Laptops Smartphones Totens Telão digital Tablets
Google Glass Browsers Apps Apple Store Netﬂix Steam

Mobile dispositivos pequenos e de fácil locomoção e além de
tudo smarts

Mobile iPhone é um grande marco, apesar de outros experimentos
anteriores

Mobile “rough consensus and running code”

Display e Viewport dispositivo de apresentação visual ou tátil e
área que determina qual o limite de apresentação do conteúdo

Mobile Viewport a viewport não é necessariamente do tamanho do
display

Mobile Viewport

Meta Viewport deﬁne a relação entre display e viewport Mobile
Viewport

Mobile Viewport Meta Viewport Sem a <meta>, o website é
entendido como desktop A viewport é deﬁnida como tendo largura de 980px

Mobile Viewport Meta Viewport Deﬁna a meta viewport com um
valor ﬁxo de largura, quando 980px não for adequado <meta name=”viewport” content=”width=1024”> HTML Code

Mobile Viewport CSS Viewport colocando a meta viewport no lugar
adequado: a folha de estilo

Mobile Viewport Pinch Zoom ferramenta do usuário para navegar na
página

Mobile Viewport Pinch Zoom Remova o pinch zoom em Jogos
em HTML5 e WebApps como Fastbook <!DOCTYPE HTML> <html lang="en-US"> <head> <title>Fastbook</title>[...] <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user- scalable=no"> HTML Code

Mantenha o pinch zoom em todas as outras situações e
mesmo em WebApps Mobile Viewport Pinch Zoom

Propriedade Intervalo Padrão width [200, 10.000] 980 height [223, 10.000]
∆ minimum-scale (0, 10] 0.25 maximum-scale (0, 10] 5 initial-scale ~ Mostrar tudo Mobile Viewport

Como compartilhar o mesmo conteúdo em diversos dispositivos Desaﬁos da
web plural

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

Legibilidade

O tamanho do display é relativo à distância do usuário
Legibilidade

diferentes escalas de proporção entre largura e altura Aspect Ratio

Aspect Ratio 16:10 3:4 2:3

Heat Graph

Interação diferentes propostas de interação com o documento em cada
dispositivo

Interação

Interação Não conte com o previlégio de seu documento ser
manipulado a duas mãos

Responsive Design entrega de uma experiência ótima de leitura e
navegação independente de dispositivo

Tamanho de Fonte fontes muito pequenas são ilegíveis

Tamanho da Fonte Não existe especiﬁcação para o tamanho básico
da fonte, o aplicativo escolhe o mais adequado. Geralmente é 16px Tamanhos de fonte xx-small, x-small, small, medium, large, x-large, xx-large

Tamanho Relativo unidades de medida baseadas em elementos anscestrais ou
outras propriedades Tamanho da Fonte

Tamanho de fonte relativo ao tamanho de fonte deﬁnido ou
herdado no elemento pai Tamanho da Fonte Tamanho Relativo EM

Tamanho da Fonte Tamanho Relativo HTML Code <body> Foo !
<div style="font-size: 0.5em"> ! ! bar ! ! <span style="font-size: 2em"> ! ! ! fizz ! ! </span> ! </div> </body> Foo bar ﬁzz EM

Tamanho de fonte relativo ao tamanho de fonte deﬁnido no
<body> Trata-se de uma evolução e tem seu suporte restrito a IE9+ Tamanho da Fonte Tamanho Relativo REM

REM <body> Foo ! <div style="font-size: 0.5rem"> ! ! bar
! ! <span style="font-size: 2rem"> ! ! ! fizz ! ! </span> ! </div> </body> Tamanho da Fonte Tamanho Relativo Foo Fizz bar HTML Code

Line Height <body style="line-height: 1.5em"> Foo ! <div style="font-size: 2rem">
! ! bar ! </div> </body> HTML Code Tamanho da Fonte Tamanho Relativo Foo bar

Conteúdo Fluído conteúdo que se adequa à viewport seguindo suas
dimensões

conteúdo que se adequa à viewport seguindo suas dimensões Conteúdo
Fluído

Texto Fluído 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

Imagem Fluída

Media Queries regras de estilo especíﬁcas aplicadas a diferentes aspectos
do dispositivo

@media print { a[href]:after { content: " (" attr(href) ")";
} } CSS Code HTML Code <a href="http://google.com">Google</a> Google (http://google.com) Media Queries

Media Queries

regras de estilo especíﬁcas aplicadas a diferentes dimensões de viewport
Media Queries 800px

regras de estilo específicas aplicadas a diferentes dimensões de viewport
CSS Code @media only screen and (max-width: 550px) { ! .container { ! ! font: 14px 'Comic Sans'; ! ! color: red; ! } } Media Queries 500px

Deﬁnir a largura da viewport igual a largura do display
no mobile permite a criação de breakpoints <meta name=”viewport” content=”width=device-width”> HTML Code Media Queries

Media Queries Breakpoints

Media Queries Breakpoints CSS Code /* Styles to desktop */
/* 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 */ } Baseados em resoluções “padrões”

Media Queries Breakpoints

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

Desaﬁos das imagens como escolher uma imagem bitmap que tenha
uma boa nitidez em diferentes dispositivos sem exagerar no tamanho

Imagens HTML 4% Other 9% Flash 6% Stylesheets 3% Scripts
17% Images 63%

Formatos de imagens é muito importante saber identiﬁcar e compreender
os diferentes formatos

Bitmap imagens que possuem resolução especíﬁca e deﬁnem a cor
de cada um dos seus pixels (png, jpg, webp)

Vetorial imagens que, sem pertencer a uma resolução especíﬁca ,
deﬁnem formas através de pontos (svg, fontes)

Imagens em websites imagens são úteis e muitas vezes valem
mais que um Lorem Ipsum

Imagens no CSS é a maneira de inserir imagens restritamente
relacionadas com o layout da página

Imagens no CSS Fontes podem ser utilizadas com biblioteca de
ícones em vetor

<img> é a maneira de inserir conteúdo na forma de
imagem em um documento

Uma única imagem pode ser indicada para cada <img> A
consequência é não ser possível escolher diferentes arquivos de imagens adequados para cada dispositivo <img>

<img> Vetorial Logotipos, ícones e ilustrações podem se tornar imagens
vetoriais

<img> Bitmap existem especiﬁcações em rascunho (sem suporte) para prover
diferentes arquivos de imagem

<img> Bitmap <img src="pear-mobile.jpeg" srcset="pear-mobile.jpeg 720w, pear-tablet.jpeg 1280w, pear-desktop.jpeg 1x"
alt="The pear is juicy."> HTML Code Atributo srcset

<img> Bitmap <picture width="500" height="500"> <source media="(min-width: 45em)" src="large.jpg"> <source
media="(min-width: 18em)" src="med.jpg"> <source src="small.jpg"> <img src="small.jpg" alt="hi, there" lazyload> <p>Accessible text</p> </picture> HTML Code Picture

<img> Bitmap HTML Code Especiﬁcações complementares <picture width="500" height="500"> <source
media="(min-width: 45em)" srcset="large-1.jpg 1x, large-2.jpg 2x"> <source media="(min-width: 18em)" srcset="med-1.jpg 1x, med-2.jpg 2x"> <source srcset="small-1.jpg 1x, small-2.jpg 2x"> <img src="small-1.jpg" alt="hi, there" lazyload> <p>Accessible text</p> </picture>

<img> solução nada Incluir uma imagem de nitidez mediana aceitável
para uma considerável gama de dispositivos

<img> solução via JavaScript Substituir posteriormente (via JavaScript) a imagem
de nitidez mediana para uma mais adequada ao dispositivo A desvantagem é que o usuário precisará fazer o download de duas imagens e terá sua experiência visual afetada

<img> solução por escalamento Criar uma imagem de dimensão maior
que a utilizada e de muito pouca qualidade Depois de reescalada, a nitidez pode ser até igual a de retina mas o bitmap gigantesco ﬁcará ocupando memória do navegador

Não esqueça quais os pontos mais importantes para lembrar enquanto
estiver desenvolvendo

Comece a desenvolver para os dispositivos que oferecem menor performance
e nos quais você tem menos experiência como desenvolvedor: mobile

Layout desktop <meta name="viewport" content="width=1024"> HTML Code Não utilize a
<meta> viewport a menos que a pagina não ﬁque na largura certa em mobile

Layout responsivo Deﬁna a <meta> viewport e os breakpoints a
medida que forem necessários HTML Code <meta name="viewport" content="width=device-width">

Layout responsivo: CSS Escreva o estilo geral para mobile e
media queries para cada dispositivo de resolução maior CSS Code /* Styles to mobile */ /* a bit wider */ @media screen and (min-width: ...em) { /* Styles */ } /* wider */ @media screen and (min-width: ...em) { /* Styles */ }

Layout responsivo: fonte Altere o tamanho de fonte de acordo
com o dispositivo CSS Code /* Styles to mobile */ .body { font-size: 23px; } p { font-size: 0.8em; } /* wider */ @media screen and (min-width: ...em) { .body { font-size: 16px; } } p { font-size: 0.8em; }

Layout responsivo: grade fluída Evite a criação de muitos breakpoints,
lembre-se que grade fluída é sua aliada Grade fluída é mais simples e facilita a manutenção 62% 34% 62% 34%

Layout responsivo: imagens Tente achar um tamanho que ﬁque com
nitidez razoável na maior parte dos dispositivos ou aplique uma das técnicas anteriores até que exista uma solução melhor

Este é o futuro!

Obrigado! @jcemer @askoth

Hipermídia as avessas

Hipermídia as avessas

More Decks by Jean Carlo Emer

Other Decks in Technology

Featured

Transcript