3D city Project. Three.js HTML5 WebGL

Hoy queria compartir con ustedes un proyecto muy chevere que descubri hoy, es una especi de simscity en la web. Super cool y util para evaluar el desempeño de los navegadores web para este tipo de juegos.

Aparte de todo el proyecto esta colocado en github y es de codigo abierto asi que pueden copiarlo ver como lo hicieron y si quieres crear el suyo propio.

Github: https://github.com/lo-th/3d.city

Live Demo: http://lo-th.github.io/3d.city/index.html

Mastering Ext JS

Este es un excelente libro que te enseña a programar con Ext JS, desde el programador novato hasta el más experto. Esta 100% garantizado que vas a aprender hasta un grado medio-alto de como trabajar y manejar Ext JS. Además de que esta escrito de una manera muy sencilla, tienes ejemplos buenos y concisos, donde no hay manera de perderse.

Aparte que todo el set de herramientas de Ext JS, es para la programación de interfaces web de alto nivel  que te permite hacer aplicaciones fascinantes del lado del cliente, con una facilidad increíble, y con un alto grado de calidad, pensado precisamente en el desarrollo de aplicaciones empresariales. Y que con la ayuda de este libro podrán sacarle el mayor provecho.

Mastering Ext JS

Formularios en HTML5

En HTML5 uno de los más grandes avances que se an incluido son las nuevas características de los formularios para hacerlos más potentes y útiles para nuestras aplicaciones.

Nuevos inputs de HTML5:

El estándar html4 solo contaba con inputs de tipo text, radio, checkbox, Password, submit, reset y button, aparte de textarea, select, que son también dos tipos de elemento de formulario.

Con la llegada de HTML5, hay soporte para todos los formularios de html4, y ahora tenemos a disposición estos otros formularios:

• Color: el input de color es usado para campos que tienen un color, lo que hace es generar el numero hexadecimal de un color que le seleccionemos de la paleta de colores. 
• Date: permite al usuario agregar una fecha. 
• Datetime: permite al usuario agregar fecha y hora. 
• Email: este tipo de campo almacena lo que sería una dirección de correo. 
• Month: es para que el usuario pueda seleccionar mes y año. 
• Number: con este input el usuario va a colocar números pueden ser enteros o decimales 
• Range: este tipo de formulario muestra un pequeño campo donde el usuario selección un numero de un rango. 
• Search: es para campos de búsqueda. 
• Tel: es para colocar números de teléfonos 
• Time: para colocar horas y minutos. 
• url: Para colocar direcciones web. 
• Week: Para seleccionar semanas del año.
•  x-webkit-speech: que es un formulario para reconocimiento de vos que solo funciona con chrome.

Los nuevos formularios por supuesto no son soportado por todos los navegadores, solo lo más modernos navegadores empiezan a añadir soporte, aquí si cabe destacar que los navegadores de los teléfonos inteligentes, están sumamente avanzado en este sentido y soportan la mayoría de los campos, inclusive mejor que los navegadores de escritorio. Y muestran un teclado de acuerdo al tipo de input, por ejemplo en tel muestra puros números.

Para los navegadores que no soportan alguno de los formularios no hay problema porque se mostraran simplemente como un tipo text, y después con librerías javascript podemos hacer que funcionen en esos navegadores donde no hay soporte nativo.

Ejemplo de todos los formularios Formularios HTML5
GIT: https://github.com/bomba1990/HTML5-Ejemplos/blob/master/form/form.html

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

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.

Excelente juego en html5

Despues de la salida del html5, an sido muchas las paginas que an salido aprovechando las bondades del nuevo estandar, este estandar da para todo inclusive para crear juegos, aqui les dejo un ejemplo de un juego echo con html 5 muy bueno, se los recomiendo:

Enlace:

http://butchersworkshop.com/witr/