disciplina: web design - denan.com.brdenan.com.br/documentos/oitavaaula_webdesign.pdf · o design...

25
Disciplina: Web Design Diretoria de Pós-graduação e Pesquisa Centro Universitário Senac Prof. Me. Denise Neves [email protected]

Upload: vuongnguyet

Post on 25-Jan-2019

218 views

Category:

Documents


1 download

TRANSCRIPT

Disciplina: Web Design

Diretoria de Pós-graduação e Pesquisa

Centro Universitário Senac

Prof. Me. Denise Neves [email protected]

Conteúdo da Aula

Primeira Parte

1- Design Responsivo

2- Mobile First

3- Web Design Adaptativo

4- Semântica HTML5

Etimologia responsiva

Em 1960, um pesquisador americano chamado Nicholas Negroponte analisou um

movimento da arquitetura pós-moderna, passando a aplicar a robótica para criar

ambientes sustentáveis e adaptáveis às condições predefinidas ou desejáveis, seja ao

corpo humano, às cores, à quantidade de pessoas e até mesmo às condições

climáticas.

Pensar em desenvolver formas e objetos adaptáveis exige uma solução que combine

uma aplicação tecnológica com uma excelente qualidade final do produto.

Design Responsivo

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

Tudo começou com um post no blog A List Apart, onde Ethan Marcotte retrata a

mudança de comportamento e crescimento de usuários mobile, sinalizando que isso já

estava afetando (em 2010) empresas que queriam seus websites disponíveis 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 variáveis de interação do usuário, nascido na arquitetura pós-moderna e atualmente

apadrinhado na área de desenvolvimento web.

Design Responsive

Design Responsivo

A matéria com o título "Responsive Web Design” começa citando John Allsopp :

“O controle que os designers têm sobre conteúdos publicados na mídia impressa e tão

desejado para aplicação na web é, simplesmente, consequência das restrições que a página

impressa impõe. Nós devemos nos conscientizar de que a web não impõe as restrições da mídia

impressa, ela necessita de design flexível. 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/

Princípios do RWD

Não diz respeito simplesmente e somente à adaptação do layout ao tamanho da tela.

Design capaz de "responder" às características 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 usável e acessível à á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 técnicos" para

relacionar os três componentes, ou as três tecnologias fundamentais para desenvolvimento do

design responsivo. São elas :

• grid fluído;

• imagens e mídia flexíveis;

• media queries.

Design Responsivo

Grid fluído é um termo que foi popularizado e incorporado definitivamente ao jargão

de desenvolvimento graças ao aparecimento dos frameworks CSS. Antes do advento

desses frameworks, o termo usado era o layout com seus componentes fluídos, que

continua válido. Se você preferir, siga com ele. Layout fluído é aquele cujas medidas

CSS são definidas em unidades relativas, tais como porcentagens e ems, e não em

medidas absolutas como pixel.

Design Responsivo

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

baseadas em determinadas características do dispositivo ao qual o layout será

servido.

Design Responsivo

Mídia e imagem flexíveis são aquelas capazes de contrair ou expandir suas

dimensões ou ter suas dimensões alteradas por scripts em função do contexto onde

são renderizadas. As mídias mais comuns presentes em layouts são: vídeos, áudio e

widgets em geral.

Design Responsivo

Pilares do RWD

As tecnologias que constituem os pilares de sustentação do design responsivo são:

• HTML5

• JavaScript para compatibilidades

• CSS3

Design Responsivo

No dia 3 de novembro de 2009, Luke Wroblewski publicou uma matéria em

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

defendendo e justificando a necessidade de se começar o projeto de um layout a partir

da sua apresentação em dispositivos móveis. A matéria criou o termo mobile first, que

foi rapidamente incorporado ao jargão do desenvolvimento para dispositivos móveis.

Luke começa a matéria afirmando :

Na maioria das vezes, a criação do layout para servir uma aplicação ou um site para

dispositivos móveis só começa depois que o layout para desktop está pronto. Nessa

matéria, apresento três razões para que o fluxo de criação do layout seja invertido, isto

é, primeiro o layout para dispositivo móvel e a partir daí o layout para desktop.

Mobile First

Razões para projetar primeiro pensando em layout para dispositivos móveis:

Uma explosão da tecnologia mobile está em curso

