Tableless - Desenvolvimento inteligente com Padrões Web

15/12/2004
Geral

Vídeo Tutorial #1 – Layout basico de 3 Colunas

É o seguinte: Este aqui é um teste, e se houver um boa aceitação por parte de vocês, vamos tocar para frente. Este é o nosso primeiro Vídeo Tutorial. Um jeito fácil, rápido e melhor de ensinar e divulgar os …

Por

É o seguinte: Este aqui é um teste, e se houver um boa aceitação por parte de vocês, vamos tocar para frente.
Este é o nosso primeiro Vídeo Tutorial. Um jeito fácil, rápido e melhor de ensinar e divulgar os web standards. Neste primeiro video estamos mostrando como se faz um layout básico de 3 colunas! Então, para quem é mais experiente, tenha paciência, aumentaremos a dificuldade com o decorrer do tempo.
Espero que gostem, e desculpem-me os erros.

Vídeo Tutorial #1 – Layout básico de 3 Colunas
Tamanho: 3,75Mb
Formato: SWF
Tempo: 4m:58s
Baixar estudo

Algumas observações:
O vídeo está como swf porque foi o formato que ficou menor em tamanho. Tentei AVI e MOV, mas ambos ficaram para lá de 28Mb, ia ficar difícil de baixar 28Mb para assistir 5 minutos de vídeo.
E o programa que usei foi o Camtasia Studio.

