Javascript - Apresentando seu aplicativo com o Shepherd

Em certas ocasiões, você tem uma tela muito complexa em seu aplicativo web/mobile onde o usuário pode ficar facilmente perdido em meio à um grande volume de informações e campos que aparecem para ele. Criar telas intuitivas pode ser trabalhoso ou às vezes não é o suficiente.

O shepherd.js pode ajudar você a resolver este problema! Ele permite criar uma apresentação ou um pequeno "help" de seu app. Ele faz isto através de tooltips destacados na tela, onde você pode informar para que cada sessão serve ou o que deve ser informado em determinado campo. Veja uma demonstração clicando neste link.

Este post mostra como criar uma apresentação de tela quando o usuário a acessa pela primeira vez.

Ruby - Criando uma API REST com o Sinatra

O Sinatra é um framework para a linguagem Ruby utilizado em aplicações simples que não necessitam de tantos recursos como o Rails. Ele é ideal para criar pequenas aplicações web e APIs REST.

Em poucos instantes você pode criar um servidor que responda a uma requisição HTTP. Por exemplo:

 require 'sinatra'  
   
 get '/hi' do  
  "Hello World!"  
 end  

Executando o arquivo acima, um servidor em sua máquina estará respondendo Hello World ao acessar http://seu_endereço/hi no navegador.

PHP - Twig

Quem trabalha com PHP há algum tempo provavelmente conhece algum sistema de templates (template engines). Estes fornecem uma maneira fácil e prática de separar o código responsável pela lógica e o HTML (camada de apresentação). Esta separação torna a manutenção menos custosa, principalmente quando os programadores frontend e PHP não são os mesmos profissionais.

Existem inúmeras template engines disponíveis. O Twig se destaca por ser rápido, flexível, seguro, fácil de dominar e de sintaxe amigável. Este post mostra como criar seu primeiro template com o Twig.

Javascript - DOM Image Object

Para cada tag <img> em uma página HTML, um Image é criado. O objeto document possui a lista de imagens inseridas no documento.

 document.images  

Instâncias deste objeto podem ser inseridas no DOM para exibir imagens dinamicamente, assim como manipular seu estilo. Este post possui três técnicas que podem ser úteis em um projeto web:

- Obter largura e altura de uma imagem;
- Abrir imagens codificadas em base64;
- Abrir imagens pela url e obter a mesma codificada em base64;

Javascript - Bloquear abertura de página em um iframe

Eu estava navegando no The David Wash Blog quando me deparei com um snippet interessante! Trata-se de um código em javascript que bloqueia a abertura de um documento web dentro de um iframe.

Talvez você não queira que seu site/aplicativo seja aberto dentro de um frame por motivos de segurança, ou talvez você não ligue para isto. De qualquer forma, é interessante vê-lo funcionar.

 <script>  
  if (top.location != self.location) {  
   top.location = self.location.href;  
  }  
 </script>  

HTML5 - Web Speech API

A Webspeech API foi introduzida no final de 2012 e permite aos desenvolvedores criarem um aplicativo que reconheça a voz do usuário e traduza suas falas em um texto. O Chrome foi o primeiro navegador a implementar tal recurso que atualmente pode ser utilizado também no Safari, Opera e Firefox.

Neste post, você encontra um exemplo de implementação.

HTML5 - Criando apps nativos para Android utilizando Apache Cordova

O Apache Cordova é mais conhecido por sua distribuição chamada Phonegap. Com o Apache Cordova você pode programar aplicativos utilizando as tecnologias: HTML + CSS + Javascript e transformá-lo um aplicativo nativo para diversas plataformas como Android, IOS, Android, Blackberry e Windows Phone. Além disso, existem plugins que permitem utilizar recursos como câmera e acelerômetro do dispositivo.

Mais detalhes sobre a plataforma em: https://secure-software.intel.com/sites/billboard/sites/default/files/downloads/SP12_SFTS004_103_PORpm.pdf

Este post mostra como utilizar o apache cordova para criar uma aplicação nativa android programando em javascript e utilizando HTML + CSS.