Tag: Web
Introdução ao HTML 5
Uma breve introdução
O desenvolvimento da linguagem HTML (HyperText Markup Language| linguagem de marcação de hipeertexto) ficou estacionado na versão 4 desde 1999. Desde então, a W3C focou-se no desenvolvimento de linguagens como XML (Extensible Markup Language) e SVG (Scalable Vector Graphics, que se refere ao uso de gráficos vetoriais em navegadores). Neste tempo, os navegadores (browsers) evoluíram suas funcionalidades, como por exemplo, a abertura de páginas abas diversas, a criação e integração com leitores de RSS. Entretanto, recentemente organizações como Mozilla Foundation, Opera e Apple se uniram para atualizar o HTML e implementar novas funcionalidades e melhorias no seu funcionamento.
Este artigo busca apresentar algumas das novidades que o HTML5 apresenta. Os ele já conhecidos do HTML 4 permanecem em sua grande maioria, não sendo portanto, problema para aqueles que já estão familizariados HTML. Isto por que o o HTML5 foi desenvolvido pensando também em todos os usuários que não utilizam os navegadores mais recentes do mercado. Para os novos usuários e aprendizes do HTML e que irão se imergir diretamente no HTML 5 também não será problema, pois as mudanças não são significativas o suficiente para impactar criações e produções baseadas nesta linguagem.
Os novos elementos do HTML 5
Diversos elementos novos foram introduzidos no HTML5 com o objetivo de facilitar a compreensão e a manutenção do código. Alguns deles são fruto de uma evolução natural do elemento <div> com foco na websemântica; já outros surgiram da necessidade de implementar uma padronização na forma de se publicar conteúdo, como já ocorre hoje com imagens. Veja abaixo alguns dos principais elementos da nova geração:
Elementos de estruturação
<header> – cabeçalho de página ou de seção (diferente da tag <head> );
<section> – cada seção do conteúdo;
<article> – um item do conteúdo dentro da página ou da seção;
<footer> – rodapé da página ou de uma seção;
<nav> – conjunto de links que formam a navegação, seja no menu principal do site ou nos links relacionados ao conteúdo da página;
<aside> – conteúdo relacionado ao artigo (como ocorre hoje nos arquivos e posts relacionados em um blog, por exemplo).
Alguns elementos de conteúdo
<figure> – utilizado para associar uma legenda a uma imagem, vídeo, arquivo de áudio, objeto ou iframe:
<figure id="figura01">
<legend>Figura 1. Esquema de uma página em HTML5</legend>
<img src="figura01.png" border="0" width="400" height="500"
alt="Apresentação da estrutura de uma página criada com os novos elementos do HTML 5" />
</figure>
<canvas> – através de uma API gráfica (Application Programming Interface (ou Interface de Programação de Aplicações), irá renderizar imagens 2D (bidimensionais) dinâmicas que poderão ser usadas em jogos, gráficos, etc;
<audio> e <video> – utilizados para streaming (transmissão via internet) de arquivos de áudio e vídeo. Esta é nitidamente uma busca em estabelecer um novo padrão em todos os navegadores para estes tipos de mídias, como ocorre hoje com as imagens:
<audio src="audiohd.mp3" autoplay="autoplay" loop="70000" />
<video src="videohd.mov" width="1920" height="1080" />
<dialog> – junto com as tags <dt> e <dd> será utilizado para formatar um diálogo:
<dialog>
<dt> Olá, como vai amigo?
<dd> Eu estou bem e você?
<dt> Eu também estou muito bem.
<dd> Você sabe onde encontro Maria.
<dt> No Brasil?
<dd> Isto, ela foi para lá.
</dialog>
<time> – representa data e/ou hora;
<meter> – utilizada para representar medidas, que podem ser de distância, espaço de armazenagem em disco, altura, comprimentos, espaço entre objetos etc.
Elementos de estruturação retirados do HTML5
Alguns elementos não existirão mais no HTML5. Alguns deles foram retirados porque sua função tem como objetivo o resultado visual. Estes elementos deverão ser substituídos por declarações feitas diretamente no CSS (Cascading Style Sheets), como: <basefont> , <big> , <center> , <font> , <s> , <strike> , <tt> e <u> .
Outros elementos foram retirados por afetarem negativamente a acessibilidade do site, como as tags: <frame> , <frameset> e <noframes> .
Apesar de serem considerados antigos, <b> e <i> ainda serão reconhecidos e renderizados para fins de formatação, mas devem ser substituídos sempre que possível pelos elementos <strong> e <em> , respectivamente.
Também foram retirados alguns atributos, seja porque caíram em desuso ou porque podem ser substituídos semanticamente por declarações no CSS para definir o visual dos elementos. Os principais atributos retirados são:
- target no elemento <a> ;
- align nos elementos <table> e demais tags de tabelas, <iframe> , <img> , <input> , <hr> , <div> , <p> , entre outros;
- background em <body> ;
- bgcolor nos elementos de tabela e no <body> ;
- border em <table> e <object> ;
- cellpadding e cellspacing em <table> ;
- height em <td> e <th> ;
- width nos elementos <hr> , <table> , <td> , <th> e <pre> ;
- hspace e vspace em <img> e <object> ;
- noshade e size em <hr> .
Declaração Doctype
Com o HTML5 passaremos a utilizar apenas uma declaração doctype conforme apresentado abaixo:
<!DOCTYPE html>
Atualmente praticamente todos os desenvolvedores copiam e colam o longo e complicado doctype de algum lugar na hora de começar um novo documento HTML. Com este novo formato teremos uma declaração única, curta e fácil de lembrar.
A Transição do XHTML
O HTML5 e seus antecessores, HTML 4.01 e XHTML 1.0 são muito semelhantes. Logo, o desenvolvedor que está está familiarizado com as versões anteriores não sentirá nenhuma dificuldade na mudança. Para os novos desenvolvedores que ainda irão aprender a linguagem, os novos elementos do HTML 5 deixarão o processo mais simples.
A sintaxe dos elementos é a mesmo que no HTML 4.01, sintaxe esta que não exigia que elementos como <img> e <input> fossem “fechados”:
<input type="text" id="nome">
Entretanto, para aqueles que estão migrando do XHTML, a barra que fecha um elemento continuará sendo aceita, conforme se vê abaixo:
<input type="text" id="nome" />
Informações
- Publicação:
- 27 jan 2011 / 09:21 AM
- Categoria:
- HTML, Tendências, Web, Websemântica
- Tags:
- tagged Apple, elementos de estrutura, elementos de estruturação, elementos novos, Extensible Markup Language, head, header, HTML, HTML5, HyperText Markup Language, Mozilla Foundation, Opera, Scalable Vector Graphics, Web and Websemântica
- Comentários:
- Sem Comentário;
Web 2.0 Layer Styles para design de webelements no Photoshop
Layers styles para Photoshop CS3. Estes styles podem ser utilizados para criar elementos web 2.0. Veja alguns exemplos de elementos web 2.0 criados com styles no artigo: Exemplos de elementos de design gráfico para web 2.0. Os exemplos mostrados referem-se ao Fireworks, no entanto, a lógica de criação é a mesma.
Formato de compactação: winrar
Extensão do arquivo: rar
Tamanho do arquivo: 12 KB
Instalação
Usualmente os arquivos do tipo asl (Adobe Style Layer) ficam localizados dentro da pasta C:\Arquivos de programas\Adobe\Adobe Photoshop CS3\Presets\Styles ou C:\Progran Files\Adobe\Adobe Photoshop CS3\Presets\Styles\. Na dúvida realize um pesquisa dentro do sistema operacional para encontrar arquivos com extensão asl. Para buscar arquivos deste tipo pode-se utilizar o parâmetro de busca: *.asl.
Utilização
Certifique-se de selecionar uma ferramenta de desenho, como por exemplo, a Rectangle Tool (Ferramenta Retângulo) para que o painel de styles fique ativo. Com a ferramenta selecionada basta clicar sobre o style desejado na barra superior denominada Options (Opções).
Para abrir a barra Options utilize o menu Window/ Options.
Os Styles são encontrandos dentro do painel Styles. Para carregar um conjunto de styles específico, clique sobre a seta localizada na parte superior direita do painel para que a lista de styles fique acessível. Com lista aberta basta selecionar o conjunto de styles desejado. No caso, web20layerstylesv1. Veja figura abaixo.
Até a próxima. Forte abraço.
Ao som de Lenini – Miedo
Informações
- Publicação:
- 11 jul 2008 / 12:56 PM
- Tags:
- tagged Adobe Photoshop, Design, Graphics, Layers, Photoshop, Styles, Web and webelements
- Comentários:
- Sem Comentário;
Web 2.0 Layer Styles para design de webelements no Fireworks
Layers styles para Fireworks CS3. Estes styles podem ser utilizados para criar elementos web 2.0. Veja alguns exemplos de elementos web 2.0 criados com styles no artigo: Exemplos de elementos de design gráfico para web 2.0
Formato de compactação: winrar
Extensão do arquivo: rar
Tamanho do arquivo: 189 KB
Instalação
Usualmente os arquivos do tipo stl (Fireworks Style Library) ficam localizados dentro da pasta C:\Arquivos de programas\Adobe\Adobe Fireworks CS3\ ou C:\Progran Files\Adobe\Adobe Fireworks CS3\First Run\. Na dúvida realize um pesquisa dentro do sistema operacional para encontrar arquivos com extensão stl. Para buscar arquivos deste tipo pode-se utilizar o parâmetro de busca: *.stl.
Utilização
Os Styles normalmente são encontrandos dentro do painel Assets por padrão no Fireworks CS3. Para acessar o painel Styles utilize o atalho shift + F11 ou utilize o menu Window/ Styles. Veja a figura abaixo.
Até a próxima. Forte abraço.
Ao som de Lenini – O último por do sol
Informações
- Publicação:
- 10 jul 2008 / 12:51 AM
- Tags:
- tagged Adobe Creative Suite, Design, Layer, Styles, Web, Web 2.0 and webelements
- Comentários:
- 1 Comentário;
Informações
- Publicação:
- 27 jun 2008 / 02:22 AM
- Categoria:
- Design
- Tags:
- tagged Design, Designer, logomarcas and Web
- Comentários:
- Sem Comentário;
Guia SEO para Designers e Webdesigners
O termo SEO é acrônimo para Search Engine Optimzer, que pode ser entendido como Otimização para máquina de busca (buscadores).
Equivaleria a dizer: como otimizar meu site para que ele apareça bem colocado em uma busca do Google, por exemplo?
De acordo com levantamentos realizados por diversos sites especializados, fica cada vez mais evidente que o uso de ferramentas de otimização é de fundamental importância para adquirir bom posicionamento em de sites de busca. Diariamente pessoas tomam contato com alguma informação relativa à otimização de sites. Mesmos proprietários de sites, a princípio leigos em tecnologias relacionadas ao universo web, estão cada vez mais solititando das empresas administradoras de seus sites, o oferecimento de serviços de otimização e cadastro em buscadores visando alcançar melhores resultados nas diversas máquinas de busca existentes na web.
Muitos designers ignoram ou mesmo desconhecem a importância de técnicas de otimização de sites, por considerar que não lhes cabe atuar nesta área. Ocorre que durante a confecção de um website, o trabalho de um webdesigner está repleto de aspectos relacionados aos serviços de otimização e muitos destes profissionais desconhecem esta possibilidade. Muitas vezes, bastaria apenas uma mudança de postura durante a fase de diagramação do website e geração de conteúdos, para criar páginas mais legíveis aos mecanismos de busca.
Já há algum tempo venho realizando pesquisas em diversos canais disponíveis na internet e fora dela tentando alcançar informações acerca do processo de otimização de sites. O fato é que a literatura sobre o assunto ainda não é ampla e alguns recursos utilizados por vitoriosos no mundo dos “search engines” ainda são guardados a “sete chaves” ou são de certo modo obscuros. Entretanto, há certos erros, que ocorrem frequentemente durante o processo de desenvolvimento praticado por webdesigners e programadores que podem ser evitados elevando consideravelmente a legibilidade do website criado para os “spiders” (robõs espiões dos buscadores).
Por que é importante conhecer técnicas de SEO?
- Primeiramente, cabe dizer: SEO não é apenas para profissionais da área de Marketing. Como webdesigner ou desenvolvedor de conteúdo, grande parte dos serviços de otimização denominados on-dev-site SEO são de responsabilidade destes profissionais.
- Se o seu site não é amigável para as máquinas de busca, entendendo como amigável, ser visto, “enxergado” e completamente interpretável, é provável que você esteja perdendo grande número de visitantes. Boa parte destes visitantes, os quais você jamais saberia.
- É bom ter em mente que se um internauta não digitar o endereço do seu site (www.seusite.com) no browser ou se não existir referências para seu website na web através de outros sites por exemplo, a única forma de algum visitante encontrar seu conteúdo será através de mecanismos de busca, como Google, Yahoo,etc.
- Há muitos benefícios em ter um site otimizado e amigável a mecanismos de busca. O fato de um site apareçer bem posicionado em um mecanismo de busca é uma publicidade gigantesca a custo praticamente igual a zero.
- Um site otimizado será melhor entendido por uma ferramenta de busca e irá garantir maior número de visitas elevando consideravelmente a publicidade do seu conteúdo.
- SEO é um considerado um “skill”. Este termo é muito comum em jogos de video game e significa habilidade. É bastante apropriado dizer que adquirir conhecimentos de SEO agrega valor profissional ao webdesigner, uma vez que este poderá vender serviços de otimização, além de ser um diferencial no seu currículo. Futuramente, saber utilizar recursos de SEO será condição “se en qua non” para um webdesigner.
Em seguida irei mostrar algumas técnicas básicas para evitar erros comuns de desenvolvimento que podem impedir que um robô de busca seja capaz de enxergar seu website corretamente num universo de milhões de páginas disponíveis na internet.
Antes vamos entender um pouco do funcionamento de mecanismos de busca.
Como funcionam as “Search Engines” (Máquinas de busca, comumente denominadas Mecanismos de buscas?
Cada buscador tem seu próprio programa de busca denominado “web spider” ou “web crawler”. O termo crawler significa réptil rastejante. De certo modo, é justamente o que faz uma máquina de busca: rasteja pela internet, “rente ao solo”, buscando os mínimos detalhes, tentando apontar para os diretórios mais ocultos, para os documentos mais esquecidos, gerando uma verdadeira base de dados.
O propósito básico de uma máquina de busca é justamente ler e coletar toda informação possível de ser encontrada, seguindo links (internos e externos) para depois depositar toda esta informação em uma base de dados gigante denominada Index.
Quando um internauta solicita uma busca através de um mecanismo, como Google ou Yahoo, o trabalho do buscador resume-se a encontrar a informação armazenada em seu banco de dados que seja mais relevante e aproximada daquilo que foi requisitado.
O que move um mecanismo de busca ou o faz parar é o quão bem foi respondida uma questão, quando um busca é solicitada. O comportamente de um buscador é baseado em um algorítmo constituído de uma série de fatores que juntos são utilizados para dizer se uma página é realmente relevante em relação a uma busca realizada.
É bem verdade que a relação semântica estabelecida pelas máquinas na tentativa de oferecer aquilo que o usuário deseja através de uma busca rotineira ainda é bastante precária e precisará evoluir muito para ser capaz de representar o “entendimento das coisas do mundo”.
No artigo denominado: INFORMAÇÃO, REPRESENTAÇÃO E COMUNICAÇÃO: OS PILARES PARA A WEB SEMÂNTICA da revista Gestão do Conhecimento, Cláudio José Silva Ribeiro menciona que pouco adianta tanta informação disponível se não é possível distinguir quais são as mais relevantes que satisfazem as condições estabelecidas pelos usuários. É justamente neste sentido que as máquinas de busca ainda precisam evoluir. Por exemplo, ao digitar num buscador: modelos de sites, o que se espera é que o buscador aponte para um endereço semelhante a modelosdesites.info, ou seja, que o endereço eletrônico contenha as palavras utilizadas na busca, no entanto, não é isto que acontece sempre.
Eu posso ser um “Search Engine Optimizer”?
Há no mercado brasileiro e mundial, empresas e profissionais vendendo serviços de cadastro em sites de busca e de otimização de sites com o objetivo de melhorar o posicionamento de websites em buscadores. É um novo campo que se abre. E tenha certeza que entendê-lo e praticar todas estas técnicas a fundo (não é este o objetivo deste artigo) demanda tempo considerável e em pouco tempo será seguramente um departamento de muitas empresas de desenvolvimento e criação de conteúdo para internet.
Cada mecanismo de busca possui seu algorítmo de busca. No entanto, entender ao menos em linhas gerais, os fatores que influenciam o algorítmo afetando o posicionamento no resultado de uma busca é relativamente fácil e pode contribuir em muito para alcançar resultados bem interessantes. Além do que conhecer estas técnicas pode se tornar uma boa fonte de renda.
Um trabalho de SEO possui dois aspectos: On-dev-site SEO e Off-dev-site SEO.
- On-dev-site SEO (Técnicas de desenvolvimento e otimização on-site): são ações que você pode tomar diretamente no seu site, como interferir, alterar e otimizar tags de HTML, cabeçalhos de páginas, palavra-chave, links internos, estrutura do site, etc.
- Off-dev-site SEO (Técnicas de desenvolvimento e otimização off-site): são aspectos que você não tem pouco controle, como por exemplo, quantos links externos apontam para o seu site ou quantas pessoas visitam seu site. Embora, existam algumas atitudes que possam ser tomadas para melhorar este aspecto, não é objetivo deste artigo tratá-las aqui.
O guia apresentado, é como já foi dito, fruto de trabalhos de pesquisas em diversos sites na internet, bibliografia variadas, além daquilo que venho aplicando em meus sites. Os métodos aqui discutidos podem ser utilizados por designers, webdesigners e desenvolvedores. O foco são as técnicas relacionadas ao “On-dev-site SEO”.
Uma dica importante: produza conteúdo de qualidade, atrativo e interessante. Aplique corretamente as técnicas “On-dev-site SEO” e certamente os aspectos relacionados ao Off-dev-site SEO começaram a caminhar por si só, sem que você tenha que mexer bravamente seus dedos. Em algum tempo você conseguirá adquirir “social bookmarks” (links na web) apontando para o seu site, além de bons backlinks (links de outros sites), inclusive, sites de respeito enviando usuários para o seu domínio.
Há algumas técnicas “Off-dev-site” que você pode utilizar para alcançar retorno mais rápido, como por exemplo, troca de banners. No entanto, é assunto para outro post.
Os erros de SEO mais comuns cometidos por Designers e Webdesigners
1 – Splash Page (também conhecida como página de apresentação)
Este é erro ainda é bastante comum e pode ser encontrado com facilidade na internet. Ao não ser que posição em buscadores não seja importante em seu projeto, jamais coloque uma página de abertura em seu site. Há sites muitos específicos e populares que utilizam esta técnica e lançam modismos que acabam arrastando designers e desenvolvedores mais desavisados. Justamente por pensarem que estão fazendo algo inovador ou ainda por acharem que estão participando da “moda”. É preciso lembrar que uma grande empresa em geral possui um público fiel ao seu conteúdo ou mesmo um produto já consolidado no mercado e uma mudança drástica em seu site a ponto de retirar a página inicial dificilmente irá causar grande perda de visitação. Outro ponto é que estas empresas já possuem um público regular acostumado a acessar o seu conteúdo. Empresas com grande orçamento para publicidade, como a Coca-Cola, por exemplo, podem investir na criação de uma página de entrada contendo apresentações complexas e cheias de efeito em flahs criados para atrair o visitante. O que nem sempre é fácil para outras empresas, que possuam um orçamento mais modesto.
Colocar uma página de entrada em seu site dizendo: “Clique aqui para entrar” é o maior dos erros que você poder cometer. Se for uma página toda em flash, o pecado torna-se mortal. Uma vez que links inseridos dentro de arquivos em flash são impossíveis de serem seguidos por spiders e crawlers.
A estrutura interna do seu site (páginas internas) não serão reconhecidas pelos robôs de busca se não existirem links apontando para dentro do site. Ou seja, todo o seu site ficará completamente invisível.
A sua homepage precisa incluir, minimamente, algumas palavras chaves e links apontando para as páginas internas do seu site.
2 – Menus em flash
Os robôs de busca são buscadores baseados em textos. Este fator deve ser levado em conta toda vez que se pensar em produzir conteúdo objetivando otimização. Mecanismos de busca enxergam textos. Portanto, inserir menus em flash, com efeitos de sombras, esmaecimento e outros recursos gráficos pode ser muito bonito e impactante, mas do ponto de vista de otimização é um grande erro, já que os links inseridos em elementos em flash, como já mencionado, não podem ser seguindos por robôs buscadores.
3 – Imagens e conteúdo em flash
“Web spiders” (robôs de busca) são baseados na busca textual, como já mencionado, portanto, eles não podem ler textos inseridos em imagens e arquivos em flash. Muitos designers cometem o sério erro de inserir conteúdo, sobretudo, palavras-chaves em arquivos em flash e imagens.
4 – Uso excessivo da tecnologia Ajax
Muitos designers tentam impressionar seu visitante implementando massivamente efeitos em Ajax, particularmente, com objetivos de navegabilidade. No entanto, este tipo de artifício constitui-se em dos maiores erros de otimização. Por que? O conteúdo baseado em Ajax é carregado dinamicamente. Ocorre que neste caso, o robôs de busca e indexadores não são capazes de realizar a indexação do conteúdo.
5 – Localização dos arquivos do site
Por algum motivo, alguns designers costumam alterar com frequência a localização dos temas e arquivos de seus sites, distribuindo-os em subdiretórios (por exemplo: dominio.com/v1, v2, v3) e criar redirecionamentos para estes novos diretórios. Mudar constantemente a localização dos arquivos do site pode causar a perda de links que apontam para seu site e interferir no seu “rankeamento” em buscadores.
6 – “Clique aqui para ver, acessar…”
É bastante comum e pouco inteligente o uso do “Clique aqui” ou “Leia mais” como um link de texto. Seria ótimo, se seu objetivo fosse concorrer e aumentar o seu “rankeamento” para as expressões (que nada dizem) clique aqui ou leia mais. No entanto, se o seu objetivo é que o seu conteúdo seja reconhecido pelo que realmente significa do ponto de vista semântico, é preciso utilizar palavras mais instrutivas que realmente sejam capazes de dizer alguma coisa. Utilize termos relacionados ao tópico/ assunto em questão. Use uma palavra-chave que seja mais relevante e objetiva. Se o objetivo é levar o cliente até um texto que fala sobre o desmatamento da Amazônia, então escreva: clique aqui para saber mais sobre o desmatamento da Amazônia e não simplesmente clique aqui para mais informações. Isto é no mínimo ineficiente.
Importante: Não use a mesma palavra-âncora em vários lugares em seu site. Este tipo de recurso pode ser visto pelos buscadores como indício de spam.
7 – Erros mais comuns na utilização da Tag Title
Textos iguais ou parecidos dentro da tag title
Cada página do seu site deve possuir uma <tag title> única, com suas palavras-chaves específicas. Muitos desenvolvedores cometem o erro de utilizar tags de títulos iguais ou similares em todo o site. Isto é o mesmo que dizer para os buscadores: “cada página do meu site é igual, portanto, não tenha o trabalho de percorrer todas elas.” Isto é abrir mão da exclusividade de cada conteúdo disponível em cada página do seu site.
Um exemplo de péssima utilização da tag title são os temas padrões do WordPress. As tags title padrão do WordPress são: Nome do site/ Arquivo do blog/ Título do post. Por que o padrão utilizado pelo WordPress não é amigável aos buscadores? Porque cada post do blog terá o mesmo padrão na parte inicial da tag title, repetindo: Nome do site/ Arquivo do blog/. Se você realmente desejar incluir o nome do site na tag title, este deverá estar presente no final da sequência: Título do post/ Nome do site.
Exceder a quantidade limite de 65 caracteres
Escrever tags title com muito longas. Os mecanismos de busca irão mostrar a tag title das páginas como cabeçalhos e links através dos quais os usuários irão acessar o conteúdo do site. Você tem aproximadamente 65 caracteres (incluindo espaços) para passar a sua mensagem ou correr o risco de perder público.
Excesso de palavras na tag title
Outro tipo comum de erro é a colocação de muitas palavras na tag title. Escrever a mesma coisa 3 ou mais vezes não irá tornar sua página mais relevante para os mecanismos de busca. O excesso de palavras na tag title é visto como técnica de spam pelos buscadores. É preciso ser esperto para repetir a mesma palavra várias vezes de diferentes formas. Veja o exemplo:
“Dicas de foto e técnicas fotográficas para belas imagens”
Observe que foto e fotografias são palavras com a mesma raiz (foto). Este tipo de artifício pode contribuir para aumentar sua audiência e seu desempenho em buscadores.
8 – Atributo Alt de imagens vazio
Você sempre deverá descrever sua imagem através do atributo alt. O atributo alt é que irá identificar sua imagem e demonstrar a relevância do conteúdo de sua página. Buscadores “não enxergam” imagens e para reconhecer o conteúdo do seu site através das ilustrações é necessário o uso do atributo alt.
Dica: Descrever as imagens do seu site corretamente pode favorecer o aparecimento do seu site em posições destacadas em buscas de imagens. Vários visitantes podem chegar até seu site através da busca de imagens. Suponha que um usuário esteja buscando por imagens de computadores e ao digitar esta palavra em um buscador, o seu site contendo um artigo sobre a evolução dos computadores tenha aparecido nos primeiros lugares, devido ao atributo alt de uma imagem presente neste artigo. Observe que neste caso, o usuário pode ter sido levado ao seu site para acesso a um artigo relevante através da pesquisa por imagens.
9 – URLs não-amigáveis
Muitos blogs e CMS (Content Management System – Sistemas de administração de conteúdos) possuem recursos de geração de endereços amigável. No entanto, nem todos sistemas tiram vantagem de endereços amigáveis. Estes endereços são interessantes tanto para audiência humana quanto para buscadores. A URL é também um lugar importante para aparecer as palavras-chaves do seu site.
- Exemplo de endereço amigável: dominio.com/titulo_pagina
- Exemplo de endereço não-amigável: dominio.com/?p=23568
Dicas gerais de SEO: o que fazer e o que não fazer.
Não ignore sua audiência
Escreva tópicos que irão interessar ao seu público. Como? Procure, estude, faça pequenas pesquisas de opinião, utilizando polls, por exemplo, busque por informações relevantes em fóruns, tópicos comuns em e-mails de marketing e venda, ou mesmo utilize busca por palavras-chaves, enfim, faça tudo para conhecer melhor seu público e oferecer aquilo que lhes interessa.
Existem diversificas e ótimas ferramentas, como Google Keyword Tool, ou SEO Book’s Keyword Tool e muitas outras que podem ser utilizadas para otimização. O objetivo não é gastar todo o seu tempo procurando palavras-chaves, mas sim, conhecer o que os visitantes do seu estão buscando. Um bom painel de administração do site, localizado no servidor de hospedagem (comumente, denominado CPanel) deverá trazer ferramentas para conhecer melhor a audiência do seu site e inclusive analisar as palavras-chaves que estão levando os visitantes até as suas páginas.
Densidade das palavras-chaves
Uma vez que você tenha um tópico para escrever para seus leitores, ajude os buscadores a encontrá-lo. Densidade das palavras-chaves é o número de vezes que uma palavra-chave aparece em uma página em relação ao número total de palavras. Tenha certeza de que as suas palavras-chave irão aparecer em áreas cruciais:
- Na tag tigle.
- No URL da página (URL amigável).
- No cabeçalho da página (H1 ou H2).
- No primeiro parágrafo de conteúdo.
- Pelo menos 3 vezes no corpo da página (dentro da tag body). Colocar mais ou menos palavras irá depender da quantidade de conteúdo, e somente se, fizer sentido.
Muitas pessoas objetivam uma densidade de palavras-chaves em torno de 2% (por exemplo, 2 palavras para cada 100 palavras). No entanto, se a sua frase-chave for: SEO para Webdesigners e Webdevelopments (Webdesenvolvedores ou Desenvolvedores Web), quantas vezes você poderá repetir esta frase, sem que pareça artificial? Lembre-se: escreva para seu público, não para máquinas. Seguindo estes parâmetros, você irá escrever naturalmente e obter sucesso com seu público leitor e também com as máquinas, consequentemente.
Atenção: não coloque a mesma palavra em grande quantidade na sua página. Este tipo de prática poderá ser tomado como “keyword stuffing” (excesso de palavras-chaves) e ser penalizado pelos buscadores.
Não ignore as relações
Neste artigo, faz sentido mencionar palavras como: busca de palavras-chave, mecanismos de busca, uso da tag title. No entanto, se mencionarmos a palavra-chave, compra de celulares (de forte apelo em buscadores) será que estaríamos utilizando este termo dentro de um contexto correto? Somente utilize palavras-chave e tópicos que façam sentido para sua audiência. Mecanismos de busca medem a relação entre as palavras-chave do site para determinar a relevância durante as pesquisas realizadas por usuários. Veja estes exemplos:
- Carros e pneus (ótima relatividade)
- Webdesign ou Design e Macacos voadores (não…talvez, poucas vezes)
Não tenha medo de links internos
Você gostaria que os mecanismos de busca encontrassem cada página do seu site? Ajude-os a cumprir esta tarefa. Isto pode ser feito através de sitemaps ou arquivos de blog que contém uma listagem do conteúdo do seu site. É preciso existir uma página denominada sitemap, por exemplo, que tenha links para todas as páginas do seu site.
Dica: você pode promover as páginas mais importantes do seu site colocando dentro do corpo (body) das páginas links realmente relevantes para outras páginas. Ao invés de utilizar o recurso empobrecido, clique aqui, que tal mencionar os nomes das páginas para o qual deseja maior expressividade?
Não ignore links quebrados
404 – erro de arquivo ou página não encontrada
Evite links quebrados em seu site. Busque incansavelmente por links quebrados em seu site e elimine-os. Se você remover uma página ou seção do seu site, configure o mecanismo “robot.txt” para prevenir que os mecanismos de busca venham a indexar links quebrados. Se você mover uma página ou um site inteiro, utilize o método 301. .htacces para redirecionar para a nova URL.
Dica: utilize o Google Webmaster Tool para encontrar links quebrados e erros do tipo 404.
Seja consistente com ao fazer referência ao seu domínio
Para os mecanismos de busca, www.dominio.com e dominio.com são dois endereços URL diferentes. Portanto, é importante manter a consistência do seu domínio. Se você iniciar a promoção do seu site utilizando a referência www.dominio.com, mantenha sempre este padrão.
Não se assuste com a websemântica
Websemântica e padronização podem, além de manter seu site mais inteligível, permitir que mecanismos de busca seja capazes de ler melhor suas páginas.
Resultado da posição do seu site na busca
Codificar e configurar o seu site para ser amigável às técnicas de SEO pode aprimorar o acesso dos mecanismos de busca à páginas do seu site. No entanto, isto não irá garantir seu posicionamento no topo das páginas de busca, uma vez que há diversos outros fatores que podem determinar o seu posicionamento nas buscas. Alguns destes aspectos são apresentados abaixo:
PageRank
Alguns profissionais de SEO preocupam-se com o PageRank do Google e outros não. Obviamente que é muito bom possuir um PageRank de respeito. É uma boa referência para saber o quão importante o Google considera o seu site. Abaixo apresentados algumas dicas para melhorar seu pageRank. Outra forma de alavancar o seu PageRank é através de backlinks (link de retorno). Através da colocação de links de qualidade apontando para o seu site em sites de referência, em bons sites.
Idade do domínio
Você ficará supreso em saber que a idade de um domínio é um dos fatores que interferem no algorítmo utilizado pelos buscadores. Domínios mais antigos possuem uma história, e seu conteúdo é visto com maior credibilidade que sites que entraram para o “campo de batalha” a pouco tempo. É comum domínios mais antigos aparecerem no topo da lista de buscadores.
Seja paciente
Você pode ter feito tudo certinho, no entanto, seu site pode não estar no topo das páginas dos buscadores para a palavra-chave que você escolheu. Por que? Porque tudo leva tempo. Leva tempo para que seu site seja indexado e alcançe um posição no PageRank do Google (especialmente para domínio novos).
Outra razão:
Pode ser que as palavras-chave que você escolheu utilizar sejam muito competitivas. Tente escolher outras palavras e talvez você tenha resultados melhores. Lembre-se: você está competindo com milhões de sites.
Informações
- Publicação:
- 18 jun 2008 / 12:11 PM
- Tags:
- tagged Designer, Otimização, SEO, Web and Webdesigner
- Comentários:
- Sem Comentário;
Exemplos de elementos de design gráfico para web 2.0
Exemplos de elementos de design gráfico desenvolvidos dentro da tendência web 2.0.
Nível: Inicial, Intermediário
Software(s): Fireworks CS3
Veja abaixo alguns exemplos mostrando alguns elementos desenvolvidos abordando tendências modernas relacionadas ao design para web 2.0. No final do post encontra-se um arquivo em PNG contendo os exemplos.
Até a próxima. Forte abraço.
Informações
Criando elementos de design gráfico web 2.0 em Fireworks
Informações
Webwriting – O design da escrita para web
Webwriting – O design textual simples e eficiente para web
Como escrever para web?
Qual a melhor forma de escrever um texto que deve ser efetivo na comunicação, rápido e acessível no universo web? Qual o melhor design textual?
É cada vez mais evidente a emergência com que o internauta busca a leitura diante do computador. Entendendo emergância neste caso, como pouco tempo diante do computador efetivamente lendo. Para chamar atenção e prender o visitante é preciso antes de tudo um texto quase que mágico, capaz de ao mesmo tempo informar, ser preciso no que deseja apresentar e ainda ser capaz de motivar através da surpresa. E sem contar na indispensável qualidade da informação que deve ser transmitida. Diante destes aspectos fica posto o desafio de escrever na web e para a web. Os fundamentos do webwriting são pautados seguramente na simplicidade e rapidez textual sem abrir mão da qualidade.
Ernest Miller Hemingway nascido em 21 de julho de 1899 e falecido em 2 de julho de 1961 foi um grande novelista americano, conhecido por ser um escritor de histórias curtas, além de também ter sido jornalista. Ganhador dos Prêmios Pulitzer em 1953 pela obra “O velho homem e o mar” e Nobel de Literatura em 1954. Hemingway’s era destacado pelo seu estilo econômico de escrever com poucas palavras, mas sempre de forma significativa. Seu estilo influenciou o desenvolvimento da literatura de ficção de todo o século XX. Ernest foi um mestre da literatura efetiva. Vamos ver alguns conselhos deixados por ele a respeito da boa escrita.
Vamos buscar nas palavras de Ernest alguns fundamentos para uma escrita elegante, fluente e eficiente, que possa atender às necessidades do ambiente de escrita do universo da web de forma efetiva.
1 – USE SENTENÇAS CURTAS
Hemingway ficou famoso por seu estilo minimalista de escrever, resumido e conciso, dispensando adjetivos floridos e indo direto ao ponto. De forma curta, Hemingway escreve com uma simplicidade genial.
Ex.: Vende-se: sapatos de crianças, nunca usados.
Perceba que o objetivo não é fundamentar que a boa comunicação somente ocorre se forem utilizadas poucas palavras. No entanto, para que usar muitas palavras se poucas são capazes do mesmo efeito? That’s the question.
2 – USE PARÁGRAFOS CURTOS
Frases curtas resultam em parágrafos curtos. O leitor, sobretudo de textos da web, estará mais inclinado a se interessar por textos menores. Textos grandes frequentemente expantam o leitor. É a chamada “PVL”, “preguiça virtual de ler”.
3 – USE UMA ESCRITA VIGOROSA, UM PORTUGUÊS VIGOROSO
Palavras bem utilizadas soam fortemente e atingem o objetivo de forma imediata. Neste ponto é importante lembrar que a medida certa é o ideal. Cuidado para não bombardear o visitante/leitor com um texto exagerado e pouco confiável. É preciso evitar o esteriótipo do marketing de vender o produto a todo custo. Nunca tente empurrar textualmente algo que você mesmo não consumiria na vida prática.
Confira a frase em que David Garfinkel’s diz:
“É múscular, enérgico. O inglês vigoroso vem de paixão, foco e intenção. É a diferença entre a aplicação de um bom esforço e tentar mover um pedregulho… é na verdade a sudorese, é o grunhir, é esticar seus músculos ao ponto da exaustão e… mover o que lhe dá medo”
4 – SEJA POSITIVO, NUNCA NEGATIVO
Considerando que Hemingway não era necessariamente o cara mais feliz e alegre do mundo, o que significa ser positivo? A princípio você poderia dizer que é quando alguma coisa vale mais do que realmente é. Vejamos:
- Em vez de dizer “barato”, diga “econômico”,
- Em vez de dizer “este procedimento é indolor”, diga que “há pouco desconforto” ou “é relativamente confortável”,
- E, em vez de dizer “este software é livre de erro” ou “é infalívl”, diga “este software é compatível” ou “estável”.
Percebeu a diferença?
5 – NÃO TENHA APENAS 4 REGRAS
Na realidade, Hemingway indicou 4 regras para escrita. Mas, como qualquer escritor sabe, com apenas 4 regras as coisas nunca irão acontecer. Portanto, a fim de ter 5 regras, eu tive que cavar um pouco mais fundo para obter a mais importante dica de Hemingway’s:
“Eu escrevo uma página de obra-prima para noventa páginas que não valem nada”, Hemingway confidenciou a F. Scott Fitzgerald em 1934: “Eu tento jogar esta porcaria fora”.
Portanto, vale observar dicas que sempre estiveram por aí, desde que entramos na escola:
- Leia, leia muito. A confiança para escrever surge da segurança a respeito daquilo que sabemos.
- Revise seus textos. Sempre leia-os firmente e sem preguiça de revisar. Releia-os incansavelmente até ter certeza que estão claros e de que não há erros.
- Nunca hesite em retornar e corrigir eventuais falhas. Todas as vezes que você voltar em um texto escrito anteriormente e revisá-lo irá perceber que pode melhorá-lo e torná-lo mais comunicativo, atual e melhor.
- Peça a outras pessoas para ler o que você escreve, seja um colega de trabalho, um amigo, submeta sua escrita a alguém que possa lhe fazer críticas positivas e proporcionar crescimento. Muitas vezes nosso olhar não consegue captar nossos próprios erros.
- Esteja sempre atento às tendências e seja atual. Busque uma escrita que além de comunicar seja interessante e agradável ao seu leitor.
- Atualize constantemente. Estar informado é suporte fundamental para quem deseja escrever, sobretudo no universo web, onde as informações são velozes.
- E finalmente, nunca se esqueça: “quem detém a informação, detém o poder”.
Forte abraço e até a próxima.
Informações
- Publicação:
- 24 mar 2008 / 09:15 PM
- Categoria:
- Web, Webwriting
- Tags:
- tagged Web and Webwriting
- Comentários:
- 3 Comentário;
Minha empresa precisa ter um site?
Muito se tem discutido atualmente sobre a amplitude que a internet vem tomando na vida das pessoas. Ter um site, um blog, um podcast, um banner, um terreno no ciberspace parece que virou uma necessidade de primeira ordem. Todo mundo quer ter presença garantida na web. Seja com fotos, com e-mails, anúnicos ou qualquer artefato virtual. Todo mundo de alguma maneira tem um pezinho na rede. Meu avó de 72 anos quer aprender a navegar na web e começou pelo Orkut? Começou bem…!???! Será…???
As empresas não querem ficar de fora desta onda e veêm na internet a solução para seus problemas. Questões que na verdade existem muito antes do advento da rede, já estavam postas. Não se pode ver a web como a salvadora da pátria para todos os problemas de marketing e propoganda de uma empresa. Sem dúvida alguma, a internet é um grande veículo de comunicação de proporções até certo ponto ilimitadas. E isto tende a crescer.
Mas vamos raciocinar e exemplicar: o João é dono de um açougue no melhor ponto do bairro, mês passado pagou 1500,00 pratas para fazer um Outdoor na entrada do bairro para divulgar seu estabelecimento. O sujeito investe… No entanto, é sabido que o açouge do João não atende bem aos seus clientes e a higîene por lá é posta em dúvida, segundo dizem.
Poderia se dizer: bem que o João poderia ter gasto os R$ 1500,00 em um site simples para divulgar seus produtos. Será que mudaria alguma coisa? Esta é grande questão que se coloca. Um negócio não sobrevive simplesmente porque tem boa publicidade, boa divulgação. Um negócio precisa de outros fatores para se manter. O açougue do João precisa oferecer bons serviços para ser procurado e vender mais. Não adianta um outdoor gigante, um site fantástico e toda a publicidade do mundo, se os serviços não forem bons.
Em outras palavras de nada adianta um website, ou qualquer outro veículo de divulgação, se os serviços oferecidos não forem conscistentes e pautarem pela qualidade. O veículo de divulgação não pode ser tomado como o próprio produto, é uma confusão comum que precisa ser evita. A internet não é a solução dos problemas de nenhuma empresa e sim um veículo de divulgação de produtos e serviços prestados que precisam ser de boa qualidade.
Informações
- Publicação:
- 14 jan 2008 / 02:31 AM
- Categoria:
- Web
- Tags:
- tagged divulgação, Internet, site and Web
- Comentários:
- Sem Comentário;
Gerenciador financeiro on-line em web 2.0
Tá bom, eu sei que vão dizer…
Porque este cara está falando de Gerenciador financeiro, este blog não era de designer. Opss…
O que chama atenção neste projeto além de concepção simples, é o fato de ser um serviço de grande utilidade e sobretudo pela utilização de recursos em web 2.0.
O site intitulado Money Trackin é um gestor de finanças pessoais, que tem versão em português e não recolhe informações pessoais de seus usuários, além de possui espaço para troca de comentários e dicas entre os usuários cadastrados.
O sistema gera gráficos com recursos de web 2.0, além de possuir o recurso de “nuvem de tags”.
Boa pedida para quem quer organizar a vida financeira, além de servir de inspiração para os desenvolvedores que queiram se aventurar pelos recursos web 2.0.