Layout Sites

Alfamdia Design Layout de Sites
Alfamdia Design: Layout de Sites
Todos os direitos reservados para AlfamdiaProw LTDA.
AVISO DE RESPONSABILIDADE As informaes contidas neste material de treinamento so distribudas NO ESTADO EM QUE SE ENCONTRAM, sem qualquer garantia, expressa ou implcita. Embora todas as precaues tenham sido tomadas na preparao deste material, a Processor Alfamdia LTDA. no tm qualquer responsabilidade sobre qualquer pessoa ou entidade com respeito responsabilidade, perda ou danos causados, ou alegadamente causados, direta ou indiretamente, pelas instrues contidas neste material ou pelo software de computador e produtos de hardware aqui descritos.
10/2007 Verso 1
Alfamdia Prow LTDA (51) 3073-2100 http://www.alfamidia.com.br
2008 Processor Alfamidia LTDA.
UNIDADE 1 1.1 1.2 UNIDADE 2
ALFAMDIA DESIGN: LAYOUT DE SITES .............................................................................................. 5 SOBRE O CURSO ............................................................................................................................... 5 ESTRUTURA DO CURSO .................................................................................................................... 5 A PROFISSO DE WEB DESIGNER ....................................................................................................... 6
2.1 O PROCESSO DE DESENVOLVIMENTO DE WEBSITES ......................................................................... 7 2.2 ESTUDO DE CASO: INOVAO EM PRODUTOS DE MDIA INTERATIVA .............................................. 9 2.2.1 Metodologia do Projeto ........................................................................................................... 12 UNIDADE 3 TEORIAS DO DESIGN APLICADAS NA WEB ...................................................................................... 14
3.1 ATRAO CONDICIONAL................................................................................................................ 15 3.2 HARMONIA ..................................................................................................................................... 15 3.3 ALINHAMENTO ............................................................................................................................... 16 3.4 SIMETRIA ....................................................................................................................................... 16 3.5 CORES ............................................................................................................................................ 17 3.5.1 Acerte Sempre .......................................................................................................................... 19 3.5.2 Algumas Recomendaes ........................................................................................................ 21 3.6 SIMPLICIDADE ................................................................................................................................ 21 3.7 INTEGRAO .................................................................................................................................. 21 3.8 CONTRASTES .................................................................................................................................. 22 UNIDADE 4 TIPOGRAFIA........................................................................................................................................... 23
4.1 PROPRIEDADES DA TIPOGRAFIA ..................................................................................................... 23 4.1.1 O Estilo das Fontes ................................................................................................................. 23 4.1.2 Separao entre Caracteres (Kerning) ................................................................................... 24 4.1.3 Entrelinhas .............................................................................................................................. 24 4.2 FAMLIAS DE FONTES ..................................................................................................................... 25 4.2.1 Serifadas .................................................................................................................................. 26 4.2.2 Sem Serifa ................................................................................................................................ 26 4.2.3 Monoespaadas ....................................................................................................................... 27 4.2.4 Bitmap ..................................................................................................................................... 27 4.2.5 Caligrficas ............................................................................................................................. 28 4.2.6 Fantasia ................................................................................................................................... 28 4.3 LEGIBILIDADE ................................................................................................................................ 29 UNIDADE 5 5.1 5.2 UNIDADE 6 GESTALT APLICADA A WEB ............................................................................................................... 31 A PREGNNCIA DA FORMA ............................................................................................................ 31 PREGNNCIA NA WEB .................................................................................................................... 33 USABILIDADE NA WEB......................................................................................................................... 35
6.1 PROJETANDO UMA BOA EXPERINCIA............................................................................................ 36 6.1.1 Teste de Usabilidade ............................................................................................................... 37 6.1.2 Como Fazer? ........................................................................................................................... 38 UNIDADE 7 7.1 MODELOS DE SITE................................................................................................................................ 41 INSTITUCIONAIS ............................................................................................................................. 42
Alfamdia Design: Layout de Sites 7.2 7.3 7.4 7.5 UNIDADE 8 PORTAIS ......................................................................................................................................... 43 E-COMMERCE ................................................................................................................................. 43 EXPERIMENTAIS ............................................................................................................................. 44 HOTSITES ....................................................................................................................................... 44 ANNCIOS, POP-UPS E DEMAIS ESPAOS PUBLICITRIOS ......................................................... 46
8.1 OS BANNERS .................................................................................................................................. 47 8.1.1 Full Banner.............................................................................................................................. 47 8.1.2 Half Banner ............................................................................................................................. 47 8.1.3 Banner Boto Padro ......................................................................................................... 48 8.1.4 Banners Boto Quadrado ................................................................................................... 48 8.1.5 Minibanners............................................................................................................................. 48 8.1.6 Banner Vertical ....................................................................................................................... 49 8.1.7 Banner-faixa ............................................................................................................................ 49 8.1.8 Arranha-Cus ou Sky Scrapers ................................................................................................ 49 8.1.9 Outros Tipos de Banners ......................................................................................................... 49 8.2 OS POP-UPS .................................................................................................................................... 50 8.3 COMO ALCANAR EFICINCIA COM BANNERS? ............................................................................. 51 UNIDADE 9 9.1 UNIDADE 10 10.1 10.2 10.3 ANIMANDO IMAGENS PARA WEB....................................................................................................... 53 A PALETA ANIMATION ................................................................................................................... 53 CRIANDO SLICES/FATIAS ............................................................................................................... 63
CRIANDO FATIAS ........................................................................................................................... 63 SALVANDO OS ARQUIVOS .............................................................................................................. 65 SALVANDO COMO HTML E IMAGENS ............................................................................................ 67 MONTAGEM DO LAYOUT COM DIVS ............................................................................................. 70 PHOTOSHOP CS3 COM DREAMWEAVER CS3 ............................................................................. 78
UNIDADE 11 11.1 UNIDADE 12 12.1 12.2 12.3
USANDO DIV TAG .......................................................................................................................... 70
VINCULANDO UM ARQUIVO PSD NO DREAMWEAVER CS3 ............................................................ 79 USANDO O COMANDO COPY MERGE .............................................................................................. 81 INSERINDO OS TEXTOS ................................................................................................................... 82 PHOTOSHOP CS3 COM FLASH CS3 .............................................................................................. 85 DREAMWEAVER CS3 COM FLASH CS3 ........................................................................................ 91 FAZENDO SEU PRPRIO LAYOUT ................................................................................................ 95
UNIDADE 13 13.1 UNIDADE 14 14.1 UNIDADE 15 15.1 15.2 15.3
IMPORTANDO UM ARQUIVO PSD PARA O FLASH CS3 ...................................................................... 86
EDITANDO UM SWF A PARTIR DO DREAMWEAVER CS3 .................................................................. 92
A IMPORTNCIA DE UM PORFIFLIO ONLINE ................................................................................. 95 O QUE DIVULGAR? ......................................................................................................................... 95 ALGUNS CRITRIOS NA SELEO DOS TRABALHOS ....................................................................... 96
Unidade 1 Alfamdia Design: Layout de Sites
1.1 Sobre o Curso

O curso de Layout de Sites trs uma parte de teoria que enfoca o fim do amadorismo na internet e a importncia da multidisciplinariedade dos profissionais envolvidos no projeto. Demonstra, tambm, a integrao da verso Adobe CS3 dos produtos: Dreamweaver, Flash e Photoshop, levando em conta a sua total integrao. O conjunto de todas essas etapas resultar em um trabalho mais profissional, que melhorar a qualidade do produto final.
1.2 Estrutura do Curso

As primeiras unidades trazem conceitos na rea de Design para Web, trazendo algumas peculiaridades e demonstrando a maneira ideal de trabalharmos em um projeto para Web. No decorrer de toda a apostila o aluno ter total autonomia para criar o seu projeto de trabalho final. As unidades seguintes exploram a integrao dos softwares: Dreamweaver CS3, Photoshop CS3 e Flash CS3, demonstrando a sua total integrao para quem trabalha com Web.
Unidade 2 A Profisso de Web Designer
No existem mais bobos investindo na Internet. Todo mundo entra para ganhar. E para ganhar, no basta apenas que o profissional de web corra o campo todo, sem defender nem atacar com eficincia. Projetos de sucesso tm um fator em comum: a multidisciplinariedade, ou seja, muitos profissionais em campo jogando em diferentes reas.
A segunda gerao da World Wide Web, ou Web 2.0 baseada na simplicidade, criatividade e focada nos usurios, reforando o conceito de troca de informaes e colaborao dos internautas com sites e servios virtuais. A idia que o ambiente on-line se torne mais dinmico e que os usurios colaborem para a organizao de contedo. E isso no quer dizer que este mundo novo acontecer apenas no computador pessoal, como conhecemos hoje. A Web 2.0 nasce pensando que as aplicaes que chegam ao mercado viro prontas para rodar nos players de mp3, nos celulares, nos videogames, na TV Interativa. A empresa Web 2.0 por excelncia o Google, pois segue o lema de LANCE LOGO, LANCE SEMPRE, TODO DIA. Voc pode lanar uma verso do seu site, por exemplo, hoje e outra amanh, sempre a partir do feedback conseguido com cada incremento ou retorno por parte dos usurios do site. Lance o produto com o mnimo de funcionalidades para atingir seus objetivos e cresa com ele. A metodologia de desenvolvimento de um projeto centrado nos usurios implica a juno de conhecimentos pertencentes a diferentes reas.
2.1 O Processo de Desenvolvimento de Websites

Um produto bem projetado envolve muito mais do que apenas um contedo de qualidade. Questes como facilidade de uso, desempenho e design grfico tambm so importantes. A satisfao subjetiva, a agradabilidade, tambm faz parte desse todo. O conjunto resultante de todos esses fatores, mas a questo da fluidez e imerso total, tem a capacidade de gerar aquilo que podemos chamar de EXPERINCIA PERFEITA.
_________________________________________________________________
Anotaes
Criao Levantamento de dados
Refinamento
Design
Avaliao
Prototipao
Produo
Manuteno
Implementao
Este grfico, utilizado por Van Duyne, Landay e Hong, mostra o processo genrico de desenvolvimento de Websites. Seus termos significam o seguinte: 1. Levantamento de dados: conhecimento do pblico-alvo e suas necessidades, conceituao do negcio e objetivos dos usurios do website. 2. Criao: gerao de idias que podem ou no ser aproveitadas para desenvolvimento futuro. 3. Refinamento: aperfeioamento da navegao, do fluxo e do layout. 4. Produo: desenvolvimento do prottipo funcional. _________________________________________________________________
Anotaes
5. Implementao: desenvolvimento do cdigo, contedo e imagens finais do site. 6. Lanamento: disponibilizao do website para uso real. 7. Manuteno: atualizao do site existente, como anlise de mtricas de sucesso e preparao para o redesign. Para podermos vislumbrar estes conceitos vamos analisar um estudo de caso, que consta no livro: Design para a Internet: projetando a experincia perfeito do autor Felipe Memria.
2.2 Estudo de Caso: Inovao em Produtos de Mdia Interativa

A interao entre pessoas com diferentes especialidades um trao caracterstico do processo de grandes empresas de mdia interativa. E esse um fator fundamental para o desenvolvimento de produtos complexos. Vamos analisar o site da Globo.com, sendo que a multidisciplinariedade desta empresa comea no seu Departamento de Criao Interna. Ele responsvel por todos os projetos da empresa, mesmo aqueles que eventualmente so terceirizados. A criao, normalmente, dividida em trs grupos de trabalho, contando com profissionais de diferentes reas: - Arquitetura da Informao; - Design de Interface; - Branding A equipe de arquitetura da informao faz o levantamento e a categorizao de todas as informaes que existiro dos sites. Eles estimam a quantidade de pginas, o contedo e as funcionalidades existentes em cada uma delas, bem como a importncia de cada informao presente na tela. Este grupo tambm responsvel pela documentao de descrio das telas, que explica o funcionamento de cada elemento da pgina. J a equipe de design de interface preocupa-se com a usabilidade e a interao humano-computador de tudo que projetado na criao. So as responsveis pela _________________________________________________________________
Anotaes
facilidade de uso e de aprendizado, memorizaes, tratamento de erros e at mesmo pela capacidade de agradar o usurio. Utilizam os documentos de arquitetura da informao para se guiar e projetar a pgina: hierarquizar informaes, pensar o funcionamento da navegao e montar uma estrutura de layout. Projetam os Wireframes, que so a planta-baixa do site, prevendo cada detalhe e funcionalidade que ser utilizada. Temos dois exemplos de Wireframe nas imagens abaixo:
_________________________________________________________________
Anotaes
10
A equipe de branding concentra seu trabalho no design grfico, na parte visual. Eles so os responsveis pela comunicao da mensagem que deve ser transmitida, refletindo os atributos da marca e sua personalidade, alm das caractersticas emocionais a que o produto deve estar associado. _________________________________________________________________
Anotaes
11
Em 2005, as equipes de branding e design de interface foram unificadas, formando uma equipe s, com profissionais de diferentes reas.
2.2.1 Metodologia do Projeto

A metodologia de um projeto de criao de Website varia conforme sua necessidade. Contudo podemos organizar, de uma maneira geral, o processo da seguinte forma: 1. Demanda/Definio da estratgia 2. Benchmark (marcas de referncia do mercado) 3. Levantamento de funcionalidades desejadas (brainstorn) 4. Macroarquitetura da informao 5. Verificao da viabilidade tecnolgica 6. Continuao do projeto: a. Detalhamento da arquitetura da informao b. Desenho da experincia do usurio c. Projeto de Interface d. Projeto de branding e. Ajustes 7. Implementao 8. Desenvolvimento 9. Lanamento Existem tambm etapas de validao, que so um acompanhamento de tudo o que est sendo construdo depois de projetado, o que chamamos de testes de Usabilidade, o que falaremos em uma unidade seguinte da apostila. Vimos no decorrer desta unidade que os projetos para a Internet passaram a ser mais profissionais. O envolvimento de pessoas com diferentes formaes ganhou mais fora com o passar dos anos, aumentando a caracterstica multidisciplinar da Web.
_________________________________________________________________
Anotaes
12
Mesmo sabendo que os profissionais de Web esto trabalhando sozinhos na arquitetura da informao, no layout e no cdigo, o ideal que busquemos parcerias com profissionais que complementem o seu trabalho. Trabalhar com profissionais mais experientes, em algumas etapas do projeto, melhora a qualidade e a velocidade de entrega de seu trabalho, o que pode resultar em mais clientes. bom saber um pouco de tudo, mas a especializao mais importante ainda, tanto para o crescimento profissional como para a satisfao pessoal. O ideal se especializar naquilo que d mais prazer. Lembres-se: O MENOS MAIS.
_________________________________________________________________
Anotaes
13
Unidade 3 Teorias do Design aplicadas na Web
O fundamental identificar elementos que guiem a equipe para o projeto de um site que faam as pessoas falarem: EU AMO ESSE SITE
14
Quando o usurio navega na web em busca de uma informao cumprir essa tarefa de uma forma mais harmoniosa se o design colaborar com isso. Design a caracterstica do mundo moderno e aplicado tambm na web. Na Internet as tecnologias multimdias, como som, imagem, movimento, se caracterizam por utilizarem diferentes recursos simultaneamente e impressionando os sentidos do usurio. Quando bem aplicadas proporcionam uma experincia diferente, satisfatria. Um bom design resulta numa sensao de conforto e bem estar ao usurio. Essas caractersticas tornam a web atraente e, quando bem combinadas s informaes, resultam em um site com grande potencial de sucesso. O design no pode estar em segundo plano, bem como as informaes nele contidas.
3.1 Atrao Condicional

Todos os elementos que tm algo em comum devem estar juntos no layout, para que o leitor os reconhea como um grupo. Estabelecendo uma relao entre os elementos, o agrupamento possibilita mostrar a hierarquia no layout e sugerir uma ordem de leitura, tornando facilitado o acesso informao. Cabe destacar a importncia dos conceitos de arquitetura de informao, que a estrutura de um site em termos de navegao, contedo e disposio dos elementos. Organizar as informaes possibilita que sejam mais facilmente encontradas e compreendidas. importante, tambm, o bom senso para determinar quais elementos dominam e quais se subordinam numa composio.
3.2 Harmonia
A harmonia, segundo as leis da Gestalt, prev a coerncia visual dos elementos. Numa composio, cada forma inserida deve ser considerada como elemento do esquema total.
________________________________________________________________________________________ Anotaes
15
Uma recomendao prtica evitar a estratgia de colocar o mximo de informao possvel em uma pgina, um procedimento que, na verdade, contradiz todas as regras convencionais de design. Portanto, os espaos em branco devem ser partes integrante do design de uma pgina na Web e empregados para permitir a leitura mais fcil e a melhor compreenso do texto ou ainda indicar ao usurio onde comea e onde termina uma seo.
3.3 Alinhamento
O alinhamento, em conjunto com os outros fundamentos, faz com que o leitor se sinta natural e confortvel. Isso no quer dizer para alinharmos a esquerda, direita e/ou ao centro, quer dizer que o texto, por exemplo, tem que estabelecer um alinhamento com outro bloco de texto (e/ou imagem) e que uma imagem tem que estabelecer um alinhamento com outra imagem (e/ou bloco de texto).
3.4 Simetria
Formas estticas, geomtricas e com dois lados iguais em um mesmo eixo. Esta a lei bem complexa e ao mesmo tempo bem simples do conceito de Simetria. Mas o difcil criar layouts simtricos estticos, estabelecendo equilbrio dinmico entre os elementos de uma layout. Para isso preciso fazer variaes entre os elementos, como animao, tamanhos diferentes. Use abordagens simtricas para: - Layouts formais, tais como: casamentos ou formaturas. - Layouts com muitas fotos (simetria pode ajudar a organizar uma pgina com muitas fotos sem ter que planejar muito) - Qualquer outro tema que pea um tom ou abordagem mais conservadora. Por outro lado, use abordagens assimtricas para: - Refletir um tom informal, alegre, ou cheio de energia.
________________________________________________________________________________________ Anotaes
16
Mas lembre-se que estas so apenas sugestes! Voc pode aplicar qualquer abordagem de equilbrio em qualquer tema que voc queira! A escolha sua.
3.5 Cores
Alm das palavras e das imagens, a cor um importante elemento funcional. Ela pode intensificar tanto o texto como a imagem, emprestando-lhes alguma caracterstica especial ou funcionando mesmo como um elemento formativo por si mesma. Contrariamente ao apelo intelectual da palavra, a cor fundamentalmente emoo e, nesse sentido, ela pode ser imprescindvel. A cor exerce uma influncia decisiva no apenas em nossos olhos, mas em todos os outros sentidos. Seus efeitos psicolgicos, combinados com o conhecimento do simbolismo ancestral a que esto ligadas, tornam as cores um importante fato em qualquer apelo visual dirigido ao ser humano. A combinao de cores deve ser cuidadosa. Elas no apenas precisam combinar entre si dentro de um mesmo espao, como tambm devem criar um estado de esprito ou efeito visual. Psicodinmica das cores: importante observar tambm que pblico jovem responde melhor s cores vivas, fortes. J o pblico sofisticado, prefere cores discretas como o preto, o azulescuro, o verde-escuro e o cinza. - Amarelo: a cor amarela transmite alegria e vivacidade. Chama a ateno em qualquer ponto onde aplicada, e perfeita para o destaque de algum elemento no layout; - Azul: o azul uma das cores mais utilizadas em Websites, e uma das preferidas por quase todas as pessoas. Transmite sensao de tranqilidade, profundidade (quando escuro) e limpeza (quando claro); - Branco: a cor da pureza, para os ocidentais. Representa o vazio, a clareza, o incio. Websites com grande predominncia de branco tendem a ser mais legveis aos usurios;
________________________________________________________________________________________ Anotaes
17
- Cinza: o cinza transmite a sensao de algo impuro e indeciso (no claro e nem escuro, preto ou branco). uma cor triste e sombria, mas tambm pode definir um Website sbrio e srio; - Laranja: cor que alimenta, produz uma sensao de aconchego, intimidade. uma cor quente e permite resultados excelentes quando utilizada na intensidade e em lugares corretos; - Marrom: cor sbria e slida deve ser usada com moderao por trazer um aspecto muito pesado a qualquer local onde esteja aplicada; - Preto: a presena de todas as cores. A eternidade, elegncia. A cor da morte. Presente em 99% dos Websites, na sua maioria em pequenos detalhes; - Rosa: o rosa uma cor feminina, por excelncia. Sugere doura. Simplicidade, intimidade; - Roxo: uma cor que pode apresentar duas funes distintas: conferindo um aspecto divertido quanto misterioso, nobre, dependendo das cores as quais associado; - Verde: a cor da natureza. Suas diversas tonalidades transmitem diferentes sensaes, nenhuma delas relacionada alegria ou a paixo. O verde mais claro , assim como o azul, calmo e agradvel. O verde escuro transmite idia de profundidade, seriedade. J o verde amarelado confere a sensao de alegria, ou at mesmo seriedade. O verde uma cor que deve ser utilizada com muito critrio e moderao, j que diversos tons tm a propriedade de desagradar aos olhos. - Vermelho: o vermelho esta intimamente ligado aos desejos passionais. quente, imponente, chamativo. Suas diversas nuances apresentam diversos significados: o vermelho escuro sugere sobriedade e poder; o vermelho cereja apaixonado, feminino sensual; o vermelho mais claro energizante e forte. Sete diretrizes para utilizao de cores: 1- Esttica (harmonia, equilbrio, contraste, intensidade, variabilidade); 2- Visibilidade, legibilidade e saturao de leitura (conforto visual). 3- Organizao e usabilidade (como ajudar o usurio a navegar no site, direcionar a sua leitura, identificar unidades, partes, sees, etc.). 4- Identidade (como se identificar e ser reconhecido por meio de cores)
________________________________________________________________________________________ Anotaes
18
5- Repertrio simblico (a carga simblica que pode ser incorporada s cores, naquele determinado contexto de uso e do repertrio do usurio que se pretende atingir). 6- Informao (como a cor pode contribuir para conduzir a informao) 7- Limitaes e recursos tcnicos (aspectos materiais do suporte e dos processos) Fonte: Luciano Guimares
3.5.1 Acerte Sempre

