Groove. Funk. Brasil. Soul. Latino. Black-ties. Sábadosaundz: todo sábado no Social.
Convidado da semana: DJ Fernando Scratch
Residente: DJ Bobzz (The Handsome DJs)
Sábado, 17 de julho – 20:00 – R$ 4,00
Social Bar: Rua Ceará, 1580, Savassi
Soul, funk, disco, latin & lounge no Social com The Handsome DJs: DJ Bobzz & DJ Guará
Sábado, 3 de julho de 2010 – 20:00 – R$ 4,00
Social – Rua Ceará, 1580, Savassi
Social apresenta “Go Black!”, com DJ Bobzz: funk + soul + rap + afrobeat + breaks!
Dia 01/06/2010 – 20:00
R$ 4,00
Rua Ceará 1580, Savassi
A campanha do Dia das Mães do Shopping Cidade contou com ações online. O tema e tudo o que a lenda das Matrioskas inspira foram levados para o ambiente digital. Um hotsite foi desenvolvido, contendo a história das Matrioskas, uma área que detalha a promoção “compre e ganhe”, além de uma seção com integração para o Twitter do Shopping.
Seguindo o conceito criado, fizemos a seguinte pergunta aos nossos seguidores na rede social: e você, o que guarda da sua mãe? As respostas são acompanhadas da hashtag #GuardeiDaMinhaMae e, todos os dias, até a sexta que antecede o Dia das Mães, uma resposta é escolhida e presenteada com o kit de três latas com tema das Matrioskas. Todas as mensagens aparecem em um grande mural no hotsite, como uma homenagem à todas as mães.
Ficha técnica:
via Publicidade Mineira.
Ok, eu sei que existe uma infinidade de tutoriais e guias sobre boas práticas, muitas excelentes, o assunto é até batido, mas… Tenho respondido nos últimos meses uma série de questionamentos “bobos” sobre boas práticas de codificação XHTML/CSS, o que me motivou a escrever um guia de Padrões Web compilado, reunindo o que é essencial no assunto e algumas dicas do dia-a-dia, acumuladas em 10 anos de experiência. Espero que seja útil, tanto para os iniciantes quanto para os experts, como uma fonte de referência em português. Não pretendo ser exaustivo nos temas, mas tentarei não ser superficial também. Comentários e sugestões são muito bem-vindos!
A semântica da Web
Existem dois conceitos correntes sobre web semântica: o mais conhecido é o proposto por Tim Berners-Lee, que define a Web Semântica como um ambiente onde “a informação é dada com um significado bem definido, permitindo melhor interação entre os computadores e as pessoas” (BERNERS-LEE et al, 2001). O outro pode ser definido como “semântica da web”, e trata da forma como escrevemos nossos códigos, utilizando a tag correta no contexto correto para a qual ela foi criada.
No fim das contas, um dos objetivos finais de uma semântica da Web é facilitar a organização da informação para a sua manipulação por máquinas, mas não fica só nisso (como veremos adiante). E, com exceção dos bots das máquinas de busca e alguns poucos agentes, escrever seu código corretamente não irá fazer com que seus sites e sistemas sejam reconhecidos por estes. Um conceito não exclui o outro, e são até complementares (ambos tratam de padrões e buscam a interoperabilidade) mas são completamente diferentes entre si nos objetivos finais e nas técnicas de desenvolvimento. Assim, quando trato de Padrões Web, estou dizendo sobre o desenvolvimento de front-end de aplicativos Web, para evitar confusões. Para saber mais sobre Web Semântica, acesse o site oficial do assunto do W3C, ou confira outros artigos publicados neste blog.
Por que codificar seguindo boas práticas?
Ao desenvolver dentro dos Padrões Web, a organização e a função dos elementos XHTML é um dos fatores essenciais na codificação. Cada elemento da página exerce uma função (como título, parágrafo, formulário, divisor, lista etc.), definindo assim um “significado” para cada parte do layout.
É muito importante que os elementos estejam marcados corretamente, e é útil por uma série de motivos como:
Entre diversos outros. Na medida em que formos avançando no guia, você verá que é muito mais lógico desenvolver de acordo com os padrões do que utilizar milhares de gambiarras com tabelas.
O que são os Padrões Web (Web Standards)?
Padrões Web (ou Web Standards, em inglês) são um conjunto de normas, diretrizes, recomendações, notas, artigos, tutoriais e afins de caráter técnico, produzidos pelo W3C, destinados a orientar fabricantes, desenvolvedores e projetistas para o uso de práticas que possibilitem a criação de uma Web acessível a todos. Prevê o desenvolvimento em camadas (informação, formatação e comportamento), e possui inúmeras vantagens: uniformidade, simplicidade, liberdade, separação de estrutura e apresentação, facilidade de criação e manutenção, acessibilidade, extensibilidade, estabilidade etc. A lista é crescente, e só é percebida pelo desenvolvedor na medida em que ele os utiliza no seu dia-a-dia.
Eis como fica um trecho de código HTML desenvolvido com tabelas:
<table cellspacing="0" cellpadding="0" width="500">
<tr>
<td width="200"><a href="produto.php?id=1">TV LCD 22</a></td>
<td><font color="FF0000">R$ 599,99</font></td>
</tr>
<tr>
<td width="200"><a href="produto.php?id=2">TV LCD 40</a></td>
<td bgcolor="#333333"><font color="FF0000">R$ 999,99</font></td>
</tr>
<tr>
<td width="200"><a href="produto.php?id=3">TV LCD 45</a></td>
<td><font color="FF0000">R$ 1199,99</font></td>
</tr>
<tr>
<td width="200"><a href="produto.php?id=4">TV Plasma 45</a></td>
<td><font color=“FF0000”>R$ 1299,99</font></td>
</tr>
</table>
E o mesmo trecho equivalente nos Padrões Web:
<ul>
<li>
<a href="produto.php?id=1">TV LCD 22</a> - R$ 599,99
</li>
<li>
<a href="produto.php?id=2">TV LCD 40</a> - R$ 999,99
</li>
<li>
<a href="produto.php?id=3">TV LCD 45</a> - R$ 1199,99
</li>
<li>
<a href="produto.php?id=4">TV Plasma 45</a> - R$ 1299,99
</li>
</ul>
Imagine agora o HTML acima programado em PHP para acessar uma tabela em um banco de dados qualquer:
<table cellspacing="0" cellpadding="0" width="500">
<? foreach ($produtos as $produto) { ?>
<tr>
<td width="200">
<a href="produto.php?id=<?=$produto[0];?>">
<?=$produto[1];?>
</a>
</td>
<td bgcolor="#333333">
<span class="preco"> - R$ <?=$produto[2];?></span>
</td>
</tr>
<? } ?>
</table>
Veja o mesmo código nos Padrões Web:
<ul>
<? foreach ($produtos as $produto) { ?>
<li>
<a href="produto.php?id=<?=$produto[0];?>">
<?=$produto[1];?>
</a>
- R$ <?=$produto[2];?>
</li>
<? } ?>
</ul>
Compare os códigos na programação final. O segundo é infinitamente mais legível, ocupa menos espaço em bytes e requer muito menos processamento do computador (e olha que o código em HTML nem está tão “sujo” assim…). Precisa falar mais?
A semântica dos elementos
Como foi dito anteriormente, a função de cada elemento no XHTML é um dos fatores essenciais na codificação. Cada um deles tem um propósito específico e, além de não fazer sentido, é completamente errado seu uso para outros propósitos. O caso clássico é o das tabelas: durante muito tempo (até hoje na verdade, não me canso de ver sites e aplicativos usando e abusando de tabelas) elas foram utilizadas como suportes para o layout.
Existe um grande motivo para que tal bizarrice: a clássica incompatibilidade e limitação dos navegadores na renderização de layouts complexos. Mas isso foi há mais de década atrás, quando o Nestcape dominava o mercado e a Microsoft nem dava muita bola para o novo meio. O HTML era somente uma linguagem simples de publicação de documentos, e poucos pensaram que a Web se transformaria no meio de comunicação multimídia que hoje conhecemos.
A estrutura de elaboração do HTML consiste em instruções no conteúdo do documento, através de marcas de início e fim (tags) definindo trechos do conteúdo, mediante as quais se determina a formatação do texto, imagens e demais elementos que o compõem. O HTML se esgotou justamente por conta da confusão que faz na elaboração de seus documentos, não distinguindo os dados de marcação da própria informação contida no documento.
Nesses tempos heróicos, o uso de tabelas não só era massivo, como também incentivado, como podemos conferir na “pérola” a seguir:
As tabelas são parte integrante do HTML. Ao definir uma grade de linhas e colunas, pode-se alinhar sistematicamente os itens. O exemplo mais simples de uma tabela é colocar o material em duas ou mais colunas. (GOLDING; WHITE, p.125).
Em 1997 fazia muito sentido codificar com tabelas, até porque não havia outro jeito mesmo. Que atire a primeira pedra quem tem mais de 10 anos de desenvolvimento Web e não usou NENHUMA tabela para montar layouts. Mas, fazê-lo em 2010 mostra uma extrema ignorância, para não dizer coisa pior.
No próximo artigo, irei explicar detalhadamente cada elemento do XHTML e sua aplicação. Até breve!
Referências bibliográficas:
FERRAZ, Ronaldo. Construindo sites com Padrões Web. Disponível em: http://kb.reflectivesurface.com/br/artigos/sitesComPadroesWeb. Acesso em 25 mar. 2010.
FERREIRA, Elcio. Produtividade Web 2.0: como ser produtivo desenvolvendo para Web. Disponível em: http://visie.com.br. Acesso em 5 jun. 2008.
GOLDING, Mordy; WHITE, Dave. Guia de cores para Web Designers. São Paulo: Quark, 1997.
WASP. The Web Standards Project. Disponível em: http://www.webstandards.org. Acesso em 25 mar. 2010.
WORLD WIDE WEB CONSORTIUM. XHTML2 Working Group Home Page. Disponível em: http://www.w3.org/MarkUp. Acesso em 10 mar. 2010.
Leia também:
A Universal McCann lançou recentemente seu último estudo global sobre o uso de mídias sociais, que revela mudanças bem interessantes na maneira como as pessoas vêm utilizando a Internet para criar e compartilhar ideias, textos, imagens, músicas e vídeos. Vale a pena conferir: http://universalmccann.bitecp.com/wave4
Em maio de 2009, a IAB publicou o documento Social Media Ad Metrics. É um documento que pretende especificar definições padronizadas de métricas gerais para os diferentes tipos de mídias sociais. Vale a pena conferir, para os que não têm intimidade com o inglês, existe uma tradução não-oficial para o português: Métricas para Publicidade em Mídias Sociais.
Ficou perdido em Beagá no Carnaval? Sem programa? Venha tomar uma cervejinha e curtir um groove na Yoyo com os DJs Black Josie e Bob Z
DJs Black Josie & Bob Z
(música preta brasileira + funk + soul + afrobeat + samba + rock + pop)
13 de fevereiro de 2010
16:00
R$ 3,00
Yoyo Mercearia Moderna Oriental
Rua Paraíba, 1497, Savassi
Durante minhas pesquisas sobre Web Semântica, Ontologias e sua aplicações, esbarrei com diversas ferramentas para tornar o WordPress “semantic ready”, ou que utilizam recursos semânticos para incrementar blogs, wikis e outros sistemas. Alguns já estão incorporados a este blog, como o Zemanta, o wp-RDFa e o SIOC. Tudo que você tem a fazer é instalar os bichinhos e relaxar, que eles fazem todo o trabalho sujo de adicionar os metadados.
Calais Auto Tagger
Com o plugin Calais Auto Tagger, você nunca terá que pensar nas tags para seus posts. O plugin usa o Open Calais API para executar a análise semântica do texto do post e sugere tags para você, que são adicionadas com um único clique no administrador do WordPress.
Para fazer o download do plugin, acesse http://www.dangrossman.info/wp-calais-auto-tagger/
SIOC
O SIOC (Semantically-Interlinked Online Communities) é uma iniciativa que visa a integração de informações de comunidades on-line, fornecendo uma ontologia para a representação de dados da Web Social em RDF. Possui várias aplicações comerciais e open-source, e é comumente usada em conjunto com um vocabulário FOAF para representar perfis pessoais e informações de redes sociais.
O SIOC Exporter for WordPress é um plugin que permite a geração de metadados SIOC de seu blog on-the-fly. Por exemplo, você pode visualizar os dados gerados deste blog pelo endereço http://alexandrecolucci.com.br/index.php?sioc_type=site.
Para fazer o download do plugin, acesse http://sioc-project.org/wordpress/
wp-RDFa
wp-RDFa é um plugin que adiciona metadados FOAF (Friend of a Friend), relacionando suas informações pessoais com as informações dos usuários de seu blog para construir um mapa semântico; e Dublin Core, criando marcações automáticas para o título, criador e data. Todo o conteúdo criado dentro do the_loop() será codificado automaticamente. Para fazer o download do plugin, acesse http://dev.squarecows.com/projects/wp-rdfa/
Zitgist Browser Linker
O Zitgist Browser Linker exibe automaticamente recursos (links, imagens etc) existentes na Web relacionados a uma determinada URL, para que se possa executar ações com base nesses recursos.
Por exemplo, se eu criar um link para o site do Tim Berners-Lee, poderia ser interessante ter mais informações sobre ele, a partir do link a que se refere.
Para fazer o download do plugin, acesse http://wordpress.org/extend/plugins/zitgist-browser-linker/
Zemanta
O Zemanta funciona de forma semelhante ao Calais, mas é muito mais “bombado” em recursos: ele executa a análise semântica do texto do post e sugere tags, links, fotos, artigos relacionados e muito mais, em tempo real, enquanto você digita o post. Um canivete suíço para a edição de blogs. Infelizmente, ele analisa somente textos em inglês. Ainda assim, indispensável.
Para fazer o download do plugin, acesse http://www.zemanta.com/download/
Para saber mais:
Wireframing é uma das tarefas mais valiosas para qualquer projeto interativo. Com ele, é possível economizar horas de trabalho prevendo detalhes da arquitetura, funcionalidade e conteúdo de um site/sistema, antes de realmente iniciar o projeto visual. Mas, se feito de forma ineficiente, pode custar mais tempo e até mesmo criar dores de cabeça para o cliente e o designer.
O blog Smashing Magazine publicou 35 recursos muito úteis para a criação de wireframes, incluindo tutoriais sobre diferentes métodos e uma variedade de ferramentas disponíveis.
Via 35 Excellent Wireframing Resources.
Para saber mais:
Alexandre Colucci is powered by WordPress & FREEmium Theme.
