programaÇÃo web aula 02 prof. gustavo linhares 14/10/2009 instituto federal de educação,...
TRANSCRIPT
![Page 1: PROGRAMAÇÃO WEB AULA 02 Prof. Gustavo Linhares 14/10/2009 Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader036.vdocuments.com.br/reader036/viewer/2022062512/552fc175497959413d8ef538/html5/thumbnails/1.jpg)
PROGRAMAÇÃO WEBPROGRAMAÇÃO WEBAULA 02AULA 02
Prof. Gustavo LinharesProf. Gustavo Linhares
14/10/200914/10/2009
Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais.
![Page 2: PROGRAMAÇÃO WEB AULA 02 Prof. Gustavo Linhares 14/10/2009 Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader036.vdocuments.com.br/reader036/viewer/2022062512/552fc175497959413d8ef538/html5/thumbnails/2.jpg)
O que é Design?O que é Design?
![Page 3: PROGRAMAÇÃO WEB AULA 02 Prof. Gustavo Linhares 14/10/2009 Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader036.vdocuments.com.br/reader036/viewer/2022062512/552fc175497959413d8ef538/html5/thumbnails/3.jpg)
O que é Design?O que é Design?
Design é projetar conceitos, equilibrando Design é projetar conceitos, equilibrando estética e funcionalidade.estética e funcionalidade.
![Page 4: PROGRAMAÇÃO WEB AULA 02 Prof. Gustavo Linhares 14/10/2009 Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader036.vdocuments.com.br/reader036/viewer/2022062512/552fc175497959413d8ef538/html5/thumbnails/4.jpg)
áreas de atuação
Os três principais grupos de atuação disciplinar da área são:
Design de Interfaces;
Design Gráfico;
Design de Produto;
Design de Produto
![Page 5: PROGRAMAÇÃO WEB AULA 02 Prof. Gustavo Linhares 14/10/2009 Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader036.vdocuments.com.br/reader036/viewer/2022062512/552fc175497959413d8ef538/html5/thumbnails/5.jpg)
áreas de atuação
Observando de um ângulo mais específico podemos verificar diversas áreas geradas a partir destes grupos como:
Áudiovisual;
Editoração
Embalagens;
Identidade Corporativa;
![Page 6: PROGRAMAÇÃO WEB AULA 02 Prof. Gustavo Linhares 14/10/2009 Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader036.vdocuments.com.br/reader036/viewer/2022062512/552fc175497959413d8ef538/html5/thumbnails/6.jpg)
áreas de atuação
Ilustração;
Interface Digital;
Manipulação de Imagens;
Programação Visual (impressos);
Sinalização;
Tipografia;
Bens de Consumo;
![Page 7: PROGRAMAÇÃO WEB AULA 02 Prof. Gustavo Linhares 14/10/2009 Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader036.vdocuments.com.br/reader036/viewer/2022062512/552fc175497959413d8ef538/html5/thumbnails/7.jpg)
áreas de atuação
Bens de Gosto;
Mobiliário;
Têxtil;
Veículos;
Stands e Exposições;
Interiores;
Ergonomia;
![Page 8: PROGRAMAÇÃO WEB AULA 02 Prof. Gustavo Linhares 14/10/2009 Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader036.vdocuments.com.br/reader036/viewer/2022062512/552fc175497959413d8ef538/html5/thumbnails/8.jpg)
áreas de atuação
Modelos e Protótipos;
Ilustração Técnica;
Educação;
Planejamento de Produtos;
Teoria ou Pesquisa;
Arquitetura de InformaçãoArquitetura de Informação.
![Page 9: PROGRAMAÇÃO WEB AULA 02 Prof. Gustavo Linhares 14/10/2009 Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader036.vdocuments.com.br/reader036/viewer/2022062512/552fc175497959413d8ef538/html5/thumbnails/9.jpg)
conceito
Para começar a projetar deve-se estar sempre atento aos princípios do design, como: conceito, originalidade, simplicidade e legibilidade. Eles são importantes para a fundamentação dos seus projetos.
![Page 10: PROGRAMAÇÃO WEB AULA 02 Prof. Gustavo Linhares 14/10/2009 Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader036.vdocuments.com.br/reader036/viewer/2022062512/552fc175497959413d8ef538/html5/thumbnails/10.jpg)
Observe as figuras acima...Você notou algo de estranho?
![Page 11: PROGRAMAÇÃO WEB AULA 02 Prof. Gustavo Linhares 14/10/2009 Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader036.vdocuments.com.br/reader036/viewer/2022062512/552fc175497959413d8ef538/html5/thumbnails/11.jpg)
conceito
É isso: o conceito nada mais é do que um conjunto de informações representadas por elementos gráficos (como cor, tipografia, imagens etc.) e que, juntos, transmitem uma idéia.
![Page 12: PROGRAMAÇÃO WEB AULA 02 Prof. Gustavo Linhares 14/10/2009 Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader036.vdocuments.com.br/reader036/viewer/2022062512/552fc175497959413d8ef538/html5/thumbnails/12.jpg)
conceito
Agora, você deve estar se perguntando: mas o que isso tem a ver com criação de sites? Tudo! Os sites também devem transmitir conceitos, de acordo com a sua categoria.
![Page 13: PROGRAMAÇÃO WEB AULA 02 Prof. Gustavo Linhares 14/10/2009 Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader036.vdocuments.com.br/reader036/viewer/2022062512/552fc175497959413d8ef538/html5/thumbnails/13.jpg)
Conheça algumas categorias de sites
Portais – apresentam conteúdo vasto, dividido por seções de temas variados e atualizados diariamente, na maioria dos casos.
![Page 14: PROGRAMAÇÃO WEB AULA 02 Prof. Gustavo Linhares 14/10/2009 Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader036.vdocuments.com.br/reader036/viewer/2022062512/552fc175497959413d8ef538/html5/thumbnails/14.jpg)
Portais
www.globo.com
![Page 15: PROGRAMAÇÃO WEB AULA 02 Prof. Gustavo Linhares 14/10/2009 Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader036.vdocuments.com.br/reader036/viewer/2022062512/552fc175497959413d8ef538/html5/thumbnails/15.jpg)
Portais
Sites institucionais - sites de empresas ou instituições que apresentam seus serviços e produtos. É o contato direto da empresa com seus clientes.
![Page 16: PROGRAMAÇÃO WEB AULA 02 Prof. Gustavo Linhares 14/10/2009 Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader036.vdocuments.com.br/reader036/viewer/2022062512/552fc175497959413d8ef538/html5/thumbnails/16.jpg)
Sites institucional
www.dnv.com.br
![Page 17: PROGRAMAÇÃO WEB AULA 02 Prof. Gustavo Linhares 14/10/2009 Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader036.vdocuments.com.br/reader036/viewer/2022062512/552fc175497959413d8ef538/html5/thumbnails/17.jpg)
Sites de comércio eletrônico
Sites de comércio eletrônico – sites que disponibilizam produtos a serem comprados pela internet.
![Page 18: PROGRAMAÇÃO WEB AULA 02 Prof. Gustavo Linhares 14/10/2009 Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader036.vdocuments.com.br/reader036/viewer/2022062512/552fc175497959413d8ef538/html5/thumbnails/18.jpg)
Sites de comércio eletrônico
www.amazon.com
![Page 19: PROGRAMAÇÃO WEB AULA 02 Prof. Gustavo Linhares 14/10/2009 Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader036.vdocuments.com.br/reader036/viewer/2022062512/552fc175497959413d8ef538/html5/thumbnails/19.jpg)
Sites pessoais ou portfólios
Sites pessoais ou portfólios - apresentam trabalhos já realizados, mostrando sua experiência profissional, currículo etc.
Esses sites não se restringem a profissionais do design, também podem divulgar artistas, músicos, estilistas ou qualquer profissional liberal.
www.andrefaccioli.
![Page 20: PROGRAMAÇÃO WEB AULA 02 Prof. Gustavo Linhares 14/10/2009 Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader036.vdocuments.com.br/reader036/viewer/2022062512/552fc175497959413d8ef538/html5/thumbnails/20.jpg)
Sites pessoais ou portfólios
www.andrefaccioli.com.br
![Page 21: PROGRAMAÇÃO WEB AULA 02 Prof. Gustavo Linhares 14/10/2009 Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader036.vdocuments.com.br/reader036/viewer/2022062512/552fc175497959413d8ef538/html5/thumbnails/21.jpg)
Sites de educação à distância
Sites de educação à distância - o mesmo que “e-learning”. É destinado ao aprendizado fora da sala de aula. Geralmente, apresentam conteúdo vasto que pode ser impresso pelo aluno em casa. Este formato estimula a interatividade entre os alunos para compensar a distância.
![Page 22: PROGRAMAÇÃO WEB AULA 02 Prof. Gustavo Linhares 14/10/2009 Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader036.vdocuments.com.br/reader036/viewer/2022062512/552fc175497959413d8ef538/html5/thumbnails/22.jpg)
Sites de educação à distância
www.fgv.br/fgvonline
![Page 23: PROGRAMAÇÃO WEB AULA 02 Prof. Gustavo Linhares 14/10/2009 Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader036.vdocuments.com.br/reader036/viewer/2022062512/552fc175497959413d8ef538/html5/thumbnails/23.jpg)
Sites de instituições financeiras
Sites de instituições financeiras - agências virtuais, que disponibiliza serviços como, acesso a sua conta e pode realizar transações.
![Page 24: PROGRAMAÇÃO WEB AULA 02 Prof. Gustavo Linhares 14/10/2009 Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader036.vdocuments.com.br/reader036/viewer/2022062512/552fc175497959413d8ef538/html5/thumbnails/24.jpg)
Sites de instituições financeiras
www.itau.com.br
![Page 25: PROGRAMAÇÃO WEB AULA 02 Prof. Gustavo Linhares 14/10/2009 Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader036.vdocuments.com.br/reader036/viewer/2022062512/552fc175497959413d8ef538/html5/thumbnails/25.jpg)
Blogs (portfólios)
Blogs (portfólios) - uma tendência, onde designers ou qualquer profissional expõem seus projetos em blogs portfólios. Assim, há muita interatividade com os leitores e mais rapidez para a atualização.
![Page 26: PROGRAMAÇÃO WEB AULA 02 Prof. Gustavo Linhares 14/10/2009 Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader036.vdocuments.com.br/reader036/viewer/2022062512/552fc175497959413d8ef538/html5/thumbnails/26.jpg)
Blogs (portfólios)
isabelarodrigues.com
![Page 27: PROGRAMAÇÃO WEB AULA 02 Prof. Gustavo Linhares 14/10/2009 Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader036.vdocuments.com.br/reader036/viewer/2022062512/552fc175497959413d8ef538/html5/thumbnails/27.jpg)
Sites de entretenimento
Sites de entretenimento - sites desenvolvidos para o lazer do usuário. Voltados para o público-alvo, onde o entretenimento expõe o produto ou conceitualiza a marca.
![Page 28: PROGRAMAÇÃO WEB AULA 02 Prof. Gustavo Linhares 14/10/2009 Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader036.vdocuments.com.br/reader036/viewer/2022062512/552fc175497959413d8ef538/html5/thumbnails/28.jpg)
Sites de entretenimento
www.stockholmthemusical.com
![Page 29: PROGRAMAÇÃO WEB AULA 02 Prof. Gustavo Linhares 14/10/2009 Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader036.vdocuments.com.br/reader036/viewer/2022062512/552fc175497959413d8ef538/html5/thumbnails/29.jpg)
Sites de notícias
Sites de notícias – são sites direcionados a informar, com atualização intensa e conteúdo, além da utilização de tecnologias, como RSS, e informativos via e-mail, disponibilizando aos usuários informações com mais rapidez.
![Page 30: PROGRAMAÇÃO WEB AULA 02 Prof. Gustavo Linhares 14/10/2009 Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader036.vdocuments.com.br/reader036/viewer/2022062512/552fc175497959413d8ef538/html5/thumbnails/30.jpg)
Sites de notícias
www.bluebus.com.br
![Page 31: PROGRAMAÇÃO WEB AULA 02 Prof. Gustavo Linhares 14/10/2009 Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader036.vdocuments.com.br/reader036/viewer/2022062512/552fc175497959413d8ef538/html5/thumbnails/31.jpg)
Sites de rede social
Sites de rede social - esta modalidade de site entrou como uma febre no mercado e hoje demonstra claramente sua função. O que parecia um simples site de relacionamento demonstrou com a formação de comunidades que pode servir de medida para empresas e uma resposta direta do público aos produtos lançados.Este tipo de site teve uma ótima aceitação no Brasil, não tendo grandes participações internacionais.
![Page 32: PROGRAMAÇÃO WEB AULA 02 Prof. Gustavo Linhares 14/10/2009 Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader036.vdocuments.com.br/reader036/viewer/2022062512/552fc175497959413d8ef538/html5/thumbnails/32.jpg)
Sites de rede social
www.orkut.com
![Page 33: PROGRAMAÇÃO WEB AULA 02 Prof. Gustavo Linhares 14/10/2009 Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader036.vdocuments.com.br/reader036/viewer/2022062512/552fc175497959413d8ef538/html5/thumbnails/33.jpg)
Hotsites
Hotsites - são sites desenvolvidos para um curto prazo de exposição, onde são divulgados novos produtos. Nesta modalidade de site, a criação tem a oportunidade de reforçar o conceito da marca e vender uma atitude.
![Page 34: PROGRAMAÇÃO WEB AULA 02 Prof. Gustavo Linhares 14/10/2009 Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader036.vdocuments.com.br/reader036/viewer/2022062512/552fc175497959413d8ef538/html5/thumbnails/34.jpg)
Hotsites
application.nokia.com.br/2007/br/musicrooms
![Page 35: PROGRAMAÇÃO WEB AULA 02 Prof. Gustavo Linhares 14/10/2009 Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader036.vdocuments.com.br/reader036/viewer/2022062512/552fc175497959413d8ef538/html5/thumbnails/35.jpg)
Site de exibição de vídeos
Site de exibição de vídeos - o nascimento do YouTube marca a revolução na veiculação de vídeos na web, tornando-os acessíveis para qualquer pessoa, em qualquer lugar. Além disso, o YouTube ajudou a consolidar uma das principais características da chamada Web 2.0, ao estimular a participação dos usuários na construção do conteúdo do site, seja pelo envio de vídeos caseiros, ou até mesmo na disponibilização de material produzido profissionalmente.
![Page 36: PROGRAMAÇÃO WEB AULA 02 Prof. Gustavo Linhares 14/10/2009 Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader036.vdocuments.com.br/reader036/viewer/2022062512/552fc175497959413d8ef538/html5/thumbnails/36.jpg)
Site de exibição de vídeos
www.youtube.com
![Page 37: PROGRAMAÇÃO WEB AULA 02 Prof. Gustavo Linhares 14/10/2009 Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader036.vdocuments.com.br/reader036/viewer/2022062512/552fc175497959413d8ef538/html5/thumbnails/37.jpg)
originalidade
Destacar-se na grande rede pode ser uma tarefa difícil.
No meio de tantos outros sites, por que o seu seria notado?
Ter uma idéia brilhante pode custar muitas horas de sono e papéis amassados...
![Page 38: PROGRAMAÇÃO WEB AULA 02 Prof. Gustavo Linhares 14/10/2009 Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader036.vdocuments.com.br/reader036/viewer/2022062512/552fc175497959413d8ef538/html5/thumbnails/38.jpg)
originalidade
A originalidade é um dos principais fatores
de sucesso de um site, por isso, você precisa ser diferente dos seus concorrentes!
![Page 39: PROGRAMAÇÃO WEB AULA 02 Prof. Gustavo Linhares 14/10/2009 Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader036.vdocuments.com.br/reader036/viewer/2022062512/552fc175497959413d8ef538/html5/thumbnails/39.jpg)
originalidade
Ex:
um site de ecommerce, por exemplo, deve ser mais direto, uma vez que sua meta é a venda e o usuário não deve encontrar obstáculos, como vídeos ou animações, que demorem para carregar.
![Page 40: PROGRAMAÇÃO WEB AULA 02 Prof. Gustavo Linhares 14/10/2009 Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader036.vdocuments.com.br/reader036/viewer/2022062512/552fc175497959413d8ef538/html5/thumbnails/40.jpg)
originalidade
Sites que permitem exceder em originalidade são os sites pessoais e de portfólio (pois é a oportunidade de o autor mostrar seu talento), e os sites de entretenimento, onde o usuário não tem pressa de navegar e está lá só por diversão.
![Page 41: PROGRAMAÇÃO WEB AULA 02 Prof. Gustavo Linhares 14/10/2009 Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader036.vdocuments.com.br/reader036/viewer/2022062512/552fc175497959413d8ef538/html5/thumbnails/41.jpg)
Mãos à obra:
comece fazendo uma pesquisa; faça uma busca na web dos sites similares, veja o que eles oferecem, quais as suas vantagens, de que forma se apresentam etc.
![Page 42: PROGRAMAÇÃO WEB AULA 02 Prof. Gustavo Linhares 14/10/2009 Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader036.vdocuments.com.br/reader036/viewer/2022062512/552fc175497959413d8ef538/html5/thumbnails/42.jpg)
Brainstorming
![Page 43: PROGRAMAÇÃO WEB AULA 02 Prof. Gustavo Linhares 14/10/2009 Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais](https://reader036.vdocuments.com.br/reader036/viewer/2022062512/552fc175497959413d8ef538/html5/thumbnails/43.jpg)
Brainstorming
Este termo, que significa “tempestade de idéias”, é uma técnica de pensamento que estimula a produção de uma grande quantidade de idéias, expondo ao máximo nossa inteligência, desbloqueando hábitos e atitudes inibidoras de um raciocínio criativo para se chegar a uma solução original.