iMasters - Se��o: xhtml

CSS Frameworks

pedrorogerio@hotmail.com (Pedro Rog�rio de Assis Lemes) — Wed, 27 Jan 2010 11:15:00 +0100

Frameworks s�o estruturas de c�digos definidas onde um projeto de software, seja ele web ou n�o, pode ser criado e desenvolvido. Frameworks podem incluir programas de suporte, bibliotecas de c�digo, linguagens de script ou qualquer outro tipo de software para auxiliar no desenvolvimento.

Eles foram projetados para auxiliar no desenvolvimento de softwares, auxiliando designers e programadores a gastar menos tempo com desenvolvimento.

Em CSS, frameworks geralmente s�o um conglomerado de arquivos css com coisas base para tipografia, estrutura de layout, menu. Sua utiliza��o deve ser muito cuidadosa, pois utilizar frameworks em desenvolvimento XHTML e CSS pode n�o trazer a mesma produtividade do que se voc� estivesse usando um framework para PHP, JavaScript. � importante que o desenvolvedor saiba ler e compreender o c�digo que ele est� escrevendo.

N�o, n�o quero colocar aqui a id�ia de que a utiliza��o de frameworks em CSS � o fim do mundo, que voc� n�o deve utilizar, ali�s, quem aqui nunca fez um pouco de copiar e colar em CSS? Quem n�o tem algumas coisas j� prontas e sempre as reutiliza a cada projeto? A id�ia que quero passar � que � importante voc� conhec�-los, entender seu funcionamento para saber se o que voc� faz hoje � mesmo o correto, conhecer a forma como trabalham os outros desenvolvedores, aprender a utilizar heran�a, uma coisa que � essencial e todo desenvolvedor Front-end deveria dominar.

Se voc� ficou interessado em conhecer os Frameworks CSS, d� uma olhada na lista abaixo:

Elements CSS Framework

Foi desenvolvido para ajudar aos desenvolvedores a escrever CSS de forma mais r�pida e mais eficiente. Elements fica longe de ser um simples Framework, ele possui tudo o que voc� precisa para concluir os seus projetos. Leia o Overview para maiores informa��es.

YUI Grids CSS

Framework desenvolvido pelo Yahoo que possui um preset com 6 modelos pr�-definidos de p�gina. Um simples arquivo de 4KB fornece mais de 1000 combina��es diferentes de pagina��o.

YAML CSS Framework

Dirk Jesse's extensive (X)HTML/CSS Framework oferece um montante de modelos padr�o para uma s�rie de simples ou complexos layouts. YAML � baseado em padr�es web e suporta os mais variados browsers. Todas as corre��es de bugs do Internet Explorer voc� pode encontrar nesse Framework.

Blueprint CSS

Blueprint CSS � um Frameork criado para diminuir o tempo gasto com desenvolvimento em CSS. Possui uma estrutura s�lida para que voc� possa construir seus projetos, al�m de possuir folhas de estilo para tipografia e impress�o.

Schema Web Design Framework

Schema foi desenvolvido para conceber e proporcionar uma essencial marca��o XHTML e CSS que � utilizada repetidamente no desenvolvimento XHTML e CSS. Ao inv�s de reconstruir seu XHTML e CSS a cada projeto, Schema fornece a base necess�ria para t�-lo instalado e funcionando em qualquer projeto.

CleverCSS

CleverCSS � uma pequena linguagem de marca��o CSS inspirada em Python que pode ser usada para o desenvolvimento de uma folha de estilos limpa e clara. Em muitos aspectos � mais limpa e clara do que CSS2. A mais �bvia diferen�a � a sintaxe: trata-se de identa��o e n�o com base plena.

Tripoli CSS Framework

Tripoli � um padr�o gen�rico de CSS e HTML para renderiza��o, tornando crossbrowser e mais est�veis seus projetos.

ESWAT Web Project Framework

ESWAT n�o nos passa muitas informa��es em seu site, portanto, fa�a o download do framework e descubra por si s� todo seu potencial.

Boilerplate CSS Framework

Esse Framework se esfor�a ao m�ximo para n�o definir nomes n�o sem�nticos para suas Classes ou ID's, pois aqui o desenvolvedor � voc�.

WYMstyle CSS Framework

O objetivo desse Framework � fornecer um conjunto de arquivos para tornar seu CSS modular, que pode ser usado para o desenvolvimento de web sites r�pidos. Ele tamb�m visa suprimir a incompatibilidade entre browsers atrav�s de m�dulos CSS.

ESWAT Web Project Framework

Permite o r�pido desenvolvimento de projetos com componentes pr�-escritos. Tudo isso � necess�rio para construir um ambiente flex�vel.

Logicss Framework

Logicss � uma cole��o de arquivos CSS e PHP para reduzir o tempo de desenvolvimento de aplica��es Standard Compliance. Possui tamb�m folhas de estilo para Tipografia.

That Standards Guy CSS Framework

O �nico v�lido para WCAG 1.0. Crossbrowser possui folhas de estilo com hacks para IE separados.

960 Grid System

Framework desenvolvido com base em uma largura de 960 pixels. Possui 2 variantes de 12 e 16 colunas, que podem ser utilizadas separadamente ou em conjunto.

Emastic CSS Framework

Ele � leve e possui larguras de p�gina personalizadas. Utiliza unidades de medida "em" para o desenvolvimento dos layouts.

Origo CSS

Framework baseado no desenvolvimento em Grids. A chave est� no desenvolvimento utilizando blocos e colunas. As colunas permitem ordenar os elementos de forma horizontal. Enquanto os blocos de informa��o s�o ordenados na vertical.

Typogridphy

Framework para designers e desenvolvedores front-end de forma a mostrar em seu site uma tipografia mais gratificante. � baseado no Framework 960 Grid System lhe permite desenvolver layouts baseados em grids de forma sem�ntica.

Haml

Framework Server-side para Rails onde o principal objetivo � tornar sua marca��o a mais limpa poss�vel. Foi criado para ser utilizado em ambientes altamente produtivos.

SenCSS

Pode ser pronunciado como "bom senso", onde aqui a tarefa de ser repetitivo � deixada de lado e o desenvolvimento com CSS fica mais prazeroso. � otimizado para deixar o CSS o mais funcional poss�vel. Possui estilos b�sicos para Tipografia e Formul�rios.

Taffy

Taffy foi desenvolvido para lhe poupar tempo. Como desenvolvedor web, existem v�rias coisas que voc� deve fazer por padr�o a cada projeto: Sobrepor os estilos padr�o de cada navegador, tipografia, entre outras coisas. Taffy cuida disso e de outras tarefas para que voc� possa ser sem�ntico e produtivo.

Hartija CSS Print Framework

Hartija � Framework CSS desenvolvido para impress�o, onde pretende em uma arquivo css otimizar da melhor forma poss�vel seu site para impress�o.

Formy CSS Form Framework

Formy foi criado para lhe auxiliar na cria��o de formul�rios acess�veis e simples. Funciona perfeitamente nos principais browsers: IE 6 / 7, o Firefox 2 / 3, Opera 9.23/9.5, Safari 3.1 (Win).

Construct

Construct � uma esp�cie de editor visual baseado no Blueprint em conjunto com o Framework jQuery.

Esse post foi inspirado no original de Hidden Pixels

Web 3.0 � um bicho de sete cabe�as?

contato@thiagobelem.net (Thiago Dutra da Fonseca Belem) — Wed, 08 Jul 2009 09:30:00 +0100

H� muito pouco tempo come�aram a surgir boatos por a� de que estamos entrando na Web 3.0, ou a "Web Sem�ntica". E hoje eu vim falar um pouquinho, pra voc�s, sobre essa nova tend�ncia.

Como meu amigo Bernard De Luna (especialista em (X)HTML, CSS e sem�ntica) disse: "N�o existem vers�es. Existe a tend�ncia a uma evolu��o natural das coisas. N�s simplesmente percebemos essa mudan�a de vento e queremos dar um nome pra ela." N�o exatamente com essas palavras, mas sei que foi isso que ele quis dizer.

