Como passar um layout do Photoshop para xHTML/CSS (parte 2)
Nesta parte faço todo o design com CSS, e como bônus ainda mostro algumas técnicas no Photoshop e no Firefox sobre como agilizar o trabalho.
Na parte três farei o layout ficar compatível com o falecido internet explorer 6(e também a versão 7 e 8).
20 Comentários para “Como passar um layout do Photoshop para xHTML/CSS (parte 2)”
15 de agosto de 2009, sábado às 18:18
De mais!
Ao exemplo da primeira parte, o tutorial seguiu muito bom e muito bem explicado!
Muito obrigado!
16 de agosto de 2009, domingo às 19:06
Ainda nem assisti mais!…
.
Mas parabens e muito obrigado!..
…
16 de agosto de 2009, domingo às 22:13
Parabéns cara! seus tutoriais são excelentes. Sempre que possível disponibile mais, pois está demorando muito. Mas você está de parabéns. Tenho aprendido muito. Agora, estou no aguardo dos próximos.
Muito obrigado pela divulgação do seu conhecimento.
17 de agosto de 2009, segunda-feira às 14:49
muito bom mesmo adorei sua video aula, uma aula mesmo e muito bem explicado mesmo parabens e sempre coloque conteudo assim vai nos ajudar muito mesmo..
20 de agosto de 2009, quinta-feira às 4:02
Oi tudo bom? esse tutorial serve pra criar layout pra blogger tbm? quero criar um layout personalizado e depois passar pra xhtml e css como vc nos ensina, mas quero saber se fica compativel com o blogger, e como faço isso,por favor, se possivel me ajude, entre em contato comigo no email, preciso fazer esse blog até o final do mês, já to criando algo no PS..
20 de agosto de 2009, quinta-feira às 7:19
@#5
Esse processo é absolutamente necessário em qualquer caso onde você queira criar um layout. Cada plataforma(Wordpress, Blogger, ExpressionEngine…) tem sua própria maneira de escrever os temas, então você tem de estudar um pouco a forma com que o blogger implementa seus temas.
Muito breve pretendo criar uma série (bastante completa) sobre como criar um tema para o Wordpress.
Seu host é gratuito ou pago? caso seja pago eu recomendo que use o Wordpress como plataforma, pois é muito mais completo que o blogger, além de possuir uma comunidade gigantesca.
Caso tenha mais alguma dúvida, por favor deixe-a aqui.
Abraços
20 de agosto de 2009, quinta-feira às 9:02
eu ainda não decidi qual deles usar, mais eu estaria disposto a pagar um host pelo wordpress, mas eu estava precisando de algo mais rapido, e não me lembro muito sobre html mesmo tendo feito curso há uns 3/4 anos atrás, mas obrigado, vou reler algumas apostilas que baixei na internet pra tentar fazer isso inicialmente com o blogspot.
20 de agosto de 2009, quinta-feira às 17:12
@#7
Existem dezenas de centenas de temas para wordpress espalhados pela internet, então acho que seria muito mais rápido usar o wordpress.
15 de setembro de 2009, terça-feira às 1:11
Parabéns, acabei de assistir agora esse tutorial “FELOMENAL” 1:18 da madruga hehehe
Está ótemo hehehe!!!
abraço!
15 de setembro de 2009, terça-feira às 1:14
alias, eu gostaria de propor um tutorial.
Tipo, utilizando este mesmo layout, como fazer para funcionar os links de comentarios.
ex.: qndo há novos comentario o link automaticamente receba o valor de qntidades de comentarios.
Obrigado pela atenção!
15 de setembro de 2009, terça-feira às 8:20
@xXx
Para isso é necessário que o site seja dinâmico. Eu tenho a intenção de transformar este layout em um tema para o Wordpress em futuros tutoriais, e nele é possível fazer isso com grande facilidade.
Abraços.
15 de setembro de 2009, terça-feira às 23:15
Obrigado pela atenção…adorei saber que você tem a intenção de fazer este tutorial ai!….
Fico muito empolgado….e entrarei todos os dias para ver se tem tuto novo! hehe…abração!
e parabéns ai pela iniciativa!
16 de setembro de 2009, quarta-feira às 5:41
@xXx
Você pode assinar os feeds e sempre saber quando tem algo novo.
Abraços
25 de setembro de 2009, sexta-feira às 0:07
Só pra constar, eu já assinei o feed hehehe!!!
30 de setembro de 2009, quarta-feira às 17:12
Muito bom, explicação clara.
PARABÉNS…
5 de março de 2010, sexta-feira às 19:15
Oi Eduardo, Tudo bem?
Descobri seu blog no vimeo e gostei muito do pouco que vi. Ensinar bem de forma simples não é fácil, parabéns.
Bom, falando dessa vídeo aula não seria mais interessante estruturar o HTML assim?
Topo:
..
Artigos:
..
Menu lateral:
..
Me corrija se tiver errado! Penso que os buscadores dão mais preferência aos sites que sejam feitos como demonstrei no exemplo. Isso pq cada divisão da página vai ganhar um título de importância maior (H1). Além de facilitar a vida dos deficientes visuais. Não obriga percorrer toda página cada vez que vai usar o menu lateral. Salta logo de H1 para H1 (claro, não contando com o tabindex e accesskey ou outras soluções).
Não é uma critica ao seu tutorial, muito pelo contrário é até uma dúvida minha..
5 de março de 2010, sexta-feira às 19:18
Estrutura
———
Topo:
<h1>
<h2>
..
Artigos:
<h1>
<h2>
..
Menu lateral:
<h1>
<h2>
..
5 de março de 2010, sexta-feira às 22:53
@Trambulhao
1º – Fico feliz que gostou dos meus tutoriais!
2º – Sua ideia de certa forma realmente faz sentido, por que a página seria criada através de pequenos módulos, cada um com h1,h2,h3…
Mas agora pensando semanticamente, uma página sempre tem um conteúdo principal, e uma forma de você mostrar que ali existe algo que deve ser ressaltado é dando uma maior importância usando h1. Se fizer isso em vários locais da página você está querendo dizer que esses locais tem igual importância, porém não acredito que a barra lateral ou o rodapé tem a mesma importância do conteúdo principal. No caso desse tutorial eu usei o h1 no ‘logo’ da página, mas hoje acredito ser uma ideia muito melhor usar essa tag no título do conteúdo em si. Na barra lateral(que tem importância secundária) você poderia usar um h2(se você já não tivesse usado no conteúdo principal). No rodapé(que tem a menor importância) você poderia usar h3(se não tivesse usado em lugar nenhum) ou h4, e por aí vai.
A ideia é você começar o módulo com menor importância de onde você terminou o de maior importância, então se no conteúdo principal você usou h1, h2 e h3, então a barra lateral teria que começar com h4, e assim por diante.
3º – tabindex não deve ser usado, é uma má prática. O mais correto é construir a página na ordem que deve ser lida.
4º – Fique a vontade pra comentar e sugerir outras soluções, assim todos aprendem, e essa é exatamente a ideia do blog.
Abraços
7 de março de 2010, domingo às 13:56
Valeu Eduardo, obrigado pela dicas.
Analisando o próprio site da W3C (http://www.w3.org) a estrutura é feita exatamente como você explicou.
<h1> Imagem do Logo e o texto “W3C” oculto ou escondido no span.
Na coluna esquerda
<h2> O título “Site Navigation” oculto ou escondido.
<h3> Os títulos dos menus
Na coluna dos conteúdos
<h2>, <h3>,..
Isso quer dizer, com rara exceção, só devemos utilizar a tag h1 uma vez por página?
Abraço
7 de março de 2010, domingo às 15:12
@Trambulhao
Mais ou menos por aí. Nos últimos tempos tento usar somente uma vez.
Deixe seu comentário!