DIVS ? complicado ou nao ?

[ealves 0]

entendo que a melhor maneira de se desevolver um site é atraves das tais DIVS e sem o uso de tabelas .

o uso de tabelas por mais que digam ainda é muito utilizado , talvez pelo fato das pessoas encontrarem uma grande dificuldade no uso de div.

 

eu utilizo CSS nos meus sites mas juntamente com tabelas - ja tentei desenvolver sites sem utilizar nenhuma tabela , MAS a dificuldade e o grande tempo levado, pelo menos pra mim é grande .....acho que o mais complicado das divis é o posicionamento dos objetos, achar a posicao correta para um objeto .

 

queria saber qual a opiniao da galera

utilizam 100% div ou utilizam tabelas juntamente com css???

[Guilherme Rambo 4]

Não é questão de opinião, padrão é padrão e ponto final.

Eu trabalho com os padrões porque para mim proporciona maior produtividade, e para o usuário aquele monte de vantagens que todo mundo já sabe.

 

No começo é difícil? É! Mas faz parte da vida, qualquer aprendizado pode ser difícil, mas simplesmente ficar dizendo que é difícil e não tentar aprender é ignorância.

 

Para quem não consegue aprender por si só, existem cursos hoje em dia (inclusive online) que ensinam padrões web. Mas, não é necessário pagar para aprender isso, basta acessar blogs de desenvolvimento (maujor.com, tableless.com.br e web2ponto0.com.br eu recomendo).

 

[]'s

[programador php 0]

tabelas são para dados tabulares

 

 

e "divs" para mostrar grupos de elementos

 

num existe melhor ou pior

 

é questão que cada projeto é um projeto diferente

 

 

as pessoas deixam de usar CSS devido ao fato de não saberem o que estão fazendo ou o que vão fazer, já começam e pronto!!!

 

num sabem o porque das coisas, ou quando utiliza-las

 

abraço

[Giovani 104]

Eu não acho complicado. Concordo que no início eu patinei um pouco, mas depois que peguei o jeito foi tranquilo.

Concordo em grau, gênero e número com a resposta do #INSIDE#. Tem que ler, frequentar fórum, blog.

 

No link a seguir tem uma lista de links. Quem quiser aprender tem que ler. Mas tem que ler de verdade, estudar, testar. Ai aprende.

http://forum.imasters.com.br/index.php...st&p=536888

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Nícolas 4]

AEEEE LA VAI A BÍBLIAAA http://forum.imasters.com.br/public/style_emoticons/default/grin.gif

E vou falar muitooo mesmo :lol:

 

Ealves eu discordo que a montagem de um site em tabless seja dificil e leve um grande tempo.

 

ela NATURALMENTE É DIFICIL E LEVA UM GRANDE TEMPO PARA QUEM ESTÁ COMEÇANDO, porque depois que você pega a prática ela se torna facil e super rápida.

 

Com DIV's você pode:

 

• reaproveitar muitas partes do código, o que trás um ganho de tempo enorme
• facilidade de alterações
• agilidade no carregamento do site
• usabilidade

  Apesar de você não fazer um css exclusivo para handheld você ja consegue ver muito sites em dispositivos moveis celular, smartfone, palm, iphone e etc

   

  E não é novidade pra ninguem que internet móvel já é muito acessado hoje em dia, mas a tendencia é ser ainda mais ganhando muito mercado.

   

  Sem falar que você pode criar um estilo exclusivo para eles ocultado coisas desnecessárias, mostrando outras, alterando tamanhos e ta, um exclusivo para impressão e etc.

