Configurar Route 53 para usar o e-mail do Google

1° Acessa a sua conta da AWS, vá em Route 53 e selecione seu domínio:

1

2° Crie um nove Record Set do tipo MS e insira os valores do Google

2

3° Teste se deu certo.  Descubra o nome dos seus servidores através deste site http://www.kloth.net/services/nslookup.php . Insira o domínio e escolha a informação que você quer encontrar, no nosso caso escolha MX e veja se o resultado é o mesmo do Google.

3

 

Pronto =]

Permission denied public key bitbucket

Problema para fazer o push para seu repositório aqui está algumas dicas para resolver (em Windows):

1°: Encontre sua SSH id_rsa.pub. Geralmente ela se encontra no Windows nessa pasta C:\Users\seu-usuario\.ssh.

2° Copie o conteúdo da chave, que será semelhante a este:

ssh-rsa AAAAB3NzaC1yc2EAAAABIwAAAQEAwrUAM8H5EsDBtaMy2/3w2sK9fIR2OLR2HyM/QHwX/KbKSq1B0t+3JMwVrihGOlQYV5hI8frPUR56ACbIwCHkYmORPnM/HZaonhWY2DMYLMohYPOAh6tFwNByV9v7R++15y1PvyXJv3DMnpaqorlautL3ffpZ2UwZH6oo9OqxbeZv4okSQb1LX45/PMMkQJ6NaLSDoYP0fT66qVeNyEpxdxz5HOGZJdR4fc7PlC72IOwcsDYuyXMUiqyS2e+NwyT6+NcpRE4xPOPbZ39o4x2uq5FuOvsbalWQlY0/nV37EYyLjjj/pD4+AbC5irV8E45Lagtp0vrKVO4aoxOQitu62Q== xxxxxxxxxxxxxxxxxxxxxxxxx

3° Acesse sua conta de usuário no Bitbucket. Manage Account > SSH Keys

4° Clique em Add Keys ou Adicionar Chave, crie um título e Cole o conteúdo da sua chave id_rsa.pub no campo Key. Em seguida salve.

5° Teste a conexão via terminal (eu uso o Git Bash).

ssh -T git@bitbucket.org

Apresentará esse resultado

logged in as seu-usuario

Pronto já pode realizar o push normalmente =] …

10 Effective Video Examples of Paper Prototyping

Paper prototyping is a commonly used low cost usability method for testing and evaluating web designs and applications. This method lets developers conduct tests before a single line of code has been written, and allows you to identify and fix any potential issues early on in development.

Paper prototyping is a variation of usability testing where representative users perform realistic tasks by interacting with a paper version of the interface that is manipulated by a person ‘playing computer,’ who doesn’t explain how the interface is intended to work.” Quote from Carolyn Snyder.

In this post we have collected our top 10 videos that not only illustrate how effective paper prototyping can be, they also show you how to cost effectively conduct your own tests and some of the videos have been animated, which are just amazing to view.

If you would like to know more about Paper Prototyping, you can try these useful resources:
• Paper Prototyping by Shawn Medero (A List Apart) »
• What is Paper Prototyping? (paperprototyping.com) »
• Paper Prototyping: Get User Data *Before* Coding (Jakob Nielsen’s Alertbox) »
• Paper Prototyping Methods (UsabilityNet) »
• Five Paper Prototyping Tips (uie.com) »
• Paper Prototyping on Wikipedia »
• Paper Prototyping PDF from ibm.com »

Paper Prototype Animation

Hanmail Paper Prototype


This video is a paper-based prototype for Daum’s web mail service, Hanmail.net made with Ajax.

Paper Prototype Website – Testing a Web Shop

The goal of this prototype is for the user to find and order a red (or purple)shirt with turtleneck for this prototype.

Usability Testing with a Paper Prototype

The video shows a Usability session with a paper prototype of a leave application.

Paper Mock-Up – Trip Plannin Concept

 

Lo-fi Web Prototyping

PhotoTron Paper Prototype

Paper Prototype Testing for User Centered Interface Design at Ai Minnesota.

Paper Prototype Demonstration

This is a demonstration of how to use a simple paper prototype technique to design the composition of a webpage.

iPhone App Paper Prototyping

 

Paper GMail Art

This video is not quite a paper prototype usability test, but it is pretty cool, and it has been built with paper after all. Its a video that Saatchi Moscow created and produced for Google to attract more Russian people on GMail. Enjoy.

IMG_1392

Sketching

Artigos

http://uxdesign.smashingmagazine.com/2013/06/24/sketching-for-better-mobile-experiences/

http://uxdesign.smashingmagazine.com/2011/12/13/messy-art-ux-sketching

http://uxmag.com/articles/introduction-to-design-studio-methodology

http://52weeksofux.com/post/346650933/sketch-sketch-sketch

http://webdesignledger.com/inspiration/inspiring-ui-wireframe-sketches

Inspiração

http://ui-patterns.com/

http://www.uiparade.com/

http://patterntap.com/

Mobile

http://inspired-ui.com/

http://pttrns.com/

http://www.lovelyui.com/

http://www.mobile-patterns.com/

http://www.android-app-patterns.com/

App

https://protosketch.uistencils.com/

http://popapp.in/

Templates (Mockup / Wireframe)

http://www.smashingmagazine.com/2010/03/29/free-printable-sketching-wireframing-and-note-taking-pdf-templates/

http://sneakpeekit.com

grunt1-510x269

Rapidez no seu fluxo de trabalho com Grunt.js

Este tutorial é para quem já tem conhecimento prévio sobre node.js e vou utilizar como exemplo o projeto padrão do zurb foundation  no ambiente Windows.

Vamos lá, vantagens de usar o Grunt:

