No post anterior, fizemos a pesquisa junto ao cliente. Agora temos que fazer um estudo deste material, avaliar se temos todas as informações para que possamos
montar uma estratégia e com ela construir a arquitetura do projeto.

A arquitetura do projeto pode ser montado de várias formas, porém vou mostrar um dos métodos mais comuns que é em forma de fluxograma:

Fluxograma Modelo

Detalhe sobre esta etapa, temos que cuidar com a usablidade, fazer o caminho ideal para que o usuário possa atingir o objetivo montado na estratégia do site.

Este fluxograma ajuda em todos os processos do desenvolvimento. Agora estamos com todas as informações para montarmos o wireframe. Ele pode ser  desevolvido usando lápis e papel, ou um software específico, fica aberto esta  opção.

É interessante usar apenas duas variações de cores e linguagens simples, afinal,  esta documentação terá que estar disponível em todos os processos do  desenvolvimento e inclusive para o cliente.

Abaixo um exemplo seguindo o que foi apresentado no fluxograma:

Home

Modelo 1

Empresa

Modelo 2

Uma dica interessante é usar legendas no wireframe, numerando cada bloco de informações, quando a página for grande.

Nesse caso, como é pequena, podemos dizer que o topo terá uma imagem no formato PNG, e a imagem da notícia tera uma imagem no formato PNG com dimensões de 300px x 300px.

Não é obrigatório o desenvolvimento de wireframes para todas as telas, e sim as mais importantes, isto é definido na parte de estratégia do projeto.

Agora com todo o material desenvolvido, podemos apresentar para o cliente como irá  funcionar o novo site. Este é apenas um dos processos. Após a aprovação do cliente, podemos então passar para a parte de produção.

Abraços

Normalmente no desenvolvimento de um site, já estamos pensando em layout e como será programado. Porém não pensando em várias etapas como usabilidade, acessibilidade e organização do conteúdo.

Esta etapa de organização de conteúdo é muito importante para o desenvolvimento de projeto como um todo.

O que devemos coletar do cliente nesse primeira fase:

“Sobre o site do cliente?”

Ele deve descrever qual a funcionalidade do site até o momento, para que possa ser feito um desenvolvimento seguindo o ramo da empresa.

“Quem é seu publico alvo?”

Apresentar quais classes que acessam seu site, estas informações são importantes para que possa ser feito adiante testes de usabilidade e acessibilidade. Outro teste importante que acho legal, é testes de hardware de acordo com o tipo de público. Exemplo: O público alvo deste site tem em média internet com velocidade de conexão de até 1mb, e podem apresentar configurações de computadores inferiores aos atuais disponibilizados no mercado, então temos que usar tecnologias em que o site se comporte de uma melhor forma neste tipo de configuração.

“Qual o objetivo do site?”

Mostrar para qual finalidade ele esta apresentando o site para o usuário.  Se é compra, venda, divulgação, pesquisa e etc.

E claro, devemos saber quais são os concorrentes do cliente. É interessante fazer uma análise dos principais concorrentes e apontar pontos negativos que podem ser usados a favor no desevolvimento.

Após esta análise junto ao cliente, podemos então começar a estruturar o conteudo do site. (Wireframe)

Toda equipe de desenvolvimento deve estar participando desse processo, pois serão definidos os componentes que serão utilizados no site e funcionalidades.

No próximo post, vamos começar com a estruturação do site por partes.

Abraços

No último post montamos um exemplo de topo e menu no site.Agora vamos montar um exemplo de html e css simples para começar a desenvolver um site por completo.

Como vamos executar:

1. Vamos criar um fundo para o nosso site
2. Vamos centralizar nosso site
3. Montar nosso topo
4. Montar nosso menu lateral
3. Colocar o conteudo
5. Fazer o rodapé

Primeiramente vamos criar um arquivo css.

Vamos definir algumas configurações básicas para ele.

*{
 font-family:arial;
 font-size:12px;
 margin:0;
 padding:0;
 list-style:none /*Deixar as listas sem stilo*/
}

Pronto, nossa configuração padrão esta ok, vamos agora ao nosso background.

html{
background: #ccc;
}

Então vamos começar a fazer estrutura. Vamos definir uma div que vai emblogar todos os elementos do site.

#geral{
width: 900px;
margin:auto; /* Com esta margem automatica o site vai ficar centralizado ao meio da tela conforme a resolução */
}

Vamos fazer o nosso topo

#topo{
height:70px;
background:#f3f3f3;
border-bottom:1px solid #ccc; /* Colocar uma borda na parte debaixo do topo */
}

Agora vamos definir como o nosso menu lateral vai se comportar.

#menu_lado{
width:200px;
float:left;
background:#f3f3f3;
}