- Amarelo X Azul Uma combinao original e que agrada a maioria dos usurios. Neste caso, recomendado testar os tons de azul mais claros e acinzentados, e aproveitar o amarelo puro na maioria dos detalhes e linhas de composio do layout.
- Verde X Branco O verde uma cor muito perigosa. A escolha criteriosa do tom essencial para criar um layout agradvel e, ao mesmo tempo, sofisticado. recomendado esta combinao a partir de tons de verde mais metlicos e levemente azulados que, combinados com o branco, sugerem limpeza e bom gosto. - Cinza X Vermelho Escuro Quando falamos em cinza para esta combinao, escolhemos um tom de cinza mais claro para a maioria dos grficos em cinza e alguns grficos em tons de cinza grafite. O vermelho escuro sugere fora e aquece os tons muito frios de cinza - Azul X Cinza Uma combinao fria mais agradvel. Alis, milhares de sites na Web optam (com sucesso) por estas tonalidades, clssicas, sofisticadas e quase sempre indispensveis quando no se quer errar. Existem alguns tons de azul puro que requer cautela no uso. Alm do mais, uma cor muito forte e, se aplicada a grandes reas, tende a desagradar os olhos. Opte sempre por tons de azul acinzentado em grandes reas. - Preto X Cinza
________________________________________________________________________________________ Anotaes
19
Apesar de serem duas cores que intimidam, o preto e o cinza so muito elegantes. Podemos compor um layout muito bonito se usarmos tons de cinza mais claros e escolhermos alguns detalhes em preto. - Preto X Vermelho Escuro X Branco O preto e o vermelho escuro so duas cores muito pesadas que, sozinhas, no recomendado na composio de uma pgina. Entretanto, se houver predominncia do branco, estas duas cores podem conferir um aspecto maravilhoso ao desenho do site. Lembre-se sempre de aproveitar detalhes em cores escuras e deixar a maior parte do layout em tons mais claros, devido legibilidade. - Amarelo X Cinza X Laranja O amarelo e o laranja so cores alegres e quentes e, se combinadas com o triste cinza, conferem um ar de moderno e original ao Website. Podemos confeccionar um layout em tons de cinza a arrematar a criao com tons de laranja ou amarelo, sempre usando as variaes dos tons mais escuros aos mais claros. - Rosa X Azul Essa combinao confere um resultado bastante agradvel, excelentes para um Website feminino ou infantil. Para esses casos, prefira sempre tons claros. - Azul X Laranja Assim como o azul e amarelo, o Designer obter excelente efeito se combinar tons de azul (acinzentados, sempre) com laranja (neste caso, os tons mais vivos so ideais), este ltimo em detalhes de destaque da pgina. O laranja tem a propriedade de aquecer o frio azul, e conferir um visual moderno e diferente ao layout. Diversos Websites de entreterimento e diverso utilizam esta combinao. - Bege X Branco O bege uma tonalidade muito suave e pode ser combinada livremente com o branco, compondo Websites para qualquer pblico-alvo. Esta combinao a mais verstil de todas, podendo usarmos sem medo.
________________________________________________________________________________________ Anotaes
20
3.5.2 Algumas Recomendaes

- Cuidado redobrado ao utilizar as seguintes cores: roxo e preto. Use o bom senso e analise os efeitos que essas cores causam aos olhos e nos usurios; - Evite misturar dois tons quentes e predominantes na aparncia geral de um layout. Procure sempre quebrar o calor com algum tom frio; - Cuidado ao utilizar dois ou mais tons luminosos como nicos em um site; - Evite combinar apenas o preto e cinza em um portal. Quebre a monotonia utilizando uma terceira cor mais alegre; - Tenha extremo cuidado com algumas tonalidades de verde. O verde uma cor muito bonita e pode favorecer o seu layout quando bem aplicada; - Observe, acima de tudo, o pblico-alvo de seu Website. Isso determinar a utilizao de cores, como o rosa, restrita basicamente a sites femininos ou infantis. - E, acima de tudo, preste muita ateno na legibilidade do Website. Cores muito escuras tendem a ofuscar a leitura de textos, mesmo quando eles esto definidos com cores claras.
3.6 Simplicidade
A simplicidade gera clareza, organizao mais harmoniosa e unificada. Caracteriza-se por organizaes formais fceis de serem assimiladas, lidas e rapidamente compreendidas. sinnimo de eficincia.
3.7 Integrao
Seguindo o conceito do site at o fim! preciso seguir os princpios do design at o fim, se aplicar em uma pgina, ter de aplicar em todas as outras do website. Agora hora de interligar todos os conceitos, harmonizar todos os elementos, construir uma relao com todas as formas ali presentes, pois afinal de contas o que seria de uma interface que utilizam os princpios, mas no estabelecem um agrupamento entre eles?
________________________________________________________________________________________ Anotaes
21
No entanto, mesmo seguindo um padro, as pginas devem ter diferenas entre elas, para no cansar o usurio e para que ele perceba que o assunto outro.
3.8 Contrastes
Toda pgina bem construda um arranjo de harmonias e contrastes entre suas partes. Um layout contrastante atrai a viso na hora e cria uma real curiosidade e interesse. Ele pode variar muito o tamanho, peso, estilo, forma e cor. Quanto maior a quantidade ou intensidade dos contrastes, mais interessante poder ser. Logicamente, contrastes de cores e tamanho devem ser aplicados corretamente, dependendo muito do pblico alvo do site. Pblico jovem prefere cores vivas, pblico sofisticado aprecia cores discretas.
________________________________________________________________________________________ Anotaes
22
Unidade 4 Tipografia
4.1 Propriedades da Tipografia
Tipografia a maravilhosa arte de se usar tipos para transmitir idias e informaes. Sempre que se coloca alguma palavra em um papel ou em qualquer meio de comunicao visual atravs do qual se quer conseguir uma mensagem, pode-se aplicar a arte da comunicao. Tipografia transformar um espao vazio, num espao que no seja mais vazio. Isto , se temos uma determinada informao ou texto manuscrito e precisamos dar-lhe um formato impresso com uma mensagem clara que possa ser lida sem problema, isso tipografia. Wolfgang Weingart Antes de vermos a aplicao e tipos de fontes e os seus significados, essencial que conheamos as propriedades da tipografia.
4.1.1 O Estilo das Fontes

O estilo corresponde forma de uma fonte ser realada. Os estilos mais comuns so: - Negrito: o estilo negrito reala uma palavra ou frase em meio a um perodo. Muitas vezes, o estilo aplicado em menus de links, se nenhuma funo esttica ou funcional aparente; - Itlico: o estilo itlico, alm de ser utilizado para realas palavras ou expresses, tambm funciona como uma diferenciao e destaque de palavras estrangeiras, jarges ou expresses menos conhecidas em meio a um perodo; - Sublinhado: o estilo sublinhado tornou-se um padro na Web para links. Embora hoje os estilos CSS tenham permitido a formatao avanada de links, o uso do sublinhado em um texto ainda remete a um elemento clicvel;
________________________________________________________________________________________ Anotaes
23
4.1.2 Separao entre Caracteres (Kerning)

Corresponde ao espao maior ou menor entre um caracter e outro. Apesar de ser algo simples e quase imperceptvel, o ajuste do kerning confere um efeito poderoso quando aplicado em determinados tipos de fontes.
O efeito kerning torna as palavras ou expresses mais longas, aparentemente, e sua leitura mais pausada e lenta. Devemos evitar utilizar espaamento entre caracteres muito grande se o perodo ou a palavra forem muito longos. Tambm, no interessante utilizar kerning quando a fonte manuscrita, j que o texto pode ficar ilegvel, dependendo do traado da fonte:
4.1.3 Entrelinhas
O espaamento entre linhas corresponde distncia entre uma linha de base e a outra:
________________________________________________________________________________________ Anotaes
24
Apesar de esta propriedade depender do tipo de fonte, devemos evitar em espaamento muito pequenos entre as fontes; o texto torna-se ilegvel e desorganizado. Um espaamento muito grande entre as linhas dificulta a leitura, j que os olhos percorrem um espao muito maior entre um perodo e outro, cansando a viso. Observe:
4.2 Famlias de Fontes

Existem milhares de tipos de fontes, tradicionais, modernas, ousadas e rebuscadas. Entretanto s vezes complicado escolher que tipo de fontes mais adequado a um trabalho ou cliente. So tantos tipos que comum o Designer demorar-se mais estudando a tipografia de um site que seu prprio desenho.
________________________________________________________________________________________ Anotaes
25
4.2.1 Serifadas
As fontes serifadas caracterizam-se pela presena de arremates nas partes superiores e inferiores das letras. Esse tipo de fonte confere a um texto maior seriedade e elegncia:
As fontes serifadas possibilitam uma leitura mais agradvel em livros e impressos, j para a Internet, cujos textos so lidos e interpretados diretamente na tela do computador, as fontes mais adequadas so as da famlia sem serifa, que veremos a seguir.
4.2.2 Sem Serifa

As fontes sem serifa foram criadas pelos designers da escola de design alem Bauhaus, em meados da dcada de 30, fazendo parte da chamada nova tipografia. Caracterizam-se pelo estilo limpo e desenho simplificado, cujas letras, normalmente, possuem traos de mesma espessura e paralelos entre si, seus pesos so iguais. A leitura fcil e dinmica.
________________________________________________________________________________________ Anotaes
26
As fontes em serifa so as mais indicadas para corpos de texto longos na Web. A fonte Arial , ainda, a fonte mais usual e presente na maioria dos computadores.
4.2.3 Monoespaadas
As fontes monoespaadas so aquelas cuja largura dos caracteres a mesma, qualquer que seja o tamanho do corpo do caracter ou se est em caixa alta ou no. O exemplo mais comum deste tipo de fonte a Courier e suas variaes, remetendo aos caracteres de uma mquina de escrever:
4.2.4 Bitmap
Uma fonte bitmap aquela que utiliza um mapa de bits para a representao de seus caracteres. No so escalonveis, podendo ser utilizadas, satisfatoriamente, em um nico tamanho de corpo, geralmente muito reduzido:
As fontes bitmap so perfeitas para grficos mais modernos e futuristas, apesar de apresentarem o inconveniente de serem bastante ilegveis.
________________________________________________________________________________________ Anotaes
27
4.2.5 Caligrficas
As fontes caligrficas, tambm conhecidas como cursivas ou script, como o prprio nome indica, so as fontes cujos caracteres imitam a escrita manual. Seu surgimento data do sculo XVII, na Frana, e existem inmeros tipos de fontes caligrficas. Um detalhe notvel desta famlia a presena de linhas no incio e no fim de cada caracter, o que permite a unio entre letras semelhante conseguida com a escrita manual:
O estilo caligrfico naturalmente feminino e pode variar do formal ao informal, dependendo da fonte escolhida ou caligrafia imitada.
4.2.6 Fantasia
So fontes que no se enquadram em nenhum dos estilos acima, e que tambm podem ser uma combinao resultante entre um ou mais estilos. Normalmente caracterizam-se pelas formas originais, presena de ornamentos (ou no) e grande divergncia de padro entre os caracteres.
________________________________________________________________________________________ Anotaes
28
4.3 Legibilidade
No demais lembrar que, mais importante que o bom visual de uma fonte a sua legibilidade. Em se tratando de Internet, os textos necessariamente devem ser escritos de maneira clara e da forma mais simplificada possvel, j que a leitura de itens na tela do computador mais cansativa e, por isso, realizada pelos usurios muito rapidamente. Para assegurar que sua palavra (ou de seus clientes) ser bem transmitida, prefira fontes no serifadas (principalmente em textos longos), com estrutura simples, formato facilmente adaptvel a qualquer estrutura de layout, contedo apresentado e redimensionamento de caracteres flexvel. Boas fontes de texto so: Verdana, Arial e Helvetica. importante lembrar de algumas regras quando usar as fontes na composio: tamanho, peso, estrutura, forma, direo, cor. O alinhamento esquerda tambm facilita a leitura. Cuidado com o contraste que forma a cor com o fundo: amarelo sobre branco tem uma leitura difcil, vermelho sobre verde vibra muito, branco sobre preto em texto longo cansa a leitura. Centralize ou justifique quando o tema do seu site e o texto for formal, caso contrrio procure utilizar o texto de forma mais livre e disponha conforme a sua criatividade e o bom senso permitirem. muito importante saber utilizar estilos de fontes em determinados casos: - Fontes desconstrudas e modernas se encaixam bem em sites modernos e jovens; - Fontes clssicas e manuscritas muitas vezes se encaixam bem em sites clssicos e srios; - Fontes normais e srias se encaixam perfeitamente em sites institucionais e moderados. Especialistas sugerem que o nmero de tipos de letras utilizados em um Website fique em torno de trs. Utilize tipos de letras para caracterizar diferentemente o ttulo, o texto e anotaes. Ao adotar, por exemplo, trs tipos, pode-se fazer uso de suas variaes como o itlico, o bold e o condensado que permitem boa margem de opes, sem, contudo, descaracterizar o estilo da pgina. Veja alguns exemplos de sites que trabalham bem a tipografia:
________________________________________________________________________________________ Anotaes
29
________________________________________________________________________________________ Anotaes
30
Unidade 5 Gestalt aplicada a Web
A teoria da Gestalt busca descobrir por que algumas formas agradam mais s pessoas do que outras. De acordo com a Gestalt, a arte se funde no princpio da pregnncia da forma. Ou seja, na formao de imagens, os fatores de equilbrio, clareza e harmonia visual constituem para o ser humano uma necessidade e, por isso, considerados indispensveis, seja numa obra de arte, num produto industrial, numa pea grfica, num edifcio, numa escultura ou em qualquer outro tipo de manifestao visual.
5.1 A Pregnncia da Forma

