Instalando o Magento automaticamente usando o Xampp como servidor

Esse post é para ser daqueles do tipo rápido e objetivo.

Situação:

  • Quero instalar o Magento em minha máquina local windows;
  • Quero instalar o Magento em minha máquina local windows usando o Xampp como servidor;
  • Quero instalar o Magento em minha máquina local windows automaticamente com ele próprio gerando todas as tabelas usando a funcionalidade de configuração passo a passo;

Alguns problemas que você pode ter:

  • O Magento não roda no endereço padrão do Xampp ou seja: “http://localhost” sendo necessário a criação de um alias para o localhost no arquivo host do windos em : C:\WINDOWS\system32\drivers\etc \hosts (Não vou entrar em detalhes para este caso afinal a idéia do post é que você use a própria configuração padrão do Xampp para o Magento executar sua instalação automaticamente);
  • Você tenta setar a localização, fuso horário e moeda e nada acontece;
  • Você pula para o próximo passo que é as configurações de banco submete a página e nada acontece também;
  • Você talvez consiga instalar mas para na tela de login do administrador e não sai dali.

Vamos lá, aqui está a solução pra você que quer instalar o Magento em uma máquina local windows automaticamente, com ele próprio gerando todas as tabelas usando a funcionalidade de configuração passo a passo e usando o Xampp como servidor(Ao menos pra mim funcionou).

E ainda apenas para efeitos de informação estou usando a versão 2.5 do Xampp e 1.3.2.1 do Magento e o resultado deste post é a compilação de um estudo rápido e algumas bases de conhecimento incluindo o Fórum de discussão do próprio Magento.

Vamos a prática:

1o – Baixe a última versão do Magento no site;

2o – No diretório físico padrão do Xampp no meu caso usei: D:\xampp\htdocs\crieumdiretorioparasualoja;

3o – Descompacte a versão do Magento que você baixou neste diretório, provavelmente a estrutura ficará da seguinte forma:

magento1

4o – Vá até o browser e acesse a URL com o diretório criado, você verá algo da seguinte maneira:

No meu caso criei um diretório chamado “lojamodelo”: (Digite apenas http://localhost/seudiretorio isto já é suficiente)

magento2

5o – Para o próximo passo você precisará estar com acesso a internet, clique no botão “Start the download process”, todos os arquivos necessários restantes serão baixados para o seu diretório, aguarde até que todos os arquivos sejam baixados

magento3

Baixado todos os arquivos siga para o próximo passo clicando no botão “Continue Magento Installation”, deverá exibir a seguinte página:

magento4

6o – Antes de prosseguir, deixe o navegador nesta página e efetue ou certifique-se que os seguintes passos estejam ok:

- Certifique de que o InnoDB no MySQL esteja habilitado, por padrão no Xampp costuma vir desabilitado, para isto faça o seguinte:

Acesse a pasta bin do mysql. No caso do Xampp dentro do próprio diretório do Xampp, no meu caso: D:\xampp\mysql\bin

Acesse o arquivo my.cnf (Ele é parecido com um atalho, abra um Bloco de Notas ou Notepad++ e arraste o arquivo para dentro dele)

magento5

Localize a linha skip-innodb e comente-a adicionando o caractere “#” no ínicio da linha e descomente as demais linhas excetos as linhas que possuirem um espaço entre o # e o inicio do texto.

(Ex: # Uncomment the following if you are using InnoDB tables)

O trecho de código deverá ficar da seguinte forma, não esqueça de salvar o arquivo:


#skip-innodb
# Uncomment the following if you are using InnoDB tables
innodb_data_home_dir = D:/xampp/mysql/data/
innodb_data_file_path = ibdata1:10M:autoextend
innodb_log_group_home_dir = D:/xampp/mysql/data/
innodb_log_arch_dir = D:/xampp/mysql/data/
# You can set .._buffer_pool_size up to 50 - 80 %
# of RAM but beware of setting memory usage too high
set-variable = innodb_buffer_pool_size=16M
set-variable = innodb_additional_mem_pool_size=2M
# Set .._log_file_size to 25 % of buffer pool size
set-variable = innodb_log_file_size=5M
set-variable = innodb_log_buffer_size=8M
innodb_flush_log_at_trx_commit=1
set-variable = innodb_lock_wait_timeout=50

7o – Agora resolveremos o problema do Magento rodar no localhost padrão da máquina.

O problema ocorre pois a instalação é local e o Magento tem algumas rotinas de verificação de host, basta desativar algumas linhas ou alterar o hosts que irá funcionar corretamente, siga os seguintes passos para solucionar o problema.

  • Vá até o diretório onde você instalou o Magento, provavelmente agora estará com vários arquivos e pastas amais haja vista 5o passo ter sido executado;
  • Procure o arquivo Varien.php em: (No meu caso)
    D:\xampp\htdocs\lojamodelo\app\code\core\Mage\Core\Model\Session\Abstract\Varien.php
  • Abra o arquivo e encontre as seguintes linhas:

Próximo a linha 70


// set session cookie params
session_set_cookie_params(
$this->getCookie()->getLifetime(),
$this->getCookie()->getPath()//,
$this->getCookie()->getDomain(),
$this->getCookie()->isSecure(),
$this->getCookie()->getHttponly()
);

Comente os 3 filtros de checkagem para dominio, segurança e http

O trecho de código deverá ficar da seguinte forma:


// set session cookie params
session_set_cookie_params(
$this->getCookie()->getLifetime()//,
$this->getCookie()->getPath()//,
// $this->getCookie()->getDomain(),
// $this->getCookie()->isSecure(),
// $this->getCookie()->getHttponly()
);

Salve o arquivo!

8o – Vamos voltar ao navegador, provavelmente você estará na página com o aceite do contrato e a continuação da instalação passo a passo – Vide 5o passo.

9o – Aceite os termos de uso clicando no Checkbox e avançe para o próximo passo;

10o – Selecione os dados de localização, país, fuso horário e moeda;

magento1

11o – Adicione os dados de banco, como você estará instalando local via Xampp, é bem provável que fique esta página fique da seguinte forma:

Antes de inserir o nome do banco certifique-se de que você tenha criado uma base de dados vazia via phpmyadmin (http://localhost/phpmyadmin/) conforme tela abaixo:

magento1

Caso já tenha criado uma base de dados vazia continue o passo a passo inserindo no campo””Database Name” o nome do banco que você criou.

magento1

12o – Após submeter esta página, é bem provável que ela demore um bom tempo para responder pois todas as tabelas estarão sendo criadas no banco neste momento, aguarde até que a fase seja concluida não apavore, simplesmente espere;

Após este passo a seguinte tela aparecerá:

magento1

Cadastre os dados conforme solicitado pode deixar o campo “Encryption Key” vazio. Submeta a página, o Magento irá gerar uma chave criptografada, certifique-se de deixar estes dados anotados em algum lugar para você não ter problemas futuros.

A seguinte tela será exibida e o Magento estará rodando perfeitamente local em sua máquina sem necessidade de virtualizar o localhost.

magento1

Nagegue à vontade tanto na Loja quanto na Área administrativa.

Galera caso eu tenha tropeçado em alguma informação ou me equivocado em algum ítem ou ainda você queira agregar em algo por favor compartilhe conosco, comente a sua observação para postarmos um update no post.

Espero ter ajudado.

Ganhe um iMac fácil!

Olá pessoal voltando e divulgando uma promoção em massa interessante!

O site meuInglês criou uma promoção muito legal, o nome: Traga seus amigos e ganhe um iMac.

É simples! Convide seus amigos para o meuInglês, quem trouxer mais amigos, ganha um iMac.

Os três usuários que trouxerem o maior número de amigos para o meuInglês ganham prêmios:

1º Lugar: iMac

2º Lugar: iPod Touch
3º Lugar: iPod Shuffle

Para participar você deve se cadastrar no meuInglês, caso ainda não seja cadastrado entre lá e não perca tempo!

Link para o site: http://www.meuingles.com/quero-um-imac?usr=13378

Plugin advlink: Ensira atributos rel, hreflang, class, ID, nos links dos seus posts sem precisar ir no código

Primeiro você deve estar se perguntando: Porque esse cara sumido resurgiu da luz (das trevas é fria) e começou a escrever sem parar? A respota é simples estou de mini-férias(1 semaninha só pra respirar) e estou me disciplando a escrever periodicamente, com o lançamento do novo design do blog, o segundo, que será lançado no dia 13/10/2008.

Mas vamos lá. Antes de iniciar a leitura deste post leia este primeiro http://diegofranco.net/archives/tinymce-o-editor-do-wordpress .

Conforme prometido vou falar sobre o ADVLINK um plugin para o editor tinyMCE usado no popular WordPress, suas funcionalidades e como instalá-lo.

Como eu disse no parágrafo acima o ADVLINK é um plugin para o tinyMCE, que simplesmente te poupa o tempo de ir até o código inserir atributos nos seus links, simplesmente alterando o popup padrão de inserção de links do WordPress por uma popup avançada, que te possibilita inserir praticamente todos os atributos que a tag <a> possui.

Abaixo um exemplo do popup padrão do wordpress quando você clica no botão de inserção de links da barra de ferramentas do editor:

Botão de inserção de link do editor:

tinyMCE Editor - botão adiciona link

Popup padrão de inserção de links do editor:

tinyMCE - popup padrão inserção de link wordpress

E logo abaixo o exemplo de como ficará a popup após a instalação do plugin.

Basicamente a popup ganhará 4 abas, são elas:

  • Geral;
  • Popup;
  • Eventos;
  • Avançada.

Aba – Geral

advlink Aba Geral

Aba – Popup

advlink Aba popup

Aba – Eventos

advlink Aba eventos

Aba – Avançado

advlink aba avançado

Nem precisa comentar os recursos que você irá ganhar não é? Além da facilidade de personalizar as abas como você queira.

Mini guia de instalação do plugin ADVLINK:

Algumas coisas que você precisa saber antes de instalar:

  • As mudanças nos arquivos que irei sugerir são por sua conta e risco, por isso se você não tem muita prática com php e javascript, chame aquele amigão seu pra te dar uma força;
  • Testei em uma versão do WordPress 2.3 local e não funcionou;
  • A instalação funcionou perfeitamente no WordPress 2.6 com as modificações que eu fiz;
  • FAÇA BACKUP DE TUDO QUE VOCÊ FOR ALTERAR;
  • Eu não tenho tempo pra te ajudar por isso vou tentar ser bem didático pra que não ocorra dúvidas;
  • No final deste post estarão todas as referências  que usei para a instalação do plugin e o que não tinha na documentação eu deixarei muito bem explicado;
  • Não irei entrar em detalhes sobre a funcionalidade dos arquivos, afinal de contas alguma coisa você deverá estudar não é;
  • Fique tranquilo o mínimo que irá acontecer será os botões do seu editor sumir, e o máximo nem eu quero saber;

O que você precisa baixar?

Baixe a pasta do plugin advlink: http://diegofranco.net/files/advlink.rar

Estou disponibilizando está pasta aqui no meu site com algumas modificações necessárias já feitas, caso você queira pegar um atalho este é o caminho;

Se quiser baixar a pasta original você terá primeiro que baixar o editor tinyMCE completo  no site do desenvolvedor: http://tinymce.moxiecode.com/download.php;

Após baixar a pasta completa do tinyMCE, descompacte-a vá até a pasta:

tinymce_3_2_0_2\tinymce\jscripts\tiny_mce\plugins

lá você encontrará a pasta de do plugin “advlink”.

Quais arquivos você terá que subir que você não tenha no WordPress?

Você deverá subir a pasta do plugin para o seguinte diretório:

wp-includes/js/tinymce/plugins/

Quais arquivos você irá alterar?

Serão quatro, são eles:


wp-includes/js/tinymce/tiny_mce_config.php
wp-includes/js/tinymce/langs/wp-langs.php
wp-includes/js/tinymce/plugins/advlink/link.htm - (Somente se tiver baixado do site do desenvolvedor)
wp-includes/js/tinymce/plugins/advlink/js/advlink.js -  (Somente se tiver baixado do site do desenvolvedor)

Alteração no arquivo –  tiny_mce_config.php ( wp-includes/js/tinymce/tiny_mce_config.php )

Entre as linhas 60 e 80 você encontrará a seguinte linha de código:

$plugins = array( 'safari', 'inlinepopups', 'autosave', 'spellchecker', 'paste', 'wordpress', 'media', 'fullscreen' );

Os nome acima entre as aspas talvez não sejam os mesmos que estão na sua linha de código, não se preocupe a única coisa que você deverá fazer aqui é acrescentar a palavra “advlink”, no caso acima ficaria da seguinte forma:

$plugins = array( 'safari', 'inlinepopups', 'autosave', 'spellchecker', 'paste', 'wordpress', 'media', 'fullscreen', 'advlink' );

Alteração no arquivo –  wp-langs.php ( wp-includes/js/tinymce/langs/wp-langs.php )

Logo abaixo deste trecho:

$strings = 'tinyMCE.addI18n({' . $language . ':{
common:{

Acrescente as seguintes linhas:

general_tab:"' . mce_escape( __('General') ) . '",
popup_tab:"' . mce_escape( __('Popup') ) . '",
events_tab:"' . mce_escape( __('Events') ) . '",
advanced_tab:"' . mce_escape( __('Advanced') ) . '",
title:"' . mce_escape( __('Insert/edit link') ) . '",
url:"' . mce_escape( __('Link URL') ) . '",
target:"' . mce_escape( __('Target') ) . '",
titlefield:"' . mce_escape( __('Title') ) . '",
is_email:"' . mce_escape( __('The URL you entered seems to be an email address, do you want to add the required mailto: prefix?') ) . '",
is_external:"' . mce_escape( __('The URL you entered seems to external link, do you want to add the required http:// prefix?') ) . '",
list:"' . mce_escape( __('Link list') ) . '",
general_tab:"' . mce_escape( __('General') ) . '",
popup_tab:"' . mce_escape( __('Popup') ) . '",
events_tab:"' . mce_escape( __('Events') ) . '",
advanced_tab:"' . mce_escape( __('Advanced') ) . '",
general_props:"' . mce_escape( __('General properties') ) . '",
popup_props:"' . mce_escape( __('Popup properties') ) . '",
event_props:"' . mce_escape( __('Events') ) . '",
advanced_props:"' . mce_escape( __('Advanced properties') ) . '",
popup_opts:"' . mce_escape( __('Options') ) . '",
anchor_names:"' . mce_escape( __('Anchors') ) . '",
target_same:"' . mce_escape( __('Open in this window / frame') ) . '",
target_parent:"' . mce_escape( __('Open in parent window / frame') ) . '",
target_top:"' . mce_escape( __('Open in top frame (replaces all frames)') ) . '",
target_blank:"' . mce_escape( __('Open in new window') ) . '",
popup:"' . mce_escape( __('Javascript popup') ) . '",
popup_url:"' . mce_escape( __('Popup URL') ) . '",
popup_name:"' . mce_escape( __('Window name') ) . '",
popup_scrollbars:"' . mce_escape( __('Show scrollbars') ) . '",
popup_statusbar:"' . mce_escape( __('Show status bar') ) . '",
popup_toolbar:"' . mce_escape( __('Show toolbars') ) . '",
popup_menubar:"' . mce_escape( __('Show menu bar') ) . '",
popup_location:"' . mce_escape( __('Show location bar') ) . '",
popup_resizable:"' . mce_escape( __('Make window resizable') ) . '",
popup_dependent:"' . mce_escape( __('Dependent (Mozilla/Firefox only)') ) . '",
popup_size:"' . mce_escape( __('Size') ) . '",
popup_position:"' . mce_escape( __('Position (X/Y)') ) . '",
id:"' . mce_escape( __('Id') ) . '",
style:"' . mce_escape( __('Style') ) . '",
classes:"' . mce_escape( __('Classes') ) . '",
target_name:"' . mce_escape( __('Target name') ) . '",
langdir:"' . mce_escape( __('Language direction') ) . '",
target_langcode:"' . mce_escape( __('Target language') ) . '",
langcode:"' . mce_escape( __('Language code') ) . '",
encoding:"' . mce_escape( __('Target character encoding') ) . '",
mime:"' . mce_escape( __('Target MIME type') ) . '",
rel:"' . mce_escape( __('Relationship page to target') ) . '",
rev:"' . mce_escape( __('Relationship target to page') ) . '",
tabindex:"' . mce_escape( __('Tabindex') ) . '",
accesskey:"' . mce_escape( __('Accesskey') ) . '",
ltr:"' . mce_escape( __('Left to right') ) . '",
rtl:"' . mce_escape( __('Right to left') ) . '",
link_list:"' . mce_escape( __('Link list') ) . '",
popup_return:"' . mce_escape( __('Insert - return false') ) . '",

Alteração no arquivo –  link.htm ( wp-includes/js/tinymce/plugins/advlink/link.htm  )

Retire o seguinte trecho “advlink_dlg.” inclusive o ponto de todas as variáveis de tradução. Abaixo um exemplo antes e depois da modificação.

Antes:

{#advlink_dlg.title}
{#advlink_dlg.general_tab}
{#advlink_dlg.popup_tab}
{#advlink_dlg.events_tab}
{#advlink_dlg.advanced_tab}

Depois:

{#title}
{#general_tab}
{#popup_tab}
{#events_tab}
{#advanced_tab}

Alteração no arquivo –  advlink.js ( wp-includes/js/tinymce/plugins/advlink/js/advlink.js  )

Altere o seguinte trecho de código:

html += '<option value="_self">' + tinyMCEPopup.getLang('advlink_dlg.target_same') + '</option>';
html += '<option value="_blank">' + tinyMCEPopup.getLang('advlink_dlg.target_blank') + ' (_blank)</option>';
html += '<option value="_parent">' + tinyMCEPopup.getLang('advlink_dlg.target_parent') + ' (_parent)</option>';
html += '<option value="_top">' + tinyMCEPopup.getLang('advlink_dlg.target_top') + ' (_top)</option>';

Para este:

html += '<option value="_self">' + tinyMCEPopup.getLang('target_same') + '</option>';
html += '<option value="_blank">' + tinyMCEPopup.getLang('target_blank') + ' (_blank)</option>';
html += '<option value="_parent">' + tinyMCEPopup.getLang('target_parent') + ' (_parent)</option>';
html += '<option value="_top">' + tinyMCEPopup.getLang('target_top') + ' (_top)</option>';

Está quase pronto, logicamente depois de ter feito backup de tudo e logicamente de ter salvo as modificações suba todos os arquivos para os seus respectivos diretórios.

O que você irá excluir?

EXCLUA um arquivo compactado em gzip que estiver no diretório:

wp-content/uploads/js_cache/

que deve ser algo parecido com isto: tinymce_0aag3dg84fr6c7dgf532b9t5a277g4d0497.gz ( Se tudo der certo outro será gerado no lugar ).

Prontinho! Vá até o WordPress na página “Escrever um novo post” ou “Write new post”, adicione qualquer palavra no editor, selecione-a e clique no botão adicionar link na barra de ferramentas do próprio editor, a popup avançada será carregada.

É isso pessoal espero ter colaborado, e logicamente espero que dê tudo certo, se você encontrar um caminho mais curto para a instalação me avise para colocar um update aqui, ou, mesmo que eu não tenha tempo para ajudar não deixe de comentar aqui qualquer problema, pode ser que seja simples, e por meio do próprio comentário eu responda a sua questão.

Referências

Obtendo o hexadecimal de uma cor RGB no Corel Draw

Ainda não baixei o Corel X4 portanto este post vale para o Corel X3

Sei que muitos tem o costume de desenhar para a Web usando o Corel, creio que não seja tão produtivo e que ainda com certeza não é a ferramenta ideal para tal, mas cada um trabalha com a ferramenta que gosta não é mesmo? Cabe ainda a pessoa correr atrás de aprender a utilizar as melhores ferramentas para a sua área.

Eu já falei aqui no site sobre declaração de cores com códigos Hexadecimais neste post: http://diegofranco.net/archives/declarando-cores-com-codigos-hexadecimais-como-e-isso-2. Este post complementa o anterior e é para aqueles que queiram obter o código Hexadecimal de uma cor RGB no Corel ou seria melhor “do Corel”.

O Corel não é a ferramenta perfeita para desenvolvimento Web por isso você com certeza encontrará algumas dificuldade se usá-lo para criar layouts para a web. Não vou entrar em detalhes aqui mas posso descrever num próximo post as principais desvatangens de se usar o Corel para o desenvolvimento Web.

O Corel disponibiliza uma paleta de cores chamada Web-Safe-Color infelizmente uma paleta de 216 cores que informa o Hexadecimal de todas as cores contidas nela, com certeza isso não te ajudará muito, pois pode ser que a cor que você queira não faça parte dessa paleta de cores, por isso vou apresentar outras formas de se converter uma cor RGB do corel para Hexadecimal.

Para acessar a paleta Web-safe-color faça o seguinte:

  • Crie um vetor qualquer, um quadrado por exemplo;
  • Atribua uma cor;
  • Selecione-o
  • Aperte Shift+F11 ou na barra de ferramentas clique em Fill tools > Fill color dialog
  • No dropdow Pallete: Selecione > Fixed Palletes > Web-safe-color
  • Pronto você verá todas as cores disponíveis com seu código Hexadecimal conforme imagem abaixo.
  • Porém como disse anteriormente as cores são limitadas. Sem contar que este código apresentado não procede com a cor real no corel, fiz alguns testes e realmente o resultado não foi a cor exata.

Imagem Web-safe-color Pallete

Portanto a melhor maneira para você obter um resultado extremamente perfeito é printando a tela do corel e colando em um editor de imagens, como exemplo vou usar o fireworks que é bem simples e mostra QUALQUER COR em hexadecimal simplesmente passando o mouse sobre a imagem.

  • Print a tela com a imagem na qual está a cor que você deseja saber o hexadecimal;
  • Abra o Fireworks > crie um novo documento > e cole a tela printada;
  • Desenhe um objeto qualquer por sobre a imagem, um quadrado por exemplo;
  • Ainda no Fireworks clique no ícone de preenchimento e passe o mouse sobre a tela printada, você verá que o Fireworks mostra em tempo real o código hexadecimal da cor na qual o mouse está passando sobre ela, conforme você pode ver na imagem abaixo. Simples assim.

A idéia aqui não foi de fazer um tutorial mas de dar a “faca e o queijo” o resto é com você.

Fireworks color