Autor: Rafael Franco

Starting a week with a simple development productivity tips!

Hi everyone! This is my first post in English in this blog, and i’m so excited to start a share some tips with your, now in the most used language on the word. To start 3 simple tips to improve development productivity

In advance, sorry for the mistakes… I will be better in next weeks 🙂

Basecamp

Manage your projects like a betters world professionals, if you not know Basecamp yet, this toll was developed by the  37 Signals and was built to modern teams and projects local or remote.

Th interface is simple and looks like an social network, the tool is fully integrated with social networks, e-mail and iCal calendars, moreover the cost is very low and because that all kind of companies and freelancers can use this tool.

Recently was launched the iOs app for Basecamp, that allows you to manage your projects anywhere, anytime on your mobile.

You can try it for free, Visit: basecamp.com

SublimeText

For me, and after 10 years working with a lot of development tools, this is the best code editor i really know, mostly if you spend a little time to learn how to create code snippets and install de package manager to activate the Zencode module, this is simple incredible.

The software isn’t free, but the multiple cursor tool already make the investment be worth it, certainly in a few days i will make a full post for this tool.

For now watch this video and see why this tools is so incredible.

TextExpander

Finally, other incredible tool, whit that you can create shortcuts to excerpts of text, in my case i use to expand  e Lorem ipsum , addresses, phones, signatures, and all texts i often type a lot.

Watch a little review:

Thats it, i use a lot of tools everyday but this 3 deserve mention on this first post, because that improved a lot my productivity.

Like? Dislike? Comment Above!

Until next time!

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á?

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.]

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!

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.

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.

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!

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

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

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!

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!

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.

 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.

Seria esse o sucessor do Harlem Shake? Quem vai lavar a roupa pira…

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!

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.

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