Este artigo do site Tableless é muito bom para abrir a cabeça dos desenvolvedores. Atualmente ainda podemos presenciar muitos desenvolvedores que constroem seus projetos todo em AJAX ou em FLASH.
Espero que após ler este artigo você possa utilizar o que cada tecnologia oferece de melhor.

————————-

Aproveitando o post…
Como semana passada postei um screen mostrando o andamento do desenvolvimento do novo layout/estrutura do site da Academia Dojo-kan,  vou aproveitar que o mesmo já foi finalizado e deixar aqui o link do site da academia dojo-kan para quem quiser ver como ficou:
http://www.dojo-kan.com.br

Abraço galera!

• 0 Comentários

Fala galera!
Devido a correria do dia-a-dia a próxima atualização do blog será no dia 10.03.2008.

Estou com muito trabalho para terminar - graças a Deus - e alguns ainda por começar.
Gostaria que sugerissem algum tema para o próximo artigo. Se eu souber sobre o tema sugerido, falarei sobre o mesmo com todo prazer.

Esta semana estou finalizando o layout novo para o site da academia dojo-kan. Abaixo uma imagem do layout novo sendo montado em tableless e previamente testado no firefox. A próxima etapa é migrar o sistema do antigo site para o novo layout.

Abraço a todos!

• 0 Comentários

Esta é uma dúvida muito comum entre os desenvolvedores web, sejam eles webdesigners, webdevelopers ou programadores.

Há poucos dias atrás, em uma conversa com um amigo (o Zaka), ele me perguntou se eu sabia como fazer um iframe redimensionar automaticamente de acordo com a resolução do usuário. Respondí que eu não utilizava e nem recomendava a utilização de frames ou iframes mas que tinha uma solução em javascript para o que ele queria.

Hoje, visitando um dos fóruns ao qual participo, me deparo com a pergunta de um usuário, a mesma pergunta que o Zaka me fez. Foi aí que pensei em escrever este artigo, demonstrando meu ponto de vista sobre o uso de frames ou iframes. Desde já quero deixar claro que esta é minha opnião sobre o uso de frames ou iframes no desenvolvimento de sites e aplicações web e que não estou recriminando os desenvolvedores que utilizam desta técnica(elementos frame e iframe) em seus projetos, pelo contrário, apenas vou tentar citar - a meu ver - as vantagens e desvantagens do uso dos mesmos.

Vou dividir este artigo em dois tópicos: Devo ou não utilizar e Alternativa ao uso de frames e iframes.

Devo ou não utilizar

Para começar, vamos a pergunta básica que vem atona quando abordamos este assunto: É correto utilizar frames ou iframes em meus projetos?
Depende. Do ponto de vista funcional, técnico, da aplicação não há problema algum em utilizar frames ou iframes. Por outro lado o uso de frames e iframes em seus projetos deixam o código assemântico, além de que o frame já encontra-se na lista de elementos HTML/XHTML em desuso(depreciados), já o iframe encontra-se em desuso apenas em documentos XHTML. Provavelmente o iframe, em breve, também estará em desuso no HTML.

Os frames e iframes eram muito utilizados na primeira era da internet, agora com a disseminação dos padrões web e a chegada da segunda era da internet - chamada de web 2.0 (dois ponto zero) - os desenvolvedores devem implementar sites e aplicações semânticamente corretas, ajudando na acessibilidade e usabilidade dos mesmos. A web 2.0 deixou de ser uma tendência e já é uma realidade. Realidade esta que tem por finalidade padronizar sites e aplicações web, tornando-os semânticamente corretos, além de aproximar os mesmos das aplicações desktop.

Em um documento com a estrutura semântica cada elemento(tag) deve ser utilizado corretamente para o contexto ao qual se aplica, referênciando ou dando significado para aquele objeto(código) no qual foi aplicado. Os frames e iframes tornam o código assemântico pois eles não tem valor semântico para o documento.

Como já citei acima, o frame está em desuso, por este motivo a partir daqui vamos só falar do iframe.