• acessibilidade

  Facilita a navegação de deficientes visuais pelo site pois eles conseguem ir diretamente para o conteudo e eles conseguem saber quantos itens tem no menu.

   

  Por exemplo você pode criar um link no inicio do site assim.

   

  <div id="acessibilidade">
  		<ul>
  			<li><a href="#menu" title="Vá para o menu do site">menu</a></li>
  			<li><a href="#conteudo" title="Vá para o conteudo do site">conteudo</a></li>
  		</ul>
  	</div>

  Aeee por você ancorar o link ao id da div ao pressinar a tecla enter no leitor de tela da o foco no menu.

   

  <div id="menu">
  		<ul>
  			<li><a href="?cont=abeflash" title="A Be Flash">a be flash</a></li>
  			<li><a href="?cont=aparelho" title="O Aparelho">o aparelho</a></li>
  			<li><a href="?cont=fotos_antes_depois" title="Fotos de Antes e Depois">fotos antes e depois</a></li>
  			<li><a href="?cont=busca_profissionais" title="Busca por profissionais Be Flash">busca de profissionais</a></li>
  			<li><a href="?cont=dicas_de_saude" title="Dicas de Saúde">dicas de saúde</a></li>
  		</ul>
  	</div>

  E o bacana é que como ele não sabe quantos itens tem no menu, 5, 10, 15.

   

  Quando utiliza lista tem uma opção no programa que geralmente ja vem habilitado que fala "lista com 5 itens", ou seja, ele vai ter uma noção muito melhor do "espaço de navegação" dele.

• Entre outras vantagens

Alteração de estrutura é muito mais simples você troca facilmente de layout assim como mostra o site

http://www.csszengarden.com/

 

Aonde existem centenas de layouts diferentes MAS É O MESMO SITE COM O MESMO CÓDIGO HTML, foi alterado SOMENTE O CSS.

 

Um exemplo recente que posso te dar é um site que AINDA ESTÁ EM DESENVOLVIMENTO.

 

Eu criei o layout, a animação e montei toda a estrutura em tableless.

 

http://www.ct.com.br/teste/beflash

 

O site é de um novo aparelho dentário chamado Be Flash.

 

O cliente queria que o site tivesse uma área de paciente e uma de profissional

(a profissional vai dar erro pq não subirão o banco de dados ainda como eu disse é uma área de teste, ele não vai carregar nada no código da pagina após o erro por isso irá faltar alguns elementos comparado ao do paciente)

 

Os 2 sites tem o código estrutural identico.

 

A diferença foi o css.

 

Eu montei o site de paciente, até ae maravilha.

 

Para fazer o do profissional fiz apenas 4 alterações.

• Mudei uma linha de float: right para left (o que ja inverteu o newsletter com o conteudo)
• Inverti o topo em flash e fiz uma alteração de cor
• Ajustei o margin left do menu pois o menu mudou de posição
• Inverti horizontalmente a imagem do fundo do site, para deixar o lado cinza do lado do newsletter e o branco para o conteúdo

Demorei apenas 20 minutos pra fazer isso e dos 20, 15 eu perdi no flash =)

 

Agora se você tivesse que montar a mesma estrutura por tabela, se teria que montar do zero.

 

 

Cara com tableless se torna gostoso montar um layout, criar com tabela visualmente se torna um negocio que você num pensa, e se torna até tedioso e se algum dia seu dreweaver der pal ou você tiver em um pc que num tenha, se você num sair gritando pela casa só de abrir seu código no bloco de notas ja é uma vitória, hehehe

 

Além de dominar muito melhor o código (dominando a linguagem vem a agilidade para a montagem), você só vai sentir falta do código colorido, mas isso não te impede de executar seu trabalho facilmente.

 

E tabela é aquele negocio chato, cria uma tabela com 3 linhas, aqui entra o topo, no topo vou fatiar em 4 partes pra entrar 4 figuras pro topo carregar mais leve... Urrrhg http://forum.imasters.com.br/public/style_emoticons/default/sick.gif

 

Da tédio só de lembrar, hehehe

 

A filosofia utilizada para montar sites em tableless é muito menos tediósa e mais simplificada.

 