Para melhor compreendermos o conceito de pregnncia, iremos definir forma, segundo Aristteles: A forma pode ser definida com a figura ou a imagem visvel do contedo. De um modo mais prtico, ela nos informa sobre a natureza da aparncia externa de alguma coisa. Tudo que se v possui forma. Ento, podemos dizer que uma forma possui alta pregnncia quando apresenta um alto grau de equilbrio, clareza e unificao visual, e um mnimo de complicao visual na organizao de seus elementos ou unidades compositivas. Observe a imagem abaixo:
31
Uma imagem que possui baixa pregnncia requer uma leitura com maior ateno e um maior tempo para sua compreenso. Veja a imagem abaixo:
Podemos concluir que: - Quanto melhor a organizao visual da forma do objeto, em termos de facilidade de compreenso e rapidez de leitura ou interpretao, maior ser o seu grau de pregnncia;
________________________________________________________________________________________ Anotaes
32
- Naturalmente, quanto pior ou mais confusa for organizao visual da forma do objeto menor ser o seu grau de pregnncia.
5.2 Pregnncia na Web

Buscar harmonia e equilbrio no uso dos principais elementos visuais (fotos, desenhos, cones, tipografia, logotipo, etc.) apontado como um dos principais caminhos para se atingir um bom grau de pregnncia em um site. importante que as pginas tenham um design que favorea a alta pregnncia, pois isso favorece a usabilidade, que a facilidade com que o usurio consegue encontrar o que est procurando. Nos cones, esse fator ainda mais crtico. Se o desenho no boto for complicado, ele no ser compreendido e no cumprir a sua funo. Na elaborao de um site to importante quanto funo, o significado. Tem usurio que se sente mais confortvel, integrado e estimulado em um ambiente visualmente poludo e cheio de informaes competindo pela sua ateno. muito importante no esquecermos que cada elemento tem intra-relaes visuais e que estabelea relaes com os outros elementos. Ou seja, um logotipo, por exemplo, matem em seu prprio desenho relaes de pregnncia internas entre sua cor, sua forma e sua tipografia. O ideal investir na qualidade dos elementos visuais e no na quantidade deles na interface. Excessos podem prejudicar o resultado. Neste sentido trabalhar a pregnncia de forma adequada em um site uma tarefa que exige cuidado. Vamos ver alguns fatores relevantes para a organizao visual de um site: 1- Logotipo: Considerando-o como smbolo visual de um conceito, o que vai representar a identidade visual de um site; 2- Tipografia: Texto tambm imagem. Letras so signos que expressam significados e que, em conjunto funcionam de forma distinta. 3- Imagem: A qualidade e o equilbrio entre imagens fotos, desenhos, cones - necessria e desejvel. importante que a pregnncia visual destes elementos esteja de acordo com a proposta do site e com o contedo disposto. Fotos devem
________________________________________________________________________________________ Anotaes
33
ter qualidade, apelo esttico e de fcil carregamento; desenhos devem ser legveis; cones devem ter significado universal, compreensveis aos usurios. 4- Vdeos e Animaes: importante compatibilizar peso de imagens em movimento com a dinmica de navegao de uma pgina. Da mesma forma, devemos entender que uma animao um recurso que conta uma pequena histria. Animaes sem propsito tendem e frustrar o usurio e, conseqentemente, comprometer a avaliao do site. 5- udio: Presente em propulso nos site hoje em dia. A msica provoca formao de imagens na mente de quem a escuta. Em alguns casos pode ser extremamente incmodo para o usurio repetio contnua de trechos musicais.
________________________________________________________________________________________ Anotaes
34
Unidade 6 Usabilidade na Web
Usabilidade sinnimo de facilidade de uso. Se um produto fcil de usar, o usurio tem maior produtividade: aprende mais rpido a usar, memoriza as operaes e comete menos erros.
35
A Internet comercial completa 12 anos em 2007. Est inserida em um curtssimo perodo histrico, fase de muita experimentao e adaptao, de descobertas e novas idias, grandes e rpidos avanos. Ela revolucionou a forma como as pessoas se comunicam, trocam informaes e experincias. Com este crescimento rpido surgiu uma enorme demanda, de uma hora para outra, e todos estavam fazendo seus prprios sites. Desde ento o comportamento de tentativa e erro se mantm. Graas a estas solues baseadas no empirismo, Nielsen escreveu em 2000 um artigo com o ttulo The Mud-Throwing Theory of Usability, enfocando justamente a questo do chute, da falta de conhecimento das pessoas sobre aquilo que esto fazendo. Em virtude da preocupao com o lanamento rpido do produto, da presso do mercado, os sites acabam sendo desenvolvidos de forma errada. Web sites no so feitos para terem sua beleza contemplada e sim para que usurios encontrem o que querem em um ambiente harmnico e bonito. Se no pensar nisso voc vai criar algo lindo e ordinrio. E padres existem para facilitar a vida das pessoas e no para castrar a criatividade. Ento como fazer?
6.1 Projetando uma Boa Experincia

Grande parte das empresas que produzem sites no focam seus projetos na experincia dos usurios, porque no querem perder tempo e nem dinheiro com testes de usabilidade. No entanto, pode-se entender que o consumo adicional de tempo no cuidado da usabilidade gera um impacto positivo no nvel de qualidade do projeto. Os testes de usabilidade so de grande utilidade para que possamos projetar produtos que sejam fceis de usar e, mais do que isso, capazes de proporcionar uma boa experincia. importante ressaltar que esses testes so a ferramenta mais poderosa que os designers tm para avaliar suas criaes. O segredo vender para o cliente a importncia de se testar o que foi projetado. Como diria Jakob Nielsen, testar um usurio melhor do que no testar nenhum. Se o objetivo for melhorar as funcionalidades de um produto especifico, as
________________________________________________________________________________________ Anotaes
36
estatsticas mostram que testes com apenas cinco usurios costumam levantar uma boa quantidade de possibilidades de melhora (cerca de 85%). Mas cuidado: designers no so usurios e usurios no so designers. Nem tudo que os usurios falarem pode ser levado em considerao. Por outro lado, eles sempre enxergam problemas que os designers dificilmente percebem.
6.1.1 Teste de Usabilidade

Os testes de usabilidade so aplicados em usurios potenciais da interface, ao quais so incentivados a us-la num ambiente monitorado, onde suas aes so gravadas e anotadas. Um profissional facilitador fica ao lado do usurio para guilo pelo teste e incentivar que verbalize seus problemas e desconfortos. Numa sala separada, podem estar outros membros da equipe de design da interface para observar o teste ao vivo sem interferir no comportamento do usurio. Aps o teste, os dados so analisados e gerado um relatrio contendo recomendaes para a equipe de design e o consultor fica disposio para discutir solues para os problemas encontrados. Os dados coletados durante os testes so analisados para identificar os problemas de usabilidade que os usurios tm e, na medida em que so encontrados, j so cogitadas possveis solues. Ao final da anlise, gerado um relatrio contendo os problemas e as solues propostas e o consultor fica disposio para reunies com a equipe para discutir as solues, bem como acompanhar os seus desdobramentos. Regras Bsicas de Usabilidade na WEB: - Clareza na arquitetura da informao; - Facilidade de navegao; - Simplicidade; - A relevncia do contedo; - Manter a consistncia e o padro; - Tempo suportvel;
________________________________________________________________________________________ Anotaes
37
- Foco nos usurios.
6.1.2 Como Fazer?

