Tutoriais em desenvolvimento web
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).
Anderson Paixão • 16/08/2009
Ainda nem assisti mais!…
.
Mas parabens e muito obrigado!..
…
Marcelo • 16/08/2009
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.
marcelo lima • 17/08/2009
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..
Wallace Pires • 20/08/2009
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..
Tutorial City • 20/08/2009
@#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 ;)
Wallace Pires • 20/08/2009
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.
Tutorial City • 20/08/2009
@#7
Existem dezenas de centenas de temas para wordpress espalhados pela internet, então acho que seria muito mais rápido usar o wordpress.
xXx • 15/09/2009
Parabéns, acabei de assistir agora esse tutorial “FELOMENAL” 1:18 da madruga hehehe
Está ótemo hehehe!!!
abraço!
xXx • 15/09/2009
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!
Tutorial City • 15/09/2009
@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.
xXx • 15/09/2009
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!
Tutorial City • 16/09/2009
@xXx
Você pode assinar os feeds e sempre saber quando tem algo novo.
Abraços ;)
xXx • 25/09/2009
Só pra constar, eu já assinei o feed hehehe!!!
Trambulhao • 05/03/2010
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..
Trambulhao • 05/03/2010
Estrutura
———
Topo:
<h1>
<h2>
..
Artigos:
<h1>
<h2>
..
Menu lateral:
<h1>
<h2>
..
Tutorial City • 05/03/2010
@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
Trambulhao • 07/03/2010
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
Tutorial City • 07/03/2010
@Trambulhao
Mais ou menos por aí. Nos últimos tempos tento usar somente uma vez.
Wellington Esteves • 12/03/2010
Bom cara eu uso Fireworks Cs3
esse processo se aplica a ele tambem ?
e boa video aula você poderia falar com mais vontade mas clareza…
Obrigado..
Tutorial City • 12/03/2010
@Wellington Esteves
Se aplica da mesma forma. Existem pessoas que preferem o Fireworks, e não tem nenhum problema nisso.
Obrigado pelo feedback. Abraços!
Wagner C. • 24/03/2010
Olá Eduardo!
Assisti toda video aula, achei formidável e em resolução excelente para o aprendizado e acompanhamento! Desejo aprender esta linguagem, e assistir ao seu video tem me ajudado muito a entender como funciona esta estrutura.
Meus parabéns e muito obrigado!
Eduardo • 31/03/2010
Nuosssa!
Adorei sua didática e paciência bicho!
Acompanhando suas aulas percebi que você faz algumas anotações para te dar uma sequência na hora de montar o CSS. Coisas como tamanhos, espaçamentos, cores etc.
Gostaria de poder dar uma olhada em como você faz essas anotações.
Acho que isso dá uma orientação bacana na hora de trabalhar.
Organização é tudo, principalmente se tratando de programação.
Meus parabéns pelo conhecimento, e por difundí-lo.
Compartilho da mesma conduta que você. Mas no meu caso sou professor de audiovisual.
Grande abraço do teu xará, Eduardo Le Masson
Tutorial City • 01/04/2010
@Eduardo
Eu só imprimi o código que eu já tinha criado, daí fui copiando e explicando.
Rodrigo Friche • 07/05/2010
Nos links home | about | contact, acho que vc resolve o problema da linha branca acima da linha azul se der um text-decoration: none no link, a:hover. Tenta lá e depois faz o comentário pra gente ok? Parabéns pelo material, tirei muitas dúvidas que num curso PAGO nao consegui tirar! Obrigado!
Tutorial City • 07/05/2010
@Rodrigo Friche
Perfeito Rodrigo! eu reparei isso poucos dias depois de publicar o tutorial, mas aí já não dava pra mudar. Muita perspicácia da sua parte.
Abraços!
Fábio • 11/06/2010
Nossa Tutorial demais!!!!!!!!!!!!!
Continue assim!!!
Lucas • 10/07/2010
Tenho aprendido muito com suas video aulas está de parabéns!
Jhuan Luiz • 15/08/2009
De mais!
Ao exemplo da primeira parte, o tutorial seguiu muito bom e muito bem explicado!
Muito obrigado!