Pinceladas da WebMovido a: XHTML, CSS, PHP e WebStandards

Estava eu aqui lendo meus Feeds, e me deparei com um post muito interessante de Jon Tangerine, onde ele relata que após efetuar a instalação do Internet Explorer 8 beta 1, os comentários condicionais pararam de funcionar no IE6, que interessante isso não? Alguém mais já passou por isso? Eu instalei aqui o IE 8, mas não o deixei nem 2 horas no micro, e como uso Linux, (minha esposa usa Windows, por isso consegui testar o IE8), nem sei se os comentários condicionais estão funcionando no meu Multiple IE. A solução encontrada por ele, foi de desinstalar o Multiple IEs e instalar novamente, com isso o problema desaparece. Caso alguém passe por isso, fica aí a dica antes de arrancar os cabelos!!!

Como você pode ver, as coisas são simples, é você quem acaba as complicando!!!

Via: JustaddWater.dk

A alguns dias atrás solicitei um convite no site do aviary, que para quem não sabe, é uma suíte de criação toda baseada na Web, o Emanuel Felipe fez um review legal sobre ele, lhe aconselho a dar uma olhada lá, e com isso tenho 5 convites que vou disponibilizar aqui no blog para os 5 primeiros usuários que comentarem aqui. Corra enquanto é tempo.

Descobri como o Internet Explorer 8 passou no Acid2 Test:

window.onload = function() {
	if (location.href == "http://www.webstandards.org/files/acid2/test.html#top")
		location.href = "http://www.webstandards.org/files/acid2/reference.html";
}

Já vi pessoas utilizarem document.write para gerar uma página inteira, e sinceramente, isso é ridículo, sendo que existem opções mais limpas e cômodas. Utilizar JavaScript para fazer uma página inteira é uma coisa ridícula, mas caso seja necessário, aconselho a utilizar a DOM Tool.

DOM Tool se encarrefa de converter qualquer porção de HTML nas correspondentes chamadas JavaScript. Dessa forma, a criação de pequenas porções de HTML a partir de JavaScript serão mais rápidas de implementar.

Via: Anieto2K - DOM Tool, genera HTML mediante JS de forma fácil.

innerHTML com certeza foi uma mão na roda para os desenvolvedores durante muito tempo, e ainda hoje existe muita gente que o utiliza seja por não conhecer outras alternativas ou por pura preguiça.

Quais os problemas de utilizar innerHTML?

• innerHTML não é um padrão standard, é uma propriedade da Microsoft, e por isso já não é de se confiar muito.
• As aplicações baseadas no MIME Type application/xhtml+xml não suportam essa propriedade.
• A propriedade funciona como uma String, deixando de fora qualquer interação com o DOM que tentarmos introduzir.
• Ao tratar-se de uma cadeia de texto, tereos alguns problemas com acentuação, fechamento de tags, comentários na página.

Criando múltiplos elementos

A partir de um Array, vamos criar uma lista de elementos uitlizando innerHTML e depois usando DOM.

innerHTML:

data = new Array("one","two","three");
mHTML = "<ul>";
for(i=0;i<data.length;i++) {
	mHTML+="<li>" + data[i] + “</li>”;
}
mHTML+=”</ul>”;
document.getElementById(”mContainer”).innerHTML = mHTML;

Dessa forma definimos todo o HTML necessário para construírmos nossa lista, usando DOM seria dessa forma:

DOM:

data = new Array("one","two","three");
 // create the UL element that our LI elements will descend from
eUL = document.createElement(”ul”);
// loop over the length of the “data” array
for(i=0;i<data.length;i++) {
	// create an LI
	eLI = document.createElement(”li”);
	// append the value of data[i] to the LI as a text node
	eLI.appendChild(document.createTextNode(data[i]));
	// append the LI to the UL
	eUL.appendChild(eLI);
}
// append the UL to the “mContainer” element.
document.getElementById(”mContainer”).appendChild(eUL);

Referências

• Anieto2K - DOM como alternativa a innerHTML

query_posts() é uma das funções chave do Wordpress, onde com ela podemos fazer as seguintes modificações em nosso blog:

• Só apareça um post ou uma página.
• Mostrar todos os posts em um tempo determinado.
• Mostrar somente os últimos posts na página principal.
• Alterar a ordem dos posts.
• Mostrar somente os posts de uma determinada categoria.
• E várias outras coisas….

query_posts() é basicamente uma função para modificar a consulta a base de dados facilitando a tarefa, onde com base nos parâmetros passados, a função modifica a saída dos nossos posts. Essa função foi pensada para ser utilizada juntamente com o loop do Wordpress, que se encarregará de mostrar o resultado da função query_posts() com as modificações que forem estipuladas.

