concepção, planejamento e arquitetura de sites ceee-2011 centro de estudos de pessoal...

Concepção, Planejamento e Arquitetura de Sites

CEEE-2011

Centro de Estudos de Pessoal"Valorizando o Homem, serve ao Exército e ao Brasil"



CEEE-2011


Objetivo

Conhecer os conceitos básicos de Web necessários para um profissional atualizado, abordando as principais tendência s www.


CEEE-2011


Conteúdo

• Noções básicas para criação na Web

• Cores

• Tipografia

• Imagens


CEEE-2011


História da Internet


CEEE-2011


A guerra dos browsers


CEEE-2011


Um site de sucesso


CEEE-2011


Um site de sucesso

•Um bom domínio

•Uma idéia inovadora

•Conhecer a concorrência

•Conhecer o público-alvo

•Falar a linguagem do seu cliente


CEEE-2011


Site dinâmico X Site estático

Sites na Web necessitam ser atualizados constantemente com novas informações. Quando isso não acontece, o usuário não sente a necessidade de voltar ao site para obter mais informações, uma vez que são sempre as mesmas.

•Estático – Sempre atualizado por pessoas técnicas, que tenham o mínimo de conhecimento em HTML. Nunca pode ser delegado a uma pessoa não técnica.

•Dinâmico – É construído com uma ferramenta, desenvolvida com o objetivo de incluir, excluir e atualizar informações. Necessariamente usa-se banco de dados para armazenar informações.


CEEE-2011


Site X Portal

•Site – Possui uma estrutura mais simples e pode abordar um assunto específico. Visual mais clean. Poucas informações com muito espaço para textos e imagens. Pode ser dinâmico ou estático.

•Portal – Caracteriza-se pela estrutura complexa com o máximo de informações sobre o assunto abordado. Visual mais completo e com características próprias. Muitas informações e pouco espaço. Site dinâmico.


CEEE-2011


Site X Portal

Exemplos de Sites

http://pt-br.www.mozilla.com/pt-BR/firefox/

http://www.csszengarden.com/

Exemplos de Portais

http://www.uol.com.br/

http://g1.globo.com/

http://www.dell.com/

http://pt-br.www.mozilla.com/pt-BR/firefox/

http://www.csszengarden.com/

http://www.uol.com.br/


http://www.dell.com/


CEEE-2011


Evolução dos Sites

http://www.archive.org/index.php

http://www.archive.org/index.php


CEEE-2011


WYSIWYG – What You See Is What You Get

São editores que nos permitem montar um página HTML sem o conhecimento mínimo necessário.

Torna-se desvantajoso por não possuir códigos otimizados e que não seguem aos padrões de desenvolvimento para Web.

Exemplo – google Sites

http://www.google.com


CEEE-2011



CEEE-2011


Anatomia de uma página Web: Estrutura básica HTML


CEEE-2011


Anatomia de uma página Web: DIVisões


CEEE-2011


Anatomia de uma página Web: O código da página HTML


CEEE-2011

Centro de Estudos de Pessoal "Valorizando o Homem, serve ao Exército e ao Brasil"

Layout fixo X layout fluido

Fluido

http://www.w3.org/

http://www.vivabit.com/

http://www.uxmag.com/

Fixo

http://g1.globo.com

http://www.americanas.com.br

http://www.w3.org/

http://www.vivabit.com/

http://www.uxmag.com/


http://www.americanas.com.br/


CEEE-2011


Resolução da Tela

Para 1024X768 usar 1000 px de larguraPara 800X600 usar 760 px de largura


CEEE-2011


Cores

A cor exerce influência na vida de uma pessoa,

interferindo nos sentidos, emoções e intelecto; pode ser usada para

se atingir objetivos específicos.

O uso apropriado de cores pode resultar em uma rápida e

correta assimilação da informação. Mas seu uso incorreto pode

trazer resultados indesejáveis.


CEEE-2011


Conhecer um pouco de teoria das cores, ajuda a chegar no resultado esperado mais rapidamente:

• representar associações simbólicas

• chamar e direcionar a atenção

• enfatizar alguns aspectos da interface

• determinar um estado de espírito

• não devemos abusar do uso de cores

• temos que entender o que cada tonalidade representa.

