Mateus Souza - Webdesigner » Magento

Como colocar favicon em seu website

Mateus Souza — Tue, 13 Oct 2009 18:39:15 +0000

Já postei este tutorial uma vez (aqui) mais este estava com alguns “bugs” e era restrito somente ao wordpress, então hoje decidi fazer este post sobre favicons, beneficios e como inserir favicons que funcione no IE(Internet Explorer) e em todos ou outros navegadores vai ser bem completinho:

O que é favicon?

Favicon nada mais é do que aquelas pequenas imagens que aparecem no navegador ao lado do endereço do site. Mais para maiores e melhores detalhes veja a descrição do Winkipédia:

Favicons (palavra derivada de favorite (favorito) e icon (ícone)) são pequenas imagens no formato *.ico com de cerca de 16×16 pixels que ficam guardados em um site para visualização pelo navegador. Em alguns navegadores como Internet Explorer até a versão 6, só exibem os favicons quando um site é adicionado aos favoritos. Neste caso, apenas no menu correspondente aos favoritos pode-se encontrar a imagem. Em outros navegadores como Firefox, Opera e Internet Explorer 7⁽⁺⁾, os favicons podem ser encontrados também nas abas e na barra de endereço.

Os favicons também tem teor de acessibilidade pois ajudam um usuário comum a identificar uma página quando ela está exibida em uma lista ou em uma barra de abas. Visando isto, muitos favicons são imagens simplificadas do logotipo da marca que representam.

Na ausência de um favicon, os navegadores exibem seu próprio ícone ou um ícone padrão como uma folha em branco.

Beneficios

Alguns beneficios que podemos conquistar com o uso de uma favicon são os listados abaixo:

É otimo para marcar seu site tornando a localização deste mais fácil e de brinde tem até um destaque a mais ;
Seu site vai ganhar uma aparência mais profissional e exclusiva que pode levar a mais links para seu site melhorando a parte do SEO (aqui já entra PR).

Preparando o terreno

Como tudo o que vamos fazer tem um requisito este não deixa de ser diferente. Para este processo precisamo de uma imagem no formato .ico com 16×16 pixels que pode ser feita usando o photoshop ou fireworks ou o seu programa de preferência. Para o processo que explicarei agora recomendo que faça a imagem em um formato grande uns 100×100 pixels deve ser o suficiente.

Com a imagem em mãos acesse este link e faça o upload de sua imagem, não precisa mudar nada, mais se quiser se aventurar fique a vontade…. Observe que logo abaixo você terá um preview de sua logo, algo parecido com isso:

Observe que há ainda algumas partes que ficaram imperfeitas…para isso temos um pouco acima deste preview um editor de favicons. Ajuste certinho sua favicon e faça o download.

Se você não quer fazer uma favicon, no mesmo site da www.favicon.cc há varias favicons grátis para download.

Agora começa a brincadeira…

Com a favicon definida vamos partir pra o upload e a programação que tambem é bem fácil. Upe sua imagem no local que deseja, recomendo que seja na pasta raiz de seu site ou se você usa o WordPress, Joomla ou Magento veremos o processo logo mais.

Como inserir uma favicon que funcione no Internet Explorer

Um do maiores problemas não só com favicon mais com tudo o que vamos fazer é bendito IE. Graças a Deus até para o IE temos uma solução…o principal problema é que o IE “não consegue entender” que uma favicon no formato png ou gif é realmente um favicon, por isso que mais acima ja fizemos o processo para deixa no formato .icon

Para o código temos que ter 2 linhas:

Porque 2 linhas? elas fazem exatamente a mesma coisa mais como dizem uma é para o Internet Explorer e a outra é para o Firefox(firefox aqui se refere aos demais navegadores). Copie e cole este código antes de fechar a tag (

Como inserir favicon no WordPress

Não tem segredo:

Primeiramente Salve a favicon na pasta do seu tema.ex:
../wp-content/themes/seutema/

Agora temos que editar o arquivo header.php do tema que está em uso :

Este código em php pegara o caminho do template e incluira no href, produzirá algo semelhante a isto:

Agora salve, e faça o upload novamente para o seu servidor se você não editou diretamente. Pronto.

Como Inserir ou alterar a favicon do Joomla

Para o Joomla o processo é bem parecido. Faça o upload na pasta de seu tema ../templates/seutema/ e cole o código a seguir no arquivo index.php:

Observe se já não existe um código parecido, se tiver apenas teste, se já estiver com a favicon certa nem é necessário editar o arquivo.

Obs. Alguns site falam que é necessário fazer o upload da favicon na pasta imagens também…creio que este processo seja necessário para a versão 1.0 do Joomla. Por via das dúvidas recomendo que upe sua favicon lá também.

Como Inserir ou alterar a favicon de sua loja Magento

E pra acabar mais não menos importante vamos para o processo em um loja Magento. Aqui o processo é bem mais simples apenas faça o upload para a pasta raiz de sua loja e também para a pasta de seu template. Observe os caminhos:

Se você usa o template default, sua favicon está localizada em:
/skin/frontend/default/default/favicon.ico

Se você usa um template personalizado sua favicon está localizada emt:
/skin/frontend/default/SEU_ TEMA/favicon.ico

Teste e confira se não deu nada de errado.

Considerações Finais

É possivel que já tenha uma favicon nos diretorios listados neste tutorial, se houver apenas substitua por sua nova favicon.

Pode acontecer de sua favicon não ser alterada no mesmo momento da alteração devido ao cache de seu website. Limpe-o ou espere algum tempo e teste novamente. Uns F5 também ajuda(na verdade é Ctrl+F5 ).

Até a próxima.

Alterando ou Adicionando o logo em Sua Loja Magento – Tutorial Magento

Mateus Souza — Thu, 24 Sep 2009 12:16:16 +0000

Bom pessoal hoje o post num é lá aquela programação toda, é mais pra mim dar inicio aos posts falando sobre o Magento. Vamos lá.

Alterando ou Adicionando o logo em Sua Loja Magento

Para isto podemos usar 3 formatos de imagens, que são os mais usados, JPEG, GIF e PNG, recomendo o PNG mais fica a sua escolha.

Usando GIF
Se usarmos o gif o processo é mais simples, basta fazer o upload e subistituir a imagem que esta localizada em skin/frontend/default/default/images/logo.gif usando o FTP.

Usando PNG e JPG
O primeiro passo é upar a imagem em skin/frontend/default/default/images/. Logo após acessamos o admin do magento http://www.oenderecodasualoja.com.br/admin e seguimos este caminho: Sistema » Configurações, selecione o link de menu Design (está a esquerda da página) e vá mais abaixo na parte Header do acorddion como na figura abaixo:

Clique na imagem para ver em tamanho original

Para o segundo passo, devemos colocar o nome da imagem que upamos no campo Logo Image Src; recomendo que renomeie com o nome de sua loja para os motores de busca, é mais questão de SEO.

Considerações Finais
Este pequeno tutorial foi desenvolvido tendo em mente o template padrão do Magento, por isso a localização skin/frontend/default/default/images/, se você usa o template blue que também já vem no magento o caminho é o mesmo: skin/frontend/default/blue/images/. Uma maneira de saber o caminho da logo é clicar com o botão auxiliar na foto e escolher a opção exibir imagem ou exibir imagem de fundo.

Até a próxima

Magento – Ecommerce Open Source

Mateus Souza — Fri, 03 Oct 2008 20:55:11 +0000

Hoje vou falar um pouco sobre o Magento, que conheci por uma indicação do Willian Robert(meu ex-professor de web)e que gostei pra caramba.Chega de papo furado e vamos ao Magento:
Uma plataforma de comercio desenvolvida pela Varien , que será e ja é uma solução open source completamente escalável, de fácil integração e fácil customização.
Com este CMS é possivel criar varias lojas em um mesmo website alterando a aparencia, o conteudo e tal, realmente muito bom…

A partir de hoje vou falar mais e mais sobre ecommerce, que tem sido muito procurado por muitos clientes e se você dominar esse sistema, ganhara uma graninha numa boa.

Magento Tour
Dois videos mostrando um pouco mais sobre o magento, vale a pena conferir

Tour pela loja

Tuor pelo Painel de Administração

Veja aqui a loja ja funcionando.

Requisitos:
Alguns requisitos que o servidor em que este CMS estara deverá possuir(está em inglês mais da pra entender):

Supported Operating Systems:
- Linux x86, x86-64
Supported Web Servers:
- Apache 1.3.x
- Apache 2.0.x
- Apache 2.2.x
Supported Browsers:
- Microsoft Internet Explorer 6 and above
- Mozilla Firefox 2.0 and above
- Apple Safari 2.x
- Adobe Flash browser plug-in should be installed
PHP Compatibility:
- 5.2.0 and above
- Required extensions:
  - PDO_MySQL
  - simplexml
  - mcrypt
  - hash
  - GD
  - DOM
  - iconv
  - SOAP (if Webservices API is to be used)
- Safe_mode off
- Memory_limit 32M or more
MySQL:
- 4.1.20 or newer
- InnoDB storage engine
SSL:
- If HTTPS is used to work in the admin, SSL certificate should be valid. Self-signed SSL certificates are not supported
Server – hosting – setup:
- Ability to run scheduled jobs (crontab) with PHP 5
- Ability to override options in .htaccess files

Para fazer download é necessario se cadastrar(melhor do que pagar )e para isso se cadastre aqui.Depois de cadastrado faça o download e usa a vontade.

Tutoriais:
Alguns tutoriais que vem direto do desenvolvedor para você ir praticando enquanto aguarda mais um post meu, heheheh(todos estão em inglês).

Clique aqui e veja os tutoriais.Em breve traduções e mais tutoriais para lhe ajudar.