3 Dicas de produtividade para quem quer trabalhar com tecnologia

Pra começar a semana que tal algumas Dicas de produtividade?

Oi pessoal tudo bom? Para iniciar a semana resolvi listar aqui 3 Dicas de produtividade  para quem quer trabalhar com tecnologia, são apps e técnicas que utilizo no meu dia a dia de desenvolvimento web e que podem com certeza aumentar e muito a sua produtividade, vamos a elas.

Basecamp

Basecamp - Dicas de produtividade
Basecamp – Dicas de produtividade

Gerencie seus projetos como os melhores profissionais do mundo, caso você ainda não conheça o Basecamp, 3ssa ferramenta foi criada pela premiada 37 Signals e foi construida sob medida para as equipes de projetos dos dias de hoje.
A interface é simples e objetiva lembrando muito o conceito de rede social e com integração total com redes sociais, além disso o custo é muito baixo o que permite o seu uso ir desde freelancer até grandes corporações.
Recentemente foi lançado o aplicativo para iOs do Basecamp que permite o acompanhamento móvel do projeto diretamente do celular.
Você ainda pode testar grátis, acesse: basecamp.com

SublimeText
Na minha opinião e após mais de 10 anos de trabalho com dezenas de ferramentas, é sim, a melhor ferramenta de edição de código que conheço, principalmente, se você investir um pouco de tempo para aprender a criar Snippets de código, instalar o plugin de gerenciamento de pacotes e criação automatizada de html Zencode.

O software não é gratis mas a ferrmaenta de multiplos cursores já fazem o investimento valer a pena, com certeza nos próximos dias vou trazer um post dedicado apenas a essa ferramenta.

Por hora confira o vídeo que mostra o porque o SublimeText é incrível!

TextExpander

Outra ferramenta imprescindível, com ela você pode criar atalhos para trechos de texto, que podem ir, (no meu caso) de geradores de Lorem ipsum a endereços, telefones, assinaturas e tudo mais que você digita muitas vezes no dia.

Veja um pequeno Review:

 

Essas são apenas 3 das quase 10 ferramentas que utilizo e que facilitam muito o meu dia a dia, nos próximos dias vou trazer aqui uma série especial onde vou explicar cada uma delas e o porque elas são tão especiais e aumentar e muito nossa produtividade.

Até a próxima!

Media Queries. O que são? Como funcionam e como utilizar a seu favor.

Como essas pequenas técnicas de Media Queries podem e vão tornar o seu CSS muito melhor

E ai pessoal tudo bom? Voltando ao assunto da semana passada onde falei um pouco sobre design responsivo hoje vou me aprofundar um pouco mais técnicamente no assunto e falar sobre Media Queries, e como essa arma pode te ajudar a sobreviver a selva de dispositivos,  navegadores e resoluções que enfrentamos todos os dias… vamos lá?

Como sobreviver ao cenário que se torna cada vez mais complexo? Media Queries, podem ajudar!

O que são Media Queries?
Basicamente, se você se interessou em ler este post deve ter claro em sua cabeça o que são Queries, as consultas, que escrevemos normalmente para buscar em sistemas de bancos de dados.

Porém, neste no contexto de Css as queries são condições que devem ser respeitadas para que um determinado bloco de CSS seja aplicado pelo navegador, tais queries são executada também para definir a media (dispositivo) que o usuário esta utilizando no acesso dentre as opções de media, temos:

  • all  [Todo os dispositivos]
  • braille [Para dispositivos táteis.]
  • embossed  [Para dispositivos que “imprimem” em braille.]
  • handheld [Para dispositivos de mão. ]
  • print [Para impressão em papel.]
  • projection [Para apresentações, como PowerPoint.]
  • screen [Para monitores ou outros dispositivos com telas coloridas e com resolução adequada.]
  • speech [Para sintetizadores de voz. ]
  • tv [Para televisores.]
O seu site tem que funcionar em todos os lugares, quem sabe com media queries
O seu site tem que funcionar em todos os lugares, quem sabe com media queries

 

E o css que sera carregado de acordo com a media é definido conforme exemplo abaixo:

<link rel=”stylesheet” href=”arquivo.css” type=”text/css” media=”tv” />

