Tem CSS? YES! Tem AJAX? YES! E não esqueça do HTML!

Uhhuuu tamo na webinsider !!

CSS, Ajax, tudo bem. Mas não esqueça o HTML

Não vai esquecer de deixar seu comentário lá .. hehehehhe

Boss — Por quê fazer o redesign de um site usando Tableless?

Este é uma documento que fiz para a empresa onde trabalho, acho que pode ter utilidade quando precisar falar sobre as vantagens de desenvolver utilizando padrões, tableless, CSS, etc ….

——ƒ——

“Redesign de um site usando tableless”.

Atualização, organização e otimização.

Atualmente o site possui o layout feito com ‘tabelas’, há por volta de 800 linhas de html, css e Java script em um único arquivo. Também existem vários erros de aninhamento de tags na página.

Ao substituir tabelas por layout tableless e corrigir o aninhamento diminuiremos o tempo de carregamento da página para o cliente, e por diminuir o consumo de banda teremos uma melhora na performace do servidor.

Dividiremos o desenvolvimento em 3 arquivos: conteúdo (HTML), layout (CSS) e comportamento (JS), organizando e facilitando a manutenção.
O aspecto visual não será mudado, será adaptado o existente.

O custo deste projeto é o mesmo de um projeto com tabelas, também estaremos sujeitos a empecilhos e imprevistos. Uma outra questão, em alguns sites que utilizam tabelas para o layout ainda existe diferenças de aspecto visual entre diferentes browsers, problemas com alinhamento de boxes e alinhamento de blocos de texto. Podemos solucionar estes problemas como também pode vir a ocorrer outros que certamente poderemos solucionar.
Custos

• Conhecimento de CSS para atualizar.
• Alterações futuras precisam ser feitas com cuidado para não prejudicar o projeto e trazer de volta a estrutura desorganizada e ultrapassada.
• Talvez alguma área do layout precise ser alterada no alinhamento e/ou no tamanho, existem algumas diferenças entre tabelas e CSS.

Um prazo estipulado em 3 à 4 semanas, calculo que seja feito em menor período, mas o prazo adjacente seria para imprevistos que possam aparecer no desenvolvimento do projeto.

Benefícios:

• Diminuir o tamanho do arquivo (estimado em até 20% a 30%), diminuir tempo de donwload, diminua consumo de banda do servidor, diminua o tempo de render no browser.
• O usuário precisará baixar o estilo em CSS uma única vez, o css fica em cache.
• Melhorar a semântica, melhorar a acessibilidade, melhorar a indexação dos engines de busca.
• Melhorar o acesso a diversos dispositivos (leitores de telas, mobile).
• Facilitar o redesign, diminuir o numero de linhas, separar as camadas (conteúdo, layout, comportamento) em arquivos.
• Substituição de metodologia de desenvolvimento web ultrapassada por uma metodologia atual.

A pagina atual:

• A pagina possui layout a base de ‘tabelas’, aumentando o tamanho do arquivo e o tempo de render.
• Possui vários erros de aninhamento de tags pela página, aumentando o tempo de render no browser.
• A alguns CSS embutidos no arquivo HTML, impossibilitando o cachê para arquivo css.
• Um arquivo, espaguete de HTML, CSS, JAVASCRIPT; com 800 linhas.

A pagina após o redesign:

• Estrutura no conceito tableless, seria feito a remoção das tabelas e sua substituição por tags html apropriadas.
• Correto animanhento das tags (diminuindo o tempo de render no browser).
• Arquivo CSS externo (o usuário faz o donwload uma única vez ou quando houver atualização no CSS), isto colabora para diminuir o total de bytes transferidos.
• Diminuir o numero de linhas no arquivo e organizar as camadas.

——ƒ——

Qualquer sugestão para melhorar o discurso será bem recebida.

Diagrama visual

Aproveitando o assunto do post de Walmar (nunca imaginei que iria acompanhar um reality show… ..) “Como construir o mapa do site“, estou começando a aplicar em meus trabalhos o sistema de “Diagrama Visual de Garret“, pra quem não conhece é como um fluxograma das páginas Web.

Venho estudando isto há algum tempo, e percebi que passar a utilizar os diagramas vai além de aprender sobre a simbologia que compõe o diagrama, é necessário também aprender a controlar a ansiedade de começar a codificação (design e programação… ).

Quem quiser saber mais sobre
Um Vocabulário Visual para AI e Design de Interação (especificação traduzida para pt)