Este somente um modelo, o qual pode ser adaptado, dependendo a necessidade do teste. Este teste de usabilidade est sendo utilizado para analisar o site ___________________ As informaes fornecidas so vitais para o seu aprimoramento. Nas questes de marcar, favor circular o nmero correspondente ao grau de concordncia. A no ser que esteja indicado, dever ser marcada somente uma resposta por questo. Por favor, leia com ateno as questes a seguir e em caso de dvida, solicite esclarecimento com o avaliador, levando em conta que o grau 0 Difcil e 5 e Fcil. 1. Favor marcar o nmero correspondente ao grau que voc mais concorda: a. Facilidade de utilizao: 0 1 2 3 4 5 b. Organizao das informaes: 0 1 2 3 4 5 c. Layout das telas: 0 1 2 3 4 5 d. Nomenclatura utilizada nas telas (nome de comandos, ttulos, campos, etc.): 0 1 2345 e. Mensagens do sistema: 0 1 2 3 4 5 f. Assimilao das informaes: 0 1 2 3 4 5 g. No geral, a realizao do teste foi: 0 1 2 3 4 5 2. Aponte situaes em que voc achou fcil utilizar no sistema: ________________________________________________________________ ________________________________________________________________ ________________________________________________________________
________________________________________________________________________________________ Anotaes
38
________________________________________________________________ 3. Aponte situaes que voc sentiu dificuldades: ________________________________________________________________ ________________________________________________________________ ________________________________________________________________ 4. Voc utilizou a Ajuda on-line do sistema em algum momento? a. Sim b. No Em caso afirmativo, descreva em quais situaes voc utilizou a Ajuda on-line do sistema (comente tambm se as informaes da Ajuda on-line foram de pouca ou grande valia): ________________________________________________________________ ________________________________________________________________ 5. Diante do teste realizado, voc acha que o programa atingiu o objetivo para o qual foi desenvolvido? Explique. ________________________________________________________________ ________________________________________________________________ ________________________________________________________________ ________________________________________________________________ 6. O espao abaixo reservado para que voc exponha sua opinio e sugira melhorias no sistema. ________________________________________________________________ ________________________________________________________________ ________________________________________________________________ ________________________________________________________________ ________________________________________________________________ ________________________________________________________________
________________________________________________________________________________________ Anotaes
39
________________________________________________________________________________________ Anotaes
40
Unidade 7 Modelos de site
Algumas pessoas ainda confundem esttica com beleza, porm esse um conceito ultrapassado desde o romantismo. Uma srie de pensadores, entre eles Kant, discutiu o binmio belo/bom da era romntica e o termo foi sofrendo algumas modificaes passando, por exemplo, pelo sublime, at chegar esttica. Esttica nada mais do que a percepo do objeto ou aquilo a que o objeto se prope. Ela transforma o objeto em mercadoria de acordo com o pblico que deseja atingir, por isso no podemos mais dizer que a esttica nica, existe uma diferente para tipo de projeto. Na web, por exemplo, cada tipo de site tem a sua esttica. Os portais so um bom exemplo de uma esttica j consolidada - embora isso no queira dizer que uma boa soluo. Eles so comunidades virtuais sem nenhum paralelo na vida real e possuem um volume imenso de informaes que precisam ser divulgadas atravs de seus canais e sub-canais. Essa caracterstica fundamental dos portais faz com que todos eles sigam um padro visual/formal que corresponde sua esttica: - Colunas fixas; - Barra de navegao com linguagem verbal; - Coluna de compras do lado direito da tela etc. Podemos listar uma srie de estticas na web tais como, a dos sites de busca tendo o Google como referncia de funcionalidade e objetividade, a dos sites de compras, a dos portiflios virtuais e a dos blogs, entre outras. E o que todas as estticas tem em comum?
41
Bem, se no tem em comum, deveriam ter: a funo de atender as necessidades dos usurios do site. Quando esse pr-requisito no est presente encontramos sites de pequenas dimenses tentando ser um portal e comprometendo seu contedo atravs de mini-setores prejudicando a funcionalidade do site. comum vermos sites de contedo dinmico, como o de jornais e portais, planejado como se fossem sites institucionais e vice-versa. Os designers de sites devem pensar como arquitetos, pois assim como um arquiteto precisa projetar ambientes baseado na utilizao e finalidade dos espaos da futura edificao, um designer de web sites tambm precisa, porque o produto final no uma realizao apenas visual. Se a elaborao de um projeto de um site no tiver critrios que levem a uma melhor maneira de us-lo, seria melhor comprar sites prontos, mudando apenas o logotipo. Ou ento, pedir para que o sobrinho do irmo do cunhado da vizinha faa a seu gosto. Para criar um site tem que ser cri-cri-cri - criterioso, crtico e criativo. necessrio pensar como usurio, designer e cliente. Isso muito mais importante do que aprender o ltimo software ou fazer designs que paream ltima tendncia. H quem se preocupe mais com seu gosto pessoal do que com o resultado que o site deve gerar. Vale lembrar que a prioridade de um site so os usurios, seja falando sobre a usabilidade, contedo ou design. A tecnologia importante e as novas tecnologias, principalmente, podem ser muito interessantes.Mas colocar a tecnologia antes dos usurios pode ser desastroso. Uma boa dica tentar fazer relaes que combinem funcionalidade e perfil do cliente e com certeza o resultado ser satisfatrio. Se os usurios no puderem encontrar algo no site, no voltaro. Se no tiverem uma experincia boa, no voltaro.
7.1 Institucionais
Website institucional todo aquele grande site no comercial, governamental ou no, por exemplo: sites de universidades, portais de rgos pblicos, portais de cidades mantidas pelo governo, sites de ONGs, entre outros.
________________________________________________________________________________________ Anotaes
42
7.2 Portais
Portal seria uma porta de entrada ao abrangente e diversificado contedo da Internet, acolhido por um grande website de forma total e organizada. Agrega contedos produzidos dentro de seu prprio meio e tambm de terceiros, relacionados aos mais diversos assuntos: notcias, eventos desportivos, sees de humor, etc. Alm de reunir contedo de interesse dos usurios, fornece, tambm, diversos servios como: salas de bate-papo (Chat) contas de e-mail, fruns, mecanismos de busca... Tudo com o nico objetivo de gerar uma comunidade fiel.
7.3 E-commerce
O site e-Commerce busca agilidade nas operaes e procedimentos administrativos pr e ps-venda, aumento na visibilidade para a captao de clientes e consumidores.
________________________________________________________________________________________ Anotaes
43
- Reduo de custos por no necessitar de um vendedor, de exposio de produtos "ao vivo" e espao fsico para a venda, os custos so menores. - Maior exposio de seus produtos atravs da Internet, seu produto pode ser visualizado e comprado em qualquer lugar do mundo. - Aumento do canal de vendas a Internet o mais novo canal de vendas de um produto. - Maior controle das vendas com todas as vendas registradas na pgina, possvel obter informaes como produtos mais vendidos ou vendas mdias por cliente. - Melhor relacionamento com o cliente sabendo quais so as vendas de cada cliente possvel traar um perfil e fazer ofertas especficas para cada um ou configurar a pgina de acordo com suas preferncias.
7.4 Experimentais
Um site experimental pode usar e abusar de animaes, devendo sempre buscar o que h de novo no mercado e testar, como: novas tecnologias e modos de comunicao na Web. http://www.2advanced.com
7.5 Hotsites
Hotsite um pequeno website com o objetivo de divulgar um produto, uma idia, etc. Geralmente caracterizado pela nfase no visual, textos curtos e efeitos especiais. Um HotSite normalmente criado quando se quer realizar campanhas de curta durao ou ligadas a eventos ou produtos especficos. Ele reconhecido como uma das formas mais eficientes da comunicao on-line, integrando-se a uma estrutura pr-existente, mas com funcionamento independente. possvel mesclar informaes institucionais ou sees dinmicas, agregando mais valor ao HotSite.
________________________________________________________________________________________ Anotaes
44
________________________________________________________________________________________ Anotaes
45
Unidade 8 Anncios, Pop-ups e demais Espaos Publicitrios

Quando, em 1969, os cientistas das Universidades de Stanford, Massachusetts, e da Califrnia, em Los Angeles, realizaram a primeira (e bem sucedida) comunicao de longa distncia atravs de um computador, eles no imaginaram que aquele curto dilogo fosse o incio de uma das maiores revolues do sculo XX. A partir de vrias descobertas, emergiu a possibilidade de adquirirmos um computador pessoal barato com conexo a Internet. O interesse cada vez mais crescente das pessoas conectadas em tempo real e sua utilizao comeou e despertar a ateno de inmeras corporaes, que perceberam o grande potencial comercial da rede. Tudo estava mais fcil, muito gil e crescendo vertiginosamente. Era tudo que as grandes empresas, sempre vidas pela conquista de novos clientes e meios de divulgao, precisavam. Estava, assim, consolidado o lado comercial da rede. medida que aumentavam os acessos e o nmero de visitantes em uma pgina ou site da Web, estas disponibilizavam espaos especialmente reservados para que outras empresas divulgassem seus servios, mediante pagamento de taxas prestabelecidas. Assim como anncios de jornal possuem diversos padres de tamanho que precisam ser respeitados, os anncios para Web tambm possuem algumas normas. Quando uma empresa decide colocar uma propaganda em outro Website, ela precisa pensar em qual tipo de anncio deseja veicular (esttico ou animado), o tamanho da imagem e o local em que ela aparecer. Cada um desses fatores influencia diretamente o preo de exibio desse anncio, bem como o tamanho da empresa em qual se deseja anunciar e os acessos dirios que ela recebe.
________________________________________________________________________________________ Anotaes
46
8.1 Os Banners
Derivados da palavra francesa bannire, bandeira, os banners correspondem a imagens estticas ou animadas, que podem ser inseridas em locais diversos da home page ou sees internas de um Website, especialmente os portais e sites empresariais maiores. Apesar de termos milhes de possibilidades na rede, e uma grande variedade de tamanhos e padres de banners, existem os que foram predefinidos pela IAB/CASIE (Internet Advertising Bureau (IAB)- Bir de Publicidade na Internet e a Coalition for Advertising Supported Information & Entertainment (CASIE) Coalizo para Jornalismo e Entretenimento Sustentados por Publicidade) para a Internet:
8.1.1 Full Banner

Suas dimenses so as de 468x60 pixels. Dificilmente um full banner esttico. Atualmente, as empresas esto preferindo confeccionar seus banners em Flash, que possibilita uma maior sofisticao na animao e um tamanho bastante reduzido de arquivo:
8.1.2 Half Banner

O Half Banner, como deixa claro o seu nome (half = metade), corresponde metade de um full banner, dividido a partir de sua largura. Possui as dimenses de 234x60 pixel. O half banner uma opo interessante quando pensamos em colocar mais de um anunciante numa determinada rea de destaque no topo do site, j que possvel a incluso de dois banners half pelo tamanho de um full banner
________________________________________________________________________________________ Anotaes
47
8.1.3 Banner Boto Padro

Os banners boto figuram aos montes nas reas laterais da home page de vrios sites. Eles so utilizados, geralmente, para caber em espaos pequenos, ou por sites que no querem chamar ateno excessiva para os anncios em seu layout: O tamanho mdio para um banner boto padro o de 120x60 pixels. Por serem pequenos, normalmente so estticos, e possuem o que podemos chamar de design sucinto: apenas as informaes necessrias, como o logotipo do interessado em anunciar e uma arte discreta, mas legvel.
8.1.4 Banners Boto Quadrado

Os banners quadrados (ou Square Banners) tambm so utilizados nas laterais na pgina de um site. Atualmente, a maioria destes banners est sendo apresentada com animaes em Flash, o que se justifica por suas dimenses de 125x125 pixels.
8.1.5 Minibanners
Os minibanners so pequenas barras que no possuem tendncia forte a serem utilizadas como forma direta de venda de anncios. Obviamente, graas ao seu tamanho reduzido, o minibanner presta-se, na maioria das vezes, apenas a publicidade de algum patrocinador ou anunciando a tecnologia utilizada na construo do portal ou Website, por exemplo. As dimenses padro de um minibanner so 88x31 pixels: Compor um minibanner muitas vezes um desafio, que precisa de boa dose de pacincia e olho clnico para realizarmos um trabalho satisfatrio e harmnico. Podem ser dispostos em qualquer lugar da pgina.
________________________________________________________________________________________ Anotaes
48
8.1.6 Banner Vertical

So banners verticais so excelentes de se trabalhar graficamente, pois possuem dimenses suficientes para encaixar perfeitamente imagens e textos, sem prejudicar ambos. As dimenses de um banner vertical do 120x240 pixels e so, geralmente, locados nas laterais da pgina.
8.1.7 Banner-faixa
Os banners-faixa foram popularizados pelo Yahoo, e apesar de no serem comuns quando os half banners, so uma boa sada para expor seus anunciantes sem poluir muito o visual do site. Geralmente, so posicionados no topo da home page, ou na parte inferior da regio do contedo. As dimenses de um banner-faixa so 234x30 pixels.
8.1.8 Arranha-Cus ou Sky Scrapers

So os imensos banners que ocupam toda a regio de uma pgina, quase sempre a lateral direita. Na sua grande maioria so animados em Flash, e geralmente apresentam promoes internas ou assuntos relacionados ao prprio site. O tamanho mdio de um banner de cerca de 150x580 pixels:
8.1.9 Outros Tipos de Banners

Tambm, vemos muitos sites que alm de utilizar os tamanhos-padro comuns aos banners de anncios, personalizam espaos publicitrios de acordo com o formato e disposio de seus layouts.
________________________________________________________________________________________ Anotaes
49
Assim, possvel encontrarmos uma grande variedade de tipos personalizados ao navegarmos pela Web:
8.2 Os Pop-ups
Os pop-ups correspondem s janelas de navegador que se abrem na tela assim que uma pgina carregada. Os anncios veiculados em janelas pop-up so as mais caras formas de publicidade em Internet, j que ficam a frente do contedo do prprio site. Os anncios pop-up usualmente so animaes em Flash, e possuem um tamanho mdio de 200x200 pixels. Observe alguns exemplos:
________________________________________________________________________________________ Anotaes
50
8.3 Como Alcanar Eficincia com Banners?

