Uncategorized

Usabilidade – Dicas importantes…

Recentemente, a gigante de Mountain View divulgou uma série de boas práticas e princípios de design para desenvolvedores de aplicativos para o Android que são válidos para qualquer site, inclusive para sua loja virtual, uma vez que esses princípios são resultado de muita pesquisa e investimento em usabilidade e design de interação.

Se partirmos da premissa de que uma loja gera mais vendas se proporcionar uma boa experiência de compra, tiver uma curva de aprendizado pequena e, principalmente, se permitir que o cliente encontre o produto e finalize o processo de compra o mais rápido possível, posso afirmar que, seguindo à risca as dicas do Google, sua loja venderá muito mais. (É claro que outros fatores também contribuem para o sucesso das vendas, como preço, produto, plataforma e a divulgação da loja, mas como isso varia muito de loja para loja, vamos nos focar apenas na usabilidade.)

As dicas a seguir foram divididas em 2 conceitos fundamentais: Forma e Função.

Forma

A beleza não está apenas no design da sua loja. Para que ela seja encantadora, é preciso pensar em efeitos de transição, no tamanho correto das fontes e em uma boa diagramação. Pense na combinação perfeita entre beleza, simplicidade e propósito para oferecer uma primorosa experiência de compra ao seu cliente.

1- Pense nas fontes

Escolha fontes de fácil leitura e use o tamanho apropriado para cada tipo de público que você deseja alcançar. Lembre-se de que quanto mais contrastante for a relação entre as cores da fonte e do fundo, mais cansativa será a leitura de textos longos. Utilize contrastes fortes apenas para chamar a atenção para links e botões.

2- Destaque os botões

Coloque efeitos para quando o mouse estiver sobre os botões, para que a ação seja perceptível. Não deixe de pensar em como serão as versões de botões inativos e tenha em mente que os botões call-to-action devem ter algum destaque sobre outros elementos em relação a cor e tamanho. Lembre-se de que daltônicos confundem verde e vermelho, por isso escolha bem as cores e os tons utilizados nos seus botões.

3- Saiba quem é o seu público

Conheça o seu público e saiba quais as suas preferências. Ferramentas como o Google Analytics ajudam a entender qual o maior interesse do seu cliente, como ele navega e em qual etapa do processo ele sente mais dificuldade. Reúna essas informações e altere o que for necessário para tornar sua loja um ambiente agradável e familiar.

4- O cliente é quem manda

Permita que o usuário tenha controle sobre a visualização na sua loja, pois isso faz com que ele se sinta no comando. Ofereça várias opções de filtros para refinar a busca apenas com os itens desejados e, se possível, ofereça recursos de customização, como, por exemplo, cadastro de imagem de perfil. Isso ajuda a criar mais proximidade entre o consumidor e a loja.

Função

As lojas virtuais fazem sucesso por simplificarem a vida das pessoas, por isso elas devem ser fáceis de entender. Facilite a procura de produtos e os passos de compra, e não complique o processo com cadastros extensos e desnecessários.

1- Frases curtas

Use frases curtas! As pessoas não vão ler os textos se eles forem compridos. Em vez de usar “Parabéns, o seu cadastro foi realizado com sucesso! Você receberá uma confirmação em seu e-mail.”, prefira usar “Cadastro realizado com sucesso.” Transmite apenas a informação essencial de forma muito mais rápida e fácil de entender. Essa dica também é bastante válida para os botões: em vez de “continuar pagamento”, use apenas “pagar”.

2- Imagens são mais rápidas

Sempre que possível, associe os pontos importantes da sua página com ícones, pois o cérebro irá identificar a área muito mais rapidamente do que se tivesse que “escanear” apenas os textos na tela. Exemplo: telefone, redes sociais, e-mail, carrinho etc. Mas atenção para não substituir os textos por ícones, pois vários estudos de usabilidade comprovam que a associação de texto e ícone é muito mais eficaz do que apenas o uso de ícones.

3- Ajude o cliente a tomar decisões

Ofereça a forma de pagamento mais atraente para o seu cliente e não para você. Sugira produtos relevantes na página de detalhes do produto e no carrinho de compras, utilize a própria inteligência da sua plataforma para que esse trabalho de sugestão de produtos seja feito automaticamente e com coerência. Exemplo: quem está comprando um tablet provavelmente pode querer também uma capa para protegê-lo.

4- Só exiba o que for necessário

Não deixe as telas cheias de informações se elas não forem necessárias. Se você já está nas páginas de check-out, não há necessidade de exibir links para o carrinho, lista de desejos, cadastro ou frase de boas-vindas. Em vez disso, dê lugar para o atendimento on-line, perguntas frequentes, prazo de entrega e sugestões de parcelamento com desconto.

5- Sua loja não é um labirinto virtual

Deixe claro como a navegação foi feita para que seja fácil voltar a páginas já visitadas sempre que necessário. Em uma loja física seria o mesmo que identificar as seções com placas para que o cliente encontre o que procura e volte para pegar um produto que já tenha visto.

6- Nunca perca as informações