O iframe é executado no lado do usuário, por este motivo se o navegador do usuário não tiver suporte a iframe sua aplicação não funcionará. Além disto, o iframe não é bem visto pelos motores de busca (google, yahoo, altavista, etc.) pois ele não inclue o conteúdo de um “documento A” no “documento B” desejado, apenas faz a requisição do conteúdo do “documento A” e abre um bloco no “documento B” para que os dados do “documento A” possam ser exibidos. Desta forma, quando é efetuado uma busca, se o motor de busca achar o resultado da busca em um dos documentos que compõem o documento principal (onde estão contidos os iframes), ele retornará apenas o documento interno onde a busca retornou resultado, ou seja, não vai retornar o documento principal por inteiro.

Acima citei meu ponto de vista do porque não utilizar frames ou iframes. Aí vem a pergunta: Então que solução utilizar no lugar dos frames ou iframes?

Alternativa ao uso de frames e iframes

Uma alternativa muito eficiente ao uso do frame ou iframe é o include.
Vou utilizar o mesmo exemplo que citei sobre o processo dos frames e iframes para explicar o processo do include em um site ou aplicação web.

O include em vez de requisitar um documento - como é feito com o frame e iframe, ele realiza a inclusão do documento em um outro documento, deste modo efetuando uma fusão entre ambos. Por exemplo:

Queremos incluir o conteúdo de um “documento A” no “documento B“. Ao utilizar o include para este processo, quando o usuário fizer a requisição do “documento B“, o “documento B” não vai efetuar uma requisição para exibir o conteúdo do “documento A“, ele vai adicionar o conteúdo do “documento A” ao seu conteúdo, ou seja, o “documento A” e o “documento B” tornam-se um documento único.

O include é muito utilizado em várias linguagens de programação. Se você não quer utilizar nenhuma linguagem de programação em seu site, também pode utilizar o include pelo HTML(Sim, o HTML suporta include). Abaixo vou mostrar como utilizar o include em HTML, ASP e PHP.

Em HTML:
OBS: O servidor deve possuir suporte a SSI (server side includes). Você deve salvar o nome do documento onde os includes estão inseridos com a extensão .shtml.

nome: documento_B.shtml
<html>
<head>
<title>Documento B</title>
</head>
<body>
<!– O código abaixo adiciona o conteúdo do documento A no documento B –>
<!–#include file=”documento_A.html”–>
</body>
</html>

Em ASP:

nome: documento_B.asp
<html>
<head>
<title>Documento B</title>
</head>
<body>
<!– O código abaixo adiciona o conteúdo do documento A no documento B –>
<!–#include file=”documento_A.asp”–>
</body>
</html>

Em PHP:

nome: documento_B.php
<html>
<head>
<title>Documento B</title>
</head>
<body>
<!– O código abaixo adiciona o conteúdo do documento A no documento B –>
<?php include_once (”documento_A.php”); ?>
</body>
</html>

Acima listei o básico para efetuar um include em documentos HTML, ASP e PHP. Caso queira aprofundar-se no assunto, estude os tipos de includes e suas variações para cada uma das linguagens de programação(Lembrando que o HTML não é uma linguagem de programação, é uma linguagem de formatação).

Espero que tenham gostado. Deixem sua(s) opnião(ões) sobre o assunto.

Abraço!

• 2 Comentários

No artigo anterior tentei explicar minha opnião sobre o uso de tabelas para montar o layout de um site.

Mas as tabelas são fundamenteis para exibição de dados tabulares, ou seja, dados que devem ser listados em linhas e colunas para referenciar um mesmo grupo de dados.
E como elas são necessárias, devemos formatá-las com o código semânticamente correto. Neste artigo tentarei explicar o uso semânticamente correto das tabelas.

É comum ver uma tabela formatada em html ou xhtml com a seguinte estrutura:

<table>
<tr>
<td>Texto ou imagem aqui</td>
</tr>
</table>

Estas tags (table, tr e td) são as tags mais utilizadas quando é preciso montar a estrutura de uma tabela. Mas existem outras tags que podem ser utilizadas para montar uma estrutura semânticamente correta para uma tabela. Algumas destas tags são as tags caption, thead, tbody, tfoot e th. Ambas as tags além de tornar mais semântico o código da tabela ajudam a melhorar a customização ou formatação em uma tabela. Abaixo vou lista a definição de cada tag e como criar uma tabela utilizando-as.

