Miguel A. Pedregosa – Desarrollo web y móvil

Popcorn.JS es una librería Javascript de código abierto, ha sido creada por la fundación Mozilla con la intención de llevar la experiencia audiovisual en Internet hasta un nuevo nivel. La citada librería permite modificar elementos de una página web basándonos en la posición en la que se encuentre la reproducción de un vídeo.

Popcorn.JS

Es decir, podemos mostrar una información u otra en la web según el fragmento actual que estemos visionando. Estos fragmentos se definen mediante un punto inicial (medido en segundos) y final del vídeo. Podemos ver un ejemplo aquí.

Una posible aplicación de la librería nos permite mostrar información (extraída desde Wikipedia) del lugar que estamos viendo en una película, mostrar la localización en Google Maps donde se rodó la escena la escena actual o mostrar los últimos tweets relacionados con cualquier cosa que aparezca en el vídeo. Si esta tecnología llega a expandirse y tener éxito dentro de poco podremos deleitarnos con nuevos trailers o cortos de películas especialmente preparados para disfrutarse en un navegador web.

Fuera del mundo cinematográfico, Popcorn.JS puede tener muchas aplicaciones dentro del campo de la enseñanza y aprendizaje virtual, mejorando la información que reciben los alumnos al mismo tiempo que el profesor explica los conceptos mediante un vídeo ilustrativo.

Popcorn.JS está construido con una serie de plugins que nos permiten mostrar información de muy diversas fuentes o repositorios. Entre estos plugins podemos encontrar añadidos para Flickr, Twitter, Google, Last.fm, Wikipedia, …

Funciona sobre HTML 5 y es muy sencillo de implementar en nuestros proyectos. Una vez que hayamos incluido las librerías necesarias, las llamadas para mostrar contenido según la posición del vídeo serán muy sencillas, similares a esta:

pop.wikipedia({
    start: 12,
    end: 14,
    target: 'wiki',
    src: 'http://en.wikipedia.org/wiki/Elizabeth_II',
    title: 'The Queen',
    numberofwords: 40
});

En la página del proyecto podremos encontrar abundante información sobre la librería y sobre cada uno de los plugins disponibles. Por si fuera poco, la fundación Mozilla ha creado un pequeño editor de vídeo online desde el que podremos crear nuestros trabajos con Popcorn.JS de una manera muy sencilla (actualmente este editor se encuentra en estado alpha).

Enlace: Popcorn.JS
Enlace: Documentación y ejemplos
Enlace: Código en Github

Cuando se desarrolla un proyecto a medida lo habitual es que se realice un diseño totalmente personalizado y ajustado a las necesidades del mismo. En este entorno es muy común la realización de mockups o bocetos donde el diseñador gráfico intenta plasmar las ideas del cliente sobre el proyecto.

ClickDummy es una aplicación que nos permite dotar de cierta interactividad a estos mockups que compartimos con el cliente o con nuestros compañeros de proyecto. Gracias a esta herramienta es posible añadir elementos clicables a los bocetos que permitan pasar de un boceto a otro como si estuviéramos ante una web real.

ClickDummy - mockups 2.0

En ClickDummy podemos compartir nuestros mockups con otros usuarios de ClickDummy o crear una URL de acceso para enviar a nuestros clientes. Desde la aplicación aseguran que estos enlaces públicos no son indexables por los grandes buscadores, de igual forma podemos eliminar este enlace publico para dejar los bocetos privados cuando queramos.

Aparte de los enlaces clicables en ClickDummy se pueden dejar comentarios sobre los bocetos, una forma cómoda de compartir impresiones entre diseñador y cliente.

ClickDummy es gratuito, al menos de momento.

Enlace: ClickDummy

Gracias al auge actual de los smartphones gran parte de los tradicionales usuarios de teléfono móviles ahora poseen terminales muy potentes y siempre conectados a Internet.

Entre las ventajas de los denominados teléfonos inteligentes podemos destacar la posibilidad de instalar infinidad de aplicaciones que expanden las funcionalidades del teléfono hasta límites difíciles de imaginar hace unos años.

Disponer de una aplicación en cada una de las plataformas móviles o al menos en aquellas mayoritarias se está convirtiendo en una necesidad para que marcas y empresas consigan fidelizar y atraer nuevos clientes. Sin embargo, la distinta naturaleza de cada una de esta plataformas móviles hace que sea necesario un equipo de desarrollo por cada una de ellas.

Phonegap es un framework opensource basado en html5 que permite la realización de aplicaciones móviles para 7 plataformas distintas sin necesidad de crear proyectos separados. Gracias a esta potente herramienta solamente tendremos que crear una aplicación usando estándares web como html5, css3 o javascript.

Phonegap va un paso más allá de las tradicionales aplicaciones web que se ejecutan en el navegador del terminal al ofrecer acceso a funciones nativas del hardware donde estemos ejecutando nuestro proyecto. Entre estas funciones podremos tener acceso a la cámara del terminal, al sistema de geolocalización o los contactos.

Podemos combinar el uso de Phonegap con otros frameworks enfocados al mundo del desarrollo móvil, como jQuery Mobile o Sencha Touch para crear aplicaciones realmente potentes con una facilidad asombrosa.

Phonegap se puede descargar de forma totalmente gratuita desde la página web de este proyecto, donde encontraremos suficiente información y tutoriales para comenzar la realización de nuestras aplicaciones móviles.

Enlace: Phonegap

Javascript ha pasado de ser algo odiado y repudiado por muchos a convertirse en una pieza imprescindible para la realización de complejas aplicaciones web que nada tienen que envidiar a las tradicionales aplicaciones de escritorio.

Fotografía por Dmitry Baranovskiy CC BY

A la hora de crear aplicaciones web con la ayuda de javascript nos solemos encontrar con que tenemos que realizar pequeñas tareas o rutinas que nos hacen meternos en Internet para buscar librerías que nos ayuden. Muchas veces, estas librerías son grandes e incluyen muchas más funcionalidades de las que nosotros requerimos.

Estas librerías aumentan el peso total de nuestra aplicación y hacen que el rendimiento de la misma descienda al tener que cargar mucho más código del necesario. La solución en estos casos pasa por emplear pequeñas librerías o fragmentos de código que nos implementen la funcionalidad justa que nosotros necesitamos.

Microjs es una web que reúne y clasifica decenas de estas pequeñas librerías en javascript. Aparte del listado general de todas la librerías disponibles podemos filtrar las librerías según la tarea que queramos abordar.

Para cada librería disponible podemos encontrar una pequeña descripción de su cometido, el peso de la misma en KB y el enlace para que podamos obtener el código Javascript que estamos buscando.

Sin duda, un sitio muy interesante y recomendado para tener en cuenta cuando estemos construyendo nuestras aplicaciones web.

Enlace: microjs

Notificon es una pequeña librería Javascript que nos permite añadir notificaciones sobre el favicon, ese pequeño icono que usamos para describir nuestra web o aplicación web. El uso de estas notificaciones nos servir para avisar de que tenemos algo que requiera nuestra atención en la aplicación.

Como ejemplo de esta tecnología podemos destacar el favicon de Gmail que nos muestra el número de correos electrónicos pendientes de leer en nuestra cuenta de correo.

Incluir estas notificaciones en el favicon de nuestra aplicación es muy sencillo

Leer artículo completo >>

El avance de las nuevas tecnologías han hecho posibles y cotidianas tareas que antes considerábamos casi como imposibles. Una de estas tareas es la posibilidad de ver y editar documentos de forma colaborativa y en tiempo real. Algo tan habitual como el uso de Google Docs online era imposible hace unos años, cuando todos editábamos nuestros archivos de forma local, usando Word u otros programas similares.

ShareJS es un pequeña utilidad que nos proporciona un servidor y cliente para la creación de proyectos donde varias personas puedan ver y editar documentos de forma concurrente.  Funciona en conjunción con node.js un servidor de aplicaciones con un concepto bastante alejado de lo que estamos acostumbrados a ver.

En la página del proyecto podemos ver varios ejemplos de lo que podemos crear usando esta herramienta, actualmente es un estadio bastante temprano de su desarrollo. Dichos ejemplos van desde la simple edición conjunta de campos de texto hasta el desarrollo de aplicaciones colaborativas complejas tales como wikis o incluso pequeños juegos online.

ShareJS - aplicaciones colaborativas en node.js

Complementada con otras tecnologías podemos estar ante una buena opción para la creación de proyectos que requieran el acceso simultáneo de varios usuarios a la misma información.

