CarlosHPS Blog - Artigos, Tutoriais e Dicas para Designers e Programadores da Web. » Séries

Criando layouts CSS a partir do zero: 1 coluna

CarlosHPS — Sun, 29 Nov 2009 16:10:20 +0000

Atendendo a diversos pedidos, vou iniciar uma nova série denominada "Criando layouts CSS a partir do zero", onde criaremos 4 layouts de uma, duas, três e quatro colunas. :D

Comunidade dos membros do blog e seus trabalhos.

Divulgue seu trabalho.
Faça parte do CarlosHPS Flickr Group

Criando Layout – Empresa de Tecnologia: Parte 2

CarlosHPS — Thu, 23 Jul 2009 14:31:08 +0000

Criação de um layout, utilizando o Fireworks, para uma empresa de Tecnologia. Segunda parte do tutorial.

Comunidade dos membros do blog e seus trabalhos.

Divulgue seu trabalho.
Faça parte do CarlosHPS Flickr Group

Como Criar um Sistema de Cadastro: Parte 4

CarlosHPS — Wed, 29 Apr 2009 18:49:27 +0000

Como prometido, veremos nesta parte, a complementação do sistema de cadastro (como excluir dados) que vem sendo desenvolvido ao longo dos nossos tutoriais. Vamos ao final então?!

Comunidade dos membros do blog e seus trabalhos.

Divulgue seu trabalho.
Faça parte do CarlosHPS Flickr Group

Como Criar um Sistema de Cadastro: Parte 1

CarlosHPS — Sun, 01 Mar 2009 18:14:10 +0000

Neste tutorial veremos como interagir o Dreamweaver, o PHP a um Banco de Dados MySQL e um servidor web para criarmos um sistema básico de cadastro.

Comunidade dos membros do blog e seus trabalhos.

Divulgue seu trabalho.
Faça parte do CarlosHPS Flickr Group

Barra de Menu Vertical com Spry: Parte 1

CarlosHPS — Tue, 30 Sep 2008 15:49:24 +0000

Atendendo a vários pedidos, vou criar dois tutoriais de criação de barras de menu com o Dreamweaver CS3 e o Spry: um vertical e outro, horizontal.

Comunidade dos membros do blog e seus trabalhos.

Divulgue seu trabalho.
Faça parte do CarlosHPS Flickr Group

Criando um Site Passo-a-Passo: Parte FINAL

CarlosHPS — Wed, 17 Sep 2008 21:00:03 +0000

Olá, pessoal! Estamos diante da nossa última parte desta série que caiu na graça do povo :D

Comunidade dos membros do blog e seus trabalhos.

Divulgue seu trabalho.
Faça parte do CarlosHPS Flickr Group

Criando um Site Passo-a-Passo: Parte 9

CarlosHPS — Sun, 17 Aug 2008 19:53:05 +0000

Olá, pessoal. Este é nosso penúltimo artigo da série Criando um Site Passo-a-Passo e, finalmente, veremos como ficará o nosso projeto, não é verdade?!

Comunidade dos membros do blog e seus trabalhos.

Divulgue seu trabalho.
Faça parte do CarlosHPS Flickr Group

Criando Caixas 3D – Parte 1

CarlosHPS — Sun, 20 Jul 2008 15:55:44 +0000

Inicio hoje outra série de tutoriais destinada, exclusivamente, à criação de caixas tridimensionais para softwares, presentes, pacotes, etc. Utilizarei diversas técnicas e formas de fazer objetos com esta finalidade.

Comunidade dos membros do blog e seus trabalhos.

Divulgue seu trabalho.
Faça parte do CarlosHPS Flickr Group

Criando um Site Passo-a-Passo: Parte 8

CarlosHPS — Thu, 17 Jul 2008 19:27:51 +0000

Em prosseguimento à série “Criando um Site Passo a Passo”, vamos trabalhar, neste tutorial, as áreas central e barra lateral do layout da CarlosHPS Vídeo-Locadora, no que se diz respeito às sua locações e imagens de fundo.

Comunidade dos membros do blog e seus trabalhos.

Divulgue seu trabalho.
Faça parte do CarlosHPS Flickr Group

Criando um Site Passo-a-Passo: Parte 5

CarlosHPS — Wed, 25 Jun 2008 19:25:05 +0000

Olá, pessoal

Continuando a série “Criando um Site Passo-a-Passo“, após termos visto alguns conceitos importantes, vamos colocar a “mão na massa” a partir de agora.

Simularemos aqui, a criação de um site para uma locadora de vídeo, ok? Então vamos lá.

1º – BRIEFING

Nome da Empresa

CarlosHPS Vídeo-Locadora

Ramo de Atividade

Vídeo Locadora

Pontos Fortes:

Atendimento
Promoções constantes
Entrega em domicílio
Catálogo virtual

Objetivo:

Disponibilizar o acervo de DVD’s da CarlosHPS Vídeo-Locadora aos seus clientes e usuários em geral da Internet.

Este seria um breve resumo do briefing da empresa. De posse dessas informações, faz-se uma pesquisa de no mínimo 10 sites concorrentes ou não, do mesmo ramo de atividade para se ter uma noção do que já se aplica na web. Sem esquecer de também solicitarmos ao cliente, peças publicitárias, manual de identidade visual e tudo o que for possível para a complementação do nosso conhecimento da empresa.

2 – MAPA DE SITE (Sitemap)

Como também foi visto na 3ª parte desta série, após esta pesquisa, criamos um esquema que será manuseada e compreendida pelo cliente e pela equipe envolvida na implementação do projeto.

Um mapa de site é a representação gráfica da estrutura de um website, do ponto de vista da distribuição do conteúdo através de páginas e do caminho mais simples (links) a ser percorrido pelo usuário para chegar à página desejada.

Vejamos como ficou o mapa da CarlosHPS Vídeo-Locadora:

Fig. 01: Sitemap do site da CarlosHPS Vídeo-Locadora

3 – WIREFRAME

Digamos que seja o “primo pobre” do layout…rsrs

O wireframe é um “esqueleto”; uma estrutura simples que nos auxilia na produção do site, tornando o processo mais ágil, padronizada e eficiente. Seu maior objetivo é determinar onde cada conteúdo se encaixará no site, levando em consideração o grau de importância com relação aos demais objetos que comporão o layout como um todo.

Complicado? :dizzy:

“Né nada”!

Veja o exemplo do wireframe básico do nosso projeto:

Fig. 02: Wireframe básico da CarlosHPS Vídeo-Locadora

Lembrando que é uma estrutura básica. Caso haja necessidade, podemos detalhar mais. Fica a critério da situação.

É isso aí, pessoal.

O site a ser montado terá este layout:

Fig. 03: Layout do site da CarlosHPS Vídeo-Locadora

Quem desejar criar seu próprio mapa de site e wireframe e quiser me enviar pra eu dar uma olhadinha, fiquem à vontade.

Próximo artigo, veremos sobre o fatiamento do layout da CarlosHPS Vídeo-Locadora e como montar sua estrutura básica em HTML e CSS.

Até lá.

CarlosHPS Webdesigner

Webtutoriais:34547DA3

Comunidade dos membros do blog e seus trabalhos.

Divulgue seu trabalho.
Faça parte do CarlosHPS Flickr Group