Desta vez falamos sobre os novos padrões, XHTML 2 e HTML 5. Coisas legais, mancadas, acessibilidade, semântica, enfim. Seguimos algumas dicas do pessoal, fizemos o podcast em apenas 30 minutos, tínhamos uma pauta (que não foi seguida muito à risca, mas ela existia) e também já temos o RSS funcionando.

Como disse o Rafael, escutem que está bem legal!

Posts Relacionados

• CodeCast #3 – Semântica e Microformatos
• CodeCast #1 – Impressões sobre Início de Carreira
• CodeCast #4 – Adobe Flash
• CodeCast #5 – Frameworks
• Semântica

Justamente nesse pseudo-browser é o problema que vou expor. Não sei se ele foi resolvido por muita gente, mas eu dei um jeito e funcionou bem. Quem mais tiver feito algo parecido coloque o link nos comentários.

A função é a seguinte:

function innerOptions(oSelect,mOptions) {
	var ini = 0;
	if(mOptions.toLowerCase().indexOf("<option") < 0) {
		var oOption = document.createElement('option');
		oOption.innerHTML = mOptions;
		oOption.setAttribute("value", mOptions);
		oSelect.appendChild(oOption);
    }
	else {
	    var ini = 0;
	    while (ini != -1) {
        ini = mOptions.indexOf('<option', ini);
	        if (ini >= 0) {
				var valueIni = mOptions.indexOf('value="', ini);
        	    if(valueIni >= 0) {
					var valueFim = mOptions.indexOf('"', valueIni);
    	        	var value = mOptions.substring(valueIni,valueFim);
				}
            	ini = mOptions.indexOf('>', ini) + 1;
	            var fim = mOptions.indexOf('</option>', ini);
    	        text = mOptions.substring(ini,fim);
        	    elOption = document.createElement("option");
            	elOption.innerHTML = text;
				elOption.value = value;
    	        oSelect.appendChild(elOption);
	        }
    	}
	}
}

A idéia é a seguinte: caso não haja uma tag option em mOptions, ela é criada e tem value e texto como mOptions. Caso contrário, as tags são recriadas e adicionadas ao select através de appendChild. Simples, mas chatinho de fazer, pelos indexOf (odeio isso).

Essa função é bem útil tanto para Ajax quanto para só JavaScript.

Update: aproveitem e dêem uma olhada na função do Micox também. Utiliza uma idéia diferente, mas funciona legal.

Posts Relacionados

• Histórico para Navegação via JavaScript
• Ajax sem o X
• Cookies em JavaScript
• Funções em Diferentes Escopos
• Efeito Glide

Pra quem conhece, Tableless significa criar um site seguindo os padrões, com código semântico, preferencialmente estrito, e não banir totalmente o uso da tag <table>, como quem está entrando no tema pensa. Alguns se gabam de conseguir mostrar dados tabulares usando apenas DIVs. Isso é o equivalente a criar um site usando tabelas.

Em minha opinião, um site Tableless é feito seguindo os padrões (ou deveria). O termo tableless é polêmico (vide Tableless tem que morrer), e é apenas um nome. Lá fora o termo usado para definir um site que segue os padrões é “CSS Layout”. E poderia ser qualquer outro. O nome não interessa, o que interessa é como o site é feito. WebStandards são necessários para a criação da Web 2.0, e nesse bolo também entra a semântica.

Tableless, no sentido que costumamos usar, é seguir os padrões, e não banir o uso de tabelas. Pense nisso, lembre-se disso.

Alguns ainda não consideram que um site Tableless segue os padrões (mas pode seguir sim, sem nenhum problema). No Tableless e no Revolução Etc tem dois posts interessantes sobre o assunto: Tableless vs. WebStandards.

Baseando-se nisso, praticamente excluí Tableless do meu vocabulário. Costumo usar “Site Semântico”, ou coisas assim. O termo em questão está aberto a muitas interpretações diferentes. Novamente digo: o nome não interesa. O que interessa é o que o conceito quer dizer.

Posts Relacionados

• DIVless
• Semântica
• E a tal da Web 2.0?
• Você sabe Webstandards?
• Cliente x Seu Ego

O que é?

Basicamente (e literalmente), DIVless é a ausência de DIVs. Todas as DIVs são trocadas por listas não ordenadas e listas de definição.

Por quê?

Segundo o autor do DIVless, as listas tem um sentido inerente mais hierárquico e sintático. Em outras palavras, a hierarquia do site se apresentaria melhor, com ou sem o uso de CSS ou no código.

O autor também afirma, com ajuda do W3Schools, que as listas como elementos de layout seguem os padrões semânticos.

Também é apontada a falta de significado da tag DIV em browsers antigos, e ela também não apresenta estrutura hierárquica e visual em browsers que não usam CSS. Isso realmente é verdade. E tudo testado em IE 6 e 5.5, Firefox e Safari.

E a Semântica?

Em minha humilde opinião, a semântica vai por água abaixo. O que vale é a palavra do W3C, e não qualquer outra. Layouts são controlados por DIVs, e não listas.

Lembra-se quando ainda usávamos tabelas para posicionar elementos? DIVless é tão semântico quanto isso. Realmente a tag DIV não tem nenhum valor semântico, mas podemos adiciona-lo através dos atributos class e id.

A técnica do DIVless realmente foi bem bolada, todos os argumentos do autor são verdadeiros (exceto a questão semântica). Visitei a página sem suporte a CSS e apareceu bem melhor do que com DIVs. Isso é indiscutível. Mas e a semântica? Realmente é uma questão delicada.

Em minha opinião, DIVless não terá muito futuro, pelo menos até que o futuro chegue.

Posts Relacionados

• Tableless
• Semântica
• CodeCast #3 – Semântica e Microformatos
• Não validou. E agora?
• CodeCast #2 – XHTML 2 e HTML 5

Nas recomendações do W3C, cada elemento (tag) tem sua função própria no (X)HTML. Cada tag tem seu papel a cumprir, foi criada com um propósito. Criar documentos semanticamente corretos significa utilizar a tag certa no lugar certo. Por exemplo: <h1> para título superior, <p> para parágrafos… Não pretendo explicar aqui a função de todas as tags. Se estiver interessado, visite o W3Schools.

É completamente possível fazer um site inteiro usando apenas parágrafos. Talvez listas. É possível fazer um layout completo e apresentável usando qualquer tag. Isso é possível graças ao CSS, que permite modificar propriedades das tags. Mas essas propriedades são apenas visuais. Não é possível modificar a função semântica de algum elemento por CSS. Isso é impossível. E um site feito assim passaria na validação? Lógico! Se ele for bem formado, usar tags de acordo com o DTD, ele será validado. Não existe e nunca existirá um validador de semântica. Você mesmo terá que avaliar se seu documento é semanticamente correto. E se passa na validação, por que semântica?

A resposta é simples. Pense em um usuário que não enxerga, não ouve e ainda por cima não “raciocina”. Um exemplo desse usuário é o famoso Google. Ele não se importa com seu CSS. Então, quando ele for indexar sua página, ele procurará significado em suas tags, de acordo com as recomendações do W3C. Como ele entende apenas o significado das tags, como ele entenderá suas classes? Classes não tem valor semântico (ainda). Se seu código é bem tratado e tem significado, ele é Semântico. Aplicações como o Google, quando encontram uma certa tag, elas dão uma importância X para aquele elemento, dependendo do valor semântico que ele possui.

Analise: criando documentos semanticamente corretos, além de contriuir para uma web melhor, você estará beneficiando a si próprio. Seu site poderá aparecer primeiro no Google e outros motores de busca, será bastante amigável aos leitores de tela, será compatível com aplicações futuras, enfim, muitos outros benefícios que você descobrirá quando for desenvolver. Senti diferença ao ver que minhas folhas de estilo referenciavam mais tags do que classes. Você terá uma maior variedade de tags.

Bem, espero que tenha sido útil. Pretendo colocar mais alguns exemplos de semântica e seus benefícios a medida que meus estudos avançarem. Até a próxima!

Posts Relacionados

• DIVless
• CodeCast #3 – Semântica e Microformatos
• Tableless
• innerOptions
• Não validou. E agora?