Tableless - Desenvolvimento inteligente com Padrões Web

16/03/2006
Artigos

Video Tutorial #8 – Site da Visie – Estrutura XHTML

Quando eu estava criando o site da Visie, aproveitei para gravar um video para depois compartilhar com vocês. O Video está sem audio porque eu fiz tarde da noite e a minha verborragia poderia acordar alguém. Se eu aplicasse a …

Por

Quando eu estava criando o site da Visie, aproveitei para gravar um video para depois compartilhar com vocês. O Video está sem audio porque eu fiz tarde da noite e a minha verborragia poderia acordar alguém. Se eu aplicasse a narração depois, talvez correria o risco de sair muito artificial. Por isso, o video não tem audio, mas tem umas legendas que explicam o que eu estou fazendo. De qualquer forma, acho interessante.

Video Tutorial #8 – Criando a home da Visie – Estrutura XHTML.

Tempo: ~8m
Tamanho: ~23,7 Mb
Formato: SWF

Quando tiver um tempinho, liberarei o video da implementação do CSS. Ainda preciso colocar as legendas, e ele é muito mais longo que o do XHTML, se não me engano tem 1 hora de duração.

Se você quiser mais vídeos e em alta-resolução, visite o Campus Online. Lá você vai encontrar vídeos tutoriais de Tableless, Ajax, Javascript e boas práticas de desenvolvimento web.

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

