Desenvolvimento de Websites

I - Pesquisa e abstração: elaborar o roteiro para a pesquisa, reunir todo material, agrupar os conteúdos por natureza da informação e organizá-los por relevância.

• Pesquisar os websites de assuntos afins.
• Elaborar uma relação de tudo o que website deve conter.
• Agrupar os conteúdos e defina as ligação que os assuntos têm entre si. 
• Abstrair - imagine como você prepararia uma palestra sobre o assunto do website; qual o conteúdo programático? qual ordem da apresentação?
• Distribuir os assuntos no núcleo, nas bordas e pense em como atualizar as informações geradas dinamicamente. Pense no caminho para se encontrar a informação, na ordem natural da leitura.

I I - Layout do front-page e páginas Internas: a partir da identidade visual do produto ou serviço, trabalhar a aplicação da marca na interface do Website traçando o primeiro esboço do layout.

I I I - Arquitetura da Informação: refinamento do conteúdo organizado na pesquisa. Analisar interligação das páginas e aos aspectos da interatividade com o visitante.

• Design da informação: Consiste em "desenhar a informação", uma folha de papel em branco, um lápis e várias idéias na cabeça, como escrever tudo isso?
• Processo intuitivo: agrupamos as informações em pequenos "grupos de assuntos", classificamos e interligamos.
• Os "grupos de assuntos" dão origem aos grupos de páginas, compondo-se a arquitetura da informação. 
• Após a identificação de todos os "grupos de assuntos" que o website irá abranger, serão agrupados em "áreas" ( institucionais, serviços, destaques, etc).
• Monte a Arquitetura da Informação, utilizando-se de papel picado com os nomes dos "grupos de assuntos" e "áreas", arranje-os em um espaço que corresponda a tela do computador. Monte o quebra cabeça intuitivamente.
• Os elementos que não são da área de intersecção dos "grupos de assuntos" eleitos mas se ligam com elementos entre as "áreas" (ex. as buscas), necessitam ser colocados na arquitetura.

I V - Arquitetura de Design: preparar as imagens e layouts das páginas. O design deve seguir a arquitetura de informação proposta inicialmente.

• O front-page do website deve causar IMPACTO e persuadir o visitante.
• O website não pode ser desenvolvido como uma revista ou um folheto (folder) em formato eletrônico.
• A internet é um veículo de informação muito ágil e dinâmico.
• O visitante espera uma solução digital surpreendente, diferente, que abra caminho para interatividade.
• É importante que o website responda aos interesses dos seus visitantes.

V- Conteúdo: a informação é agrupada em pequenos textos, que podem ser lidos em qualquer ordem, é importante classificá-los e interligá-los, para facilitar o acesso à informação.

• Atualizar conteúdo - o lançamento do website é um passo importante, mas lembrar sempre que o sucesso dele se dá com a atualização constante do seu conteúdo.
• Manter o foco nos assuntos contidos na arquitetura de informação. Cumprir o seu objetivo.
• Responder e-mail recebidos na conta webmaster de forma esclarecedora.

VI- Desenvolvimento: criação dos processos de produção de conteúdo e aplicativos.

VII - Hospedagem: Criação do ambiente de produção ou pequisa de infra-estrutura do provedor de acesso para armazenagem e atualização.

Alguns perfis de websites para que possa reconhecê-los em sua pesquisa pela Internet.

Não há um único modelo para construção dos websites, eles podem variar de acordo com a natureza e propósito do projeto. Há websites que são verdadeiras "colchas de retalhos", complicados e de navegação confusa, que o visitante se perde antes de conseguir a informação desejada.

Planejar o website é fundamental para não criar verdadeiros "becos sem saída", onde o acesso entre uma seção e outra é a volta para a página principal, estruturas que forçam o visitante a passar por várias páginas até chegar ao ponto desejado.

Estruturar as informações organizando-as por relevância e pontos em comum. Elas ficam em áreas que são como seções de uma revista. Mudar de assunto deverá ser tão fácil quanto virar uma página.