Em qualquer formulário de cadastro, certifique-se de que as informações digitadas não serão perdidas caso haja algum erro na página. Não há nada mais chato do que ficar digitando as mesmas informações várias vezes. Caso a sua loja trabalhe com cartão de presente, também é importante que a mensagem do cartão não se perca em caso de erro.

7- Se a aparência é igual, faz a mesma coisa

Use a mesma linguagem para as mesmas ações. Exemplo: use o mesmo botão fechar para todas as janelas, o mesmo ícone para o carrinho etc. Nunca use o mesmo ícone para ações diferentes, como uma lupa para realizar uma busca e a mesma lupa para dar zoom em uma imagem. Isso acaba confundindo o cliente.

Aplicando essas dicas práticas, sua loja virtual estará muito mais preparada para o sucesso de vendas.

Fonte: https://www.ecommercebrasil.com.br/artigos/como-vender-mais-com-as-licoes-de-usabilidade-do-google/

Anúncios
Padrão
dicas atom, extensoes atom, personalizando atom, plugins atom, snippets atom, temas atom

DICAS FUNDAMENTAIS PARA ATOM EDITOR – Snippets, Extensões, Temas, personalização…

O Atom é o Editor de Códigos criado pela comunidade do GITHUB. Em um post anterior falo sobre ele e você pode ler pra saber mais. Mas se você já conhece ele (ou ainda não conhece) aqui vão algumas dicas pessoais de como melhorar este Editor de Códigos tão bacana. 
1- Baixe e instale a versão Zipada, a versão executável, além de se instalar em um lugar bastante estranho (pelo menos no windows) também tem o péssimo hábito de não fazer instalação limpa, deixando versões anteriores e outras pastas e arquivos se acumulando em seu computador então o melhor mesmo é baixar a zipada e descompactar diretamente na raiz do seu Sistema. 
2 – Proxy – Se você usa já é melhor configurar de cara:
Isso foi uma coisa que apanhei bastante na empresa onde trabalho. Configurar o Proxy no Atom pode tomar bastante tempo pesquisando e configurando mesmo. Ele não possui opção manual pra você configurar e vai ter de ser na mão com código mesmo. O Atom cria uma pasta de perfil de usuário dentro da sua pasta de perfil de usuário (no caso falo do windows) chamada “.atom”. Esta pasta possui alguns arquivos onde ele salva suas preferências, extensões, arquivo de estilos e snippets. 
Dentro desta pasta é necessário adicionar dois arquivos configurando o Proxy. Dentro desta pasta você deverá criar um arquivo (se ele não instalar por conta própria) chamado “.apmrc” e dentro dele declarar as configurações de proxy de sua rede, neste formato.
http-proxy=http://usuario:senha@proxy.dominio.com:3128
https-proxy=http://usuario:senha@proxy.dominio.com:3128
OU
http-proxy=http://usuario:senha@IP DO PROXY:3128
https-proxy=http://usuario:senha@IP DO PROXY:3128
proxy=http://usuario:senha@proxy.dominio.com:3128
proxy=http://usuario:senha@IP DO PROXY:3128
****Também coloque as regras gerais de acesso dos pacotes igual abaixo:***
registry=http://registry.npmjs.org/
strict-ssl=false
Obs: Vale à pena lembrar que seu proxy pode ter a porta no final do endereço onde eu coloquei 3128 com outro número, isso é, outro endereço da porta. No caso mais comum é esse 3128 mesmo. No meu caso coloquei todas as linhas digitadas pra não me incomodar qual nomenclatura seria aceita, indico fazer o mesmo. 
Em alguns casos é necessário também criar um arquivo dentro desta mesma pasta chamado “.npmrc” e apenas copie estas linhas e cole nele também e salve os dois dentro da pasta “.atom” dentro do seu perfil de usuário do windows ou seu sistema. Por exemplo, no meu caso é 
“C:\Users\Thiago\.atom”
Com isso seu ATOM passará a aceitar o proxy para atualizar, instalar extensões, e se comunicar com a rede externa na web.
3- Instale e configure uma fonte de texto do editor leve. A original dele já serve mas eu particularmente prefiro e fonte “Ubuntu Mono” da familia Ubuntu. Ela é leve, perfeita pra codificar e faz toda diferença quando temos milhares de linhas de código. Mas a do Atom Nativa também é boa. 
Você pode baixar gratuitamente ela em (http://font.ubuntu.com/). Instale em seu PC e depois vá em seu Atom no menu superior em Files > Settings e configure a fonte. Deixo a minha imagem abaixo:
4 – Crie seus próprios Snippets dentro das suas necessidades. 
Quem inventou a possibilidade de criar Snippets nos Editores é uma pessoa muito inteligente. Você poder fazer seus próprios códigos e usar eles onde quiser, isso é muito útil pois só o desenvolvedor sabe do que precisa. Então já aconselho de cara a você criar os seus próprios snippets. É fácil no Atom. Você deverá ir em Files > Open your Snippets.
Ao abrir o arquivo, você vai perceber que existe uma série de comentário comentados falando em como criar um snippet. Existe um de exemplo lá que é igual ao abaixo:
‘.source.coffee’:
 ‘Console log’:
  ‘prefix’: ‘log’
  ‘body’: ‘console.log $1’
O que acontece é que ao abrir um documento novo, digitando a palavra “log” e digitando a tecla “TAB” ele irá inserir um bloco de código pré-definido na última linha ali, a “body”. O uso da variável $1 ali é pra indicar para o Atom onde termina o seu código a ser inserido, mas não é obrigatório. Você pode criar vários outros até sem mesmo colocar estes caracteres. 
Na internet tem um vasto campo de consulta sobre como fazer Snippets pra Atom mas pra facilitar sua vida, deixo aqui o meu Snippets pessoal que utilizo no atom e assim você poderá perceber como é feito e fazer você mesmo, não precisa ser programador pra isso. Só uma dica, para inserir Snippets HTML nele é necessário color o ‘*’: antes de começar a declarar seus snippets HTML. Isso porque colocando este asterisco você declara ele genericamente e assim não dá problema. 
Para baixar meu Snippets pessoal que possui Snippets de estrutura HTML, HTML5  para responsividade, Bootstrap, Icon Awesome, Jquery e outros, clique no link abaixo. Você deverá salvar e substituir pelo seu já existente que está na pasta “.atom” na raiz do seu Sistema como falado na dica anterior. 
5 – Estilize seu Atom:
Você pode estilizar seu Atom. A versão atual é muito bonita e por isso quase não mudo nada nela. Apenas mudei por exemplo algumas pequenas cores, definição de tamanho de fontes da árvore de arquivos, e fontes dos menus, e a cor de fundo do editor porque quando bate luz na tela ou em ambientes muito iluminados a cor de fundo mais clara faz pouco contraste com as cores das fontes. Também deixo aqui a minha pra você poder baixar, se quiser e ela também se encontra no mesmo lugar das dicas anteriores, na pasta “.atom” dentro do seu perfil de usuário do seu sistema. 
Para acessar, basta ir em Files > Open your Stylesheet
Você pode personalizar tudo que desejar no seu ATOM. Para isso basta inspecionar o editor com um inspetor de códigos igual o do chrome navegador. Você ativa ele indo no menu superior.. View > Developer > Toogle Developer Tools.
Ai você inspeciona o que deseja, pega o nome da classe CSS dela dentro do editor e coloca no seu arquivo Stylesheet mudando cores ou outra coisa que desejar, salva e é subscrito sobre a classe original, fazendo parte do seu Editor. Quando a versão é atualizada não se perde porque ele fica na sua pasta de personalização do Atom.

6 – Dicas de Extensões ou Packages como é chamado pela comunidade.  Para inserir pacotes vá em Files > Settings



Atom Minimap : Como no Sublime Text, o Atom possui um Minimap pra adicionar no editor, ele funciona muito bem e possui um design legal. Rápido também e pode ser instalado digitando no campo de pesquisa Minimap. 
Seu endereço no Github é: https://github.com/atom-minimap/minimap
Tool-bar: 
Pacote muito legal criado pelo Suda (https://github.com/suda/tool-bar) que cria uma barra lateral (você pode colocar em qualquer lado do editor que quiser, esquerdo, direito, em cima ou em baixo) com ícones de atalhos de funções dos menus ou que você mesmo crie. Basta digitar “tool-bar” no “install” do Settings do Atom. Ele não aparecerá sozinho, você precisará baixar mais um pacote que irá inserir pra você os icones na barra e mostrá-la….logo abaixo explico.
Tool-bar-iconshortcuts :
Já aproveito pra indicar a minha própria extensão que trabalha com o Toolbar e vai deixar seu ATOM com a Toolbar igual a da imagem acima ai. Para baixar você deverá ir no meu GITHUB do Pacote que criei e baixar a última versão lá zipada e colar dentro da pasta “.atom/packages”,  que é a pasta como citado anteriormente onde ficam guardados seus arquivos personalizados. 
Obs: Caso queira, você pode baixar diretamente o tool-bar-main do SUDO também via Settings do ATOM. Ele também vai adicionar os ícones como explicado e também vão acionar a sua toolbar mas no caso possui menos ícones que pra mim deixam a desejar por isso criei meu próprio pacote pra toolbar. 
De qualquer forma basta digitar os nomes mostrados na imagem abaixo em  seu menu “install” 
O atalho Github dele é : https://atom.io/packages/tool-bar-main
Atom Beautify: Com ele você pode identar ou formatar seus códigos CSS, JS, HTML e quase todas as linguagens suportadas pelo ATOM. Ele é parecido com o Beautify do Sublime Text, tem o mesmo papel de deixar o código bonito visualmente pra poder trabalhar. 
Atom Synced Sidebar: É como a Sidebar Enhancement do Sublime Text. Ela acrescenta várias funcionalidades a barra de arvore de arquivos do lado esquerdo dos editores de código. 
Color Picker: Adiciona a funcionalidade de escolher a cor desejada em seu código através de uma tooltip de cores onde você escolhe como num editor de cores. Você escolhe, digita enter e ele insere a cor desejada. Também converte as cores de RGB e RGBA, etc. 
Webbox-Color: Ele adiciona ao lado do código da cor a cor dela. Complicado de explicar mas fácil de entender ao visualizar. É realmente muito útil. O legal deste pacote é que ao contrário da maioria ele adiciona depois do código a cor no formato de bolinha e ele não afeta nem atrapalha de ver com clareza o código da cor como na maioria mas você se gostar da cor sobre o código basta ir nos settings da extensão e habilitar a função “Fill Color as Background”. 

Abaixo deixo outros pacotes que também são muito bons e uso. Sempre a mesma forma de instalar. Basta ver a descrição na própria imagem em questão abaixo do nome do pacote.
Por fim, os Temas…Bom Temas nem preciso falar. A versão default dele é linda, não precisa de mais nada. Mas se você quer ver algo diferente…Bom, tem a opção no settings “Themes”, olhando lá você vai encontrar outros temas pra implementar. Mas realmente, nas minha andanças a Original dele é a mais bonita. Se você não gostou do tema de cores dos códigos e quer mudar ou gostar por exemplo do Monokai igual ao original do Sublime, você pode baixar o tema do editor chamado “Monokai” mas realmente não aconselho. 
Espero que tenham gostado…das dicas ai…qualquer coisa malha ai…ou comenta. 
Padrão
atom editor, brackets, comparando editores, editor de codigos, Sublime text

SUBLIME TEXT, ATOM, BRACKETS, NOTEPAD++. Análise rápida…

Nos dias de hoje temos muitas opções de editores de código gratuitos. Eu particularmente me amarro em Editores, gosto muito de codificar, pra mim que sou da velha guarda, trabalhar com os Editores de código de hoje é como jogar Play Station pra nova geração, pura diversão. Por isso eu tenho praticamente todos instalados em meu PC, mesmo que use ele raramente. Conhecer e dominar seus recursos pra mim é uma diversão.
Obviamente como qualquer pessoa tenho meus favoritos, mesmo gostando de codificar com todos. Os grandes IDEs como Eclipse, NetBeans, etc, também tenho instalado mas no meu dia a dia não necessito muito destas ferramentas maiores, só quando trabalho em projetos grandes, geralmente na empresa e por isso não vou falar deles aqui.
Neste Post vou falar dos meus 3 editores prediletos. Sublime Text, Atom e Brackets. Vai ser uma análise bem sucinta e não vou entrar em detalhes mas as diferenças entre eles.
Sublime Text:
 
 
Esse é meu preferido, tanto que tenho uma licença dele na versão 3 e levo comigo uma versão portable onde vou (trabalho, casa, etc). Ele é meu porto seguro. O Sublime text é feito em Python (Obrigado Yuri Morales) que começou como uma extensão do VIM (outro editor antigo) e que passou a ter uma identidade própria. Hoje é um dos grandes Editores famoso entre os Webdesigners principalmente mas já se tornou um IDE para programadores.
Rapidez:
O Sublime Text é muito rápido. Mesmo enchendo ele de extensões, plugins, temas, etc, ele continua estável e leve, seu desempenho não muda. Sua estabilidade e pouco tamanho assim como consumo de memória no PC ao ser executado faz dele uma verdadeira máquina de editar códigos. Você consegue navegar entre as linhas de códigos na mesma velocidade que pressiona a tecla.
Visual claro e bom pra nossa retina:
Seu visual foi uma revolução gráfica em editores de código. Os olhos agradecem ao ficar horas programando nele pois a sua interface deixa tudo muito claro para a retina humana.
Suporte farto na Web, muita consulta clara pra pesquisar e conhecer a ferramenta:
O Sublime possui além do Site oficial, muitos videos no Youtube, comentários em comunidades e Foruns, isso faz toda diferença quando você está querendo procurar aquela informação que tanto precisa, como fazer snippets, como configurar o proxy, qual extensão é melhor para isso ou aquilo. O Package Control (https://packagecontrol.io/) facilita sua vida de uma forma muito prática quando o assunto é procurar extensões, temas, etc… e instalar as mesmas.
Configurando com código, tudo fica mais estável:
Configurar o Sublime Text com códigos é uma coisa fácil, como disse antes material na web não falta mesmo que você não saiba programar é tranquilo, basta querer de verdade que você faz. Este fato faz com que o que você configura não se perca e seja mais estável.
Seus Arquivos de configuração, extensões, snippets, etc…em um único lugar separado da pasta do programa quando instalado e junto quando o programa é portable:
Tudo muito bem feito. Quando você instala o Sublime no seu micro ele cria uma pasta dentro da pasta de seu perfil de usuário do sistema contendo todos os arquivos de preferências que você criou pra ele. Desde Snippets até as extensões e temas instalados, tudo fica ali, nada se perde até mesmo se você desinstalar o programa ou instalar uma nova versão. Quando você possui a versão portable, ele coloca dentro da pasta packages do programa e quando você atualiza ele nada se perde pois esta pasta é ignorada na atualização.
Menu Superior  > Preferences > Browse Packages
As extensões realmente funcionam:
As extensões do Sublime realmente funcionam, elas não causam travamento nem reiniciando o programa quando você está usando elas.
Suporte e maior parte das linguagens de codificação:
Possui um suporte a praticamente todas as linguagens de programação e isso se reflete no auto-complete bem como a coloração das tags facilitando identificar os códigos.
Continuidade garantida, é pago:
Essa garantia de que você vai ter o programa e que vai ter suporte não é dos maiores argumentos pois hoje em dia, os programas gratuitos possuem comunidade que sustentam esta continuidade por paixão, que é uma grande força. Mas o poder de um software comercial fazem com que a coisa se torne realmente obrigatória e mais garantida. Isso faz com que aquele momento de vida da pessoa que não está com tempo de atualizar o melhorar a ferramenta afete o contínuo aprimoramento dela.
Obs: A única desvantagem se é que se pode ser justo com os outros editores é que ele é pago e a licença não é das mais baratas, comprei a minha por 70 doletas…220 reais na época, mas achei muito bem gasto.
ATOM:
 
Começou inspirado no Sublime Text mas hoje possui identidade própria. Pra conhecer ele e um pouco da história dele basta ver meu post mais antigo que falo sobre este Editor. Sem palavras, hoje é o bicho e possui uma comunidade apaixonada assim como eu por ele que com certeza já o transformou no principal concorrente do Sublime Text, deve superá-lo e na minha opinião é um forte candidato a ameaçar (por que não) as grandes IDE´s do mercado no futuro.
Gratuito e de código aberto:
É sustentado por uma comunidade cada dia mais e mais apaixonada por ele, seu código aberto faz toda diferença e por ser muito bem estruturado permite que até pessoas que não entendem de programação possam contribuir com a ferramenta.
Criado pelo GITHUB,  já é grande coisa né:
Com certeza ter sido iniciado pela comunidade do GITHUB é um peso enorme, sua integração com ele bem como com o GIT, seu padrinho é outra grande vantagem deste editor.
Visual inovador, muita liberdade na hora de personalizar:
Excepcional. O Atom permite que você personalize completamente tudo nele. Sem nenhuma exceção, seu código aberto juntamente com o inspetor de códigos dentro dele faz com que você possa transformar o Atom como bem entender. Isso é realmente fantástico.
Infinidade de extensões que crescem vertiginosamente a uma velocidade absurda muito à frente de qualquer outro editor no mundo:
Isso mesmo. A comunidade deste Editor é tão grande mas tão grande que podemos encontrar hoje em dia extensões que não existem em outros editores e não somente isso. Fazer estas extensões não é uma tarefa difícil com código aberto. Sabendo um pouco de Json, ou coffescript e css você consegue facilmente fazer um “package” pro Atom. Eu mesmo tenho um que criei…(https://github.com/thiagolucio/toolbar-iconshortcuts)
Configuração, e instalação de pacotes e temas, etc. Tudo em interface gráfica:
Mesmo tendo de configurar algumas coisas via codificação o Atom possui uma interface para gerenciar pacotes ( extensões, temas, etc) e versões dele. Também possui acesso via interface pra  configurar a fonte do editor, tamanho da mesma, entre as possibilidades visuais dele.
Suporte e uma boa gama de linguagens:
O Editor possui um suporte a uma grande gama de linguagens de programação e com isso fica mais fácil programar.
Arquivos de preferências, configurações e extensões separados:
Parecido com o Sublime text o ATOM possui uma pasta criada em seu perfil de usuário onde coloca todas as extensões que você instalou, seus arquivos de personalização como Snippets e preferências. Ao instalar uma nova versão isso não se perde.
As Desvantagens:
Bom, é complicado. Isso é um reflexo de ser desenvolvido por comunidade onde muitas pessoas produzem tudo a uma velocidade grande, não existe hierarquia de produção e a coisa pode descambar um pouco sendo complicado controlar tanta produtividade e pessoas.
A melhor frase pra isso seria…ATOM é pra quem sabe e não pra quem quer.
Instabilidade:
O Atom não é uma ferramenta instável. Trava com uma certa facilidade dependendo do arquivo que estamos tentando abrir, em momentos em que estamos programando, ou quando tentamos executar uma extensão ou sobre o código. Realmente não é incomum estarmos trabalhando com ele e simplesmente parar tudo nele, depois de um tempo aparecer aquela janela branca informando que parou.
Muito dependente de APM e NPM, complicações para os usuários comuns:
O Atom usa muito o APM (Atom package Manager) e NodeJS módules e NPM pra trabalhar e com isso quando precisamos configurar um Proxy por exemplo, é uma verdadeira odisséia, demorada e cheia de erros que virá pela frente, no final você consegue mas muita gente desiste por isso. Dá trabalho e você comerá muita tela de CMD e Bash até terminar e conseguir o que quer.
Bugs constantes na instalação de Pacotes:
Muitos pacotes por depender do GITHUB e por depender das pessoas que os desenvolvem vivem dando problemas, principalmente de dependências e ai entra de novo o Bash e o NPM pra ir lá na pasta e baixar as dependências diretamente nelas, ver as mensagens de erros e muitas vezes fazer o download manualmente e isso é realmente um saco. Perde-se muiiiito tempo com isso.
Toda hora sai uma versão nova:
É quase como patrulhar ou monitorar seu filho ou cachorro, praticamente toda semana temos uma ou mais atualização de versão. As vezes estamos atualizando um pacote e descobrimos que saiu uma versão nova ou instalamos uma versão ontem e hoje já tem outra. Isso é bom porque quer dizer que estão sempre melhorando e corriguindo a ferramenta mas é ruim pela necessidade de ficar sempre de olho nisso, as vezes tendo de parar o projeto que estamos trabalhando pra poder atualizar.
Versão executável do instalador do windows muito sujo:
O Instalador executável do windows deixa tudo muito sujo. Você instala uma versão nova no seu PC e ele guarda uma ou duas versões anteriores sem deletar as pastas e com isso acaba por ter um arquivo grande sem necessidade. As dependências e extensões já baixam uma grande quantidade de arquivos e isso tudo é ruim também. O melhor mesmo é instalar a versão zipada na raiz do seu PC, você deleta a velha e baixa a nova zip e descompacta diretamente na sua raiz do S.O e com isso elimina o problema da sujeirada.
Obs:
Apesar de ter vários pontos negativos o ATOM vale demais à pena usar e instalar no seu PC. Mais ainda codificar, realmente pra quem gosta como eu de editores é um prazer enorme começar a mexer numa ferramenta no status que o ATOM está hoje em dia. Os desafios da ferramente, passar pelas dificuldades e conhecer e dominar ela é muito legal. Vale bastante à pena porque é uma ferramenta cada dia mais excepcional. Ainda acho que vai virar a minha predileta.
BRACKETS:
 
Criado pela Adobe na sua proposta de possuir um Editor de Códigos sem fins lucrativos e de código aberto o Brackets possui uma comunidade considerável. Muitas pessoas como eu já o usa e também é promissor. Pelo menos é o que parece mas não dá pra afirmar.
O Brackets possui boa interface gráfica e a cada dia melhora mais e mais sua usabilidade. Pode-se configurar as proriedades básicas como tema, cores, fontes via tela gráfica como o ATOM, é uma ferramenta bastante estável e também possui muitas extensões.
Possui algumas características nativas muito legais como mostrar a cor do código de cores quandose coloca o mouse sobre ela via tooltip e o auto-complete é eficiente.
O visual é parecido com o sublime text mesmo mas também possui identidade visual própria agora.
Possui uma gama boa de extensões e plugins também de fácil visualização, comunidade ativa mesmo que não muito grande.
É leve quando não se coloca muitas extensões mas dependendo de quantas tiver instalado ele pesa, demora a carregar e a digitação fica bastante lenta e irritante. Algumas extensões também podem provocar o travamento do programa, sendo necessário até mesmo removê-las dele. Muitas extensões ficam deprecadas não sendo possível mais usá-las.
Ele também não possui muita documentação para auxiliar no conhecer o programa, tem de peneirar muito mesmo e perder bastante tempo pesquisando sobre o que deseja.
O proxy é bastante complicado de se configurar e se baseia bastante em baixar as extensões manualmente ou arrastá-las no formato zip em seu micro e soltá-las dentro do gerenciador de pacotes do programa ou simplesmente colocar a URL do github e mandar baixar mas muitas vezes também não funciona.
Suporte e poucas linguagens, se resumindo mais a Editor voltado para Webdesigners.
De todos os programas de editores mesmo sendo muito legal na minha opinião é o mais fraco e o que menos tem a tendência de virar uma IDE no futuro.
Gosto dele, como já disse sou apaixonado por editores e ele não é diferente mas não é meu preferido.
 
NOTEPAD ++
 
Gosto bastante dele, nem tem muito o que dizer. Auto-complete animal, suporte e milhares de linguagens, criado e sustentado pela empresa que o criou é fiel a ser gratuito, leve demais, cheio de recursos, configurável com telas gráficas e bastante focado.
Uma ferramenta fenomenal e é item obrigatório no micro de qualquer codificador, mesmo os menos ativos, quebra galho oficial da raça.
Mas infelizmente o mundo mudou e o design UX e UI também…Sua tela no melhor estilo Windows 98 já foi né, bateu na porta…Se mudarem isso vai renascer das cinzas….
Mas não tem nem o que falar mal dele nem bem, é conhecido demais, só qualidades tirando a interface. Não desinstalo da minha máquina nem ferrando e também é um porto seguro pra mim quando o assunto é precisar de algo rápido.
Espero que tenham gostado, idéias são bem vindas.
Futuramente estarei fazendo posts mais específico sobre Editores.
Inté.
Padrão
Uncategorized

ATOM do GITHUB, Baita Editor.

O Github, (https://github.com/)uma comunidade de armazenamento de projetos Open Source criou um Editor de códigos em 2014 inicialmente com apenas 3 desenvolvedores, hoje conta com oficialmente com 25 mas não oficialmente com milhares. 

O nome dado ao Editor foi ATOM (https://atom.io/). E o que começou  se baseando no Famoso e consagrado Sublime Text, hoje possui identidade própria, pegando as melhores idéias do ST3 e adicionando características ainda melhores e mais bem boladas e hoje pelo menos comigo já concorre empatado com minha produtividade e uso diário em desenvolvimento.

Além de estar tão eficiente (ou mais) que o Sublime Text, o ATOM é completamente gratuito, com plugins e extensões atualizadas diariamente e a possibilidade de ser completamente personalizável pelo usuário.

O Editor que inicialmente possuia versões apenas para Mac, posteriormente criou versões para Linux e finalmente para Windows.

Sou usuário Windows e o Atom roda excelentemente em minha máquina(s). Hoje na versão 0.208.0 ele possui uma interface com identidade própria e muito agradável de se trabalhar no melhor estilo FLAT UI.

Instale a versão Zipada no Windows, “Atom.zip”:
Mesmo já existindo uma versão Windows do Atom, não aconselho a instalar a mesma. O melhor mesmo é você baixar o arquivo zipado do atom e descompactar na raiz do seu computador. Não se preocupe, toda vez que sai uma versão nova ele avisa e você vai lá e baixa de novo e descompacta novamente na raiz do seu PC.

A instalação usando o instalador automático no windows cria muita sujeira no seu PC, deixando versões anteriores instaladas e deixando a pasta do programa enorme sem necessidade. O Arquivo ZIP permite uma instalação limpa sem coisas desnecessárias, seu micro agradece.

O Editor possui uma excelente performance editando JavaScript, e não perde em nada também com CSS, HTML e outras linguagens. A única linguagem que na minha opinião ainda pode ficar melhor é o PHP mas já tá muito bom na versão atual. O tema do editor é excelente, uma conjugação de cores muito boa, dá pra trabalhar horas sem irritar a vista e você acha os trechos de código desejados muito facilmente.

Ele possui o mesmo sistema de navegação de arquivos e de execução de comandos do Sublime Text, usando as teclas CTRL+SHIFT+P ( mesmas teclas proporcionais nos outros SO´s) e digite ou pesquise todos os comandos do editor em questão.

Com o comando CTRL+P, você navega em todos os arquivos do projeto. Para busca de arquivos, o conhecido CTRL+F e CTRL+ALT+F para busca e substituição na pasta do projeto é similar a todos os outros editores.

FACILIDADE NA GERENCIAMENTO DO ATOM…

Ao contrário do Sublime Text, o Atom possui uma interface para as configurações básicas, como escolher a fonte do editor, instalar e atualizar plugins e extensões assim como gerenciar as opções das mesmas.  Bastando ir no menu superior ( File > Settings) para que a página se abra no campo do editor.  Com ela você pode instalar novas extensões procurando-as pelo nome ou nome que sugira a função desejada na extensão. Também pode definir em settings o tamanho e nome da fonte do editor desejada.  Também é possível verificar extensões que necessitem de atualização bem como o sistema.

Você também poderá mudar o tema tanto da aparência do programa quando do editor especificamente falando, as cores das letras do codificador. Você consegue fazer tudo isso apenas clicando em botões e com isso eles fizeram um baita melhoramento para aqueles que não manjam de codificação como no  caso do sublime text.

O Atom também permite total personalização de sua interface entre outros itens do editor. Agora entramos um pouco no mundo dos códigos, então se você não quer saber disso pode parar a leitura. Mas não desista lhe aconselho porque é bem fácil.

Ele no menu File > …. possui várias opções onde você poderá personalizar o navegador.

Open your config – permite que você determine parâmetros ou critérios de funcionamento dos elementos, plugins e comportamentos do editor.

Open your Keymap – permite que você crie comandos de teclado para os plugins e extensões do editor ou mudar as existente para outras conjugações que sejam do seu agrado.

Open Your Snippets – permite que você crie Snippett personalizado para seu editor, existem um texto comentado explicando como se faz um Snippet e você não precisa saber programar pra poder fazer atalhos que lhe ajudem a inserir trilhas de códigos desejadas ou outros.

Open Your Stylesheet – permite que você edite o arquivo css que contém a personalização do editor, alterando cores, fontes e tudo mais do editor, você pode personalizar tudo nele, muito legal.

Se não sabe o que personalizar ou o nome você pode usar o inspetor igual o existente no google crome e inspecionar os locais desejados do editor pra poder saber quais são as classes que quer mudar. Indo em View > Developper > Toggle Dev Tools (veja imagem abaixo)

Você habilita o inspetor e analisa tudo dentro do editor.

Daí é fácil, você copia a propriedade CSS desejada, cola no arquivo CSS do editor e edita os estilos desejados. 
Particularmente falando não vejo necessidade de editar nada, tudo é muito bonito e com a gama enorme de temas e temas de edição do Atom você acaba achando algo que goste muito sem fazer força e ficar perdendo tempo com isso. Os temas padrões são demais. 
Você vai reparar que ele não tem um Minimap como no Sublime Text mas basta ir lá no instalador do settings dele e baixar o Minimap. Mas as extensões e plugins vou falar em um próximo post. 
Vai fuçando o editor, baixa e instala que vale muito à pena. 
Espero que tenham gostado. 
Padrão
Uncategorized

Saiba qual a melhor distribuição do Linux para o seu computador/ notebook.


Existem muitas versões ou falando corretamente distribuições do Linux no mercado. Devido a esta grande variedade é muito comum as pessoas não saberem qual é a melhor para o seu caso ou para seu computador ou notebook. Se você for pesquisar na internet verá que existem horas infinitas de discussões sobre o assunto em sites, blogs e fóruns.  É gigantesca a quantidade de material pra leitura no assunto, sempre recheada de opiniões pessoais e tendenciosas pois quem gosta de uma determinada distribuição na maior parte dos casos defende fervorosamente a mesma de forma que no final sempre fica a dúvida.

Eu por exemplo gosto bastante do Ubuntu, mas existe muitas outras e pra você não ficar na dúvida existe um site com um questionário bastante imparcial que com meia dúzia de perguntas lhe ajuda a escolher a melhor distribuição para o seu caso. Com isso você não fica perdendo tempo procurando por ai esta informação preciosa na hora de decidir usar o linux em seu computador.
Não precisa ter conhecimento técnico nenhum para responder o questionário que nem sequer vai pedir a configuração de seu micro. Basta acessar o link abaixo e responder as perguntas e escolher a desejada, muito simples.
Até a próxima! 🙂
Padrão
Uncategorized

Saiba qual a melhor distribuição do Linux para o seu computador/ notebook.

linux

Existem muitas versões ou falando corretamente distribuições do Linux no mercado. Devido a esta grande variedade é muito comum as pessoas não saberem qual é a melhor para o seu caso ou para seu computador ou notebook. Se você for pesquisar na internet verá que existem horas infinitas de discussões sobre o assunto em sites, blogs e fóruns.  É gigantesca a quantidade de material pra leitura no assunto, sempre recheada de opiniões pessoais e tendenciosas pois quem gosta de uma determinada distribuição na maior parte dos casos defende fervorosamente a mesma de forma que no final sempre fica a dúvida.

Eu por exemplo gosto bastante do Ubuntu, mas existe muitas outras e pra você não ficar na dúvida existe um site com um questionário bastante imparcial que com meia dúzia de perguntas lhe ajuda a escolher a melhor distribuição para o seu caso. Com isso você não fica perdendo tempo procurando por ai esta informação preciosa na hora de decidir usar o linux em seu computador.

Não precisa ter conhecimento técnico nenhum para responder o questionário que nem sequer vai pedir a configuração de seu micro. Basta acessar o link abaixo e responder as perguntas e escolher a desejada, muito simples.

http://www.zegeniestudios.net/ldc/

Até a próxima! 🙂

Padrão
Uncategorized

Mostrando Arquivo que está sendo editado na árvore de arquivos da Sidebar do Sublime Text

Quando estamos trabalhando com uma arvore de projetos em nossos editores de código onde os arquivos possuem ramificação muito extensas
ferramentas e plugins que produzem a função “Reveal in the Sidebar” ou traduzindo toscamente ” mostrar este arquivo na barra lateral”
é extremamente útil de forma a não termos de ficar localizando o arquivo em questão na estrutura de pastas da Sidebar geralmente localizada do lado
direito da maior parte dos IDE´s de desenvolvimento que temos hoje.

Os únicos IDE´s que possuem essa função default que me lembro são o Eclipse e o WebStorm. Mas neste post vou mostrar uma solução para o Sublime Text que
fará com que você usufrua desta facilidade.

O Sublime text desde sua versão 2 já possui essa função nativa mas não de forma automática, você precisa clicar com o botão direito com o arquivo em questão aberto
em sua área de edição e clicar no opção “Reveal in the Sidebar” e ele lhe mostrará (imagem abaixo).

imgRevealSideBar

Outra solução mas pra quem gosta de códigos, é ir em “Preferênces -> Key Bindins – User” e inserir o seguinte código abaixo:
[
{ “keys”: [“ctrl+shift+r”], “command”: “reveal_in_side_bar”}
]

bindingKey
Com este código, ao clicar a as teclas conjugadas CTRL+SHIFT+R você habilita esta função, podendo ver o arquivo em questão sendo destacado
na Sidebar.

Mas a solução que eu mais gostei mesmo foi um plugin. Na verdade existem dois que vou deixar o URL aqui mas o que mais gostei sem sombra de dúvidas foi o

SyncedSideBar (https://sublime.wbond.net/packages/SyncedSideBar)
Com ele sem compplicação nenhuma tudo funciona de forma automática como default, instalou e ele começa a funcionar imediatamente sem necessidade de
reiniciar nem ficar fazendo nenhuma configuração e funciona maravilhosamente bem e muito rápidamente. Esse é o meu predileto que indico.

O Segundo que nem cheguei a testar mas sei que precisa ativar é o Focus File on Sidebar (https://sublime.wbond.net/packages/Focus%20File%20on%20Sidebar)
Mas ai você tem de instalar pra testar você mesmo.

Lembrando que pra instalar qualquer um dos dois basta no Editor Sublime Text, digitar as teclas CTRL+SHIFT+P e digitar “Install”
Quando a caixa de texto abrir na parte supoerior digite “SyncedSideBar” e ele aparecendo na primeira opção clique nele e se instalará sozinho.

Obviamente você tem de ter o PackageControl no seu sublime text, sem ele nenhum plugin vai ser instalado. Não sabe o que é? Então neste caso deixo por sua conta
estudar um pouco sobre o editor pois vale à pena e vou estar lhe prestando um serviço melhor do que lhe dando tudo de bandeja…Vale à pena conhecer esse IDE que
na minha opinião é o melhor que existe (sem competir com o Eclipse e Netbeans é claro).

Padrão