Newer Comments →
  • http://pedroassis.orgfree.com Pedro Rogério

    Não consigo abrir o vídeo, fala que o arquivo XML não está disponível para exibição!!! Alguém já conseguiu abrir?

  • http://www.felipewebdesigner.com.br Felipe Sacchs Viscovo

    Ótimo tutorial passo-a-passo sobre xhtml, parabéns diego! Fico no aguardo do css, ok!

    Abraços.

  • Fernando

    Diego, Gostaria de saber qual software vc usa para criar essas vídeo-aulas.

  • Rafael

    Comigo, apesar da demora, abriu normalmente.
    Usei o Opera 9 TP2

  • http://www.vedovelli.com.br Fábio Vedovelli

    Excelente! É impressionante como montar um site Tableless é fácil (pelo menos a estrutura XHTML).

    Vcs poderiam colocar um tutorial AJAX sobre aquele busca endereço pelo CEP, que tem no form de inscrição da Visie!

    Abração!

    Vedovelli

  • http://robertomartins.com roberto (bob)

    ótimo tutorial, agora precisamos ver um para aplicar o css. =)

    quero moleza né !

    abração tudo de bom

  • Caio Mancini

    E ae.. achei muito legal esse seu vídeo.

    Só 2 perguntas:
    1 – existe uma diferença semântica entre usar ID ou CLASS para estilizar um elemento. Há alguma regra?
    2 – você poderia passar um tuto como você criou as imagens no Illustrator, seria interessante e também ficaria completo o seu tuto.

    Valeu.

  • Alice Silva

    Não sei se vocês viram da mesma forma, mas vendo este tutorial só veio à minha cabeça a palavra planejamento.

    Está aí, um aspecto que faz um trabalho profissional.

    Obrigada pelo tutorial Diego

  • Bernardo

    Gostei muito do tutorial.
    Tem link pra download? Feed? Podcast?

    Abraços

  • Bernardo

    Outra pergunta, reparei no seu firefox duas extenções que fiquei curioso.
    Os dois no canto inferior direito. Uma que mostra os e-mails que vc recebe no gmail, e a outra tem um ícone de macaco.
    Você pode dizer quais são?

    Atenciosamente,

  • http://www.raphamaster.rg3.net Raphamaster

    Boa Diego!!!

    Bem vc poderia disponibilizar o video para download.

    Abraços

    Raphael

  • ALEXANDRE

    o do gmail é – gmail notifier a do macaco é o Grease monkey

  • Alice Silva

    O do macaquinho deve ser o tal do GreaseMonkey e o do Gmail, certamente alguma coisa para notificar novos e-mails.

    Mas e aquele no canto inferior esquerdo da tela? Não me diga que copia as cores? Se for isso, me diz qual é…. isso deve ser muito util.

  • http://www.jaymeayres.orgfree.com jayme

    Vou esperar anciosamente o video do css.

  • Nelson

    Tem uma função no editplus que passa textos que estão em caixa alta para apenas o primeiro caracter em caixa alta (de cada palavra), é so selecionar o texto e apertar Ctrl + Shit + U se não me engano.
    Abraços.

  • http://www.whodesign.com João Ramos

    Mt bom o video, a velocidade que o diego cria a estrutura do site, e tudo semanticamente correcto, o css que aí vem a caminho deve ficarr mt bom mesmo. Vamos esperar, os cursos da Visie devem estar com um bom nível… haa quanto as extensões que o diego está usando, é só ver alguns posts antigos ( não mt antigos ) do tableless.

  • http://www.emvstudio.com Junio Vitorino

    No IE nao abre o tutorial, eu uso somente o firefox mas to na faculdade e aqui nao da para instalar nada, quando chegar em casa eu olho. =)

    Ai tenho uma colaboração ai e acho que seria interessante, tipo eu gostaria muito de fazer o curso de ajax de vocês da Visie so que nunca mechi com javascript, e o javascript que voces tem la e para quem ja tem o basico. Ai vem a sugestao, sera que voces nao abririam um modulo que ia do javascript basico (para quem sabe pouco ou nada como eu!) e ia ate o ultimo modulo do ajax, tipo nas certificacoes macromedia e afins. Eu seria o primeiro aluno de voces. hehehehhe. um abraco ai t+.

  • http://www.emvstudio.com Junio Vitorino

    e galera to em casa agora e nada de tutorial =(

  • Robson Ricardo

    Gostei bastante do tutorial.
    Assim tirei algumas duvidas que tinha com relação a montagem do layout.

    :D

  • Cristiano

    Alice, aquele do canto esquerda é o ColorZilla e serve para pegar o valor hexa das cores mesmo.

    http://www.iosart.com/firefox/colorzilla/

  • http://www.wcriativa.com Alessandro Pontes

    Adorei o que li e ouvi no site. Nas dicas.. enfim, me apaixonando novamente.

    Sou um novato em tableless.. Preciso, urgentimente reaprender.

  • Alice Silva

    Obrigada Cristiano,

    Baixei e já estou usando. Falando nisso sou viciada nesses brinquedinhos do Firefox, mas, acho que ocupar este espaço para falar deles, embora seja interessante, é também desviar-se do foco.

    É melhor que eu faça o quanto antes o registro no fórum que vocês têm aqui. Por certo já tem alguma coisa a respeito disso por lá.

    Obrigada mais uma vez…

  • http://pedroassis.orgfree.com Pedro Rogério

    O vídeo não funciona no IE mesmo!!!!

  • http://dudufigueiredo.com Dudu Figueiredo

    Interessante a video aula, mas eu não saquei a semelhançã entre “Novidades” e a frase “Se ficar o bicho pega”. =]

  • http://tecinfo03.blogspost.com Paulo

    Não consigo abrir o video no IE.

  • http://pedroassis.orgfree.com Pedro Rogério

    No IE é só acessar esse link: http://tableless.com.br/videotutorial/videotutorial8/estrutura-xhtml.swf, demora para abrir, dependendo da velocidade de sua conexão.

  • http://www.dotzero.neostudium.com.br •Ø

    Só faltou um link para download mesmo… o planejamento foi essencial para a concepção e velocidade com a qual foi montada a estrutura, pois desde o Illustrator o site foi minuciosamente planejado.
    parabéns pelo excelente trabalho.

  • Breno C.

    Muito bom o video tutorial! Fico no aguardo anciosamente pelo do CSS.

    Abraço

  • http://www.promissao.net tsbega

    show de bola o tutorial , tambem não consegui abrir no Internet explorer a não ser colocando a url inteira do swf como disse o Pedro Rogéiro

    Um outro editor muito bom que conheço é o Ultraedit, não comparei ainda com o EditPlus mas é fantástico tambem.
    Meu preferido por enquanto , uso a anos

    Estou aguardando o video do css

  • http://- Henrique

    Muito bom o tutorial, show ein…

  • http://www.e-kaminhos.com leandro

    kra ! show d bola ! acho q vou começar a aprender programar com as video aulas…

    sou bem assim, aprendo vendo os outros fazerem

    teria como vc passar o video do css?
    mesmo sem as legendas…

    qualquer coisa >> liandrovsk@hotmail.com

    abraços ! parabens !

  • http://www.designactive.com.br Alexandre PS

    Teria como vc passar o video do css?
    mesmo sem as legendas…

    e também gostaria de saber qual software vc usa para criar essas vídeo-aulas.

    Att, Alexandre

  • Ionaldo Jr

    Consigo abrir o vídeo, mas fica sem som… alguém teve esse problema?

  • Pingback: crisbox » Blog Archive » Developing Websites

  • Pingback: Video Tutorial #9 - Criando a home da Visie - CSS - Tableless

  • Rafael

    ola. eu nao consigo ver o video.
    eu clico para ve-lo e só aparece uma tela em branco. nao aparece mais nada. eu espero um tempo, mas continua sempre a mesma coisa.

    estou louco para ver o video

    aguardo resposta,

    Rafael

  • Vilmondes

    Poxa…muito bom os seus trabalhos aki no site. Você está de parabéns. Vou já ver a vídeo aula 9. Abraço!

  • http://www.eiqconsultoria.com.br Claudio

    Bom dia Diego, estou aqui mas uma vez para pedir(importunar mesmo) o download deste tutorial.

    []‘s
    Claudio

  • Helder

    Muito bom o a video aula, vai me ajuda muita a estruturar meus códigos

  • Thiago

    O software é o Cantasia 3.0 .

  • daniel

    muitp bom mesmo. ae alexandre tem varios softwares para criacao de videos aulas, eu uso o camtasia studio 3, da uma procurada no google.

  • http://farley.com.br farley

    Faltou mesmo o link pra baixar

  • http://www.precosdebrasilia.com.br Paulo Ueiner

    Como fazer para assistir o video ? O.o

  • http://www.freeweb.com/franklinalves Franklin Javier

    Nao consegui assistir o video. Qual sera o problema?

    soh apareceu um objeto

    Abracos…

  • http://n/A kleber

    o tutor deve ser bom pena eu nao estou camsequindo baixa ele ta dano erro !!

    mais se alguem suber outros postem ai plz
    valew ^^

  • Rogério Teles

    Tenho interesase no Video tutorial #8, pena que o som e a resolução estão horrível no IE.
    Da pra melhorar?

    Abraço…

  • José

    A vídeo aula não está abrindo….

  • josé luca

    ai vc poderia me arrumar uma video aula sobre html

  • adonai

    Legal Diego!!!

    Mas vc poderia disponibilizar o video para download.

    Abraços

    Adonai

  • Daniel

    Hmm…

    seria legal se conseguisse abrir!

    Que tal disponibilizar o link pra download? Acho q ficaria mais fácil.

    Abs!

Newer Comments →