Tableless - Desenvolvimento inteligente com Padrões Web

24/03/2006
Artigos

Video Tutorial #9 – Implementando a home de um site

Update: Você pode assistir mais video aulas como essa no Campus Online. Vídeos grátis de Tableless e Javascript. Esse Video Tutorial mostra o processo de aplicação de CSS em cima da estrutura HTML criada no Video Tutorial #8. UPDATE: Se …

Por

Update: Você pode assistir mais video aulas como essa no Campus Online. Vídeos grátis de Tableless e Javascript.

Esse Video Tutorial mostra o processo de aplicação de CSS em cima da estrutura HTML criada no Video Tutorial #8.

UPDATE: Se alguém quiser baixar o vídeo, só clicar nesse link. O arquivo está em formato Rar (rarlab.com).

O vídeo tem uma hora de duração, portanto esteja preparado. Meus comentários não foram muito incisivos porque eu não fiz o audio durante gravação. Tentei ser o mais completo possível, espero que ajude.

Duração: ~1 hora
Tamanho: 60Mb
Formato: SWF
Acesso: Video Tutorial #9
Download: videotutorial9.rar (formato rar)

Por favor, comentem, vai ser bom.
Obs.: O arquivo é grande, mas tem um buffer muito bom, dá para assistir tranqüilamente sem aqueles gaps. Eu acho. :-D

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

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

    aeeee !

  • Giovani

    Muito bom…parabéns pelo conteúdo!

  • vcosta

    Não daria para colocar um link para download? ;)
    Faz isso no vídeo 8 também seria de muita valia :D

  • paulo

    diego bem que você poderia disponibilizar esse videos tambem para download eu não tenho internet em casa ai fica dificiul…

    vlw

  • http://www.cosmeweb.com.br/blog/ Cosme

    Bem completinho mesmo. Mais de 1 (uma) hora de vídeo bem explicadinho, ninguém tem desculpa para não aprender tableless, só se tiver preguiça mesmo… :D

  • http://www.jaymeayres.orgfree.com Jayme Ayres

    Não tem como disponilbilizar prá baixar? Este e o outro…

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

    Nossa ta massa, não deu para eu ver tudo porque estou no serviço, mas pelo que vi acho que vou reformular o meu jeito de fazer websites! :d

    Obs.: É o Diego não tem como nos deixar baixar o swf?

  • Daniel Gianni

    Diego, porque não utiliza a extensão TAB IE, fica mais fácil alternar entre o IE e o Firefox, só clicar no canto do firefox (tem outros atalhos) que ele renderiza pelo engine do IE dentro do firefox (outra aba ou na mesma).

    https://addons.mozilla.org/extensions/moreinfo.php?id=1419&application=firefox

  • Julian

    nussa

    bem loco

    nao pude ver tudo pq eu tava no serviço tb

    e eu tb gostaria muito se esse e o outro pudessem ser baixados

  • http://www.dotzero.neostudium.com.br Dot•Zero

    Realmente, baixar o conteúdo é muito útil pra quem quer ter trechos do tutorial como referencia mesmo qndo limpou o cache do navegador.
    Está de parabéns pela escolha da ferramenta de design (Illustrator) e pelo tutorial.

    Abraço.

  • Diogo

    Quem disse q não dá pra baixar?

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

    Diego, bom dia, teria como disponibilizar este video-tutorial para downlaod?

    []‘s
    Claudio

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

    Download do arquivo: videotutorial9.rar. Está em formato RAR.

  • http://qhireten.moved.in/meeble Maurício

    Diego, não tem relação com o post, eu sei, mas qual plugin, se é que é um plugin, você usa aqui para o Adsense?

  • vcosta

    Valeu mesmo Diego Eis ;)

    … :D

  • http://www.galirows.com.br Benjamin

    Muito bom mesmo esse video tutorial. Completo.

    Meio metendo o bedelho, você comenta sobre as fontes serifadas. Para quem não sabe e venha a ler isso, Serifas são os pontas que finalizam os traços das fontes. Como são consideradas mais legíveis do que as sem serifa, são usadas em textos. Fontes sem serifa são mais limpos e usadas mais para títulos.

  • http://www.templus.com.br Gisele

    Pro bem da nação…please continue a fazer esses videos….é uma mão na roda…..
    valeuuu mesmoo

    ;-)

  • http://www.renatocruz.com.br renato cruz

    Parabéns pelo conteúdo Diego! É sempre bom ver outras técnicas, embora o fundamento seja o mesmo… Posso dizer que aprendi algumas coisinhas novas! Muito bom! Gostei!

  • http://www.cico.org.br Michael

    Tá… agora só falta o download do video#8

  • Marcelo Carvalho

    Putz assisti só um pedaço mais logo de cara aprendi uma coisa, aquele *(asterisco), não sabia que existia isso.
    Espero, na verdade acho que é Esperamos, que você faça mais videos tutoriais assim.
    to baixando agora pra assistir depois valeu hein Diego, para os iniciantes é ótimo!!

  • Valdeir [ MAX ]

    Vocês, como sempre, estão de parabéns por estes tutoriais disponibilizados a nós, visitantes, que estão iniciando neste mundo Web Designer e também para aqueles que profissionais e querem melhorar as suas práticas de desenvolvimento …
    Continuem assim, pois sua um visitante ativo e pelo que podemos ver, somos milhões de visitantes ativos e diários aqui …
    Parabéns …

  • Elias

    Diego, queria saber se tem como vc disponibilizar as demais videoaulas para download tb . . . pq seria muito bom pra se poder estudar.

    vlw.

    As videoaulas são muito boas . . .

  • Leandro S. dos Santos

    Está de parabéns, e continue disponibilizando para download se possível, pois como pode ver é da vontade de praticamente todos que comentaram.

    PS: Só não entendi porque usou imagem para fazer a separação (num efeito tipo degradê como você mesmo descreveu) dos destaques, alegando que ainda não consegue fazer isso com CSS (de uma forma direta não mesmo), por outro lado usou a técnica das cores das bordas (direita de um link e esquerda de outro link) para conseguir praticamente o mesmo efeito na separação dos itens do menu.

    Se possível poderia me esclarecer isso?

    Estou apenas começando no CSS, então posso estar falando uma besteira das grandes.

    Agradeço desde já.

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

    Parabéns Diego por abrir mão de algumas madrugadas e repartir teu conhecimento conosco.

    O tutorial está muito bom, fiquei feliz em vê-lo, pois aprendi alguns macetes e percebi que eu estou no caminho certo.

    Num futuro tutorial poderia ser mais direto e mostrar algumas abreviações nos css ok.

    Parabéns mais uma vez e VIVA TABLELESS rs….

  • Carlos Henrique Schmitt

    Muito legal !! tenho acompanhado todos os videos do Tableless.. e adoro!

    Sabe o que seria legal também?

    Colocar uma série de dicas de facilidades tanto de softwares e artemanhas..

    Por exemplo, com os video-tutoriais aprendi a usar o notepad++, baixei uma ou duas extensões super uteis do firefox..

    coisas assim… vlw galera..

    abraços e continuem com o bom trabalho!
    estao de parabens!

  • http://www.paodemugen.com.br Erick Viana Leão

    QUal é a quela estenção que vc usa para medir no ff? que fica no canto inferior esquerdo ?

  • Pingback: corporacao Web » Nova Comunidade!

  • Magus

    a extensão do firefox que mede é a MeasureIt :)
    valeu pelo vídeo, ja estou baixando!

  • André – MaNcHa

    Diego, baixei o arquivo e ele deu erro ao abrir, pode verificar se está com algum problema, assisti o video por aqui mas gostaria de ter o video em ksa pra estudar com mais calma!

    No aguardo, André.

  • henrique

    uia que da hora

  • http://www.parcerto.com.br Marcelo

    Parabéns pelo video, não tinha visto ainda nada igual!

  • http://xtremedl.blogspot.com Bruno

    Muito boa tua iniciativa, esse é o espírito, ou seja, compartilhar o conhecimento né, assim como eu faço nos meus blogs (xtremedl.blogspot.com e o mais recente blogv8.blogspot.com)!

    Mas, faltou só o link para baixar as imagens que compõem a página da home page!

  • André

    Parabens Diego, o seu site esta muito bom. Eu fique dois meses sem acessar devido ao trabalho e quando voiltei fiquei muito surpreso.

  • Narley Fabricio

    Muito bom….!!!

    Parabéns….

    Valeus….!!!

  • Pingback: » Tableless, o termo maldito ? | Igor Escobar // Blog | Desenvolvimento, Tecnologia e Informação, na ponta do lápis.

  • Marlon

    Estou muito interessado no em baixar o projeto feito, o arquivo css e a imagem do indesigner …
    Ei sua video aula é 10. Estou iniciando no ramo agora e eu já tinha muita dificuldade mesmo com tabelas mas agora com tableless e as suas videos aulas, estou mais seguro do quero fazer.

  • http://www.rvstudio.net Giovanni

    otimo conteudo mano vlw mesmo.

    estão de parabens!

  • Romário

    o vídeo ficou legal, o ruim foi o audio por que vc não gravou ele junto com o vídeo, daí ficou aquele silêncio.
    mais fora isso ficou da hora!
    e ainda grátis
    estou começando com Design e agora com a sua vídeo aula ta ajudando muito, vou dar uma estudada
    Párabéns!

  • Pingback: Vídeos tutoriais de Webdesign | Tecnologia da Informação - Desenvolvimento e Educação

  • thiago

    cara vc pode me da uma explicada melhor porque num faco a menor ideia de onde comeca meu programa se vc (diego) ou alguem daqui pode me da uma ajuda eu agradeco muito me add no msn quem pode me ajuda nunca tive bateu na minha cabeca em fase aula num entendo nada vi seu video e fiquei impresionado me add no msn thiagou1949@hotmail.com ta ae me ajuda ae por favor cara vlw ae… :D

  • vitor josé gonçalves dias

    Excelente Matéria, assistí só um pequeno trecho no computador de um amigo e achei maravilhoso. Estou baixando todo o arquivo para assisti-lo completo. Quero te parabenizar e agradecer pela força a ajuda que estás dando a nós (pessoas como eu) que ainda estamos engatinhando, no maravilhoso mundo da web. Obrigado e Parabens! Vitor

  • Everton

    Muito bom o conteudo, bem didatico e explicativo, Parabéns pessoal. Deveria existir mais sites como estes, eu conheci o Tableless a pouco tempo e me impressionei com a quantidade e qualidade dos posts. ja virei fãn! Obrigado.

  • Rander

    Olá Diego!

    Realmente a estrutura que você montou está excelente!
    Será que você não poderia disponibizar o layout que você utilizou para que eu possa aprender aqui em casa.

    Valeu!

  • http://www.sousaaraujoti.com.br André

    Conteúdo de primeira!! Parabéns!!!! E obrigadissímo!!