A página principal é como o índice de um livro ou a recepção de uma empresa: só uma orientação para seguir ao destino. Imagine você estar em um determinado departamento da empresa e ter quer voltar na recepção para perguntar onde fica o banheiro mais próximo ou ter que passar pela recepção toda vez que vai mudar de departamento. Em todas as páginas do site deve-se ter uma noção clara de onde você está e para onde pode ir (navegação visível).

Os websites na internet devem ser lineares como uma revista ou hierárquico como uma enciclopédia. Não! A comunicação digital deve ser como a conversa com um especialista assim que o assunto vai se aprofundando, vão surgindo novas opiniões.

Organizar a informação, desenhar a estrutura do sistema e definir os caminhos para navegar por ela. O mapa do website está pronto.

Não tente mostrar ao visitante tempo todo onde ele está. Isso é tão chato e inútil quanto uma transmissão de futebol pela TV que mostre o placar durante todo o jogo.

A Arquitetura do design é fundamental quando seguida da Arquitetura da informação constituída de conteúdo claro e objetivo. Muitos designers ignoram essa parte do processo e se concentram apenas na elaboração de uma interface visualmente agradável, deixando para um segundo plano a arquitetura de informação.

Uma comunicação via telefone entre duas pessoas não as transportam de um lugar para outro, mas cria um espaço intermediário inexistente, criado por meios tecnológicos e chamado de ciberespaço, válido para qualquer tipo de comunicação remota, como o telefone, chat, rádio etc. Ao desligar o aparelho, esse espaço deixa de existir. A tarefa dos arquitetos de informação e webdesigners é fazer com que esse espaço seja aconchegante e interessante.

• Não existe comunicação não-linear. Muitas mensagens e possibilidades de conexão geram uma comunicação que permite vários caminhos, mas nunca dois ao mesmo tempo, pois quando a gente vê um texto fora de seqüência, imediatamente você sente a incomodação e corrige-o em sequência.
• A "comunicação não-linear" é uma forma de expressão que permite várias sequências, todas lineares, ou uma comunicação multidimensional, organizada em camadas, como páginas de texto impressas em papel transparente.
• Esse tipo de comunicação pode ser atordoante. O excesso de desvios em um texto pode fazer com que a mensagem se perca pelo caminho. Por isso é fundamental saber qual é o sentido da comunicação antes de montar sua estrutura.

Não dá para "folhear" um website. Um texto digital não tem uma seqüência, nem páginas numeradas que impõem uma rota de navegação. No website, cada um lê o que interessa, na ordem que desejar. Podem existir várias leituras. Em papel isso é impossível. Aqui o texto terá que ser bem elaborado para atingir o objetivo do leitor, pois não está organizado em capítulos.

Hipertexto e hipermídia - Hipertexto é texto sublinhado. Hipertexto com recursos multimídia é chamado de hipermídia. Um hipertexto contém um conjunto de textos interligados e recursivos, ele não começa em lugar algum nem tem final e apresenta várias sequências de leitura. Funciona com um bom papo que um assunto leva a outro ou como uma boa aula que cresce de acordo com o interesse do aluno.Um documento digital em hipertexto pode ter páginas de qualquer tamanho (aconselha-se páginas não maiores que um formato A4 evitando-se uma leitura cansativa e chata). Um sistema de hipertexto dá ao leitor a informação que quiser, na quantidade que quiser. A maior parte dos roteiros são lineares, quadrados, caretas, sem horizontes.

Hiperespaço - Estar em dois lugares no espaço ao mesmo tempo. Sair daqui e ir para o Japão acionando um botão. Passear por lugares que não existem. É só usar a internet. Vamos explorar mais.

Visitada através de um monitor, internet não é revista, não é rádio, não é TV. Apesar de transmitir mensagens sonoras ao vivo. Apesar dos clips em vídeo. Experimente mostrar um artigo de revista e suas fotos pela TV. Ou usar o rádio para transmitir um filme. Ou transcrever a narrativa de um jogo de futebol em uma revista. Ou fazer o layout de uma mensagem de secretária eletrônica. Portanto, muito critério em usar uma a internet como algo que ela não é.

