• Revista PROGRAMAR: Já está disponível a edição #53 da revista programar. Faz já o download aqui!

M6

Tableless

20 mensagens neste tópico

Viva pessoal. :D

Sou do tempo em que a web era constituida por páginas de texto e se usavam apenas 256 tons de cinzento e o CSS não existia.

Ora, mais de uma década volvida, está na hora de me actualizar. :D

Comecei por usar CSS para as coisas básicas: tipos de letra, tamanhos e cores, mas ainda continuo "agarrado" à tabelas e até (palavra proibida para a nova geração de designers) frames.

Como tal, gostaria que me indicassem onde posso aprender a desenvolver sem tabelas, um bom guião para iniciados, de preferência para pessoal da velha guarda como eu. :D

Obrigado.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Obrigado Battousai, vou ver isso com atenção. :D

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

O site do Maujor também é capaz de ser interessante, embora foque alguns aspectos mais avançados.

http://www.maujor.com/index.php

Cuidado que agora ao aprender CSS vão começar novos problemas de compatibilidades entre browsers... culpa do IE, maioritariamente.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

softclean, obrigado pela dica, mas os problemas de compatibilidade é algo com que sofro há já muitos anos, não só ao nível do CSS (que não me é totalmente desconhecido), mas também de JavaScript e outros problemas de render...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Já li este http://www.cssbasics.com/ e achei 5 estrelas, muito claro e fácil de ler, já sabia 85% do que ali estava escrito, mas os outros 15% que aprendi valeram a pena. :D

Também já dei uma olhadela pelo http://www.tableless.com.br e gostei bastante, os vídeo tutoriais foram bastante úteis.

:D

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Hey!

Se fores do tipo de querer saber tudo sobre CSS aconselho-te os livros do dummies.com, nomeadamente:

http://www.dummies.com/WileyCDA/DummiesTitle/CSS-Web-Design-For-Dummies.productCd-0764584251.html

entre outros que terei todo o gosto em arranjar-te se achares conveniente.

Se fores do tipo de ir aprendendo com a prática os sites que o pessoal referenciou são porreiros. Acrescento também:

http://imasters.uol.com.br/secao/css/

Tens que ter em atenção que desta forma o site passa a ser estruturado com base em div's. Cada div pode ter associada um ID ou CLASS que são precisamente a forma de fazer a ligação a determinada propriedade. O ID é utilizado apenas para situações únicas (o teu html só poderá fazer referência a ele uma vez), ao contrário do CLASS que pode ser usado várias vezes. Como por ex.

<div id="content">
<div class="box">box 1</div>
<div class="box">box 2</div>
</div>

Outro grande problema será com a compatibilidade entre browsers. Existem diversos truques para dar a volta ao problema. Para mim o melhor é:

.paddingTeste {
padding: 10px; /* FF, IE6 e IE7 reconhecem os 10px */
!padding: 11px; /* IE7 reconhece os 11px */
_padding:12px; /* IE6 reconhece os 12px */
}

Ou seja se colocares um ! antes de determinada propriedade o FF não reconhecerá essa propriedade (não tenho a certeza se o IE6 reconhece). E se colocares um _ apenas o IE6 reconhecerá essa propriedade. É útil quando determinado "elemento" necessita de valores diferentes para ficar na mesma posição nestes 3 browsers. Isto resolve mas não é de todo a melhor maneira de fazer as coisas uma vez que apenas remedeia e não vai à origem do problema.

Só para terminar:

http://www.positioniseverything.net/

Este site deve ter todas as soluções para problemas de posicionamento, etc.

Cheers!

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Já agora... porque no fim vais querer testar em vários browsers e o IE6 ainda tem uma percentagem importante de utilizadores, vais ter algumas dificuldades uma vez que o IE7 não te permitirá instalar o IE6. O MultipleIE resolve-te o problema.

Entretanto, vais querer testar browsers em outros sistemas operativos. O http://browsershots.org/ ajuda-te com isso.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

lugh, obrigado pelas dicas.

Não me leves a mal, mas tenho muita aversão à série "For Dummies"/"Para Totós": acho que tratam as os leitores como se fossem parvos/totós (foi a impressão com que fiquei ao folhear os primeiros livros com que me cruzei dessa série)...

Não conhecia essa extensão do IE para CSS, de novo a MS a inventar a roda e tentar complicar a vida aos profissionais da área... Enfim...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Não me leves a mal, mas tenho muita aversão à série "For Dummies"/"Para Totós": acho que tratam as os leitores como se fossem parvos/totós (foi a impressão com que fiquei ao folhear os primeiros livros com que me cruzei dessa série)...

Faz sentido porque eu sou um bocado totó...  :cheesygrin:

Em relação ao "IE hack" não sei qual foi a ideia deles mas acaba por ser uma forma eficaz e pouco ortodoxa de resolver as cenas.

Cheers!  :)

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Faz sentido porque eu sou um bocado totó...  :cheesygrin:

Ai é que está o erro... Eles assumem que és totó quando na realidade és apenas ignorante, o que é completamente diferente. Ninguém nasce ensinado pelo que somos todos ignorantes quando nascemos, não somos totós...

