WEB DESIGN 2010-2011 / 6º SEMESTRE INSTITUTO POLITÉCNICO DE LISBOA - ESCOLA SUPERIOR DE COMUNICAÇÃO SOCIAL - LICENCIATURA PUBLICIDADE E MARKETING
DISTRIBUIÇÃO CONTEÚDOS PROGRAMÁTICOS AULA 04 / TEORIA STORYBOARDS Elementos de um storyboard; Exemplos práticos. METODOLOGIAS E PRÁTICAS: BANNERS Estrutura, navegação e cenas; Exemplos práticos. INSTITUTO POLITÉCNICO DE LISBOA - ESCOLA SUPERIOR DE COMUNICAÇÃO SOCIAL - LICENCIATURA PUBLICIDADE E MARKETING
DISTRIBUIÇÃO CONTEÚDOS PROGRAMÁTICOS AULA 04 / PRÁTICA INTRODUÇÃO AO HTML BROWSERS O HTML Contextualização As TAGS A estrutura básica do documento (Definições Globais) Formatação Hiperligações Inserir Imagens Inserir Imagens com hiperligações Organização de ficheiros INSTITUTO POLITÉCNICO DE LISBOA - ESCOLA SUPERIOR DE COMUNICAÇÃO SOCIAL - LICENCIATURA PUBLICIDADE E MARKETING
STORYBOARDS CONCEITO E IDEIA CONCEITO (concept) IDEIA (idea) INSTITUTO POLITÉCNICO DE LISBOA - ESCOLA SUPERIOR DE COMUNICAÇÃO SOCIAL - LICENCIATURA PUBLICIDADE E MARKETING
EQUIPA CRIATIVA A DUPLA COPYWRITES (words) ART DIRECTOR (pictures) INSTITUTO POLITÉCNICO DE LISBOA - ESCOLA SUPERIOR DE COMUNICAÇÃO SOCIAL - LICENCIATURA PUBLICIDADE E MARKETING
STORYBOARDS CONCEITO E IDEIA CONCEITO (concept) = IDEIA (idea) O que vem a seguir à estratégia e antes da produção INSTITUTO POLITÉCNICO DE LISBOA - ESCOLA SUPERIOR DE COMUNICAÇÃO SOCIAL - LICENCIATURA PUBLICIDADE E MARKETING
STORYBOARDS CONCEITO E IDEIA Thumbnails; Rascunhos Composição (comps) Desenhos preliminares (scamps) THINK NOW AND DESIGN LATER! Os rascunhos, registos rápidos, esboços... são úteis nesta fase porque o trabalho acaba por ser julgado pelo conteúdo em si e não pelo seu aspecto. Este tipo de desenho/registo rápido é muito usado em apresentações e sessões de brainstorming. INSTITUTO POLITÉCNICO DE LISBOA - ESCOLA SUPERIOR DE COMUNICAÇÃO SOCIAL - LICENCIATURA PUBLICIDADE E MARKETING
LIVRO: The Advertising Concept Book, Pete Barry Nikon (Scali, McCabe, Sloves)
LIVRO: The Advertising Concept Book, Pete Barry The Economist (Abbot Mead Vickers BBDO)
LIVRO: The Advertising Concept Book, Pete Barry Super: Use condoms (Duval Guillaume Antwerp)
LIVRO: The Advertising Concept Book, Pete Barry Apple s Think Different. (TBWA/ Chiat/Day)
LIVRO: The Advertising Concept Book, Pete Barry Natan Jewelry (F/Nazca Saatchi & Saatchi)
LIVRO: The Advertising Concept Book, Pete Barry I m a Mac, and I m a PC (TBWA/Chiat/Day)
LIVRO: The Advertising Concept Book, Pete Barry Dove as spokesperson for real beauty (Ogilvy)
LIVRO: The Advertising Concept Book, Pete Barry www.nikeplus.com (R/GA)
LIVRO: The Advertising Concept Book, Pete Barry Levi s (Antirom)
LIVRO: The Advertising Concept Book, Pete Barry Hawlett-Packard (Goodby, Silverstein & Partners)
METODOLOGIAS E PRÁTICAS: BANNERS ESTRUTURA, NAVEGAÇÃO E CENAS Na essência da Internet está a navegação hipertextual. Faz referência a textos que podem ser explorados/ navegados por meio de uso de hiperligações. O elemento central de um sistema hipertextual é a vinculação não-linear de pedaços de informação, a que denominamos nodos ou nó (cada ponto de inter-conexão de uma estrutura ou rede). Na navegação hipertextual, seleccionar um hiperlink conduz-nos do nó actual a outro nó tematicamente relacionado. INSTITUTO POLITÉCNICO DE LISBOA - ESCOLA SUPERIOR DE COMUNICAÇÃO SOCIAL - LICENCIATURA PUBLICIDADE E MARKETING
METODOLOGIAS E PRÁTICAS: BANNERS ESTRUTURA, NAVEGAÇÃO E CENAS Para efeitos prático: NÓ CENA Uma parte de um gráfico, uma unidade temática que pode ser lida e interpretada de forma autónoma, mesmo que precise das cenas contíguas (imediatas ou próximas) para proporcionar o significado completo. INSTITUTO POLITÉCNICO DE LISBOA - ESCOLA SUPERIOR DE COMUNICAÇÃO SOCIAL - LICENCIATURA PUBLICIDADE E MARKETING
METODOLOGIAS E PRÁTICAS: BANNERS ESTRUTURA, NAVEGAÇÃO E CENAS Existem dois tipos de estruturas para organizar conteúdos na visualização interactiva da informação: HORIZONTAL VERTICAL Raramente se encontram exemplos onde ambos aparecem de forma pura. O mais usual é encontrarmos exemplos onde uma delas é predominante. INSTITUTO POLITÉCNICO DE LISBOA - ESCOLA SUPERIOR DE COMUNICAÇÃO SOCIAL - LICENCIATURA PUBLICIDADE E MARKETING
METODOLOGIAS E PRÁTICAS: BANNERS ESTRUTURA, NAVEGAÇÃO E CENAS ESTRUTURAS HORIZONTAIS São próprias de explicações passo a passo. INTRODUÇÃO CENA 1 CENA 2 CENA 3 CENA 4 Utiliza-se esta forma para situações onde é necessário dispor a informação em linha temporal numa sequência onde se pode navegar simplesmente com botão de avançar e/ou retroceder, e às vezes com outras opções que dão acesso directo a cada uma das partes (etiquetadas numericamente ou alfabeticamente, por exemplo). INSTITUTO POLITÉCNICO DE LISBOA - ESCOLA SUPERIOR DE COMUNICAÇÃO SOCIAL - LICENCIATURA PUBLICIDADE E MARKETING
METODOLOGIAS E PRÁTICAS: BANNERS ESTRUTURA, NAVEGAÇÃO E CENAS ESTRUTURAS VERTICAIS (ou em profundidade) Assume a forma dos ramos de uma árvore. Dentro de cada cena existem múltiplas possibilidades de navegação. Esta classe de infografia tende a ser mais manipulável e exploratória e não-linear. INTRODUÇÃO CENA 1 ROLLOVER 1 ROLLOVER 2 ROLLOVER 3 ROLLOVER 4 CENA 2 CENA 3 ITEM 1 (360º) ITEM 2 ITEM 3 (360º) ITEM 4 ITEM 5 (ZOOM) INSTITUTO POLITÉCNICO DE LISBOA - ESCOLA SUPERIOR DE COMUNICAÇÃO SOCIAL - LICENCIATURA PUBLICIDADE E MARKETING
METODOLOGIAS E PRÁTICAS: BANNERS ESTRUTURA, NAVEGAÇÃO E CENAS ESTRUTURAS MISTAS Existem ocasiões onde se torna necessário utilizar estruturas do tipo misto horizontal/vertical onde o uso de botões rollover, por exemplo, acrescenta dados adicionais em algumas das cenas, sem que os elementos informativos que revelam possam ser considerados cenas por si mesmo. INTRODUÇÃO CENA 1 CENA 2 CENA 3 CENA 4 ITEM 1 CENA 2 CENA 3 Estrutura mista com predominância horizontal INSTITUTO POLITÉCNICO DE LISBOA - ESCOLA SUPERIOR DE COMUNICAÇÃO SOCIAL - LICENCIATURA PUBLICIDADE E MARKETING
http://www.bannerblog.com.au/2010/03/vw_inside_out.php
http://www.bannerblog.com.au/2009/05/newcastle_peoplemagnet.php
http://www.bannerblog.com.au/2009/05/vw_too_fast.php
http://www.bannerblog.com.au/2010/02/doctors_of_the_world_attention.php
http://www.judgehere.no/volkswagen/innovation/en/rearview/ad.html
http://www.bannerblog.com.au/2007/07/greenpeace_msn_chat.php
http://www.bannerblog.com.au/2007/07/bk_angus_order.php
http://www.bannerblog.com.au/2007/07/nissan_binoculars.php
http://www.bannerblog.com.au/2007/07/wesley_homeless.php
http://www.bannerblog.com.au/2010/01/best_buy_geek_squad.php
http://www.bannerblog.com.au/2007/07/itau_bank_crying.php
http://www.bannerblog.com.au/2007/06/adidas_line_runner.php
http://www.bannerblog.com.au/2007/06/couchetard_les_prix_les_plus_bas.php
http://www.bannerblog.com.au/2009/03/apple_ipod_games_mtv.php
http://www.bannerblog.com.au/2007/06/del_mondo_wake_up.php
INTRODUÇÃO AO HTML BROWSERS Um dos maiores desafios de desenhar para a Web é saber lidar com o vasto leque de opções disponíveis no mercado, porque cada browser renderiza a informação disponível no código de formas diferentes. Isto acontece porque cada browser possui internamente a sua folha de estilo que determina a forma como cada elemento aparece por defeito. Actualmente os browsers já têm um melhor suporte para os standards web, estabelecidos pelo W3C (World Wide Web Consortium). DESAFIO CROSS-BROWSER Objectivo: uma página web com a mesma aparência em browsers diferentes. INSTITUTO POLITÉCNICO DE LISBOA - ESCOLA SUPERIOR DE COMUNICAÇÃO SOCIAL - LICENCIATURA PUBLICIDADE E MARKETING
INTRODUÇÃO AO HTML BROWSERS > COMO LIDAR COM VERSÕES DIFERENTES DE BROWSERS Não nos preocupar-mos com pequenas coisas: Como Web Designers, devemos habituar-nos a permitir um certo grau de variações. É a natureza do média! Seguir os standards da Web: Seguir as regras do (X)HTML para a estrutura do documento e as CSS para a apresentação dos conteúdos. A importância de uma boa marcação (markup): Quando um documento (X)HTML é escrito numa ordem lógica e os seus elementos são marcados de uma forma significativa, ele vai ser correctamente apresentado numa vasta gama de versões e browsers diferentes. O importante é que o conteúdo esteja disponível. INSTITUTO POLITÉCNICO DE LISBOA - ESCOLA SUPERIOR DE COMUNICAÇÃO SOCIAL - LICENCIATURA PUBLICIDADE E MARKETING
INTRODUÇÃO AO HTML O HTML > CONTEXTUALIZAÇÃO HTML - HYPER TEXT MARKUP LANGUAGE O QUE É? Uma linguagem de marcação de hipertexto, que descreve documentos que contenham texto, imagens, hyperlinks, etc. A linguagem básica da World Wide Web. A maioria dos documentos que encontramos na Internet está escrito em HTML. As regras desta e de outras linguagens de programação é definida pelo Word Wide Web Consortium (w3c) - http://www.w3.org A formatação, quer seja de forma a enfatizar o texto através da inclusão de negritos, itálicos ou dimensões das letras, quer seja de forma a incluir imagens ou se trate de definir o posicionamento de todos os elementos é feita com recurso a tags. INSTITUTO POLITÉCNICO DE LISBOA - ESCOLA SUPERIOR DE COMUNICAÇÃO SOCIAL - LICENCIATURA PUBLICIDADE E MARKETING
INTRODUÇÃO AO HTML O HTML > CONTEXTUALIZAÇÃO XHTML - EXTENSIBLE HYPER TEXT MARKUP LANGUAGE O QUE É? Reformulação do HTML 4.01 como uma aplicação do XML. O HTML possui um conjunto de objectos (tags) limitado, que deve ser aplicado aos documentos para torná-los "apresentáveis" na Web, ou seja, se as tags estiverem erradas, os browsers não exibirão a página como a desenha-mos. O XHTML é, de facto, uma novas versão do HTML4.0, e poderia ser considerado o passo para a evolução seguinte: o HTML 5. INSTITUTO POLITÉCNICO DE LISBOA - ESCOLA SUPERIOR DE COMUNICAÇÃO SOCIAL - LICENCIATURA PUBLICIDADE E MARKETING
INTRODUÇÃO AO HTML O HTML: AS TAGS Uma tag é uma palavra-chave (relevante) ou termo associado a uma informação, que a descreve e permite uma classificação da informação baseada em palavras-chave. OU SEJA: - Um esquema de classificação; - Usado em grande escala nos sites de conteúdos colaborativos (Web 2.0); - Tagging ; - Rótulos; - Legendas As tags são códigos que circundam a área a formatar e que estão contidas em braquetas < >. INSTITUTO POLITÉCNICO DE LISBOA - ESCOLA SUPERIOR DE COMUNICAÇÃO SOCIAL - LICENCIATURA PUBLICIDADE E MARKETING
INTRODUÇÃO AO HTML O HTML: AS TAGS TAG DE ABERTURA <tag> TAG DE FECHO </tag> EXEMPLO <tag>este texto é o que quero formatar</tag> Desta forma conseguimos marcar o início e o fim da formatação. Cada tag tem dois elementos: o inicial e o final. Por exemplo, quando queremos formatar uma parte de um texto a negrito, indicamos qual a parte que queremos formatar. INSTITUTO POLITÉCNICO DE LISBOA - ESCOLA SUPERIOR DE COMUNICAÇÃO SOCIAL - LICENCIATURA PUBLICIDADE E MARKETING
INTRODUÇÃO AO HTML ESTRUTURA DE UM DOCUMENTO HTML (DEFINIÇÕES GLOBAIS) A estrutura de um documento HTML é muito simples: consiste numa marca (tag) exterior <html> que engloba o cabeçalho e o corpo do documento. À parte de algumas excepções, as tags que abrem devem ser fechadas usando /. CÓDIGO HTML <html> <head> <title>título do documento HTML</title> </head> <body>conteúdo do documento HTML</body> </html> INSTITUTO POLITÉCNICO DE LISBOA - ESCOLA SUPERIOR DE COMUNICAÇÃO SOCIAL - LICENCIATURA PUBLICIDADE E MARKETING
INTRODUÇÃO AO HTML ESTRUTURA DE UM DOCUMENTO HTML (DEFINIÇÕES GLOBAIS) O cabeçalho e corpo do documento são representados pelas marcas <head> e <body>, respectivamente. CABEÇALHO No cabeçalho é incluído o título e outros parâmetros a passar pelo browser, ou seja, contém a formatação global do documento. Identifica em que linguagem o documento está escrito (HTML ou XHTML). BODY No corpo é incluído os conteúdos a apresentar, e as tags de controlo que indicam ao browser como proceder à sua apresentação. Ou seja, contém o documento propriamente dito e todas as tags que formatam o seu conteúdo (o que vai ser exibido no browser). INSTITUTO POLITÉCNICO DE LISBOA - ESCOLA SUPERIOR DE COMUNICAÇÃO SOCIAL - LICENCIATURA PUBLICIDADE E MARKETING
INTRODUÇÃO AO HTML ESTRUTURA DE UM DOCUMENTO HTML (DEFINIÇÕES GLOBAIS) O conteúdo inserido entre <title> e </title> aparece na barra de título do browser. O conteúdo apresentado ao utilizador na janela de browser é o que está entre as marcas <body> e </body>. INSTITUTO POLITÉCNICO DE LISBOA - ESCOLA SUPERIOR DE COMUNICAÇÃO SOCIAL - LICENCIATURA PUBLICIDADE E MARKETING
INTRODUÇÃO AO HTML HTML: FORMATAÇÃO A formatação dos elementos que fazem parte de um layout da página é feita por tags. As tags não são elementos isolados de formatação, pois por vezes é necessário uma especificação mais pormenorizada daquilo que pretendemos. EXEMPLO: se quisermos alinhar um parágrafo de texto, não basta indicarmos que estamos na presença de um parágrafo, é necessário acrescentar à tag de parágrafo o atributo de alinhamento. <p align= center >Texto que quero alinhar ao centro</p> Os atributos são sempre colocados a seguir à tag. Neste caso a tag <p> define um parágrafo onde acrescentamos um atributo, neste caso align, e o valor do atributo, = center. INSTITUTO POLITÉCNICO DE LISBOA - ESCOLA SUPERIOR DE COMUNICAÇÃO SOCIAL - LICENCIATURA PUBLICIDADE E MARKETING
EXEMPLO PARÁGRAFO COM ALINHAMENTO DE TEXTO AO CENTRO <p align= center >Texto que quero alinhar ao centro</p> HTML QUE CONTÉM UMA TAG, COM UM DETERMINADO ATRIBUTO QUE POR SUA VEZ TEM ASSOCIADO A ELE UM VALOR
INTRODUÇÃO AO HTML HTML: FORMATAÇÃO Os atributos podem ou não ter um valor. No caso de serem utilizados apenas para indicar qualquer coisas, o valor é omisso. Quando se especificam valores deve ser colocado um sinal de = e imediatamente a seguir o valor do atributo contido entre aspas. As tags de fecho nunca têm atributos ou seja as especificações dadas pelos atributos são apenas incluídas nas tags de abertura. <p align= center >Texto que quero alinhar ao centro</p> INSTITUTO POLITÉCNICO DE LISBOA - ESCOLA SUPERIOR DE COMUNICAÇÃO SOCIAL - LICENCIATURA PUBLICIDADE E MARKETING
INTRODUÇÃO AO HTML HTML: FORMATAÇÃO O texto pode ser formatado inserindo-o entre tags adequadas. NEGRITO <b> </b> ITÁLICO <i> </i> SOBRESCRITO <sup> </sup> Todas os tags devem ter o fecho correspondente. INSTITUTO POLITÉCNICO DE LISBOA - ESCOLA SUPERIOR DE COMUNICAÇÃO SOCIAL - LICENCIATURA PUBLICIDADE E MARKETING
EXEMPLO <html> <body> <b>este texto aparece a negrito</b> <i>este texto aparece em itálico</i> O texto seguinte aparece<sup>sobrescrito</sup> E este aparece<sub>subrescrito</sub> </body> </html> HTML COM TAGS DE FORMATAÇÃO DE TEXTO
INTRODUÇÃO AO HTML HTML: FORMATAÇÃO SEPARAR LINHAS NO TEXTO PARÁGRAFO <br/> QUEBRA DE LINHA <p> </p> Introduz uma mudança de linha com um espaçamento maior do que o introduzido pela tag <br/> INSTITUTO POLITÉCNICO DE LISBOA - ESCOLA SUPERIOR DE COMUNICAÇÃO SOCIAL - LICENCIATURA PUBLICIDADE E MARKETING
EXEMPLO <html> <body> <p>esta linha e a seguinte não aparecem separadas</p> <p>esta linha e a seguinte</p> <p>já aparecem separadas</p> Esta linha e a seguinte<br/>também embora com um espaço mais pequeno. </body> </html> HTML COM TAGS DE SEPARAÇÃO DE LINHA
INTRODUÇÃO AO HTML HTML: FORMATAÇÃO CABEÇALHOS Os cabeçalhos têm 6 valores diferentes e cada um dos quais origina 6 tags diferentes. TAGS h1, h2, h3, h4, h5 e h6 A primeira corresponde ao cabeçalho maior e a última ao menor. INSTITUTO POLITÉCNICO DE LISBOA - ESCOLA SUPERIOR DE COMUNICAÇÃO SOCIAL - LICENCIATURA PUBLICIDADE E MARKETING
EXEMPLO <html> <body> <h1>isto é um cabeçalho.</h1> <h2>isto é um cabeçalho.</h2> <h3>isto é um cabeçalho.</h3> <h4>isto é um cabeçalho.</h4> <h5>isto é um cabeçalho.</h5> <h6>isto é um cabeçalho.</h6> </body> </html> HTML COM TAGS DE CABEÇALHO
INTRODUÇÃO AO HTML HTML: FORMATAÇÃO TIPO DE LETRA, TAMANHO E COR Para a estilização do texto utilizamos o parâmetro style na tag <p>. CÓDIGO HTML <p style= font-family: verdana; font-size: 100%; color:blue > Ao parâmetro: font-family atribui-se o valor: Verdana Ao parâmetro; font-size atribui-se o valor 100% Ao parâmetro; color atribui-se o valor blue INSTITUTO POLITÉCNICO DE LISBOA - ESCOLA SUPERIOR DE COMUNICAÇÃO SOCIAL - LICENCIATURA PUBLICIDADE E MARKETING
EXEMPLO <html> <body> <p>o texto da linha seguinte</p> <p style="font-family:verdana; font-size:100%; color:blue"> aparece formatado com outra cor e fonte</p> </body> </html> HTML COM TAGS DE FORMATAÇÃO DE TIPO DE LETRA, TAMANHO E COR INSTITUTO POLITÉCNICO DE LISBOA - ESCOLA SUPERIOR DE COMUNICAÇÃO SOCIAL - LICENCIATURA PUBLICIDADE E MARKETING
INTRODUÇÃO AO HTML HTML: FORMATAÇÃO TIPO DE LETRA, TAMANHO E COR Em HTML, as cores podem ser especificadas através de: Nomes constantes predefinidos: red, blue, green... Formatos RGB (quantidade de red, green e blue) com valor hexadecimal 6 dígitos, organizados em pares de 00 a FF - #RRGGBB). INSTITUTO POLITÉCNICO DE LISBOA - ESCOLA SUPERIOR DE COMUNICAÇÃO SOCIAL - LICENCIATURA PUBLICIDADE E MARKETING
EXEMPLO <p style="color:#ff0000; margin-left:20px">isto é um parágrafo</p> HTML COM TAGS DE FORMATAÇÃO DE COR E MARGEM
INTRODUÇÃO AO HTML HTML: FORMATAÇÃO LISTAS A formatação de listas é uma das componentes fundamentais na formatação de textos. As listas que se inserem em páginas web são essencialmente de dois tipos, cada uma delas com tags diferentes: OL Listas Ordenadas. Estruturam os itens através de numeração ou alíneas. UL Listas Desordenadas. Estruturam tópicos sem ordem específica através de pequenos ícones. Cata item, em qualquer uma das listas, é precedida pela inserção pontual da tag Li (item de lista) INSTITUTO POLITÉCNICO DE LISBOA - ESCOLA SUPERIOR DE COMUNICAÇÃO SOCIAL - LICENCIATURA PUBLICIDADE E MARKETING
INTRODUÇÃO AO HTML HTML: HIPERLIGAÇÕES As hiperligações podem apontar para um ficheiro do mesmo sítio ou para um local qualquer na Internet. Numa hiperligação torna-se necessário definir o destino e o texto apresentado ao utilizador na janela do browser. CÓDIGO HTML <p><a href= ficheiro1.html >Este texto</a>liga a um ficheiro</p> A tag <a> (âncora) tem o parâmetro: href=..., com a referência da hiperligação e fecha com a tag de fecho </a> Entre as tags <a> e </a> escreve-se o texto que vai aparecer no local da hiperligação. INSTITUTO POLITÉCNICO DE LISBOA - ESCOLA SUPERIOR DE COMUNICAÇÃO SOCIAL - LICENCIATURA PUBLICIDADE E MARKETING
EXEMPLO <html> <body> <p> <a href= ficheiro1.html >Este texto</a> liga a um ficheiro</p> <p> <a href= http://www.escs.ipl.pt >Este texto</a> liga a uma página da Internet</p> <p> <a href= http://www.sapo.pt target= _blank>este texto</a> liga a uma página da Internet e abre uma janela nova</p> </body> </html> HTML COM TAGS PARA HIPERLIGAÇÕES
INTRODUÇÃO AO HTML HTML: HIPERLIGAÇÕES PARÂMETRO TARGET CÓDIGO HTML <a href= http://sapo.pt target= _blank >Este texto</a>liga a uma página de Internet e abre uma janela nova </p> Parâmetro: target: target= _blank, indica que o documento será carregado numa nova janela. target= _self, este atributo indica que o documento será carregado na mesma frame. target= _parent, indica que o documento será carregado no frameset pai. target= _top, indica que o documento será carregado na mesma janela. INSTITUTO POLITÉCNICO DE LISBOA - ESCOLA SUPERIOR DE COMUNICAÇÃO SOCIAL - LICENCIATURA PUBLICIDADE E MARKETING
INTRODUÇÃO AO HTML HTML: INSERIR IMAGENS As imagens são inseridas através da tag img e correspondente parâmetro src que indica a localização da imagem. CÓDIGO HTML <img src= imagem.jpg border= 0 width= 50 height= 100 > Em <img src=... > indica-se a origem da imagem a apresentar. O atributo border= 0 evita que o browser, por defeito, apresente uma linha à volta da imagem. Os parâmetros width e height indicam, respectivamente, a largura e a altura com que se pretende apresentar a imagem. INSTITUTO POLITÉCNICO DE LISBOA - ESCOLA SUPERIOR DE COMUNICAÇÃO SOCIAL - LICENCIATURA PUBLICIDADE E MARKETING
EXEMPLO <html> <body> <p>inserir uma imagem: <img src= imagem.jpg border= 0 width= 220 height= 300 > </p> <p>inserir uma imagem que está publicada na Internet: <img src= http://www.esgana.com/aulas/wp-content/uploads/2010/02/ HEADER_10022010-02.jpg border= 0 width= 780 height= 200 > </p> </body> </html> HTML COM TAGS PARA HIPERLIGAÇÕES
INTRODUÇÃO AO HTML HTML: INSERIR IMAGENS COM HIPERLIGAÇÕES As imagens são inseridas através da tag img e correspondente parâmetro src que indica a localização da imagem. CÓDIGO HTML <p>imagem com uma hiperligação para uma página de Internet: <a href: http://google.pt > <img src= imagem.jpg border= 0 width= 50 height= 100 ></a></p> INSTITUTO POLITÉCNICO DE LISBOA - ESCOLA SUPERIOR DE COMUNICAÇÃO SOCIAL - LICENCIATURA PUBLICIDADE E MARKETING
INTRODUÇÃO AO HTML ORGANIZAÇÃO DE FICHEIROS Um site pode conter um número elevado de ficheiros de diferentes tipos. Para níveis elevados de informação é necessário adoptarmos uma estrutura para organizar toda a informação. A pasta inicial tem de conter um ficheiro de índice a que chamamos: index.html ou default.html. O nome do ficheiro índice pode ter outra designação, dependendo da forma como foi configurado o servidor da Internet. O index.html, normalmente é a página de entrada do site (a homepage). A partir desta página são feitas ligações para outros documentos html ou outros tipos de ficheiros. INSTITUTO POLITÉCNICO DE LISBOA - ESCOLA SUPERIOR DE COMUNICAÇÃO SOCIAL - LICENCIATURA PUBLICIDADE E MARKETING
DESAFIO 2 (ENTREGA PRÓXIMA AULA) A PARTIR DO SITE: http://www.continente.pt/ Fazer um wireframe de: - Página de entrada - Página Dicas para Poupar Descrever e analisar os seguintes fluxos de navegação: - Pretendo aderir ao Cartão Continente. Quais os passos que tenho de efectuar? - Qual o horário da loja Continente de S. João da Madeira? ENTREGA: - Próxima aula em formato electrónico (PDF); - Identificação nome + número INSTITUTO POLITÉCNICO DE LISBOA - ESCOLA SUPERIOR DE COMUNICAÇÃO SOCIAL - LICENCIATURA PUBLICIDADE E MARKETING
REFERÊNCIAS BIBLIOGRÁFICAS PREECE, Jennifer, ROGERS, Yvonne & SHARP, Helen. DESIGN DE INTERACÇÃO. Bookman (2005). SCOLARI, Carlos. HIPERMEDIACIONES. ELEMENTOS PARA UNA TEORÍA DE LA COMUNICACIÓN DIGITAL INTERACTIVA. Gedisa Editorial (2008). LYNCH, Patrick & HORTON, Sarah. GUIA DE ESTILO DA WEB. PRINCÍPIOS BÁSICOS DE DESIGN PARA A CRIAÇÃO DE WEB SITES. Editorial Gustavo Gili (2004-2ª Edição). MEMÓRIA, Felipe. DESIGN PARA A INTERNET. Elsevier - Campus 4ª Edição (2006). ROBBINS, Jennifer Niederst. LEARNING WEB DESIGN. A BEGINNER S GUIDE TO (X)HTML, STYLE SHEETS, AND WEB GRAPHICS. O Reilly (2007-3rd Edition). REFERÊNCIAS ONLINE http://w3schools.com/browsers http://www.w3schools.com/tags/default.asp NOTA: A laranja as referências disponíveis na biblioteca da ESCS. INSTITUTO POLITÉCNICO DE LISBOA - ESCOLA SUPERIOR DE COMUNICAÇÃO SOCIAL - LICENCIATURA PUBLICIDADE E MARKETING