Tableless » Vídeos Tutoriais

Propriedade Float do CSS

Diego Eis — Fri, 13 Feb 2009 13:06:02 +0000

Se o Internet Explorer não soubesse como funciona a propriedade float do CSS, o advento dos Padrões Web não vingaria tão cedo. A propriedade float é a propriedade responsável por “administrar” a diagramação do site. É com ela que você irá organizar as caixas e deixá-las exatamente onde devem ficar. A propriedade float dá mais consistência ao Layout. Diferentemente da propriedade position, que pode trazer uma série de inflexibilidades, deixando o layout mais engessado.

Neste vídeo, mostramos um pouco como funciona a propriedade float e sua parceira, clear.
Se quiser, você pode ver uma versão em textual aqui.

Este vídeo e muitos outros podem ser encontrados no Campus Online. Visite e cadastre-se grátis para ter acesso a vários vídeos e conteúdos sobre Padrões Web, Javascript, Ajax, Python e outras coisas.

Posts Relacionados

Vídeo Tutorial – Manipulando atributos com JQuery

Diego Eis — Wed, 03 Dec 2008 11:30:36 +0000

Depois de encontrar os objetos do HTML, é preciso alterá-los. Aprenda como ler, alterar e remover atributos HTML. Conheça também as facilidades da jQuery para trabalhar com classes.

Aconselhamos que você assista esse vídeo em Fullscreen.

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.

Mais comentados

Video tutorial – Implementando HTML

Diego Eis — Thu, 13 Nov 2008 23:52:53 +0000

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.

Posts Relacionados

Vídeos, WordPress, Internet Móvel e mais

Diego Eis — Sun, 31 Aug 2008 06:12:13 +0000

O Tableless está passando por pequenas mudanças, pequenas mas substanciais.

Muita gente me disse que depois do último redesign, ficou muito difícil para encontrar informações aqui no Tableless. Para mim, dono do site, que sei onde encontrar tudo nessa budega, duvidei um pouco, mas depois notei que isso era verdade. Por isso, resolvi organizar melhor o conteúdo. Para começar, separei tudo sobre WordPress que já publicamos em apenas um lugar. Tudo que publicarmos sobre WordPress, irá parar neste endereço. Fiz a mesma coisa com assuntos sobre Internet Móvel.
Farei isso com outros assuntos aqui do site, mas isso leva tempo porque muitos posts antigos estão catalogados em categorias erradas, e isso leva um bocado de tempo para arrumar tudo.

Outro assunto que organizei foi a série sobre Extensions que fiz um tempo atrás aqui no Tableless. Nessa parte você encontra algumas extensões para Firefox úteis para nós desenvolvedores e outras que nos dão alguma referência de funcionalidades.

Sobre os vídeos tutoriais. Esse sim é um assunto que interessa uma boa parte dos visitantes. Os vídeos aqui do Tableless estão bem antigos. Mesmo assim são vídeos que ajudam um bocado a desenvolvedores que estão começando. A Visie lançou a nova versão do Campus Online. No Campus você encontra informação abundante sobre desenvolvimento web e boas práticas. Claro, há muitos vídeos sobre Tableless e estamos preparando uma penca de vídeos sobre Ajax, Javascript e Python, entre outros assuntos. Sem contar no conteúdo textual que havia nos cursos online da Visie que agora estão todos lá. Portanto, aproveite! Os vídeos estão todos em 800×600, e com qualidade ótima para ler o código que digitamos. Experimente.

Outra parte dos visitantes, me perguntavam sempre onde podiam arranjar olink para assinar o Feed do Tableless. Por isso coloquei um atalho nesta página. Vou colocar também nesta mesma página, a tradicional explicação sobre o que é um FEED. Por incrível que pareça, isso ainda é necessário. E para aqueles que tem Twitter, siga o Tableless por lá também! Eu também estou por lá.

Uma outra novidade é que além de mim e do Elcio, estão escrevendo também para o Tableless o Michael Granados, sobre JQuery (que também será um assunto que terá uma sessão exclusiva aqui no site) e o Pedro Rogério, sobre WordPress. Bem-vindos!