Parte do problema esta resolvido, porém, e sempre tem um porém, dentro de cada classe de media temos aparelhos dos mais diversos, afinal um iPhone é um handheld (conceitualmente), mas renderiza as páginas de forma praticamente igual ao desktop e assim por diante

Desta forma as media queries surgem para flexibilizar um pouco mais essa dura escolha de “qual css renderizar”.

E como funcionam as media queries?

Basicamente apesar do nome queries a estrutura é bem diferente do SQL que você pode estar imaginando. As média queries trabalham basicamente com: Operadores lógicos e features (atributos), e a composição destes elementos irá permitir a você, desenvolvedor sofrido :), carregar um css de acordo com o dispositivo e manter o seu cliente feliz.

Veja alguns exemplos de media queries:

#apenas monitores e coloridos
<link rel=”stylesheet” href=”estilo.css” media=”screen and (color)” />

#monitores coloridos e projecoes coloridas
<link rel=”stylesheet” href=”estilo.css” media=”screen and (color), projection and (color)” />

Outra forma de uso

#apenas monitores com tamanho máximo de 768px de largura
@media screen and (max-width: 768px) {

}/*/mediaquery*/

Veja a lista de operadores e features disponíveis:

Operadores lógicos:

  • not
  • and
  • only

Features

  • width
  • height
  • device-width
  • device-height
  • orientation
  • aspect-ratio
  • device-aspect-ratio
  • color
  • color-index
  • monochrome
  • resolution
  • scan
  • grid

Gostou do assunto? Saiba mais aqui, aqui e aqui.

É isso pessoal, o conteúdo foi técnico porém prático, espero que essas idéias possam facilitar sua vida nos próximos projetos. Sexta que vem tem mais sobre o assunto!

 

Você sabe o que é o Glonass?

Pouco conhecido o Glonass pode melhoras os resultados das aplicações de localização via satélite

 

Pouca gente conhece ou já ouviu falar sobre o Glonass, e confesso que até a semana passada não sabia de sua existência. A todo momento utilizamos a tecnologia GPS, criada pelos E.U.A em 1972 que basicamente funciona com base em uma rede de satélites que inicialmente foi construída para o uso militar e posteriormente foi disponibilizada para o uso civil.

Entretanto o sistema GPS não é o único sistema de localização em funcionamento atualmente, a segunda opção é exatamento o Glonass, sistema de localização desenvolvimento e mantido pela Russia desde 1976, claro, também criado com fins militares e depois disponibilizado ao público.

Esse sistema passou diversos anos sem receber muita importância do governo Russo, porém o cenário mudou e o sistema foi melhorado em sua última versão o Glonass-K, a vantagem do sistema é ser gratuíto e com resolução máxima, o que não é oferecido pelo sistema americano.

Satélite Glonass K
Satélite Glonass K

Mas e como usar o Glonass?

Bom, devido a uma jogada russa, os smartphones que possuirem o sistema nativamente receberão benefícios fiscais na terra da Vodka, dessa forma muito aparelhos, como o iPhone 5, já trazem a tecnologia embutida e com alternancia automática entre as redes, o que aumenta e muito a cobertura do sinal e precisão do mesmo.

Ou seja você vai ser beneficiado utilizado dois sistemas simultaneamente e que inicialmente foram criados como competidores.

Veja na figura abaixo a cobertura das duas redes de forma simultânea, e como o uso complementar das redes pode melhorar os resultados de localização.

Gps + Glonass
Gps + Glonass

Vejo o vídeo abaixo com um pouco mais sobre o sistema integrado nos celulares e devices Qualcom equipados com Snapdragon e como os sistemas funcionam de forma complementar.

Além desses dois sistemas existem mais dois em desenvolvimento, um pela União Européia e outro pela China, que se forem integrados aos sistema elevarão a capacidade de localização a centímetros.

Até a próxima!

Robótica uma pequena introdução

Mágica, é como podemos classificar a Robótica, área que evolui a passos largos a cada dia

Sony Qrio
Sony Qrio

Bom pessoal hoje vou continuar a falar um pouco sobre o tema Robótica que iniciei essa semana com o post sobre o Lego Mindstorms colocando aqui uma pequena introdução e conceitos básicos sobre o tema

O termo Robô surgiu na peça “R.U.R” de 1921 do escritor checo Karel Capek e vem do termo checo “robota” que significa trabalho forçado, nesse contexto os robôs eram escravos criados para satisfazer a vontade dos homens,seus criadores.