A Internet é um veículo de comunicação, com características próprias. Você pode ver a rede a qualquer hora de onde desejar. Imprimir um texto, pegar uma imagem, mudar de assunto se desejar, enviar e-mail, pesquisar um tema, se encontrar nos chats, grupos de discussão, mailing list enfim dá pra fazer de tudo na Internet.

A rede tem uma linguagem própria, mas poucos estão interessados nela. A maioria das pessoas que desenha interfaces adapta idéias do design gráfico, da TV ou da propaganda.

Existem muitas formas de medir a audiência de um site e muitas formas de tapear essa medição. Muitos endereços digitais se vangloriam da quantidade de hits que eles conseguem por mês. Alguns se baseiam nesse número para fazer tabelas com custos de mídia. Não acredite nisso.

HITS - cada hit é um objeto transferido para o computador do espectador. Uma página com texto e dez imagens fornecerá onze hits. Cem mil hits não significam cem mil pessoas visitando.

PAGE VIEWS - quantidade de documentos ("páginas") acessados. Cem mil page views não significam cem mil pessoas visitando.

O fato de uma página ter sido enviada para o computador do usuário não significa que ela foi vista. Existem relatórios de acessos que indicam não só o número de visitantes, mas quais páginas foram mais visitadas, em que hora do dia, e de que servidor elas vieram.

Colocar a ficha técnica de um Audi em páginas da Veja é um desperdício de dinheiro, pois o público é limitado etc. A internet é um veículo de informação onde as pessoas não ligam seus computadores e se conectam, gastando um dinheiro, para ver só umas imagens bonitinhas. É importante fornecer conteúdo.

A internet é uma rede mundial de pessoas, conectadas dos mais diversos pontos do mundo, pelos mais remotos motivos. Hoje elas usam computadores, daqui a algum tempo vão estar usando outro veículo, não importa.

Planejar a presença internet como uma ação de comunicação, não de informática. Da mesma forma que as revistas e programas de TV, que usam vários recursos de computação gráfica mas não são consideradas produtos de informática.

Por mais interessante que possa ser um bom design, ele é apenas a embalagem de um produto digital, o público pode até achar agradável, mas não está interessado nela, e sim em seu conteúdo.

A interatividade e os recursos gráficos de um endereço digital são apenas chamarizes. O que interessa, cativa e mantém um visitante conectado é a possibilidade de participação. É a porta de entrada para um relacionamento íntimo e pessoal entre uma empresa e seus consumidores.

Analise os sites que você conhece, que reação eles provocam no visitante? Muitos são lerdos, feios, lineares e monótonos. E com pouco conteúdo relevante. Não é preciso nem dizer que o visitante que caia num desses provavelmente vai embora, mesmo que esteja interessado no assunto. Da mesma forma que nós fugimos dos chatos que se orgulham do carro, contam histórias dos filhos ou das viagens que fizeram a Cancún.

Mas se o conteúdo e a forma do site forem bacanas, incentivarem a participação e a interferência do visitante, eles gerarão uma empatia, ou seja, uma identificação completa com o público, que visita, volta e conta para os amigos.

Nós falamos português, o computador fala HTML. Pra servir de intérprete, os layouts têm um nome bacana interfaces, funcionam como uma "face intermediária" entre o computador e você.

Por isso não adianta fazer só uma carinha bonitinha, cheia de ícones e desenhinhos ou fotos legais. É preciso estimular o visitante a reagir, participar, opinar, brincar com o site. As interfaces existem para que as pessoas esqueçam que estão usando computadores. Por isso elas precisam ser naturais, divertidas e interativas.

HTML (Hypertext Markup Language) - é a linguagem na qual escrevemos as páginas do website para disponibilizá-las no WWW da Internet. Compõe-se de diretivas que são interpretadas pelos browsers. Ao interpretar as diferentes diretivas temos a apresentação de uma página seguindo a formatação de texto, cores e imagens definida pelo autor.

