UNIVERSIDADE FEDERAL DE SANTA MARIA - UFSM COLGIO AGRCOLA DE FREDERICO WESTPHALEN WEB DESIGN I

WEB DESIGN I AULA 1

Conceitos de Web Design

DISCIPLINA: WEB DESIGN I PROF.: ROMULO VANZIN

Data: 20/03/2012

APRESENTAO
PROF.: ROMULO VANZIN Formao: Graduao em Cincia da Computao (2007) URI FW Especializao em Desenvolvimento de Sistemas para Internet (2009) URI - FW Experincia profissional

APRESENTAO

Apresentao dos Alunos.

Nome; Cidade; Trabalha

na rea; Objetivo pelo qual est fazendo este curso;

WEB DESIGN I - Ementa

Promover o desenvolvimento da reflexo acerca dos conceitos inerentes rea do Design com nfase em seus aspectos relacionados ao Design para Web. Capacitar o aluno na rea de web design, com domnio da prtica projetual e de desenvolvimento de pginas Web, utilizando aplicativos para criao de sites.

WEB DESIGN I - Contedo programtico

USABILIDADE DOS SITES

Conceitos

sobre design Web. Usabilidade. Design de pgina. Design de contedo.

DESENVOLVIMENTO DE WEB SITES

Conceitos

gerais. Ferramentas. Formatao de texto; Imagens: insero e imagens interativas. Tabelas, layout, molduras.

WEB DESIGN I Avaliao

Avaliao 1
Prova

1 Peso 7 Trabalho 1 Peso 3

Avaliao 2
Prova

2 Peso 7 Trabalho 2 Peso 3

WEB DESIGN I Bibliografia Bsica

DAMASCENO, A. Web Design - Teoria e Prtica. 1. Ed. Florianpolis: Visualbooks, 2003. NIEDERST, J. Aprenda Web Design. 1. Ed. Rio de Janeiro: Cincia Moderna, 2002. NIELSEN, J.; LORANGER, H. Usabilidade na Web Projetando Web Sites com Qualidade. 1. Ed. Rio de Janeiro: Campus, 2007.

AULA 1

Conceitos sobre design Web

OBJETIVOS

O objetivo desta aula da disciplina de Web design I, apresentar os conceitos sibre Design Web. Ser demonstrada uma viso geral sobre os conceitos envolvendo a Design Web. Ao final da aula, espera-se que os alunos tenham compreendido a teoria Design Web.

TPICOS A SEREM ABORDADOS

Introduo Histria do Design Designer Web Designer Layout Navegadores (Browser) Programas (Softwares) Padres Web

INTRODUO

O ser humano sempre teve a necessidade de se comunicar com seus semelhantes, at tal ponto que podemos afirmar que se o homem o ser mais avanado da natureza. As primeiras formas comunicativas foram mediante elementos visuais. Estes elementos se converteram em linguagem ao decorrer dos tempos.

Embora posteriormente a linguagem falada passou a ser o meio de intercmbio de informao mais direto, a linguagem visual continuou tendo um importante peso nas relaes comunicativas, sobretudo a partir do uso de diversos materiais e suportes como meios de "modelar" mensagens visuais,

Pintura rupestre (Cova de Altamira, Espanha)

INTRODUO

Como suporte fsico, foi utilizada inicialmente a pedra, porm, rapidamente se buscaram outros tipos de materiais que permitiram uma maior facilidade de uso e uma maior portabilidade, como os papiros ou os pergaminhos.

Papiro dos mortos

INTRODUO

Johann Gutenberg (1390-1468) -inventou a imprensa Artefato capaz de reproduzir em grandes quantidades e de forma cmoda um original. A sua contribuio foi a da introduo de tipos (caracteres) de metal e o desenvolvimento de tintas base de leo. Aperfeioou uma prensa grfica, inspirada nas prensas utilizadas para espremer as uvas na fabricao do vinho.

INTRODUO

Primeiros livros impressos Importncia da "FORMA" (design) para transmitir uma mensagem 1509 - Hermo de Kempis imprime Ho compromisso e regimento dos officiaes da sancta confraria da Mesericordia.

INTRODUO

Outro grande impulsor do desenvolvimento do design grfico foi a Revoluo Industrial. Surgiram as fbricas e a economia de mercado, um grande nmero de pessoas se deslocou s cidades para trabalhar, aumentaram as lojas e os comrcios e comeou a concorrncia entre empresas por se tornarem uma parte do mercado. Com isso, apareceu e se desenvolveu uma nova tcnica comercial, a publicidade, encarregada de fazer chegar aos consumidores mensagens especficas que lhes convencessem de que um produto dado era melhor que outros anlogos.

DESIGN