Vamos fazer uma lista dentro desse menu.

ul{
margin:10px;
}

ul li{
display:block;
height:25px;
border-bottom:1px solid #ccc;
}

E agora vamos definir nosso conteudo

#conteudo{
background:#fff;
padding:10px; /*Margin interna do elemento*/
float:left;
width:680px;
min-height:400px;
}

E por fim o rodapé

#rodape{
clear:both;
height:40px;
background:#ddd;
text-align:center;
}

Ok, esta pronto nosso css. Salve o arquivo como estilo.css

Agora vamos começar o nosso html.

<html>
<head>
<titke>Primeiro Site</title>
</head>
<body>
<div id="geral">
<div id="topo"></div>
<div id="menu_lado">
    <ul>
         <li>Menu 1</li>
         <li>Menu 2</li>
         <li>Menu 3</li>
         <li>Menu 4</li>
         <li>Menu 5</li>
         <li>Menu 6</li>
    </ul>
</div>
<div id="conteudo"></div>
<div id="rodape"></div>
</div>
</body>
</html>

Nossa estrutura tem que ficar neste modelo.

Salve o arquivo como index.htm

E execute no nagador. Clique e veja o exemplo.

Abraço pessoal.

Bom, no post passado colocamos um topo no nosso site, reparem que nele tem um menu certo? Hoje vamos montar esse menu para poder completar o topo do site.

Abaixo da div topo vamos inserir nosso menu:

<html>
<head>
<title>Exemplo 01</title>
<link href="estilo.css" rel="stylesheet" type="text/css" />
</head>
 <body>
 <div id="topo">
 <img src="imagens/logomarca.jpg">
 </div>

 <div id="menu">
 <!-- vamos colocar nosso menu aqui -->
 </div>

 <h1>O meu nome é?</h1>
 <p>Rafael Fagundes</p>
 <h1>Qual módulo estou estudando?</h1>
 <p>HTML e CSS</p>
 </body>
</html>

Então para montar as opções do menu, vamos usar uma lista.

Obs:
<ul> é a nossa lista
<li> são as opções que tem dentro da lista

Vamos a lista:

<ul>
<li>Opção 1</li>
<li>Opção 2</li>
<li>Opção 3</li>
<li>Opção 4</li>
<li>Opção 5</li>
</ul>

Montado nossa lista, vamos salvar a index.html.

No css, temos que definir como esse menu será apresentado o menu no navegador.

/* Definimos o div onde vai aparecer o menu */
#menu{
height:30px;
background:#ddd;
line-height:30px;
}

/* aqui definimos como cada li deve se comportar */
#menu ul li{
float:left;
list-style:none;
padding:0 20px;
border-right:1px solid #999;
}

Salve o estilo.css.

Pronto, nosso menu agora já esta com uma formatação legal.

Veja como deve ficar o exemplo. Clique aqui.

Qualquer dúvida ou sugestão, manda um email para rafael2802@gmail.com.

Abraço pessoal.

<html>
<head>
<title>Exemplo 01</title>
<link href="estilo.css" rel="stylesheet" type="text/css" />
</head>
 <body>
 <div id="topo"></div>
 <h1>O meu nome é?</h1>
 <p>Rafael Fagundes</p>
 <h1>Qual módulo estou estudando?</h1>
 <p>HTML e CSS</p>
 </body>
</html>

Salve o arquivo índex.html.
Vamos agora ao nosso css para definir como o topo deve se comportar.  Abra o arquivo estilo.css
Como definimos “id=topo” devemos usar # para que o elemento possa adquirir o estilo.
Adicionamos o seguinte código.

#topo{
 height:70px;  /* ALTURA DO TOPO */
 background:#690; /* FUNDO DO TOPO */
}

Salve o arquivo estilo.css.

Repare que existe uma pequena margem em volta de todo nosso site. Vamos retirar ela para que o mesmo fique junto à margem do navegador.
Vamos adicionar em nosso css a propriedade magin e padding:

*{
 font-family: arial; /*Definir a fonte padrão*/
 font-size:12px;     /*Definir o tamanha da fonte padrão*/
 margin:0; /* Margem externa de qualquer elemento dentro do html */
 padding:0; /* Margem interna de qualquer elemento dentro do html */
}

Salve o estilo.css.

Agora vamos adicionar uma logomarca em nosso topo, vamos pegar uma imagem qualquer,  caso ela tenha fundo decor diferentes, é ideal usar ela em formato png transparente.

No meu caso vou adicionar uma imagem como se fosse uma logomarca.
Voltando ao arquivo índex.html, dentro do div onde esta definido o topo, vamos  adicionar a tag da nossa imagem.
Então em nossa pasta onde estamos salvando nosso site, vamos criar uma pasta chamada “imagens”, dentro dela vamos salvar nossa logomarca.

