jueves, 20 de septiembre de 2012

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