Estamos entrando numa �poca onde cada vez mais sites e mais dom�nios s�o comprados, publicados e jogados na Internet e, diga-se de passagem, sem nenhum cuidado, planejamento ou organiza��o. E � esse o pilar da tal Web 3.0: organiza��o. Cada vez mais informa��es (verdadeiras ou falsas) est�o sendo publicadas na Internet. Isso se deve ao boom da Web 2.0 onde a contribui��o do visitante � o bem mais valioso de um site. S�o coment�rios, f�runs, not�cias, muitos blogs, fotos, v�deos, Twitters e por a� vai. � um mundo de possibilidades onde voc� pode criar o seu conte�do, da forma e cor que desejar.

A tecnologia n�o p�ra de crescer, cada vez as m�quinas e os rob�s est�o mais inteligentes. E juntando essa intelig�ncia artificial com in�meros algoritmos de processamento, essas m�quinas s�o capazes de armazenar e organizar informa��es.

Ent�o veja que mundo perfeito: se n�s, humanos, estamos produzindo e publicando qualquer tipo de informa��o (em todos os idiomas e dialetos poss�veis) e as m�quinas, em contrapartida, s�o capazes de captar, entender e organizar essas informa��es, o mundo est� a um passo do que poderia ser chamado de cultura global, ou conhecimento global, onde cada pessoa tem acesso a qualquer tipo de informa��o, e as m�quinas s�o capazes de, baseadas nessas informa��es, tomar decis�es e automatizar (mais ainda) a vida dos seres humanos.

T�... e o que essa lengalenga toda tem a ver com o meu HTML?

Sem d�vida nenhuma, o maior formato de publica��o de conte�do na Internet hoje (o maior acervo de conhecimento da humanidade) � o formato em HTML ou XHTML Seja o Twitter ou um blog, s�o todos HTML. E a Web 3.0 sugiu da necessidade de organizar toda essa avalanche de informa��o que vem sendo criada diariamente de uma forma irrespons�vel, para que as m�quinas possam ter acesso a esse tipo de informa��o.

Veja o exemplo do Crawler Google. O que � ele, sen�o um super-rob� que fica, o dia inteiro, vasculhando todos os sites do mundo e armazenando informa��es para serem entregues quando voc� faz uma busca? Agora imagine que voc� � esse rob� e tem que armazenar, na sua mem�ria, informa��es relativas a uma biblioteca inteira 25 mil livros. S� que infelizmente cada livro foi escrito por um autor, seguindo uma escola liter�ria diferente, idioma diferente e catalogado de forma diferente Fica bem pior pra voc�, n�o fica?

A tend�ncia da "nova Web" � exatamente essa: Organizar o HTML usando os elementos corretos, seguindo um padr�o internacional (definido pelo W3C) e, permitindo assim, uma melhor compreens�o do seu site.

O "Melhor dos Mundos"

Imagine o que pode acontecer em um futuro pr�ximo: voc� marca um evento na sua agenda do Google ou Yahoo, por exemplo, "reuni�o no escrit�rio da empresa X �s 14h". A� o seu computador, baseado em toda essa gama de informa��es poss�veis, descobre o endere�o desse escrit�rio e, usando uma API geogr�fica, descobre que esse escrit�rio fica em outro estado. Ent�o, automaticamente, ele j� busca a melhor op��o de v�o pra voc� e at� informa o v�o, hor�rio, data, e pre�o, usando um sistema das empresas de linhas a�reas. � s� voc� concordar com ele e a sua vida est� resolvida.

Isso tudo ser� poss�vel se n�s, criadores de conte�do (leia-se HTML), a partir de hoje mesmo, come�armos a organizar o que criamos.

A maioria dos desenvolvedores est� acostumada a criar o HTML e o CSS ao mesmo tempo. Com isso voc� acaba tendo que escolher os elementos que vai usar para facilitar a sua vida na hora de criar o CSS. Fa�a como o Bernard De Luna me ensinou: sempre crie TODO o HTML da p�gina antes, sem nem pensar no CSS. Use os elementos corretos para exibir o conte�do do seu site de forma hier�rquica e concisa.

Se voc� for criar uma s�rie de elementos que ir�o se repetir, como menus, listas de produtos e listas de not�cias, use listas (<ul>), pois esse elemento informa pra m�quina que aquilo � uma lista!

MicroFormats

Existe uma coisa bem legal chamada MicroFormats que � uma das bases dessa tal Web 3.0 (que vem acompanhado do HTML 5 e do XHTML 2). Ele se baseia na passagem de par�metros, via seu c�digo HTML (usando elementos espec�ficos acompanhados de classes pr�-definidas) para informar que tipo de informa��o est� sendo transmitida. Um exemplo b�sico seria numa p�gina onde tem os dados de contato e, ao redor do telefone, voc� diz que aquilo ali � o seu telefone usando um class="phone". Isso vai fazer com que o rob� identifique mais f�cil que o telefone do autor daquele site, ou da empresa em quest�o, � aquilo que est� dentro do elemento.

Desenvolvimento �tico, por uma WEB melhor

N�o � s� na medicina e na advocacia que existe �tica. Voc� deve ser �tico tamb�m na hora de criar um conte�do HTML pois, se voc� o fizer da forma correta, usando os conceitos e padr�es internacionais, inserindo todas as informa��es necess�rias, al�m de ter um site muito mais bem posicionado e indexado nos sistemas de busca, voc� vai contribuir para uma digitaliza��o correta de todo o conhecimento do mundo e, quem sabe, n�o precise ter que procurar a sua passagem de avi�o pro pr�ximo evento que for.

E pra quem ficou curioso sobre o assunto, as palavras-chave de busca s�o: sem�ntica, XHTML, W3C e outras espalhadas pelo texto.�

Um grande abra�o!

Web Beacon

camilo.melo@yahoo.com.br (Camilo Teixeira de Melo) — Mon, 06 Jul 2009 09:00:00 +0100

Web Beacons ou Web Bugs s�o umas s�ries de t�cnicas utilizadas para monitorar quem est� lendo uma p�gina na web, email e/ou dados do computador. Tamb�m pode ser usado para verificar se um determinado e-mail foi lido ou se uma determinada mat�ria foi copiada indevidamente para outro site. Os primeiros Web Beacon eram imagens de 1x1.

Adicionalmente, um Web Beacon � utilizado para medir padr�es de tr�fego dos usu�rios de uma p�gina a outra com objetivo de maximizar o fluxo de tr�fego atrav�s da Web. Por exemplo, o usu�rio e o visitante do site Mercado Livre manifestam conhecer e aceitar que Mercado Livre poder� utilizar um sistema de monitoramento mediante a utiliza��o dos mesmos.

Embora Web Beacons seja utilizada da mesma forma nas p�ginas da Web ou e-mails, as finalidades s�o diferentes:

Se est� embutido em um e-mail, a imagem � carregada pelo browser quando o usu�rio l� o e-mail pela primeira vez, assim podemos saber se um determinado e-mail foi lido ou n�o;
Sempre que � feito o download de uma p�gina da Web (com ou sem erros), o servidor que ret�m a p�gina sabe e pode armazenar o endere�o IP do computador que solicita a p�gina, linguagem do browser etc.

Abaixo segue um exemplo simples, onde eu vou pegar o IP do usu�rio que acessa uma determinada p�gina.

Criaremos um arquivo chamado webbug.php

<?php
// crio um arquivo aonde vou armazenar o ip do usu�rio
f = fopen('teste.txt','a');
fwrite(f,_SERVER['REMOTE_ADDR']."\\n");
fclose(f);
// aqui eu retorno o cabe�alho informando que esse arquivo � uma imagem, isso evita erros do browser
header('Content-type: image/gif');
?>

Agora vamos incluir o Web Beacon, para isso vamos criar uma tag IMG com as dimens�es 1x1

<img src="webbug.php" alt="" width="1" height="1" />

Dessa forma quando o browser carregar a imagem, ele tamb�m est� executando o arquivo webbug.php, desta forma criamos um Web Beacon.

Hoje os Web Bugs tamb�m utilizam IFrame, link , script e outras tags para monitorar uso.

Web Beacons podem ser utilizados em combina��o com cookies HTTP como qualquer outro objeto transferido usando o protocolo HTTP.

