Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Henrique Barcelos

Série de Video Tutoriais sobre Webstandards - CSS

Recommended Posts

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Vlw o incentivo ai thiago...

 

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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?

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

: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/>

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

FAVORITOS COM CERTEZA!

 

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

 

 

grande abraço.. fique com Deus.

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.