Sexta-feira, 09 de janeiro de 2009 às 11h10

(x)html e css para design de interfaces

Faltam 0 dias! Inscreva-se agora! O maior encontro de profissionais web da américa latina.

O papel desempenhado pelo (x)html e css para designers que fazem web parece bastante óbvio para muitos. Porém, ainda há uma grande quantidade de estudantes e envolvidos que relutam quando chega o momento de aprender estruturação.

O que é estruturação?

Trata-se de um termo comum na profissão, quer dizer fazer o código (x)html, desenvolver o css para formatação visual. Normalmente, parte-se de um layout pronto e aprovado, feito em algum programa para criação visual (o photoshop é o favorito). Assim, com os aspectos visuais definidos, a tarefa do profissional será a de transformar aqueles lindos arquivos .psd em páginas web que funcionem corretamente, de maneira satisfatória.

É realmente necessário saber (x)html e css?

Podemos citar uma analogia simples: trabalhar com web e não conhecer essas linguagens, equivale a uma viagem de, por exemplo, seis meses na Inglaterra, sem o mínimo conhecimento de inglês. Por mais que você se muna de todo o aparato-idiomático-fast-food (canetas com scanners tradutores, e-books, palms, smartphones, notebooks), chegará o momento em que sua falta de conhecimento o colocará, obviamente, em situações mais do que constrangedoras.

Portanto, trabalhar com web sem conhecer a sua língua-mãe é praticamente impossível, pois, apesar de haver diversos recursos para desenvolver (x)html e css sem digitar linhas de código, fatalmente chegará o momento em que a falta de conhecimento cobrará o seu preço.

Qual a melhor maneira de aprender?

Evidentemente, com a ajuda de um professor num bom curso, tudo fica bem mais fácil. Por incrível que pareça, existem diversas escolas (de informática ou não) que ensinam o ultrapassado html 4.0.1. O aluno aprende uma linguagem antiga e se baseia em técnicas não recomendadas no momento atual, como o uso de frames (divisão da página em partes distintas, trazendo um enorme obstáculo a acessibilidade), tabelas para lay-out (inserção do conteúdo da página em células de tabelas, gerando um código não semântico, não acessível e muito "sujo", limitando a visualização das páginas em dispositivos de mídia que não os monitores dos PC´s), formatação visual dos elementos com comandos não recomendados de html e utilização de tags(comandos) proprietários sem padronização.

A melhor maneira de aprender é, portanto, aprender o que é certo, analisando o que é errado como se analisa um animal estranho num zoológico. Na web, terra das mudanças constantes e rápidas, ir contra a corrente pode trazer, como consequência final, a desvantagem competitiva.

A utilização de poderosos editores WYSIWYG como o Dreamweaver é praticamente indispensável no ambiente produtivo, porém seu uso deve vir após o conhecimento básico da estrutura da codificação (x)html e css. Assim, com o conhecimento solidificado e correto, torna-se mais fácil a trajetória profissional.

A dica é: aprender a base do (x)html/css, aprender Dreamweaver (ou outro robusto editor visual, por motivos de produtividade - sugiro o excelente Blue Fish) e aprofundar os conhecimentos cada vez mais. Aguarde a próxima parte deste artigo.

Um abraço!

22 comentários

 Eduardo Santos
09/01/2009 17h44

Muito bom discultir o tema...

Fala Fabiano...parabens pelo artigo! Esse assunto da "Importância de aprender HTML e CSS" é algo que deve ser bastante discutido...e com certeza dá muito "pano pra manga"...rs

Abraço...

 Fabiano Pereira
09/01/2009 19h54

Resposta do Colunista

Olá, Agni!
Sim, é um assunto que dá muito caldo, com certeza!

Nos vemos no #cparty!

 Jefferson Gomes
10/01/2009 14h21

To tentando sair das tabelas

Show de bola a materia ....eu sou uma das pessoas que esta aprendendo a força a estrutura o site com css ...ta muito dificil de sair das tabelas ...

 Bruno Mermer
10/01/2009 21h04

HTML