Espero que tenham gostado.

Como criar um formul�rio simples no Joomla

andre.sniper@gmail.com (Andr� Luiz Costa de Andrade) — Mon, 22 Jun 2009 10:00:00 +0100

Neste artigo iremos aprender a criar um formul�rio simples para o Joomla, utilizando o componente Chrono Forms. Esse formul�rio ser� similar ao fale conosco, mas com algumas particularidades bem interessantes. Al�m disso, este tutorial vai lhe abrir um leque de possibilidades para a cria��o de formul�rios para o Joomla.

Antes de tudo voc� precisa baixar o componente para sua m�quina, abaixo segue o link da vers�o V3. 1 RC2 desse componente.

Componente ChronoForms V3.1 RC2

Nota: Se uma nova vers�o j� est� dispon�vel, recomendo utiliz�-la.

Ap�s a instala��o do Chrono Forms na �rea administrativa do Joomla, v� at� - Componentes - Chrono Forms - Forms Manager.

Aqui nesta p�gina n�s vamos criar nosso primeiro formul�rio. Para isso vamos clicar em NOVO.

Imagem do Chrono Forms 1

Como mostra circulada de vermelho na figura acima, podemos notar um menu bem extenso no qual teremos de mexer para criar nosso formul�rio!

Calma, n�o se preocupem! N�o � necess�rio mexer em tudo! Vamos come�ar!

No primeiro menu General (Geral), temos alguns campos a preencher.

O primeiro campo �: Form Name (do nome), eu vou chamar de contato. O nome pode ser qualquer um, lembrando apenas que n�o pode entrar espa�os, acentos, letra mai�scula etc.

Segundo campo �: Email the results? (Resultado de email). Esse campo pergunta a voc� se deseja receber um e-mail com os dados do formul�rio que foi preenchido. Esse campo sempre vem marcado como "n�o", vamos mudar para "sim", j� que queremos receber esses e-mails.

Nota: N�o � necess�rio alterar os campos posteriores.

Vamos para o segundo menu: Setup Emails (Configura��o de emails). Aqui vamos configurar o email para receber os formul�rios.

Pra realizar tal tarefa, temos que clicar no envelope com uma seta verde para baixo:

Obs: Ao clicar no envelope o campo fica com uma cor rosada.

Para jogar os campos dentro do quadrado rosado basta clicar em cima dos campos ao lado e arrastar para dentro do quadrado. Os campos que vamos utilizar s�o os seguintes:

