Front-End

Instalando Joomla 3 no Ubuntu

Comecei mexer com Joomla 3 agora, e conforme estou aprendendo vou compartilhando minhas experiências. Nesse tutorial vou mostrar como inicia com Joomla 3, fazendo a instalação desde o download a criação do banco e poder visualizar o Back e o Front, tudo via terminal.

Primeiro passo – Baixe e descompacte o Joomla 3 na sua pasta de projetos.

Segundo passo – Crie o banco de dados via terminal:

mysql -u root -p -e "create database joomla"

Terceiro passo – Execute a via browser o local da instalação.

Tutorial de como instalar Magento via SSH

Este artigo irá descrever algumas abordagens diferentes para instalar a última versão do Magento usando o shell de linha de comando via SSH. Nós vamos ver como instalar Magento com e sem dados de exemplo.

Usando SSH é a maneira mais fácil e rápida de instalar o Magento, especialmente quando você está tentando configurar uma loja com dados de amostra. Normalmente, isso requer que você baixe cerca de 45 MB no valor de dados e, em seguida, o re-envio para o seu site. Com SSH , podemos tirar proveito da conexão do servidor para pegar os arquivos necessários.

Última versão estável hoje do Magento é 1.9.1.1 (23,8 MB )

Instalando o Magento com o Full Download

Assim que esse código é colado no terminal ( ctrl+shift+v ) ele baixa o Magento compactado em tar.gz, logo em seguida descompacta e coloca as permissões corretas com chmod.

Cole no terminal:
wget http://www.magentocommerce.com/downloads/assets/1.9.1.1/magento-1.9.1.1.tar.gz
tar -zxvf magento-1.9.1.1.tar.gz
mv magento/* magento/.htaccess .
chmod -R o+w media var
chmod o+w app/etc

Instalando o Magento com o Downloader PEAR

Usando o downloader PEAR é uma forma conveniente para garantir que você instale a última versão do Magento, uma vez que fornece um mecanismo simples para instalar a última versão estável, que está disponível. É um download pequeno e é atualizado com menos freqüência do que o pacote completo Magento.

Cole no terminal:
wget http://www.magentocommerce.com/downloads/assets/1.9.1.0/magento-downloader-1.9.1.0.tar.gz
tar -zxvf magento-downloader-1.9.1.0.tar.gz
rm -rf magento-downloader-1.9.1.0.tar.gz

Logo em seguida acesse http://www.sualoja.com/downloader.php em seu navegador.


Instalando o Magento com o Full Download & Dados de Amostra

Instalando o Magento com dados da amostra é útil se você quiser se familiarizar com Magento e ver como categorias e produtos são criados. Isso é quase o mesmo que acima,Você só terá que substituir os valores DBHOST, DBUSER, DBPASS e DBNAME.
wget http://www.magentocommerce.com/downloads/assets/1.9.1.1/magento-1.9.1.1.tar.gz
tar -zxvf magento-1.9.1.1.tar.gz
wget http://www.magentocommerce.com/downloads/assets/1.9.0.0/magento-sample-data-1.9.0.0.tar.gz
tar -zxvf magento-sample-data-1.9.0.0.tar.gz
mv magento-sample-data-1.9.0.0/media/* magento/media/
mv magento-sample-data-1.9.0.0/magento_sample_data_for_1.9.0.0.sql magento/data.sql
mv magento/* magento/.htaccess* .
chmod -R o+w media var
mysql -h DBHOST -u DBUSER -pDBPASS DBNAME < data.sql
chmod o+w var var/.htaccess app/etc
rm -rf magento/ magento-sample-data-1.9.0.0/ magento-1.9.0.0.tar.gz magento-sample-data-1.9.0.0.tar.gz data.sql

PhpStorm 8

Como instalar PhpStorm no Ubuntu

PS: “Após instalar você deve gerar o link de atalho através do menu do PHPStorm (Tools > Create Shortcut)”

Olá, simplificando o processo de instalação dessa fantástica IDE o PhpStorm agora está disponível no SimpleSH. Sempre tinha que ficar caçando o código de instalação Java JDK e anotando os comandos de instalação para a próxima vez, agora seus problemas acabaram. Basta copiar e colar no terminal:

cd ~/Downloads ;
rm -rf simplesh-master/;
wget -qO- -O simplesh.zip https://github.com/rafaelstz/simplesh/archive/master.zip ;
unzip simplesh.zip && rm simplesh.zip;
cd simplesh-master/ ; clear;
bash simple.sh;

Depois escreva “phpstorm.sh” e seja feliz 🙂 .

CONFIGURAR SSH ( GITHUB E BITBUCKET ) NO UBUNTU

Configurar SSH ( Github e Bitbucket ) no Ubuntu

Quando era iniciante com Ubuntu e com GIT sofria muito com essa configuração, hoje para mim é um processo extremamente simples do cotidiano, foi por esse motivo que resolvi fazer esse tutorial.

1 – Primeiro comando, executo é para instalação do GIT na máquina

sudo apt-get install git

2 – Segundo comando, serve para gerar uma nova chave

ssh-keygen

3 – Terceiro comando, uso para adicionar a chave gerada

ssh-add ~/.ssh/id_rsa

4 – Quarto comando, copio a chave que é mostrada na tela do terminal

cat < ~/.ssh/id_rsa.pub

5 – Colo a chave nas minhas configurações de SSH da conta do GitHub e BitBucket

Adobe Project Parfait (Beta)

Há algum tempo fiquei sabendo de uma nova ferramenta da Adobe chamada Project Parfait, desde então não tinha testado, quando resolvi testar em um projeto em produção me surpreendi, pela praticidade principalmente. Meu principal sistema operacional é Ubuntu e minha principal carência do Photoshop foi suprida para o desenvolvimento Front-end.

Pra quem não conhece, com ela você pode enviar arquivos no formato nativo do Photoshop (PSD) para obter, no próprio navegador através de uma interface prática, informações diversas como distância entre objetos, valores de cores, famílias e dados de fontes, largura, etc. Principalmente, pode copiar alguns desses dados em estilos CSS, o que é ótimo pra quem cria designs para a web.

Adobe Project Parfait Beta

Adobe Project Parfait Beta

Benefícios:

– Extrair cor, gradiente e informações a partir de um arquivo PSD.
– Copiar texto e CSS .
– Obter medições precisas entre os elementos.
– Salvar imagens otimizadas para web.

Uso:

Para começar basta logar com sua conta Adobe, ele trabalha com sistema Drag and Drop, então localize os PSD’s e arraste para a tela, ao clicar na miniatura do PSD que foi feita o upload, você terá uma barra de ferramentas ao lado direito da tela e na parte superior. Com o mouse você poderá selecionar elementos para obter suas propriedades CSS e sua imagem em PNG, JPG e até SVG. No topo você poderá escolher a proporção de visualização do seu PSD na tela e um link “files” para retornar aos arquivos, na barra da lateral direita haverá as abas “Styles”, “Layers” e “Assets”, no “Styles” você verá as propriedades CSS do elemento selecionado, as fontes com tamanhos utilizadas do projeto além da palheta de  cores e degrades, na aba “Layers” poderá visualizar as camadas como se fosse no próprio Photoshop, em “Assets” ira ser exibida as miniaturas das imagens de elementos que foram selecionadas para download.

Magento eCommerce

Permissões corretas pastas Magento

Normalmente iniciantes em Magento costuma setar permissões incorretas nos diretórios e pastas, então diante de diversas lojas assim resolvi postar o comando que pode ser executado via SSH ou na máquina local via terminal Linux.

Aqui estão os passos seguidos:

– Setando permissões de todos diretórios parar 775

– Setando permissões de todos arquivos parar 644

– Setando permissões das pastas app/etc/, var/ e media/ e todos arquivos internos para 777

Basta somente executar o comando:

sudo find . -type d -exec chmod 755 {} \;
sudo find . -type f -exec chmod 644 {} \;
sudo chmod 777 -R app/etc/;
sudo chmod 777 -R var/;
sudo chmod 777 -R media/;
JavaScript-Logo

Colocando atributo no input via JavaScript

Tive a necessidade de adicionar o atributo maxlength no campo input do checkout sendo ele gerado dinamicamente via php. Com essa solução a baixo em JS adiciono o atributo rapidamente sem necessidade de jQuery.

window.onload = function(){
      var day = document.getElementById('billing:day');
      var att = document.createAttribute("maxlength");
      att.value = "2";
      day.setAttributeNode(att);
}

Ou esse a baixo caso tenha mais de um campo input parar modificar:

document.getElementById('billing:day').setAttribute('maxlength','2');
document.getElementById('billing:month').setAttribute('maxlength','2');
document.getElementById('billing:year').setAttribute('maxlength','4');

 

O input que antes era assim:

<input id="billing:day" class="input-text validate-custom" type="text" title="Dia" value="" name="billing[day]" placeholder="DD"></input>

Ficara assim:

<input id="billing:day" class="input-text validate-custom" type="text" title="Dia" value="" name="billing[day]" placeholder="DD" maxlength="2"></input>