Vídeo aula

Não consegue visualizar a vídeo aula?

Transformando PSD para xHTML/CSS – parte 1

Olá Pessoal. Me chamo Eduardo Matos e esta é minha primeira vídeo aula aqui no VAB.

Hoje você aprenderá a primeira parte da transformação de um layout, criado no Photoshop, para xHTML/CSS.
A primeira parte é composta do xHTML, a segunda pelo CSS (e várias dicas do Photoshop).

Bom aprendizado!

Photoshop, Vídeo aula de photoshop, Vídeo aula de tableless, xhtml

Artigos Relacionados

Deixar um comentário

Comentários (19 Comentários)

Daniel Farias : 03.10.09 às 12:03

Ótima video-aula. Só o som que está meio baixo, fora isso, nota 10.
Junio Martins : 26.08.09 às 0:46

Muito boa a video aula. Super explicativa,

mas pode me dizer como colocou o editor do aptana com essa interface? (background cinza, e letras em destaque..)

acho muito mais facil para editar…

se poder me da essa dica…

vlw..
David CHC : 25.08.09 às 11:35

@Jonathan Silva, tente limpar o cache do seu navegador. Se vc estiver usando Internet Explorer basta vc apertar CTRL + F5, caso esteja usando o Firefox, vá em Ferramentas > Opções > Avançado. Escolha a Aba Rede, clique em Limpar agora. Veja se isso resolve.
Jonathan Silva : 25.08.09 às 11:07

Não consegui ver nenhum dos 3 vídeos.
Obs.: O flash player e shockwave estão atualizados.
Obs².: Já assistir a outros vídeos dete site.
Andre Figueiredo : 20.08.09 às 9:42

Seria ideal poder baixar os video aula, assim poderia assistir no Celular quando estivesse no transito.
jeferson : 07.08.09 às 2:10

Oi Eduardo!!!

Estamos esperando a segunda video aula……..rss

Tutorial bacana!
Rangel : 02.08.09 às 13:37

Aqui ta de boa o SOM….:)

valeu…muito boa aula.

abss.
André Silva : 01.08.09 às 10:15

@TutorialCity, você salva os vídeo em qual formato? Porque eu uso o .avi e não consigo upar no Vimeo. Abraços.
Tutorial City : 09.07.09 às 13:18

@Amanda, Carlos, Gláucio
Eu uso um Headset e consigo ouvir numa boa. Cheque se o áudio do sistema está no máximo. De qualquer maneira no próxima vídeo vou tomar o cuidado de falar mais alto.

Abraços e obrigado pelo feedback.
amanda souza : 09.07.09 às 0:25

não consegui entender nada o som muito baixo
Carlos : 09.07.09 às 0:23

bom dia , tem que como vc falar um poko mais auto num da pra ouvir nada
Gláucio cajuela : 09.07.09 às 0:18

amigo Eduardo Matos gostaria de pedir uma gentileza sua , falar um pouquinho mais alto nas vídeo aulas pois o audio dessa vídeo aula estava muito baixo , obrigado pela atenção seus tutoriais são nota 10.
Tutorial City : 08.07.09 às 19:27

@TOMER
Como eu disse em um comentário anterior, o xHTML não está necessariamente 100%, quando vou para o CSS eu adiciono ou retiro um monte de coisas afim de fazer uma melhor integração. É bom lembrar que eu fiz essa página aí de primeira, eu não deixei prontinho ou pensei antes como eu poderia fazer, então é normal esses pequenos ‘erros’. E também é bom assim porque os usuários veem o autor debugar o codigo, o que é de grande valia.

@DANIEL JHONATAN
Faço o HTML separado do CSS justamente porque cada um tem o seu proósito, que por sinal são muito diferentes. A parte de CSS vem no próximo vídeo.
Tomer : 08.07.09 às 4:50

Vamos utilizar mais um pouquinho de herança e pseudo-classes né? =P O negoço de post-1 ali tbm não ficou legal não… São todos iguais, uma class faria tudo… Abraços
Daniel Jhonatan : 08.07.09 às 2:06

Fico muito bom, aprendi bastante com essa aula.

Mais eu acho que fica melhor para aprender, pelo menos para mim fazendo igual ao Felipe cardoso.

Ex: Ele digita uma parte do xhtml, e logo depois ela já vai para o css.
David CHC : 07.07.09 às 19:56

@Eduardo, não sei outras pessoas, q modos de ver um formulário pode ser de pessoa para pessoa, uns podem entender com uma certa lista de definição, ou lista não ordenada, etc; Não sei pq, não me agrada muito ver usando uma tag de parágrafo, pq não é um parágrafo. Já vi documentos do W3C utilizam a tag de parágrafo, mas mesmo assim, sabendo q o fieldset é para agrupamentos de elementos com mesmas caracteristicas, acho mais apropriado e semântico. É outra coisa q pode variar, semântica, rs.

Seria interessante, tbm ter colocado um label para input[text]. Mas sei como é, a gente fazendo video aula, sempre esquece alguma coisa, ou não fala pra ficar mais facil o aprendizado das pessoas.

abrs, aguardando a 2ª parte
Tutorial City : 07.07.09 às 19:19

@David
Usei a tag de parágrafo por que elementos em linha tem de ter um elemento em bloco o circundando, e se isso não for feito o xHTML não valida.
Fieldset é legal quando se tem um formulário com vários campos e/ou vários assuntos(dados pessoais de interesses por exemplo).

A idéia das classes é correta, já que acaba diminuindo o tamanho do arquivo CSS. Eu sempre crio o xHTML já pensando no CSS, porém geralmente eu esqueço alguma coisa ou coloco alguma coisa a mais, e esse tipo de coisa eu corrigo quando estou criando o CSS.
A parte 2 desse vídeo vem para completar essa primeira.
David CHC : 07.07.09 às 18:17

Muito boa a video aula Eduardo. Mas pq vc usou a tag de parágrafo para usar no formulário, se existe tag do próprio formulário, como fieldset q fazem a mesma função?

Uma dica interessante, usar classes em elementos q terão a mesma propriedades no css, se quiser personalizar, usar classes múltiplas.
Gláucio Cajuela : 07.07.09 às 18:03

Adorei essa vídeo aula , obrigado por compartilhar estou aprendendo muito com vcs …