Para ver mais vídeos sobre técnicas de CSS e Tableless, visite o Campus Online. Cadastre-se grátis e veja vídeos em boa resolução!

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://www.marcusvbp.com.br Marcus VBP

    Legal! dou o meu apoio

  • http://www.estilobrasileiro.com.br Udo Blücher

    Tembém achei muito interessante. Estão de parabéns por mais essa idéia …

  • Lucas

    Ótima idéia, só assim acho que vou conseguir aprender pois estou muito perdido no assunto, já tentei mas não saio do básico css, tableless eu não consigo entrar de jeito nenhum.. valew e espero mais vídeos!

  • http://dudu.figg.com.br dudu Figueiredo

    Achei muito legal!
    Só pelo video que da pra perceber algumas práticas de programação que são muito úteis, com certeza devem ter mais vídeos. Se possível vcs podiam falr de css Hacks, que não é um assunto muito difundido, mas é de suma importancia para resolver as diferenças dos browsers.

  • http://fragmentosimg.blogspot.com Rafael

    Muito boa e bem executada a idéia, parabéns.

  • Carlos Eduardo

    Tambem gostei, mas achei o som um pouco baixo. Video Tutoriais eu acho que são exelentes porque fica mais facil de compreender como foi feito.

  • http://www.owshit.com.br/newton Newton Wagner

    Po… ótima idéia mesmo! :D .
    Só algumas sugestões:
    - aumentar um pouco o som;
    - diminuir a resolução da tela um pouco.. pra assistir aqui no 1024×768 não dava pra ver a tela toda dentro do navegador;

  • http://beam.to/taq/ TaQ

    Muito bom! :-)

  • Matheus Zeuch

    Interessante. É mais uma ótima iniciativa de vocês, parabéns!

    Diego, você comentou sobre os formatos para o vídeo, para ficar com tamanho menor. Já ouviu falar no DemoCharge? É um software da YesSoftware (criadora também do CodeCharge). Essa ferramenta grava os arquivos em Gif Animados, e os deixa bem leves. Não sei se é a melhor opção, mas talvez seja interessante dar uma olhada.

    Um grande abraço

  • Acidio

    Fico muito show, eu adoraria se os tutoriais escritos passassem para video aulas, principalmente sobre tableless.

    Eu aprovo!

  • http://digitalthink.blogspot.com Humberto S. Ribeiro

    Ficou show de bola, o tamanho ficou grande, eu uso 1280×1024 e ocupei uma boa parte da tela pra ver poderia ser menor 800×600 e o som num me pareceu tão ruim, só aumentei o volume e foi tranquilo. Mas aquela paradinha do relógio no meio foi desnecessária, aumenta o tamanho do video e num acrescente em nada.
    Mesmo assim ficou fera. merece os parabéns.

  • Laert Yamazaki

    Parabéns pela iniciativa. Com certeza vocês estarão ajudando muita gente que está começando e com muitas dúvidas.

  • André

    DIA 15 EU ACHO….?????

    meu.. tem um calendario do lado do relógio.. mais vc nao sabe que dia vc ta??
    caray

  • http://leandro.plugsites.net Leandro Vieira Pinho

    1º Parabéns pela iniciativa.

    Bom acho muito bacana a iniciativa de vocês, vídeo tutoriais é o que há no momento e muito mais fáicl de compreender. Estou esperando tutos mais avançados.

    Dica:
    *Aumentar + o som
    * Diminuir a resolução do vídeo tutorial, estou usando 1024×768 e ainda aprensenta barra de rolagem na horizontal.
    * O Captivate da macromedia também é um excelente programa para tal.

    VAleu

  • http://www.dr1.com.br Leandro Nunes (dr1nks)

    cara, MTO legal o vídeo, show de bola !! Bem explicativo.

    Dicas (redundantes):
    * diminuir a resolução (consequentemente o tamanho do arquivo de vídeo).
    * Como alguém disse, tbém achei desnecessário falar o horário e dia, isso poderia vir na divulgação do tutorial, mas caso necessário, fazer de forma rápida no vídeo para nao aumentar o tamanho desnecessariamente.
    * Não acho legal transformar em gif só por causa do tamanho do arquivo não… esse ae tá perfeito e já tem um playerzinho em flash, mto legal !!

    Parabéns e totalmente apoiado.

  • http://www.supracomunicacao.com Christian Barros

    Caramba! Isso é muito maneiro! Parabéns!
    =-)

  • http://www.rockgrafia.com Fellipe Cicconi

    Show de bola! Eu curti! Cara, com esse videozinho rolando eu posso ficar dormindo na frente do teclado e o pessoal pensa que eu tou trabalhando! 10!!!

    Brincadeiras a parte, curti mto mesmo, me senti confortável em saber que não sou o único que faço as coisas quase iguais a outros da área. E ainda dá pra sacar algumas manhas.

    Excelente

  • http://www.rdc.fhp.com.br/Cart_oRDC_1.jpg Alexandre Cordeiro da Silva

    Foi um sucesso de mídia e audiência, este tutorial!!

    Como eu salvo meu HD?

  • Fabrício Soares

    Simplesmente genial. Em vídeo para determinados assuntos o aprendizado e muito mais facil.

    um exemplo foi o uso do float.

  • http://www.enasca.com Emerson Coimbra

    Show de bola!!!
    Já estou encaminhando o link pro pessoal aqui do trabalho assistir. vamos ver se eles olham o tableless com outros olhos agora… :-)

    Realmente foi uma decisão muito feliz da parte de vocês. Parabéns!

  • João Lúcio

    Bacana. Obrigado pela difusão do conhecimento

  • http://www.jedimania.com.br Pedrão

    Só faltam começar a cobrar por esse "serviço", como fazem o pessoal da Gringolândia.
    Parabéns.

  • Lisandro Alavez Pacheco

    Linguagem clara, tutorial simples e de fácil entendimento. Uma poderosa ferramenta de aprendizado. Já venho acompanhando o tableless por mais de seis meses e sempre me surpreendo. Parabéns!

  • Alexandre Müller

    Pedrão não dê idéia *rs*

    Ficou excelente, fica muito mais facil compreender com uma explicação em video, agora resta esperar para tutorias mais complicados :)

    Parabnéns por esse ótima idéia!

  • http://www.junior.vertnet.com.br juniormcz – Maceió-AL

    Pode fazer outros porque o primeiro já foi aprovado com louvor pela galera eu gostei muito. minha sugestão crie uma área para agente ir fazendo o download das video-aulas para guardá-las no computador

  • http://www.johnowl.com/ João Paulo Gomes

    Primeiro: Parabéns pela iniciativa!

    Segundo: concordo com o pessoal que disse que a resolução do video poderia ser menor, eu uso 800×600 e parecia que eu estava espiado o video pelo buraco de uma fechadura, mas mesmo assim deu para entender e aprender com o video. E também concordo quando disseram que o volume poderia ter ficado mais alto.

    É isso, parabéns e estou esperando o próximo video.

  • Rodrigo Maia

    Muito bom, D+.
    Isso também evita o ctrl+C , ctrl+V…rsrs.

    Como deixar o windows com aquela aparencia?
    Ou é MAC mesmo?

    Mais uma vez parabéns.

  • thiago

    Muito bom! :) parabéns!
    legal mesmo, adorei
    foi bem tranquilo, sem ctrl+c ctrl+v

    []‘s

  • thiago

    Ah, assim..
    ctrl+c ctrl+v é besteira…
    afinal de contas, opensource está aí..
    estou dizendo, que foi bem mastigado.. sem pular etapas … isso foi legal

  • Johnes

    Como todos já disseram: Parabéns. Excelente.
    Acho que não existe melhor maneira de aprender do que esta.
    Tenho criado algumas páginas tableless, porém tenho dificuldade para deixa-lás idênticas no Firefox e no IE. Eles interpretam algumas coisas diferentes. Gostaria de ver tutoriais abordando este tema, se possível é claro…
    E mais uma vez, PARABÉNS.
    Estamos aguardando por mais tutoriais.

  • Michael

    Gostei, parabéns a todos por disponibilizarem o aprendizado de mais uma técnica ótima para criação de sites… viva o mundo livre!

  • http://www.vedovelli.com.br Vedovelli

    Gostei muito! Pode continuar que vai lonte!

  • http://www.a2c.com.br Acidio

    EI uma pergunta como você fez para transformar em SWF?

  • tatiX

    Excelente iniciativa!

    Já vou passar o link para o pessoal que está iniciando web standard aqui na empresa.

    Com as melhorias que o pessoal já passou, ficará perfeito!!

    =)

    ps: adorei o papel de parede do micro…hehehe

  • Willian Moreira

    Tutor simples e imediato, ajuda muito quem está começando.

  • http://www.bestdestinations.com.br Alexandre Fernandes de Lima

    Adorei, vou me aprofundar mais na área tableless e digo que fiquei um pouco acomodado por usar sempre frontpage e deixar que ele faça tudo por mim.

    Mas tem duas perguntas que gostaria de respostas: 1 – vc tem um xp com cara de mac ou é um mac mesmo? 2 – Desejo baixar o vídeo.

  • http://www.jedimania,com.br Pedrão

    Amigos, não repararam q esse SWF é via streaming? Não dá para fazer download. Se eu estiver escrevendo besteira me corrijam.

  • Paulo Henrique

    Excelente tutorial, parabéns para vocês.

  • http://idomyownstunts.blogspot.com Fabricio C Zuardi

    Muito bacana, direto ao ponto, gostei! Parabéns!

  • Cauê Thenório

    Muito legal, vou divulgar pro pessoal agora mesmo! Parabéns!!

  • Renato Santos

    Muito boa idéia, meus parabéns pelos ótimos trabalhos que vocês estão realizando a favor da modernização da nossa web.

  • Gilberto Crespo Jr.

    o link do BAIXAR ESTUDO está com problema
    Favor colocar o link certo que é este abaixo:
    http://tableless.com.br/videotutorial/videotutorial1/videotutorial1.zip
    Abraços

  • Misael G. Pereira

    Muito bom o arquivo de audio, sensacional, continuem investindo nessa área, e um drinke a Web Standards..rs

  • Fabio

    Você tem que conhecer o Macromedia Captivate… :)

  • http://poro.redezero.org Marcelo Terça-Nada

    Obrigado por fazer os tutoriais que estão disponíveis neste site! Tenho aprendido muito com eles. Esse formato do vídeo é sensacional! Porque além de abordar o "tema" do vídeo, vc explica várias outras coisas em paralelo.

    Parabéns pela inciativa e pela generosidade de compartilhar seus conhecimentos.

  • Wilson de Oliveira Jr

    Como diria nosso colega Dr. Spock:
    "Vida longa e próspera" para esta iniciativa. A gente não reclama dos tutoriais escritos, mas as video aulas são insuperáveis..;-)

  • http://www.guifm.com GuilhermeFM

    perfeito, estou começando a utilizar o tableless, parabéns ótimo tutorial !

  • Cesar

    adorei .. muito bom mesmo

  • Romilton

    blz cara, muito bom, faça outros veio…
    gostei
    Barabens

  • http://www.arfoweb.com adriano

    Muito 10.. vlw amigo

Newer Comments →