Hipermídia as avessas - Speaker Deck

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Mobile “rough consensus and running code”

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Mobile Viewport

Slide 15

Slide 15 text

Mobile Viewport

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Mobile Viewport Meta Viewport Deﬁna a meta viewport com um valor ﬁxo de largura, quando 980px não for adequado HTML Code

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

HTML Code Desabilita o pinch zoom que, por padrão, é habilitado 90% das vezes que a pagina não tem pinch zoom é porque foi mal feita! Mobile Viewport Pinch Zoom

Slide 22

Slide 22 text

Mobile Viewport Pinch Zoom Remova o pinch zoom em Jogos em HTML5 e WebApps como Fastbook Fastbook[...] HTML Code

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

Legibilidade

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

Aspect Ratio 16:10 3:4 2:3

Slide 31

Slide 31 text

Heat Graph

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Interação

Slide 34

Slide 34 text

Interação

Slide 35

Slide 35 text

Interação

Slide 36

Slide 36 text

Interação

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

Tamanho da Fonte Tamanho Relativo HTML Code Foo !

! ! bar ! ! ! ! ! fizz ! ! !

Foo bar ﬁzz EM

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

REM Foo !

! ! bar ! ! ! ! ! fizz ! ! !

Tamanho da Fonte Tamanho Relativo Foo Fizz bar HTML Code

Slide 46

Slide 46 text

Line Height Foo !

! ! bar !

HTML Code Tamanho da Fonte Tamanho Relativo Foo bar

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

Imagem Fluída

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

Media Queries

Slide 55

Slide 55 text

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

Deﬁnir a largura da viewport igual a largura do display no mobile permite a criação de breakpoints HTML Code Media Queries

Slide 59

Slide 59 text

Media Queries Breakpoints

Slide 60

Slide 60 text

Media Queries Breakpoints

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

No content

Slide 64

Slide 64 text

No content

Slide 65

Slide 65 text

No content

Slide 66

Slide 66 text

No content

Slide 67

Slide 67 text

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”

Slide 68

Slide 68 text

Media Queries Breakpoints

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

No content

Slide 71

Slide 71 text

No content

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

Bitmap

HTML Code Atributo srcset

Slide 85

Slide 85 text

Bitmap

Accessible text

HTML Code Picture

Slide 86

Slide 86 text

Bitmap HTML Code Especiﬁcações complementares hi, there

Accessible text

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

Layout desktop HTML Code Não utilize a viewport a menos que a pagina não ﬁque na largura certa em mobile

Slide 93

Slide 93 text

Layout responsivo Deﬁna a viewport e os breakpoints a medida que forem necessários HTML Code

Slide 94

Slide 94 text

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 */ }

Slide 95

Slide 95 text

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; }

Slide 96

Slide 96 text

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%

Slide 97

Slide 97 text

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