Ele funciona a partir da lógica do css.

div#tudo>div#menu>ul>li.itens*5>a

Resultado:

<div id="tudo">
<div id="menu">
<ul>
<li class="itens"><a></a></li>
<li class="itens"><a></a></li>
<li class="itens"><a></a></li>
<li class="itens"><a></a></li>
<li class="itens"><a></a></li>
</ul>
</div>
</div>

Abaixo você confere um vídeo demo, mostrando o zend coding em ação:

Para se aprofundar mais, você pode também conferir a lista de elementos e a lista de seletores HTML.

Chegamos agora na ultima parte do tutorial, onde fazemos todo o css da página deixando ela finalizada. Foi explicado algumas técnicas simples de css de posicionamento, personalização de links e textos.

Download VídeoDownload Site Final

Anteriores
Criando Site #1 – Planejamento
Criando Site #2 – Layout (wireframes)
Criando Site #3 – Layout (design)
Criando Site #4 – HTML

“Esses artigos tem como objetivo apenas passar conhecimento e ajudar pessoas que tem vontade de aprender sobre criação de sites. Todo o conteúdo dos artigos é apenas uma forma que eu uso para trabalhar e não é um padrão de desenvolvimento.

Chegamos agora, na parte onde começamos com os códigos, já estamos com o nosso layout pronto, então vamos partir para o html. Vamos montar a estrutura básica do html, e no próximo video iremos aplicar o css.

Download Vídeo

No próximo video vamos fazer o css finalizando o site.

Anteriores
Criando Site #1 – Planejamento
Criando Site #2 – Layout (wireframes)
Criando Site #3 – Layout (design)

“Esses artigos tem como objetivo apenas passar conhecimento e ajudar pessoas que tem vontade de aprender sobre criação de sites. Todo o conteúdo dos artigos é apenas uma forma que eu uso para trabalhar e não é um padrão de desenvolvimento.

Pra quem tem um iPhone, já passou por alguns problemas como colocar uma música para toque, principalmente para pessoas que adquiriram algum recentemente. Normalmente somos acostumados a simplesmente colocar alguma música no celular e aplica-la como toque, porém o arquivo para toque no iphone é em um formato diferente. O iRingtones é a melhor solução para esse problema.

Com uma interface muito simples, basta você arrastar a música desejada para o programa e ele já abrirá as opções para escolher o trecho da música que irá definir como toque.

iRingtones - Tela inicial

Após fazer isso basta clicar em Create e ele já irá recortar o trecho da música definido e adicionar a biblioteca de toques do itunes automáticamente, depois disso é só sincronizar com o seu iphone o pronto.

Santa Mac App Store

Graças a nossa querida mac app store podemos adquirir o aplicativo por menos de $4,00. Antes disso, a licença dele custava $11,90 em seu site.
Eu comprei o programa e recomendo, vale muito a pena.

Antes de conhecer o iRingtones eu usava o Audiko, um site com a mesma função de criar ringtones, você faz o upload da música, recorta ela e faz o download do toque. Porém pelo fato de fazer o upload, é um processo que acaba perdendo mais tempo, mas para quem é usuário de windows é uma boa alternativa.

Finalmente, a parte que as pessoas mais gostam chegou, a hora de abrir o seu programa de edição e criar o layout que logo se transformará em um site.
Depois de fazer todo o processo que fizemos anteriormente agora tudo esta mais fácil, pois já esta definido toda a estrutura, agora com base nela, vamos transforma-la em algo com um visual melhor.

Achei melhor fazer essa parte em video aula do que explicando em texto. Sou meio iniciante em screancasts ainda, então as vezes dou umas gaguejada na hora de falar, mas ta valendo. O resultado será esse:

Resultado do layout

obs: Acabei esquecendo de fazer no video o background branco do conteúdo como esta na imagem, sorry

Download Vídeo

Download arquivo psd do layout

No próximo artigo começaremos em ação, recortando o layout e montando o html.

Anteriores
Criando Site #1 – Planejamento

Wireframes

- O que são ?

Um wireframe de site web (ou também “wire frame web”, “wireframe web”, “web wireframing”) é um guia visual básico usado em design de interface para sugerir a estrutura de um sítio web e relacionamentos entre suas páginas. Um wireframe web é uma ilustração semelhante do layout de elementos fundamentais na interface. Normalmente, wireframes são concluídos antes que qualquer trabalho artístico seja desenvolvido.
wikipedia

Exemplo de wireframe

- Para que serve ?

Tem como objetivo ajudar você a entender o que o cliente quer exatamente, o posicionamento do conteúdo, algumas funções do site e de uma forma básica é como ficaria a página do site depois de montada.

- Como fazer um wireframe

Hoje em dia já existem programas específicos para se fazer isso, facilitando e agilizando o trabalho. Mas na verdade um wireframe pode ser feito por qualquer programa de edição de imagem, ate mesmo no paint ou uma simples folha branca.

- Qual a vantagem de se fazer um wireframe ?