Conforme vou atualizando o conteúdo do site, vou reorganizando a segunda parte mais visitada do site depois da home, a página de Aprenda. E aos poucos vamos organizando os 5 anos de conteúdo que o site produziu! É coisa para caramba! Há por exemplo, algumas coisas úteis que estão perdidas por aí, como por exemplo a Tabela de Compatibilidade de CSS e o guia de referência rápida de CSS em português. Informação útil para a comunidade que anda esquecida nos porões do site.

Posts Relacionados

Vídeo: Menu horizontal com CSS em 5 minutos

Diego Eis — Mon, 07 Jul 2008 09:00:59 +0000

Criar um menu horizontal com CSS é muito fácil e tráz algumas vantagens como a facilidade de fazer uma mudança no layout. Sem encostar no HTML, você pode modificar todo o visual do menu via CSS. Se quiser mudar o menu para a vertical, você pode fazê-lo também sem muitos problemas. Fiz um vídeo básico, mudo e rápido de 5 minutos mostrando como se faz um menu horizontal em CSS.

Menu Horizontal em 5 Minutos de Diego Eis no Vimeo.

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.

Posts Relacionados

Layout Fixo / Fluido de 3 colunas em 8 Minutos

Diego Eis — Tue, 10 Jun 2008 13:59:06 +0000

Na verdade a gravação foi feita em 7 minutos e 51 segundos.
Neste vídeo mostro como faço para criar um layout básico de 3 colunas. Esta técnica tem um diferencial: retirando apenas uma linha do CSS, o layout passa de fixo, para fluido (como o layout do submarino ou americanas). Isso dá várias possibilidades de layout para o designer e poupa muito trabalho da equipe ao redesenhar e modificar o layout.

Se quiser ver o exemplo com o código fonte, clique aqui.

.
Link direto para o vídeo Layout fixo/fluido de 3 colunas em 8 minutos.

Novamente o vídeo está sem áudio por motivos de falta de tempo.
Sem áudio não preciso fica me preocupando com a explicação, só digito, gravo e pronto.

[update] Muitas perguntaram porque não pode-se usar na prática, os id’s que eu utilizei no vídeo. Já escrevi sobre isso aqui: Sobre nome e sobrenomes.

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.

Posts Relacionados

Formulário Básico em 8 minutos – Tableless form

Diego Eis — Mon, 02 Jun 2008 09:00:41 +0000

update: 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.

Na verdade ele foi escrito em 7 minutos e 51 segundos e foram escritos apenas o XHTML e CSS. Infelizmente está sem áudio.

O formulário, depois do link, é o “objeto” mais utilizado pelos usuários para interagir com o site. É questão de vida e morte para muitos profissionais. Se não for bem escrito, pode virar um inferno. Com as tags certas, você consegue fazer uma estrutura enxuta e fácil de customizar. Siga a regra áurea do desenvolvimento web: Keep It Simple Stupid.

Direto pelo YouTube: Construindo o XHTML e CSS de um formulário. Se quiser ver o código fonte, clique aqui.

O Coda não é tão bom quanto pensam. Percebam que quando eu fecho as tags de input, ele coloca um /input. Embora haja algumas destas “tosquices”, o acabamento visual e outras características matam os outros editores. Mesmo assim, vou experimentar melhor outros editores como o TextMate.

Posts Relacionados

Padrões Web – Um elogio ao ócio do desenvolvedor

Diego Eis — Tue, 02 Oct 2007 15:40:08 +0000

Abaixo você encontra a palestra que fiz no AlternativaWeb 2007 aqui em Fortaleza. Se quiser ficar mais antenado, estou twittando sobre o evento.

Sou meio suspeito para falar sobre o evento, já que eu sou um dos palestrantes. Mesmo assim, você pode encontrar opinões mais sinceras do Rafael Dourado, Marcelo Augusto, Ilo Aguiar e Chico Neto!

