Design Responsivo As 7 características do webj .• 2010 - Ethan Marcotte publica texto que muda

  • View
    213

  • Download
    0

Embed Size (px)

Text of Design Responsivo As 7 características do webj .• 2010 - Ethan Marcotte publica texto que muda

Design Responsivo

As 7 caractersticas do webjornalismo

Mariane Ventura

Carlos Marciano

Histria dos layouts da web

1990 Tim Berners-Lee criou um prottipo de navegador chamado WordWideWeb para rodar em PCs da NeXT

NeXT empresa criada por Jobs em 1985, depois de sair da Apple

Nome do navegador trocado para Nexus

Sobre o Nexus

Suportava o mnimo de marcao HTML

Suficiente para formatar textos

Finalidade era compartilhar documentos entre cientistas

Sem preocupaes com layouts

Contedos estritamente textuais

Formatados em uma coluna

Navegador WorldWideWeb - Nexus

Do Nexus ao Mosaic

Em 1992, NCSA- Centro Nacional de Aplicaes para Supercomputadores da Universidade de Illinois - foi desenvolvido o primeiro navegador para web

Popularizou a internet pelos 4 anos seguintes

Se chamava Mosaic

Navegador Mosaic

Mosaic

Possua a opo de disponibilizar apresentaes de imagens

Criar listas

Criar campos de formulrios

Possibilitou a criao de layouts com uso do HTML 1994

1997 criada HTML3.2 criao do elemento table que possibilitou criar layouts complexos

Layout com tabelas

CSS1

A prxima etapa de melhorias veio com o surgimento do CSS1 dez.1996

Apesar de ter sido lanado um ms antes do HTML 3.2 s ganhou fora em 2003, no Brasil

Cdigos de manuteno mais simples

Mecanismos de busca e indexao

O que CSS?

CSS - para Cascading Style Sheets. Folha de Estilos em Cascata. uma linguagem para estilos que define o layout de documentos HTML. CSS controla fontes, cores, margens, linhas, alturas, larguras, imagens de fundo e posicionamentos.

2005 Uso do HTML para estruturar e CSS para apresentar

Responsive Web Design

2010 - Ethan Marcotte publica texto que muda a filosofia e os mtodos de desenvolvimento de layouts

Ethan demonstra como exemplos prticos como criar uma interface que se adapte s diferentes resolues de tela

RWD nos permite projetar o fluxo das coisas

Alguns exemplos de programao responsiva mostradas por Ethan

Responsive Web Design

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

John Allsopp

Etimologia responsiva

A inspirao para o RWD veio da arquitetura

1960 Nicholas Negroponte, pesquisador americano, analisou movimentos da arquitetura ps-moderna, criou ambientes adaptveis ao corpo humano, clima, quantidade de pessoas

Richard Fuller, criou a viso de edifcios desmontveis, instalaes flexveis, de possvel transporte e adptato

Etimologia responsiva

A mudana de comportamento e o crescimento dos usurios mobile

Empresas que queriam seus websites disponveis para novos dispositivos

Ethan compara RWD ao trabalho de arquitetura responsiva de Negroponte, em que temos de adaptar de forma inteligente o ambiente s variveis de interao do usurio

Modelo responsivo

Arquitetura sensvel :

luminosidade, temperatura, cores,

Interface sensvel ao dispositivo, ao tamanho e orientao de tela, capacidade de cores, luminosidade do ambiente, ao comportamento dos olhos, aos leitores de tela, etc.

Curiosidade

Computador de Apollo 11 tinha 2Kb de RAM e processamento de 2.048 MHz

O iPhone 5s tem 1 Gb de RAM e processamento Dual-Core de 1.2GHz

Mais potncia no bolso

Usurios mais exigentes

Usurio X Programador

RWD bom para o usurio, nem tanto para o programador

Pensar em todos os dispositivos e resolues

Layouts compatveis com novos e velhos devices

Priorizar interfaces leves, sem efeitos desnecessrios

Um mesmo projeto para todos devices

Comparao com arquitetura

Princpios do RWD

RWD no somente adaptar o layout ao tamanho da tela

Design capaz de responder s caractersticas do dispositivo

Se movimentando, expandindo e contraindo

Acomodar o contedo de maneira usvel na rea de visualizaes

Ingredientes tcnicos

1. Layout fludo: medidas do CSS relativas (%) e no absolutas (pixel, mm)

2. Imagens e mdias flexveis: capazes de contrair e expandir

3. Media queries: tecnologia do CSS que permite servir folhas de estilo baseada nas caractersticas do dispositivo

Ingredientes tcnicos

Sustentao do design responsivo so: HTML5 JavaScript para compatibilidades CSS3

O uso da HTML5 proporciona: cdigo notadamente semntico; cdigo mais bem estruturado, facilitando sua manuteno e leitura; melhor acessibilidade; melhores benefcios para SEO

Mitos do RWD

Usurios utilizam dispositivos mveis apenas na rua

Usurios de dispositivos mveis no precisam do contedo total. Ex: opes de pizza. 32% dos usurios preferem ver a verso para desktop porque a verso mobile possui menos contedo

