Archive for the ‘Artigos’ Category


Símbolo do São Paulo F.C feito com CSS3

Símbolo do São Paulo F.C feito com CSS3

Esse é meu primeiro experimento feito com CSS3, como todos sabem só os navegadores mais novos aceitam, destaque para Chrome que além de ficar certo, aceita as animações e para o Firefox que só não aceita as animações, por enquanto! ^^

Tenho certeza que nem todos vendo esse post são São Paulinos, mas levem pelo lado profissional da coisa, hahaha!

Enfim, espero que isso ajude de alguma forma vocês!

Ver demo de Símbolo do São Paulo F.C feito com CSS3

Download de Símbolo do São Paulo F.C feito com CSS3



O que é White Hat, Gray Hat e Black Hat (SEO) ?

White Hat, Gray Hat e Black Hat (SEO) - O que são? Qual devo usar?

Existem diversas técnicas de SEO. Mas algumas dessas técnicas, apesar de melhorar o posicionamento da sua página, são consideradas desonestas pelos sites de busca e passíveis de punição e/ou banimento. Os 3 tipos mais conhecidos são o White Hat SEO, o Grey Hat SEO e o Black Hat SEO.
(mais…)


O que é Pagerank?

PageRank

PageRank: É um sistema que foi desenvolvido em 1998 pelos fundadores do Google, onde um valor numérico é calculado a partir do número de links e da importância que estes representam quando levados a uma determinada página.
(mais…)


O que é Sitemap.xml?

Sitemap.xml - O que é? Pra que serve?

Sitemap: O Sitemap é feito através de um arquivo XML, geralmente chamado de sitemap.xml, que fica na raiz do seu servidor. O arquivo pode ser criado manualmente ou através de programas e ferramentas on-line, ele tem a função de informar quais as páginas existentes em seu site, diminuindo a possibilidade dos robôs do Google e Yahoo “esquecerem” de indexar determinadas páginas, tendo a possibilidade de priorizar as páginas através de uma especificação conhecida como hint.
(mais…)


O que é Robots.txt?

O que é Robots.txt

Robots.txt: É um arquivo que você deixa em seu servidor com várias linhas de comando que definem a política de acesso dos robôs de busca, ele possui 3 funções que permitirão ou não o acesso a determinados diretórios ou páginas de um site.

- User-agent: diz quais robôs devem seguir as regras indicadas no Robots.txt.
- Disallow: diz aos mecanismos qual diretório ou página deve ser impedida de ter o conteúdo verificado.
- Allow: diz aos robôs qual diretório ou página deve ter o conteúdo verificado. É útil quando se quer indexar um diretório que está dentro de outro direito não indexada.

Exemplo:
User-agent: *
Disallow: /portfolio/
Allow: /portfolio/websites/
Disallow: /admin/

Nesse exemplo, todos os robôs de buscar não irão indexar os diretórios /portfolio/ e /admin/, mais irão indexar o diretório /websites/ que está dentro do diretório não indexado /portfolio/.


O que são Metatags?

Todas as Metatags

Essas são todas as metatags que eu conheço e já vi sendo utilizadas, se você sabe alguma que não tem nessa lista e/ou uma forma de melhor explicar as que aqui estão, comente…

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″/>
Tipo dos caracteres do site, utf-8 é o padrão da web.

<meta http-equiv=”Content-Language” content=”pt-br, Portuguese”/>
Idioma que o site foi feito, muito importante para o Google, pois identifica e traduz mais facilmente.

<meta http-equiv=”X-UA-Compatible” content=”IE=5″ />
Diz ao navegador em qual modo ele deve renderizar seu site, ideal para testes com CSS, Javascript e etc…
Content options:
IE=5 – renderiza em modo IE5 / IE6
IE=7 – renderiza em modo IE7
IE=8 – renderiza em modo IE8
IE=edge – renderiza com a ultima versão disponível do Internet Explorer, quando sair a versão 9 não precisaríamos trocar o content para IE=9.

<meta http-equiv=”expires” content=”mon, 10 nov 2010 23:00:00 GMT”/>
Data de expiração do site. A data tem que ser adicionada no formato RFC850.

<meta http-equiv=”pragma” content=”no-cache”/>
<meta http-equiv=”Cache-control” content=”no-cache”/>

Faz com que sua página não fique armazenada no computador do usuário, é útil se a página muda regularmente.

<strong><meta http-equiv=”pics-label” content=”text”/>
Essa metatag possibilita você a adicionar um valor para as fotos de seu site, por exemplo, “violência”, “erótico”, “infantil”, “para todas as idades” e etc.

<meta http-equiv=”refresh” content=”30; ,URL=http://www.wallaceeruci.com.br/web-design-blog”/>
Redireciona sua página, onde 30 representa os segundos e URL a página a ser redirecionada.

<meta name=”title” content=”Wallace Erick – Todos os tipos de Metatags”/>
Titulo do seu site, extremamente importante para os robôs de busca, não se esqueça também de por o mesmo título na tag <title>.

<meta name=”description” content=”Todos os tipos de metatags, explicadas e detalhadas”/>
Breve descrição do site, aquela que vai aparecer em baixo do título nos buscadores, usar no máximo 150 caracteres.

<meta name=”keywords” content=”wallace, erick, portfolio, metatags, design, web, blog, seo”/>

Utilize umas 10 palavras no máximo, já é o suficiente, o Google costuma ignorar os sites com palavras em excesso.

<meta name=”classification” content=”lista de keywords aqui”>
<meta name=”subject” content=”lista de keywords aqui”>