Você não perde tempo fatiando a imagem do topo cheio de efeitos em 15 só pra jogar um campo de login de senha e um search no topo do site, você utiliza imagem inteira e usa como background, ela vai ficar armazenada no cache e sempre que carregar de novo, ela é requisitada mais facilmente.

 

 

.....acho que o mais complicado das divis é o posicionamento dos objetos, achar a posicao correta para um objeto .

Cara isso é porque você não pegou pra valer mesmo, se você praticar, você aprende, e o maior erro de quem ta iniciando é o seguinte.

 

• Se a pessoa ta acostumada a criar sites visualmente, a primeira coisa que ela vai fazer é tentar fazer visualmente no dreamweaver (haha eu ja fiz isso, hehee)
• A div mania, pensam que tableless é você abandonar as tabelas e tabelas tão ai para serem usadas mas de forma correta, tem muito a respeito disso no fórum só dar uma pesquisada ;)
• Desiste porque acha que nunca vai conseguir
• A pessoa pensa que tableless é tudo positio absolute E NÃO É.... se você for ver o css que utilizei nesse site Be Flash o unico position absolute que tenho é no topo e nos menus.

  No topo para a transparencia do flash ficar por cima da area de conteudo, e no menu para ficar por cima do topo que o menu é em html.

E o bom de se montar layouts em tableless é na unha

 

Sobre a vantagem de aproveitar o código da uma olhada nesse tópico (A técnica que citei não tme nada haver com tableless, mas veja a facilidade que é de adicionar novos professores mechendo só na estrutura do código)

http://forum.imasters.com.br/index.php?showtopic=273290

 

 

MAIS UMA VANTAGEM (hehehe ééé eu sei, ta bom ta bom ja entendeu... mas é que lembrei agora, ehehe)

 

Outra vatagem é a padronização do site.

 

Com tabelas acontece muito de espaço entre linhase também espaço entre celulas em bem diferente de paginas para paginas e outras diversas coisas que acabam deixando o site não muito profissional, e se você for arrumar isso vai dar muito trabalho.

 

(sobre espaçamento das linhas isso inclui quando as vezes você usa a tag p as vezes a tag br)

 

Aee o cliente vai la e fala para você colocar a varias imagens (15) do lado do texto gigante variando, uma da esquerda e outra da direita... aee você ja fica assim -> :blink: <-

Ta tem aquele align="left" que você pode jogar na imagem, mas ae o cliente reclama que a imagem ta muito colada no texto ae você já -> :o <-

 

Você faz tudo em tabela dividindo em varias tabelas de 2 colunas, uma na esquerda com a imagem, e na direita com o texto e vice e versa.

 

Aee o cliente vai la e fala... aaa inverte a ordem das fotos acho que vai ficar melhor ae você -> http://forum.imasters.com.br/public/style_emoticons/default/cry.gif <-

 

Se ele não gosta e pede pra voltar cuidado que seu próximo passo é suicídio.

 

Essa história foi baseada em fatos reais porem eu utilizava tabeless \o/

 

E nada fi mais simpes na minha vida.

 

Dramatização simplificada ^^

<div class="direita"><img src="foto.01" /></div>
<p>O fio dental é considerado o melhor material para remover a placa do dente, uma vez que a escovação sozinha remove somente em torno de 70%.</p>
<p>Os dentistas costumam encorajar o uso de fio dental também para prevenir doenças na gengiva e halitose.</p>
<p>O fio dental é considerado o melhor material para remover a placa do dente, uma vez que a escovação sozinha remove somente em torno de 70%.</p>
<p>Os dentistas costumam encorajar o uso de fio dental também para prevenir doenças na gengiva e halitose.</p>


<div class="esquerda"><img src="foto.02" /></div>
<p>O fio dental é considerado o melhor material para remover a placa do dente, uma vez que a escovação sozinha remove somente em torno de 70%.</p>
<p>Os dentistas costumam encorajar o uso de fio dental também para prevenir doenças na gengiva e halitose.</p>
<p>O fio dental é considerado o melhor material para remover a placa do dente, uma vez que a escovação sozinha remove somente em torno de 70%.</p>
<p>Os dentistas costumam encorajar o uso de fio dental também para prevenir doenças na gengiva e halitose.</p>


