artigo webmobile 16 - Desenvolvendo em Tableless

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (0)  (0)

Veja como usar essa metodologia na construção de Web Sites.

Esse artigo faz parte da revista WebMobile edição 16. Clique aqui para ler todos os artigos desta edição

imagem.JPG

ASP.NET

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.

 

Iniciando o desenvolvimento

Tendo em mente esses conceitos básicos e de certa forma simples vamos ao desenvolvimento, onde você poderá acompanhar como desenvolver um site 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.

 

Analisando o layout

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

 

Utilizando o Visual Studio

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.

 

Listagem 1. Importando a folha de estilo no arquivo HTML

<head"

A exibição deste artigo foi interrompida :(
Este post está disponível para assinantes MVP

 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Receba nossas novidades
Ficou com alguma dúvida?