cleuber rodrigues brunomelo_matheus_isabelfernanda_yana_webdesignresponsivo_gti5_22015
TRANSCRIPT
![Page 1: Cleuber rodrigues brunomelo_matheus_isabelfernanda_yana_webdesignresponsivo_gti5_22015](https://reader031.vdocuments.site/reader031/viewer/2022022415/58ecafb61a28abc43e8b45a5/html5/thumbnails/1.jpg)
Isabel Fernanda, Cleuber Rodrigues, Bruno Melo, Matheus Araujo, Yana DisconziGTI 5 – FACSENAC - 2015
![Page 2: Cleuber rodrigues brunomelo_matheus_isabelfernanda_yana_webdesignresponsivo_gti5_22015](https://reader031.vdocuments.site/reader031/viewer/2022022415/58ecafb61a28abc43e8b45a5/html5/thumbnails/2.jpg)
![Page 3: Cleuber rodrigues brunomelo_matheus_isabelfernanda_yana_webdesignresponsivo_gti5_22015](https://reader031.vdocuments.site/reader031/viewer/2022022415/58ecafb61a28abc43e8b45a5/html5/thumbnails/3.jpg)
![Page 4: Cleuber rodrigues brunomelo_matheus_isabelfernanda_yana_webdesignresponsivo_gti5_22015](https://reader031.vdocuments.site/reader031/viewer/2022022415/58ecafb61a28abc43e8b45a5/html5/thumbnails/4.jpg)
Design adaptativo é basicamente o que seutilizava a alguns anos atrás, onde umconjunto de código é utilizado para cada tipode dispositivo que acessava o site.
Design responsivo é aqueleonde todo o conteúdo éflexível, se reposicionandoconforme o ambiente dousuário, como tamanho datela, orientação (horizontal ouvertical) e plataforma.
AWD
RWD
![Page 5: Cleuber rodrigues brunomelo_matheus_isabelfernanda_yana_webdesignresponsivo_gti5_22015](https://reader031.vdocuments.site/reader031/viewer/2022022415/58ecafb61a28abc43e8b45a5/html5/thumbnails/5.jpg)
O termo é derivado da ideia do arquiteto e
cientista Nicholas Negroponteque
arquitetura responsiva aquela no qual os ambientes através de
sensores são capazes de detectar variáveis como cores, temperatura, entre outras e adequar-se de forma
positiva.
![Page 6: Cleuber rodrigues brunomelo_matheus_isabelfernanda_yana_webdesignresponsivo_gti5_22015](https://reader031.vdocuments.site/reader031/viewer/2022022415/58ecafb61a28abc43e8b45a5/html5/thumbnails/6.jpg)
Ethan Marcotte
utilizou pela primeira vez o termo
Responsive Web Designem um artigo para o blog
A list Apart.
![Page 7: Cleuber rodrigues brunomelo_matheus_isabelfernanda_yana_webdesignresponsivo_gti5_22015](https://reader031.vdocuments.site/reader031/viewer/2022022415/58ecafb61a28abc43e8b45a5/html5/thumbnails/7.jpg)
O termo web design responsivo refere se a uma técnica de estruturação HTML e CSS, que visa adaptar uma página web aos diferentes dispositivos e resoluções
onde é exibida.
![Page 8: Cleuber rodrigues brunomelo_matheus_isabelfernanda_yana_webdesignresponsivo_gti5_22015](https://reader031.vdocuments.site/reader031/viewer/2022022415/58ecafb61a28abc43e8b45a5/html5/thumbnails/8.jpg)
No Brasildestaca-se o nome de Maurício Samy SilvaConhecido no meio
internauta como MAUJOR.
![Page 9: Cleuber rodrigues brunomelo_matheus_isabelfernanda_yana_webdesignresponsivo_gti5_22015](https://reader031.vdocuments.site/reader031/viewer/2022022415/58ecafb61a28abc43e8b45a5/html5/thumbnails/9.jpg)
design responsivo deve ser entendido como
design capaz de "responder" às características
do dispositivo ao qual é servido.
Sem perda de informação.
![Page 10: Cleuber rodrigues brunomelo_matheus_isabelfernanda_yana_webdesignresponsivo_gti5_22015](https://reader031.vdocuments.site/reader031/viewer/2022022415/58ecafb61a28abc43e8b45a5/html5/thumbnails/10.jpg)
Tecnologias fundamentaispara desenvolvimento do
design responsivo. São elas:
• grid fluído;• imagens e mídias
flexíveis;• media queries.
![Page 11: Cleuber rodrigues brunomelo_matheus_isabelfernanda_yana_webdesignresponsivo_gti5_22015](https://reader031.vdocuments.site/reader031/viewer/2022022415/58ecafb61a28abc43e8b45a5/html5/thumbnails/11.jpg)
• grid fluído;
![Page 12: Cleuber rodrigues brunomelo_matheus_isabelfernanda_yana_webdesignresponsivo_gti5_22015](https://reader031.vdocuments.site/reader031/viewer/2022022415/58ecafb61a28abc43e8b45a5/html5/thumbnails/12.jpg)
• imagens e mídias flexíveis;
![Page 13: Cleuber rodrigues brunomelo_matheus_isabelfernanda_yana_webdesignresponsivo_gti5_22015](https://reader031.vdocuments.site/reader031/viewer/2022022415/58ecafb61a28abc43e8b45a5/html5/thumbnails/13.jpg)
• media queries
![Page 14: Cleuber rodrigues brunomelo_matheus_isabelfernanda_yana_webdesignresponsivo_gti5_22015](https://reader031.vdocuments.site/reader031/viewer/2022022415/58ecafb61a28abc43e8b45a5/html5/thumbnails/14.jpg)
• media queries
![Page 15: Cleuber rodrigues brunomelo_matheus_isabelfernanda_yana_webdesignresponsivo_gti5_22015](https://reader031.vdocuments.site/reader031/viewer/2022022415/58ecafb61a28abc43e8b45a5/html5/thumbnails/15.jpg)
MOBILE FIRST
![Page 16: Cleuber rodrigues brunomelo_matheus_isabelfernanda_yana_webdesignresponsivo_gti5_22015](https://reader031.vdocuments.site/reader031/viewer/2022022415/58ecafb61a28abc43e8b45a5/html5/thumbnails/16.jpg)
Conceber primeiro a versão mobile, aumentando o foco no
que realmente é indispensável para os usuários, evitando
assim a retirada de itens necessários
ou a inclusão de elementos supérfluos a sua experiência.
![Page 17: Cleuber rodrigues brunomelo_matheus_isabelfernanda_yana_webdesignresponsivo_gti5_22015](https://reader031.vdocuments.site/reader031/viewer/2022022415/58ecafb61a28abc43e8b45a5/html5/thumbnails/17.jpg)
BIBLIOGRAFIA
• Maurício Samy Silva – Web Design Responsivo – Novatec Editora Ltda– Junho / 2014
• http://geracaointerativa.com.br/wp-content/uploads/2015/06/Terug-naar-de-essentie-met-Mobile-First-webdesign-770x534.jpg
• http://br.depositphotos.com/33749861/stock-illustration-mobile-first-web-design.html
• https://www.yellingmule.com/blog/2014/10/do-you-really-need-a-responsive-website/
• http://alistapart.com/