artigo webmobile 16 - Desenvolvendo em Tableless
Veja como usar essa metodologia na construção de Web Sites.
Desenvolvendo em Tableless
Veja como usar essa metodologia em Web Site
O que você acha de desenvolver sites rápidos e dinâmicos utilizando a tecnologia certa e de forma correta? Pois é isso que veremos neste artigo, onde mostraremos como desenvolver um site simples utilizando-se da metodologia Tableless.
Talvez muitos já tenham ouvido falar, mas não sabem realmente o que é o tão misterioso Tableless. Na realidade essa é apenas uma metodologia, pois não é uma linguagem de programação ou algo assim e ao longo do artigo você descobrirá como utilizá-la, tendo seu site validado pelo W3C.
Para desenvolver nossa aplicação, utilizaremos o ASP.NET 2.0, com o Visual Studio 2005, mas a simplicidade da aplicação permitiria você utilizar qualquer outro editor de texto, pois o charme disso tudo se encontra na simplicidade de utilização.
O Tableless
O termo Tableless na realidade é nome de característica publicitária, de marketing, que busca referir-se a sites que seguem padrões como o do W3C (World Wide Web Consortium). Como o próprio nome já indica é uma metodologia que prega a não utilização de tabelas para a modelagem de sites da Web.
Considerando que essa não utilização de tabelas, acarreta uma aceleração no que diz respeito ao carregamento (loading) do site. Essa metodologia utiliza de XHTML para gerência das informações e CSS para formatar as páginas. Como podemos perceber não se trata de nenhum bicho de sete cabeças.
Tendo em mente esses conceitos básicos e de certa forma simples vamos ao desenvolvimento, onde você poderá acompanhar como desenvolver um site <?xml:namespace prefix = st1 ns = "urn:schemas-microsoft-com:office:smarttags" />em Tableless. Como citado anteriormente, utilizaremos o Visual Studio 2005 para desenvolver essa pequena aplicação, mas nada impede de utilizar editores de texto simples para essa mesma finalidade.
Primeiramente vamos dar uma olhada na Figura 1 com o layout do site que queremos reproduzir, para depois iniciarmos com o desenvolvimento dos códigos e suas respectivas descrições. A visão prematura de como idealizamos o site é algo extremamente importante, pois começar a desenvolver sem saber onde chegar, pode levar por caminhos que trazem resultados insatisfatórios como a perda de tempo, por exemplo.
Figura 1. Layout do site a ser desenvolvido
Para desenvolvermos, devemos primeiramente criar dois arquivos, um para inserir HTML e outro para conter a folha de estilos do site, que chamaremos de index.html e styles.css. Para iniciar, abra o Visual Studio e acesse o menu File>New>File. Selecione o item HTML Page e clique em Open, com isso o Visual Studio criará o arquivo HTML. Salve esse arquivo como o nome de "index.html" (Figura 2).
Figura 2. Criação do arquivo HTML
Vamos criar agora a folha de estilos, através do menu File>New>File, como feito anteriormente, mas selecione o item Style Sheet e clique em Open, assim será criada a sua folha de estilos. Salve esse arquivo com o nome "styles.css". Muito bem, com isso já temos os arquivos HTML e CSS que utilizaremos para o exemplo. Logo deveremos iniciar a codificação.
Começando com os códigos
Primeiramente vamos importar a folha de estilos (styles.css), para o site (index.html), utilizando a tag style que deve sempre estar dentro da tag head, como mostra o código da Listagem 1.