1. table
Inicia a construção da tabela.
2. tr
Define as linhas de uma tabela.
3. td
Define as colunas de uma tabela.
4. caption
Define o título, cabeçalho, de uma tabela.
5. th
Recomendada para uso no lugar da tag <td> quando for para exibir um título em uma linha ou coluna.
6. thead
Define a primeira linha de uma tabela.
7. tbody
Define o corpo da tabela, ou seja, o local da tabela onde o conteúdo central é exibido.
8. tfoot
Define qual será a última linha da tabela.

Agora que já vimos para que cada uma das tags serve, vamos exemplificar o uso das mesmas uma uma tabela.

<table>
<caption>Título exemplo Agência 4Design</caption>
<thead>
<tr>
<th>Título Nome</th>
<th>Endereço</th>
</tr>
</thead>

<tfoot>
<tr>
<th>Aqui fica o título nome da última linha</th>
<td>Aqui fica o endereço da última linha</td>
</tr>
</tfoot>

<tbody>
<tr>
<th>Título Fulano de tal</th>
<td>Endereço de tal</td>
</tr>
<tr>
<th>Título Fulano de onde</th>
<td>Endereço de onde</td>
</tr>
</tbody>
</table>

Esta é a estrutura de uma tabela semântica utilizando as tags citadas neste artigo. Note que a tag tfoot é utilizada antes da tag tbody, ou seja, a linha final da tabela é definida antes que o corpo da tabela.

Agora é só formatar a tabela utilizando css para deixá-la com o visual desejado.

Abraço galera! Até o próximo artigo!

• 0 Comentários

Esta é uma frase, quase um slogan, muito ouvida hoje em dia. Mesmo assim muitos desenvolvedores continuam usando tabelas para montar layouts em editores WYSIWYG.

Quem sou eu para te crucificar porque você utiliza tabelas para montar o layout, pelo contrário, vou apenas procurar te informar os benefícios do não uso da mesma na montagem de seus layouts. Logo quando comecei a desenvolver para web, entre os anos de 2004-2005), também utilizava as tabelas como meio para montagem do meu layout, achava o máximo. Em meados de 2006, lí um artigo sobre semântica na web. A partir deste momento comecei a procurar ler mais sobre o assunto. Me aprofundei no estudo de técnicas utilizando CSS (folhas de estilo) e todo o meu conceito sobre desenvolvimento web mudou, foi como ter reaprendido tudo.

Os padrões web existem há muito tempo, mas só agora estão sendo amplamente discutidos e utilizados. Por ter passado por esta fase de transição, sei o quanto é difícil acostumar-se com a idéia de modificar seus conceitos. Muitos desenvolvedores/designers ainda resistem à utilização dos padrões web em seus projetos. Muitos deles se perguntam como migrar seus projetos desenvolvidos tradicionalmente para o desenvolvimento utilizando os pradrões web, tornando o código do projeto semânticamente correto.

De antemão aviso-os que o caminho a percorrer não é fácil, principalmente para desenvolvedores que trabalham há muito tempo na área. Apesar de ser um árduo caminho a percorrer, tenha paciência, tente, se errar tente outra vez, mas nunca desista. O mal de muitos desenvolvedores/designers é desistir após algumas tentativas frustradas em montar o layout sem o uso das benditas tabelas, utilizando a técnica conhecida como Tableless.

Você é um dos desenvolvedores/designers que ainda insistem no uso das tabelas para montar seu layout?
Se sim, você sabe para que as tabelas existem?
As tabelas, no HTML, existem para exibir dados tabulados, não para exibir imagens e textos. As tabelas interferem no desenvolvimento de sites com o código semânticamente correto, além de prejudicar a acessibilidade e usabilidade do site.

Tente desenvolver seus próximos projetos dentros dos padrões web. Não desista nos primeiros erros, insista.
Os padrões web estão aí para ajudar a todos. Quando você comecar a utilizar os padrões web em seus sites verá que além de obter uma melhoria na acessibilidade e usabilidade do site, a manutenção do código também fica mais fácil.

Para comecar no mundo dos padrões web, leiam mais sobre:

1. Css;
2. XHTML;
3. Semântica na web;
4. Usabilidade e Acessibilidade na web.

É isso aí galera. Comecem a desenvolver dentro dos padrões web, ajudem tornar a internet um mundo semânticamente correto.

Abraço!

• 1 Comentário