Olá Fabiano. Ótimo artigo, muito bom mesmo. Mas, no ponto sobre a linguagem de marcação, acredito que a questão não é a atulização do HTML 4.0.1, e sim, a correta utilização da linguagem, a sua real finalidade, a marcação de conteúdo.

Um abraço.

 Julio Coronel
11/01/2009 14h23

Saindo das tabelas

Primeiro o artigo é ótimo.
Estou saindo das tabelas não semânticas e das sujeiras geradas pelos editores, agora que estou digitando os códigos na mão, vejo que é muito mais produtivo e correto.

 Fabiano Pereira
11/01/2009 23h33

Respostas do Colunista

Jefferson,
É um esforço que vale a pena!
Obrigado pelos elogios!

Grande abraço!




Bruno,
Sim, o maior problema é a utilização correta.
De qualquer forma, ensinar html 4.0.1 nos dias atuais é,
para mim, pouco útil...
Obrigado pelos elogios!

Grande abraço!



Julio,
Sim, "na unha" se aprende bem melhor!
Obrigado pelos elogios!


Abração!

 André Luís Ferreira Guilherme
12/01/2009 14h04

Livro

Fabiano,

Interessante sua abordagem pq o q se ve no mercado é muita gente que faz um curso de um software (DW, FP, ...) e sai fazendo "site".
Se o programa faz, eles fazem, senão não.

Estou migrando de tabelas pra tableless. Tem algum livro que aborde legal CSS e XHTML que você recomenda. Um com foco maior nas CSS's?

Abraço
André

 Fabiano Pereira
12/01/2009 14h36

Olá, André!
Tudo bom?

Que bom que gostou!
Migrar para as Web Standards é a melhor escolha que um desenvolvedor e/ou designer web pode fazer, parabéns pela sábia decisão.

O melhor livro (em português) é "Construindo Sites com CSS e (X)HTML", do grande pioneiro dos padrões web no Brasil, Maurício Samy Silva (Maujor). Acredito ser exatamente o que procura!

Visite o site:
http://www.maujor.com/livro/livro.html


Grande abraço!

 André Luís Ferreira Guilherme
13/01/2009 00h02

digite aqui seu comentário

 André Luís Ferreira Guilherme
13/01/2009 00h08

Comprado, só aguardando a entrega.

Obrigado pela dica e sugiro que façam posts dos livros que você leêm. Se gostaram, não gostaram, recomendam. Mas que seja realmente a opinião dos colunistas, sem apelar pro comercial e sair falando de todos os livros pra vender e ganhar comissão hehe. Assim como eu, tem bastante gente que gosta de comprar livros e uma indicação é sempre bem vinda.

Abraço
André

P.S.: Esse eskema do envie o comentário pode melhorar. Fiz a msm coisa que vc ai embaixo hehe ;)

 Fabiano Pereira
13/01/2009 07h57

André,

Boa idéia!
De minha parte, sempre que possível recomendarei bons livros em minha coluna, pode esperar! E sem comissão, com certeza ;-)

Grande Abraço

 Filipe Andrade
12/01/2009 16h15

Parabéns

Muito bom o assunto abordado! Eu fui um desse alunos que aprendeu o html4.0 e quando achava que sabia muito descobri que pouco sei e que tenho muito o que aprender. Depois de aprender (x)html não quero saber mais daquelas tabelas horiveis para a contrução de layouts. Hehe agora tabela só uso mesmo para iserir dados tabulados. Valeu!!!!

 Fabiano Pereira
12/01/2009 20h32

digite aqui seu comentário

 Fabiano Pereira
12/01/2009 20h34

Olá, Filipe!
Boa iniciativa, tens razão!

Grande Abraço!

P.S.: o "digite seu comentário" aí de cima foi um pequeno vacilo de meu dedo no mouse, clicando em "enviar" antes de escrever a resposta! ;-)
Desconsidere!

 Gills Lopes
16/01/2009 16h12

UIA