At hoje a eficincia dos banners questionada. Virou assunto polmico entre publicitrios, veculos e anunciantes. Iremos dar algumas dicas para alcanar eficincia com banners, visando no s os cliques, mas principalmente os resultados. 1. Cuidado Com o Banner Negativo. Fique Atento as Mensagens. Assim como na publicidade convencional, o banner tambm sofre com isso: a negatividade na mensagem publicitria. Existe uma corrente de pensamento (creio que seja subconsciente) de que o anncio, para chamar a ateno de determinado pblico, deve mostrar imagem ou texto que se relaciona com o estado emocional atual do pblico-alvo. Citamos um caso-exemplo, fictcio, mas comum de se ver: um banner que anuncia um novo software de proteo Windows. O software protege contra vrus, preserva o sistema, bloqueia as suas configuraes, podendo ter acesso apenas com sua senha. O criador do banner tem a idia de colocar uma foto de um homem de gravata, puxando os cabelos pra cima, fazendo careta, com cara de raiva, gritando, suando e franzindo a testa. O texto chama seu pblico: Voc est assim com seu Windows?. E nas cenas seguintes, apresenta o produto. Uma coisa garanto: poucos seres humanos iro se identificar com aquele homem de careta horrenda e de cabelos arrepiados. Ningum procura a desgraa para si.Todos procuram felicidade. Quando for criar um banner para sua empresa, pense bem nessa idia. No caso do exemplo, o criador do banner deveria ter centrado sua mensagem inicial na tranqilidade e paz que o cliente poder ter com o software de proteo Windows. A imagem deveria transmitir isso, acompanhado de uma mensagem agradvel e positiva como Fique em paz com seu computador ou algo do tipo. necessrio dar ao positiva ao espectador do banner, criando uma boa expectativa, mostrando que ele poder encontrar uma feliz soluo para seu problema. 2. Esquea o Anuncie Aqui!
________________________________________________________________________________________ Anotaes
51
Esse tipo de mensagem no traz o resultado esperado na maioria das vezes. D uma idia de desespero, de que o veculo no funciona e que por isso est sem anunciantes. Uma idia dar uma degustao ao anunciante. D a oportunidade de experimentao, onde o anunciante poder anunciar por um determinado nmero de dias, cliques ou visualizaes. Se a empresa anunciante obtiver resultados satisfatrios com esses anncios, com certeza continuaro com a campanha pagando pelo espao. 3. Oferea Tamanhos de Banners Diferenciados e Solues Criativas de Espao. Os departamentos de publicidade de jornais e revistas, encarregados de encontrar novas solues para o mercado publicitrio vem implementando nos ltimos dez anos novos formatos de anncios onde se quebrou uma srie de limites. Hoje os anunciantes podem bolar anncios de diferentes formatos, saindo do padro retangular. O mesmo pode ser aplicado a web. necessrio oferecer novos espaos para anncios on-line, como os banners em flash que flutuam sobre a pgina. Para os criadores de banners, bom apostar nos anncios interativos, onde se tem brincadeiras ou revelaes feitas atravs do clique do usurio. A interao a tendncia. 4. Cuidado com o Peso dos Banners. J vi banners por a com 200Kb de grandes empresas que travavam toda a pgina por vrios minutos at o banner carregar totalmente. Sugesto: um banner de tamanho mdio, como os de 468X60, deve ter de 10 a 15kb. Os banners flash podem chegar aos 20kb, pois o mesmo mostrado medida que vai carregando, no travando a pgina. 5. Evite Histrias Longas. Seja objetivo. Provoque curiosidade, mas no prolongue o roteiro. So poucos segundos de efeito onde voc poder passar sua mensagem com eficincia.
________________________________________________________________________________________ Anotaes
52
Unidade 9 Animando Imagens para Web

9.1 A Paleta Animation
A animao no Photoshop CS3 feita atravs da paleta Animation. Na animao as figuras so colocadas em vrias camadas, cada uma delas com uma imagem que compe a ao, e tambm so dispostas em seqncia. Um mecanismo de repetio faz com que os quadros apaream um aps o outro e assim simulem o movimento, dando a iluso de continuidade. Nessa paleta encontram-se todos os comandos necessrios para criarmos uma animao.
Clicando no boto Convert to Timeline Animation desta paleta:
vemos o outro formato
________________________________________________________________________________________ Anotaes
53
Embora no ostente a versatilidade do Flash e de outros sistemas de animao poderosos, os Gifs animados so fceis de criar, ocupam pouco espao em arquivo e podem dar um toque original em nossas pginas Web, podendo ser feitos no Photoshop. 1- Crie um novo arquivo no Photoshop. 2- Desenhe um crculo vazado em formato de shape.
3- Escreva um nmero 1 com fonte Arial Black de tamanho 250 pixel no meio do crculo:
________________________________________________________________________________________ Anotaes
54
4- Agora, duplique esta layer, escrevendo 2. Repita esse procedimento at chegar ao nmero 5:
________________________________________________________________________________________ Anotaes
55
5- Desabilite a visualizao de todas as layers, deixando somente a layer que contm o circulo com visualizao e a que contm o nmero 1:
________________________________________________________________________________________ Anotaes
56
6- Selecione a layer que contm o crculo e escolha a opo de menu: Layer > Rasterize Layer. Isso far com que o shape vire uma imagem bitmap: 7- Habilite a visualizao de todas as layers e clique no menu pop-up da paleta animation escolhendo a opo: Make Frames From Layers:
________________________________________________________________________________________ Anotaes
57
Veja como ficou nossa paleta animation:
8- Para que o crculo fique visvel em todos os frames habilite a sua visualizao na paleta Layers:
9- Com a layer Background selecionada clique no menu pop-up da paleta Animation e escolha a opo: Match Layer Across Frame, deixando marcados todos os itens da janela Match Layer :
________________________________________________________________________________________ Anotaes
58
10- Delete os dois primeiros frames da paleta Animation:
Ao deletarmos os frames da paleta animation no estaremos deletando as layers. 11- No menu pop-up da paleta clique em Reverse Frames para invertemos a ordem dos frames:
12- Selecione todos os frames e no cone dos segundos escolha a opo de 1.0 Clicando no boto de Plays Animation podemos ver a animao. 13- Clique no boto Convert to timeline animation, localizado no lado direito da paleta, para vermos o outro formato desta paleta:
________________________________________________________________________________________ Anotaes
59
13- Clique no menu pop-up da paleta e escolha a opo: Document Settings, marcando 1 frame por segundo:
14- Com todas as layers visveis, selecione somente as layers que contm os nmeros:
________________________________________________________________________________________ Anotaes
60
14- Clique no menu pop-up da paleta e escolha a opo: Make Frame for Layers. Veja como ficou nossa paleta animation:
________________________________________________________________________________________ Anotaes
61
Agora s exportar nossa animao para o formato Gif.
________________________________________________________________________________________ Anotaes
62
Unidade 10 Criando Slices/Fatias

10.1 Criando Fatias
As fatias so reas de uma imagem definidas com base em camadas, guias ou selees precisas ou usando-se a ferramenta Slice. Quando voc define as fatias de uma imagem, o Photoshop CS3 cria uma folha de estilo em cascata, ou uma tabela HTML que retm e alinham as fatias. Se desejar, voc pode gerar um arquivo HTML que contenha a imagem fatiada junto com a folha de estilo em cascata, Div ou Tabela. Voc pode utilizar a ferramenta Slice para criar fatias retangulares na imagem. As fatias criadas com essa ferramenta so chamadas de fatias da usurio. Quando voc cria uma fatia de usurio em uma imagem, o Photoshop CS3 cria autofatias para todas as reas indefinidas em torno da fatia de usurio. 1- Abra o arquivo personal_page.psd na pasta site que esta na pasta da Lio:
2- Selecione a ferramenta slice , com esta ferramenta criamos as fatias e com a slice select selecionamos as fatias. 3- Desabilite, atravs do painel layers, os textos. Veja a imagem abaixo: 4- Clicando e arrastando com o boto esquerdo do mouse faa uma fatia na parte superior do layout, como na imagem abaixo:
5- Para vermos as opes da fatia selecione a slice select clique sobre ela. Abrir uma janela como na figura abaixo:
e d um duplo
________________________________________________________________________________________ Anotaes
63
Slice type: se estiver selecionada a opo Image a fatia ser exportada como imagem e se for opo de No Image a fatia s constar como preenchimento no programa, mas no ser exportada. Name: o nome da fatia, que poder ser alterado. O photoshop automaticamente coloca o nome da fatia (que o nome do arquivo psd) e um nmero. URL: link para aonde aquela fatia vai apontar, se for necessrio. Target: de que forma ser carregado este link pelo navegador. Ex: _blank Alt tag: o texto alternativo, quando passado o mouse sobre este link aparecer o que for digitado neste campo. Dimensions: X/Y posio na tela e W/H largura e altura da fatia, respectivamente. 6- Para esta fatia coloque o nome de topo. 7- Agora iremos comear a fazer as outras fatias. Faa uma fatia abrangendo a parte que contm o menu e outra para a parte da flor no lado esquerdo. Veja a imagem:
________________________________________________________________________________________ Anotaes
64
8- Coloque um nome para cada fatia criada, clicando em cima dela com a ferramenta Slice Select. 9- Observe a imagem abaixo e veja como foram criadas as fatias: Lembre-se quem define a criao das fatias voc, elas podem ser feitas de forma diferente, tambm, dependendo como ser montado o layout no Dreamweaver CS3. Importante: No esquea de dar nome s fatias, de conferir se nenhuma fatia esta sobreposta outra e se a soma das larguras das fatias est coincidindo. Cada detalhe importante para que no haja erros na montagem do layout com Divs. 10- Nas fatias que ficaram ao redor do layout (em cinza) selecione-as e marque a opo No Image. Repita este procedimento para as duas fatias que ficaram dentro do layout, tambm.
10.2 Salvando os Arquivos

11- Com as fatias prontas vamos export-las. Clique no menu File > Sabe For Web & Devices. Abrir a janela para escolhermos qual o formato da imagem queremos exportar. Para cada fatia podemos configurar a qualidade da imagem e seu formato (jpg ou gif). 11- Clique em Save: 12- No item Settings escolha a opo Other e desmarque a opo Put Image in Folder:
________________________________________________________________________________________ Anotaes
65
13- Escolha o diretrio site/imagens para salvar estes arquivos.
________________________________________________________________________________________ Anotaes
66
Observe que na pasta imagens nossos arquivos j esto salvos:
10.3 Salvando como HTML e Imagens

Podemos exportar nosso layout como HTML e imagens, deixando que o Photoshop crie para ns o arquivo HTML. 1- Clique, novamente, no menu File > Sabe For Web & Devices. 2- No item Nome do arquivo coloque index.html, no item Salvar como tipo escolha opo Html and Images e no item Settings escolha a opo Other escolhendo o item Slices marcando a opo Generate CSS. Observe as imagens abaixo:
________________________________________________________________________________________ Anotaes
67
3- Depois de feitas estas configuraes clique em OK e nosso Html estar salvo. Analise o Html e observe as facilidades de salvar desta forma e suas limitaes. Na pasta imagens temos mais dois arquivos psd que so: nemo.psd e celular.psd. Exercite o fatiamento nesses dois layouts.
________________________________________________________________________________________ Anotaes
68
________________________________________________________________________________________ Anotaes
69
Unidade 11 Montagem do Layout com Divs

11.1 Usando Div Tag
A forma ideal na montagem de um layout que contenha textos e imagens usando a opo de Div Tag. 1- Abra o Dreamweaver CS3 e crie um arquivo Html novo. Salve-o como index.html na pasta site. 2- No menu Site > New Site crie um site para que o Dreamweaver mapeie os arquivos. 3- Arraste a imagem topo para o topo da pgina, colocando um texto alternativo para a mesma. 4- Selecione a imagem e clique no cone Insert Div Tag 5- Deixe marcada a opo Wrap around selection e clique no boto New CSS Style:
6- Na opo Advanced escreva o nome do ID como na imagem abaixo:
________________________________________________________________________________________ Anotaes
70
7- Salve este css como site.css na pasta css dentro da pasta site. 8- Na janela CSS Rule Definition marque a largura desta Div, que deve ser a mesma largura da imagem topo.jpg:
Clicando em OK j podemos ver a imagem com a Div ao redor. 9- Posicione o cursor do mouse depois do fechamento da Div Topo e clique no cone Insert Div Tag.
________________________________________________________________________________________ Anotaes
71
10- Escolha o item After tag com a opo <div id=Topo> e clique no boto New CSS Style
11- Coloque o nome deste ID de #LadoEsquerdo. 12- Na janela CSS Rule Definition marque a largura e a altura desta Div, que deve ser a mesma da imagem recortada correspondente parte do Menu com a opo Float: left. Esta Div ir conter toda parte do lado esquerdo do layout. Podemos definir a altura desta Div somando as alturas das duas imagens que ir compor esse lado. 13- Agora, deixe o cursor posicionado no fechamento da Div LadoEsquerdo e clique no cone Insert Div Tag. 14- Coloque o nome deste ID de #Meio. 15- Na janela CSS Rule Definition marque a largura e a altura desta Div, que deve ser a mesma da imagem recortada correspondente parte do Meio do layout com a opo Float: right. Esta Div ir conter toda parte do meio do layout. Podemos definir a altura desta Div somando as alturas das duas imagens que ir compor a parte do meio. 16- Deixe o cursor posicionado no fechamento da Div Meio e insira a imagem correspondente parte de baixo do layout. 17- Selecione a tag Body e insira um Div Tag ao redor da seleo com a largura de 758px e com margin:auto. Veja que o esboo do nosso layout j esta montado:
________________________________________________________________________________________ Anotaes
72
18- Posicione o cursor dentro da Div LadoEsquerdo e insira uma Div Tag. 19- Deixe marcada a opo At insertion point e clique no boto New CSS Style.
20- Coloque o nome deste ID de #Menu

________________________________________________________________________________________ Anotaes
73
21- Na janela CSS Rule Definition marque a largura e a altura desta Div, que deve ser a mesma da imagem correspondente parte do menu. No Item Background image escolha a imagem e marque a opo no-repeat no item Repeat:
22- Posicione o cursor depois do fechamento da Div Menu e clique no cone Insert Div Tag. 23- Escolha o item After tag com a opo <div id=Menu> e clique no boto New CSS Style. 24- Coloque o nome deste ID de #MenuBaixo 25- Na janela CSS Rule Definition marque a largura e a altura desta Div, que deve ser a mesma da imagem correspondente parte de baixo do menu. No Item Background image escolha a imagem e marque a opo no-repeat no item Repeat. Veja como ficou a parte do Lado Esquerdo do layout: 26- Montaremos a parte do meio do nosso layout agora. Deixe o cursor posicionado dentro da Div Meio e insira uma Div Tag. 27- Deixe marcada a opo At insertion point e clique no boto New CSS Style. 28- Coloque o nome deste ID de #MeioFlor.
________________________________________________________________________________________ Anotaes
74
29- Na janela CSS Rule Definition marque a largura e a altura desta Div, que deve ser a compreendida na parte do meio do nosso layout (podemos ir ao Photoshop para ver estas medidas). 30- No Item Background escolha a imagem referente parte de baixo da flor e marque a opo no-repeat no item Repeat, no item Horizontal position escolha a opo right e no item Vertical position escolha bottom.
31- Deixe o cursor posicionado dentro da Div MeioFlor e insira a imagem correspondente parte de baixo da Flor. 32- Para posicionar esta parte da flor selecione a imagem e clique na opo Align: Rigth no painel de propriedades: 33- Deixe o cursor posicionado no fechamento da Div MeioFlor e clique no cone Insert Div Tag. 34- Deixe marcada a opo After Tag <div id=MeioFlor> e clique no boto New CSS Style:
________________________________________________________________________________________ Anotaes
75
35- Coloque o nome deste ID de #BaixoMeio 36- Na janela CSS Rule Definition marque a largura e a altura desta Div, que deve ser a mesma da imagem correspondente a esta parte. No Item Background escolha a imagem e marque a opo no-repeat no item Repeat e na opo Vertical position escolha top.
37- Agora iremos inserir as trs imagens que compem a parte das frutas. Posicione o cursor dentro da Div BaixoMeio e insira a primeira foto: 38- Deixe o cursor posicionado ao lado da foto e insira a segunda foto. Repita este procedimento, tambm, para a terceira foto:
________________________________________________________________________________________ Anotaes
76
39- Vamos posicionar estas fotos. Selecione, no painel CSS, a regra #BaixoMeio e no item Box marque um Padding na opo Top de 71 pixels, diminuindo este valor da opo Height. Veja a imagem abaixo:
Observe como ficou nosso layout: 40- Insira uma regra para a tag Body colocando a cor de fundo no mesmo tom de cinza do layout.
________________________________________________________________________________________ Anotaes
77
Unidade 12 Photoshop CS3 com Dreamweaver CS3
78
12.1 Vinculando um Arquivo PSD no Dreamweaver CS3

Com a verso do Dreamweaver CS3 e do Photoshop CS3 a integrao entre estes dois softwares aumentou bastante, facilitando o nosso trabalho. 1- Abra o arquivo personal_page.psd que esta na pasta site. 2- Expanda a pasta bem vindo dentro do arquivo psd.
3- Selecione a ferramenta Rectangular Marquee e selecione a foto de cima que est no layout: 4- Deixe selecionada a miniatura da layer que contm a foto:
5- Clique no menu Edit > Copy. 6- Selecione o menu File > New. Automaticamente este novo documento vir com o tamanho na imagem selecionada.
________________________________________________________________________________________ Anotaes
79
7- Agora clique em Edity > Paste e nossa imagem j estar em um arquivo separado: 8- Salve esta imagem como foto1.psd na pasta da lio. 9- Retorne ao Dreamweaver e deixe o cursor posicionado dentro da Div MeioFlor. 10- Clique no cone Insert Image na pasta da lio. e escolha o arquivo foto1.psd que esta salvo
Automaticamente abrir a caixa de dilogo Image Preview: Nesta caixa podemos configurar a imagem no formato que desejarmos. Depois de configurado s clicar em OK. 11- Salve este arquivo como imagem1.jpg na pasta da lio. Nossa imagem j estar aparecendo no arquivo index.html, com algumas diferenas como: - Podemos editar esta imagem pelo Dreamweaver CS3 a qualquer momento atravs do Photoshop na opo Edit.
Automaticamente o Photoshop CS3 abrir a imagem correspondente para fazermos algumas modificaes, se necessrio. 12- Repita estes mesmos procedimentos para a segunda foto. Observe como ficar nosso arquivo index.html:
________________________________________________________________________________________ Anotaes
80
12.2 Usando o Comando Copy Merge

Com a integrao dos softwares da Adobe podemos copiar e colar imagem, por exemplo, de um programa para outro sem termos que, necessariamente, salvar o arquivo e depois inseri-lo atravs do comando correspondente. 1- Deixe o arquivo index.html aberto no Dreamweaver. 2- Abra o arquivo foto1.psd, que usamos na lio anterior. Lembre-se que podemos, tambm, pedir para Editar o arquivo psd atravs do Dreamweaver clicando no boto correspondente . 3- Com o arquivo foto.psd aberto, escreva o texto Ana em cima da foto: Podemos colocar algum efeito, se necessrio. Neste arquivo temos, agora, mais de uma layer. Ficamos com trs camadas: uma de background, uma da foto e a outra com o texto. Agora iremos usar o comando Copy Merge do Photoshop CS3. 4- Clique em Select > All. 5- Agora clique no menu: Edit > Copy Merged e estaremos copiando e mesclando todas as informaes deste psd. 6- Retorne ao Dreamweaver CS3 e selecione a imagem. 7- Clique no menu: Edit > Paste. Observe que a imagem foi colada com as informaes de texto que estavam em outra camada do Photoshop CS3: Isso somente acontece porque optamos pelo comando Copy Merged no Photoshop CS3. 8- Repita esses procedimento para a outra foto.
________________________________________________________________________________________ Anotaes
81
12.3 Inserindo os Textos

Agora falta colocarmos os textos para o menu e para a parte do meio do nosso layout. 1- Selecione a Div Menu e escreva dentro dela os quatro itens do menu: Quem Sou, Galeria de Fotos, Meus Amigos e Meus Hobbies com uma quebra de linha entre os textos (</br). 2- Coloque um sinal de # no item Link para cada texto do menu:
3- Crie uma nova regra marcando a opo Class e colocando no Name:LinkMenu:
4- Na janela CSS Rule Definition marque as opes como na imagem:
________________________________________________________________________________________ Anotaes
82
5- Agora, crie uma nova regra marcando a opo Advanced colocando o Selector como na imagem:
6- Aplique esse estilo para cada um dos itens do menu. Agora falta posicionarmos corretamente o menu. 7- Na aba CSS Style clique em cima da regra Menu e pea para edit-la. 8- Marque no item Box o Padding (esse valor pode variar de acordo com o tamanho da Div) como na imagem abaixo, lembrando de diminuir da largura (Width) e da altura (Heigt) os pixels correspondentes:
________________________________________________________________________________________ Anotaes
83
Veja o resultado: 9- Com os conhecimentos adquiridos at agora tente colocar o texto na Div MeioFlor formatando-o com estilos CSS.
________________________________________________________________________________________ Anotaes
84
Unidade 13 Photoshop CS3 com Flash CS3
85
13.1 Importando um arquivo psd para o Flash CS3

Novamente, a grande novidade entre estes dois softwares a sua integrao e compatibilidade, principalmente em relao a sua Layers. 1- Abra o arquivo site_flash.psd que esta na pasta imagens. Neste arquivo temos vrias layers, as quais sero preservadas na importao para o Flash CS3.
2- Inicialize o Flash CS3 e pea para criar um novo: Flash File (ActionScript 3.0). 3- Salve este arquivo fla na pasta da lio. Agora iremos importar nosso arquivo psd para dentro do Flash CS3 4- Selecione o menu: File > Import > Import to Stage e escolha o arquivo site_flash.psd que esta na pastas imagens. Automaticamente abrir a uma caixa de dilogo para otimizarmos as layers na nossa importao:
________________________________________________________________________________________ Anotaes
86
5- Clique em cima na primeira layer, que a que contm texto: Ao lado direito da janela abrir algumas opes para podermos configurar para esta layer: 6- Marque a opo: Editable text, para que possamos editar o texto no Flash CS3. As opes: - Create move clip for this layer, se quisermos criar um movieclip nesta layer de texto, j o instanciando. - Publish Settings, refere-se compresso que teremos ou no nesta Layer.
________________________________________________________________________________________ Anotaes
87
7- Clique na segunda layer de texto e marque a opo: Editable text, tambm. 8- Clique na terceira layer e marque a opo: Flattened bitmap image. Iremos achatar esta layer.
________________________________________________________________________________________ Anotaes
88
9- Clique nas prximas layers e v configurando-as. 10- Na ltima layer, que a de Background deixe desmarcado para no a importarmos para dentro do Flash.
11- Nas opes abaixo deixe marcadas as opes: Place layers at original position e Set stage size to same size as Photoshop canvas:
Automaticamente nosso arquivo no Flash CS3 assumir o mesmo tamanho do arquivo psd importado e as layers do Flash ficaram na mesma posio que as layers do Photoshop. 12- Ao final clique em OK. Com o nosso arquivo psd importado, podemos observar como ficaram as layers no Flash CS3:
________________________________________________________________________________________ Anotaes
89
Observe que: - O mesmo nome que estava no Photoshop CS3 ficou para as layers do Flash CS3; - A pasta que continha um grupo de layers tambm veio da mesma forma que estava no Photoshop; - Os textos que exportamos como editveis vieram como: Static text; - O nome de instncia de cada objeto o nome da sua respectiva layer, a no ser que voc tenha marcado que a layer fosse do tipo movieclip e instanciasse o mesmo; - Veja que no Flash CS3 temos um boto ocult-la. esquerda abaixo na timeline para
Agora s usarmos a imaginao e partir para as animaes.
________________________________________________________________________________________ Anotaes
90
Unidade 14 Dreamweaver CS3 com Flash CS3
91
14.1 Editando um Swf a partir do Dreamweaver CS3

