sábado, 18 de janeiro de 2014

Side ​Bar ​Enhancements para Sublime Text 3

Quem é apaixonado como eu pelo IDE "Sublime Text 3" que atualmente está na sua versão 3.3059 provavelmente passa pelo problema de implementar tão preciosa "Side Bar Enhancements" que facilita muito a vida do Desenvolvedor seja que especialidade for. Isso devido ao fato de adicionar várias funcionalidades com o botão direito do mouse sendo clicado sobre o arquivo entre outras preciosidades como editar Browsers para abrir as páginas editadas com apenas uma tecla como no caso da famosa "F12".

Muitos desenvolvedores nem sequer migram para a nova versão por causa disso mas seus problemas acabaram....Para resolver isso basta ir na URL do GitHub abaixo:

https://github.com/titoBouzout/SideBarEnhancements/tree/st3

Baixa o pacote no formato ZIP e instala ele na sua pasta de usuário do programa...

C:\Users\SEU_USUARIO\AppData\Roaming\Sublime Text 3\Packages

ou então abra ela indo no menu  "Preferences" -> "Browser Package"  para abrir a sua pasta no seu micro e basta colar a pasta descompactada nesta pasta. Reinicie seu Sublime Text 3 e pronto, já estará funcionando.

Para facilitar sua vida deixo aqui abaixo meu próprio arquivo de configuração compartilhado bastando copiar e colar no arquivo apropriado para que seu Sublime Text possa abrir páginas que você está trabalhando no Browser clicando em F12.

Bom, se vc não sabe chegar nesta arquivo, clique com o botão direito em cima do arquivo na Side Bar do Sublime, clique em "Open With" -> "Edit Applications" e quando abrir o arquivo cole o conteúdo abaixo nele  e mande salvar, dai é só usar o comando F12 (no meu caso tá configurado pro Chrome como default).
Bom proveito!


Code abaixo:

[
{"id": "side-bar-files-open-with",
"children":
[

//application 1
{
"caption": "Photoshop",
"id": "side-bar-files-open-with-photoshop",

"command": "side_bar_files_open_with",
"args": {
"paths": [],
"application": "C:\\Program Files\\Adobe\\Adobe Photoshop CS6 (64 Bit)\\Photoshop.exe", // OSX
"extensions":"psd|png|jpg|jpeg"  //any file with these extensions
}
},


//application 2
{
"caption": "Illustrator",
"id": "side-bar-files-open-with-illustrator",

"command": "side_bar_files_open_with",
"args": {
"paths": [],
"application": "C:\\Program Files\\Adobe\\Adobe Illustrator CS6 (64 Bit)\\Support Files\\Contents\\Windows\\Illustrator.exe", // WINNT
"extensions":"ai" //open all even folders
}
},
//application 3
{
"caption": "Chrome",
"id": "side-bar-files-open-with-chrome",

"command": "side_bar_files_open_with",
"args": {
"paths": [],
"application": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe",
"extensions":".*" //any file with extension
}
},
//application 4
{
"caption": "Fireworks",
"id": "side-bar-files-open-with-fireworks",

"command": "side_bar_files_open_with",
"args": {
"paths": [],
"application": "C:\\Program Files (x86)\\Adobe\\Adobe Fireworks CS6\\Fireworks.exe", // OSX
"extensions":"psd|png|jpg|jpeg"  //any file with these extensions
}

}
]
}
]



sábado, 21 de setembro de 2013

SAIBA QUAL O MELHOR NAVEGADOR "NO SEU MICRO" LITERALMENTE.

