Calma, não é comercial de alguma banda de rock ou rede de relacionamento. Trata-se de um acrônimo: Keep It Simple, Stupid.
Um grande número de problemas que os iniciantes enfrentam são por causa da complexidade do código. Muitas vezes os div´s aninhados substituem as tabelas aninhadas, fazendo o sentindo de se implementar com Padrões Web se perder.
Deixar o mais simples possível.
Praticar a simplicidade não é fácil… Parece simples, mas não é. Precisa de muito esforço, planejamento e um bocado de experiência (que só se consegue praticando).
Um jeito fácil de se conseguir à simplicidade sem muito esforço é prestar muita atenção na Semântica dá página.
Por exemplo: para fazer um parágrafo, você precisará de apenas uma tag (<p>), e não de dois div´s.
Para fazer uma coluna simples, você precisará de apenas uma tag <div>, e nada mais…
Quando você estiver implementando um site, e perceber que o código está complicado, difícil de ler, comece de novo, provavelmente você está fazendo alguma coisa de errado.
34 Comentários
34 Comentários
Edu 01/02/2005 às 00:00
Hoje ainda é dia 01/02/2005.
Alexandre Gomes Gaigalas 01/02/2005 às 00:00
Uma das coisas que ando vendo ultimamente é exatamente isso, muitos usuários fazem o site em tableless, mas com o XHTML muito porco, não se preocupam com a semântica da página…
Daniel 01/02/2005 às 00:00
como funciona esse tag <dig>???
obrigado!
Jonatas Moisés Sas Lacerda 01/02/2005 às 00:00
Eu sou uma prova viva disso! Estou fazendo meu primeiro site Tableless e acho que compliquei todo o CSS, heheheh, deixei cheio de elementos inúteis, etc.. No XHTML estou tentando, pouco a pouco, neste site mesmo, remover as tags inúteis que são herança dos sites com tabelas.
Acho que quem tá comessando, tem o direito de fazer essas coisas, pq é muito difícil largar as tabelas e ir para o tableless, pq estamos muito acostumados a elas. E como o Diego mesmo disse, é praticando que se aprende.
Se o Internet Explorer não fosse tão ruim, eu teria tido menos da metade do trabalho que eu já tive. Pq eu fiz tudo olhando só no Firefox e depois fui olhar no Netscape e no Opera, teve e tem um probleminha no Opera, mas nada demais, no Netscape ficou identico, mas no IE nada tinha sentido. Digo isso pq quando nós, iniciantes, damos de cara com um site que não funciona, comessamos a fazer de um tudo para que ele funcione, ainda mais no IE que as pessoas mais usam, mas em contrapartida seu código (pelo menos no meu caso) vai ficando um lixo.
Eu vou tentar melhorar o código, mas por enquanto ainda não rola… hehehe
Deem uma olhada: http://www.inic.com.br/default1.asp
[]‘s
Jonatas
PS.: Acho muito importante esse tipo de discussão.
Alexandre Gomes Gaigalas 01/02/2005 às 00:00
Não existe tag <dig>, foi um erro de digitação do editor, é <div> na verdade.
Mas, dependendo da coluna, não dá pra usar só um <div>… por exemplo se eu quiser dois backgrounds (um no topo, e um no rodapé da coluna), tenho que colocar dois div’s encadeados, cada um com seu background devidamente posicionado. Em breve isso será resolvido quando todos os browsers aceitarem o atributo "content" e as pseudo-classes ":before" e ":after".
OBS: Já chehuei a fazer 9 div’s para criar uma caixa redimensionável em todos os sentidos :\
Genau 01/02/2005 às 00:00
Alexandre,
O conceito de simplicidade, se aplica exatamente a isso.
Pra que criar 9 divs diferentes se pode-se simplificar o código?
Seria realmente necessário criar um layout tão "engessado" a ponto de ser necessária a implementação de 9 div´s diferentes apenas para criar <espanto>apenas uma</espanto> caixa redimensionável ?
É aí que o post faz sentido…
Keep it simple!!!
Bruno 01/02/2005 às 00:00
Pois é, acho que hoje estamos tão apegados às tabelas, pois foi a primeira forma de conseguir organizar o conteúdo de uma página de maneira adequada. Acho que até os ‘padronizadores’ de código se acomodaram, até agora. Ainda bem!
Eu gostei e tenho adotado o conçeito tablelles, primeiro eu monto a página, com o CSS ativo, depois tiro o CSS e, se ficou legível, continuo, senão recomeço a estrutura denovo…
por Bruno, o Kühnen.
Jonatas Lacerda 01/02/2005 às 00:00
Já que estamos falando de simplicidade e se tocou no assunto ‘caixa redimensionável’ e dois ou mais backgrounds em um único elemento, pergunto, há uma forma de se colocar mais de um backgound em um elemento?
[]‘s
Jonatas
Valentín Moreira 01/02/2005 às 00:00
Só da para convinar um background-image e um background-color no mesmo elemento.
Eu tento tirar o "código merda" aproveitando os selectores de filhos ou descendentes do CSS. Da para ter uma compatibilidade com Internet Explorer 4.
Nao da para facer muito mais por encuanto (para mim que tento a maior compatibilidade backward com CSS avançados).
Glacial 01/02/2005 às 00:00
Kakakaka! Gostei do trocadilho ..
Fellipe Cicconi 01/02/2005 às 00:00
Veio bem a calhar essa dica.
Vcs já falaram sobre DOM aqui? Acho q seria legal esse assunto pro futuro.
Alexandre Gomes Gaigalas 01/02/2005 às 00:00
Genau, a idéia e o método de caixa redimensionável (quando digo redimensionável digo que tem tamanho relativo ao conteúdo) eu tirei do "A List Apart" e dei uma turbinada, para redimensionar não só verticalmente mas horizontalmente também!
Você define uma única caixa e pode usá-la no site inteiro, não importa a altura ou largura do conteúdo.
Mas 9 div’s por que? Simples:
top, left, bottom, right, corner-top-left, corner-top-right, corner-bottom-left, corner-bottom-right, background.
Bruno, se você aprender XHTML semântico não precisará re-escrever seu código várias vezes… o conteúdo sempre ficará legível
Jonatas, o único modo cross-browser de colocar dois backgrounds em um único conteúdo é usando mais de um div nele.
Genau 01/02/2005 às 00:00
Alexandre,
Vou me expressar melhor.
Quando eu me referi às caixas "redimensionáveis", quis dizer que não seria necessário 2 backgrounds em divs diferentes, se o layout, no momento da concepção for idealizado "pensando na filosofia Tableless" – Entende? -
O ue quero dizer. é que muito trabalho inútil e energia mal gasta pode ser evitada, criando uma interface não menos bonita e funcional, já imaginando como ela será aplicada no xhtml/css
Por exemplo:
Caso queira criar 3 backgrounds diferentes para uma mesma página, e você tem o controle do conteúdo a que ela estará aplicada, poderá usar o conceito de "faux columns" amplamente difundido no meio.
Abraço,
Jonathas Scott 01/02/2005 às 00:00
KISS para todos nós…
Caio Mancini 01/02/2005 às 00:00
como o colega disse, o atributo "content" é mto útil e as pseudo-classes :before e :after também.
gostaria de vê-las sendo tratadas mais aqui, bem como as outras pseudo-classes
Marcelo Linhares 01/02/2005 às 00:00
Outro dia eu descobri um recurso no dreamweaver que faz EXATAMENTE isto, converte tabelas em camadas…
Comando: Modificar -> Converter -> Tabelas em Camadas…
estão curiosos para ver como fica o código da página???
http://www.asabh.org.br/
E aí????
Que vantagem maria leva????
hahahahaha
Diego, foi muito bom ter tocado neste assunto, tableless virou moda e muitas pessoas não estavam sabendo nem da metade da história.
Genau 01/02/2005 às 00:00
Marcelo,
Sim, o Dreamweaver transforma layers em camadas, mas pra sua decepção , não faz nem 10% do que um código semântico e estruturado necessita pra ser chamado de um bom XHTML.
A Maria, leva vantagem em aprender a semântica, com um CSS mais limpo e separado do HTML, diferente do que o dreamweaver tenta com propriedade, mas não faz.
A outra metade da história, Marcelo, você tem que APRENDER fazendo.
um abraço,
Marcelo Linhares 01/02/2005 às 00:00
Genau,
parece que você não entendeu a ironia do meu argumento…
mas deixa pra lá…
hahaha
Genau 01/02/2005 às 00:00
Opa Marcelo,
Desculpe,
se vo^ce tivesse usado as tags de XHTML eu teria entendido…
<ironia> </ironia>
hahahahaha
Abração…
Alexandre Gomes Gaigalas 01/02/2005 às 00:00
Essa conversão de tabelas do dreamweaver é igual ao CSS que o photosho gera… é bem limitado! mas já é um começo…
Marcelo Linhares 01/02/2005 às 00:00
"Essa conversão de tabelas do dreamweaver é igual ao CSS que o photosho gera… "
Opa..
esta eu não sabia…(a partir de qual versão tem esta opção?)
mas provavelmente deve ser uma <ironia>mer***</ironia> igual ao do Dreamweaver…
Caio Mancini 01/02/2005 às 00:00
pelo menos na versão 7 pra cima o PHotoshop gera CSS qdo se usa o recurso de "fatiar" imagens.
eu nunca testei nem o CSS do Dreamweaver ou do Photoshop ou de <palavrão>lçfakjfç</palavrão> nenhuma. O que me interessa é treinar estudar o usso do CSS junto com o XHTML e outras linguagens para criar sites mais usáveis, belos, dinâmicos e realmente úteis.
Afinal não é este o intuito deste blog/forum?
Jonatas Lacerda 01/02/2005 às 00:00
Olha onde o papo KISS foi parar! Exatamente nos mais anti-KISS que existem, Dreamweaver e Photoshop (que nem pra tabelas fazem o serviço bem feito) <risos />!!!
Mas agora fica a pergunta que não quer calar, qual é a fórmula de KISS???? Como, com a falta de senso dos desenvolvedores de Browsers como o IE podemos manter a coisa simples???? Putz, eu tô quebrando a cabeça com coisas como a <palavrao>mer****</palavrao> do background pro próprio CSS que não dá pra colocar duas imagens e alinhar, no site que estou fazendo fiz uma coisa linda de se ver, tanto que vou mudar, mas vou ter que aninhar, pq preciso dos backgrounds…..
Genao, vc pode falar mais do "faux columns"?
E uma dúvida que tenho, é válido e/ou usar uma ‘expression’ para correção de erros no IE?????????????????
[]‘s pra todos
Jonatas
Genau 01/02/2005 às 00:00
Jonatas, primeiramente discordo em voê falar que o Photoshop e o Dreamweaver são "anti kiss", mesmo por que, quem faz o site ser simples ou não, é o próprio desenvolvedor. Principamente se feito em XHTML, pois não importa o software que seja utilizado, e sim a forma em que é desenvolvido.
<propaganda>Eu mesmo utilizo o Dreamweaver e o Photoshop para desenvolver sites e garanto a vocÊ que não faz nenhuma diferença no ponto de vista funcional, utilizá-los.</propaganda>
Quanto ao Faux Columns, pode-se encontrar muita coisa na internet a respeito.
Indico aqui 2 artigos:
O primeiro é o conceito de Faux Columns muito bem desenvolvido pelos caras do A lis Apart: http://www.alistapart.com/articles/fauxcolumns/
O segundo é a aplicação de Faux Columns dentro do Conceito de <sic>Div´s Dimensionáveis</sic> http://www.alistapart.com/articles/negativemargins/
Vale à pena dar uma olhada…
Um abração.
Genau 01/02/2005 às 00:00
Quanto aos "Erros do IE", o que acontece é o seguinte:
Na verdade, o IE interpreta de forma diferente a forma de ler o box de uma div.
O IE, que não respeita os padrões em que todos os navegadores interpretam margins, paddings, borders e widhts, SOMA os Pixels referentes a estas propriedades às dimensões da DIV, resultando uma verdadeira salada crossbrowser.
É por essa razão que são usadas, formas de evitar qu eo IE interprete de forma errônea estas propriedades, usando os chamados CSS HACKS (é esse o termo).
Jonatas Moisés Sas Lacerda 01/02/2005 às 00:00
Genau, acho que me expressei mal quanto ao Dreamweaver e ao Photoshop….. Eu tbm uso os dois programas, mas evito de usar a maioria das funcionalidades deles para web. Por exemplo, eu tive muitos problemas com a sugeira que o dreamweaver faz no código, coisas como <strong></strong> ou <p><em>lalalaal<em><em> akjsjk </em></p>, neste ponto eu considero o Dreamweaver anti-KISS, gosto de muitas de suas funcionalidades, que agilizam grande parte do processo, mas não deixo que ele me substitua na arte de escrever o XHTML.
Hoje não uso muito o Photoshop, estou usando o Fireworks e mando apenas as imagens fatiadas, sem html, esse eu faço na mão com o maior prazer… Com o photoshop eu tinha que limpar muita coisa na mão, mesmo com tabelas…
Bom, resumindo, não sou contra os softwares, mas acho que não há nada que substitua o desenvolvedor, ainda mais quando estamos lidando com tableless…
Depois vou ver os links, valeu
[]‘s
Jonatas
Genau 01/02/2005 às 00:00
Jonatas, você pode sim usar o Dreamweaver pra criar um XHTML bem limpo.
A macromedia pensou muito bem nesses seus problemas e você pode configurar seu dreamweaver para criar XHTML valido (mas nao pelo W3C), porém correto.
Para tanto, vá em edit >> preferences >> e no item edit options, selecione o item "use <strong> <em> instead <b> and <i>"
Fora isso, tem mais uma dezena de confugurações que você pode fazer pra deixar seu dreamweaver afinadinho com o XHTML, como itens de acessibilidade e Validação em tempo real.
<ironia>Seria bom voce ler um pouco do tutorial do Dreamweaver e usá-lo mais pra tirar essa má impressão que voce tem dele </ironia>
Hhahaha
Abraço.
QQ coisa, pode me mandar um email que eu te passo mais umas dicas..
Daniel Maciel 01/02/2005 às 00:00
Só uma coisa… se você NÂO SABE usar o dreamweaver… o problema é SEU… não da macromedia….
se você gosta de escrever o seu código na mão tudo bem… mas isso não faz as pessoas que gostam de usar bem os softwares piores que vocÊ…
Jonatas Lacerda 01/02/2005 às 00:00
Valeu pela dica Genau…
Daniel, a questão aqui é outra, não disse que ninguém é pior ou melhor que ninguém, quem está dizendo isso é vc, eu não protejo software, ainda mais software proprietário, achei descabida sua declaração, que passa meus comentários de relação profissional a relação pessoal, cada um programa da maneira que bem entende, eu apenas disse o que eu achava do software, garanto que a própria Macromedia não ligaria pro que eu falei, então não entendo pq vc se sentiu….
Garanto que minha intenção é falar do software e não do programador.
[]‘s
Jonatas
Daniel 01/02/2005 às 00:00
não senti nada cara…
eu não disse isso diretamente pra vc… disse para todos que acerditam que quem usa dreamweaver é uma pior pessoa e come criancinhas… Se você não é uma dessas pessoas desculpe, você não merecia ler o que eu escrevi… desculpas também aos outros que também não precisavam… talvez tenha sido a hora errada e o assunto errado pra eu falar isso mesmo.. desculpem.. abraços!
Erick 01/02/2005 às 00:00
Nossa, isso realmente fala tudo mesmo!!! Comecei a algumas semanas, mas vi que uma coisa que poupa um tempão é utlilizar <ul> e <li> que para fazer uma menu ou uma lista de links, é só fazer o que diz aí em sima "Siga a semantica" apanhei muito mas eu consegui fazer alguma coisa, meu primeiro convertido foi meu blog kkkkk entrem para conferir, ele só não está sendo validado pelo W3C por causa do contador, mas o resto tá tudo OK e validado!!!!
Roberto Sonnino 01/02/2005 às 00:00
Erick, uma dica:
Para fazer seu site validar, basta alterar o atributo ‘TAGET’ para ‘TARGET’ no button do tableless e substituir os ‘&’ por ‘&’ no script do contador, e tudo se resolve!
Diandra 01/02/2005 às 00:00
eu gostaria de saber como faço para centralizar o layout do blog..a imagem de cima, eu consigo, já o fundo que a parte de baixo do layout eu não consigo…onde fica o perfil e o post…como por exemplo eu fiz aqui http://diandrateste.zip.net/index.html
eu faço só duas imagens, a de cima e a de baixo, ….estou
tentando fazer ela por 800 e 600, e fiz por 800 e 600…mas como a configuração do meu video é de 1024, olhem http://diandra.zip.net/index.html ,sempre sobra o canto direito sem nada…por que quando eu fiz o layout por 1024 aí para mim ficou beleza, mas para quem tem o video configurado por 800…quando maxizizava a janela o texto saia fora do alinhamento do layout.
minha amiga
me disse que no dela que é 800 por 600, quando se maximiza a janela o texto não
sai fora do alinhamento do layout…..ela sabe centralizar bem
certinho, como nesse blog que ela fez. http://perolasdavida.zip.net/ dá
uma olhadinha, a gente minimiza e maximiza e ele continua centralizado, Tenho dreamweaver..mas não sei como fazer para a imagem do fundo virar tabela para mim poder centralizar então….
Se alguem puder me ajudar meu email é diandradaks@hotmail.com
TElefone 54 331 5128 – celular 54 99919831
João Paulo Fechine 28/06/2006 às 18:59
Muito fraco esse post!
Acredito que um pouco mais de dedicação seria interessante para a criação de posts neste site.
Nada contra o “colunista”, mas eu me irritei ao ler esse conteúdo tão pobre.