Design [Ingl.]

Concepo de um projeto ou modelo; planejamento. O produto desse planejamento.

Convencer o pblico das vantagens de um produto ou marca Mensagens concisas, componentes desenhos bem elaborados Apresentar mensagens visuais efetivas Grandes investimentos, tornando possvel um grande avano nas tcnicas de design e no aparecimento de profissionais dedicados exclusivamente a desenvolvelas e coloc-las em prtica: os designers grficos. psicolgicos,

DESIGN
Design grfico Design de produto Design automobilstico Design de embalagem Design de mobilirio Design de moda .. Com a Internet -> Design Web

Design Grfico

Processo de programar, projetar, coordenar, selecionar e organizar elementos para produzir objetos visuais destinados a comunicar. Funo - transmitir a informao por meio de composies grficas, que chegam ao pblico atravs de diferentes suportes, como folhetos, cartazes etc. O resultado final de um design grfico denomina-se grafismo, e uma unidade por si mesma, embora esteja composto por uma infinidade de elementos diferentes.

Propagandas

Propagandas

Crescimento Web

Segundo pesquisas da Netcraft (empresa especializada em servios Web), registrou que a Internet tem em janeiro de 2012 582.716.657 sites.

http://news.netcraft.com/archives/2012/01/0 3/january-2012-web-server-survey.html

Crescimento Web

Nos ltimos anos, a World Wide Web criou oportunidades nicas para o desenvolvimento de aplicaes. A gama de websites existentes atualmente muito vasta e vai desde uma simples pagina pessoal com informao esttica, ate a sofisticados motores de pesquisa que manipulam bases de dados gigantescas. No meio da gama, existem websites para suportar trabalho colaborativo, comunidades virtuais, e comercio eletrnico, entre outros.

Crescimento Web

Para construir uma aplicao Web com sucesso, tem de se saber um pouco sobre:
a

configurao dos servidores Web sistemas de bases de dados e SQL ser fluente numa linguagem de scripting saber o bsico sobre o protocolo HTTP saber a sintaxe do HTML e saber um pouco sobre design web.

Web Design

Extenso da prtica do design. Foco na criao de web sites. O web design tende multidisciplinaridade, uma vez que a construo de pginas web requer subsdios de diversas reas tcnicas, alm do design propriamente dito.

Web Design

reas como a arquitetura da informao, programao, usabilidade, acessibilidade entre outros. Agregar os conceitos de usabilidade com interface, garantindo que o usurio final atinja seus objetivos de forma agradvel e intuitiva.

Layout

O layout precisa transmitir a informao desejada com eficincia. preciso que o layout seja um elo de comunicao com o usurio, que sua linguagem seja condizente com o objetivo do site.

Layout

Conhecer heursticas de usabilidade fundamental para se gerar layouts para a web. Cada elemento inserido em um website deve ter um objetivo, a perfeio de um website se atinge quando no h nada a ser retirado e no quando no h nada mais a ser inserido.

Navegadores

So programas responsveis por interpretar o contedo de um web site, disponibilizando assim a interface com a qual o usurio final ir interagir. O navegador est para o web design assim como o papel est para o jornal. A grande variedade de navegadores e discrepncia entre os recursos fez seus prprios criadores caminharem em direo a um padro comum. Atualmente indispensvel criar sites seguindo os padres da W3C.

Navegadores

No desenvolvimento do site, o HTML deve ser criado seguindo os padres do W3C (Web Standards) de forma que fique funcional, independente dos dispositivos (TV, celular, impressora, monitor etc). Apesar de em tese no haver a necessidade de testar em diversos navegadores, um bom hbito testar em mais de um navegador (Firefox, Internet Explorer, Netscape, Opera, Safari, Chrome e outros), pois o layout do site pode apresentar diferenas em determinados navegadores, e o usurio que navega no entender o que est acontecendo.

Programas (Softwares)

Existe um leque enorme Qualquer editor de texto H programas com interface grfica
Dreamweaver,Aptana...

Na parte visual, os editores grficos vetoriais

Corel

Draw, Illustratorou ou Inkscape, GIMP e Fireworks ou Photoshop.

Para animaes e recursos dinmicos, o Flash e ... HTML5

Programas (Softwares)

Em relao ao Flash, deve-se ter o cuidado de us-lo apenas onde a soluo seja impossvel de ser reproduzida em HTML, jamais se usa em menus e reas de contedo por ser um arquivo binrio, no ser acessvel e estar em desacordo com as recomendaes do W3C.

Padres Web

A Web influenciada por vrias organizaes de padronizao. O trabalho mais expressivo na rea de definio de padres para a Web desenvolvido pelo W3C (World Wide Web Consortium - Consrcio da Teia de Alcance Mundial). O W3C um consrcio da indstria internacional dedicado a conduzir a Web rumo ao seu completo potencial.

