Tableless - Padrões Web com Pastel e Caldo de Cana

Posts da categoria ‘Vídeos Tutoriais’

Layout Fixo / Fluido de 3 colunas em 8 Minutos

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.
Continuar lendo »

27 Comentários

Formulário Básico em 8 minutos

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. Continuar lendo »

16 Comentários

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

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.

11 Comentários

CodeShow Videos

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!

12 Comentários

Encontro Locaweb de Profissionais de Internet

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.

9 Comentários

Vídeo: palestra de Tableless

Como eu sei que tem muita gente aqui que não deve ter visto: Vídeo Palestra de Tableless.

Antiga, mas pode interessar vocês.

5 Comentários

Video Tutorial #11 - Amostra do Opera Mini

Bem, este não é um video tutorial como os outros. Eu só tentei capturar com uma webcam furreba algumas imagens do Opera Mini.

Para quem não sabe, o Opera Mini é a versão do Opera para celulares com Java. O Opera tem uma série de versões de seu browser. Começa em desktops, passa pelo Nintendo DS, chegando até ser base para Media Lounge. Sem dúvida, um dos melhores browsers atualmente.

Eu capturei o video em AVI, mas ficou enorme, na faixa de 200, 300Mb… Tentei transformar em SWF, como faço normalmente com os videos tutoriais do Tableless, mas ficou com 30Mb, muito ruim também. O melhor jeito que eu encontrei foi transformar em DIVX. Para ver, você precisará ter algum player que toque arquivos .divx.
Vou tentar criar outra versão mais acessível, se alguém souber de algum jeito fácil, por favor, diga.

Video Tutorial #11 - Opera Mini
Tamanho: ~7Mb
Tempo: ~1m00

O Opera Mini se mostrou muito robusto. Bem fácil de manusear. Fazer um browser para aparelhos celular não é coisa fácil. Você é muito limitado a algumas ações, mas o Opera conseguiu se mostrar muito acessível. As opções são fáceis de encontrar e de acessá-las pelo teclado.

Nos desktops, o Opera sempre teve as melhores formas de navegação via teclado, e no celular ele ainda consegue manter este padrão. Você consegue navegar facilmente pelos links. Rolar a página também não se mostrou um problema, ele tem um rolamento suave que quebra um galhão.

Como estamos falando de um browser para celular, as configurações que você tem acesso são bem resumidas. Você pode baixar skins, gerenciar marcadores (favoritos), gerenciar histórico, aumentar qualidade das imagens, definir se você quer ver ou não ver imagens, aumentar tamanho de fonte, etc…

Quem tiver a oportunidade de instalar no seu celular, não perca tempo.
Se você não pode instalar o Opera Mini, não se preocupe, no site do Opera há um Simulador do Browser em seu site. É só visitar e testar.

16 Comentários

Video Tutorial #10 - Implementação de layout

Tinha que implementar um layout, resolvi já fazer um video rápido. Sempre é bom mostrar do que só ficar falando e falando e falando…

Tamanho: ~40Mb
Formato: SWF
Tempo: ~40m46s
Acessar Video

Você também pode ficar sabendo dos lançamentos de video tutoriais e outras novidades pelo nosso Feed… Cadastre-o em seu leitor de feeds favoritos.

45 Comentários

Video Tutorial #9 - Implementando a home de um site

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.

37 Comentários

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

62 Comentários

Voltar para o topo

Outros posts

Aprenda