Usurios de dispositivos mveis preferem uma experincia mais simples

Apenas sites mveis nos mecanismos de busca ruim

Nem sempre menos mais, vezes menos, mesmo

Conceito mobile first

2009 - Luke Wroblewski defendeu a ideia do mobile first

Justificando a necessidade de se comear um layout a partir dos dispositivos mveis

Na maioria das vezes primeiro feita a verso PC para depois adapt-la ao mvel

3 razes para se fazer o contrrio

Conceito mobile first

1. Uma exploso da tecnologia mobile est em

curso.

2. Layout para dispositivo mvel implica em otimizao de dados e aes a serem projetadas com descarte de elementos desnecessrios.

3. Dispositivos mveis esto com mais funcionalidades nativas e capacidade de criao de contedos ricos no existentes na maioria dos navegadores para desktop.

Web Design Adaptivo

Adaptive Web Design (AWD), criado por Aaron Gustafson

No deve ser visto como sinnimo de RWD

Diferentes premissas de desenvolvimento

Melhoria progressiva

Responsivo x Adaptativo

http://www.b9.com.br/52963/design/essa-otima-serie-de-gifs-

explica-alguns-conceitos-design-responsivo/

Responsivo x Adaptativo

http://www.b9.com.br/52963/design/essa-otima-serie-de-gifs-

explica-alguns-conceitos-design-responsivo/

Atividade

Identificar sites que possuem design responsivo

Sugestes: DC http://dc.clicrbs.com.br/sc/ G1 SC http://g1.globo.com/sc/santa-catarina/index.html Buzz Feedhttp://www.buzzfeed.com/?country=br O Boticriohttp://www.boticario.com.br/ CNN http://edition.cnn.com/ Globo News http://g1.globo.com/globo-news/index.html Estado http://www.estadao.com.br/ Folha de S. Paulohttp://www.folha.uol.com.br/ NYT http://www.nytimes.com/ PMF http://www.pmf.sc.gov.br/ Portal Brasilhttp://www.brasil.gov.br/ Tecmundohttp://www.tecmundo.com.br/ UFSC http://ufsc.br/

http://dc.clicrbs.com.br/sc/http://dc.clicrbs.com.br/sc/http://g1.globo.com/sc/santa-catarina/index.htmlhttp://g1.globo.com/sc/santa-catarina/index.htmlhttp://g1.globo.com/sc/santa-catarina/index.htmlhttp://g1.globo.com/sc/santa-catarina/index.htmlhttp://www.buzzfeed.com/?country=brhttp://www.buzzfeed.com/?country=brhttp://www.boticario.com.br/http://www.boticario.com.br/http://edition.cnn.com/http://edition.cnn.com/http://g1.globo.com/globo-news/index.htmlhttp://g1.globo.com/globo-news/index.htmlhttp://g1.globo.com/globo-news/index.htmlhttp://g1.globo.com/globo-news/index.htmlhttp://www.estadao.com.br/http://www.estadao.com.br/http://www.folha.uol.com.br/http://www.folha.uol.com.br/http://www.nytimes.com/http://www.nytimes.com/http://www.pmf.sc.gov.br/http://www.pmf.sc.gov.br/http://www.brasil.gov.br/http://www.brasil.gov.br/http://www.tecmundo.com.br/http://www.tecmundo.com.br/http://ufsc.br/http://ufsc.br/

Webjornalismo: 7 caractersticas

Livro organizado por Joo Canavilhas 2014

Particularidades que distinguem o jornalismo que se faz na Web dos que se fazem noutros meios

Sete autores de sete pases

Autores

1. Joo Canavilhas Hipertextualidade

2. Ramn Salaverra Multimedialidade

3. Alejandro Rost Interatividade

4. Marcos Palacios Memria

5. Paul Bradshaw Instantaneidade

6. Mirko Lorenz Personalizao

7. John V. Pavlik Ubiquidade

Hipertextualidade: Novas arquiteturas noticiosas

Joo Canavilhas

Conceituao de Hipertexto: inicialmente nos anos 60 por Theodor Nelson: uma escrita no sequencial, um texto com vrias opes de leitura que permite ao leitor efetuar uma escolha (p.4) Canavilhas (2005) as definies incluem sempre dois elementos nucleares: ns e links, ou seja, blocos informativos e hiperligaes. (p.6)

Cuidados: * Um bloco textual curto deixar o leitor insatisfeito por conter

pouca informao, enquanto um bloco longo pode tornar-se cansativo para uma leitura em monitor

* produzir blocos com sentido, independentemente do contexto

oferecido pelos restantes blocos informativos

4 nveis de leitura: a) Unidade Base: resumo do acontecimento; b) Explicao: liga-se ao primeiro nvel por uma s hiperligao e completa a informao essencial sobre o acontecimento; c) Contextualizao: oferece mais informao sobre cada um dos aspetos fundamentais da notcia, desenvolvendo a informao apresentada nos nveis anteriores; d) Expl