Código fuente: Github
Ejemplos: ShareJS

FuelPHP - desarrollo ágil en PHP

A la hora de elegir un framework para desarrollar nuestras aplicaciones nos encontramos con numerosas opciones según el lenguaje de programación que queramos utilizar y según el tipo de proyecto que queramos abordar. Entre los más famosos podemos destacar Django para Python, Rail para Ruby o Zend Framework para PHP.

FuelPHP viene a unirse al gran elenco de frameworks PHP para el desarrollo ágil de aplicaciones web.

Construido teniendo como base lo mejor de otros frameworks disponibles en el mercado, FuelPHP nos promete un soplo de aire fresco en el mundo del desarrollo web. Veamos que nos ofrece este framework.

Leer artículo completo >>

Leaflet es una librería Javascript ligera y de código abierto para la creación y manipulación de mapas interactivos en tus proyectos web, ya sea para web de escritorio o destinados a ser visualizados en dispositivos móviles.

Funciona sobre los datos cartográficos del proyecto OpenStreetMap, asegurando así disponer de una gran base de datos con mapas actualizados, precisos y con abundante información complementaria sobre establecimientos y lugares.

Entre los métodos de esta librería podemos encontrar rutinas para la creación de marcadores, ventanas emergentes, polígonos y áreas dentro de un mapa, gestión de eventos asociados a comportamientos del usuario y varias características interesantes más.

Actualmente cuentan con soporte para la mayoría de navegadores de escritorio así como para los navegadores de Android e iOS, éste último con aceleración gráfica de forma nativa, lo que le permite equiparar su rendimiento al de una aplicación en los dispositivos de Apple. No tardarán mucho en soportar el resto de plataformas móviles que componen el ecosistema actual.

Leaflet, alternativa a Google Maps

Un desarrollo muy a tener en cuenta para futuros proyectos, sobretodo si necesitamos emplear algo distinto a Google Maps y los mapas de Bing tampoco nos convencen.

Enlace: Leaflet
Enlace:  OpenStreetMap

Money.js es una pequeña librería Javascript que nos permite simplificar la conversión entre divisas en nuestro sitio web. Escrita en tan solo 1KB de código, puede ser configurada junto a PHP y CURL para que emplee siempre las tasas de conversión actualizadas.

Del mismo autor, nos encontramos el proyecto Open Source Exchange Rate, un proveedor de tipos de cambio actualizado, totalmente gratuito y en formato JSON.

Originalmente escrito para ser usado con Money.js, Open Source Exchange Rate puede emplearse en cualquier otro proyecto donde necesitemos emplear diversas divisas y tener actualizados sus tipos de cambio. Aplicaciones de comercio electrónico pueden empezar a beneficiarse de esta potente herramienta.
Podemos acceder a los datos desde aquí (el autor asegura emplear políticas de control que permite el cross-domain en peticiones AJAX al servicio)

money.js - conversión de divisas en Javascript

Money.js se encuentra actualmente en estado alpha aunque su constante desarrollo hacen de esta librería una herramienta a tener en cuenta para nuestros futuros proyectos.

Enlace: Money.js

Enlace:  Open Source Exchange Rate Código fuente: Github

Fotografía por DrBacchus - CC By

Los servidores web Apache permiten ser configurados a través de ficheros de configuración repartidos de forma jerárquica en la máquina, desde un fichero de configuración general hasta un fichero con directivas propias para cada directorio o aplicación que vayamos a servir.

La potencia y flexibilidad de estas configuraciones permiten hacer redirecciones web, aumentar el rendimiento, prevenir el spam y muchas más interesantes funcionalidades.

Los siguientes fragmentos de configuración están listos para ser copiados y pegados en el fichero .htaccess del directorio raíz de tu sitio web o aplicación. Recuerda hacer una copia de seguridad antes de editar el fichero original.

Si no tienes el fichero en tu servidor puede ser porque realmente no exista o tu cliente FTP no esté mostrando los archivos ocultos. En el primer caso puedes crear un fichero de texto vacío y subirlo al servidor.

Para el segundo caso busca instrucciones de como mostrar los archivos ocultos en tu cliente FTP (Tip: en Filezilla asegúrate que tienes marcada la opción “Forzar mostrar archivos ocultos” del menú “Servidor”).

Leer artículo completo >>