Salvei uma imagem jpg com o nome de logomarca.jpg.
Vamos então chamar nossa imagem:

<div id="topo">
 <img src="imagens/logomarca.jpg">
</div>

Como definimos que todo elemento ai ficar sem margem, a logomarca ficou colada com o navegador, vamos ajustar para que ela fique em um posição legal dentro do topo.
No nosso arquivo css vamos adicionar:

#topo img{
 margin:5px
}

Agora estamos trabalhando com um elemento dentro do outro.
Então dentro do elemento #topo, estamos definindo que o elemento img(padrão de imagem) vai receber uma margem.

Salve seu css.

Veja o exemplo aqui de como deve ficar o nosso topo.
Agora temos um topo com a imagem na posição certa, vamos partir agora para um menu dentro do nosso site no próximo post.

Vou resumir aqui o conceito de HTML e CSS  para que possamos iniciar nossa implementação.

HTML – Sigla HyperText Markup Language, traduzindo Linguagem de Marcação de Hipertexto é um tipo de marcação para que possamos produzir páginas na Web e acessando através de um navegador

CSS – Sigla Cascading Style Sheets é utilizada para definir uma aparência ao nosso HTML gerado no navegador, ou seja, para que o site fique com uma apresentação melhor para o usuário.

Logo abaixo temos um código HTML bem simples onde vamos aplicar o CSS para que possamos ter uma apresentação melhor deste conteúdo.

Um editor que acho bem interessante para que possamos começar a praticar é o Notepad++, ele é bem rápido, grátis e de fácil instalação.

Quem quiser baixar, link.

Abra seu editor, e digite o código abaixo:

<html>
<head>
<title>Exemplo 01</title>
</head>
 <body>
 <h1>O meu nome é?</h1>
 <p>Rafael Fagundes</p>
 <h1>Qual módulo estou estudando?</h1>
 <p>HTML e CSS</p>
 </body>
</html>

Salve este arquivo como index.html. Este HTML acima está sem folha de estilo (CSS). Clique aqui e veja o exemplo.

Para as perguntas que estão nesse exemplo, usamos a tag <h1> que é usada para títulos. E para nossas respostas usamos a tag <p>, para definir como parágrafo.

Vamos para o nosso CSS:

Continuando em nosso editor, vamos fazer um arquivo novo, ele deverá ter o nome estilo.css. É interessante fazer o arquivo CSS separado do HTML para que a manutenção dele seja bem mais fácil.

Digite:

/*Definir as configurações padrões*/

*{

font-family: arial; /*Definir a fonte padrão*/

font-size:12px; /*Definir o tamanha da fonte padrão*/

}

/*Perguntas*/

h1{

font-size:16px;

background:#ccc;  /*Definir um fundo para o texto da pergunta*/

border:1px solid #999;  /*Borda da caixa onde se encontra a pergunta*/

height:22px;            /*Altura da caixa onde se encontra a pergunta*/

padding:5px;            /*Margem interna para que o texto não fique grudado com a borda*/

}

/*Respostas*/

p{

color:#333;       /*Cor da fonte*/

}

Salve o arquivo CSS.

Voltando ao index.html, dentro da tag <head> vamos fazer o link para o nosso CSS para que o site possa ter a aparência que definimos no CSS, exemplo:

<head></pre>
<title>Exemplo 01</title>

<link href="estilo.css" rel="stylesheet" type="text/css" />

</head>

Salve o arquivo index.html. Agora nosso HTML terá uma aparência diferente.

Abra em seu navegador o arquivo index.html, ele deverá ter esta aparência. Clique aqui para ver o exemplo.

Este formulário foi baseado em um exemplo que se encontra no blog do Nivaldo, onde ele está ensinando a parte básica do PHP, para quem tem interesse em programação, é bem interessante poder integrar este CSS ao exemplo que ele está passando, estarei ensinando em alguns posts como formatar layout de acordo com os formulários de programação que o Nivaldo esta fazendo. Clique aqui e confira o artigo.

Qualquer dúvida só falar pessoal.

Abraço

Obs.: Estarei também mostrando como trabalhar layout (CSS) junto com o código fonte da programação, para isto estarei integrando estes posts com o blog no meu amigo e programador PHP Nivaldo Arruda.

Também vou procurar falar sobre usabilidade e espero também receber dicas do pessoal, isto é um assunto que acho bem importante a ser falado.

E como não poderia faltar, sou viciado em celular, vou postar também materiais relacionados a dispositivos móveis. Pretendo seguir a linha de desenvolvimento de sites para estes dispositivos.

É isso aí, espero poder colaborar, e também poder ser ajudado.

Abraço.