<div class="esquerda"><img src="foto.03" /></div>
<p>O fio dental é considerado o melhor material para remover a placa do dente, uma vez que a escovação sozinha remove somente em torno de 70%.</p>
<p>Os dentistas costumam encorajar o uso de fio dental também para prevenir doenças na gengiva e halitose.</p>
<p>O fio dental é considerado o melhor material para remover a placa do dente, uma vez que a escovação sozinha remove somente em torno de 70%.</p>
<p>Os dentistas costumam encorajar o uso de fio dental também para prevenir doenças na gengiva e halitose.</p>


<div class="esquerda"><img src="foto.04" /></div>
<p>O fio dental é considerado o melhor material para remover a placa do dente, uma vez que a escovação sozinha remove somente em torno de 70%.</p>
<p>Os dentistas costumam encorajar o uso de fio dental também para prevenir doenças na gengiva e halitose.</p>
<p>O fio dental é considerado o melhor material para remover a placa do dente, uma vez que a escovação sozinha remove somente em torno de 70%.</p>
<p>Os dentistas costumam encorajar o uso de fio dental também para prevenir doenças na gengiva e halitose.</p>


<div class="esquerda"><img src="foto.05" /></div>
<p>O fio dental é considerado o melhor material para remover a placa do dente, uma vez que a escovação sozinha remove somente em torno de 70%.</p>
<p>Os dentistas costumam encorajar o uso de fio dental também para prevenir doenças na gengiva e halitose.</p>
<p>O fio dental é considerado o melhor material para remover a placa do dente, uma vez que a escovação sozinha remove somente em torno de 70%.</p>
<p>Os dentistas costumam encorajar o uso de fio dental também para prevenir doenças na gengiva e halitose.</p>


<div class="esquerda"><img src="foto.06" /></div>
<p>O fio dental é considerado o melhor material para remover a placa do dente, uma vez que a escovação sozinha remove somente em torno de 70%.</p>
<p>Os dentistas costumam encorajar o uso de fio dental também para prevenir doenças na gengiva e halitose.</p>
<p>O fio dental é considerado o melhor material para remover a placa do dente, uma vez que a escovação sozinha remove somente em torno de 70%.</p>
<p>Os dentistas costumam encorajar o uso de fio dental também para prevenir doenças na gengiva e halitose.</p>


<div class="esquerda"><img src="foto.07" /></div>
<p>O fio dental é considerado o melhor material para remover a placa do dente, uma vez que a escovação sozinha remove somente em torno de 70%.</p>
<p>Os dentistas costumam encorajar o uso de fio dental também para prevenir doenças na gengiva e halitose.</p>
<p>O fio dental é considerado o melhor material para remover a placa do dente, uma vez que a escovação sozinha remove somente em torno de 70%.</p>
<p>Os dentistas costumam encorajar o uso de fio dental também para prevenir doenças na gengiva e halitose.</p>


<div class="esquerda"><img src="foto.08" /></div>
<p>O fio dental é considerado o melhor material para remover a placa do dente, uma vez que a escovação sozinha remove somente em torno de 70%.</p>
<p>Os dentistas costumam encorajar o uso de fio dental também para prevenir doenças na gengiva e halitose.</p>
<p>O fio dental é considerado o melhor material para remover a placa do dente, uma vez que a escovação sozinha remove somente em torno de 70%.</p>
<p>Os dentistas costumam encorajar o uso de fio dental também para prevenir doenças na gengiva e halitose.</p>

Muito mais simples heehhe, se eu quiser aumentar o espaçamento entre o texto e a imagem eu consigo utilizando apenas um comando.