Página - é um hipertexto no World Wide Web que associa diferentes tipos de mídia como textos, imagens, áudio e vídeo, conectados por hiperlinks. Pode ser única ou estar ligada a outras páginas formando um sistema de informações ou um Website.

"Home Page" ou Página principal - A página de entrada ou página inicial.

Tim Beners-Lee - um dos criadores do World Wide Web, a linguagem foi definida para ser usada por processadores de texto e os autores de páginas não deveriam conhecer as diretivas produzidas pelo processo de criação.

Editores gráficos - O uso dos editores permitem que o autor crie uma página sem conhecer os códigos da linguagem HTML. Além de Editores existem também programas Assistentes que transformam documentos gerados em MS Word, Power Point e Excel em páginas HTML..

<HTML> e </HTML> - São tags que dizem que o documento é do tipo html, ou seja uma página web. 

cabeçalho <HEAD> e </HEAD> - aqui especifica-se o título da página
<TITLE> e </TITLE>, será apresentado na barra superior do browser. 

Corpo <BODY> e </BODY> - aqui especifica-se: cores de fundo, texto, links, e o início do documento.

Propriedades aplicadas a tag body, se não forem aplicadas assumem um valor default

• bgcolor - cor de fundo para a página
• background - imagem nos formatos .jpg ou .gif usada de fundo da página
• text - define uma cor para o texto
• link - define uma cor para os links
• vlink - define cor para os link já visitados
• alink - define a cor para o link na hora que for ativado 

Exemplo 1
<BODY BACKGROUND=nome_imagem BGCOLOR=nome_cor
TEXT=nome_cor LINK=nome_cor VLINK=nome_cor ALINK=nome_cor> 

Exemplo 2
<BODY BACKGROUND=nome_imagem BGCOLOR=#código_cor
TEXT=#código_cor LINK=#código_cor VLINK=#código_cor
ALINK=#código_cor> 

O texto pode ser formatado com as tags de tamanho, itálico, negrito e fonte mono-espaçada, sobrescrito, subscrito e piscante. Para todas elas é necessário delimitar o início e o fim do texto a ser formatado.

A codificação permite a qualquer equipamento interpretar os códigos e exibir na tela o carácter desejado. códigos funcionam:

• Primeiro o carácter "&"
• Seguido da letra que deverá ser acentuada, pode ser minúscula ou maiúscula
• Veja a tabela abaixo coloque o código do acento desejado
• Acrescente o carácter " ; " ( ponto de vírgula ) Exemplos:

Diretivas para uma formatação básica do um texto em uma página.

<CENTER>: centraliza o texto em relação à página
<BR>: quebra de linha, iniciando o texto seguinte na linha logo abaixo
<P>: força o fim de um parágrafo, ou seja, pula uma linha antes de iniciar outro parágrafo
<HR>: régua horizontal; inclui uma linha horizontal no texto, separando o texto em blocos
width = _% comprimento. Ex. width=50%
size = _ espessura do traço. Ex. size=6
<PRE>: respeita a formatação original do texto inserido na página

Listas são utilizadas para organizar seu texto em uma relação de itens e subitens, ordenados ou não. Tipos de listas : Listas Ordenadas, Listas Não-Ordenadas e Listas de Definição.

<ol> - inicia uma lista
type - define o tipo de numeração da lista 

A - Letras maiúsculas
a - Letras minúsculas
I - Algarismos romanos
1 - Números arábicos

</ol> - finaliza a lista
<li> - determina um item da lista
Exemplo : 

<ul> - marca o início da lista
type - define o tipo de marcador de cada item da lista 

disk - pequeno disco sólido
square - quadrado preenchido
circle - círculo cheio

</ul>- marca o final da lista
<li> - determina um item da lista
Exemplo:

<dl> marca o início da lista
<dt>indica termo a ser definido
<dd>indica a definição do termo acima
Exemplo: 

Formatos:

A tag inclui uma imagem dentro de um documento HTML. Elas podem ser usados com alguns parâmetros como:

Alinhar um texto em relação a uma imagem. Parâmetros de alinhamento: