Série de Video Tutoriais sobre Webstandards - CSS

[Henrique Barcelos 290]

Galera... vendo recentemente a quantidade de pessoas aqui no Fórum de Webstandards postando dúvidas com sites estruturados em tabelas, dizendo que tem problemas com CSS, etc, etc, etc, não consegui ficar parado...

 

Como Webdesigner me sinto no dever de lutar por uma Web melhor, mais rápida e mais acessível...

 

Lembro-me quando tinha terminado meu curso de Webdesign (há uns 3 anos)... Tabelas, tabelas, tabelas e mais tabelas... Códigos monstruosos, incompatíveis com todos os browsers...

 

Demorou quase um ano pra eu saber o que era Tableless, WS, W3C, etc...

 

Nisso caí de cabeça na coisa... nem sempre foi fácil, mas tive muita ajuda, aqui mesmo neste fórum, também daquele pequeno site, não sei se todos conhecem: Google...

 

Hoje eu olho pra trás, vejo projetos antigos e falo: taqopariu... como que eu fui capaz de criar um monstro desses???

 

Pensando nesses caras que tão começando agora no mundo da Web, muitas vezes de maneira errada eu resolvi gravar uma série de vídeos tutoriais sobre Webstandards...

 

Não sou um cara muito a toa, nem sempre vou ter tempo de gravar, mas vou fazendo o update do tópico a cada vídeo tutorial pronto...

 

Quero dizer que não sou professor, ou seja, minha didádica não é lá das melhores, mas qualquer dúvida podem postar aqui...

 

Também quero dizer que não sei tudo, cometo erros como todo mundo, mas depois de estar fazendo faculdade numa das melhores universidades do país e ver que meu professor de física sabe menos que os alunos, me perguntei: Se ele pode, por que eu também não posso???

 

Sugestões e críticas (construtivas) são sempre muito bem vindas... Esses 2 primeiros vídeo tutoriais não tem a melhor organização possível, fiz meio que de improviso, nem os formatos estão padronizados (o primeiro é .wmv e o segundo é .mp4), mas a partir do próximo vou fazer um roteiro escrito primeiro pra não falar nada meio enrolado e vou padronizar os arquivos para .mp4.

 

Eu ia por no youtube, mas ele não aceita vídeos com mais de 10 min e se eu for dividir cada tutorial em 2 fica muito bagunçado...

 

ÍNDICE

 

CSS

(26/04/2009)

01 - O Básico

02 - Elementos Block e Inline

 

Update: (10/05/2009)

03 - O Box Model

 

Update: (26/05/2009)

04 - Tabelas: Livre-se delas!

 

Update: (31/05/2009)

05 - Agrupando e encadeando seletores

 

Update: (06/12/2009)

06 - Pseudo-classes, pseudo-seletores e seletores de atributo

 

Update: (14/12/2009)

07 - As propriedades do CSS

 

Update: (14/08/2010)

08 - CSS Sprites

 

Update: (06/11/2010)

09 - Bordas Arredondadas

 

Aguardem os próximos...

[Thiago Retondar 18]

Cara, show de bola sua iniciativa. http://forum.imasters.com.br/public/style_emoticons/default/clap.gif/> http://forum.imasters.com.br/public/style_emoticons/default/clap.gif/> http://forum.imasters.com.br/public/style_emoticons/default/clap.gif/>

 

Abraços.

[Henrique Barcelos 290]

Vlw o incentivo ai thiago...

 

Seria bom os moderadores do forum de Dreamweaver espalha isso por la, pq eh ond o pessoal mais precisa...

[Thiago Retondar 18]

Verdade. Em outro fórum que participava freqüentemente já vi pessoas não querendo aprender "Tableless", por que o cara da vídeo aula/tutorial não usava o Dreamweaver. :mellow:/> :mellow:/> :mellow:/>

 

Não adianta mostrar para a pessoa, incentivá-la a tal coisa, se a mesma não deseja. Porém, não custa tentar. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif/>

 

Abraços.

[Henrique Barcelos 290]

Aff... isso ja eh d+... ¬_¬

 

O Dreamweaver no modo Code eh parecido com qqr outro... Soh nao dah pra usar no modo design pq ele suja totalmente seu codigo...

 

E outra, ateh a versao CS3, ele nao tinha as mesmas facilidade que tem o Aptana, o Eclipse Europa, do tipo inserir 2 aspas duma vez, 2 chaves, 2 parenteses, 2 colchetes, formataçao de codigo, etc...

 

Nao sei a CS4, nm instalei...

 

Agora, o Aptana eh bem melhor para se programar que o DW, fato. Pena que seja mais pesado, mas inda bm q eu tenho um pc decente... ele nem sente... (rimo ^_^/>)

 

O Aptana nem eh tao dificil de mexer... Azar de quem nao quiser aprender...

 

Viver no seculo passado, preso a tabelas...

 

Abs...

[Thiago Retondar 18]

O Dreamweaver no modo Code eh parecido com qqr outro... Soh nao dah pra usar no modo design pq ele suja totalmente seu codigo...

Verdade, porém é um tanto desnecessário ficar usando memória para coisas que não serão usadas.

 

Não utilizei o Aptana ainda, estou com o Notepad++. Talvez eu teste-o amanhã. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif/>

 

Abraços e força com as aulas.

 

P.S.: Só não gravo, pois meu PC não aguenta. :unsure:/> :unsure:/> :unsure:/>

 