Você sabe qual o melhor navegador para o seu micro? Estou falando deste micro ai mesmo, o seu de casa, o seu equipamento. Acredito que a maior parte do mundo já saiba da existência do nome "Navegadores" e que não existe somente o famigerado "Internet Explorer", e que de todos ele é o pior. Existem vários outros como Google Chrome, Safari, Firefox, Firefox Nitghly, Opera, etc.
O que você provavelmente não sabe é que apesar de podermos avaliar os navegadores de forma genérica em relação ao seu desempenho, tendo idéias dos melhores, o ideal mesmo é saibamos qual o melhor navegador para o nosso computador pois o melhor navegador do mercado pode não funcionar como o esperado no seu micro.
Pensando nisso a Futuremark, empresa especializada nesse segmento desenvolveu um Site para avaliar o desempenho do seu navegador de forma real, no micro onde está instalado e desta forma você, através de benchmarks confiáveis poderá saber qual o melhor navegador para usar no seu micro baseado no desempenho durante sua navegação.
Não tenha medo de clicar, o botão é bem o escancarado no Site. Basta abrir o Site com o Navegador que deseja efetuar o teste e pronto, clique em "Test Your Browser GO" e acompanhe os testes feitos e aguarde o resultado.

CODEV - UM GRANDE IDE/ FRAMEWORK ONLINE MULTI-BROWSER