margin

 

Se eu o cliente pedir uma borda preta em todas as fotos.

border: 1px solid #000

 

Ja era, nem precisei abrir fireworks, ou photoshop.

 

 

Agora ja pensou se o cliente fala que quer mudar o tamanho e cor da fonte do conteudo de todo o site??

Ou se não ele pede um espaçamento maior entre as linhas pq ta muito colado... ou o texto todo justificado E ele quer aqueles safados 2 dedinhos depois da margem.

 

Ja aconteceu comigo e pra minha sorte foi quando eu tava começando com tableless, eu não manjava muito de divs ainda mas procurava manter padrões de texto com tag P e etc.

 

Os sobre dois dedos depois da margem.

 

CSS

#conteudo p {
		text-indent: 50px; /*Dois dedos depois da margem*/
		margin-bottom: 25px; /* aumenta o espaço entre os paragravos */
		line-height: 19px; /* altura da linha separa mais as linhas do texto facilitando a leitura*/
}

HTML

<div id="conteudo">
		<p>O fio dental é considerado o melhor material para remover a placa do dente, uma vez que a escovação sozinha remove somente em torno de 70%.</p>
		<p>Os dentistas costumam encorajar o uso de fio dental também para prevenir doenças na gengiva e halitose.</p>
		<p>O fio dental é considerado o melhor material para remover a placa do dente, uma vez que a escovação sozinha remove somente em torno de 70%.</p>
		<p>Os dentistas costumam encorajar o uso de fio dental também para prevenir doenças na gengiva e halitose.</p>
</div>

Com isso ja altero a formatação da tag p dentro de toda a div conteudo ^^

 

Como eu disse, tableless é MUITO MAIS RÁPIDO, pode não parecer de inicio, mas isso você percebe na prática, principalmente depois da estrutura montada.

 

 

 

Da uma olhada nessa palestra, é 1 hora e 28 minutos que valem a pena.

http://blog.elcio.com.br/video-palestra-de...e-e-hospedagem/

 

E também nessa vídeo aula que vivo indicando aqui nesse fórum

http://www.tableless.com.br/video-tutorial...me-da-visie-css

 

Eles montam a home do site de visei em tableless, da para pegar muita idéia de como funciona e a lógica da montagem =)

 

Tableless, Padrões Web estão ganhando o mercado cada vez mais e quem não aprender vai ficar para trás (acredite, ja tão ficando)

 

Vai ajudar muito pode ter certeza ^^

 

 

A empresa que trabalho vetava esse tipo de montagem justamente pelo tempo de aprendizagem até a pessoa se acostumar é perdido muito tempo em projeto.

 

PORÉM... depois de muita conversa e mostrar pontos positivos e muito vatajosos a longo prazo (apos aperfeiçoamento) mudei a cabeça do meu supervisor, e ae ele se empenhou em aprender, ajudei ele então meu supervisor sentiu na pele as vantagens.

 

Daeee tentamos convencer nossa chefe mas apesar dela ser cabeça aberta para novas idéias ela não via vantagens.

 

Até que de um rolo na empresa eu tava insatisfeito la dentro e me fizeram uma proposta muito boa pra continuar la, mas aproveitei que eu tava por cima la e ja sugeri isso de novo pra ela, e ela resolveu permitir a montagem em padrões da web pra testar.

 

Resultado: ela viu que a estruturação do site COMPLETO e alterações agilizou muito, e eu posso fazer alterações na estrutura sem mexer na programação do sistema do site

 

Apesar de eu mexer com php ja aconteceu de apagar alguma coisinha no código por acidente por o dreamwever não alterar a cor do código quando a tag que inicia o php <? esta grudada no comando.

 

Colorido: <? echo "teste"; ?>

Nao colori: <?echo "teste"; ?>

 

Agora isso não acontece mais, sem falar que o programador consegue fazer a parte dele com um visual só usando as tags que ja foram utilizadas no site e ja tem um visual formado.

 

