DATALIST: HTML5 Autocomplete.

En HTML5 hay nuevas etiquetas que se an añadido para trabajar con formularios la etiqueta datalist, es una lista predefinida de opciones para un input, este elemento es usado para proveer una función de auto completado nativa para elementos de tipo input. 

<input list="navegadores">

<datalist id="navegadores ">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>

Este elemento solo funciona en chrome, firefox y opera, para una lista detallada:  http://caniuse.com/datalist

OJO: esto no es como e leído en algunos libros o artículos que es para reemplazar el tipo de campo select, esto es solamente para ofrecer un autocomplete
Ejemplo: http://bomba1990.pythonanywhere.com/sosinformatico/js/datalist
GIT: https://github.com/bomba1990/HTML5-Ejemplos/blob/master/form/DATALIST.html

Joomla 3.0 Responsive Web Design

A salido la nueva versión de Joomla, la cual trae consigo muchos cambios mas que todo en el diseño. Ahora Joomla por completo a pasado a tener diseño web responsable, en este nuevo formato de Joomla ademas de tratar de ser mas amigable para el usuario también Joomla va a poder ser visualizado efectivamente desde cualquier tipo de teléfono celular inteligente o Tablet.

Entre los cambios que le hicieron están los siguientes:

• La incorporación de Twitter Bootstrap en un paquete jui para multimedia. 
• Una nueva plantilla para dispositivos móviles para la administración (backend) - Isis - y su interfaz. 
• Una nueva plantilla para el sitio (frontend) - Protostar - construida usando Bootstrap de Twitter. 
• Plantilla actualizada accesible llamada Beez3. 
• Simplificación en 3 pasos de la instalación. 
• Controlador PostgreSQL que permitirá ejecutar Joomla 3.0 utilizando la base de datos PostgreSQL. 
• Controlador PHP Memcached. 
• Uso de JFeed para la gestión de Feeds en lugar de SimplePie. 
• La instalación de paquetes de idiomas directamente desde el gestor de extensiones. 
• Grupo de usuarios "Invitados" está presente por defecto. 
• Almacenamiento de artículos en blanco permitido. 
• Nuevo módulo de estadísticas en el backend. 
• Actualización de TinyMCE a la versión 3.5.6. 
• Continúa la limpieza de código antiguo no utilizado, archivos y campos de la base de datos y tablas y la estandarización de tablas. 
• Mejoras en las Búsquedas Inteligentes. 
• Un amplio trabajo sobre la normalización de código de estilo y coherencia de este. 
• Unidad de Pruebas en el CMS. 
• Actualización del sistema de pruebas en el CMS. 
• Elemento del menú activo personalizable para el módulo de menús. 
• Permitir que el plugin SEF añada la url canónica en el encabezado. 
• Versión 12.2 de Joomla! Platform. 

En teoría no hay ningún cambio a profundidad en el sistema como tal por lo cual deberían funcionar todos los componentes y extensiones que tuviésemos antes, pero como siempre es recomendable probar en una versión local para después subir a un servidor.

Cambios buenos para los Desarrolladores (desde mi punto de vista):

Uno de las cuestiones mas importantes para cualquier dessarrollador que trabaje con joomla, es que en esta nueva versión se incluyen los siguientes frameworks: Bootstrap y Jquery.

A Jquery no le hace falta presentación, pero Bootstrap es un framework css/javascript para el diseño o desarrollo de paginas Web responsables, lo cual quiere decir que se vean correctamente en cualquier tipo de dispositivo sin mayores cambios ni necesidad de crear una aplicación aparte.

Bootstrap framework aporta a Joomla la ventaja de tener ya una cantidad de herrameintas pre echas a nuestra mano, como css y javascripts para menus, carrusel de fotos, thumbnail, etc...  sin necesidad de incluir nada externo. por ejemplo los botones e inputs ya tienen el estilo que trae bootstrap asi que ya no es necesario crear un css para el estilo de los formularios sino que el framework se encarga de ello. Esto nos puede ahorrar muchas lineas de código y ademas si seguimos los lineamientos del framework nuestro plugin, extensión o template se va a ver como es debido en cualquier tipo de dispositivo.

Ahora para incluir el framework de Bootstrap y jquery dentro de nuestro codigo debemos usar:

JHtml::_('bootstrap.framework');

Pantallas del Proceso de Instalación, en tres pasos:

Pantallas Del Front End, Movil 

 Pantallas del Backend, Login y panel de control, móvil también

HTML5 Fullscreen (Pantalla Completa)

La nueva API de HTML5 es toda una novedad y de gran ayuda para todos aquellos que creamos aplicaciones para la web.

En este post les voy a hablar de la api HTML5 fullscreen. durante años solamente las aplicaciones creadas en flash o en java eran las únicas que tenían el poder de poder entrar en modo pantalla completa. A partir de ahora nuestras aplicaciones echas en HTML5  y javascript podrán tener esta habilidad también.

Métodos de HTML5 Fullscreen 

element.requestFullScreen: Con este método se hace que un elemento independiente entre en modo pantalla completa.

document.cancelFullScreen(): Cancela cualquier elemento que se encuentre en pantalla completa.
document.fullScreen: Retorna verdadero si hay algun elemento en pantalla completa.
:full-screen: Le da un estilo al elemento cuando esta en modo de pantalla completa.

Soporte de HTML5 Fullscreen

Actualmente hay ciertas resistencias de los creadores de los navegadores en darle completo soporte a esta api, por una cuestión de seguridad, ya que como la aplicación va a tener la posibilidad de usar la pantalla completa, se podría emular completamente el sistema operativo y de esta manera sacarle la contraseña a la persona o algo por el estilo. Hasta ahora los navegadores que soportan esta api son: Chrome 16+, Firefox 10+ y Safari.