O artigo não trouxe nada de novo; tudo aquilo que já sabíamos escrito de uma maneira diferente.
:(

 Filipe Andrade
16/01/2009 16h25

Depende cara pode não ter acrescentado nada de novo para você mas para muita gente acrescentou sim por isso acho interessante vc substituir o "sabiamos" por "sei" sacou (com todo respeito ok?) achei muito interessante o assunto abordado principalmente para os iniciantes porque acrescenta e muito não só pelo assunto em si mas sim por todo o conteúdo. por exemplo citar a tranformação de um layout em .psd para xhtml seria de grande valia se fosse um tempo atrás pos eu nem fazia ideia havia essa outra possibilidade quando estava iniciando ou seja todo e qualquer assunto é sim de grande valia e acrescenta sim depende do aproveitamento de quem lê. Obs. Não estou chingando nem nada só respondendo e manifestando a minha opinião. Não me leve a mal blza? Abraço!!!

 Fabiano Pereira
16/01/2009 17h56

Gills,
Não escrevi o artigo com a intenção de trazer nada novo, somente para ajudar a clarear as dúvidas que muitos podem ter (bom para você que o assunto já esteja no domínio de suas atribuições profissionais, meus parabéns!). Sou professor de tecnologias web desde 2005, na minha área de atuação, repetir conceitos estabelecidos e ensiná-los repetidas vezes é rotineiro. A grande beleza da web está em sua capacidade de expandir o conhecimento e a visão de muitas pessoas, e não tornar-se um gueto fechado para geeks e nerds que tudo sabem.

Que bom que há espaço para todos!

Grande abraço

 Filipe Andrade
16/01/2009 17h59

Eu assino embaixo disse tudo Fabiano!!!!

 André Luís Ferreira Guilherme
16/01/2009 18h18

Isso mesmo. E aproveitando aos que por acaso não gostem de alguma matéria, que venham com sugestões ou mesmo matérias. Falar que não gostou e não sugerir nada qualquer um faz. Sugiram ao invés de criticar. E caso tenha alguém que se julgue sabe tudo, manda o currículo pra NASA, quem sabe eles chamam...

 Gills Lopes
19/01/2009 18h47

Olá, pessoas!
Entendo a indignação de alguns à minha crítica (valeu Felipe e Fabiano por escolherem as palavras certas e me fazerem perceber o erro); realmente fui mto relapso e pouco produtivo com ela, sobretudo por ter esquecido que nem todo mundo sabe as mesmas coisas :)
Aproveitando o gancho (de direita ^^) do André, realmente faltou dizer o pq de eu ñ ter achado interessante o artigo e ñ simplesmente tê-lo criticado: é que eu li todos os artigos do Fabiano em ordem cronológica e estava achando tudo massa e tals, mas este - por ser o mais recente - não pude conseguir encaixá-lo na cronologia e daí resolvi "comentar".
Bom, foi isso. Desculpem de novo e a NASA que se cuide! ^^
Abraços,

 Fabiano Pereira
23/01/2009 20h49

Olá, Gills!

Agradeço pela participação!


Abraços! [e continue participando!]

 Alessandro Guimarães de Andrade
05/11/2009 10h52

Bom artigo!

Oi Fabiano, quero agradecer por esta informação, atualmente encontro-me em uma situação que após formado (Tecnologia em Redes de computadores) tornei-me um auto-didata em css / xhtml.
Suas informações foram muito úteis... aprendi a fazer sites com softwares dream weaver, fireworks e flash porém usando tabelas...
Como você mencionou acima... aprender o que é certo ajuda e muito na competitividade, no meu caso está me ajudando a entrar no mercado de trabalho!

Cancelar resposta

Qual a sua opinião?

Faça login abaixo ou cadastre-se rapidamente.


Patrocínio:
Sobre o Autor
Fabiano Pereira é designer de interfaces; professor de tecnologias Adobe e de desenvolvimento web; colunista do iMasters; articulista do design.com.br e Web Insider; empreendedor; músico e curioso de plantão. Mantém o blog http://www.fabianoweb.net/blog

2001 - iMasters FFPA Informática Ltda - Todos os direitos reservados.