Busca

Boas práticas de Desenvolvimento com Padrões Web

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 web standards. Neste primeiro video estamos mostrando como se faz um layout básico de 3 [...]

15/12/2004 por Diego Eis
65 Comentários

É 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!

65 Comentários
Leia também:

    Sua opinião:

    Vamos elevar o nível de discussão. Exponha sua opinião, sua crítica.



    RSS dos comentários deste post
    URL para Trackback

    65 Comentários

    Marcus VBP 15/12/2004 às 00:00

    Legal! dou o meu apoio

    Udo Blücher 15/12/2004 às 00:00

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

    Lucas 15/12/2004 às 00:00

    Ó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!

    dudu Figueiredo 15/12/2004 às 00:00

    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.

    Rafael 15/12/2004 às 00:00

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

    Carlos Eduardo 15/12/2004 às 00:00

    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.

    Newton Wagner 15/12/2004 às 00:00

    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;

    Matheus Zeuch 15/12/2004 às 00:00

    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 15/12/2004 às 00:00

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

    Eu aprovo!

    Humberto S. Ribeiro 15/12/2004 às 00:00

    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 15/12/2004 às 00:00

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

    André 15/12/2004 às 00:00

    DIA 15 EU ACHO….?????

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

    Leandro Vieira Pinho 15/12/2004 às 00:00

    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

    Leandro Nunes (dr1nks) 15/12/2004 às 00:00

    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.

    Christian Barros 15/12/2004 às 00:00

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

    Fellipe Cicconi 15/12/2004 às 00:00

    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

    Alexandre Cordeiro da Silva 15/12/2004 às 00:00

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

    Como eu salvo meu HD?

    Fabrício Soares 15/12/2004 às 00:00

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

    um exemplo foi o uso do float.

    Emerson Coimbra 15/12/2004 às 00:00

    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 15/12/2004 às 00:00

    Bacana. Obrigado pela difusão do conhecimento

    Pedrão 15/12/2004 às 00:00

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

    Lisandro Alavez Pacheco 15/12/2004 às 00:00

    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 15/12/2004 às 00:00

    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!

    juniormcz - Maceió-AL 15/12/2004 às 00:00

    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

    João Paulo Gomes 15/12/2004 às 00:00

    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 15/12/2004 às 00:00

    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 15/12/2004 às 00:00

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

    []‘s

    thiago 15/12/2004 às 00:00

    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 15/12/2004 às 00:00

    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 15/12/2004 às 00:00

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

    Vedovelli 15/12/2004 às 00:00

    Gostei muito! Pode continuar que vai lonte!

    Acidio 15/12/2004 às 00:00

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

    tatiX 15/12/2004 às 00:00

    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 15/12/2004 às 00:00

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

    Alexandre Fernandes de Lima 15/12/2004 às 00:00

    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.

    Pedrão 15/12/2004 às 00:00

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

    Paulo Henrique 15/12/2004 às 00:00

    Excelente tutorial, parabéns para vocês.

    Fabricio C Zuardi 15/12/2004 às 00:00

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

    Cauê Thenório 15/12/2004 às 00:00

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

    Renato Santos 15/12/2004 às 00:00

    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. 15/12/2004 às 00:00

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

    Misael G. Pereira 15/12/2004 às 00:00

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

    Fabio 15/12/2004 às 00:00

    Você tem que conhecer o Macromedia Captivate… :)

    Marcelo Terça-Nada 15/12/2004 às 00:00

    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 15/12/2004 às 00:00

    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..;-)

    GuilhermeFM 15/12/2004 às 00:00

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

    Cesar 15/12/2004 às 00:00

    adorei .. muito bom mesmo

    Romilton 15/12/2004 às 00:00

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

    adriano 15/12/2004 às 00:00

    Muito 10.. vlw amigo

    mgarfil 15/12/2004 às 00:00

    m+++++10 apoio tutoriais em video são melhores p/ estudar

    thaina 15/12/2004 às 00:00

    a estrela maisperto da terra é o sol , vai dizer que n sabe?

    Thiago Rocha 20/12/2005 às 23:00

    =d> Vc está de parabéns!!!

    Muito show! Estou iniciando agora e isso despertou D++++++ o meu interesse pela coisa.
    Valeu mesmo!!!

    Deus te abençoe!

    Antonio Juvenil 02/01/2006 às 16:16

    Sou iniciante. Não conheço programação, mas reconheço. Tanto os vídeos quanto o site todo é “mão na roda”, parabéns.

    Estou pensando em atualizar o meu site e recorrer aos modelos de leyout em css.

    Parabéns pelo seu trabalho.

    Guilherme Utrabo 07/01/2006 às 13:36

    Perfeito! Só temos a agradecer!

    Domingos Bernardo 19/01/2006 às 11:26

    muito bom, esta de parabéns

    Andersopn Campos 03/02/2006 às 21:40

    Naum consigo fazer o download do arquivo.
    Dá erro….
    :(

    Bianco 12/04/2006 às 13:01

    Está com problema no link?
    Também não consigo baixar.

    ROBERTO 30/05/2006 às 12:42

    legal mas vocês podem achar um link no meu site para fazer isto automaticamente, ou ir para http://www.csscreator.com/version2/pagelayout.php. Faz tudo automático ainda coloca os hacks e o media print, achei mais completo!

    Peter 02/03/2007 às 13:12

    Por eu queria baixar a video aula mais nao ta mais quem quiser me mandar
    doctor_benton@hotmail.com
    eu agradeço

    David 26/12/2007 às 16:39

    Diego

    O link sumiu, não estou conseguindo acessar

    e parabéns pelos tutoriais, muito bom mesmo

    Ainda DIVs e Tables? | Alvo Conhecimento 27/02/2008 às 16:14

    [...] http://www.tableless.com.br – layout 3 colunas http://www.maujor.com – Raciocinando com DIVs http://www.maujor.com – Construindo um layout sem tabelas http://www.maujor.com – Layout CSS de 2 colunas com faux column http://www.maujor.com – Layout de 3 colunas em qualquer ordem http://www.maujor.com – Layout 3 colunas http://www.maujor.com – Layout 2 colunas [...]

    Diego 05/05/2008 às 15:06

    valeu pelo video bem o q eu tava procurando valeu