Pular para o conteúdo principal

Postagens

Mostrando postagens de 2006

Criando o site de trás pra frente

Podem ate achar estranho, mas gosto de começar o desenvolvimento de um site de trás pra frente, ou seja, eu começo a codificar as páginas internas primeiro e só depois é que vou pensar na página inicial. E não sou apenas eu, Derek Powazek também faz assim ( tradução aqui ), e faço as palavras dele minhas palavras também. O layout mostrado na postagem anterior é referente às páginas internas do site e depois dele pronto é que vamos pensar na página inicial.

O layout de nosso site de exemplos

Para darmos inicio a nossa codificação vou mostrar primeiramente qual será o layout, normalmente não é preciso o layout pois ele faz parte da segunda camada, mas resolvi mostrá-lo para termos em mente como o site deve ficar. Para desenvolver o layout eu utilizo um editor de imagens, gosto muito do Fireworks, mas você pode usar qualquer um, não sou designer, portanto não esperem nada muito surpreendente. Para um layout feito em menos de 3 minutinhos está ate bom, não acham? Agora que já temos nosso layout vamos começar a implementar o código XHTML, este será o tema da próxima postagem, ate lá.

Porque não usar editores WYSIWYG

Uma pergunta que muitos que estão começando fazem. Primeiramente uma breve explicação sobre os editores de nome estranho. WYSIWYG, do inglês "What You See Is What You Get", quer dizer maio ou menos "O que você vê é o formato final" e trata-se de editores de HTML onde não é preciso saber codificar em HTML, para fazer uma página basta digitar os textos, movimentar as imagens pela tela e formatar o texto através de botões parecidos com os botões de um editor de texto normal (Microsoft Word por exemplo), todo o HTML é gerado pelo editor através destas "formatações". Pode parece a melhor coisa do mundo, mas não é, pois o código HTML gerado fica muito sujo, ou seja, cheio de coisas estranhas, pois ainda não foi desenvolvido o editor WYSIWYG que realmente faça nosso trabalho. Como mostrado nos exemplos anteriores, codificar uma página HTML é bastante simples, portanto não há porque complicar, tornando nossos arquivos muito grandes e passiveis a erro apenas pela

Definindo do Document Type Definition

A proposta inicial era a da construção de um site como uma espécie de Currículo on-line, mas mudei de idéia. Tinha em mente criar um Currículo on-line para os primeiros exemplos e depois criar um site de uma empresa fictícia para explicar melhor outros pontos, mas resolvi ir direto ao site de uma empresa fictícia, pois assim terei mais opções. Nossa empresa de mentirinha vai se chamar Carficodi (o falta de criatividade) e será nada mais nada menos que uma agencia de automóveis. A primeira coisa a fazer é definir qual tipo de Doctype usar, para os exemplos eu usarei o "XHTML 1.0 Strict". E de estrema importância saber o que é um Doctype e recomendo e a leitura deste post do revolucao.etc.br para que eu não tenha que reescrever tudo aqui. Ate a próxima.

Pegando fôlego

Desde que tive a idéia de criar este blog muita coisa aconteceu, estou construindo uma nova casa e trabalhando muito, portanto estou meio sem tempo para postar. Mas não se preocupem, quando eu passar pela turbulência tudo ficara mais calmo, e voltarei a postar sobre a proposta inicial deste blog que é a de ensinar pessoas normais a codificarem um site inteirinho. Para não ficar só com minha desculpa passo aqui um link de um jogo de nossos amigos de Portugal, é um jogo de estratégia medieval onde se joga com varias pessoas pelo mundo afora. Vale a pena conferir. www.travian.com.pt

A correta metodologia do desenvolvimento de um site

O desenvolvimento de um site não consiste em apenas começar a “Codificar”, tudo tem que ser muito bem estudado. O Objetivo deste blog e o de ensinar a parte de codificação, ou melhor, programação ou um termo que melhor define o sujar as mãos com o código, seja HTML, CSS, JavaScript entre outros. Não conheço o cara, mas ele esta escrevendo um Reality Show sobre um projeto que ele mesmo diz ser o ultimo como freelancer. Recomendo a leitura para todos os que desejam ou já estão construindo sites. Acessem www.fatorw.com

Construção da primeira camada

Na postagem anterior demos uma rápida olhada nos principais componentes de uma página; Hoje vamos colocar a mão na massa e produzir nossa primeira página. Alguns programas facilitam a edição do código, eu gosto muito do Pspad, um editor muito bom é o melhor, é grátis. Para baixá-lo acesse o endereço http://www.pspad.com/ . Vou utilizá-lo para construção da primeira camada de nossa página de testes. Para instalá-lo basta baixar o executável (clique aqui para baixar), clicar duas vazes sobre o arquivo baixado e seguir as instruções que se seguem. Estes procedimentos são bem simples mas em caso de duvidas deixe um comentário que vou esclarecer melhor. Vale lembrar que não e preciso um editor específico para edição de uma página, pode ser usado qualquer editor de texto como o bloco de notas do Windows. Indiquei o PSPad apenas porque ele facilita o trabalho, completando algumas coisas, tem uma ajuda muito boa e colore o código como mostrado nos exemplos, assim fica mais fácil não se perder.

Marcando corretamente

Como foi dito na postagem anterior o HTML serve para marcar o conteúdo, daí você me pergunta, Como assim marcar? A resposta é simples, marcar nada mais é do que dar nome aos bois, separando e definindo o que cada parte é e o que faz. Cada "marca" do HTML recebe o nome de tag. Cada tag inicia-se com um sinal "menor que" (<) seguido pelas letras que identificam a tag, logo após vem alguns parâmetros opcionais e termina com um sinal "maior que" (>). Exemplo: <p>. Algumas tag’s são usadas sozinhas no documento, mas na maioria das vezes é preciso um par de tag’s, uma antes do conteúdo que marcam e outra logo após. A tag que vem logo após o conteúdo é praticamente a repetição da tag de abertura, as únicas diferenças são que elas não permitem parâmetros adicionais e precisam de uma barra logo após o sinal "menor que". Exemplo: </p> A tag usada nos exemplos acima serve para delimitar um parágrafo. Assim tudo que estiver dentro dela será

Entre em contato

Para entrar em contato comigo utilize os comentários de cada postagem, mas se o assunto não tiver muito a ver com o tema do blog você pode enviar um e-mail para o e-mail abaixo: Em caso de duvidas sobre alguma postagem, por favor, utilize os comentários da postagem correspondente, assim quando eu, ou alguém, o responder com o esclarecimento, poderá o fazer para todos que tenham a mesma duvida, evitando assim a repetição de uma mesma pergunta e conseqüentemente da mesma resposta.

Do que um site é feito

Quando a internet nasceu sua finalidade era a troca de informações entre cientistas americanos que estavam em laboratórios distantes uns dos outros, deu tão certo que foi se expandindo ate virar na rede mundial de computadores que conhecemos hoje. De lá pra cá aconteceu muitas coisas, muito se melhorou e padrões foram criados. Para publicar uma informação foi utilizada uma linguagem de marcação conhecida como HTML, que nada mais é do que marcas, separando as diversas partes da informação. A informação (um texto, uma imagem, um vídeo ou um som) é separada como em outras mídias criadas anteriormente como o jornal, a revista, o radio a televisão, etc. Esta marcação serve para organizá-la facilitando a interpretação pelos diversos meios de acesso a internet. Segundo a padronização criada por um consorcio internacional, um site deve ser dividido em camadas. Na primeira camada temos o conteúdo, ou seja, os textos, as imagens, os vídeos e os sons que compõem a informação a ser divulgada ao mu