* Apaga todos os comentários e “logs” dos seus js;
* Minifica, concatena todos os seus css e js;
* Otimiza imagens;
* Torna sua produção em livereload, onde a cada alteração no arquivo já atualiza no navegador automaticamente;
* Cria projetos padrões para criação de plugins para JQuery, seu próprio plugin e etc;

Vamos instalá-lo (necessário node instalado), abra o terminal ou o bash do git no modo admin (eu prefiro usar o bash do git, pois mesmo no windows posso usar os comandos do linux)

npm install -g grunt-cli

Com isto é possível você criar um projeto onde o grunt pode realizar as tarefas que vai criar. Além disto, é necessário em seu projeto dois arquivos:

* Gruntfile.js : terá toda configuração das tarefas que serão executas e quais plugins são necessários;
* package.json : é a especificação do seu projeto, como versão, autor, dependedências e etc;

Vamos instalar uma lib que permite instalar templates.

npm install -g grunt-init

Agora é possível você usar os templates para construir seus projetos. Eles são configurações padronizadas que agilizam o início do seu desenvolvimento, em suma, um scaffolding (http://gruntjs.com/project-scaffolding).

Ex:
git clone git@github.com:gruntjs/grunt-init-commonjs.git ~/.grunt-init/commonjs

Se acontecer alguma problema de “Permission denied (publickey)” é por que sua chave pública SSH o github não a reconhece, neste caso você deve criar uma nova chave (https://help.github.com/articles/generating-ssh-keys) e em seguida coloca-lá nas suas configurações do git(https://github.com/settings/ssh).

Agora vamos configurar nossa app.

Estamos na pasta do exemplo, e criaremos um Gruntfile básico, mas antes precisamos fazer o download do seu template.

1
Diretório do exemplo

git clone https://github.com/gruntjs/grunt-init-gruntfile.git ~/.grunt-init/gruntfile

Após instalado, podemos configurar:

grunt-init gruntfile

2

3

Será criado o arquivo Gruntfile.js, nele consta várias tarefas separadas por variáveis. Vamos abrir o arquivo e acompanhar:

banner: server para montar um comentário especial em seus arquivos informando a versão, a data da última versão, nome do autor, licensa e etc. Ela depende do arquivo package.json que contém as informações do seu projeto;

concat (concatenar js e css),  uglify (minificar js), jshint (corrigir erros de sintaxe), qunit (testes de js), watch (servidor que “assiste” as alterações nos arquivos): São variáveis que contém os paramêtros para realizar as tarefas;

grunt.loadNpmTasks(‘grunt-contrib-******’): Carrega os plugins necessários para as tarefas serem realizadas;

grunt.registerTask(‘default’, ['jshint', 'qunit', 'concat', 'uglify']): Registra as tarefas que serão executadas na ordem especificadas no array;

Neste template (gruntfile), ele traz a configuração padrão acima, entretanto ela nos servirá de base e vamos alterá-la pois usaremos 2 libs: concat, uglify e  acrescentaremos o cssmin.

Em seguida é necessário instalar os plugins que farão todo o serviço pesado pra gente, como minificar, concatenar e salvar em uma pasta separada. Os plugins serão executados dependendo do modo como configurar o Gruntfile(http://gruntjs.com/sample-gruntfile). O “–save-dev” significa que serão instalados os plugins também no seu projeto localmente em uma pasta chamada “node_modules”.

Ex:
npm install grunt-contrib-uglify --save-dev
npm install grunt-contrib-qunit --save-dev
npm install grunt-contrib-concat --save-dev
npm install grunt-contrib-jshint --save-dev
npm install grunt-contrib-watch --save-dev
npm install grunt-contrib-less --save-dev
npm install grunt-contrib-cssmin --save-dev

Os plugins acima são os principais do Grunt. Mas vamos instalar somente o que queremos:

npm install grunt-contrib-uglify --save-dev
npm install grunt-contrib-concat --save-dev
npm install grunt-contrib-cssmin --save-dev

4

Ele criará uma pasta node_modules e incluir os plugins que instalamos:

5

Vamos limpar nosso Gruntfile.js colocando somente as tarefas que vamos usar, como na imagem abaixo (download do código):

7

Vamos explicar cada parte:

1. Criamos algumas variáveis indicando as pastas do fonte do JS , CSS e onde queremos que as alterações sejam salvas, na pasta dist (a pasta é criada);

2. Indica duas tarefas: js-> vai pegar todos os arquivos *.js e concatená-los em seguida serão salvos no destino (dist/grunt-test.js). O mesmo ocorre com a tarefa css, a diferença é que indiquei a ordem e especifiquei os arquivos para serem concatenados. Quando você não especifica os arquivos são concatenados por ordem alfabética, assim é sempre bom especificar a ordem no array;

3. No uglify indica a tarefa de minificar js que já concatenamos (já se encontra na pasta dist). 3.1 é a origem do arquivo e o 3.2 é o resultado e onde será salvo (dist/grunt-test.min.js). O mesmo ocorre para cssmin;

Pronto, Gruntfile Ok. Vamos criar o package.json.

npm init

5 4

Percebemos que o package já reconhece as libs que estamos usando e já acrescentam-nas no arquivo padrão.

Pronto! Vamos minificar e concatenar!

grunt

8

9

Podemos perceber que criou os arquivos na pasta dist, com o nome do projeto e minificados =D … só com um comando!

O Grunt tem vários outros plugins que podem te ajudar na otimização de imagem, compilação de LESS e SASS, e etc.

Também tem esse ótimo artigo sobre o assunto: http://blog.caelum.com.br/automacao-de-build-de-front-end-com-grunt-js/

Qualquer dúvida, é só comentar. =]

Assim, é o que me interessa…

%d blogueiros gostam disto: