Tableless por Table Less

São inúmeros os casos que vejo parceiros mostrarem seus projetos altamente orgulhosos e gritarem aos sete ventos: “Meu site é tableless”. Mas bem, tableless por tableless é simples! Não é lá grande mérito pra ninguém trocar tabelas por divs… Mas tornar esta estruturação de marcação Acessível e Semântica ai é outra historia.

Uma coisa é você desenvolver em tableless utilizando-se da metodologia das infames tabelas. Outra coisa é você desenvolver em tableless com a metodologia dos Padrões Web.

Hoje a web tomou tal proporção que torna-la visível apenas para micro computadores não é mais suficiente. A acessibilidade é fundamental! Acessibilidade de uma forma geral, não falo apenas de utilização dos princípios de acessibilidade para deficientes físicos e também na questão da web móvel.

E entre este vendaval de informações do que é certo do que é errado, existe a eterna e fatigante discussão entre “Web standeiros” e “Flesheiros”. Que a meu ver é pura vaidade. Vejo o Flash uma das ferramentas mais poderosas em desenvolvimento para web, imprescindível até! Mas também vejo minhas necessidades de Acessibilidade e inúmeras limitações no mesmo. Mas ai vem à pergunta: “Quem devo parar de usar?” Absolutamente ninguém! O problema torna-se a uma época que já passou, a meu ver, a onda flash, onde os sites eram verdadeiras estantes com inúmeros livros em flash pendurados! Era o menu, era o topo, era as noticias, era até mesmo o rodapé com telefone do site em flash, uma poluição! Utilização da ferramenta de forma errada! Para mim, ou é 100% flash ou não tem flash. Vejo o flash com vida longa na web, principalmente para aplicações web! Vejamos exemplos:

http://globoesporte.globo.com

Você pode acompanhar as rodas ao vivo com os lances, gols, notícias, minuto a minuto em uma aplicação em Flash! É fantástica, uma experiência multimídia muito divertida e informativa para o usuário.

http://www.pandora.com

Uma rádio online. Cadastre-se, busque por sua banda preferida e obtenha resultados da banda e também similares. Coloque “Nirvana”, irá tocar uma musica do nirvana mais 4 ou 5 de outras bandas (seguindo o estilo) e novamente outra do Nirvana e assim por diante.

Enfim, pegar sua linda pagina e tacar divs por todos os lados é simples. Mas daí então ela estar acessível e semântica é outra historia.

Não sejamos burocratas nem absolutistas, tenhamos ponderação! Não devemos condenar tecnologia X ou Y por motivos de afeto com Z ou A, ambas são de interesse para nós que desenvolvemos para uma plataforma onde a criatividade torna-se a maior ferramenta de todas e tudo que poder auxiliá-la é de grande ajuda.

Utilizar-se dos padrões web não é frescura, é o correto! Utilizar da metodologia Tableless não é onda, é o mínimo! Portanto, saiba que o inicio vai ser sempre difícil e nós estaremos sempre em processo de evolução, pois trabalhamos no desenvolvimento de uma “coisa” que a cada dia aumenta, aumenta, aumenta e aumenta cada vez mais.

Indicações de links.

MX Studio Forum – Tutorial Layout Tableless Simples

Podcast Tableless

Podcast – Flash/Ajax

Usabilidade para websites um fator cultura!

Algum tempo atrás, estava lendo no sitio de Frederick van Amstel uma matéria publicada intitulada por “Diferenças culturais no uso da Wikipedia”. Muito interessante e explica bem o que desejo passar hoje! Que a cultura é tudo!

Antes de desenvolver qualquer interface gráfica, seja para onde for, é necessário saber para qual faixa de utilizador você esta desenvolvendo. Ai já podemos encaixar inúmeros outros fatores como idade, formação escolar, localização geográfica (isso mesmo), costumes populares… Enfim! Para cada situação (publico) vai existir um projeto diferenciado, um Wireframe diferente terá que ser elaborado, as cores na utilização terão que ser estudadas.

A linguagem a ser utilizada de acordo com a idade, expressões culturais de cada região, costumes e nível de formação. Tudo isso vai influenciar na elaboração do projeto, uma interface criada para crianças não pode ser a mesma criada para adolescentes nem para idosos. E dentro de cada situação, entra as particularidades de cada publico. Como exemplo portar alguma deficiência visual, imagine uma pessoa com dificuldades visuais interagindo com uma interface com fontes minúsculas. Ou quem sabe uma pagina com texto a ser lido da esquerda pra direita lida por um povo que tem por cultura a leitura da direita para esquerda. Enfim, as particularidades.

Sempre me deparo por ai com alunos ou amigos pedindo para opiniões sobre as interfaces desenvolvidas, e quase sempre o mesmo erro: Não existia um estudo do utilizador. Um estudo, uma observação um pouco mais a fundo antes do inicio do projeto já vai lhe reduzir e muito futuras alterações. Hora bolas, se estamos criando algo para alguém usar nada mais justo saber quem vai usar, quais seus gostos e costumes, quais as questões que podem facilitar a utilização desta interface para este determino e especifico usuário, afinal este alguém é o seu publico alvo!

Um ótimo exemplo sobre a cultura, é postada por Frederick quando ele mostra paginas como da Wikipedia e Google. Que alteram o posicionamento dos elementos muitas vezes por completo, dependendo do pais que se trata a determinada interface. Por qual motivo? Cultura! E Não apenas questões de design, posicionamento, tamanho, cores são necessárias de atenção neste momento. Até mesmo as expressões e forma de comunicação textual, pois não posso utilizar a mesma linguagem que uso em meu site de baladas destinado a jovens de 16 a 23 anos ao site entrante institucional de uma clinica destinada a médicos cardiologistas.

Antes de iniciar a criação de qualquer interface, lembre de quem vai usar! O melhor e maior teste que você pode realizar se sua interface esta útil ou não é diretamente com seu utilizador! Recebendo feedback dos mesmos você vai moldando a mesma até os usuários não encontre mais dificuldades para atingirem os principais objetivos naquela utilização. Existe uma serie de dicas a serem seguidas, mas nenhuma é uma regra! Todas são dicas, como já falado: Cada caso é um caso. Então escute seu usuário, veja as dificuldades dele para melhorar para ele à interface que foi criada para ele!

Indicações de links.

Cor não é questão de gosto

Diferenças Culturais no uso da Wikipedia

Semântica: Do XHTML aos Padrões RDF.

Algum tempo atrás anunciávamos a matéria: ?Web Semântica a internet do Futuro?. Nela podemos ter uma idéia do que se trata a tal Semântica na Web.

Hoje, pretendo ser mais claro quanto a pratica da Semântica. Quanto a características no desenvolvimento que irão interferir em um resultado semântico ou não. Visto, que a semântica é a galinha dos ovos de ouro!

Devemos primeiramente perceber a Semântica que temos hoje disponível e a semântica que desejamos um dia alcançar. Então o titulo, da matéria: Do XHTML aos Padrões RDF.

Hoje, podemos citar o Google como a maior ferramenta que irá utilizar os fatores semânticos que aplicamos em nossas paginas, sempre esperando uma melhor indexação de nosso conteúdo esperando melhores colocações em buscas. E isso ocasionou uma certa limitação da idéia da Web Semântica.

Web Semântica não se resume em aplicar determinados atributos em nossos desenvolvimento com o objetivo de receber uma melhor colocação em posições de busca. A Semântica propõe muito mais do que isso, possibilita que agentes ?inteligentes? facilitem nosso dia a dia realizando inúmeras situações que serão possíveis graças a organização da informação. Dei até um exemplo na matéria anterior sobre uma suposta consulta.

Semântica no XHTML

Devemos perceber que cada tag tem uma função semântica. Cada tag tem uma função especifica, que muitas vezes desenvolvedores por algum motivo acabam desrespeitando e aplicando-a de forma errada. Seja por imprudência ou desconhecimento.

Eu posso criar meu layout inteiro me utilizando apenas da tag P, visto que com CSS eu posso atribuir especificações pra ela. Mas será correto utilizar o ?p? para ex: diagramar meu conteúdo? Visto que existe uma tag Div que tem como função dividir conteúdo em seções e então posso posiciona-la aplicando a digramação do meu layout. Bem, tudo inicia em um bom estudo de HTML aprendendo as tag e suas determinadas e especificas funcionais. Isso vai melhorar seu código e assim iremos deixar de fazer uma verdadeira poluição na marcação utilizando verdadeiras gambiarras para solucionar nossos problemas, aplicando tags de forma errada.

Alguns fatores Importantes quanto a semântica no XHTML

Vamos ressaltar 4 questões que vão facilitar o trabalho do nosso querido GoogleBot em sua indexação.

1 ? Titulo da Pagina ? Tag TITLE

Muitas vezes me deparo com colocações de títulos da forma mais irresponsável possível! O Titulo da pagina tem sua função semântica sim, o Google pode se utilizar dele como uma breve descrição da pagina em questão! Então, ao invez de colocarmos inúmeras baboseiras como:

..[[ MX ~~ Studio ]]..

Podemos colocar uma pequena descrição se utilizando de palavras chaves para o conteúdo em questão:

MX Studio – Macromedia e Adobe – Referência Nacional Macromedia Studio MX

Toda expressão assim como as palavras separadamente são fatores que irão favorecer em uma indexação de conteúdo.

2 ? Nome do Arquivo

O nome do arquivo é outro fator importante. Pois por ele, poderá ser indexado algo relevante ao conteúdo! Utilizando-se de urls amigáveis.

Invez de:

www.meusite.com.br/noticias.cfm?id=41

Termos:

www.meusite.com.br/titulo-da-noticia

Assim teremos uma url permanente e mais amigável, possibilitando uma indexação.

3 ? Cabeçalhos

Os cabeçalhos, muitas vezes substituídos por classes atribuídas a parágrafos são de grande importância! No cabeçalho temos o tópico do conteúdo em questão, nada mais justo, uma possível filtragem de conteúdo através de tópicos. Lembrando que existe uma hierarquia na utilização quanto a importância! Onde temos a presença de apenas 1 h1 por pagina definindo o titulo principal da mesma.

H1 ? Empresa

H2 ? Clientes

H2 ? Produtos

H2 – Filiais

H3 ? Ceara

H4 ? Fortaleza

H5 ? Aldeota

H3 ? Rio de Janeiro

H4 – Capital

4 ? Meta Tags

Creio que dos até então, o mais claros em nossas cabeças. Utilização das metas tags! Vamos resgatar qual a função do cabeçalho para isso. Lembre-se lá da sua escola, primário… Quando a professora pedia para escrever o cabeçalho o que você fazia? Colocava as informações, especificando quem é você, descrição sobre a aula, conteúdo…

O cabeçalho da pagina tem por esta função: uma descrição, uma identificação do conteúdo que vem em seguida na tag body! Portanto, vamos utilizar as Meta tags para atribuir estas informações de forma correta, verdadeira e clara.

Padrões RDF

Resouce Description Framework ou simplesmente RDF é uma estrutura declarativa baseada em uma marcação namespace provida pelo XML para estabelecer relações entre itens da Web. Itens são os ?recursos? que podem ser qualquer objeto virtual: texto, figura, vídeo, outros… Desde que possuam um endereço na web.

O RDF foi projetado para representar informações de recursos da web de maneira clara e legível, sobretudo, processável por maquinas.

Alguns exemplos de utilização de descrições RDF:

• Descrever propriedades para itens de compra.
• Descrever cronogramas de eventos
• Descrever bibliotecas eletrônicas
• Descrever informações sobre paginas da web.
• Enfim…

Exemplo da marcação escrita

<?xml version=”1.0″?>
<rdf:RDF xmlns:rdf=”http://www.w3.org/1999/02/22-rdf-syntax-ns#”>
<rdf:Description
rdf:about=”http://www.mxstudio.com.br”>
<dc:creator>Adoube User Groupe</dc:creator>
<dc:title>Referencia Macromedia no Brasil</dc:title>
<dc:date>25 de maio. 2006</dc:date>
</rdf:description>
</rdf:RDF>

A primeira linha é a declaração XML, que diz a versão do XML que esta sendo utilizada, no caso a 1.0.

O elemento rdf:RDF indica que o conteúdo é RDF

O elemento xmlns:rdf indica o namespace do próprio RDF, ou seja, todos os objetvos que começam com o prefixo rdf estão localizado no mesmo local (arquivo) que contem as espeficicações do vocabulário

A primeira url que apontamos, é do arquivo que contem a sintaxe oficial de RDF.

www.mxstudio.com.br ? é o recurso! O recurso pode ser qualquer objeto, desde que possua uma url, no caso a url do nosso portal.

Elemento <creator> é uma propriedade para caracterizar nosso recurso.

Onde segue o titulo e data do documento.

Os padrões RDF é algo que será implementado mais futuramente. Mas desde já, temos que nos preparar na organização da informação. Creio que esta breve explanação já da para perceber a situação.

Indicações

Documentação RDF W3 -> www.w3.org/TR/rdf-primer/ – Mais RDF

Glossário HTML -> HTML – MX Studio

“Url amigável” -> http://www.alistapart.com/articles/succeed/

Meta Tags -> http://www.w3schools.com/tags/tag_meta.asp

Web Semântica: “A Internet do Futuro”.

>

Caros amigos do Portal MXStudio, venho novamente com mais uma coluna realizando uma abordagem a outro agente de importância inquestionável no desenvolvimento para plataforma web, a Web Semântica. Todos nós sabemos, que o desenvolvimento de websites vai alem, muito alem do fator: “manipulação de softwares para desenvolvimento”. Existem outros inúmeros fatores que estruturam esta plataforma chamada web tornando-a mais segura, útil e acessível.

Questões tais como Web Standards, Acessibilidade, Usabilidade, Teoria do Design, Web Semântica… Ainda não tão em pratica na maioria dos desenvolvedores vem tomando forma e crescendo sua utilização nas paginas atuais

Web Semântica! Que tal uma internet “inteligente”?

Atualmente a estrutura de informação na Web atual dos recursos primários esta em linguagem natural, de modo que somente nós os seres humanos conseguimos compreende-la, onde podemos chamar de: “Web Sintática”. Um exemplo pratico do efeito colateral desta web, é quando deparamos com uma busca em algum dispotivos, como o Google.

Vamos ao Google e buscar por “Jogadores de Futebol”. O resultado desta busca alem de informações sobre jogadores de futebol, também traz informações a jogadores de outros esportes e futebol de modo geral, não somente dentro do contexto que você procura!

A Web Semântica propõe então a informação de modo que nós conseguimos entende-la e formatada de modo a permitir o processamento automático das fontes de informação por partes dos computadores!

Resultando em uma “Web Inteligente”, exatidão nas tarefas solicitadas.

Como funciona a Web Semântica? Vejamos alguns dos fatores:

Metadados

Metadados são dados sobre informações, servem para indexar paginas e sites na web semântica. Seria organizar por categorias, em supertipos e subtipos, uma das formas sugeridas.

Ontologias

Ontologias são especificações formais e explicitas de conceitualizações compartilhadas. São modelos conceituais que capturam e explicitam o vocabulário utilizado nas aplicações semânticas.

Linguagens da Web Semântica

É necessário disponibilizar linguagens de codificação que permitam a publicação de Ontologias em um formato que capacite os computadores a processar sua informação automaticamente.

Web Semântica em Pratica!

Seria uma internet altamente polivalente! Onde teríamos a simplicidade de poucos cliques para termos a nossa disposição exatamente a informação que desejamos!

Os agentes iriam fazer o trabalho de seleção e filtração da informação de acordo com o contexto que desejamos! Isso graças à informação devidamente classificada e organizada por quem a disponibiliza na rede.

Imagine que você precisa de uma consulta odontológica. Vai em agentes de busca, onde você gostaria de encontrar profissionais qualificados, próximos de sua região onde os horários disponíveis para o agendamento da consulta se bata com seus horários.

Possível na Web atual filtrar este tipo de informação? Creio que não… Na semântica os agentes iriam pesquisar por profissionais na área, filtraria somente os que ficam na região a sua residência, qualificaria os bons profissionais de acordo com o agente disponível na pagina do sindicato da categoria, iria realizar uma comparação dos horarios livre daqueles profissionais com os seus e enfim lhe entregar uma lista! Isso claro, contanto que todos os envolvidos trabalhem de forma semântica!

Web Semântica seria IA? (Inteligência Artificial)

Jamais devemos confundir! Pois o conceito de documentos compreensíveis por maquinas não implica uma inteligência artificial!

Espero que esta leitura inicial sobre “Web Semântica” disperte o interesse dentro de você!

Link Interessante: Google Suggest

Autor: Anthony Conde – Colunista do Portal MXSTUDIO.

Qualquer dúvida, envie um email para tonycondeserra@gmail.com ou
acesse nosso Forum.