Em relação ao "IE hack" não sei qual foi a ideia deles mas acaba por ser uma forma eficaz e pouco ortodoxa de resolver as cenas.

Cheers!  :)

Forma eficaz e pouco ortodoxa?!?

Permite-me discordar, mas a única forma eficaz de resolver um problema é a sua correcção de raíz e não mandar marretadas como parece acontecer aqui. Se há um problema, resolve-se não se criam novos problemas a quem desenvolve para a web. Além disso é tão simples: basta não inventar!

Sou só eu que acho estranho a própria MS ter hacks para cada versão do IE??? Sou só eu que acho estranho não fazerem a coisa certa uma única vez e obrigar a sua própria equipa de desenvolvimento, qualidade e documentação a trabalho extra com algo que, a bem da verdade, não me parece que traga valor acrescentado nenhum???

Mesmo a nível profissional tenho de desenvolver focado em IE, só recorro a extensões da MS quando assim tem de ser, caso contrário sigo o standard, ajuda a evitar dissabores...

A MS devia ajudar e simplificar a vida aos seus seguidores, mas assim só lhes complica a vida...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

As coisas vão finalmente melhorar com o IE8.

O IE6 foi sem dúvida uma vergonha. Era na altura, dos browser mainstream, aquele que menos obedecia aos standards. O IE7 corrigiu muitas das falhas e o IE8 finalmente indica que a equipa de desenvolvimento percebeu de uma vez por todas que já não existe o espaço para browser extensions que existia antes. O IE8 passa no Acid2. As tuas críticas fazem todo o sentido e juntam-se ao coro de protestos que ao longos dos anos obrigaram a Microsoft a seguir de forma mais próxima os standards.

Infelizmente, o mundo empresarial é aquele que em maior parte obriga a que ainda tenhamos de nos preocupar com versões antigas dos browsers. O IE6 tem ainda uma margem significativa de utilizadores, sendo que a grande fatia são empresas. O IE7 irá um dia substituí-lo e manterá ainda por muitos anos a necessidade de nos preocuparmos com estes problemas. Mas depois temos o problema de adopção de outros browsers. Pessoalmente penso que o Safari está a percorrer um caminho perigoso na sua versão para Windows. E das duas uma, ou acaba com a versão Windows, ou resolve os problemas de uma vez por todas. Andamos nisto à anos. Por outro lado o Safari não obedece aos standards numa área particularmente sensível que não é avaliada pelo Acid; a dimensão natural dos controles. Uma dropdown box por exemplo, é sempre maior no Safari do que em qualquer outro browser, porque aqui a parte do control com a seta a apontar para baixo não faz parte da propriedade WIDTH.

Para alguns conselhos de boas práticas na área de CSS hacks, aconselho:

http://24ways.org/2005/avoiding-css-hacks-for-internet-explorer

Dá uma vista de olhos e segue os links

EDIT: Ah! E ia-me esquecendo...

Wiley Publishing - CSS Hacks & Filters, Making Cascading Stylesheets Work, por Joseph Lowery

e

Friends of Ed - CSS Mastery Advanced Web Standards Solutions, por Andy Budd

Tanto um como o outro são excelentes. Compra os dois se puderes. Se só puder ser um, definitavamente vais querer o do Andy Budd

EDIT 2: e também muito útil:

http://centricle.com/ref/css/filters/

http://dithered.chadlindstrom.ca/css_filters/index.html

com listagens de filtros e suas compatiblidades

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

As coisas vão finalmente melhorar com o IE8.

Há mais de uma década que ando a ouvir esse paleio em relação às cenas da MS...

Em parte foi por causa disso que me afastei das ferramentas deles, é que me fartei de esperar e de ouvir "da próxima é que é"...

E quando a próxima chega, desilude em parte e começa a ouvir-se de novo "para a próxima é que é"... :)

Para quem anda nisto à alguns anos, basta lembrar a velha "guerra" do VB não ser OO, para ai desde a versão 2 que ouvia dizer "para a próxima é que é", saiu o .net, muitos anos depois, mas ai já era tarde de mais para mim, nessa altura já eu estava noutra...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Fico contente por o IE8 ser como deve ser, a Mozila fez um bom trabalho! :)

hehe. Vocês são tramados.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

hehe. Vocês são tramados.

:)

Mas é verdade, não fosse a pressão do Firefox e, menos, do Opera e a MS ainda hoje não teria evoluído o IE6.

A concorrência é saudável e benéfica para os utilizadores. :P

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Forma eficaz e pouco ortodoxa?!?

Permite-me discordar, mas a única forma eficaz de resolver um problema é a sua correcção de raíz e não mandar marretadas como parece acontecer aqui. Se há um problema, resolve-se não se criam novos problemas a quem desenvolve para a web.

Eficaz porque produz efeito o desejado. Pouco ortodoxa, mais ou menos, pelas razões que apresentas.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Afinal este topico nao era para passar links sobre tableless...?

(desculpem a falta de acentos, mas onde estou nao da para por acentos)

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!


Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.


Entrar Agora