Na verdade ele foi escrito em 7 minutos e 51 segundos e foram escritos apenas o XHTML e CSS. Infelizmente está sem áudio.
O formulário, depois do link, é o “objeto” mais utilizado pelos usuários para interagir com o site. É questão de vida e morte para muitos profissionais. Se não for bem escrito, pode virar um inferno. Com as tags certas, você consegue fazer uma estrutura enxuta e fácil de customizar. Siga a regra áurea do desenvolvimento web: Keep It Simple Stupid. Continuar lendo »
22 ComentáriosO Wordpress tem vários segredos. Um deles é muito interessante: The Loop.
O Loop é usado no Wordpress para mostrar os posts do site. O Wordpress procura os posts publicados no sistema e exibe na página seu conteúdo. Juntando isso com o resto das Template Tags você consegue ter qualquer informação relacionado ao conteúdo publicado no sistema.
Desenvolvedores que não trabalharam ainda com Wordpress, geralmente se assustam quando percebem a quantidade de arquivos utilizados para criar alguns temas. Se você é um deles, relaxe. Você precisa de apenas um arquivo para fazer um site inteiro no Wordpress, o index.php. E dentro deste index.php você coloca o código do LOOP. Continuar lendo »
9 ComentáriosQuando o Netscape e o Internet Explorer faziam a Guerra dos Browsers o principal objetivo era conquistar usuários. As formas que os dois utilizavam para adquirir adeptos eram prejudiciais para o desenvolvimento web. Basicamente o que os browsers faziam era criar códigos proprietários. Isso gerava um retrabalho terrível para os desenvolvedores. Se você tivesse 10 sites para gerenciar, na verdade seriam 20, por conta de ter a necessidade de haver uma versão para Netscape e outra para Internet Explorer. Isso gerava trabalho em dobro. Se houvesse alguma modificação no layout, texto ou programação, o desenvolvedor teria que atualizar as duas versões dos sites. Continuar lendo »
28 ComentáriosPara você se inteirar do assunto, leia Browser Targeting Version.
No artigo que recomendei acima, lá nos últimos parágrafos dei minha opinião sobre a antiga decisão da Microsoft:
Mesmo assim, acho que tudo deveria ser nivelado por cima. Porque os desenvolvedores que se preocupam e utilizam os Padrões da maneira correta, são os que devem marcar o browser? Não seria mais fácil criar uma metatag para marcar os sites que não devem ser renderizados com o suporte avançado de Padrões? Quem deve se preocupar, são os desenvolvedores que não dão a mínima para os Padrões. Eles sim devem trabalhar para deixar seus sites atualizados.
A Microsoft voltou atrás com a decisão do Browser Targeting Version. Continuar lendo »
36 ComentáriosParece ser um erro comum dos novatos criar versões diferentes do mesmo site.
O ano era 1997. Eu e e todo mundo que eu conhecia usávamos Netscape Navigator. Foi o ano em que, pela primeira vez, fiz um site sozinho. Tudo, atendi o cliente, preparei textos, fotos, fiz o layout, se é que se pode chamar aquilo de layout, criei uma conta no Geocities e publiquei. Em seguida entrei no Yahoo! e cadastrei o site, para que aparecesse nas buscas.
Depois de alguns dias recebi um e-mail do Yahoo! dizendo que o site não poderia ser publicado no diretório porque não funcionava no Internet Explorer. Continuar lendo »
27 ComentáriosSe você já leu alguma coisa sobre Tableless, já deve ter percebido que nesse método nós separamos a informação da formatação.
Para fazer a formatação do site, ou seja, para literalmente aplicarmos o design do site, nós usamos o CSS (as famosas Folhas de Estilo), que eu julgo ser a principal ferramenta do desenvolvedor para criar sites tableless. Para a apresentação da informação, você pode usar HTML ou XHTML, o que você achar mais apropriado.
A separação entre informação e formatação traz muitas vantagens, mas vou citar apenas duas, divididos em dois artigos:
Então, vamos ao que interessa.
Separando a informação da formatação, você já organiza grande parte do código, pois você os separa em arquivos distintos, um arquivo .css para a formatação e outro arquivo .html (.asp, .php. seja lá o que for) para a informação. Esta simples organização, lhe permite fazer com rapidez e objetividade qualquer tipo de manutenção, sendo ela grande ou pequena.
Imagine a seguinte situação:
Você está no final daquele grande projeto, aquele site em que você fica horas desenhando tabelas, puxando daqui e dali, acertando medidas, etc… e quando você olha para o lado para descansar um pouco as vistas, você chega a pensar que seguiu o coelho branco…
Então, sem mais nem menos seu chefe lhe chama para conversar sobre o projeto e fala que o cliente pediu para que todos os títulos do site mudassem de cor, você o olha desacreditado, e já contando silenciosamente quantos títulos tem no site, se dirige para sua mesa e decide por onde começar.
Se você não passou por esta situação, acredite, muitos desenvolvedores já passaram por isso.
Vamos supor que o desenvolvedor do exemplo acima, usasse para apresentar os títulos a tag <h1></h1>, ele simplesmente atribuiria pelo CSS um valor para que todas as tags <h1> tivessem a cor desejada, em poucos segundos, ele mudaria a cor de todos os títulos do site, e isso tudo, sem mexer no arquivo HTML, economizando o tempo que ele levaria abrindo vários arquivos para procurar as intermináveis tags <font color=”#666666″></font> somente para mudar uma simples cor. Problemas como este, não vão mais tomar o precioso tempo do desenvolvedor.
Agora, e se a manutenção não fosse simples assim? E se fosse mais um pouco complicada, como do tipo mudar todo o layout do site? E se você pudesse mudar todo o layout do site, mudando apenas um arquivo .css?
Em um site tableless, o código HTML fica livre de tags desnecessárias do tipo: <font> <center>, deixando você à vontade para modificar o visual do site usando apenas CSS, te dando total controle sobre localização de objetos, tamanhos, cores e famílias de fontes, medidas, alinhamentos de texto, etc…
Fazendo isso, você pode escrever vários arquivos CSS distintos, que modifiquem o visual do site completamente, e o melhor, sem tocar numa letra do arquivo HTML, ele continua sendo o mesmo.
Vários sites usam está técnica, deixando o usuário escolher o layout que mais lhe agrada, veja alguns exemplos:
Realmente é uma mão na roda, não acha?
Tudo organizado, formatação de um lado, informação do outro, sem complicação… Seu código fica enxuto, limpo, muito menor do que se você tivesse feito do jeito tradicional, lhe dando menos dor de cabeça, e mais tempo. Ainda por cima, você contribui para uma web mais semântica.
No próximo artigo trataremos sobre o ganho de produtividade observado com a aplicação da metodologia tableless.
Leitura Recomendada:
http://www.pedromendes.com/words/molly-200211-truelanguage1.html
Acho que todos já ouviram falar de Web Semântica, para quem não ouviu, em poucas palavras é: Um projeto para organizar e estruturar a informação da WEB.
Ter uma Web com as suas informações todas “organizadas” é extremamente importante, isso facilita uma busca pela Web por informações mais precisas.
Para que seu arquivo possa ser lido por máquinas além de humanos é muito importante que você escreva um XHTML válido, com isso você está fazendo com que as informações do seu site fique mais acessível para as buscas, contribuindo para o projeto e principalmente melhorando as visitas do seu site.
O Doctype (Document Type Definition, vulgo DTD) é a primeira coisa que se deve escrever em um arquivo XHTML, ele vai na PRIMEIRA LINHA do seu documento, se você quiser ter um XML Válido, não devemos esquecê-lo, ele serve para informar ao browser que tipo de documento será visualizado, ok?
Existem 3 tipos:
Exemplo:
<!DOCTYPE html
PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html>
<head>
<title></title>
</head>
<body>
…
</body>
</html>
Quem já escreveu algum XML sabe que ele não funciona até que TODAS as tags estiverem bem fechadas, no HTML era diferente, muitas vezes deixávamos tags abertas, e ele funcionava que era uma beleza.
Para se fazer um XHTML válido, devemos fechar TODAS as tags:
Descobriram que fechando tags desta forma <br/>, não se sabe porque estava causando um problema no Netscape, mas apenas colocando um espaço antes da / o problema é solucionado.
Quem nunca viu um código fonte de um documento HTML escrito assim:
<A href=”http://tags.com.letras.minúsculas/” TARGET=”_BLANK”> </A>
Um documento XHTML deve ter TODAS as tags e seus respectivos atributos escritos com letra minúscula!
Esta regra é bem simples. Todos os atributos XHTML devem conter as benditas “ASPAS”.
O antigo atributo NAME foi substituído pelo atributo ID. Se seus usuários, clientes, etc, utilizam ainda antigos browsers, você pode sem problema nenhum utilizar as duas formas juntas durante neste período em que estamos migrando:
<img src=”imagem.gif” id=”imagem” name=”imagem” />
Não devemos esquecer também os atributos que escrevemos sem valor, por exemplo:
ERRADO:
<option selected>
<frame noresize>
<input checked>
<input readonly>
CERTO:
<option selected=”selected”>
<frame noresize=”noresize”>
<input checked=”checked”>
<input readonly=”readonly”>
E assim por diante.
Se você está migrando do HTML para o XHTML, o TIDY pode te dar uma forcinha.
O TIDY é uma ferramenta para validar e consertar códigos HTML, ele tem opções que você pode escolher qual a versão do HTML você quer validar, uma dessas opções é a XHTML. Se você já está escrevendo um XHTML e quer que seu código fique livre de todos os erros, o TIDY arruma para você.
Ele foi originalmente desenvolvido por Dave Raggett e hoje é mantido por um projeto de código aberto: SourceForge, por um grupo de voluntários.
Fazendo todas essas pequenas porém importantes regras, quer dizer, regras não, LEIS, você terá um belo de um documento XHTML válido, e acima de tudo, estará contribuindo para uma WEB melhor.
Como eu passei apenas o miolo, navegando nestes links poderão ser achados mais informações a respeito:
Para saber se seu documento XHTML é válido:
http://validator.w3.org
Tidy:
http://tidy.sourceforge.net/
http://www.w3.org/People/Raggett/tidy/
Não preciso dizer que os dois carros são totalmente diferentes. Mas, qual dos dois você teria? Me diga… Se você pudesse escolher, você ficaria com qual dos dois?
Acredito que 206 será a resposta mais dita para essa pergunta.
Queria então fazer outra pergunta: Porque você escolheria o 206? O Uno também não vai te levar para lá e para cá como o 206? O que te faz querer um 206 e não um Uno?
Para mim, a culpa é dos detalhes.
Em algumas versões do 206, ao abrir a porta, olhando para baixo, você verá uma soleira de alumínio trabalhado, escrito PEUGEOT, muito bem acabada. Como se dissesse: Prepare-se, você não está entrando em um carro qualquer.
No Uno…
Quando você já está dentro do 206, o painel tem uma série de pequenos compartimentos onde você consegue guardar miudezas como moedas, chaves e etc. Sem contar o material e o desenho do painel.
O detalhe em metal na ponta do câmbio dá um charme diferente para o 206. No Uno não há uma pontinha de metal… mas uma espécie de “sanfona” de borracha envolve o braço do câmbio. Muitas vezes essa “sanfona” rasga na base de plástico do câmbio.
A distância de um detalhe separa sua preferência pelo 206 e seu desprezo pelo Uno. Apenas um detalhe.
E em seus projetos? Já ouviu falar de um ditado que diz assim: O Diabo está nos destalhes?
O mesmo pensamento se aplica sobre PCs comuns e os fabricados pela Apple. A riqueza de detalhes da Apple faz a pessoa se sentir importante.
Outro exemplo: você entra em dois restaurantes: em um deles há 150 mesas. No outro há 15 mesas. Em qual dos dois restaurantes você se sentirá melhor atendido?
Entregar projetos ricos em detalhes faz valer a pena, acredite. Ter aquelae detalhe, mesmo sendo algo que se não existisse, não prejudicaria o funcionamento do todo, faz uma grande diferença. Não importa se o detalhe é visível (layout, texto, etc) ou invisível (código, banco, etc), ele sempre fará a diferença entre você e qualquer outra pessoa.
Pense bem: Os dois carros podem te levar para os mesmos lugares. Os dois restaurantes servem frango à milanesa. Mas em quais das opções você vai se sentir como se tudo fora feito especialmente para você?
38 ComentáriosUpdate: Você pode ver mais video aulas no Campus Online. Vídeos grátis de Tableless e Javascript.
Tinha que implementar um layout, resolvi já fazer um video rápido. Sempre é bom mostrar do que só ficar falando e falando e falando…
Tamanho: ~40Mb
Formato: SWF
Tempo: ~40m46s
Acessar Video
Você também pode ficar sabendo dos lançamentos de video tutoriais e outras novidades pelo nosso Feed… Cadastre-o em seu leitor de feeds favoritos.
47 ComentáriosQuando eu estava criando o site da Visie, aproveitei para gravar um video para depois compartilhar com vocês. O Video está sem audio porque eu fiz tarde da noite e a minha verborragia poderia acordar alguém. Se eu aplicasse a narração depois, talvez correria o risco de sair muito artificial. Por isso, o video não tem audio, mas tem umas legendas que explicam o que eu estou fazendo. De qualquer forma, acho interessante.
Video Tutorial #8 - Criando a home da Visie - Estrutura XHTML.
Tempo: ~8m
Tamanho: ~23,7 Mb
Formato: SWF
Quando tiver um tempinho, liberarei o video da implementação do CSS. Ainda preciso colocar as legendas, e ele é muito mais longo que o do XHTML, se não me engano tem 1 hora de duração.
64 Comentários