Navegando pelo Web Store do Google Chrome ultimamente, descobri uma bela ferramenta excelente e gratuita para quem desenvolve para Web, Sites e afins. É uma extensão para o Chrome muito eficiente para desenvolvimento de códigos online. Não somente para quem já possui um Site hospedado ou para quem já quer desenvolver ele estando no ar (desenvolver online).
A extensão se chama CODEV e ao instalá-la a mesma se coloca como ícone na "nova aba" do Navegador. Na verdade, ao clicar no ícone que se instala, vc é levado ao Site da ferramenta (http://codev.it/) para poder se logar.
Ela se caracteriza como uma IDE/ FRAMEWORK ONLINE. Isso é, vc digita os dados de sua conexão FTP com o Domínio desejado e ele se conecta, abrindo como na imagem acima. Ao abrir você terá toda estrutura do seu projeto online ao lado esquerdo e no centro um editor de códigos com salvamento automático para cada alteração que fizer. Para cada tag digitada o programa lhe mostra numa coluna do lado direito uma extensa biblioteca de informações de proriedades da tag digitada. Um exemplo pode ser visto na imagem acima também, onde o comando css "display" foi digitado aparecendo as opções possíveis e a descrição de cada uma delas ( apenas está em inglês, mas para profissionais da área não existe problema).
Caso o projeto seja tocado por mais de uma pessoa, uma equipe por exemplo, o histórico de acessos e alterações é mostrado de forma eficiente, intuitiva e bem clara. O layout do programa é lindo, usando tema escuro e cinza, com ícones coloridos que facilitam muito a localização dos arquivos desejados. Muito bem elaborado e implementado, acredito que jamais vai ter a fama merecida por tantas ferramentas que existem no mercado.
Abaixo disponibilizo o link para a instalação, lembre-se que se você não possui o Google Chrome (Navegador) tem de ir no endereço do site da ferramenta.
Clique aqui para instalar!

SUBLIME TEXT - EDITOR DE CÓDIGOS LEVE E VERSÁTIL

A Algum tempo atrás fui a um Seminário promovido pela LocaWeb aqui em Floripa.  Durante a Palestra do Diego Eis ( http://about.me/diegoeis/), o fera dono do Site http://tableless.com.br/ citou o nome de uma ferramenta  que disse estar gostando bastante. O nome dela é "Sublime Text" que agora se encontra em sua segunda versão, sendo chamada de "Sublime Text 2".  Ao chegar em casa peguei as anotações e fui conhecer esta ferramenta. 
 É paga também, mas bem barata e resolvi baixar para conhecer. De primeira análise a gente não dá muito por ela, mas depois de um tempo me forçando a usar comecei a entender o que ele estava querendo dizer com a frase dita " Estou gostando muito de uma ferramenta chamada Sublime Text". Isso porque você que está acostumado a usar o Dreamweaver e Eclipse possui na sua frente várias opções e este programa nada mais possui que um Layout limpo, escuro com abas para cada arquivo aberto, abas semelhantes as do google chrome, o navegador. Do lado direito (vide imagem) você possui no formato miniatura pequenos trechos da sua folha de código onde ao clicar no trecho da imagem é levado para aquele ponto do documento, como um índice interativo. 
O grande lance desse editor é que ele é extremamente leve, possui um design limpo e moderno, possui uma biblioteca de tags para as mais variadas linguagens existentes (mais até que o Notepad ++). Seu uso com o tempo o faz adorar a ferramenta. Não força a vista e a renderização das fontes é clara, bem definida e não força a vista com o tempo. Na imagem acima você pode ver o que estou falando.
Realmente o cara tava certo mesmo, baita ferramenta. Se você gosta de trabalhar com códigos e se garante programando pra web, vai adorar ela. Indico agora também !
Visite e baixe para conhecer: http://www.sublimetext.com/2

FORMULÁRIO SEM TABELA

Se você é um cara antenado, já deve saber que não é correto utilizar tabelas para layouts de páginas HTML. Tabelas devem ser usadas apenas para seu propósito original: tabulação de dados. Para todo o restante, como alinhamento de textos, imagens e qualquer outro elemento em uma página, existem as folhas de estilo.
Aprenda a montar corretamente um formulário web utilizando CSS, evitando o uso de tabelas para o alinhamento de textos e campos.
Vamos começar falando de tags HTML esquecidas na grande maioria dos formulários encontrados na web, são elas: fieldsetlegend e label. Observe o form abaixo:
Login:

Usuário:
Senha:
<form>
<table>
  <tr>
    <td colspan="2">Login:</td>
  </tr>
  <tr>
    <td colspan="2"><hr /></td>
  </tr>
  <tr>
    <td>Usuário:</td>
    <td><input type="text" name="usuario"/></td>
  </tr>
  <tr>
    <td>Senha:</td>
    <td><input type="password" name="senha"/></td>
  </tr>
  <tr>
    <td colspan="2"><input type="submit" value="enviar"/></td>
  </tr>
</table>
</form>
Agora vejamos o mesmo formulário utilizando as tags nativas do HTML para forms, eliminando o uso da tabela:
Login:
<form>
  <fieldset>
  <legend>Login:</legend>
  <label for="usuario">Usuário:</label>
  <input type="text" name="usuario" id="usuario"/><br />
  <label for="senha">Senha:</label>
  <input type="password" id="senha" name="senha"/><br />
  </fieldset>
  <input type="submit" value="enviar"/>
</form>
A tag label vem acompanhada do parâmetro “for” (para) contendo o “id” do campo a que se refere (precisa ser o “id” e não o “name”). Note que alguns tipos de input já vem com uma label embutida, como os botões. Neste caso você declara a label no parâmetro value, diretamente na tag.
Fieldset indica um grupo de campos associados a um mesmo tema. No nosse exemplo, o fieldset login possui os campos usuário e senha. Finalizando, legend está parafieldset como label está para input, ou seja, é um rótulo do conjunto de campos.
O código ficou bem mais simples, mas ainda falta alinhar o texto com os campos, como no formulário com tabelas. Nada que um pouco de CSS não resolva:
label,  input {
 display: block;
 float: left;
}

label { 
 text-align: right;
 width: 35px;
 padding-right: 20px;
 padding-bottom: 10px;
}

fieldset {
 border: solid 1px #000;
}

br {
 clear: left;
}
Login:
Observe as possibilidades de formatação com a utilização de CSS e das tags fieldset,legend e label. O formulário fica muito mais organizado e pode ter uma apresentação muito mais agradável, basta caprichar nas bordas e espaçamentos. Hora de conferir um pouco mais sobre algumas das propriedades CSS utilizadas neste exemplo:
display: block - Como o próprio nome sugere, exibe o elemento como um bloco, permitindo maior flexibilidade na hora de alinhá-lo com outros elementos na página.
float: left - A propriedade float move um elemento para a esquerda ou direita de seu elemento “pai”. Por exemplo, um elemento com a propriedade float:left é interpretado como um bloco e é sempre alinhado à esquerda (até encontrar um outro elemento com float ou clear). Caso você esteja iniciando agora na montagem de páginas com CSS, fique ligado nesta propriedade, pois ela será muito utilizada para criação de colunas, posicionamento de imagens etc.
clear: left - No nosso caso, a tag br com a propriedade clear: left impede com que elementos com float: left sejam alinhados à sua esquerda. Funciona, basicamente, como o início de uma nova linha no que se refere a elementos flutuantes.
Legal, não? Neste link você encontra alguns exemplos avançados de formulários CSS. Espero que tenham gostado e até a próxima!

RESETANDO CONFIGURAÇÃO PADRÃO DO FIREWORKS SEM PERDER SUAS PREFERÊNCIAS.

Outros profissionais podem criticar mas se tem um programa gráfico que faço uso em quase 100% das vezes em minha rotina de trabalho é o Fireworks. Criado originalmente pela Macromedia em 1994, o Fireworks é um excelente se não o melhor ( em minha opinião ) programa gráfico para trabalhar com imagens no desenvolvimento de Sites.  A Adobe, após comprar o conjunto de programas da Macromedia (Fireworks, Dreamweaver, Flash,etc.)  melhorou ainda mais este programa, adicionando a ele ferramentas de sucesso e "engines" do Photoshop, deixando o Fireworks com uma qualidade e ferramentas tão boas quanto o Photoshop, fazendo com que o profissional de Web Design tivesse uma ferramenta ainda mais eficaz. Quando trabalhamos com ele é normal criamos nossas preferências, principalmente no Layout de trabalho dele, adicionando botões no painel direito, etc. No entanto é comum nestas mudanças de configurações padrões do Fireworks acabarmos fazendo algumas besteira como inidicar pastas de plugins de forma errada ou outra coisa e com isso o programa ou fica muito lento na abertura, ou no funcionamento, ou simplesmente não abre mesmo, travando na tela ao ser acionado. Para resolver estes problemas muitas pessoas recorrem ao famoso CTRL+SHIT+execução do programa, o que reseta o mesmo, mas ai...ao abrir vc se depara com uma péssima conclusão. A de que perdeu toda a sua personalização da área de trabalho (leiaute) do Programa... Para resolver isso é fácil, independente de windows 7 ou windows 8 ou XP (desculpem os usuários de MAC mas não sei onde se encontra esta pasta, não curto micros de arquitetura fechada, portanto nem olho pra eles). Se seu Fireworks não está abrindo depois daquelas alterações de configurações faça o seguinte: 1- Mantenha o Fireworks fechado. 2- Vá em : C:\Users\seu_usuário\AppData\Roaming\Adobe 3- Dentro desta pasta você encontrará a pasta do "Fireworks", chamada "Fireworks CS6" ou CS5 ou a versão que vc tiver. Renomeie ela para o nome que quiser. 4- Abra o Fireworks, e desta vez ele abrirá normalmente, na velocidade normal dele. Com isso, ele criará novamente esta pasta com as configurações padrões dele e estrutura de pastas normal. 5- Você vai reparar, como dito anteriormente que o Fireworks abriu zerado, sem nenhuma personalização que você tinha feito anteriormente. Para resolver isso, volte na pasta antiga que você renomeou e entre nela. 6- Abra a pasta "Commands", o caminho completo é (C:\Users\seu_usuário\AppData\Roaming\Adobe\Fireworks CS6\Commands) 7 - Dentro desta pasta você vai encontrar uma pasta chamada, "Workspace Layouts". É dentro dela que se encontra seus espaço de trabalho personalizados com os nomes que você criou.... Copie esta pasta toda para a mesma pasta nova criada pelo Fireworks, inicie o programa e estarão lá novamente, bastando clicar na área de trabalho personalizada pra selecioná-lo novamente. Abaixo deixo a imagem do meu pra quem não souber onde se encontra poder entender...No meu caso crio com meu nome os espaços de trabalho, mas vocês podem dar o nome que quiserem.
Quem tiver a fim de conhecer as fontes originais de pesquisa do que estou falando podem visitar o link abaixo e se aprofundar no assunto... http://helpx.adobe.com/fireworks/kb/restore-preferences-fireworks-cs5.html Espero ter ajudado, até o próximo post....

Personalizando seu Eclipse IDE.

Eclipse é um IDE bastante usado entre os programadores JAVA que trabalham desenvolvendo para Web - https://pt.wikipedia.org/wiki/Eclipse_(software). Além de ser gratuito ( pode ser baixado aqui - http://www.eclipse.org/downloads/), esta IDE é acredito a mais utilizada entre os profissionais deste segmento de mercado de TI, além de empresas. Não vou abordar aqui sobre a ferramenta, como instalar, configurar, etc. Este post é voltado para quem já conhece e trabalha com a ferramenta ou acabou de instalar, configurar e a está conhecendo e não gostou muito da cara meio "antiga" dele. O Eclipse possui um rostinho muito padrão "sem graça". Além de cores conservadoras ele também possui a tela de desenvolvimento de códigos branca brilhante de forma que muitas vezes trabalhar com ele por horas se torna cansativo além de chato. Para animar ou re-animar os profissionais que trabalham com esta IDE e nunca tiveram a curiosidade de correr atrás de temas ou mudar as cores da janela do programa este post aqui vai mostrar pra vocês uma forma simples e rápida que descobri pra fazer o meu Eclipse (eu uso a versão Juno SR2, mas serve em todas), ficar igual a imagem abaixo:
Muitos desenvolvedores não gostam do tema escuro mas eu gosto bastante e este acima é um tema criado por Roger Dudler (http://blog.rogerdudler.com/) que com apenas um arquivo java faz com que todo o seu Eclipse se torne um Eclipse do lado negro da força. 
Além dele, para a área de edição de códigos, iremos usar outra ferramenta também criada pelo mesmo Roger Dudler junto com Felix H. Dahlke. O Eclipse Color Theme (http://eclipsecolorthemes.org/). 
O Eclipse Color Theme é pré-requisito para instalar o tema UI (User Interface) que deixará todo o seu Eclipse preto. Acesse o endereço http://eclipsecolorthemes.org/?view=plugin
para que possa visualizar as formas de efetuar o download do plugin. Nesse post vou usar a forma mais simples de todas que é acessando este endereço:
Com seu eclipse aberto, clique na opção "Help" do menu superior e "Eclipse Marketplace", veja a imagem abaixo:
Após isso e com a página http://marketplace.eclipse.org/content/eclipse-color-theme, aberta, clique no ícone com a seta do mouse e escrito "install" e arrasta para cima da janela que se abriu do seu eclipse e aguarda para continuar a instalação. 
Após instalar. Você já poderá mudar em seu Eclipse o tema da área de edição. Eu escolhi o Tema do Editor de códigos Sublime Text 2 porque já trabalho com ele e com isso fica uma coloração de códigos alinhada com meu costume. 
Para mudar o tema vá no menu superior em :
Window  --> Preferences 
Na janela que se abre, clique em :
General -->Appearence --> Color Theme
Veja a imagem abaixo, poderá ver todos os temas de cores para a área de edição. 
Eu escolhi o tema Sublime Text 2 como selecionado, mas você poderá escolher o que quiser e mandar aplicar. Com isso teremos apenas nossa área de edição de códigos com o tema aplicado. 
Agora podemos instalar o Tema UI que deixará toda a estrutura do eclipse preta. Para isso, vamos baixar o plugin que deixará seu Eclipse Preto (como na imagem acima). Vá ao Site que o Dudler criou o tema UI (porque muda a "User Interface") - http://rogerdudler.github.io/eclipse-ui-themes/
Baixe o arquivo ZIP que ele disponibiliza para download abaixo do título "Installation". Deixo o link abaixo para facilitar. 
Após baixar este arquivo descompacte ele escolhendo a opção "Extract Here" ou "Extrair aqui" o que deverá criar uma pasta chamada "plugins". Recorte esta pasta e cole dentro da pasta "dropins" na raiz da pasta de seu eclipse. Reinicie o Eclipse depois de colar. 
Ao abrir ele novamente vá até o mesmo caminho anterior para acessar o gerenciamento da aparência. No menu superior, acesse: 
Window  --> Preferences 
Na janela que se abre do lado direito, na aba "Theme:" Clique na aba de rolagem onde mostrará as opções de "Theme" e escolha o tema " Dark Juno" e temos ai o seu novo Eclipse com nova cara. 
Bom trabalho a todos, espero ter ajudado!