Tableless - Desenvolvimento inteligente com Padrões Web

13/11/2008
Convertidos

Video tutorial – Implementando HTML

Utilizamos esse layout como exercício nos cursos da Visie. Dependendo do nível do pessoal, utilizamos outros layouts. Mas esse é um que o pessoal normalmente costuma escolher. É um bom exercício porque utiliza as principais propriedades do CSS. Esse e …

Por

Utilizamos esse layout como exercício nos cursos da Visie. Dependendo do nível do pessoal, utilizamos outros layouts. Mas esse é um que o pessoal normalmente costuma escolher. É um bom exercício porque utiliza as principais propriedades do CSS.

Esse e outros vídeos estão disponíveis no Campus Online da Visie. Lá você encontra videos tutoriais de Tableless, Ajax, Javascript e um monte de outras coisas.

Por Diego Eis

Diego Eis criou o Tableless para disseminar os padrões web no Brasil. Como consultor já treinou equipes de empresas como Nokia, Globo.com, Yahoo! e iG. É palestrante e empreendedor.

http://twitter.com/diegoeis/

Veja os outros posts de

  • http://www.lisiano.com/ Lisiano

    Muito bom!

  • http://pothix.com/blog PotHix

    Æ!!

    Parabens por mais um vídeo bem instrutivo!
    Espero que muita gente assista e comece a fazer HTMLs melhores, tanto para facilidade deles mesmo para manutenção quando para o bem de quem for ver ou dar manutenção posteriormente! =)

    Continue assim!

    Há braços

  • http://www.ispac.com.br Evaldo

    Muito bom, muito instrutivo.
    Só uma observação, nas imagens vc utilizou o alt=”", mas sabe-se que alguns navegadores não o reconhecem, então faltou o title=”".

  • Eduardo

    Diego, vi que vc usa no seu MAC, um editor de web, qual o nome dele? e se tem pra WIN?

  • http://tableless.com.br/ Diego Eis

    @eduardo O Editor é o CODA. Só tem para mac! :(
    @evaldo os browsers não reclamam, mas o validador do W3C reclama se não tiver os alts nas imagens. O leitor de tela para cegos também não lê o alt se não o tiver, claro.

    Obrigado @lisiano e @pothix!

  • Gabriel Moretti

    Acredito que o evaldo tenha falado no title no intuito de que realmente aparecesse a legenda ao passar por cima da img. O firefox não reconhece alt, para aparecer a legenda tem que ter o title. Por isso, quando julgo necessário, coloco tanto alt, como title.

  • Pingback: rascunho » Blog Archive » links for 2008-11-14

  • http://juarezpaf.com Juarez P. A. Filho

    Todo desenvolvedor que trabalha com XHTML deveria ver materiais como esse que ensinam o jeito correto de formatar o markup da página.
    Com relação ao title=”" que foi citado anteriormente no caso do logo da página não se faz necessário, pois o logo já é explicativo por si só.
    Usamos o “title” onde precisamos dar ao visitante do site mais informações de determinada imagem. Nesse caso o alt=”Visie…” se aplica para quando o visitante estiver em um browser que não suporta imagens ou para um leitor de telas.
    Ótimo material de referência Diego. Valeu mais uma vez.

  • Thiago

    Essa e minha primeira visita ao Tableless, fiquei muito impressionado com a qualidade do conteudo, parabens.

  • http://id.etc.br Id

    Sério, esses videos são uma terapia pra mim.
    Nada como ver um código bem feito sendo escrito.
    Parabéns Diego!

    Só me tira uma dúvida.
    Aquela DIV “menu” é realmente necessária?
    A classe não pdoeriar ir direto na UL?

  • http://tableless.com.br/ Diego Eis

    Que ótimo Thiago! Espero que volte mais vezes. ;D
    Obrigado ID! :D
    Normalmente eu utilizo o div MENU para deixar mais organizado e também porque eu prevejo alguma firula no menu, como bordas arredondadas. Para fazer as bordas vou ter que usar dois elementos para colocar as imagens de background em cada um dos elementos.

  • http://www.hotmastersound.com.br Durval
  • http://www.vejairece.com.br Reinaldo Rocha

    No meu PC não deu pra ver a aula toda , tem como eu baixar não?

  • http://now William

    Olá, achei esse “comentario” interessante, vocês pode me indicar um tutorial? pois quero fazer um semalhante em meu site, seria possivel?

  • Diogo

    Olá Diego. Adoro suas matérias e seus videos!

    Agora só aguardar a implementação do CSS.

  • http://www.oto.blog.br Oto

    Parabéns pela iniciativa! Os vídeos são intuitivos e interessantes! Abraço!

  • http://rubyongenio.blogspot.com/ Carlos

    Muito legal este tutorial estou programando em rails e melhorando as views tableless é o caminho que estou seguindo e em breve farei o curso . Parabéns pelo artigo.

  • Antônio Júnior

    Saudações Diego Eis.

    Parabéns pela solidária iniciativa dispondo aos Web Developers de plantão, regras e implementações do W3C acerca das revolucionárias CSS e também de outras tecnológias que trabalham conjuntamente com o HTML/XHTML.

    Ótima abordagem dos tutoriais, falo não como um critíco, mas como um aprendiz dos Pradões Web.

    Este site já está nos meus favoritos…

    Abraços. jR.

  • http://centrocriativo.com.br Juan

    Otima vídeo aula, ajudou pra caramba meus alunos.

    Muito Obrigado

  • http://www.aikistudio.com.br Murilo Giachini Ferro de Souza

    Porraa cara vcs são Muito Bons…Padroes WEB. É isso aee!
    Sucess (sou apenas um aprendiz estgiario do AIKI studio…Vejo sempre os videos tutoriais de vcs.
    SUCCESS PRA NÓSS!

  • Paulo César

    Caramba.. uma p…a de uma aula. Parabéns pela iniciativa. Só assim que eu consegui entender esse negócio de .

  • http://aplausopropaganda.com.br Julio Cesar

    Ensina o CSS dele tbm, quebrei minha barreira com Tableless usando este tutorial