Imagina você se encontrar com um cliente, e simplesmente fala que quer um site para sua empresa, então você vai lá abre o seu programa e cria todo o layout com imagens, ícones, cores e fontes personalizados, tudo muito bonito, mas na hora de apresentar, ele diz que não era bem aquilo que queria, e que precisa fazer umas alterações, e acaba mudando tudo de lugar, assim você terá todo o trabalho de refazer praticamente todo o layout. Trabalhando com wireframes você evita grande parte desse retrabalho, diminuindo a sua margem de erros.

Arquitetura da Informação

Trabalhando juntamente com os wireframes é feito também toda a arquitetura da informação. Mas o que é arquitetura da informação ?

Arquitetura da informação (AI) é a arte de expressar um modelo ou conceito de informação utilizados em atividades que exigem detalhes explícitos de sistemas complexos. Entre essas atividades estão sistemas de biblioteca, Sistemas de Gerenciamento de Conteúdo. desenvolvimento web, interações de usuários, desenvolvimento de banco de dados, programação, artigos técnicos, arquitetura corporativa e de design de software de sistema crítico.
wikipedia

Em palavras mais simples, é todo o estudo de posicionamento da informação, que trabalha juntamente com a diagramação, dividindo o conteúdo e toda informação de texto tanto visual da página do site.

Criando o wireframe

Agora vamos criar um wireframe para nossa página. O nosso site será um site corporativo de uma empresa qualquer, que vamos fazer apenas como exemplo.

01. Topo

O topo será bem simples, apenas com a logo alinhada a direita, e a baixo dela um menu horizontal com os itens de home, sobre, serviços, produtos e contato, que é quase um padrão nesse tipo de site.

Wireframe - Topo

Alguns podem achar isso uma perda de tempo, mas como eu disse pode fazer uma grande diferença no final.

02. Conteúdo e rodapé

Seguindo agora para o conteúdo do site, se inicia com um titulo e um texto falando sobre a empresa.

Wireframe - Conteúdo (sobre)

A baixo temos a estrutura dividida em duas colunas, uma para serviços e outra para produtos, seguida de um título, uma imagem ilustrativa e o texto. E concluindo com o rodapé.

Wireframe - Conteúdo (serviços, produtos e rodapé)

Wireframe Final

Ao finalizar o seu wireframe deve ficar assim:

Wireframe Final - Criando Site

Como podem ver é um site bem simples, mas trabalhado de uma forma mais elaborada com todas essas etapas.

No próximo artigo chegaremos na parte que todos mais gostam, que é abrir o photoshop e transformar esse wireframe na imagem final do site.

Anteriores
Criando Site #1 – Planejamento

“Esses artigos tem como objetivo apenas passar conhecimento e ajudar pessoas que tem vontade de aprender sobre criação de sites. Todo o conteúdo dos artigos é apenas uma forma que eu uso para trabalhar e não é um padrão de desenvolvimento.

Por onde começar quando se quer fazer um site ? Começar planejando é a melhor solução não só para sites, como qualquer outra coisa na vida. Antes de mais nada é preciso passar por algumas etapas.

Começo agora uma pequena série de artigos de como criar um site, e tem como foco ajudar e ensinar iniciantes na área de Web

Objetivos

Qual é o objetivo de você criar um site ? Se você quer um site para vender produtos o seu planejamento deve ser baseado nisso, ou se você quer um site apenas para um diário virtual ele também deve ser pensado nessa forma. Toda a estrutura e a navegação do site tem que ser planejada para o seu objetivo.

Público alvo

Já imaginou um site de notícias dos mundo super importantes, com imagens de flores rosas, nuvens, dinossauros ou qualquer outra coisa do gênero. Não só a parte visual mas também a própria linguagem do site tem que esta diretamente relacionada com seu público alvo. Fazendo dessa forma você conseguirá atingir o seu objetivo com mais facilidade e obtendo sucesso.

Concorrência

Praticamente todo o ramo de atividade hoje em dia temos concorrentes, mas não devemos ver isso como um problema, temos que fazer o que alguns veêm como problema, e transformar isso em uma vantagem. Devemos fazer uma análise da concorrencia listando os pontos fortes e fracos e a partir disso fazer um estudo para saber como tirar proveito disso, para os que tem noções de marketing esse termo é chamado de análise swot.

Processos

Essa é a etapa onde a organização é fundamental, é onde vamos criar um cronograma das tarefas que serão feitas, caso o trabalho seja feito por mais de uma pessoa, será dividido as tarefas de acordo com a atividade de cada um. Para ter uma boa produção aconselho trabalhar com prazos.

No próximo artigo começaremos o layout a partir de wireframes, e você sabera porque.

“Esses artigos tem como objetivo apenas passar conhecimento e ajudar pessoas que tem vontade de aprender sobre criação de sites. Todo o conteúdo dos artigos é apenas uma forma que eu uso para trabalhar e não é um padrão de desenvolvimento.