Gostei bastante do primeiro dia. O pessoal dessas bandas é bem animado. Eu não consigo acompanhar! Logo de cara, já queriam me levar em um dos points aqui da cidade: Piratas, a melhor segunda-feira que existe. Deixei pra próxima!

Minha palestra pode ser vista aí embaixo. Se preferir, pode seguir este link aqui.
Os desenvolvedores aqui são dividos em dois gêneros: Ou são muito antenados, ligados com a comunidade e muito participativos. Ou são desenvolvedores quietos, passivos, e que não tem ligação nenhuma com outros desenvolvedores fora da empresa em que trabalha.

Normalmente, a maioria dos eventos sobre desenvolvimento acontecem em lugares como Rio e São Paulo. Salvo algumas exceções que vão para outros estados. Por isso, já parabenizo o Bruno Saraiva e todo o pessoal envolvido em criar eventos assim aqui em Fortaleza e em outros lugares. Deste modo o desenvolvedor brasileiro cresce mais em conhecimento.

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.

Posts Relacionados

CodeShow Videos

Elcio Ferreira — Thu, 16 Aug 2007 21:32:27 +0000

Muitos perceberam que ficamos ausentes por estes dias. Não foi à toa.
Organizar um evento não é mole, quem organiza sabe do que estou falando. Como é um evento diferente como o CodeShow (ele não é um evento onde os palestrantes ficam falando e falando. São desenvolvedores digitando código, criando um sistema, desenvolvendo um projeto). Há uma ansiedade para que tudo saia perfeito.

Além do evento (e comunidade) que estamos lançando amanhã, quero que vocês conheçam o CodeShow Videos (nome e logo ainda não definidos, mas idéia é definitiva).
O CodeShow Videos é uma espécie de YouTube para desenvolvedores colocarem código.

A idéia do CodeShow Videos é que seja um lugar onde nós desenvolvedores encontremos soluções e compartilhemos conhecimento. Um lugar onde possamos gerar novas idéias, ajudar em projetos e ensinar uns aos outros.

O CodeShow Videos só depende de você para dar certo. Publique seus videos ou audio. Faça parte da comunidade e ajude a comunidade crescer.

Mostre o código.

[update] Ainda há uns videos de testes… ignorem!

[update 2] Usamos como base o sistema da KickApps. Para quem não sabe o que eles fazem: imagine que você precise fazer um “youtube” da vida… Eles tem o sistema pronto e todo customizado com CSS. Eles vão lançar updates em breve. Depois dou mais detalhes!

Mais comentados

Encontro Locaweb de Profissionais de Internet

Diego Eis — Wed, 13 Jun 2007 22:26:43 +0000

Ontem estive no ELPI 9 (Encontro de profissionais de internet promovido pela Locaweb).
Tive oportunidade de encontrar alguns ex-alunos da Locaweb e alunos de outras datas. Bom saber que todos ainda estão antenados.
Ah, conheci também o Fred Van Amstel do Usabilidoido. Ele é gente boa.

Um camarada da Microsoft fez uma palestra mostrando o tal do Silverlight. É incrível como eles falam de seus produtos como se não houvesse nenhuma outra alternativa. Como se apenas houvesse a Microsoft na face da terra.
Sabe qual foi um dos argumentos usados pelo camarada que falou do Silverlight: com o Silverlight, a guerra entre designers e programadores irá acabar!
Como se não existisse CSS, XHTML, nem nada de Padrões Web. O pior que com certeza alguns dos ouvintes ficaram convencidos disso.

O Elcio fez uma palestra sobre Microformats. O Andrey Pedro gravou essa palestra quando foi feita em Curitiba e colocou no YouTube. Vale a pena dar uma olhada.

Em tempo, quero lembrar que dia 17 de Agosto, uma sexta-feira, vai ter nosso evento: CodeShow.
Quem ainda não se inscreveu, melhor correr. Tem um bocado de gente procurando, reservando e garantindo lugar. Custa só R$45 e é indicado para designers, programadores e qualquer profissional de internet.