Padres Web

Fundado em 1994 e liderado por Tim Berners-Lee, o W3C possui mais de 450 organizaes membro: incluindo Microsoft, America Online (Netscape Communications), Apple Computer, Adobe, Macromedia, Sun Microsystems, uma variedade de fabricantes de hardware e software, provedores de contedo, instituies acadmicas e companhias de telecomunicao. O consrcio mantido por trs instituies de pesquisa MIT (Estados Unidos), INRIA (Europa), e Universidade de Keio (Japo).

Padres Web

A Web uma aplicao baseada na Internet e, desta forma, herdou seus princpios fundamentais de projeto: Interoperabilidade: especificaes para as linguagens e para os protocolos da Web devem ser compatveis entre si, alm de permitir o acesso Web a partir de qualquer tipo de hardware ou software; Evoluo: a Web deve ser capaz de acomodar tecnologias futuras. Princpios de projeto, como, simplicidade, modularidade e extensibilidade aumentaro as chances da Web trabalhar com tecnologias emergentes, tais como dispositivos mveis e televiso digital, bem como outras que esto por vir;

Padres Web

Estes princpios guiam as atividades do W3C, que desenvolve especificaes abertas a fim de garantir a interoperabilidade, a evoluo e a descentralizao dos produtos relacionados com a Web. As recomendaes do W3C so desenvolvidas por grupos de trabalho compostos por membros do consrcio e especialistas convidados. Seguir estas recomendaes significa produzir sites mais interoperveis e consistentes.

Alguns padres do W3C:

HTML (Hypertext Markup Language - Linguagem de Marcacao de Hipertexto); XML (Extensible Markup Language - Linguagem de Marcacao Extensivel); XHTML (Extensible Hypertext Markup Language Linguagem de Marcacao de Hipertexto Extensivel); CSS (Cascading Style Sheets Folhas de Estilo em Cascata); DOM (Document Object Model Modelo do Objeto Documento).

Benefcios em usar Padres Web

Adotar padres Web no desenvolvimento de sites a nica maneira de assegurar que os sites construdos podero ser visitados a partir de qualquer plataforma, hoje e sempre. A maioria dos padres Web so projetados considerando sua compatibilidade passada e futura - de modo que dados utilizando uma verso mais antiga dos padres continuem a funcionar em novos navegadores, e dados utilizando novas verses dos padres possam produzir resultados aceitveis em navegadores antigos.

Benefcios em usar Padres Web

Facilidade de indexao A informao estruturada, presente nestes documentos, torna mais fcil, para os motores de busca, acessarem e avaliarem informaes existentes e, assim, estes documentos podem ser indexados de forma mais precisa. Facilidade de migrao Documentos da Web produzidos em conformidade com os padres podem ser facilmente convertidos em outros formatos, tais como informaes para banco de dados ou outros tipos de documentos.

Benefcios em usar Padres Web

Acessibilidade Acessibilidade uma idia importante por trs dos padres Web. Isto no significa apenas tornar a pgina acessvel a pessoas portadoras de necessidades especiais, mas tambm permitir que pginas Web sejam compreendidas por pessoas utilizando navegadores diferentes dos mais populares - incluindo navegadores vocalizados, que lem pginas para pessoas cegas; navegadores Braille, que traduzem o texto comum em Braille; navegadores de dispositivos mveis, que possuem um espao bastante limitado de visualizao; entre outros dispositivos incomuns.

Benefcios em usar Padres Web

Adotar padres permitir que os desenvolvedores: Desenvolvam sites mais leves e que exigem menos tempo de carregamento; Tenham um controle mais posicionamento e tipografia; preciso sobre layout,

Desenvolvam comportamentos sofisticados que funcionam em vrias plataformas de hardware e software;

Dicas

Bom design Um bom design aquele que resolve um problema da melhor forma possvel, e torna o produto atraente mesmo para o pblico que no visa atingir. Mau design O mau design se caracteriza pelo cumprimento de funes com desperdcio de energia, formas e material. Resultando em funcionamento e visualizao desarmnicos.

Mau design

Bom design

EXERCCIO

Exerccios - Em grupo de dois alunos

1. Escolha dois exemplos que voc considera um bom design grfico 2. Escolha dois exemplos de sites que voc considera um bom design 3. Escolha dois exemplos que voc considera um pssimo design grfico 4. Escolha dois exemplos de sites que voc considera um pssimo design 5. Justifique o porqu da escolha (para todas as situaes) e descrevam os itens que levaram a tomada de deciso.

DVIDAS

romulovanzin@yahoo.com.br