Para poder usarlo en los diferentes navegadores hay que ponerle el prefijo de cada navegador.

Poniendo en practica el modo pantalla completa.

Para usar o activar el modo de pantalla completa les dejo aquí una función muy útil que trabaja con todos los  tipos de prefijos, no fue creada por mi sino por el autor de este articulo: html5 full screen. Pero de todas maneras aquí les dejo un ejemplo HTML5 fullscreen.
GIT: https://github.com/bomba1990/HTML5-Ejemplos/blob/master/fullscreen/fullscreen.html

SockJS Websockets HTML5

Los WebSocket es una tecnología nueva que a salido con el estándar html5, pero todavía va a faltar un poco de tiempo para que todos los navegadores la soporten.

Mientras tanto existen una buena cantidad de proyectos(socket.io, node.js, etc) que permiten trabajar con websockets tanto en navegadores nuevos, como en los antiguos sustituyéndolo por otra tecnología en estos navegadores. Pero todos las librerías por lo general hacen algún truco para poder hacerlo funcionar en navegadores antiguos.

Es por eso que nació un nuevo proyecto: SockJS - otra biblioteca de emulación WebSocket, pero esta vez se hace bien.

Filosofía de SockJS

• La Api debe seguir los lineamientos de la API de HTML5 Websockets lo más fielmente posible
• No Flash del lado del cliente solamente javascript.
• Bien Documentado y con balanceo de cargas.
• El transporte debe soportar la comunicación a través de dominios.
• La conexión debe ser rápida y ligera.
• Además, el código del lado del servidor debe ser simple, con el fin de reducir el costo de escribir servidores para diferentes idiomas.
• Debe soportar al menos un protocolo de Streaming por cada navegador grande.

Lo Bueno

Lo Bueno de esta librería es que es ligera, fácil de entender y trabajar, se adapta a los estándares, trabaja con balanceo de cargas y además no usa Flash ni nada por el estilo. Además ya cuenta con las librerías para montar los servidores en python, nodejs y java, próximamente en otros lenguajes.

Lo Malo.

No posee soporte para navegadores antiguos, que otros proyectos si lo hacen. por ejemplo Socket.IO soporta Internet Explorer 5.5+, Safari 3+, Google Chrome 4+, Firefox 3+, Opera 10.61+. SockJS soporta aquí ven la descripción detallada.

Conclusión.

SockJS es una librería bastante nueva  y todavía le queda mucho por hacer, pero que tiene una buena forma de trabajar, y unos excelentes tiempos de ejecución. Aquí hay un análisis de rendimiento donde se compara Socket.IO vs SockJS de pythonanywhere. Es una librería útil en el caso de que queramos desarrollar una aplicación donde el rango de navegadores es limitado, por ejemplo una intranet para una empresa, o una pagina para un grupo muy especifico.

Twitter de SockJS

Si necesitas la asesoria de una empresa para el desarrollo de aplicaciones con este tipo de tecnologia.

Twitter autorizar aplicación Tweepy

Para autorizar una cuenta a trabajar con tu aplicación twitter que ya hallas registrado y la cuenta no es la dueña de la aplicación, la manera de hacerlo mediante código es la siguiente:

Primero creamos el código siguiente y lo ejecutamos:

#!/usr/bin/env python

import tweepy
# definimos las claves de la aplicacion
consumer_key="Y94tUbG4vv1IcZhJHKLdQw"
consumer_secret="K2iG4ZOdIPIBpuagmvh9eB8MhuWpgv9QXx0AW2boo"
# nos conectamos a twitter.
auth = tweepy.OAuthHandler(consumer_key, consumer_secret)

# solicitamos la url de autorización y la mostramos por pantalla
auth_url = auth.get_authorization_url()
print 'Please authorize: ' + auth_url

# esperamos al pin que debe introducir la persona
verifier = raw_input('PIN: ').strip()
auth.get_access_token(verifier)

#mostramos los tokens de acceso
print "ACCESS_KEY = '%s'" % auth.access_token.key
print "ACCESS_SECRET = '%s'" % auth.access_token.secret

Después entramos en la url que nos arroja:

Le concedemos permiso, y nos devolverá el pin que deberemos introducir en la aplicación para concederle el acceso:

 
Después el script lo verifica y muestra el acces token y el acces token secret, por pantalla y listo ya podemos empezar a usar esta cuenta para publicar información, llevar estadísticas etc...

Errores de tiempo en tweepy.

Cuando use por primera ves tweepy, para publicar o conectarme a twitter conseguí los siguientes errores: 401:Unauthorized Error Unable to get username, invalid oauth token! timestamp out of bounds Una de las razones a las que se puede deber es que la hora esta mala o fuera de orden, si estas en Windows ya sabes como acomodarla si estas en linux tienes que hacer lo siguiente.

Establecer la zonahoraria en Linux

Para establecer la zona horaria en linux en el sistema tenemos que crear un enlace simbólico de /etc/localtime al archivo /usr/share/zoneinfo/America/Caracas, en ves de América y Caracas, seria tu correspondiente ciudad y continente. El comando que tendríamos que ejecutar como root, para establecer la hora seria el siguiente: ln -sf /usr/share/zoneinfo/America/Caracas /etc/localtime Hay que hacerlo de esta manera porque si hacemos el cambio a través de Gnome, en el área de la hora Local, no va a cambiar la hora del sistema como tal y nos va a pasar como me pasaba a mi que GMAIL tenia horas mala de cuando la gente te manda mensajes, etc. Espero que esto les sirva. Saludos