To (Para), pra onde o formul�rio vai;
Subject (Assunto), quando o formul�rio chegar at� seu e-mail no assunto vir� o nome que colocou aqui;
Fromname (do nome), quando o formul�rio chegar at� seu e-mail voc� o identificar� com o nome que colocou aqui;
Dynamic FromEmail (do email din�mico), aqui voc� colocaria o e-mail de quem ir� preencher o formul�rio, como voc� n�o sabe e n�o ser� somente um e-mail, voc� ir� inserir o "name" do campo (input) correspondente ao e-mail que voc� ir� criar para o formul�rio (eu vou colocar "email", desta forma quando o formul�rio chegar no lugar de email vir� o e-mail da pessoa que preencheu o formul�rio.

Veja na figura abaixo os campos que acabamos de arrastar j� preenchidos.

Ap�s todos os campos devidamente preenchidos vamos ao quadro ao lado na parte inferior onde diz: "Email Properties" (Propriedade de email). Dentre as op��es que temos nesse espa�o vamos alterar somente uma: "Enabled". Somente escolhendo a op��o (Yes) vamos tornar valido tudo que fizemos nesse menu (General).

Agora basta clicar em Apply (aplicar). Esse processo deve demorar um pouco, mas n�o impede de prosseguirmos.

Vamos pular o pr�ximo menu (Emails Templates) por enquanto, sendo assim, vamos ao seguinte: Form Code (do c�digo).

Essa parte � muito importante, pois � aqui onde colocaremos o nosso c�digo do nosso formul�rio.

Para esse tutorial vamos trabalhar com um formul�rio de 5 campos!

Obs: Neste tutorial n�o iremos ensinar como desenvolver o c�digo do formul�rio. O que estamos utilizando segue abaixo, como exemplo.

Obs2.: N�o insira a tag <form>, normalmente utilizada em formul�rios, pois o pr�prio componente ir� inserir para voc� corretamente.

Voc� deve estar se perguntando o porqu� de: nome, telefone, email, assunto, mensagem, estarem em negrito... Calma! Mais a diante vamos explicar!

Nesta etapa existem 4 campos, nosso c�digo do formul�rio entrar� no primeiro campo: Form HTML (do HTML).

Nota: Como se trata de um formul�rio simples, o segundo e terceiro campo n�o precisar mexer. E o quarto campo: On Submit code - after sending email (Enviar c�digo - depois de enviar e-mail) � opcional.

Se voc� deseja que seu cliente veja uma mensagem de agradecimento, ou qualquer outra mensagem ap�s enviar o formul�rio, ent�o voc� ir� querer preencher esse campo! Basta criar o c�digo com a mensagem que deseja transmitir.

Abaixo segue o C�digo que usamos para esse campo.

Nota: Aqui n�o usamos um texto e sim uma imagem de agradecimento.

Ap�s ter feito, vamos prosseguir para o pr�ximo menu.

N�s vamos para o menu Validation (Valida��o).

Nota: Pulamos 6 menus, pois eles n�o precisam ser alterados para este tipo de formul�rio.

No menu Valida��o vamos alterar o primeiro campo: Enable Validation (Ativar Valida��o). Esse campo vem como (No), vamos alterar para (Yes), para nosso formul�rio ser Validado.

Na lista de 1 � 12, como mostra a figura abaixo, vamos acrescentar em ordem os nomes em negrito que mencionamos em nosso c�digo HTML acima.

Voc� deve est� se perguntando: Por que eu tenho que preencher com esses nomes, n�o poderia ser outros?

Eu te responderia: Sim, poderia ser outros se esses outros estivessem em seu c�digo. Vamos voltar no c�digo. Se voc� reparar bem, todos o que est� em negrito s�o os "names"

name="nome"

name="telefone"

name="e-mail

etc.

Voc� escrever� no campo: required (not blank) os campos que voc� deseja que n�o fiquem em branco. O que isso quer dizer? Quer dizer que se algu�m n�o preencher algum campo e tentar enviar o formul�rio n�o vai conseguir, pois os campos s�o todos obrigat�rios.

Nota1: Voc� pode alterar o texto da valida��o, inserindo uma tag "title" no campo input correspondente, exemplo: <input type="text" name="nome" id="nome" title="Preencha seu nome!" />

Nota2: Voc� s� preenche o required (not blank) se quiser que algum campo seja obrigat�rio em seu formul�rio.

Ap�s preencher o campo clique em salvar.

Ap�s esse processo, nosso formul�rio estar� pronto para ser utilizado!

Importante: Se voc� abrir novamente o formul�rio que criou, poder� verificar na aba "Emails Templates", como ser� o e-mail que receber� ap�s o mesmo ser enviado. Sabendo que os textos entre {} s�o os values dos campos. O texto pode ser alterado livremente.

Importante2: N�o se esque�a de publicar o formul�rio na listagem da p�gina inicial do componente.

Espero que esse tutorial seja de grande valia para muitos!

Qualquer d�vida estou pronta para tir�-las!

Um Grande abra�o e at� a pr�xima!

Fonte Original: Portal Joomla RJ

Escrito por: Rachel Soares Pereira

Refletindo sobre Sem�ntica

eduardo@agni.art.br (Eduardo Santos) — Tue, 17 Feb 2009 11:15:00 +0100

Em meu �ltimo artigo sobre a resist�ncia que desenvolvedores tem em adotar as Web Standards, muitas pessoas se manifestaram no sentido de que trabalhar com editores WYSIWYG como Fireworks ou Dreamweaver, na cria��o de p�ginas diagramadas com tabelas, seria mais produtivo, al�m de evitar incompatibilidade com navegadores.

As alega��es s�o de que o uso das Web Standards aumenta o tempo de desenvolvimento, a quantidade de testes e a corre��o de erros. Isso realmente pode acontecer, se o desenvolvedor n�o possuir experi�ncia suficiente com XHTML e CSS, e consequentemente, criar Layouts inadequados para a estrutura��o.

As maiores dificuldades que as pessoas t�m para compreender a import�ncia do desenvolvimento com as Web Standards � (1) imaginar que � apenas uma quest�o de substituir Tabelas por DIVs, e (2) n�o compreender a quest�o da Sem�ntica.

O que � Sem�ntica?

A Sem�ntica, enquanto estudo da palavra, tem preocupa��o com o significado dos objetos (me refiro aqui a objeto como tudo que � percept�vel aos sentidos).

A ideia de uma Web Sem�ntica surgiu em 2001 a partir de um artigo publicado por Tim Berners-Lee, James Hendler e Ora Lassila, e tem como objetivo estender a Web atual, atrav�s da atribui��o de significado ao conte�do dos documentos, de forma que eles possam ser compreens�veis n�o s� por seres humanos, mas tamb�m por m�quinas. Isso possibilitaria que informa��es �teis em diferentes sistemas fossem integradas para facilitar a vida das pessoas.

Vamos imaginar que eu possuo uma agenda online, onde consta que tenho uma viagem marcada para Nova Yorque, assim como a data e o hor�rio em que devo embarcar. Essas informa��es seriam muito claras para mim ou para qualquer outro ser humano, que poderia providenciar tudo que fosse necess�rio para a viagem.

Agora vamos imaginar que essa agenda possui informa��es com significado n�o s� para humanos, mas tamb�m para m�quinas, de forma que esses dados pudessem ser integrados com outros sistemas pelo mundo, que tamb�m tivessem informa��es com significado para as m�quinas.

Com isso, meu sistema, ao identificar o compromisso na agenda, poderia automaticamente buscar e reservar para mim uma passagem a�rea para o dia e hor�rio em que fosse necess�rio, assim como reservar um quarto no hotel mais pr�ximo ao meu local de destino, e quem sabe at� me recomendar passeios, livrarias e restaurantes, de acordo com meus gostos pessoais descritos no perfil de uma rede social qualquer.

Parece at� coisa de filmes de fic��o cient�fica!

Para que algo assim fosse poss�vel, para que os sistemas tivessem esse n�vel de automatiza��o e funcionassem como na hist�ria acima, ter�amos que pensar na evolu��o dos documentos, antes de pensar na evolu��o das tecnologias.

Ter�amos que criar documentos em que as informa��es tivessem significado n�o s� para humanos, mas tamb�m para m�quinas.

Isso seria a Web Sem�ntica.

Tirar o lixo e organizar a casa

Algu�m sabe a quantidade de informa��o que existe hoje na Web, ou quanta informa��o � poss�vel de ser armazenada digitalmente?

Um CD comum armazena cerca de 650 Megabytes de informa��o, e isso equivale a 340.000 p�ginas com 2000 caracteres cada. Se essas p�ginas fossem impressas em papel de 20 gramas em frente e verso, a pilha de papel necess�ria para equivaler � capacidade informativa de um CD pesaria 770 quilos. (Informa��o retirada do livro "Do papel at� a Web", de Tony McKinley)

Acho que agora deu pra ter uma ideia!

A Web tem mais informa��es do que todas as bibliotecas do mundo juntas. Infelizmente a maioria dessas informa��es n�o tem significado nem sentido algum.

Uma Linguagem de Marca��o como o HTML � feita de etiquetas (tags) que servem para dar significado �s partes de um documento. Sendo assim, com as etiquetas <h1></h1> informamos que determinado trecho de texto � um t�tulo, com as etiquetas <p></p> indicamos que determinado trecho de texto � um par�grafo, ou ent�o com as etiquetas <blockquote></blockquote> informamos que determinado bloco de texto � uma cita��o.

Sabendo disso, poder�amos acreditar que trabalhando com HTML ter�amos naturalmente documentos com defini��es claras sobre o que � cada informa��o.

Por�m, desde o in�cio a Web foi sendo explorada como uma extens�o da m�dia impressa, com uma preocupa��o unicamente visual, sem levar em considera��o a estrutura dos documentos e seu significado. Como os recursos do HTML eram limitados para diagrama��o, al�m de possuir algumas marca��es pr�prias para formata��o, os documentos come�aram a ser adaptados de forma equivocada, e recursos como tabelas (que existem para definir dados tabulares) come�aram a ser usados para diagramar p�ginas de sites como se fossem p�ginas de revistas. O uso correto das marca��es era ignorado: etiquetas de par�grafo eram usadas para comportar t�tulos ou listas, por exemplo.

Essa forma de criar os documentos faz com que a informa��o fique clara para o seres humanos, por�m sem sentido algum para m�quinas ou sistemas que possam vir a (tentar) interpretar os documentos.

Trabalhar com Web Standards significa criar documentos onde ser�o usadas apenas as marca��es necess�rias para identificar as informa��es, sem que sejam inseridas marca��es com finalidades visuais.

O uso de tabelas para diagramar as p�ginas gera um c�digo sem significado, muitas vezes incompreens�vel, e v�rias vezes maior que o necess�rio, enchendo os servidores pelo mundo de Terabytes in�teis, al�m de fazer com que boa parte das informa��es �teis n�o seja compreendida pelas m�quinas.

Devemos usar apenas marca��es que forne�am significado � cada parte do documento, e toda apresenta��o visual deve estar em um documento separado (CSS).

Acessibilidade: m�quinas informando seres humanos

Quem cria p�ginas para Web utilizando editores WYSIWYG e tabelas pode alegar que disponibiliza informa��es claras ao menos aos seres humanos.

Mas ser� que realmente todos os seres humanos t�m acesso as informa��es publicadas na Web?

Algumas pessoas necessitam do suporte de tecnologias assistivas para compreender as informa��es da Web, seja por defici�ncias visuais ou motoras, necessitando do aux�lio de Leitores de Tela, Teclados Alternativos, Ampliadores de Tela, Ponteiras de cabe�a e Linhas Braille. Existem pessoas que dependem de m�quinas para acessar as informa��es dispon�veis na Web.

Para que um programa Leitor de Tela com s�ntese de voz, usado por uma pessoas cega, possa compreender as informa��es de um documento e convert�-las em �udio, � necess�rio que todos os dados possuam marca��es com significados corretos, para que o programa compreenda quais s�o os t�tulos, as listas, os par�grafos e os dados tabulares, assim como ter alternativas textuais para descrever imagens e anima��es.

Tamb�m � importante que os documentos tenham uma sequ�ncia l�gica, da mesma forma que os cap�tulos de um livro. Quando usa-se tabelas para diagramar um Layout, a �nica preocupa��o � com a organiza��o visual, deixando o c�digo com uma sequ�ncia incompreens�vel para m�quinas, como se mistur�ssemos os cap�tulos do livro.

Para que todas pessoas possam ter acesso as informa��es, devemos criar documentos com uma sequ�ncia coerente, com alternativas textuais para imagens e anima��es, atalhos de teclado para links e campos de formul�rios, indica��es de conte�dos em outros idiomas, e tudo que possibilite �s tecnologias assistivas de compreender o documento.

Trabalhando pela evolu��o dos Sistemas de Informa��o

Boa parte das justificativas dos profissionais que n�o trabalham com os Padr�es est� no fato de que navegadores antigos como o IE6 (que possui a maior fatia dos usu�rios) n�o possuem suporte adequado aos Padr�es. Por�m existem formas de driblar isso, que podemos encontrar com uma simples busca na Web: para PNGs transparentes, assim como para a falta de interpreta��o de algumas propriedades de CSS, como pseudo-elementos, podemos utilizar scripts como o IE7.js. Para diferen�as de renderiza��o entre navegadores temos t�cnicas de CSS Reset.

Qualquer Layout complexo � poss�vel de ser feito com CSS, basta ter conhecimento e as armas certas engatilhadas. O fato de os navegadores antigos n�o fornecerem suporte adequado n�o pode ser pretexto para pararmos de estudar, nem pregarmos o retrocesso do Desenvolvimento para a Web. Dessa forma n�o estaremos contribuindo para que evolu��o alguma aconte�a (voc� acha que o IE8 passou no teste ACID 2 porque a Microsoft decidiu ser legal, ou pela press�o do mercado e dos desenvolvedores?).

Outra f�cil justificativa � jogar a culpa nos clientes, que n�o flexibilizam prazos e nem recompensam financeiramente o uso das Web Standards. Mas ser� que todos os clientes t�m receio de investir em projetos acess�veis por terem preocupa��es unicamente visuais, ou porque n�o s�o esclarecidos das reais vantagens?

Estudar, argumentar e convencer os clientes est� ao alcance de todos. As vantagens que podemos obter com o uso das Web Standards est�o documentadas em diversos sites: arquivos menores e sites mais leves, menor consumo de banda, maior indexa��o pelos mecanismos de busca, maiores facilidades de manuten��o e redesign, al�m de maior Acessibilidade.

Claro que para isso realmente acontecer, devemos compreender que trabalhar com Web Standards n�o � apenas uma quest�o de substituir tabelas por DIVs (Tableless).

Maior produtividade vir� com a experi�ncia, e com a compreens�o de que os documentos n�o podem ser verdadeiras "sopas de tags". Se criarmos p�ginas com uma grande quantidade de marca��es sem significado, mesmo que n�o usemos tabelas e editores WYSIWYG, n�o vamos obter essas vantagens.

� necess�rio criarmos documentos com significados n�o s� para humanos, mas tamb�m para m�quinas. Os sites s�o armazenados em m�quinas, Leitores de Tela e outras Tecnologias Assistivas s�o m�quinas, e tamb�m os mecanismos de busca s�o m�quinas!

As possibilidades de exist�ncia de uma Web Sem�ntica, com integra��o de dados entre diversos sistemas informacionais, que possam melhorar a qualidade de vida das pessoas, s� ser�o poss�veis com documentos sem�nticos, e claro que isso n�o se resume a desenvolver um HTML com devido significado. Por�m, outros assuntos relacionados como RDF ou Microformatos, s�o temas para outro artigo.

Para que haja evolu��o das m�quinas e dos sistemas � preciso que haja primeiro uma evolu��o dos profissionais que fazem a Web.

Resist�ncia aos Padr�es Web

eduardo@agni.art.br (Eduardo Santos) — Tue, 10 Feb 2009 10:00:00 +0100

Ol�, amigos! Na �ltima edi��o do Campus Party Brasil, fiquei encarregado de abrir as atividades na �rea de Design com a palestra sobre Web Standards.

Ap�s a palestra, e depois de bater papo com muita gente por l�, cheguei � triste conclus�o de que muitos profissionais ainda desconhecem as Web Standards, e desenvolvem sites � moda antiga (usando tabelas para diagramar o Layout).

Para contribuir na mudan�a desse quadro, este artigo � o primeiro de uma s�rie sobre Web Standards que estarei escrevendo. E para ter certeza de que vou ajudar a esclarecer as d�vidas sobre esse assunto, deixo aberto o espa�o para a sugest�o de temas para os pr�ximos artigos.

Resist�ncia aos padr�es, ou amor �s tabelas?

Pior do que perceber que ainda hoje muitas pessoas desconhecem as Web Standards e suas vantagens, � perceber que existem pessoas que conhecem, por�m resistem a elas, com argumentos (sem fundamentos) de que desenvolver sites com o uso de tabelas para diagramar o Layout � melhor e mais produtivo.

Esses dias andou pipocando pelas listas de discuss�o um artigo escrito por um tal de Ron Garret, no qual ele tenta justificar que o CSS n�o serve para diagramar Layouts (Why CSS should not be used for layout) e afirma que o uso de tabelas � melhor para tal finalidade.

Essa forma de pensar mostra que muitas pessoas t�m a vis�o equivocada de considerar o Design como mera produ��o est�tica, e desconsideram a concep��o de projeto. Como escrevi em outro artigo, al�m da quest�o est�tica, o Design engloba a cria��o de um produto funcional, us�vel, eficiente e economicamente vi�vel.

Uma estrutura de informa��o, como documentos escritos em HTML ou XML, deve conter apenas marca��es com devido significado (sem�ntica). Adicionar marca��es sem significado em um site pode ser comparado a adicionar diversas p�ginas em branco a um livro: aumentaria inutilmente o tamanho do mesmo, e n�o teriam sentido algum para o leitor. � justamente isso que acontece com o uso das tabelas para diagramar o Layout.

Podemos dizer que o HTML n�o � uma linguagem de marca��o verdadeira, pois sua sintaxe prev� (limitadas) marca��es para formata��o. Uma linguagem de marca��o deve apenas estruturar a informa��o (como o XHTML), enquanto a apresenta��o deve vir de um documento espec�fico (CSS).

A maior dificuldade no uso do CSS para diagrama��o das p�ginas vem da incapacidade dos navegadores, n�o s� no suporte � linguagem, como na padroniza��o do efeito renderizado. O IE6 suporta apenas 51% das propriedades do CSS 2.1, o IE7 apenas 56%, o Firefox2 suporta 91%. O IE6, que ainda � o navegador mais usado, tamb�m suporta apenas 73% do HTML/XHTML, 50% do DOM e 10% do CSS3. Mais informa��es sobre essas estat�sticas podem ser vistas em http://www.webdevout.net/browser-support).

O CSS n�o � perfeito, as empresas que desenvolvem os navegadores n�o colaboram no suporte, e a W3C n�o � nenhum exemplo de discuss�es promissoras em prol da padroniza��o. Lembrando que a W3C n�o se resume apenas �quele tiozinho carism�tico de ideais livres que inventou a Web, mas de diversas empresas com interesses n�o t�o nobres (quem chegou a acompanhar discuss�es sobre o uso dos codec's Ogg Vorbis e o Ogg Theora como padr�o nos navegadores, para o uso da nova tag <video></video> no HTML5, sabe do que eu estou falando).

A vantagem do uso de Padr�es Web

Recortar um layout em softwares como o Fireworks e exportar diretamente para HTML com tabelas pode parecer f�cil e r�pido. Por�m o c�digo gerado torna-se incompreens�vel, sem uma sequ�ncia l�gica da informa��o ou significado, al�m de ser muito maior que o necess�rio.

O uso das Web Standards propicia um melhor custo-benef�cio. As vantagens do uso de padr�es e da separa��o das camadas de Conte�do (XHTML), apresenta��o (CSS) e Comportamento (Javascript) s�o evidentes:

Com arquivos menores e as camadas de Apresenta��o (CSS) e Comportamento (Javascript) no cache do navegador, teremos um carregamento mais r�pido das p�ginas, al�m de menores custos de hospedagem.
Com a formata��o de todas as p�ginas baseadas num mesmo arquivo CSS, teremos uma melhor consist�ncia visual, e possibilidades de manuten��o e redesign mais baratos e eficientes.
Com marca��es mais sem�nticas (usadas com seu devido significado) e com as informa��es do documento estruturadas em uma sequ�ncia l�gica, teremos melhores resultados nos mecanismos de buscas, al�m de melhor acessibilidade e interoperabilidade entre diferentes dispositivos.

Exemplos pr�ticos dessas vantagens:

A Legal & General, uma das primeiras empresas a aplicar em seu site as "Diretivas para acessibilidade Web" (Web Content Accessibility Guidelines) da W3C, e os resultados foram que as taxas de convers�o aumentaram 300%, custos de manuten��o ca�ram 66%, listagem natural nas buscas aumentou 50% e o carregamento das p�ginas ficou 75% mais r�pido (fonte: RevistaW).
A ESPN, quando migrou seu site para os Padr�es, reduziu cerca de 50kb em cada p�gina, economizando 2 Terabytes de banda por dia (fonte: Mike Davidson).

Quanto � beleza dos sites feitos com CSS, � indiscut�vel que as possibilidades s�o enormes, e muito mais eficientes que a formata��o possibilitada com o uso de tabelas no HTML. Exemplos disso podemos encontrar na galeria CSS Zen Garden ou em sites como o Web Leed Design.

Se as Web Standards ainda n�o s�o o ideal, � o que de melhor temos hoje para o desenvolvimento de p�ginas para a Web.

Linguagens como o CSS t�m sempre mil possibilidades. A limita��o est� no Designer.

(x)html e css para design de interfaces - Parte 2

bipereira@gmail.com (Fabiano Pereira) — Fri, 06 Feb 2009 09:40:00 +0100

O (x)html/css como ferramenta, conceito e diferencial do designer de interfaces � o tema deste artigo, em sua segunda parte. Para um melhor entendimento, sugiro, antes de mais nada, uma atenta leitura � primeira parte.

Processo de produ��o do c�digo

O processo, em si, � bastante claro e objetivo: cuidar da codifica��o, da estrutura do lay-out desejado, obtendo, assim, um melhor resultado, carregamento r�pido, amplificando os conceitos de usabilidade e acessibilidade por meio de boas e salutares t�cnicas.

Sendo assim, nada poder� dar errado, n�o �?

Analisando os "gargalos" da produ��o

O processo rotineiro de um est�dio ou ag�ncia web inclui verbas m�nimas, grandes exig�ncias e pouca toler�ncia (por boa parte dos clientes) e prazos imposs�veis. N�o h� como fugir: ou se entra em tal l�gica tortuosa de cabe�a, ou colhe-se as consequencias desagrad�veis da falta de adapta��o, que incluem o "sumi�o" dos freelas e o desemprego pertinente.

Conhe�a, agora, os maiores "gargalos produtivos", e as melhores maneiras de evit�-los:

1) Propostas infact�veis:

Tais propostas s�o oferecidas / desenvolvidas por profissionais de cria��o completamente desambientados do processo de estrutura��o de p�ginas. � certo que a criatividade precisa de espa�o para "voar", por�m um m�nimo de "p�-no-ch�o" � mais do que necess�rio. � preciso conhecer o processo produtivo como um todo (mesmo que certas etapas n�o fa�am parte de sua rotina profissional), a fim de n�o propor solu��es "imposs�veis", que podem ser belas e competentes em termos de design, por�m completamente descabidas no momento de estruturar tal conte�do.

Portanto, se a id�ia e o briefing levam para o desenvolvimento em (x)html/css (com textos em formato "nativo", portanto), de nada adianta desenvolver um lay-out que, na melhor das hip�teses, s� ser� fact�vel em flash.

O profissional que faz design web, ao conhecer efetivamente a estrutura��o, poder� situar-se melhor, evitando grandes "mancadas", como apresentar e aprovar determinada proposta ao cliente imposs�vel de ser "produzida".

2) C�digos sujos:

Heran�a indefect�vel do uso "pregui�oso" de editores WSWYG, c�digos sujos, n�o-sem�nticos, inadequados �s web standards, est�o espalhados por diversos sites, nos mais variados "n�veis" de produtores. O maior problema, aqui, est� na manuten��o de tal c�digo. Normalmente, sites com c�digos de tal "qualidade" nascem do descuido e descaso de diversos "profissionais" completamente reativos, sem qualquer preocupa��o com a necessidade de edi��o posterior. Ao agirem assim, ignoram a m�xima: "o cliente vai mudar de id�ia", al�m de "esquecerem" que sites web s�o mutantes, mudam drasticamente (visualmente, conceitualmente).

A solu��o, novamente, recai sobre a necessidade de aprender, de fato, estrutura��o. Assim, com conhecimentos, vis�o e responsabilidade, todo e qualquer c�digo torna-se limpo, edit�vel e expans�vel.

3) Falta de integra��o:

Por mais �bvio que seja, existem designers que simplesmente relutam na hora de conversar com os estruturadores e programadores envolvidos no mesmo projeto, resultando num grande obst�culo � integra��o de solu��es produtivas adotadas. Ningu�m est� numa ilha, o sucesso de um projeto web est� diretamente ligado � integra��o de uma equipe, capaz de trabalhar e pensar coletivamente.