Já o termo robótica foi cunhado inicialmente na história “Rundaround” de 1942 escrita por Isaac Asimov escritor nascido na Russia e famoso por suas obras sempre ligadas a tecnologia. Também foi o responsável por introduzir o termo cérebro positrônico que é o “precursor” do microprocessador.

As 3 leis da robótica
Essas leis foram apresentadas no livro Eu Robô de Assimov e até hoje se mantêm como um norte para a área e são

Um robô não pode ferir um ser humano ou, por inacção, permitir que um ser humano sofra algum mal.
Um robô deve obedecer às ordens que lhe sejam dadas por seres humanos, exceto nos casos em que tais ordens contrariem a Primeira Lei.
Um robô deve proteger sua própria existência, desde que tal proteção não entre em conflito com a Primeira e Segunda Leis.

Evolução da Robótica

Robô Unimate
Robô Unimate

1968-1969 : Kawasaki licença os robôs hidráulicos projetados pela Unimation e inicia a produção no Japão.

1969: Na universidade de Stanford um braço robô é desenvolvido e se transforma em um padrão para projetos de pesquisa, o mesmo é impulsionado eltricamente e controlado por um computador, torna-se conhecido como o braço de Stanford.

1973: Milacron T3 – O primeiro robô manipulador industrial controlado por um minicomputador é desenvolvido por Richard Hohn. Diversas linguagens de programação para robôs surgem, como WAVE e AL.

Década de 80 – Acontece o maior crescimento de manipuladores industriais, alimentado principalmente pelo aumento da qualidade e a diminuição do ciclo de vida da indústria automobilística.

1982– Robótica é reconhecida como tecnologia estratégica pela Organisation for Economic Cooperation and Development.

Década de 1990 – Vêm as aplicações de robôs se expandindo para a industria de serviços e é dado início do uso doméstico.

Século XXI – Diversas novas aplicações para robôs surgem todos os dias. Novas empresas são criadas e se fundem. Pesquisa com ênfase em humanóides.

Essa foi uma breve introdução ao assunto Robótica, na quarta que vem irei falar um pouco mais sobre o uso de robôs na automação industrial!

Gostou? Não gostou? comente abaixo!

Google divulga especificações do Glass

Novidades sobre o produto mais esperado do ano, depois de anunciar os primeiros detalhes sobre a API de desenvolvimento para o sistema (vídeo abaixo) a empresa acaba de divulgar as específicações técnicas da linha Explorer que será disponibilizada pelo valor de 1500 dólares.

O óculos irá funcionar sincronizado via Bluetooth com um telefone que permitira o acesso a internet, porém para utilizar o GPS e SMS na lente será necessário o aplicativo MyGlass, até o momento disponível apenas para Android 🙁

Esta versão do dispositivo contará com uma câmera de 5 megapixels, que poderá captura vídeo em até 720p, o produto contará com memória Flash de 16gb e bateria disponível para 1 dia de uso “normal”

Algumas características:

DISPLAY
Alta resolução equivalente a uma TV de 25″

CAMERA
Fotos – 5 MP
Video – 720p

AUDIO
Bone Conduction Transducer

Redes
Wifi – 802.11b/g
Bluetooth

Disco
16 GB

Bateria
1 dia

Carregador
Micro Usb

É isso, pouca coisa para us$ 1500? É o preço da inovação!

Lego Mindstorms, e uma pequena introdução a robótica

Bom dia pessoal, espero que todos tenham uma ótima semana! No primeiro artigo desta semana quero falar um pouco sobre um produto que tive contato a pouco mais de dois meses, durante minhas aulas, introdutórias, de robótica. Trata-se do Lego MindStorms, que apesar de ser um produto da famosa Lego  é muito mais do que um brinquedo.

Mas o que é o Lego MindStorms?

Bom, de forma bem simples trata-se de kit composto de um controlador, alguns motores, eixos, e centenas de peças de Lego que permitem ao usuário construir dezenas de robôs diferentes, sim robôs, e o melhor de tudo:  programáveis.

Ou seja, você monta o robô escreve o programa para eles executar, transfere via Usb ou infravermelho e pronto! Daí basta usar a imaginação.

Veja abaixo alguns vídeos de robôs MindStorms em ação:

E aí curtiu? Demais né, bom mas e como programar o Lego MindStorms? Bom vamos a alguns conceitos básicos, primeiro a linguangem de programação, trata-se do NQC, uma linguagem escrita por Dave Baum, projetada especialmente para os robôs Lego.

Apesar de pouco conhecida a linguagem pode ser considerada simples e de fácil aprendizado, bastando um pouco de prática para que você possa domina-la, a IDE de desenvolvimento utilizada será o RCX Command Center, ele vai ajudar você a escrever o código, compilar e enviar aos robôs.

Bom, até aí tudo bem, mas que tal darmos uma olhada em um programa simples?

task main() {

 OnFwd(OUT_A); 
 OnFwd(OUT_C); 
 Wait(400); 
 OnRev(OUT_A+OUT_C); 
 Wait(400); 
 Off(OUT_A+OUT_C); 

Algo bem simples para começar , os programas NQC sempre são compostos de tarefas daí o código estar englobado em “task” sendo “main” a sua tarefa inicial. A partir desse ponto temos as instruções (statements), sempre finalizados por ; como qualquer boa linguagem de programação 🙂

Analisado as instruções temos:

OnFwd(OUT_A);
Este comando diz ao robô para habilitar (energizar) a saída A, isto é, o motor conectado à saída A do RCX girará para frente. Ele moverá com a velocidade máxima, a menos que a velocidade seja configurada antes da execução deste comando

OnFwd(OUT_C);
Semelhante à instrução anterior, porém agora girará o motor C. Após a execução desses dois comandos, ambos os motores estarão girando e o robô se move para frente.

Wait(400);
Agora é hora de esperar por um período de tempo. Esta instrução nos diz para aguardar pelo período de 4 segundos.

OnRev(OUT_A+OUT_C);
Tendo o robô se movimentado o suficiente para frente, diremos a ele para se mover no sentido reverso, ou seja, para trás. Observe que nós podemos configurar ambos os motores de uma única vez, utilizando OUT_A+OUT_C como argumento. Nós poderíamos ter combinado as duas primeiras instruções desta maneira.

Wait(400);
Novamente, esperamos por 4 segundos.

Off(OUT_A+OUT_C);
E, finalmente, desligamos ambos os motores.

Bem simples, bem direto, mas esse é apenas o começo dentro da infinidade de possibilidades que o kit Mindstorms nos dá, nos próximos dias vou trazer aqui mais algumas dicas sobre a linguagem NQC e a utilização de robôs MindStorms!

Um Abraço e até a próxima.


	

Layout / Design Responsivo você ainda vai ouvir falar muito disso

Saiba como o que é design responsivo e como ele é importante para manter suas aplicações acessíveis

Da mesma maneira que você que trabalha com internet começou a usar do dia pra noite os termos como Ajax, Tableless, Web 2.0, Seo etc… Você vai começar a ouvir cada vez mais os termos layout / design responsivo, mas o que é isso afinal? Mais uma buzzword?

Deixe-me pensar… Um conceito interessante.

De forma conceitual, não estamos falando de nenhuma revolução, porém com o crescente uso de diferentes “devices” no acesso a internet além das centenas de resoluções possíveis exibir o conteúdo de forma mais adequada ao dispositivo do usuário se tornou mandatário para aplicações web de alto padrão.

Algum tempo atrás bastava manter o site dentro dos 960px de largura testar em alguns navegadores e ok… No início era assim, e foi bom, mas tudo mudou. Hoje o seu site esta sendo acessado do Xbox em uma tela de 50 polegados, ou em um tablet xing-ling de 7″ 8″ 9″ 10″ 11″, do iOs do Android, ou do WinMobile ou seja o padrão é: não temos padrão.

Com base nesse cenário caótico a preocupação em como seu site será exibido se torna cada vez mais relevante, pois não queremos perder nossos visitante por que nosso conteúdo não carrega de forma adequada, e é nessa hora que ou você usa um Layout / Design Responsivo ou você faz 20 sites diferentes.

Manter a linkagem original

Uma das grandes vantages de utilizar este conceito na criação de aplicações web é a manutenção dos links originais do conteúdo independente do dispositivo ou resolução utilizada, o que aumenta a relevância do conteúdo pois o acesso não é dissipado entre diversas urls como os famosos (m.site.com.br) não prejudicando dessa forma nossas estratégias de SEO

Alguns exemplos de sites com design responsivo, acesse do celular e veja:

* Globo.com
* Uol.com.br
* Midiatismo

Mas afinal o que é isso?

De maneira geral é uma layout / design / html / css construído de forma a se adaptar a qualquer resolução/device de forma automática, sem a necessidade de criação de diversos sites diferentes.

Veja na figura como o site deve se comportar:

Isso custa?
Sim custa, o projeto deve ser pensado com base nesta premissa desde o início, caso contrário você precisará reescrever boa parte do seu site.

Porém o benefício também é bem claro, além da melhor experiência proporcionada aos seus usuários, o Google já deixou claro que para a área de SEO o design responsivo é o mais adequado.

Por onde começar?

Bom, pra começo de conversa, se você chegou aqui, é por que já conhece o W3C, a importância de seguir os padrões web, acessibilidade, qualidade de código etc…

Se esse não é o seu caso, volte 10 casas, aprenda primeiro sobre a qualidade do seu HTML/CSS, pode começar por aqui.

De toda forma existem alguns frameworks que podem ajudar nessa tarefa, os quais ainda não testei, por isso não posso dizer se são bons ou não mas veja a lista

  • Foundation (http://foundation.zurb.com/)
  • Fluid Baseline (http://fluidbaselinegrid.com/)
  • Frameless (http://framelessgrid.com/)
  • Skeleton (http://www.getskeleton.com/) – Leia aqui minha análise
  • Golden Grid (http://goldengridsystem.com/)
  • Boostrap (http://twitter.github.com/bootstrap/)

O assunto não termina aqui e ainda vou entrar nos detalhes mais técnicos como

  • Os tipos de design
  • Análise de frameworks
  • Media Queries
  • User Agent

Mas isso fica para o próximo artigo, sexta que vem, de toda forma analisando esse cenário podemos concluir que aplicações web cada mais não são coisa pra amador, bom fim de semana!

 

Codassium, facilita a o processo de seleção de desenvolvedores.

Atualmente quase toda empresa tem a necessidade recrutar bons desenvolvedores, e este tem sido cada vez mais um processo difícil para dizer o mínimo, para tentar reduzir os problemas encontrados neste processo a Codassium desenvolveu uma ferramenta capaz de possibilitar entrevistas remotas com foco basicamente no que realmente importa, qualidade de código.

Combinando um editor de código colaborativo e uma ferramenta de chat com vídeo e áudio, o Codassium busca facilitar o processo de recrutamento e seleção de desenvolvedores, pois possibilita que o entrevistador (capacitado para isso), possa solicitar o desenvolvemto de uma funcionalidade simples, e acompanhar on-the-fly como o desenvolvedor resolve a questão.

Tela da aplicação Codassium

Outro ponto interessante é que a ferramenta de vídeo funciona sem o terrível plugin do Flash, o ponto negativo é que até o momento a solução funciona apenas no Google Chrome.

O editor de texto esta preparado para highlight de linguagens como Javascript, Python C++ dentre outras…

O desenvolvimento da ferramenta foi feito pela Wreally Studios, uma pequena empresa de Los Angeles, e se você precisar entrevistar um desenvolvedor vale a pena testar, fica a dica.

http://codassium.com/

Fonte: http://techcrunch.com/2013/04/10/hiring-developers-codassium-mashes-up-a-collaborative-code-editor-with-real-time-video-chat/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+Techcrunch+%28TechCrunch%29

Ousadia ou falta de foco?

Nos últimos dias uma das grandes “polêmicas” da web tem sido o vídeo produzido para o lançamento do novo Mercedes Benz, aliás o vídeo não, ah trilha sonora escolhidas.

Se você não sabe do quê estou falando veja o vídeo abaixo:

O que você acha? Nada contra o funk carioca, mas basta ver a guerra nos cometários do vídeo para dizer que no mímino a campanha agradou um público que neste momento não é necessariamente consumidor do produto.

Independente da discussão musical e de classes sociais que o vídeo gera, ao meu ver a ação me pareceu como colocar um outdoor em São Paulo de um Supermercado que só existe em Recife, para dizer o mínimo.

Em tempos, fãs da BMW encheram o Youtube com algumas respostas ao vídeo da Mercedes, veja abaixo:

E você o que achou da camapanha? Ousada ou fora de foco?