Exemplo de Uso

<?php
query_posts('....');
while (have_posts()) : the_post();
...
endwhile;
?>

Parâmetros

query_posts() nos permite enviar uma série de parâmetros que podemos separar em vários tipos:

Parâmetros de Categorias

• cat
• category_name

Exemplo

query_posts('cat=4'); //Unicamente os posts da categoria com ID (4)
query_posts('cat=-4'); //Todos exceto os da categoría com ID (4)
query_posts('category_name=Categoria'); //Só os da categoria (Categoria)
query_posts('cat=1,2,4,5,7'); //Unicamente os posts das categorias indicadas.

Parâmetros de Tags

• tag

Exemplo

query_posts('tag=cooking'); // Todos os posts com a tag (cooking)
query_posts('tag=bread,baking'); //Todos os posts que contenham (bread) ou (baking)
query_posts('tag=bread+baking+recipe'); //Todos los posts que contenham as 3 tags

Parâmetros de Autor

• author_name
• author

Exemplo

query_posts('author_name=Pedro'); //Todos os posts onde o Autor seja (Pedro)
query_posts('author=2'); //Todos os posts do autor (2)
query_posts('author=-4'); //Todos os posts menos do autor (4)

Parâmetros de posts e páginas

• p
• name
• page_id
• pagename
• showposts

Exemplo

query_posts('p=1'); //Unicamente o post (1)
query_posts('name=first-post'); //Unicamente o post com nome (first-post)
query_posts('page_id=7'); //A página com ID (7)
query_posts('pagename=about'); //A página com nome (about)
query_posts('showposts=1'); //Modifica o LIMIT do SQL para indicar o número de posts a mostrar.

Parâmetros de tempo

• hour
• minute
• second
• day
• monthnum
• year

Exemplo

query_posts('hour=01'); //Todos os posts da seguinte hora: (1:00)
query_posts('minute=30'); //Todos os posts do minuto 30(*:30)
query_posts('second=07'); //Posts do segundo 7 (*:*07)
query_posts('day=1'); //Os posts dos días (1)
query_posts('monthnum=2'); //Os posts do mês (2)
query_posts('year=2005'); //Os posts do ano de (2005)

Parâmetros de Paginação

• paged
• posts_per_page
• order

Exemplo

query_posts('paged=2'); //Todos os posts que se encontram na página (2) da paginação
query_posts('posts_per_page=10'); //Número de posts por página (10)
query_posts('order=ASC'); //Orden da paginação (ASC)

Combinando Parâmetros

Não teria muita graça se não pudessemos utilizar essas funcão com um só parâmetro, isso limitaria e muito seu potencial, mas para isso fazemos o uso de (&) para unir vários parâmetros:

query_posts("cat=-1,-2,-3&page_id=7&tag=bread,baking“);

Referências

• Anieto2K - query_posts(), personalizando nuestros blogs.

Após o lançamento do Adobe AIR, todo mundo está correndo atrás para lançar seus aplicativos para desktop, e dessa vez foi a eBay que lançou sua versão. Com essa aplicação você pode buscar por produtos, administrar pagamentos e uma série de outras coisas. O tamanho da aplicação é de 7.0 MB, fora a instalação do Adobe AIR, que pode ser baixado a partir do site do ebay ou da própria Adobe.

Referências

• IncubaWeb - eBay Desktop 1.0 funcionando con Adobe Air 1.0

Abaixo você pode ver 3 guias publicados pelo W3C para boas práticas no desenvolvimento de sites para dispositivos móveis:

• Web Content Accessibility and Mobile Web: Making a Web Site Accessible Both for People with Disabilities and for Mobile Devices, an introductory page.
• Experiences Shared by People with Disabilities and by People Using Mobile Devices [Draft].
• Relationship Between Mobile Web Best Practices 1.0 and Web Content Accessibility Guidelines, First Public Working Draft.

Referências

• Accesibilidad y buenas prácticas en el diseño para móviles.

AxsJax é o novo companheiro dos desenvolvedores no mundo do Ajax. Se trata de um Framework que permite adicionar acessibilidade aos projetos web que fazem o uso de Ajax. Assim, usuários que fazem o uso de tecnologias assistivas ou similares podem desfrutar de todas as características das aplicações.

Exemplos de aplicações que fazem o uso de AxsJax: Google Web Search, Google Reader, Google Scholar e o jogo Jawbreaker. Detalhes sobre o uso e implementação, você pode encontrar em seu showcase.

Referências

• estándares y accesibilidad - AxsJAX: Ajax accesible.