4) Produ��o desestruturada:

O maior problema, aqui, � a repeti��o da produ��o de c�digos quase id�nticos, somente por estarem em projetos distintos, o que, certamente, custar� tempo precioso.

Que tal usar m�dulos produtivos? Existem diversos blocos de c�digo e muitas solu��es produtivas de estrutura��o que normalmente se repetem, de projeto em projeto. Assim, diversas tarefas ficam mais f�ceis, pois j� partem de um conjunto de c�digos pr�-definidos, bastando a adapta��o dos mesmo para que o projeto avance. Exemplos de tal id�ia: c�digos para separa��o em colunas de uma p�gina, de menus de links, de formul�rios e diversos outros.

Solu��es poss�veis

H� uma s�rie de a��es que podem (e devem) ser adotadas pelo designer que faz web, melhorando significamente a performance em tal meio e evitando a calv�cie precoce (advinda do constante "arrancar" de cabelos). Sugiro, aqui, algumas id�ias que podem melhorar a vida profissional:

1) Vivencie a estrutura��o:

Perca o medo e o receio. Mergulhe de cabe�a! Experimente adotar as web standards em seus projetos, acompanhe sites desenvolvidos com padr�es (como o w3csites, por exemplo) e veja as poderosas possibilidades em a��o. Ao acompanhar os mais "experientes" em a��o, certamente a empolga��o em mergulhar fundo aumentar� consideravelmente.

2) Expanda seus conhecimentos:

O melhor meio para aumentar suas habilidades � o estudo. Juntamente com a pesquisa, ir� possibilitar um aumento significativo da percep��o profissional, em qualquer n�vel em que esteja. Confira algumas dicas comentadas, de sites e livros:

a) W3C - Documenta��o traduzida: boa parte dos mais importantes documentos contendo as defini��es do (x)html, css, web standards e acessibilidade. Grandes colaboradores brasileiros resolveram desenvolver, gratuitamente, suas tradu��es, visando � expans�o das web standards em terras nacionais. Fa�a sua parte e estude os documentos traduzidos, fazendo com que tal esfor�o n�o seja em v�o.

b) Maujor: Maur�cio Samy Silva (Maujor) � um respeit�vel senhor de cabelos brancos e uma invej�vel bagagem em web standards no Brasil, sendo, praticamente, o or�culo de tal tema. Quando se interessou por padr�es web, o tema era praticamente desconhecido no pa�s (e n�o havia os milhares de sites e blogs escrevendo - ou tomando carona - sobre o tema). Portanto, trata-se do pioneiro dos padr�es no Brasil, sendo que seu site possui muitas informa��es preciosas para estudandes e profissionais da �rea. Visite o site, aproveite e passe pelo blog.

c) CSS Zen Garden: conhe�a uma brilhante galeria de sites desenvolvidos somente com (x)html/css e veja do que esta linguagem � capaz, desde que utilizada sabiamente. O site oferece um conjunto de documentos para que qualquer pessoa se aventure na constru��o de um novo layout, inteiramente baseado em css, sendo que os melhores s�o publicados. Visite. Conhe�a a vers�o em portugu�s.

d) Livro do Maujor: o livro "Construindo Sites com CSS e (X)HTML" � o melhor livro publicado at� ent�o no Brasil. Com did�tica s�ria, din�mica e inteligente, Mauricio Samy Silva conduz o estudante pelos caminhos do desenvolvimento com css, dando base s�lida e conhecimento de verdade. Visite o site do livro.

e) CSS interativo: conhe�a este servi�o oferecido pelo iMasters, com desenvolvimento de Mauricio Samy Silva e experimente, interativamente, todos os recursos do css. Visite!

f) W3C validator (css e xhtml): verifique seu c�digo a fim de procurar erros e corre��es. Com esta ferramenta oferecida pelo W3C, voc� poder� verificar seus c�digos por uploads (ou seja, poder� verificar antes de publicar), p�ginas hospedadas e conferir a rela��o de erros e sugest�es "rob�ticas" para corre��es. Conhe�a a ferramenta e adicione aos seus favoritos! Voc� tamb�m pode instalar plugins de firefox para valida��o diretamente no browser como o tidy, por exemplo, e verificar seus c�digos.

g) Web Developer: conjunto de ferramentas para desenvolvedores (edi��o em real time de css, valida��o e outros), oferecidas num plugin de firefox. Instale aqui e aprenda sobre a ferramenta aqui.

Conclus�es

Espero que as informa��es e dicas acima possam ajudar a todos os designers de interface no �rduo caminho rumo � padroniza��o total de todas as p�ginas e sites desenvolvidos. Fico no aguardo das opini�es de todos voc�s.

Boa sorte!

MobileSafari - O Safari do iPhone

diego@tableless.com.br (Diego Eis) — Wed, 29 Oct 2008 13:30:00 +0100

Este texto tamb�m est� dispon�vel no Campus Online da Visie. Bem como v�deos relacionados e outros tutoriais t�cnicos sobre desenvolvimento web. Visite a p�gina exclusiva sobre desenvolvimento para iPhone.

Um pouco de Hist�ria

Por volta de 1997, os computadores da Apple traziam por padr�o o Netscape. Naquele tempo o mercado de browsers n�o era t�o acirrado como hoje e os concorrentes eram poucos. O Internet Explorer estava em sua vers�o 2/3. Mesmo assim, o Internet Explorer para Mac era tamb�m distribu�do com o MacOS durante os 5 anos de acordo entre Apple e Microsoft. A Microsoft la�ou 3 vers�es principais do seu navegador para o Mac, parando na vers�o 5 em mar�o de 2000.

Em 2003, a Apple anunciou que eles estavam desenvolvendo seu pr�prio browser baseado no motor de renderiza��o KHTML. A vers�o 1.0 foi lan�ada como browser padr�o do MacOS por volta de Junho de 2003. O Internet Explorer ainda era distribu�do no sistema, mas agora como um navegador alternativo, at� Abril de 2005.

Motor de Renderiza��o WebKit

O Safari utiliza um motor de renderiza��o chamado WebKit. O WebKit tem dois motores de renderiza��o: o WebCore, que � o motor de renderiza��o baseado no KTHML do Konqueror, e o JavaScriptCore, baseado no motor de javascript KDE chamado KJS. Esses motores est�o sob Licensa GNU.

A Apple, ao fazer o Safari, fez muitas atualiza��es e modifica��es no motor KHTML, deixando-o mais maduro e robusto. Essas modifica��es foram devolvidas para a comunidade e incorporadas no Konqueror.

MobileSafari e Safari para Desktop

A id�ia � que o usu�rio tenha uma experi�ncia muito pr�xima � experi�ncia que ele tem no desktop. Por isso o Safari para iPhone (MobileSafari) foi feito sob o mesmo motor de renderiza��o WebKit do Safari para Windows e Mac. Diferen�as: 1) Se o site n�o foi feito para iPhone, ele renderiza a p�gina da mesma forma como renderiza em um Safari para desktop, mas miniaturizada. 2) A intera��o do usu�rio.

Padr�es Suportados

Para que a renderiza��o do MobileSafari seja fiel ao Safari para desktop, ele tem grande suporte aos Padr�es Web.

HMTML 4.01
HTML 5
XHTML 1.0
CSS 2.1
Parte do CSS 3
Javascript 1.4
Ajax
DOM

� interessante notar que temos uma certa liberdade de desenvolvimento web no iPhone. H� facilidades como cantos arredondados que n�o podemos contar no desenvolvimento focado para desktops. Isso traz vantagens pra voc�, desenvolvedor, porque facilitar� seu trabalho, e para o usu�rio, porque ele ter� uma experi�ncia mais rica.

Limites dos recursos

Embora o iPhone suporte as tecnologias mais atuais de desenvolvimento web, n�o podemos esquecer que ele � um dispositivo m�vel, com capacidade de processamento muito menor que a de um desktop. Por isso, h� algumas limita��es de recursos a que devemos nos atentar.

Para c�digos:

10Mb para arquivos Javascripts e XML
O tempo de execu��o de um Javascript � limitado a 10 segundos. Se passar de 10 segundos, o Safari p�ra a execu��o em algum lugar aleat�rio do seu c�digo.
Javascripts alocados limitados a 10Mb
M�ximo de 8 documentos abertos de uma vez

Para imagens:

Limite m�ximo do tamanho de GIF, PNG e TIFF � de 2 Megapixels
A decodifica��o m�xima dos tamanhos de JPGs � de 32 Megapixels. Utilizando SubSampling
O tamanho m�ximo de GIFs animados deve ser menor que 2MB. Para arquivos animados maiores, s� � mostrado o primeiro frame.

Verifique sempre o tamanho final de sua p�gina. Normalmente os sites com 30Mb para menos funcionam muito bem no iPhone.

Menos XHTML com JavaScript

carlos@tristacci.com.br (Carlos Tristacci) — Thu, 02 Oct 2008 10:00:00 +0100