Ou seja, eu ganho, o programador ganha, o cliente ganha, o usuário que ta navegando ganha, a empresa ganha.

 

Se todos ganham... porque não utilizar??? ;)

 

Agora chega né, ehhehe

 

Ufaaa... depois de tudo isso só posso dizer...

 

Amém ^_^

hehehe

 

Flw aeee :)

[Leonardo P 0]

nick171

exatamente o que eu ia dizer http://forum.imasters.com.br/public/style_emoticons/default/grin.gif

 

 

mas é isso ae, até saber como funciona é difícil mesmo, mas estudando e praticando você começa a dominar o assunto.

[Nícolas 4]

Aeee pelo menos 1 teve coragem de ler, hahahah

\o/

 

Taaa pode ter lido metade, ou até o primeiro paragrafo mais leu, hehe ^^

 

Mas é isso aeee vantagens tem de monte... algumas você só vai sentir na pratica, mas é assim como o Leonardo concluiu, só estudando e praticando bastante... e pode ter certeza...

 

VOCÊ NÃO VAI SE ARREPENDER http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

Flw aee

[donato 0]

Só pra contribuir com o incentivo. Eu há 5 meses atrás não sabia nada, fazia tudo com tabelas e estava pensando em parar de fazer layouts e não queria aprender o tal tableless assustador, mas entrei em uma empresa que o programador me deu uma força legal, agora pra mim é muito natural, a melhor coisa q existe!!rsrs. Lógico sempre surgem as dúvidas, mas são só duvidas, dificuldades já passaram, então eu garanto q é muito legal trabalhar com padrões, vou começar até dar aulas pq onde moro não tem nenhum curso e ficaram sabendo que eu faço. então galera estudem!!!!

 

 

Abraços

[Mau B. Miranda 0]

Bom, só para dar minha contribuição tbm!!!

Tudo q já falaram ai é a mais pura realidade!!!! No começo da vontade de desistir quando você faz um layout impecável qndo roda no FF, Ópera, mas qndo roda no IE6... vixi.... q desanimo!!!!!!! :blink:

 

Mas lembre, qntos tombos não foram necessários para conseguir largar as rodinhas e sair andando na boa de bicicleta?!!! O negócio é não desistir e estudar mesmo!!!! Faz 1 ano e 4 meses q comecei a programar sem tabela nenhuma, quebrei mto a cabeça, dae resolvi comprar um livrinho "Dominando Tableless", paguei 30tão, bastou ler uma vez pra sacar como funciona esse lance de tableless e padrões!! Aconselho essa leitura, depois comprei outro livro de soluções em css avançado, mas ainda estou destrinchando!!! e já tenho em vista o livro do Maujor q tbm é uma referência nesse assunto!!!!!

 

E comcordo plenamente com o q o "Programador PHP" disse, o grande problema é q as pessoas começam a usar esse tipo de programação mas não sabem o q usar, pra q usar ou o q o uso de determinado atributo vai fazer!!!!! Pq é mto facil copiar códigos prontos, mudar uma cor e mais umas medidas e nem fazer questão de saber o q cada coisa faz!!!!! <_<

 

Infelizmente a empresa q trabalho hoje ainda não adotou isso!!! poucos projetos são feitos dessa forma, o q eu lamento!!!!!

Mas o problema é q só tem eu q já monto layouts dessa maneira!!!!! :unsure:

 

Minha sorte é q tem os freelas para continuar praticando e aprendendo!!!!hehehehe

Mas pelo menos aqui em Curitiba, falta gente com conhecimento nessa área!!!!! E se alguém aqui do fórum for aqui de CTBA e estiver sem trampo (o q eu dúvido), entra em contato ae, pq estão querendo chamar mais alguém pra me ajudar lá!!!!

 

É isso ae pessoal!!!!! Essa é minha colaboração com o tópico!!!

 

[]'s