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

Posts da TAG ‘Vídeos Tutoriais’

Video tutorial - Implementando HTML

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

13 Comentários

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 »

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

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.

17 Comentários

Video Tutorial #10 - Implementação de layout

Update: Assista mais video aulas no Campus Online.

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.

47 Comentários

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

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

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.

64 Comentários

Video Tutorial #6 - Transformando layout fixo em fluido

Muita gente vem me perguntando como se transforma um layout fixo em um layout fluido. Dependendo de como você criou sua estrutura HTML, isso pode se tornar uma dor de cabeça. Mas, você pode criar uma estrutura HTML que seja simples e ao mesmo tempo lhe de a flexibilidade de se transformar um layout fixo em fluido mudando apenas 1 linha de CSS. Nesse video tutorial, você vai conferir como isso é feito.

Duração: ~ 7m54
Tamanho: ~7Mb
Formato: SWF

Assistir agora ou baixe o vídeo.

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.

33 Comentários
Voltar para o topo

Histórico