Recentemente estou trabalhando no novo layout do Portal do Professor (http://portaldoproferssor.mec.gov.br), no qual projetei o conte�do separado por caixas que possuem cantos arredondados, sombra, sombra interna, degrad� e linhas de borda, como pode ver abaixo:

Com esta combina��o deixei o cliente satisfeito com o resultado visual, mas acabei projetando um verdadeiro problema para estruturar o XHTML, pois preciso agora de 6 imagens de fundo para cada caixa e devido ao meu layout ser l�quido / el�stico, acabei com a seguinte estrutura:

<span class="wrap1��>
<span class="wrap2��>
<span class="wrap3��>
<span class="wrap4��>
<span class="wrap5��>
<span class="wrap6��>
<div class="box">
<h2>Wrap</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum tempor. Fusce lacinia. Duis blandit tincidunt lectus. Donec tortor. Nam fringilla justo vitae erat. Vivamus lobortis dui a nisl. Proin justo ante, lacinia non, aliquet in, egestas ac, leo. Sed metus libero, ornare eu, sagittis elementum, vulputate a, erat. Aliquam porttitor.
</p>
</div>
</span>
</span>
</span>
</span>
</span>
</span>

Acabei tendo que escrever um c�digo repetitivo e nada sem�ntico, al�m de tornar meu c�digo mais dif�cil de manter, prejudicando assim a escabilidade de um portal que est� constantemente recebendo novas implementa��es.

Para solucionar isto, resolvi escrever um c�digo javascript, que insere tags <span> de forma din�mica deixando o meu c�digo XHTML apenas com a <div class="box">...</box>, como abaixo:

<div class="box">
<h2>Wrap</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum tempor. Fusce lacinia. Duis blandit tincidunt lectus. Donec tortor. Nam fringilla justo vitae erat. Vivamus lobortis dui a nisl. Proin justo ante, lacinia non, aliquet in, egestas ac, leo. Sed metus libero, ornare eu, sagittis elementum, vulputate a, erat. Aliquam porttitor.
</p>
</div>

Para inserir as tags <span> necess�rias para inserir as imagens de fundo na caixa, lembrando que cada tag aceita apenas uma imagem de fundo, escrevi o script a seguir:

// Crio um array
var alltags = new Array();
function changeBox() {
// O m�todo getElementsByTagName() retorna um array com todas os elementos <div> que existem no documento e armazena no array alltags.
var alltags=document.getElementsByTagName("div");
// A estrutura de repeti��o for passa por cada elemento <div> armazenado em alltags.
for (i=0; i<alltags.length; i++) {
// Verifica se o elemento tem a classe box.
if (alltags[i].className==�box�) {
// Armazena na vari�vel element em  cada intera��o do for o velor armazenado no �ndice i de alltags
var element = alltags[i];
// Armazena o objeto pai de element na vari�vel content
var content = element.parentNode;
// Cria os elementos XHTML <span>
var wrap1 = document.createElement(�span�);
var wrap2 = document.createElement(�span�);
var wrap3 = document.createElement(�span�);
var wrap4 = document.createElement(�span�);
var wrap5 = document.createElement(�span�);
var wrap6 = document.createElement(�span�);
// Atribui para cada elemento XHTML <span> uma classe
wrap1.setAttribute(�class�, �wrap1�);
wrap2.setAttribute(�class�, �wrap2�);
wrap3.setAttribute(�class�, �wrap3�);
wrap4.setAttribute(�class�, �wrap4�);
wrap5.setAttribute(�class�, �wrap5�);
wrap6.setAttribute(�class�, �wrap6�);
// Insere um elemento filho ao elemento atual, antes de um determinado elemento. O elemento wrap1 � inserido em content antes de element
// Mais informa��es do m�todo insertBefore no endere�o: http://developer.mozilla.org/pt/DOM/element.insertBefore.
content.insertBefore(wrap1, element);
// O elemento wrap1 recebe o novo elemento wrap2. E assim acontece com os demais elementos respectivamente.
// Mais informa��es do m�todo appendChild no endere�o: http://developer.mozilla.org/Pt/DOM/Element.appendChild.
wrap1.appendChild(wrap2);
wrap2.appendChild(wrap3);
wrap3.appendChild(wrap4);
wrap4.appendChild(wrap5);
wrap5.appendChild(wrap6);
// Remove element de content
content.removeChild(element);
// E insere element para wrap6
wrap6.appendChild(element);
}
}
}
// Executa a fun��o
changeBox();

E para finalizar nossas caixas, vamos estiliz�-las com CSS. N�o irei comentar o CSS, pois acredito que se chegou at� aqui buscando solu��o para um problema semelhante, j� domine a linguagem.

Al�m do CSS que estilizam as classes que atribu�mos por JavaScript �s tags <span>, escrevi outros estilos para compor a p�gina e representar melhor o exemplo.

*{
padding:0;
margin:0;
font:1em Verdana, Geneva, Arial, Helvetica, sans-serif;
}
body{
background:transparent url(bg_body.png) repeat left top;
font-size:11px;
padding:100px 400px;
}
h2{
font-size:1.5em;
padding-bottom:.5em;
}
p{
color:#666;
}
.box{
padding:25px 30px 30px;
}
.wrap1, .wrap2, .wrap3, .wrap4, .wrap5, .wrap6 {
display:block;
}

.wrap1 {
background:transparent url(bg_cr.png) repeat-y right center;
margin-bottom:1em;
}
.wrap2 {
background:transparent url(bg_cl.png) repeat-y left center;
}
.wrap3 {
background:transparent url(bg_tr.png) no-repeat right top;
}
.wrap4 {
background:transparent url(bg_tl.png) no-repeat left top;
}
.wrap5 {
background:transparent url(bg_br.png) no-repeat right bottom;
}
.wrap6 {
background:transparent url(bg_bl.png) no-repeat left bottom;
}

Espero que visite o Portal do Professor daqui a algum tempo e veja o resultado pr�tico do que estou falando aqui.

Um abra�o e at� o pr�ximo artigo!

Como o Google entende seu texto

hickham2@gmail.com (Maur�cio Zane) — Tue, 23 Sep 2008 11:00:00 +0100

Se voc� gosta de Web Writer, essa � uma boa hora para conhecer como os mecanismos de busca processam o seu texto, e como voc� pode escrever um bom texto entendendo essa l�gica. Esses conceitos s�o conhecidos por poucas pessoas aqui no Brasil, ent�o sinta-se privilegiado ao final da leitura.

N�o serei muito t�cnico para n�o deixar o texto cansativo, todos os conceitos que explicarei abaixo vou dar exemplos pr�ticos como influem diretamente no seu HTML.

Para come�ar voc� deve saber o que � IR (Information retrieval) ou Recupera��o da Informa��o para n�s. � uma �rea da Ci�ncia da Informa��o que est� por tr�s do tratamento e busca por dados e meta dados em documentos.

� de fundamental import�ncia que analistas SEO e SEM entendam os princ�pios b�sicos de IR para n�o bolarem teorias mirabolantes sem base t�cnica, como acontece e muito nos Estados Unidos. Muitos profissionais de Marketing sem conhecimento de Ci�ncia da Informa��o bolam teorias de SEO com base em testes, s� que montar uma teoria somente por percep��o abre uma grande brecha para erros e dupla interpreta��o.

Etapas de Representa��o de dados de um Site pelos Mecanismos de Busca

Indexa��o

Durante o processo de Arquivamento da p�gina (ou indexing) esse documento � preparado para uso por um sistema de IR. O site est� todo cru para o sistema, cheio de tags, metatags, caracteres especiais, pontua��es etc. Os sistemas precisam do conte�do todo limpo para poder entender o que a sua p�gina est� falando. Ent�o ele transforma o seu documento em uma representa��o de texto. Nesse processo ele cria duas bibliotecas: uma para express�es regulares e outra para stop words (palavras comuns, ex: que, de, etc.). Tamb�m seta alguns filtros e parsers (processadores).

Passos da Indexa��o

Lineariza��o do Documento

� o processo onde o documento � reduzido somente a termos em min�sculo e sem pontua��o. O sistema remove todas as tags HTML, toda a pontua��o e acentua��o, caracteres especiais e espa�os.

O processo onde o texto � tratado ap�s a remo��o da marca��o � conhecido como Tokeniza��o.

Na tokeniza��o o computador � instru�do a entender que aquela seq��ncia de bytes � uma palavra separada da outra. Alguns usam h�fen, outros n�o.

Durante a lineariza��o o CSS � removido. Logo, voc� percebe que se o seu HTML n�o estiver em ordem, o buscador vai ter em um primeiro momento uma informa��o desconexa e poder� entender errado o seu texto. Se voc� fez pirotecnia no css, mandando um texto que est� em primeiro no HTML para o rodap� do site, j� est� no caminho errado. Por isso a import�ncia do envolvimento de todas as �reas de desenvolvimento no trabalho de SEO.

Se voc� tem um fluxo de informa��o coerente no seu HTML, na hora que o sistema de IR deixar "pelado" o seu site voc� estar� tranq�ilo, pois o carregamento da informa��o se dar� de forma correta. Com os temas das informa��es sendo coerentes com t�picos e sub t�picos. O posicionamento do texto no seu carregamento na lineariza��o se d� pela sua marca��o HTML.

Quando h� erros nesse fluxo o �ndice � avaliado erroneamente, alguns buscadores simplesmente ignoram os erros e voc� perde peso nessas determinadas �reas da sua p�gina.

Filtragem

Neste processo o sistema faz a escolha dos termos que ir�o "representar" o seu documento, descrevendo o conte�do e diferenciando a sua p�gina das demais j� arquivadas no banco de dados.

� nessa hora que as stop words s�o ignoradas da representa��o do texto, pois elas s�o palavras muito comuns presentes em milhares de textos, se elas fossem levadas em considera��o a relev�ncia seria afetada, porque elas n�o trazem a maior densidade de informa��o. Essa remo��o se d� de forma padronizada, no come�o da indexa��o o sistema cria uma biblioteca de termos muito usados e s� os ignora nas representa��es posteriores como na Filtragem.

Deixando os talos

Aqui os termos ir�o ser reduzidos aos "talos". O sistema detona as varia��es. Exemplo: as palavras "pensamos", "pensais" e "pensam" v�o virar somente "pensa". Nem todos os sistemas usam o mesmo tipo de algoritmo para redu��o de termos.

Os mecanismos de busca fazem isso para economizar espa�o, � uma maneira de reduzir o processamento e indexar mais p�ginas rapidamente. Existem v�rias complica��es para esse processo que eu particularmente desconhe�o.

E se voc� est� se perguntando: e o que acontece com as varia��es? Lembre que � s� uma representa��o do seu texto.

Pesos e Rankeamento

Esse � o �ltimo passo na maioria de sistemas IR da representa��o de texto da sua p�gina, � onde os termos "talos" recebem pesos que podem ser atribu�dos de diferentes formas, e � exatamente aqui que muitos analistas SEO e SEM come�am a "chuta��o" com teorias mirabolantes como a de Keyword Density.

Quanto mais peso nos elementos on-page mais chances de posicionar o seu site em primeiro lugar nos buscadores, como o Google. Pois alguns fatores e elementos voc� n�o pode controlar, agora esses elementos � mais que seu dever como desenvolvedor fazer um bom trabalho.

Nos pr�ximos artigos aqui no iMasters vou abordar o que realmente sabemos sobre esses pesos e � nesse ponto que a coisa come�a a ficar interessante para escrevermos textos competitivos e com grande densidade de peso nos elementos na p�gina.

Refer�ncias:

Mi is lita

Information Retrieval