Responsive Web Design ?o_Filipe... · Responsive Web Design Concepção e desenvolvimento prático

  • View
    220

  • Download
    2

Embed Size (px)

Text of Responsive Web Design ?o_Filipe... · Responsive Web Design Concepção e desenvolvimento prático

Responsive Web DesignConcepo e desenvolvimento prtico de Interfaces Web

2014ESAD.CRInstituto Politcnico de Leiria

relatrio de estgioMestrado Design Grfico

AlunoJoo Guerra

OrientadoraElga Ferreira

Orientador EstgioNelson Rodrigues

5

A realizao deste projeto contou com o apoio de algumas pessoas que contriburam direta e indiretamente para que se tornasse uma realida-de e a quem estou muito grato. Ao longo do mestrado em design grfico consegui cumprir com os meus objetivos e terminei mais uma etapa no meu percurso acadmico. No entanto, para que isto fosse possvel, no posso deixar de agradecer a quem me ajudou a tornar este momento uma realidade.

Quero agradecer Professora Dra. Elga pela orientao prestada mas tambm pela disponibilidade e apoio na partilha do conhecimento/sa-ber. Ajudou-me ainda a solucionar alguns problemas e dvidas deste percurso e ainda pela transmisso de palavras de incentivo.

Indispensvelmente no podia deixar de agradecer aos responsveis e colegas da Mediaweb por todo o apoio, pela partilha de conhecimentos e por terem acreditado nas minhas capacidades para o desenvolvimen-to de projetos muito importantes que me abriram oportunidades de trabalho.

Por ultimo, um especial agradecimento minha famlia e minha na-morada, por todo o seu apoio, incentivo, pacincia demonstrada e por me ajudarem a superar todos os obstculos que foram surgindo ao lon-go do meu percurso acadmico.

Agradecimentos

7

Este relatrio descreve o estgio curricular do aluno na empresa Mediaweb com a aplicao prtica na rea do Responsive Web Design. Este estgio realizou-se no mbito do mestrado em Design Grfico na Escola Superior de Artes e Design, das Caldas da Rainha.

O documento divide-se em trs partes principais. Ini-cialmente caraterizada a entidade acolhedora, se-guidamente feita a contextualizao terica sobre o tema Responsive Web Design, e por ltimo, realizada uma descrio e anlise do trabalho prtico desenvol-vido durante o estgio.

O primeiro parte so apresentadas as motivaes pes-soais, bem como os dados relativos entidade acolhe-dora e as suas metodologias de funcionamento.

Na segunda parte, o enquadramento terico, feita uma introduo sobre as origens histricas do Design de Interao e da Internet e o seu desenvolvimento at aos dias de hoje onde assistimos ao aparecimento de um novo paradigma de utilizao das novas tecno-logias digitais. Como foco principal no enquadramento terico, procura-se analisar o conceito de Responsive Web Design, no qual so estudados aspectos como a sua importncia, necessidade e prticas relacionadas. Ainda nesta parte estudado o processo de adapta-o da Tipografia na transio do meio impresso para o meio digital.

Na terceira parte, a componente prtica deste projeto, descreve-se o estudo de caso Concertos para Bebs deste relatrio. Neste contexto, feita a exposio do processo de criao, desenvolvimento e metodologia projetual do projeto prtico. So ainda apresentados de um modo sumrio outros projetos prticos desen-volvidos no decorrer do estgio curricular.

Palavras-Chave

Design de Interao, Design de Interfaces, Responsive Web Design

Keywords

Interaction Design, Interface Design, Responsive Web Design

This report describes the curriculum of the student internship at the company Mediaweb with practical application in Responsive Web Design area. This stage took place under the MA in Graphic Design at the School of Arts and Design of Caldas da Rainha.

The document is divided into three main parts. Is initially characterized the host entity, then the theoretical context is taken on the subject Responsive Web Design , and finally, a description and analysis of the practical work is carried out during the internship.

The first part of the personal motivations, as well as data relating to the hosting organization and their methods of operation are presented.

In the second part, the theoretical framework, is an introduction on the historical origins of Interaction Design and the Internet and its development up to the present day where we witnessed the emergence of a new paradigm for the use of new digital technologies. Mainly focused on the theoretical framework, we try to analyze the concept of Responsive Web Design, in which aspects are studied as to their importance, necessity and practices. During this part is studying the process of adaptation of Typography in the transition from print to digital.

In the third part, the practical component of this project, describes the case study Concerts for Babies of this report. In this context it is the exposure of the creation, development and projetual methodology of practical design process. It also presents a summary manner other practical projects developed during the traineeship.

ResumoAbstract

9

Agradecimentos ............................................................................................

Resumo / Abstract .......................................................................................

ndice Geral .....................................................................................................

ndice de Figuras ...........................................................................................

ndice de quadros e grficos e siglas ......................................................

Glossrio ..........................................................................................................

Introduo ........................................................................................................

1.1 Motivaes .................................................................................................

1.2 Objectivos Especficos ...........................................................................

1.3 Cronograma ..............................................................................................

1.3 Entidade Acolhedora .............................................................................

1.4.1 Caracterizao .....................................................................

1.4.2 Metodologia Projectual ...................................................

1.4.3 Actividade da Empresa ....................................................

1.4.4 Equipa e Espao de Trabalho .........................................

1.4.5 Principais clientes ..............................................................

1.4.6 Contactos .............................................................................

2.1 Contexto histrico da Internet ............................................................

2.1.1 Evoluo da World Wide Web .........................................

2.2 Breve contextualizao da disciplina Design de Interao .......

2.2.1 Design de Interfaces Visuais ...........................................

2.2.2 Interao no meio digital .................................................

2.3 Novo paradigma de utilizao das novas tecnologias digitais .

2.3.1 Estado da Arte da Web .....................................................

2.4 Responsive web design (RWD) ...........................................................

2.4.1 O conceito ..............................................................................

2.4.2 Importncia e necessidade .............................................

2.4.3 Mltiplas escalas e resolues .......................................

2.5 Tcnicas ou prticas RWD

2.5.1 Flexible grid - liquid, fluid, static ....................................

2.5.2 Symbol fonts ......................................................................

2.5.3 Media Queries .....................................................................

2.5.4 Flexible Images ..................................................................

Captulo I - Aspectos Gerais de Estgio

Captulo II - Enquadramento Terico

5

7

9

13

14

15

17

20

20

21

22

22

23

24

24

25

25

28

30

32

34

35

36

37

38

38

39

40

42

42

44

45

46

ndiceGeral

11

3.1 Contextualizao ......................................................................................

3.2 Introduo aos diferentes formatos e sua performance - Post

script, truetype, opentype.............................................................................

3.3 Web fonts - Web safe fonts e formatos ...........................................

3.4 Funcionalidades Opentype na web ...................................................

3.5 Renderizao entre browsers e servios de implementao

- Typekit, Google webfonts ......................................................................

5.1 Desperados Queres mais tempo para curtir? .............................

5.2 Guinness Profissional da Cerveja ....................................................

5.3 Fox Shoot like Daryl ............................................................................

5.4 Website Dmdi ...........................................................................................

6.1 Consideraes Finais ..............................................................................

6.2 Bibliografia ................................................................................................

4.1 Aspectos