Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

http://jcemer.com

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

MOTIVAÇÃO para que estamos aqui hoje

Slide 5

Slide 5 text

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.

Slide 6

Slide 6 text

HISTÓRIA desde onde tudo começou

Slide 7

Slide 7 text

1991

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

1995

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

1996

Slide 12

Slide 12 text

1996

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

FLASH 
 PLAYER SVG CANVAS AUDIO &
 VIDEO WEBGL

Slide 15

Slide 15 text

SUPORTES distribuindo conteúdo

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

HTML Defina a viewport com um valor fixo se 980px não for adequado

Slide 28

Slide 28 text

HTML Ou faça a largura da viewport ser igual a do display do aparelho

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

16:10 3:4 2:3

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

RESPONSIVE DESIGN aprimorando experiência

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

MOBILE DESKTOP TABLET

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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 44

Slide 44 text

No content

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

MEDIDA EM FONTE Foo
bar fizz
Foo bar fizz

Slide 49

Slide 49 text

MEDIDA REM Tamanho de fonte relativo ao tamanho de fonte definido no FONTE

Slide 50

Slide 50 text

MEDIDA REM FONTE Foo
bar fizz
Foo bar fizz

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

% EM & REM VIEWPORT 
 UNITS

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

No content

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

8/11

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

No content

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

- BRAD FROST

Slide 74

Slide 74 text

- BRAD FROST

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

http://diveintohtml5.info/everything.html

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

DESIGN 
 RESPONSIVO ! DESIGN 
 ADAPTATIVO está contido no

Slide 83

Slide 83 text

- BRAD FROST

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

Nem sempre saber o tamanho da tela é o bastante

Slide 86

Slide 86 text

No content

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

No content

Slide 89

Slide 89 text

No content

Slide 90

Slide 90 text

No content

Slide 91

Slide 91 text

No content

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

Desabilita o pinch zoom que, por padrão, é habilitado

Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

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

Slide 96

Slide 96 text

No content

Slide 97

Slide 97 text

No content

Slide 98

Slide 98 text

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

Slide 99

Slide 99 text

FUTURE FRIENDLY abrace o imprevisível

Slide 100

Slide 100 text

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

Slide 101

Slide 101 text

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.

Slide 102

Slide 102 text

http://futurefriendlyweb.com/thinking.html

Slide 103

Slide 103 text

REALIDADE não fuja dela

Slide 104

Slide 104 text

No content

Slide 105

Slide 105 text

No content

Slide 106

Slide 106 text

No content

Slide 107

Slide 107 text

UBIQUIDADE FLEXIBILIDADE PERFORMANCE ENHANCEMENT FUTURE 
 FRIENDLY - BRAD FROST

Slide 108

Slide 108 text

INSPIRAÇÃO e referências no assunto

Slide 109

Slide 109 text

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

Slide 110

Slide 110 text

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)

Slide 111

Slide 111 text

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