1. Fundamentos de Webdesign

2. PLANEJAMENTO 3. Elementos de uma pgina Web Ttulos Links Rtulos Imagens Rodaps Tabelas udio Vdeo Formulrios 4. Elementos de uma pgina WebDeve-se especificar ttulos para todas as pginas webque se criar. Os ttulos ajudam os internautas aidentificar a pgina, a fazer procuras mais precisas emum banco de dados e, tambm a gerenciar asinformaes.Rodaps servempara fornecerinformaesadicionais. Pode-se exibir informaes sobre o autorda pgina, mensagens de copyright e links para outraspginas 5. Elementos de uma pgina WebRtulos servem para organizar a informao da suapgina web de maneira eficiente. Os rtulos ajudama identificar sees e tpicos nos seus documentos.J as tabelas so utilizadas, principalmente, paraorganizar a apresentao das informaes napgina.Formulrios servem para darinteratividade,coletando informaes dos usurios 6. Formas de NavegaoNavegao Linear: usada para apresentar informaes quepossuem uma sequncia que deve ser obedecida. Por exemplo, umaapresentao web sobre a instalao de uma aplicao contm umasrie de passos sequenciais que o usurio deve seguir.Links necessrios numa navegao linear: Da pgina pricipal para os tpicos que ela contm Dos tpicos para a pgina principal Para a prxima pgina Para a pgina anterior 7. Formas de NavegaoNavegao Linear Exemplo:http://www.ccuec.unicamp.br/treinamento_int2004/conf_webpages_basico/pagina1.html 8. Formas de NavegaoNavegao linear com alternativa: necessrio todos os links que se usa para navegarlinearmente e de outros links que vo interligar aspginas web alternativas. Por exemplo: umapgina que descreve a instalao de um softwareem sistemas Windows e Linux, usa-se anavegao linear para os passos em comum elinks alternativos para a instalao especfica decada sistema. 9. Formas de NavegaoNavegao Hierrquica: usada para demonstrar informaes estruturadas. O webdesignerespecifica as informaes gerais no topo da hierarquia e as especficas por ltimo.Fornece-se os mesmos links que usa em uma navegao linear. Na hierrquica, o link para aprxima pgina est conectado ao prximo nvel da hierarquia, da mesma forma como um linkpara a pgina anterior est conectado ao nvel anterior da hierarquia.Deve-se restringir a apresentao web para trs nveis de hierarquia, diminuindo o risco degerar confuso, por parte dos internautas.Os internautas no podem navegar de uma pgina pertencente a uma categoria para outra decategoria diferente. Por exemplo, um internauta no pode acessar uma pgina de animaisherbvoros quando est em uma pgina de carnvoros. 10. Formas de NavegaoNavegao Hierrquica Exemplo de site:portal.mec.gov.br 11. Formas de NavegaoCombinando navegaes hierrquica elinear: quando se quer deixar que osinternautas naveguemporpginaspertencentes a outras categorias sem ter devoltar ao ndice. A combinao de navegaolinear e hierrquica permite ao internautanavegar tanto sequencialmente quantohierarquicamente pela sua apresentaoweb. 12. Tcnica do StoryboardingStoryboarding a etapa em que voc faz o esbooda sua apresentao e estuda a aparncia de cadapgina web.O storyboarding ajuda voc a decidir quais tpicosdevem constar em cada pgina e a identificar oslinks entre as pginas. 13. Quantidade e tamanho de tpicosNo storyboarding necessrio considerar aquantidade de tpicos e o tamanho de cada umdeles. Uma regra simples exibir somente um tpicopor pgina web. Ser preciso ignorar esta regra casose tenha um grande nmero de tpicos para exibir.Quando h uma grande quantidade de tpicos, recomendvel a criao de pequenos gruposrelacionados em uma nica pgina. 14. Storyboarding nesta etapa que se deve determinar as diferentesformas de navegao ou interligao das pginas.Tambm necessrio definir os links (avanar,voltar, subir ou descer), tanto na hierarquia quantopara a pgina principal. Este o momento paradefinir outros links, para qualquer outra informaoextra que voc pretenda adicionar. 15. DESIGN DE INTERFACES 16. Princpios de design visualCLAREZA: refere-se a projetar pginas que so simples e ordenadas. Para isto, precisoapresentar todos os elementos da pgina, como textos e imagens, nos lugares certos.Para assegurar a clareza preciso usar umalinguagem simples e inserir na pgina somente tpicos e imagens relevantes. 17. Princpios de design visual CONSISTNCIA o segundo princpio dodesign visual. Refere-se a estabelecer ou adotar um estilo para apresentao web, de maneira uniforme. Exemplo, para fazer pginasconsistentes, adicione o rodap no mesmo localem todas as pginas. CONCISO o terceiro princpio e se refere aapresentar a informao necessria com o mnimo de palavras possveis. 18. Tamanho da pginaSe as informaes da pgina no couberem na tela, osusurios podem usar a barra de rolagem para visualizartodo o contedo.Entretanto, isso faz com que a informao seja umpouco mais difcil de ser assimilada, pois precisolembrar das informaes que saram da tela. recomendvel limitar o tamanho da pgina para duasou trs telas de informao, no formato 1024 X 768pixels. Isso assegura que o usurio no precise rolar atela muitas vezes. 19. Tamanho da pginaO ideal que todos os contedos relacionados estejamem uma pgina, o que torna muito mais fcil aatualizao e o gerenciamento.Se houver muita informao para exibir, o ideal agrupar os tpicos relacionados em uma pgina e fornecer links para outras pginas. 20. Leitura mais agradvel Se houver muita informao para exibir, o ideal agrupar os tpicos relacionados em uma pgina efornecer links para outras pginas.Pode-se tornar a pgina mais atraente se balancear aquantidade de texto e imagens no lado esquerdo e direito e nas metades de cima e de baixo da pgina,tornando-as mais simtricas. 21. Organizao de pginas webAdicionar ttulos e rtulos para descrever o contedo de cada pgina web. Agrupar elementos relacionados, desenhar caixas aoredor dos elementos e usar as mesmas fontes parattulos parecidos. 22. Fatores que afetam alegibilidade da pginaCaracteres Maisculos: letras maisculaspodem ser usadas nos ttulos para chamar aateno do usurio. Mas deve-se evitar autilizao de letras maisculas nos textos, poisreduz a legibilidade. Abreviaes: deve-se usar abreviaes depadro universal ou acrnimos somente quandoo espao em branco na sua pgina web forlimitado. Avenida Av.; Nmero N; Limitada Ltda.; Departamento Dep.; Pgina pg 23. Formulrios e Botes Tipos de formulrios: de preechimento de lista de opes Livre Como um formulrio formado ?Um formulrio formado por rtulos e camposde entrada.Os rtulos descrevem os dados que serodigitados.Campos de entrada so as reas nas quais ousurio digita as informaes correspondentesa cada rtulo 24. Formulrios e BotesO formulrio onde o internauta digita os dadosmanualmente chamado de formulrio depreenchimento. Por exemplo, no formulrio exibidoabaixo, o internauta precisa digitar os valorespedidos. 25. Formulrios e BotesUm formulrio onde o internauta seleciona um valor entrevrias opes chamado de formulrio de lista de opes.O formulrio onde o internauta pode digitar livremente comoem um processador de texto chamado de formulrio livre.Para projetar um formulrio de maneira eficiente, vocprecisa antecipar a necessidade do internauta.Para isto, precisar saber a frequncia e sequncia dastarefas que ele executa.Dependendo da natureza das tarefas que ele executa, vocadicionar rtulos, tabelas e links ao seu formulrio. 26. Formulrios e BotesAdicionar uma tabela no seu formulrio aumenta aeficincia, j que pode-se receber pedidos de mais de umitem usando o mesmo formulrio.Dois elementos importantes para fazer o projeto de umformulrio so os rtulos e campos de entrada. 27. Formulrios e BotesAlm de projetar rtulos consistentes, nicos, e que possamser entendidos, preciso tambm organizar os campos demaneira eficaz.Faz-se necessrio alinhar os rtulos para assegurar quetodos terminem no comeo das suas respectivas caixas deentrada. E colocar o rtulo de maneira consistente, aesquerda ou acima da caixa de entrada 28. Formulrios e BotesOs campos relacionados devem ser agrupados usandocolunas. Por exemplo, Nome, Endereo e Telefone juntoscomo se fossem um grupo lgico de informao. precisoarrumar os campos tanto na horizontal, da esquerda paradireita, quanto na vertical, de cima para baixo. 29. Formulrios e BotesUm boto um objeto que faz alguma coisa quando ativado. Por exemplo, quando voc clica no boto, voc vuma pgina que contm informaes na web.Um boto projetado dependendo da informao que sequer enviar ao internauta. 30. Formulrios e BotesPode-se exibir a ao associada com um boto mostrandouma mensagem quando o internauta move o mouse sobreo boto. Por exemplo, quando se move o mouse sobre oboto Qu, aparece uma mensagem dizendo Portal deQumica.Os botes que voc adiciona precisam estar de acordo como design da sua pgina web. 31. BotesTentar projetar botes que se possa reutilizar naapresentao web. Isso reduz a quantidade de imagens ecdigos a necessrios, alm de tornar sua pgina webconsistente.Usar formas regularesPode-se adicionar sons para acompanhar o clique de umboto.Os botes precisam ser consistentes. Por exemplo, voltarao normal depois de clicado quando a ao associada aoboto for executada. 32. BotesPode-se exibir a ao associada com um boto mostrandouma mensagem quando o internauta move o mouse sobreo boto. Por exemplo, quando se move o mouse sobre oboto Qu, aparece uma mensagem dizendo Portal deQumica. 33. BotesPode-se exibir a ao associada com um boto mostrandouma mensagem quando o internauta move o mouse sobreo boto. Por exemplo, quando se move o mouse sobre oboto Qu, aparece uma mensagem dizendo Portal deQumica.