----

Edit

----

 

Testei aqui, mas me diz uma coisa. Esse renderizador que ele possuí, é confiável?

[William Bruno 1501]

Testei aqui, mas me diz uma coisa. Esse renderizador que ele possuí, é confiável?

Eu não acho..

pelo menos nas versões que testei, qualquer código meu, tableless que renderiza perfeitamente no IE, Firefox, Safari, Chrome, no visualizador do DW, fica torto, e quebrado.

 

E outra... Alguém navega no teu site, usando DW ?

Então.. pra quê 'testar' nele ??

[Thiago Retondar 18]

:P/> :P/> :P/> :P/> :P/> :P/> :P/> :P/> :P/> :P/>

 

EU não me referia ao visualizador do Dreamwevaer, e sim do Aptana. :P/>

 

Eu não visualizo meus códigos nesses visualizadores. Só perguntei, para quando fazer teste simples e rápido não precisa ficar abrindo novas abas no Firefox. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif/>

[Henrique Barcelos 290]

Bom cara... até hoje nunk tive problemas não... embora eu não utilize muito pq o espaço eh menor que o da janela do firefox msm...

 

Mas eh melhor que o modo Design do DW, isso com certeza!

 

O notepad++ eh bom pq eh leve, mas eu não abro mão da facilidade de digitar apenas 1 aspa, ter as tags fechadas automaticamente... com isso você ganha mta produtividade... Odeio trabalho braçal... <_</> ... ahsuhaushsahsuh

 

Estive viajando esse fds, por isso não gravei + aulas... até o fim dessa semana tratarei do Box-Model... xD

 

Grande abraço...

[Henrique Barcelos 290]

OFF

 

P.S.: Só não gravo, pois meu PC não aguenta. :unsure:/> :unsure:/> :unsure:/>

ahushauhsahshaus... aah... você nm precisa... jah ajuda mto no fórum...

 

Tem dias que eu entro e nos 8 primeiros topicos da lista tá "último postado por: Thiago Retondar"... ahsuahushauhsahus

 

"Paizão" da galera aki no fórum de WS... xD

[Thiago Retondar 18]

Não consegui me adaptar ao Aptana. <irony>É muito leve para meu poderoso computador</irony>. http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif/> http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif/> http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif/> http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif/> Fiquei com o Notepad++ mesmo, pois a única coisa que eu preciso é editor com umas cores nas palavras. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif/>

 

 

OFF

 

P.S.: Só não gravo, pois meu PC não aguenta. :unsure:/> :unsure:/> :unsure:/>

ahushauhsahshaus... aah... você nm precisa... jah ajuda mto no fórum...

 

Tem dias que eu entro e nos 8 primeiros topicos da lista tá "último postado por: Thiago Retondar"... ahsuahushauhsahus

 

"Paizão" da galera aki no fórum de WS... xD

 

HAIohOIAhoshashaoishoashoha Ajudo em que sei. Mas têm muitas coisas que estou aprendendo com os moderadores e usuários mais experiente, como você. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif/>

 

Pô, cara, f**a é que eu tenho vontade de trazer o pessoal para essa área. Vou começar a fazer uns tutoriais aqui.

 

Abraços.

[Henrique Barcelos 290]

Em breve:

 

03 - O Box Model

04 - Tabelas? Livre-se delas

 

OFF:

Eh... não precisa ser vídeo tutorial, posta o código pronto só... xD

 

Já eh uma ajuda e tanto...

[Henrique Barcelos 290]

Fiz o update, galera... aula 3 disponível...

[Henrique Barcelos 290]

Galera, tive uns probleminhas (tive que estudar pra uma prova FDP) esse FDS e não deu pra gravar a 4ª video aula...

 

Assim que puder, gravo...

 

Teh +...

[leomarriel 7]

FAVORITOS COM CERTEZA!

 

estou baixando esses e esperando os próximos em amigo! grande iniciativa

 

 

grande abraço.. fique com Deus.

[Henrique Barcelos 290]

Galera...

 

Demorei + upei a 4ª aula...

 

Foi um sufoco aqui essa ultima semana, mas eu consegui <o/

 

Gravei no sábado... editei no domingo... ontem fiquei sem net ¬¬ e só consegui upa hj...

[Thiago Retondar 18]

Rick,

 

o link aqui está dando como quebrado.

----

Edit

----

 

Está normal, minha net é que está lenta. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif/>

[Henrique Barcelos 290]

ahushaushashau...

 

Bom... aki tá de boa... to com o link aberto até xD...

 

_____

Edit:

 

Putz...

 

enviei o arquivo errado :s... esse não foi editado...

 

ahsuhsausahuasuas

 

Já posto o link certo

 

_____

Edit:

 

Agora o link tá certo xD...

[Henrique Barcelos 290]

Galera, resolvi criar um blog...

 

Nele vou postar sobre diversas coisas, mas acho que a principal será sobre a profissão de Webdesigner e Programador...

 

Coloquei este tópico lá... Visitem

 

Disconnexus

[Thiago Retondar 18]

Muito boa ideia, Rick. http://forum.imasters.com.br/public/style_emoticons/default/joia.gif/> http://forum.imasters.com.br/public/style_emoticons/default/joia.gif/> http://forum.imasters.com.br/public/style_emoticons/default/joia.gif/>

 

Espero que com essa iniciativa sua mais pessoas passem para o lado do "bem". :P/> :P/> :P/>