Fala Galera!
Neste primeiro artigo do blog, vou falar sobre um assunto que ainda levanta muitas dúvidas entre os desenvolvedores web: As diferenças entre HTML e XHTML.
Neste artigo vou citar as principais diferenças entre estas duas linguagens de marcação.

Primeiramente precisamos saber quem é quem, e para que servem.
Como o que vai ser abordado neste artigo são as diferenças entre estas linguagens de marcação, apenas vou citar uma resumo sobre ambas.

HTML
O Html (Hyper TextMarkup Language) é uma linguagem de marcação, que possui atributos e elementos, para formular documentos estruturados para internet.

XHTML
O XHTML (eXtensible HyperText Markup Language) é uma linguagem de marcação derivada do HTML, baseada em XML. Ou seja, quando desenvolvemos com XHTML estamos escrevendo HTML com uma formulação no padrão XML.

DIFERENÇAS ENTRE HTML e XHTML
As principais diferenças entre estas duas linguagens é que:

Em HTML:

• Os documentos, mesmo não estruturados, podem funcionar pois os navegadores procuram interpretar e resolver os erros de marcação(escrita). Já em XHTML não é permitido erros na marcação.
• O fechamento das tags em determinados elementos não é obrigatório, é possível o não uso do fechamento das mesmas em tags como <li>, <dt> e <p> .
  No HTML pode-se escrever dois parágrafos da seguinte maneira: <p>Parágrafo 1 <p>Parágrafo2.
• As tags podem ser escritas em letras minúsculas ou maiúsculas.
  Tanto faz o uso de <br> ou <BR> para efetuar uma quebra de linha. Ambas as tags funcionam em HTML.
• Nem sempre é obrigatório que todas as tags sejam ordenadas corretamente.
  Para formatar um texto em negrito e inseri-lo em um parágrafo pode-se escrever assim: <p><strong> texto </p></strong>.
  Note que houve um fechamento de tags sem padrão algum, pois como a tag <p> foi a primeira a ser aberta, ela deve ser a última a ser fechada.
• Os elementos vazios não necessitam de tag de fechamento.
  Em HTML posso incluir um elemento de quebra de linha deste modo: <br>texto .
  Note que não precisei fechar a tag do elemento.
  
• A sintaxe dos atributos não precisam ser escritas por completo.
  Esta prática é comum na utilização de elementos do tipo input ou select.
  Em HTML pode-se escrever um elemento input desta forma: <input checked>.

Em XHTML:

• Os documentos devem ser bem estruturados.
  Em XHTML não é permitido erros na marcação do código.
• O uso de tags de fechamento para os elementos é obrigatório.
  Em XHTML, para escrever dois parágrafos é necessário a utilização de tags de fechamento.
  <p>parágrafo 1</p><p>parágrafo 2</p>.
• Todas as tags devem ser escritas em letras minúsculas(lowercase).
  Ou seja, em XHTML o uso da tag <BR> ou <BR /> está errado. Para efetuar uma quebra de linha deve-se utilizar o elemento <br />.
• Todas as tags devem estar sempre ordenadas corretamente.
  Para formatar um texto em negrito e inseri-lo em um parágrafo, utilizando XHTML, a escrita é a seguinte: <p><strong> texto </strong></p>.
  Note que houve um fechamento de tags com padrão, ou seja, a primeira tag aberta, <p>, foi a última a ser fechada.
  
• Os elementos vazios devem ser obrigatoriamente fechados.
  Para incluir um elemento de quebra de linha em XHTML utilizo: <br />texto .
  Note que fechei a tag do elemento utilizando uma barra após o mesmo.
  Lembre-se que alguns elementos não utilizam tags de fechamento, por este motivo deve-se utilizar a barra após o mesmo.
  
• A sintaxe dos atributos devem ser escritas por completo.
  Esta prática é comum na utilização de elementos do tipo input ou select.
  Em XHTML deve-se escrever um elemento input desta forma: <input checked=”checked“>.

É isso aí galera. Tentei explicar as principais diferenças entre estas duas poderosas linguagens de marcação. Agora é só estudar o que cada uma delas pode proporcionar a seus projetos e escolher qual delas utilizar.

Até a próxima. Qualquer dúvida é só postar que o mais breve possível estarei tentanto responder sua dúvida.

• 5 Comentários