Layout para dispositivo móvel implica em otimização de dados e ações a serem

projetadas com descarte de elementos desnecessários.

Dispositivos móveis estão incorporando a cada dia mais e mais funcionalidades nativas e

capacidades de criação de conteúdos ricos não exstentes na maioria dos navegadores

para desktop.

Mobile First

Apesar de os objetivos dos usuários ao acessarem sites/sistemas nas versões desktop

e mobile serem os mesmos, ou muito semelhantes, as experiências certamente são

diferentes e devem ser consideradas durante a concepção de um projeto web.

Tabela a seguir.

Mobile First

tela9

Desktop Mobile

Tela grande. Tela pequena com diferentes dimensões, mas

com substancial perda de área com relação ao

desktop.

Teclado-padrão. Teclado pequeno e sem feddback tátil nas

versões 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.

Espaço de sobra no HD. Limite de espaço 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 conteúdo.

No monitor:

Assim ficará o nosso site após a sua concepção, ou melhor, essa será a

estrutura das informações que conterão no nosso site quando ele estiver

terminado. Aqui imaginamos um monitor de desktop ou notebook de

resolução 1200.

Mobile First

HTML5 Navegação Mobile first : Técnica baseada exclusivamente em CSS e inicialmente proposta por

Frances de Wall

Mitos

1) Usuários utilizam dispositivos móveis apenas na rua.

2) Usuários de dispositivos móveis não precisam do conteúdo total.

3) Usuário de dispositivos móveis preferem uma experiência mais simples.

4) Existe uma “internet móvel”.

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 técnicas de criação de layout que se adaptem às características

e às capacidades do dispositivo do usuário.

“AWD diz respeito à criação de interfaces que se adaptam às capacidades do usuário, seja na

sua forma, seja nas suas funções”, 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 níveis de marcação HTML,

CSS e JavaScript bem como suporte para tecnologias assistivas”.

HTML5 Performance: Código mais leves, de carregamento mais rápido.

Ex:

<footer> ----- conteúdo de rodapé ---- </footer>

Multimidia : Novas funcionalidade nativas para inserção de mídia.

Acessibilidade : A natureza semântica e seus recursos de WAI-ARIA

geram códigos mais acessíveis.

Formulários : A criação dos novos elementos para campos de formulário.

Notadamente os novos elementos do tipo input

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

Os dispositivos móveis reconhecem o tipo de campo definido na marcação do elemento do

formulário e, ao ser dado o foco ao campo , automaticamente apresentam ao usuário a

interface nativa apropriada , como por exemplo seletor de datas ou o teclado numérico , ou

alfanumérico.

HTML5 Especificação mínima para design responsive:

<!doctype html>

<html lang="pt-br">

<head>

<meta charset="utf-8">

<title>Engenharia WEB</title>

<meta name="description" content=“Pós-graduação do Senac">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel=“stylesheet” href=“estilos/arquivo.css”>

</head>

<body>

------Corpo da página ----------

</body>

</html>

HTML5 Elementos do html5

Um dos objetivos da HTML5 foi o de criar uma marcação com forte enfâse na

semântica.

Semântica diz respeito ao uso do elemento apropriado para o conteúdo que marca ,

ou seja, elementos h1-h6 para títulos e subtítulos, elementos p para parágrafos,

elemento li para listas e assim por diante.

Novos elementos : article, header, section, footer, main, etc.

HTML5 Estrutura da marcação HTML

HTML5 Acessibilidade

Cores

Imagens acessíveis : Todo elemento não textual deverá ter um texto

alternativo.

Formulários acessíveis : Campos de formulário são elementos não textuais, que

necessitam de entrada de dados de usuários.

Exemplo: <fieldset>

<legend> Dados Pessoais </legend>

<label for=nome>Nome </label>

<label type = “text” id=“nome” name=“nome”>

-----

</fieldset>

https://www.w3.org/TR/2016/REC-html51-20161101/sec-forms.html#the-form-element

Referências

Silva, M.S. WEB DESIGN RESPONSIVE. Novatec. 2014.

Weyl, Estelle. MOBILE HTML5. O‟REILLY. 2014.

Links:

http://www.w3c.br/

Curiosidade:

https://blog.marvelapp.com/designing-for-television/