• conhecer que emoção passa


CEEE-2011



CEEE-2011


RGB - Adotado em monitores e TV


CEEE-2011


CMYK - Adotado em impressões


CEEE-2011


Tipografia na Web

Sites interessantes:

www.dafont.com

www.1001fonts.com

http://pt.fontriver.com

http://www.netfontes.com.br

http://www.dafont.com/

http://www.1001fonts.com/

http://pt.fontriver.com/

http://www.netfontes.com.br/


CEEE-2011


Tipografia na Web

Famílias


CEEE-2011


Imagens na Web

Bitmap X Vetorial

PIXEL – Ponto que compõe uma imagem bitmap. Quando a imagem é ampliada, os pixels se tornam visíveis, na forma de quadrados de cor e luz. Dando o efeito de textura e profundidade.

VETOR – É um segmento de reta que possui comprimento e direção, podendo ser definido também como uma expressão matemática que indica tamanho e direção. Gráficos vetoriais são compostos por “nós”, os quais interconectam-se por meio de linhas e curvas.

Existem imagens que se baseiam em pixels, como é o caso das fotografias, e imagens que se baseiam em vetores, como os logotipos.


CEEE-2011


Imagens na Web

Bitmap


CEEE-2011


Imagens na Web

Vetorial


CEEE-2011


Introdução a usabilidade na Web

Definições

Ergonomia

Ergonomia (ou Fatores Humanos) é a disciplina científica que trata da compreensão das interações entre os seres humanos e outros elementos de um sistema, e a profissão que aplica teorias, princípios, dados e métodos, a projetos que visam otimizar o bem estar humano e a performance global dos sistemas.

Os praticantes da Ergonomia, Ergonomistas contribuem para o planejamento, projeto e a avaliação de tarefas, postos de trabalho, produtos, ambientes e sistemas para torná-los compatíveis com as necessidades, habilidades e limitações das pessoas.


CEEE-2011



Definições

Usabilidade

Pela definição da International Organization for Standardization, usabilidade é a extensão na qual um produto pode ser usado por usuários específicos para alcançar objetivos específicos com efetividade, eficiência e satisfação em um contexto de uso específico (ISO 9241-11).

Para Jacob Nielsen, um site deve ser ser de fácil aprendizagem, permitir utilização eficiente e apresentar poucos erros são os três aspectos fundamentais para a percepção da boa usabilidade por parte do usuário.

http://pt.wikipedia.org/wiki/International_Organization_for_Standardization


CEEE-2011



Usabilidade X Funcionalidade


CEEE-2011



Padrões para Web – Abas


CEEE-2011



Padrões para Web – Link Principal


CEEE-2011



Padrões para Web – Seletor de Idiomas


CEEE-2011



Padrões para Web – Pesquisa Simples


CEEE-2011



Padrões para Web – Página 404


CEEE-2011



Testes de Usabilidade


CEEE-2011



Testes de Usabilidade - Laboratório


CEEE-2011



Testes de Usabilidade – Protótipo de Papel


CEEE-2011


Padrões e Acessibilidade

Leis e Padrões Web

“ O poder da Web está em sua universalidade. O acesso feito por qualquer pessoa, independentemente de sua capacidade, é um

aspecto essencial. “

Tim Berners-Lee, W3C Director and Inventor of the World Wide Web


CEEE-2011



Leis

Lei Federal: Lei nº 10.098, de 19 de dezembro de 2000, assinada pelo ex-Presidente Fernando Henrique Cardoso.

Decreto nº 5.296, assinado em 2 de dezembro de 2004 que estabelece as normas gerais e critérios básicos para a promoção da acessibilidade das pessoas portadoras de deficiência ou com mobilidade reduzida.

http://www.planalto.gov.br


CEEE-2011



Usuários


CEEE-2011



Avaliação de Sites

W3C

http://www.w3.org/WAI

Acessibilidade Brasil

http://www.acessobrasil.org.br

http://www.w3.org/WAI

http://www.acessobrasil.org.br/


CEEE-2011


Como fazer um Site online grátis

Google – Sites

Wix

Webs

Webnode

concepção, planejamento e arquitetura de sites ceee-2011 centro de estudos de pessoal...

Documents