Para esta lio vamos ficar somente com o Dreamweaver CS3 aberto. 1- Abra o arquivo index.html que esta na pasta Vdeo. 2- Insira um pargrafo depois da palavra profissionais.
Agora iremos inserir nosso arquivo swf. 3- Clique em: Insert > Media > Flash ou clique no cone de atalho 4- Selecione o arquivo videos.swf que esta na pasta vdeo. 5- Coloque o nome para a tag de acessibilidade de Vdeo. Observe que nosso arquivo j est inserido na pgina html. 6- Selecione o arquivo swf e na opo align escolha: Rigth. .
7- Para ver o arquivo em execuo clique no Play.
________________________________________________________________________________________ Anotaes
92
2008 Alfamidia Prow LTDA.
Agora iremos modificar nosso arquivo swf a partir de seu arquivo fla. 8- Clique no boto Edit:
Automaticamente o Flash CS3 ser inicializado e o programa perguntar para ns qual arquivo fla corresponde ao swf. 9- Selecione o arquivo videos.fla Com o Flash CS3 aberto podemos notar que na parte de cima est habilitado o boto Done demonstrando que estamos editando este fla atravs do Dreamweaver CS3:
10- Insira um texto em uma nova Layer. 11- Com as alteraes finalizadas clique no boto Done.
________________________________________________________________________________________ Anotaes
93
O Flash ir exportar o arquivo swf automaticamente, como se tivssemos clicado em Ctrl + Enter. Para ver as alteraes clique no boto Play do Dreamweaver CS3:
________________________________________________________________________________________ Anotaes
94
Unidade 15 Fazendo seu Prprio Layout

15.1 A Importncia de um Porfiflio Online
A Internet, por ser um meio relativamente fcil de ser acessado hoje em dia, tornou-se um dos principais setores de divulgao de escritrios, empresas e pessoas. E, tambm, tornou-se uma segunda alternativa na busca por empregos e servios. Especialmente para um profissional que trabalha com artes grficas e visuais, ter um portiflio na Internet absolutamente indispensvel nos dias de hoje. Ele uma ferramenta para o profissional demonstrar suas habilidades em dominar aquele espao e se comunicar com seus visitantes. Mais do que um resumo dos trabalhos, o portiflio encarna seu autor: a sua representao numa situao onde ele (o profissional) no pode estar presente fisicamente. Um portiflio corresponde ao conjunto de trabalhos, (que, dependendo da qualidade e quantidade, podem ser todos ou apenas alguns pr-selecionados) de uma empresa, escritrio ou profissional, organizados geralmente em ordem decrescente de data ou publicao (do mais recente ao mais antigo, por ordem de prioridade) e que funcionam, essencialmente, como meio de anlise e comparao do nvel de profissional pelo leigo ou interessado em contratar os servios.
15.2 O que Divulgar?

Uma das grandes vantagens de um portiflio online esta na possibilidade de se trabalhar com as informaes em trs vertentes: - Visuais; - Audiovisuais; - Textuais Os trabalhos devem falar por si s, porm contendo dados como: data, tipo, contratante, conceito, tamanho e material utilizado, que so fundamentais para
________________________________________________________________________________________ Anotaes
95
auxiliar o visitante a compreender o que est exposto. importante relembrar que o portiflio ser avaliado sem a presena do autor. Tambm recomendado que o profissional demonstre como foi todo o processo de elaborao do projeto, desde a requisio do cliente at o resultado final obtido. Isso demonstra a metodologia de trabalho do designer. fundamental que fique claro quais foram s pessoas que estiveram envolvidas no projeto (se houver), fornecendo os crditos devidos a esses profissionais. Isso vale para avaliar a tica do designer quanto ao seu trabalho e dos outros. Se no descrevermos exatamente o projeto quem visitar o portiflio vai achar que o profissional fez tudo. E a teremos uma falha grande de comunicao. melhor sermos honestos, deixando claro at aonde vo nossas experincias.
15.3 Alguns Critrios na Seleo dos Trabalhos

- Selecionar os trabalhos a serem vinculados, tendo o cuidado de apresentar projetos que reflitam: criatividade, habilidade, talento, conhecimento cultural, percepo e capacidade de soluo de problemas; - Definir mtodos para classificao e indexao dos itens: ano, cliente, tipo de projeto, etc.; - Quais suportes utilizar: fotografias, animaes, vdeos, arquivos digitais, etc.; - Outro ponto est no tipo de foco dos trabalhos apresentados, pois eles devem representar os segmentos que o profissional deseja atuar. O que o designer mais gosta? O que o inspira? - Uso correto da ortografia e gramtica. Como muitas vezes, o texto entra como imagem, o ideal pedir a algum que o revise antes da publicao. - Cuidado nos detalhes do layout como: imagens bem cortadas, grficos com curvas suaves, alm de pitadas de criatividade para atrair a ateno dos visitantes. Lembres-se que desenvolver um portiflio criativo esta longe de representar apresentaes recheadas de tcnicas desnecessrias. Cuidado para no forar demais e no bolar navegaes mirabolantes. Ento vale a pena ficar atento como se quer ser percebido e refletir isso na apresentao de seus trabalhos.
________________________________________________________________________________________ Anotaes
96
Veja alguns bons exemplos:
________________________________________________________________________________________ Anotaes
97
Agora a sua vez... Na pasta da lio disponibilizamos trs temas: Um site para um consultrio de advocacia, um para uma escola de educao infantil e site para uma floricultura. O tema, tambm, poder ser escolhido por voc. Tema1: Consultrio de Advocacia
Siga o roteiro abaixo para facilitar a construo do seu layout: 1. Tema: __________________________________________________________ 2. Quais os principais objetivos do site: __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ 3. Quem o pblico-alvo? __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________
________________________________________________________________________________________ Anotaes
98
4. Existe j um contedo para o site? __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ 5. Imagens e Fotografias j esto disponveis para o site? __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ 6. Qual a aparncia desejada para o site? Exemplos e referncias. __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ 7. Quais sero os concorrentes para o site? Possuem site? Qual? __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ 8. Qual ser a diferenciao que o site ter em relao a seus concorrentes? __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ 9. Quais os itens inicialmente previstos para o site? (esquema inicial) __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ 10. Qual o tempo previsto para a concluso do site? __________________________________________________________________ __________________________________________________________________
________________________________________________________________________________________ Anotaes
99
__________________________________________________________________ __________________________________________________________________ RAFT-ZONE
________________________________________________________________________________________ Anotaes
100
________________________________________________________________________________________ Anotaes
101
________________________________________________________________________________________ Anotaes
102
Tema2: Escola de Educao Infantil
Siga o roteiro abaixo para facilitar a construo do seu layout: 1. Tema: __________________________________________________________ 2. Quais os principais objetivos do site:
________________________________________________________________________________________ Anotaes
103
__________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ 3. Quem o pblico-alvo? __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ 4. Existe j um contedo para o site? __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ 5. Imagens e Fotografias j esto disponveis para o site? __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ 6. Qual a aparncia desejada para o site? Exemplos e referncias. __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ 7. Quais sero os concorrentes para o site? Possuem site? Qual? __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ 8. Qual ser a diferenciao que o site ter em relao a seus concorrentes? __________________________________________________________________ __________________________________________________________________
________________________________________________________________________________________ Anotaes
104
__________________________________________________________________ __________________________________________________________________ 9. Quais os itens inicialmente previstos para o site? (esquema inicial) __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ 10. Qual o tempo previsto para a concluso do site? __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ RAFT-ZONE
________________________________________________________________________________________ Anotaes
105
________________________________________________________________________________________ Anotaes
106
________________________________________________________________________________________ Anotaes
107
________________________________________________________________________________________ Anotaes
108
Tema3: Floricultura
________________________________________________________________________________________ Anotaes
109
Siga o roteiro abaixo para facilitar a construo do seu layout: 1. Tema: __________________________________________________________ 2. Quais os principais objetivos do site: __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ 3. Quem o pblico-alvo? __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ 4. Existe j um contedo para o site? __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ 5. Imagens e Fotografias j esto disponveis para o site? __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ 6. Qual a aparncia desejada para o site? Exemplos e referncias. __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ 7. Quais sero os concorrentes para o site? Possuem site? Qual? __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________
________________________________________________________________________________________ Anotaes
110
8. Qual ser a diferenciao que o site ter em relao a seus concorrentes? __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ 9. Quais os itens inicialmente previstos para o site? (esquema inicial) __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ 10. Qual o tempo previsto para a concluso do site? __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ RAFT-ZONE
________________________________________________________________________________________ Anotaes
111
________________________________________________________________________________________ Anotaes
112
________________________________________________________________________________________ Anotaes
113
________________________________________________________________________________________ Anotaes
114
________________________________________________________________________________________ Anotaes
115

Layout Sites

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Layout Sites

Enviado por

Direitos autorais:

Formatos disponíveis

Alfamdia Design Layout de Sites

Alfamdia Design: Layout de Sites

Todos os direitos reservados para AlfamdiaProw LTDA.

Alfamdia Prow LTDA (51) 3073-2100 http://www.alfamidia.com.br

2008 Processor Alfamidia LTDA.

Alfamdia Design: Layout de Sites

Alfamdia Design: Layout de Sites

UNIDADE 1 1.1 1.2 UNIDADE 2

2008 Processor Alfamidia LTDA.

UNIDADE 11 11.1 UNIDADE 12 12.1 12.2 12.3

USANDO DIV TAG .......................................................................................................................... 70

UNIDADE 13 13.1 UNIDADE 14 14.1 UNIDADE 15 15.1 15.2 15.3

IMPORTANDO UM ARQUIVO PSD PARA O FLASH CS3 ...................................................................... 86

EDITANDO UM SWF A PARTIR DO DREAMWEAVER CS3 .................................................................. 92

2008 Processor Alfamidia LTDA.

Alfamdia Design: Layout de Sites

Unidade 1 Alfamdia Design: Layout de Sites

1.1 Sobre o Curso

1.2 Estrutura do Curso

2008 Processor Alfamidia LTDA.

Alfamdia Design: Layout de Sites

Unidade 2 A Profisso de Web Designer

2008 Processor Alfamidia LTDA.

Alfamdia Design: Layout de Sites

2.1 O Processo de Desenvolvimento de Websites

2008 Processor Alfamidia LTDA.

Alfamdia Design: Layout de Sites

Criao Levantamento de dados

2008 Processor Alfamidia LTDA.

Alfamdia Design: Layout de Sites

2.2 Estudo de Caso: Inovao em Produtos de Mdia Interativa

2008 Processor Alfamidia LTDA.

Alfamdia Design: Layout de Sites

2008 Processor Alfamidia LTDA.

Alfamdia Design: Layout de Sites

2008 Processor Alfamidia LTDA.

Alfamdia Design: Layout de Sites

2.2.1 Metodologia do Projeto

2008 Processor Alfamidia LTDA.

Alfamdia Design: Layout de Sites

2008 Processor Alfamidia LTDA.

Alfamdia Design: Layout de Sites

Unidade 3 Teorias do Design aplicadas na Web

2008 Processor Alfamidia LTDA.

Alfamdia Design: Layout de Sites

3.1 Atrao Condicional

2008 Processor Alfamidia LTDA.

Alfamdia Design: Layout de Sites

2008 Processor Alfamidia LTDA.

Alfamdia Design: Layout de Sites

2008 Processor Alfamidia LTDA.

Alfamdia Design: Layout de Sites

2008 Processor Alfamidia LTDA.

Alfamdia Design: Layout de Sites

3.5.1 Acerte Sempre

2008 Processor Alfamidia LTDA.

Alfamdia Design: Layout de Sites

2008 Processor Alfamidia LTDA.

Alfamdia Design: Layout de Sites

3.5.2 Algumas Recomendaes

2008 Processor Alfamidia LTDA.

Alfamdia Design: Layout de Sites

2008 Processor Alfamidia LTDA.

Alfamdia Design: Layout de Sites