As palavras-chave contidas dentro destas metatags são apenas um subconjunto do que já está na keywords. Eu suponho que a “classificação” e “assunto” Realmente, não vale se preocupar e não precisam de ser considerados para o redesenho do site.)

<meta name=”seoconsultantsdirectory” content=”5″/>
Provavelmente uma das mais poderosas metatags, a utilização do SEO Consultants Directory garante que os motores de busca iram indexar suas páginas da Web em conformidade. O valor pode ser ajustado de 1 à 5, com um valor de 5 de garantir o máximo de crédito a partir de motores de busca e diretórios.

<meta name=”pagerank™” content=”10″/>

Também uma das mais importantes metatags. Ele garante que suas páginas serão altamente rankiadas no Google. O valor pode ser definido como qualquer valor de 1-10, com 10 sendo o montante máximo de pagerank permitido.

<meta name=”keyphrases” content=”design, tecnologia, eletronic”/>
Tem a mesma funcionalidade das keywords, porém pode ser utilizada no meio do código HTML.

<meta name=”aesop” content=”internet”>
O ramo de seu site:
Content Options: personal, interactive, multimedia, links, information, sales e etc…

<meta name=”abstract” content=”portfolio, wallace, erick, design, web”>
Breve resumo da pagina. Use de 5 à 7 palavras, bem segmentadas.

<meta name=”publisher” content=”http://www.wallaceerick.com.br”/>
Endereço do site

<meta name=”rating” content=”general”/>
Indica ao Google o público-alvo do o site.

<meta name=”generator” content=”Dreaweaver CS3″/>
Programa usado para desenvolver o site.

<meta name=”creation_Date” content=”06/15/2009″ />
Data de criação do site no formato  mm/dd/aa.

<meta http-equiv=”Window-target” content=”_self”/>
Esta é apenas uma maneira de limpar o navegador dizendo o que fazer com a janela.

<meta name=”author” content=”Wallace Erick”/>
Desenvolvedor do site.

<meta name=”reply-to” content=”wallace_erick@hotmail.com”/>
E-mail do desenvolvedor.

<meta name=”copyright” content=”© 2009 Wallace Erick”/>
Direitos autorais da página.

<meta name=”identifier-url” content=”http://www.wallaceerick.com.br”/>
<meta name=”url” content=”http://www.wallaceerick.com.br”/>

Endereço principal para o Google indexar.

<meta name=”distribution” content=”global”/>
Define o nível ou o grau de distribuição da sua página e como ela deve ser classificada em relação aos métodos de distribuição sobre a w3c. Atualmente, existem apenas três formas de distribuição:
Content Options:
Global:
indica que a página está destinada para todos.
Local: destinados à distribuição local de seu documento.
UI: Uso interno, não destinadas à distribuição pública.

<meta name=”revisit” content=”10 days”/>
<meta name=”revisit-after” content=”10 days”/>

Indica os dias para que os robôs de busca voltem à sua página para indexar novamente. Não coloque um tempo muito curto, os buscadores podem ignorar suas páginas.

<meta name=”robots” content=”all”/>
Indexação dos robôs de Busca.
Content options: all, index, follow, none, noindex, nofollow, noarchive, nosnippet.

<meta name=”googlebot” content=”all, index, follow, none, noindex, nofollow, noarchive, nosnippet”/>
Mesma funcionalidade dos robots, esse é mais específico para o Google. Se não tiver certeza do uso de cada uma, certifique-se de que a palavra “all” esteja em primeiro.

<meta name=”MSSmartTagsPreventParsing” content=”true”/>
Evita que roubem hist de seu site.

<meta http-equiv=”imagetoolbar” content=”no” />
Elimina a toolbar do IE.

<meta name=”serps” content=”1, 2, 3, 5, 11, 14, 15, ATF”/>
Outros valores devem vir após os números. Você deve listar os valores numéricos na ordem em que você deseja ser classificado. Por exemplo, se SERP 1 está ocupado, então você irá cair de volta para 2. Se SERP 2 estiver ocupado, você irá cair para o 3, assim por diante.

<meta http-equiv=”Page-Enter” content=”blendTrans(Duration=1)”/>
<meta http-equiv=”Page-Exit” content=”blendTrans(Duration=1)”/>
<meta http-equiv=”Site-Exit” content=”blendTrans(Duration=1)”/>

Fade de transição quando troca a página do site, só funciona para IE.


SEO – Search Engine Optimization

SEO - Search Engine Optimization

O que é SEO?
SEO significa Seach Engine Optimization, em português representa a Otimização de Sites, para ser melhor compreendido pelas ferramentas de busca.
(mais…)


Flash Page Flip

Pageflip

PageFlip é o nome do tão famoso ficheiro em flash que simula uma revista on-line, é muito usado em portfólios. Ele é OpenSource, ou seja, livre para todos usarem. No link abaixo, você só faz o upload do seus arquivos que ele gera o PageFlip sozinho pra você.

Saiba Mais…


10 Animações usando jQuery

10 Animações usando jQuery

Esse artigo é destinado a WebDesigners iniciantes, para visualizar cada animação basta procurar o link ‘demo’ em cada tutorial. Uma das animações mais interessantes é o ‘Slide Painel’ que exibe uma janela da parte superior para a inferior quando um botão é clicado. Todas as animações podem ser baixadas.

Saiba Mais…


Texturas de alta qualidade

Texturas de alta qualidade

Existem muitos sites na Internet onde você pode encontrar texturas para download, mas são poucos os que oferecem texturas de qualidade. Para facilitar sua vida a equipeda neosite selecionou sites onde você encontrará texturas de qualidade profissional. Guarde este endereço porque um dia você pode precisar delas para seus trabalhos no Photoshop.
(mais…)