O Search Labs 2010 é o primeiro de uma série de eventos anuais, que promete ser um dos principais eventos sobre search do Brasil. Nesse ano, tivemos presenças de palestrantes nacionais, como Fabio Ricotta, da MestreSEO e Frederick Van Amstel do Instituto Faber Ludens e palestrantes internacionais, como Pedro Dias e Ariel Lambrecht, membros da equipe de qualidade de search do Google. Em nosso artigo, iremos comentar brevemente sobre as palestras que estivemos presentes.

As palestras do evento foram divididas em três salas:

• Lab Strategies, que teve seu foco em estratégias e táticas inéditas em SEO e Links Patrocinados;
• Lab Business, discutindo o futuro e o presente do mercado de busca;
• Lab Tech com workshops e painéis avançados sobre search.

Primeiro dia do evento

No primeiro dia do evento, na parte da manhã, estivemos presentes na palestra do Alex Sander Pellati, que nos trouxe orientações sobre como podemos nos beneficiar dos resultados de empresas locais na SERP do Google e também na palestra do Paulo Rodrigo Teixeira cujo tema era “Eu não me preocuparia com isso”, frase frequentemente utilizada pelo Matt Cutts do Google.  Paulo abordou diversas curiosidades que são apresentadas nos resultados de busca do Google e trouxe para reflexão muitos temas polêmicos, inclusive sobre a banalização do SEO.

Em seguida, após o coffee break, estivemos na palestra intitulada “Métricas Avançadas Para SEO”, conduzida por Leonardo Naressi e Ruy Carneiro, nos mostrando o quanto é importante colocarmos inteligência nas análise de dados de SEO. Outra palestra assistida foi da Gillian Muessig, do SEOmoz. Conhecida como a “SEO Mom”, Gillian trouxe uma palestra com o tema “SEO Para o CEO: Construindo Um Negócio de Search Marketing” e abordou com maestria diversos aspectos do mercado de search, sempre utilizando como argumento as experiências vividas no SEOmoz e a evolução de seus serviços e desenvolvimento de seus produtos.

Gillian Muessig – SEOMoz

Terminando a parte da manhã, fechamos com Dennis Goedegebuure, diretor de SEO do eBay, nos contando como funciona o trabalho de SEO dentro do maior mercado virtual do mundo. Em paralelo outra parte da equipe presenciou a palestra de Eduardo Carvalho e Gerson Ribeiro da Direct Performance, que apresentaram diretrizes importantes na construção de landing pages e tipos de testes para definição da landing page com maior conversão.

Na parte da tarde, após o almoço, tivemos o prazer de ver a palestra do Fabio Ricotta, falando sobre o impacto dos resultados personalizados. Antes do coffee break, assisitmos a palestra “Links Patrocinados”, com o revezamento entre o Danilo Fernandes, Ariovaldo Junior, Renyer Roberto e Ricardo Feldman.

No final do dia, vimos algumas falhas de SEO do próprio Google em seus produtos, palestra dada pelo Ariel Lambrecht. Fechando o primeiro dia de palestras, Tiago Luz da DM9DDB nos deu algumas dicas de Links Patrocinados.

Segundo dia do evento

Às 9:10 da manhã, Todd Malicoat, especialista em Search e Social Media, deu uma palestra nos dizendo como ganhar links na Social Media, com direito a slides confidenciais.

A palestra em seguida, entitulada de “Site Clinic”, contou com a presença de Tiago Luz, Frederick Van Amstel, Fábio Ricotta e Luciano de Almeida, que analisaram ao vivo aspectos de SEO, usabilidade e acessibilidade dos sites recomendados pela platéia. Antes do almoço, tivemos uma das melhores apresentações do Search Labs 2010: Link Building Avançadissimo, com o Cassiano Travareli.

Na volta do almoço, Pedro Dias, do Google, nos deu dicas básicas de SEO, porém muito importantes para o começo de um trabalho de SEO em um site. Em seguida, Vanessa Fox nos mostrou quão importante é a infraestrutura de um site em relação à SEO.

Por fim, houve a gravação ao vivo do SearchCast com a Gangue do SEO, composta por Tiago Luz, Fabio Ricotta, Cassiano Travareli, Flavio Raimundo e Alex Sander Pelati, e em seguida, uma rodada de perguntas com os palestrantes internacionais do evento.

Vanessa Fox (Nine By Blue), Gillian Muessig (SEOmoz), Morgan Friedman (Diseño Porteño), Dennis Goedegebuure (eBay), Melanie Mitchell (Digitas), Todd Malicoat (Stuntdubl), Pedro Dias (Google) e Ariel Lambrecht (Google)

Balanço geral do evento

Grandes nomes nacionais e internacionais, temas curiosos, muita discussão, enfim, não foi fácil escolher entre tantas palestras boas acontecendo simultaneamente. O que podemos afirmar com certeza é que eventos como este valem realmente a pena, afinal, foram dois dias de intensa imersão em search que agregaram muito aprendizado e um novo “gás” para buscarmos resultados ainda mais relevantes para nossos projetos de marketing de busca.  Fora isso, foi muito bom rever “a galera do SEO” que sempre encontramos nos eventos e conhecer outros grandes nomes da área.  Parabéns a organização do evento e que venha o Search Labs 2011!

Ariel Lambrecht (Google), Pedro Dias (Google), Juliane (XY2), Rodolfo Pereira (Princi Agência Web), Eric Princi (Princi Agência Web) e Dennis Goedegebuure (eBay)

Visite o site oficial do Search Labs 2010 e veja todas as apresentações.

Veja todas as fotos que tiramos do Search Labs 2010 no nosso Flickr . Para ficar por dentro dos melhores eventos, siga-nos no Twitter .

Até o próximo evento!

• Não há artigos relacionados.

UaiSEO

Gustavo Guanabara

Gustavo Guanabara, explicando quanto tempo cada meio de comunicação levou para atingir 50 milhões de pessoas.

Gustavo Guanabara, do Guanabara.info, abriu o evento com a sua apresentação que focava na otimização de conteúdo para usuários e leitores. Segundo o Guanabara, é primordial que nós foquemos no nosso conteúdo ao criar um site, pois é através dele é que fidelizamos um usuário.

Essa técnica de otimização de conteúdo para usuários e leitores, foi batizada por ele como Content for Readers Enhanced Optimization .

Veja abaixo a palestra do Gustavo Guanabara:

Frank Marcel

Comparativo mensal de visitas, uma boa forma para se mostrar os resultados para o seu cliente.

Em seguida, o Frank Marcel, da MestreSEO, iniciou a sua apresentação entitulada de “Como mostrar os resultados“ explicando como mostrar os resultados do serviço de SEO para o cliente, utilizando o Google Analytics.

Segundo Frank Marcel, os resultados podem ser mostrados se baseando nos seguintes itens:

• Visão geral;
• Análise de palavras-chave;
• ROI;
• Page Metrics;
• Link Building.

Curiosamente, essa foi a primeira palestra do Frank, e ele se saiu muito bem. Parabéns Frank!

Veja abaixo a palestra do Frank Marcel:

Cassiano Travareli – SEO para Long Tails

Cassiano Travareli, o criador do BrasilSEO, falou da importância das long tails keywords (palavras-chave da ponta da cauda ou cauda longa), que são as palavras-chave mais específicas para seu negócio. Seu argumento foi embasado no fato das long tails resultarem em uma maior conversão, com um menor investimento e também pela tendência de aumento das buscas mais específicas pelos internautas, como mostra a imagem a seguir.

A importância das Long Tails em SEO

Ele nos orientou sobre alguns passos para uma boa estruturação de um website no que diz respeito a SEO para Long Tails:

• Determinar os segmentos por palavras-chave distintas
• Determinar o objetivo de cada página
• Definir a hierarquia do site
• Organizar a apresentação de cada página

Em seguida, fez um link com dicas quentes para uma página “perfeitamente otimizada” na sua visão.
A palestra nos mostrou que há potencial em otimizar para termos mais longos e específicos, ao invés de ficar tentando, muitas vezes sem sucesso, um bom posicionamento para palavras-chave genéricas.

Veja abaixo a palestra do Cassiano Travareli:

Flávio Raimundo – Conversão de interfaces

Flávio Raimundo deu uma palestra sobre conversão de interfaces, abordando como tema principal a conversão para a interface do Google, que consiste na utilização de técnicas que induza o usuário a clicar no seu site. Em resumo, essas técnicas são a criação de snippets utilizando as palavras-chave e verbos de ação, como por exemplo “clique e confira” e a criação de um título da página relevante, sempre respeitando para ambos os casos (Snippet e Title) o limite de caracteres de cada um deles

Veja abaixo a palestra do Flávio Raimundo:

Fábio Ricotta

Fabio Ricotta, co-fundador da MestreSEO, deu um show de palestra como sempre.

A palestra foi um verdadeiro panorama do Google Brasil, baseado em uma recente pesquisa desenvolvida pela MestreSEO através de métricas da API da SEOmoz. Falou sobre as vantagens de se utilizar longtails ao invés de headtails, da influência do MozRank e do TrustRank, citou o fato de que o Wikipédia é sempre bem posicionado em headtails mas em longtails não possui um bom posicionamento e que 8% dos headtails no Brasil possuem a palavra-chave no domínio, fato que se torna uma grande oportunidade para os sites brasileiros.

Veja abaixo a palestra do Fábio Ricotta:

Tiago Luz

Tiago Luz foi o sexto palestrante e deu um show em sua palestra falando sobre sua experiência de vida.

Deu exemplos de um bom case, no caso, o Estadão. Mostrou suas falhas antes e seu sucesso depois.

Explicou também que para um Search dar um resultado excelente é preciso ter um trabalho offline muito bom. Offline e Online andam juntos para realizar um case de sucesso.

Tiago citou as 10 regras que ele aplica na vida dele para ser feliz:

1. Faça as pessoas verem brilho no que você faz
2. Aceite as mudanças e seja pioneiro
3. Seja divertido e um pouco louco também
4. Aceite uma aventura, não se prenda a regras
5. Sempre queira crescer e aprender
6. Crie uma relação honesta e divertida com quem te procura ou quer sua opnião
7. Uma equipe só da certo, quando ela rema junto
8. Mais dinheiro para menos pessoas
9. Ame o que vocês faz e seja determinado
10. Não importa o quanto você seja grande, seja humilde

Veja abaixo a palestra do Tiago Luz:

O que achamos

O evento no geral foi muito bom, com palestrantes de alto nível e carismáticos. A nossa viagem até Juiz de Fora – MG compensou bastante e com certeza estaremos nos próximos eventos do UaiSEO!

Para estar por dentro dos mais importantes eventos sobre web, não deixe de nos seguir no Twitter e assinar o nosso RSS !

Até o próximo evento!

• Reciclando e ampliando os conhecimentos de SEO
• Invista em SEO e seja encontrado na Internet
• 1° Encontro Fora do Eixo
• 1ª Conferência Web W3C Brasil
• Otimização de Sites (SEO) e Palavras-chave

Importante: Para continuar lendo o artigo, você deverá saber o significado de SEO. Caso você ainda não saiba, leia nosso artigo sobre SEO – Otimização de Sites para Mecanismos de Buscas.

Dê mais visibilidade para o site de sua empresa na Internet através da Otimização de Sites para Mecanismos de Busca, veja abaixo os motivos:

O Potencial da Internet

O número de internautas do Brasil é maior do que a população de vários países

Segundo uma pesquisa feita pelo UOL, atualmente são sessenta e dois milhões de pessoas, 33% da nossa população, que utilizam a internet e há um aumento médio de 22% ao ano de novos usuários na internet brasileira.

A penetração da internet cresce, enquanto a de meios tradicionais se mantém ou cai.

A internet é o meio de comunicação que mais cresce no Brasil, enquanto as mídias tradicionais tem uma elevação ou um leve declínio na sua penetração.

O Objetivo do SEO

Existem hoje 234 milhões de websites no planeta e no ano de 2009 foram criados 47 milhões de sites. Hoje não basta ter somente o site da sua empresa na internet, é preciso ser encontrado no meio de milhões e milhões de sites já existentes, e como veremos a seguir, a maneira mais utilizada para ser encontrado é através dos mecanismos de pesquisa (Google, Yahoo!, Bing). A otimização de site para mecanismos de busca te dá essa possibilidade: ser encontrado facilmente pelos seus clientes.

E é justamente isso que todo cliente quer: ser encontrado e estar na frente de seus concorrentes para as palavras-chave do seu negócio. Muitos nem imaginam como isso é possível, eles querem apenas aparecer. Em todas as nossas apresentações procuramos deixar claro de que não somos nós que cadastramos o site nos mecanismos de busca e dizemos a eles que queremos aparecer no topo dos resultados, mas sim que são os mecanismos de busca que determinam o posicionamento de acordo com fatores como aplicação dos padrões na codificação, conteúdo relevante, arquitetura interna e externa de links e muitos outros. Tudo o que fazemos é aplicar as técnicas de SEO para que os mecanismos de busca posicionem bem o seu site.

Este é então o grande objetivo da aplicação das técnicas de SEO: obter um melhor posicionamento do seu site nos resultados orgânicos dos mecanismos de busca (resultados não pagos) para as palavras-chaves pertinentes ao seu negócio, aumentando assim a quantidade de visitas provenientes desta fonte de tráfego.  Por isso SEO é importante: ele te dá a vantagem do seu site aparecer na frente dos seus concorrentes, consequentemente, o seu site irá atrair mais visitas qualificadas para a sua empresa, e todo visitante qualificado é um cliente potencial.

O tempo de um projeto de SEO da Princi Agência Web é normalmente de no mínimo seis meses, tempo necessário para que os mecanismos de busca adicionem o seu site no seu banco de dados (índice) e posicionem o mesmo na frente dos seus concorrentes. Lembre-se que SEO é uma prática que exige tempo e manutenção constante: hoje as técnicas aplicadas no seu site, talvez não funcionem amanhã, pois os critérios de posicionamento dos mecanismos de busca estão em constante evolução.

O Potencial do SEO

Segundo dados do IDG Now e IBGE, 70% dos cliques em resultados de buscas no Google vão para os resultados orgânicos e 87% dos usuários da web utilizam os Mecanismos de Busca.

Nos Mecanismos de Busca, o mais visto pelos usuários são os resultados orgânicos, que é o foco do SEO.

Olhe para figura acima e entenda que a parte vermelha central é onde o olho do internauta mais se concentra. Portanto, podemos ver que a região do mecanismo de busca mais visualizada pelos internautas é a região em que aparece os resultados orgânicos de uma pesquisa. E é nessa região que o SEO atinge, proporcionando uma maior visualização do site da sua empresa nos mecanismos de busca.

Ao contrário de outras formas de divulgação na internet, como por exemplo Links Patrocinados, a quantidade de visitas para o seu site não é proporcionalmente igual a quantidade de dinheiro que é investido, ou seja, você paga um valor mensal fixo, independente se o seu site tiver mil ou trinta mil visitas mensais. E o que o cliente mais gosta de ver nos nossos relatórios é justamente isso: o impacto no aumento da quantidade de visitas provenientes dos mecanismos de busca.

Para concluir, incentivamos o investimento em SEO, pois entendemos que um site para dar retorno, ele primeiro deve ser encontrado. O trabalho de SEO leva o internauta até o seu site, e o passo seguinte é o site convertê-lo em cliente. Mas sobre isso, falaremos em artigos futuros sobre conversão. Aguardem!

Fonte dos gráficos: Internet: A mídia que mais crece porque vende

Artigo elaborado em conjunto com Eric N. Princi.

• Reciclando e ampliando os conhecimentos de SEO
• SEO – Otimização de Sites para Mecanismos de Buscas
• Otimização de Sites (SEO) e Palavras-chave
• Classificação dos Mecanismos de Busca
• Entendendo mais sobre Mecanismos de Busca

Um fim de semana realmente intenso: conteúdo de qualidade, muitas novidades, contatos profissionais, dicas quentes e um pessoal muito empolgado para crescer na técnicas de posicionamento nos buscadores.

Fábio Ricotta transmitindo seus conhecimentos de SEO.

A Princi Agência Web pode ampliar seus conhecimentos na área e adquirir muitas novas estratégias e técnicas na otimização de sites, agora é colocar em prática. Aguardem que nosso Projeto de SEO evoluirá muito nos próximos dias e com certeza dará resultados para nossos clientes.

Parabéns ao Fábio Ricotta pelo conhecimento de qualidade compartilhado e a todo pessoal do MestreSEO (Frank, Fabiane, Bruno e Leandro) que deram show no evento. Foi um prazer encontrá-los e poder aprender com todos vocês!

Pessoal da Princi Agência Web e MestreSEO depois do curso

Agora temos muito trabalho pela frente!
Até o próximo evento!

• SEO – Otimização de Sites para Mecanismos de Buscas
• Entendendo mais sobre Mecanismos de Busca
• Invista em SEO e seja encontrado na Internet
• Classificação dos Mecanismos de Busca
• UaiSEO – O maior evento de SEO de Minas Gerais

Encontros Fora do Eixo.

O tema desta primeira edição foi: “A realidade fora do eixo – a visão das agências”. Participaram do debate: Fábio Fonçati de uma agência digital (agência Lampejos), Rafael Duarte (agência Ayres PP) de uma agência offline e Cláudio Coelho, presidente da APADi (Associação Paulista das Agências Digitais).

Foi muito interessante ouvir os lados bem opostos de duas realidades de agências fora do eixo: uma agência totalmente digital e outra focada puramente na publicidade tradicional. Apesar de opostos, ambos apresentaram suas realidades e fortaleceram seus argumentos de trabalho nas adequações e soluções fornecidas de acordo com as necessidades de cada cliente, e principalmente de acordo com público-alvo dos mesmos. Isso é um sinal de que há mercado para todos e que estamos aí para oferecer soluções de qualidade para nossos clientes, mesmo estando fora do eixo.

A palavra final ficou com Cláudio Coelho, que iniciou sua fala de forma polêmica dizendo que as agências fora do eixo as vezes são vistas como “fora da lei” pelas do eixo, mas salientou a força, representatividade e as grandes possibilidades que temos no mercado. Ele aproveitou também para divulgar o manual para concorrências digitais criado pela APADi, que visa trazer um aculturamento para o mercado, com dicas práticas para os clientes sobre como contratar a melhor agência digital para suas ações de comunicação.

O primeiro encontro Fora do Eixo foi muito bom e proveitoso – muitos contatos, trocas de experiências e aprendizado. A Princi Agência Web estará presente nos próximos.

Parabéns aos idealizadores pela iniciativa.

• Reciclando e ampliando os conhecimentos de SEO
• UaiSEO – O maior evento de SEO de Minas Gerais
• 1ª Conferência Web W3C Brasil
• Novo layout no blog!
• Princi Agência Web – Tudo novo!

Os Editores WYSIWYG (acrônimo em inglês para “What You See Is What You Get” e em português para “O que você vê é o que você obtém”) possuem uma interface bastante intuitiva e poderosa, nos dando a opção de formatarmos os nossos textos, realizarmos upload de arquivos, entre outras funções. Antigamente, os Editores WYSIWYG geravam um código não elegante e não validado; hoje em dia, a realidade é bastante diferente, pois eles conseguem gerar um código elegante e quase sempre, validados de acordo com os Padrões Web estabelecidos pelo W3C.

Aqui irei listar alguns dos Editores Web WYSIWYG, que sem dúvidas, irão facilitar o desenvolvimento do seu sistema ou site.

CKEditor

O CKEditor é a nova versão do antigo e conhecido FCKeditor. Particularmente, atualmente o considero o mais poderoso e amigável dos Editores Web WYSIWYG que existem.

Em termos de acessibilidade, o CKEditor possui suporte aos padrões WAI-AA WCAG 1.0 e Section 508 , contando com suporte total à navegação pelo teclado, leitores de tela e contraste de cores.

A sua compatibilidade com navegadores e sistemas operacionais é grande, funcionando nos navegadores Internet Explorer 6+, Firefox 2+, Safari 3+, Google Chrome e Opera 9.5+, todos em suas versões para Windows, Linux e MAC.

A sua “carta na manga” é o poderoso CKFinder , o qual lhe possibilita o upload de arquivos e imagens. Integrando-o ao CKEditor, você possuirá uma solução completa em Editor Web WYSIWYG.

O suporte do CKEditor e CKFinder é bastante completo, contando com a documentação de ambos os softwares e um Fórum para discussão . Dificilmente você ficará na mão, caso você tenha alguma dúvida em relação ao CKEditor ou CKFinder.

Mas caso você não utilize o CKEditor para uso pessoal ou educacional, você terá que comprar uma licença , que custa de US $375 a US $1450. Já o CKFinder, você é obrigado a comprar uma licença para utilizá-lo, que custa de US $59 a US $1390.

CKEditor
http://ckeditor.com/

CKFinder
http://ckfinder.com/

TinyMCE

O TinyMCE é um outro grande Editor Web WYSIWYG disponível no mercado. Grandes empresas como Oracle, Microsoft e Apple utilizam o TinyMCE em suas aplicações.

Fácil de ser integrado à sua aplicação, o TinyMCE é compátivel com Mozilla, MSIE, FireFox, Opera, Safari e Chrome.

O suporte do TinyMCE é composto de uma documentação (wiki) , um Fórum e um suporte pago . Assim, o suporte do TinyMCE se mostra bastante completo, não te deixando na mão em relação a dúvidas ou bugs do software.

Assim como CKEditor, se você utilizar o TinyMCE para uso comercial, você deverá comprar uma licença. Infelizmente, o preço da licença não está disponível no site do software, sendo necessário enviar um e-mail para obter maiores informações sobre a licença comercial.

No site do TinyMCE é disponibilizado dois plugins que se integram ao TinyCME, que são o MCImageManager e MCFileManager . Eles aumentam o poder do TinyMCE, disponibilizando o upload de arquivos e imagens integrados ao TinyMCE. Ambos os plugins necessitam de uma licença para utilizá-los.

TinyMCE
http://tinymce.moxiecode.com/

jWYSIWYG

O jWYSIWYG é um plugin em jQuery de Editor Web WYSIWYG, por isso, para utilizá-lo você precisa utilizar a biblioteca jQuery .

A vantagem do jWYSIWYG em relação ao CKEditor e TinyMCE, é a sua extrema simplicidade em integrá-lo ao seu sistema ou site, seu pequeno tamanho (26Kb no total, 18Kb de código e 7Kb comprimido) e o melhor: a licença do jWYSIWYG é baseada nas licenças GPL/MIT*.

A sua compatibilidade total limita-se aos navegadores Safari 4, Firefox 3.5, Chrome 4.0 e Internet Explorer 8. Caso for outro navegador ou outra versão dos navegadores citados anteriormente, o jWYSIWYG poderá apresentar alguns erros.

jWYSIWYG
http://code.google.com/p/jwysiwyg/

jHtmlArea

jHtmlArea é um plugin em jQuery de Editor Web WYSIWYG.

Os navegadores Internet Explorer 7/8, Firefox 3/3.5 e Safari 4 possuem suporte completo ao editor.

A licença do jHtmlArea é baseada nas licenças GPL/MIT*.

O suporte do jHtmlArea conta com um fórum de discussão e uma lista para relato de problemas .

jHtmlArea
http://jhtmlarea.codeplex.com/

markItUp!

markItUp! é um plugin em jQuery de Editor Web de MarkUp. Ele possui suporte a navegação pelo teclado, oferecendo um diferencial em usabilidade em relação aos demais plugins em jQuer. Seu poder de customização é grande e oferece cinco estilos prontos, como por exemplo um do MacOS e outro do Windows Live.

O markItUp! oferece suporte aos navegadores IE6+, Safari 3.1+, Firefox 2+ e Opera 9+. O suporte oferecido pelo plugin é somente a sua documentação e infelizmente ele  não possui nenhum fórum de discussão.

A licença do markItUp! é baseada nas licenças GPL/MIT*.

markItUp!
http://markitup.jaysalvat.com/home/

* A licença GPL/MIT possibilita o uso do software em programas livres ou proprietários sem ter que comprar uma licença e também oferece a liberdade de executar o programa para qualquer propósito.

Caso você conhece outro Editor Web WYSIWYG, compartilhe-o conosco comentando logo abaixo!

• Não há artigos relacionados.

Nesse artigo, irei listar algumas referências rápidas de diversas tecnologias para desenvolvimento web.

ASP / VBScript

Funções, métodos, propriedades, expressões regulares, etc.

ASP/VBScript Cheat Sheet 

PHP

Funções, formatações, etc.

PHP Cheat Sheet 

JavaScript

Funções, métodos, XMLHttpRequest, Event Handlers, etc.

JavaScript Cheat Sheet 

jQuery

Seletores, atributos, AJAX, eventos, etc.

jQuery Cheat Sheet 

MySQL

Funções, Data Types, Sample Queries, etc.

MySQL Cheat Sheet 

SQL Server

Data types, funções, criação de “stored procedures”, “views”, etc.

SQL Server Cheat Sheet 

CSS – Cascading Style Sheets

Propriedades, seletores, pseudo-seletores, unidades de medida, etc.

CSS Cheat Sheet 

HTML / XHTML

Tags, entities, atributos, eventos, etc.

HTML / XHTML Cheat Sheet 

HTML Entities

Código entitie, caractere e significado do caractere.

HTML Entities Cheat Sheet 

Microformatos

iCalendar, hCalendar, hReview, vCard, hCard, RelLicense, RelTag, XFN Format, etc.

Microformatos Cheat Sheet 

Fonte: Added Bytes e G. Scott Olson

Se você conhece alguma referência rápida, compartilhe conosco!

• 5 dicas para deixar o seu código CSS mais legível e otimizado
• Padrões Web – O que são e porque usá-los
• Table vs. Div – O Bom, o Mal e o Feio

HTML 5: a evolução da web

Anne van Kesteren, Opera Software

O palestrante Anne van Kesteren, da Opera Software, mostrou o motivo do XHTML 1.0 não ter dado certo e nos mostrou alguns exemplos da utilização do HTML 5, como por exemplo as tags <canvas> e <video> , o que deixou os desenvolvedores presentes bastante empolgados.

Segundo Anne, o HTML 5 será estável em 2012 e somente em 2022 é que se tornará uma recomendação oficial do W3C.

A tradução simultânea da apresentação foi bem feita e mesmo aqueles que não dominavam o inglês puderam aproveitar e entender a apresentação do Anne. Ponto positivo para a organização do evento.

A BBC e a web semântica na disponibilização de conteúdos

Patrick Sinclair
Foto por @helder

Patrick Sinclair, engenheiro de software, BBC Audio and Music Interactive, Reino Unido, mostrou como a BBC utiliza a Web Semântica na disponibilização do seu conteúdo.

A grande sacada da BBC, é a utilização da própria internet como o seu CMS. Ou seja, grande parte do conteúdo disponibilizado na BBC é feito por outros sites e por nós internautas. Com isso, o conteúdo do site da BBC sempre está atualizado, causando uma boa impressão aos visitantes.

Outro detalhe que impressionou foi a estrutura de Arquitetura da Informação dos projetos da BBC, realmente algo “monstruoso”.

A Formação Profissional, o Ensino de Padrões Web e Certificação

Diego Eis, Everaldo Bechara e Fábio Flatschart
Foto por @esuey

Nesse debate estiveram presentes Everaldo Bechara – iLearn, Fábio Flatschart – SENAC, Diego Eis – Visie / Tableless e Marcelo Moura – Gerente Geral de Negócios do Grupo Impacta Tecnologia.

Nós estivemos presentes somente nos trinta minutos finais, mas mesmo assim foi uma boa experiência. Nesse tempo final, o debate girou em torno dos benefícios e malefícios da criação de uma certificação dos padrões estabelecidos pelo W3C.

Esse tema criou uma grande discussão não só no auditório do evento, mas também no Twitter. No Twitter, a maioria dos profissionais não concordavam com a criação de uma certificação dos padrões. No auditório, houve um consenso de que a criação de uma certificação dos padrões iria beneficiar o mercado de desenvolvimento web.

E você, você acha que a criação de uma certificação dos padrões iria beneficiar ou não o mercado de desenvolvimento web?

Futuro da web e as Agências Digitais, Padrões Web, Web semântica, Web das coisas, Web 2.0

Cláudio Coelho, João Cabral e Saulo Medeiros
Foto por @jeanximenes

Saulo Medeiros – Presidente da AMADI (Associação Mineira das Agências Digitais), Cláudio Coelho – Presidente da APADI (Associação Paulista das Agências Digitais) e João Cabral – Diretor de Tecnologia da Agência Click.

Saulo Medeiros começou falando sobre as barreiras da implementação de novas tecnologias na web, como o HTML 5, por exemplo. Após isso, mostrou a pesquisa do Google: “What is a browser?” , que mostra que menos de 8% dos entrevistados não sabiam o que era um browser.

João Cabral nos mostrou o SearchMonkey do Yahoo! e como os Microformatos ajudam na exibição do site nos mecanismos de busca e falou também um pouco sobre o futuro com o HTML 5. Algo interessante mencionado por ele foi o fato de que as grandes marcas estão cada vez mais preocupadas em gerar conteúdo útil para usuários na web, pois é uma excelente forma de estimular o consumo. Um exemplo mostrado foi o caso do Boticário que disponibilizou em seu Canal do YouTube vídeos ensinando como utilizar seus produtos.

Cláudio Coelho começou dizendo o que tem acontecido no mercado digital por conta do avanço da Internet. Ele abriu seu discurso dizendo que em breve existirão agências com vagas para psicólogos, neurocirugiões, biólogos e sociólogos.  Tudo isso porque cada vez mais as agências digitais precisam entender perfeitamente os perfis dos usuários de cada projeto. Por fim, vale citar um evento realizado pela APADI dia 01/12,  onde será lançado um modelo de concorrência para projetos de sites. Estaremos lá para conferir!

Metodologia para avaliação de acessibilidade em sites

Horacio Soares e Lêda Spelta, Acesso Digital

A palestra do pessoal do Acesso Digital , foi uma das melhores apresentações que aconteceram no segundo dia do evento. A Lêda Spelta, com todo o seu carisma e conhecimento, nos mostrou como é difícil o acesso à diversos sites para pessoas que possuem algum tipo de deficiência e deu várias dicas de como avaliar e otimizar a acessibilidade dos sites que desenvolvemos.

O ponto alto da apresentação, foi quando a sala ficou com as luzes apagadas e a Lêda nos demonstrou como é a navegação através de leitores de tela. No caso, o leitor de tela utilizado foi o JAWS . Uma “pérola” foi escolhida por eles para mostrar a dificuldade que pessoas que se utilizam de leitores de tela enfrentam ao acessar um site que não se preocupa com acessibilidade.

Uma frase que define o termo “acessibilidade na web”, é:

“Acessibilidade na web é tornar todos os serviços, assuntos e publicações tão fáceis de serem utilizados por todas as pessoas, que até esqueceremos que há diferenças.”

Carla Nascimento – frase vencedora do concurso “Jornadas de Conhecimento – Acessibilidade na Web”

Toda a apresentação pode ser vista através do link: Metodologia para avaliação de acessibilidade em sites.

Bate-papo com Browser – Encontro com desenvolvedores

Patrick Browne, Opera / Fernando Gebara, Microsoft Brasil – Internet Explorer / Márcio Galli, Mozilla Firefox

O bate-papo com Browser, teve a presença de Fernando Gebara – Microsoft Brasil – Internet Explorer, Márcio Galli – Mozilla Firefox e Patrick Browne – Opera.

Nesse bate-papo, Fernando Gebara falou sobre o passado, Internet Explorer 6, e sobre o futuro, Internet Explorer 9. Após algumas perguntas da platéia, Gebara deixou claro que o Internet Explorer 6 está fora da linha de suporte da Microsoft e que eles não podem proibir o usuário de usá-lo, nem forçar a atualização do mesmo. Gebara nos disse também, que a versão 9 do navegador da Microsoft, terá suporte ao HTML 5 e CSS 3.

Márcio Galli, deixou claro o quanto é importante o feedback que os usuários mandam para o Mozilla e a sua comunidade que está envolvida no desenvolvimento do Mozilla Firefox.

Patrick Browne, foi perguntado por que o Opera não colabora no WebKit, já que eles possuem uma grande experiência em cross-browser e defendem os padrões abertos. Segundo Patrick, eles não colaboram devido ao modelo de negócio da empresa.

Infelizmente não podemos ficar até o final desse bate-papo e tivemos que sair antes do final.

Avaliação do evento

Equipe da Princi Agência Web: Eliane Garone , Eric N. Princi, Filipe Faustino e Rodolfo Pereira

A 1ª Conferência Web W3C Brasil foi muito bem organizada, localizada e rica em assuntos para desenvolvedores web.  As presenças de peso fizeram a conferência ser o melhor do ano na área de desenvolvimento web.

Pudemos aprender bastante e ter um panorama do futuro do desenvolvimento para a internet. Toda a experiência adquirida na conferência, irá ser aplicada no desenvolvimento de sites da Princi Agência Web, proporcionando sempre aos nossos clientes o que há de mais atual em desenvolvimento web.

Caso você queira ver todas as fotos do evento, acesse o nosso Flickr .

Para acompanhar ao vivo os principais eventos sobre desenvolvimento web, siga-nos no Twitter !

Até a próxima Conferência Web W3C Brasil!

• UaiSEO – O maior evento de SEO de Minas Gerais
• Reciclando e ampliando os conhecimentos de SEO
• 1° Encontro Fora do Eixo
• Criação de Sites dentro dos Padrões Web
• Padrões Web – O que são e porque usá-los

1. Utilize espaços em branco

Os espaços em brancos facilitam a leitura de um código CSS. Não escreva os elementos e as suas propriedades tudo junto sem nenhum espaço. Outra dica é identar os elementos filhos, pois destacam as dependencias entre os elementos.

Utilize os espaços em branco com bom senso: Eles influenciam no peso final do arquivo CSS.

Exemplo de um código não espaçado e não identado:

div#menu-esquerda{padding:10px;margin:5px;float:left;border:1px solid #333;width:300px;height:500px}
div#menu-esquerda-superior{font-size:12px}
div#menu-esquerda-inferior{font-size:14px;font-weight:bold}

Exemplo de um código espaçado e identado:

div#menu-esquerda { padding: 10px; margin: 5px; float: left; border: 1px solid #333; width: 300px; height: 500px }
        div#menu-esquerda-superior { font-size: 12px }
        div#menu-esquerda-inferior { font-size: 14px; font-weight: bold }

Há pessoas que preferem escrever o código com cada propriedade em uma única linha, por exemplo:

div#menu-esquerda {
        padding: 10px;
        margin: 5px;
        float: left;
        border: 1px solid #333;
        width: 300px;
        height: 500px
}

    div#menu-esquerda-superior {
            font-size: 12px
    }

    div#menu-esquerda-inferior {
            font-size: 14px;
            font-weight: bold
    }

2. Comente o seu código

Comente o seu código CSS, separando-o em partes lógicas, mas não abuse dos comentários: Não comente partes desnecessárias que não irão servir para auxiliar o entendimento do código.

/* ----- Conteudo ----- */
div#conteudo { float: right: border: 1px solid #333 }

/* ----- Menu esquerda ----- */
div#menu-esquerda { padding: 10px; margin: 5px; float: left; border: 1px solid #333; width: 300px; height: 500px }

/* ----- Rodape ----- */
div#rodape { ... }

3. Agrupe os elementos com as mesmas propriedades

Se você possui elementos que compartilham das mesmas propriedades, agrupe-os e reaproveite o seu código. Caso esses elementos possuam alguma propriedade diferente, declare-as separadamente. Olhe o código abaixo:

li#ico-vinho { background: url(vinho.gif); padding-left: 10px; margin-left: 10px }
li#ico-uvas { background: url(uvas.gif); padding-left: 10px; margin-left: 10px }
li#ico-acessorios { background: url(acessorios.gif); padding-left: 10px; margin-left: 10px }

As propriedades padding-left e margin-left se repetem nos três elementos, logo, podemos otimizar esse código, escrevendo-o assim:

li#ico-vinho, li#ico-uvas, li#ico-acessorios { padding-left: 10px; margin-left: 10px }
li#ico-vinho { background: url(vinho.gif) }
li#ico-uvas { background: url(uvas.gif) }
li#ico-acessorios { background: url(acessorios.gif) }

4. Abrevie as propriedades

Abreviar as propriedades de algum elemento é uma ótima maneira de escrever um código pequeno. Caso você utilize mais de uma propriedade para o mesmo elemento, abrevie-os se possível.

Os elementos margin, border, padding, background, font e list-style são alguns exemplos que permitem a abreviação das propriedades.

Ao invés de declarar as propriedades assim:

div#menu-lateral { padding-top: 10px; padding-right: 5px; padding-bottom: 15px; padding-left: 13px }

Podemos escrever assim:

div#menu-lateral { padding: 10px 5px 15px 13px }

Sendo que o primeiro valor é o superior, o segundo valor é o espaçamento direito, terceiro valor é o inferior e o quarto é o espaçamento esquerdo.

5. Resete as propriedades do seu CSS

Utilize o CSS Reset para minimizar as diferenças de formatação dos elementos HTML que cada navegador tem por padrão. Você pode encontrar várias maneiras de resetar o código CSS no site CSS-Reset.com ou utilizar o código abaixo, que é um CSS Reset genérico:

* { border: 0; margin: 0; padding: 0; list-style: none }

Caso o tamanho final do seu arquivo CSS fique grande, você pode comprimi-lo, utilizando um compressor de CSS, como o CSS Compressor (http://www.csscompressor.com/ ) ou o CSS Optimizer (http://www.cssoptimiser.com/ ). Utilizando essa ferramenta, o tamanho final do seu arquivo CSS irá reduzir drasticamente.

Se você possui outras dicas para organizar ou otimizar o código CSS, por favor compartilhe conosco deixando um comentário.

Não deixem de votar na nossa enquete, para nós escrevermos os próximos artigos.

Até a próxima!

• Referências rápidas (Cheat Sheets) para Desenvolvedores Web

Quando se fala de SEO e de processo de busca, a palavra-chave é um atributo considerado primário. O internauta entra com palavras-chave na pesquisa e encontra a página que mais se aproxima daquilo que ele está procurando.

Nuvem de palavras-chave

A escolha das palavras-chave é um processo muito importante na otimização de um site para mecanismos de busca, pois elas são utilizadas estrategicamente em grande parte das aplicações das técnicas de SEO. É muito interessante elaborar um portfólio de palavras-chave. Para isso é necessário selecionar criteriosamente estas palavras de acordo com o negócio tratado pelo website. É importante também buscar identificar as possibilidades de palavras digitadas por um internauta quando este está procurando pelo negócio.

Depois de elaborado o portfólio contendo palavras-chave que descrevem bem o que site a ser otimizado aborda, é imprescindível acessar os mecanismos de busca e ver quais são, e como se comportam, os sites melhores colocados relacionados a essas palavras, a fim de avaliar o grau de dificuldade que terá o trabalho de otimização.

• Invista em SEO e seja encontrado na Internet
• Reciclando e ampliando os conhecimentos de SEO
• SEO – Otimização de Sites para Mecanismos de Buscas
• UaiSEO – O maior evento de SEO de Minas Gerais
• Classificação dos Mecanismos de Busca