<![CDATA[Galvão web designer - Blog]]>Tue, 28 Apr 2009 00:18:48 +0700Weebly<![CDATA[CSS 04]]>Mon, 28 Apr 2008 14:12:13 +0700http://galvao.weebly.com/1/post/2008/04/css-04.htmlVamos agora, como prometi, pegar este arquivo em HTML e fazer com que seu conteúdo seja modificado via CSS.
Você já viu o código do aquivo abaixo né? Agora vamos fazer o seguinte: Vamos criar um outro arquivo intitulado "estilos.css". Neste arquivo vamos impor uma configuração para o plano de fundo e para as TAGs h1, h3 e p, blz? Baixe estes dois aquivos e analise-os. 

O primeiro arquivo é o código HTML modificado. Observe que dentro do "HEAD" existe um link para um arquivo chamado "estilo.css":
<link rel="stylesheet" type="text/css" href="estilos.css" />
No momento não se preocupe com o restante do conteúdo, fixe apenas o itemhref="estilos.css". Ele está fazendo referência ao arquivo onde estão as configurações citadas.

Agora você compreende a teoria das 50 páginas?
Mãos à obra que vem mais coisa por aí galera!!!!!

css_aula_02.html
File Size: 0 kb
File Type: html
Download File
estilos.css
File Size: 0 kb
File Type: css
Download File
]]><![CDATA[CSS 03]]>Fri, 25 Apr 2008 07:04:24 +0700http://galvao.weebly.com/1/post/2008/04/css-03.htmlHoje eu gostaria de explicar de forma prática o funcionamento do CSS. Vamos começar com uma página extremamente básica em HTML. 
Faça download do arquivo abaixo, abra-o, clique com o botão direito dentro da página,  escolha a opção "exibir código fonte" e analise o código, pois nós iremos alterá-lo para que a configuração das fontes e plano de fundo seja em CSS.

css_aula_01.html
File Size: 0 kb
File Type: html
Download File
]]><![CDATA[CSS - Explicando melhor]]>Wed, 23 Apr 2008 15:08:14 +0700http://galvao.weebly.com/1/post/2008/04/cssexplicando-melhor.htmlImagine que você construiu um site utilizando os TAGS em HTML e que esse site possua 50 páginas. Cada página possui como plano de fundo a cor vermelha. Cada título dos textos existentes nas 50 páginas posuam a seguinte característica: fonte: Arial, Tamanho: 14px, Cor: Branca, Alinhamento: Left e seja Bold (gordinha). O texto padrão seja Arial tamanho 12 e as mesmas configurações dos títulos. Certo? Tudo funcionando direitinho, uma maravilha.

Meia hora antes de apresentar ao cliente, o contato faz o seguinte pedido a você: "Mude as cores dos planos de fundo para Azul e as fontes dos títulos para Verdana na cor amarela".

Meu filho, são 50 páginas e vc terá que alterar uma a uma.
Aí, basta gritar: "Valei-me meu são CSS!!"
É pra isso e para outras coisas que o CSS serve.



Como funciona?

Simples! As 50 páginas são criadas. Certo? Certo.
Em um arquivo CSS são colocadas todas as configurações do site: planos de fundo, fontes com suas cores, alinhamentos, tamanhos, figuras, etc.
Ao ser solicitada; a mudança será feita somente neste arquivo CSS e tudo nas 50 páginas modificarão automaticamente. Né massa? Quanto tempo isso levará?
Minutos, meu nego, minutos!!!

]]><![CDATA[CSS]]>Sun, 20 Apr 2008 07:32:13 +0700http://galvao.weebly.com/1/post/2008/04/css.htmlCitei esta sigla e nem expliquei o que significa né?
CSS é a sigla em inglês para Cascading Style Sheet que em português foi traduzido para folha de estilo em cascata.

Galvão, você não disse nada....
Então lá vai: Nos primórdios da criação de um website, as tabelas eram (e ainda são por alguns profissionais da área) amplamente utilizadas. No entanto percebe-se a necessidade de um mecanismo que atribuisse estilos ao conteúdo de uma página. Além do mais, as tabelas foram criadas para exibir dados tabulares, como o horário escolar que fica dentro do seu caderno lembra? 

Pois bem, um problema começou a ser notado com o uso das tabelas: O código HTML ficava imenso, dificultando a manutenção do site. Além do mais no código HTML, (explicado na HOME), as configurações de palavras, fundos, imagens eram repetitivos, aumentando mais ainda o código.
Imagine então uma página com um código imenso para ser mantido (talvez você ainda não esteja entendendo o que quero dizer. Vá até a home page e baixe o aquivo em pdf que ensina HTML e você mais à frente entenderá melhor).

Na verdade o usuário nem nota isso, o que importa pra ele é navegar num site bonitinho e pronto. Mas para nós Web designers isso é realmente um pesadelo quando se trata de uma página cheia e riquefifes!!!

Solução? CSS na mente rapá!!!!!

]]><![CDATA[Proposta e Motivação]]>Tue, 15 Apr 2008 13:44:21 +0700http://galvao.weebly.com/1/post/2008/04/post-title-click-and-type-to-edit.htmlProposta do blog
Hoje quero falar da proposta do meu site/blog.
Quero ensinar como criar um site em CSS partindo do Corel Draw.
Serão vários tipos de site. Do mais simples ao mais complexo.

Motivação
Tenho observado pelos sites existentes que a utilização do Corel Draw como ferramenta artística é maravilhosa. Como ferramenta técnica não. Acontece que no Corel a gente pode definir a posicção dos "divis" de maneira prática e eficiente.

]]><![CDATA[Apresentação]]>Fri, 11 Apr 2008 20:44:18 +0700http://galvao.weebly.com/1/post/2008/04/first-post.htmlE aí pessoal, blz?

Há muito tempo quero fazer este blog.
Essa é a hora!!!!
Aqui neste espaço publicarei matérias, novidades, opiniões, dicas, tudo sobre o mundo do Webdesigner, ok?
Leiam as matérias e comentem, please!!!
Assim saberei como conduzir este espaço. Falou?

Começando...
Ultimamente tem-se discutido bastante sobre um tema até então "desepercebido" ou "desconhecido" para quem se aventura na arte de criar sites: USABILIDADE.
Falo despercebido porque uma das primeiras empresas a se preocupar com isso foi a AOL, lembram dela? Isso faz tempo viu? Aqui no Brasil quase não se fala nela, mas la nos States, tá bombando!!!

Então, que diabo é isso?
Usabi..o quê?

USABILIDADE. É simples de explicar: É a maneira como uma empresa desenvolve algum produto. Como abrir aquele pacote de biscoito? Como montar aquele equipamento?
Um produto que esteja no cérebro do consumidor; que ele já saiba com usar ou não sinta dificuldade.

No caso da criação de um site: Será que todos sabem para que serve o  botão "home"? Ou o botão "quem somos"? Qualquer letra que estiver na cor azul e sublinhada, para que serve?

USABILIDADE é uma fórmula pronta? Talvez. O diferencial está justamente como o webdesigner aplica ela.
É o estudo das cores do site, onde posicionar tal objeto, como organizar os itens da página, etc. 
No que isso ajuda? 
Deixa eu te fazer uma pergunta: Você já abriu o jornal hoje? Já verificou os anúncios?
Algum lhe chamou a atenção mesmo que você não esteja interessado no produto?
Já entrou em algum site e disse: "nunca mais venho aqui!!!" ou "que site massa, fácil de navegar, virei fã!!!".
Pois bem!!! Nesses e em outros exemplos do nosso cotidiano nos deparamos com a USABILIDADE.  

]]>