Disciplina: Web Design - denan.com. O design responsivo ou layout responsivo expande e contrai com

  • View
    212

  • Download
    0

Embed Size (px)

Text of Disciplina: Web Design - denan.com. O design responsivo ou layout responsivo expande e contrai com

Disciplina: Web Design

Diretoria de Ps-graduao e Pesquisa

Centro Universitrio Senac

Prof. Me. Denise Neves profa.denise@hotmail.com.br

Contedo da Aula

Primeira Parte

1- Design Responsivo

2- Mobile First

3- Web Design Adaptativo

4- Semntica HTML5

Etimologia responsiva

Em 1960, um pesquisador americano chamado Nicholas Negroponte analisou um

movimento da arquitetura ps-moderna, passando a aplicar a robtica para criar

ambientes sustentveis e adaptveis s condies predefinidas ou desejveis, seja ao

corpo humano, s cores, quantidade de pessoas e at mesmo s condies

climticas.

Pensar em desenvolver formas e objetos adaptveis exige uma soluo que combine

uma aplicao tecnolgica com uma excelente qualidade final do produto.

Design Responsivo

Responsive Web Design, ou RWD, surgiu precisamente em 2010.

Tudo comeou com um post no blog A List Apart, onde Ethan Marcotte retrata a

mudana de comportamento e crescimento de usurios mobile, sinalizando que isso j

estava afetando (em 2010) empresas que queriam seus websites disponveis para

novos dispositivos.

A felicidade de Ethan foi comparar esse movimento ao trabalho de arquitetura

responsiva de Negroponte, em que temos de adaptar de forma inteligente o ambiente

s variveis de interao do usurio, nascido na arquitetura ps-moderna e atualmente

apadrinhado na rea de desenvolvimento web.

Design Responsive

Design Responsivo

A matria com o ttulo "Responsive Web Design comea citando John Allsopp :

O controle que os designers tm sobre contedos publicados na mdia impressa e to

desejado para aplicao na web , simplesmente, consequncia das restries que a pgina

impressa impe. Ns devemos nos conscientizar de que a web no impe as restries da mdia

impressa, ela necessita de design flexvel. Devemos, acima de tudo, "aceitar o fluxo e o

refluxo das coisas".

http://alistapart.com/article/responsive-web-design (http://kwz.me/6B)

Fonte:http://bt-wd.blogspot.com.br/

Princpios do RWD

No diz respeito simplesmente e somente adaptao do layout ao tamanho da tela.

Design capaz de "responder" s caractersticas do dispositivo ao qual servido. Responder,

nesse contexto, tem o sentido de movimentar-se expandindo e contraindo.

O design responsivo ou layout responsivo expande e contrai com a finalidade de se acomodar de

maneira usvel e acessvel rea onde visualizado ou, mais genericamente, ao contexto onde

renderizado, seja um smartphone, um tablet, um desktop, um leitor de tela, um mecanismo de

busca etc.

Ethan, o pai do design responsivo para a web, usou o termo "ingredientes tcnicos" para

relacionar os trs componentes, ou as trs tecnologias fundamentais para desenvolvimento do

design responsivo. So elas :

grid fludo;

imagens e mdia flexveis;

media queries.

Design Responsivo

Grid fludo um termo que foi popularizado e incorporado definitivamente ao jargo

de desenvolvimento graas ao aparecimento dos frameworks CSS. Antes do advento

desses frameworks, o termo usado era o layout com seus componentes fludos, que

continua vlido. Se voc preferir, siga com ele. Layout fludo aquele cujas medidas

CSS so definidas em unidades relativas, tais como porcentagens e ems, e no em

medidas absolutas como pixel.

Design Responsivo

Media queries uma tecnologia CSS que permite ao autor servir folhas de estilos

baseadas em determinadas caractersticas do dispositivo ao qual o layout ser

servido.

Design Responsivo

Mdia e imagem flexveis so aquelas capazes de contrair ou expandir suas

dimenses ou ter suas dimenses alteradas por scripts em funo do contexto onde

so renderizadas. As mdias mais comuns presentes em layouts so: vdeos, udio e

widgets em geral.

Design Responsivo

Pilares do RWD

As tecnologias que constituem os pilares de sustentao do design responsivo so:

HTML5

JavaScript para compatibilidades

CSS3

Design Responsivo

No dia 3 de novembro de 2009, Luke Wroblewski publicou uma matria em

http://www.lukew.com/ff/entry.asp?933 (http://kwz.me/6b) cujo ttulo "Mobile First"

defendendo e justificando a necessidade de se comear o projeto de um layout a partir

da sua apresentao em dispositivos mveis. A matria criou o termo mobile first, que

foi rapidamente incorporado ao jargo do desenvolvimento para dispositivos mveis.

Luke comea a matria afirmando :

Na maioria das vezes, a criao do layout para servir uma aplicao ou um site para

dispositivos mveis s comea depois que o layout para desktop est pronto. Nessa

matria, apresento trs razes para que o fluxo de criao do layout seja invertido, isto

, primeiro o layout para dispositivo mvel e a partir da o layout para desktop.

Mobile First

Razes para projetar primeiro pensando em layout para dispositivos mveis:

Uma exploso da tecnologia mobile est em curso

Layout para dispositivo mvel implica em otimizao de dados e aes a serem

projetadas com descarte de elementos desnecessrios.

Dispositivos mveis esto incorporando a cada dia mais e mais funcionalidades nativas e

capacidades de criao de contedos ricos no exstentes na maioria dos navegadores

para desktop.

Mobile First

Apesar de os objetivos dos usurios ao acessarem sites/sistemas nas verses desktop

e mobile serem os mesmos, ou muito semelhantes, as experincias certamente so

diferentes e devem ser consideradas durante a concepo de um projeto web.

Tabela a seguir.

Mobile First

tela9

Desktop Mobile

Tela grande. Tela pequena com diferentes dimenses, mas

com substancial perda de rea com relao ao

desktop.

Teclado-padro. Teclado pequeno e sem feddback ttil nas

verses touch.

Mouse. Sem cursor e feedback.

Banda larga, custo baixo. 3G,4G, limite de banda, custo alto.

Energia abundante. Energia limitada, principalmente se os recursos

como GPS estiverem ativos.

Rede consistente. Rede inconsistente.

Alta capacidade de

processamento.

Processamento limitado.

Espao de sobra no HD. Limite de espao de armazenamento.

Uso em casa e/ou no trabalho. Uso em qualquer hora , em qualquer lugar.

No mobile:

O modelo de site para mobile deve ser muito

mais estreito que o de tablet, isso porque seus

tamanhos podem variar de 320px 480px.

No tablet:

Como o tamanho do tablet naturalmente

menor (de 480px 768px), para fazermos

um site responsivo, teremos de dar uma

realocada no contedo.

No monitor:

Assim ficar o nosso site aps a sua concepo, ou melhor, essa ser a

estrutura das informaes que contero no nosso site quando ele estiver

terminado. Aqui imaginamos um monitor de desktop ou notebook de

resoluo 1200.

Mobile First

HTML5 Navegao Mobile first : Tcnica baseada exclusivamente em CSS e inicialmente proposta por

Frances de Wall

Mitos

1) Usurios utilizam dispositivos mveis apenas na rua.

2) Usurios de dispositivos mveis no precisam do contedo total.

3) Usurio de dispositivos mveis preferem uma experincia mais simples.

4) Existe uma internet mvel.

Design Responsivo

Design Adaptativo

O termo Adaptive Web Design (AWD) foi criado por Aaron Gustafson, autor do livro

"Adaptive Web Design Crafting Rich Experiences with Progressive Enhancement", no

qual descreve o conceito e as tcnicas de criao de layout que se adaptem s caractersticas

e s capacidades do dispositivo do usurio.

AWD diz respeito criao de interfaces que se adaptam s capacidades do usurio, seja na

sua forma, seja nas suas funes, e o autor segue dizendo AWD outro termo para

progressive enhancement melhoria progressiva , mas que considera o modo como as

funcionalidades individuais daquelas capacidades interagem entre si para determinar o

comportamento do todo, uma vez que leva em conta variados nveis de marcao HTML,

CSS e JavaScript bem como suporte para tecnologias assistivas.

HTML5 Performance: Cdigo mais leves, de carregamento mais rpido.

Ex:

----- contedo de rodap ----

Multimidia : Novas funcionalidade nativas para insero de mdia.

Acessibilidade : A natureza semntica e seus recursos de WAI-ARIA

geram cdigos mais acessveis.

Formulrios : A criao dos novos elementos para campos de formulrio.

Notadamente os novos elementos do tipo input

Ex: Campo tipo data faz aparecer um widget de seletor de datas.

Os dispositivos mveis reconhecem o tipo de campo definido na marcao do elemento do

formulrio e, ao ser dado o foco ao campo , automaticamente apresentam ao usurio a

interface nativa apropriada , como por exemplo seletor de datas ou o teclado numrico , ou

alfanumrico.

HTML5 Especificao mnima para design responsive:

Engenharia WEB

HTML5 Elementos do html5

Um dos objetivos da HTML5 foi o de criar uma marcao com forte enfse na

semntica.

Semntica diz respei