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



9 comentarios:

  1. excelente , no uso Code Igniter y aún así aprendo varias cosas... seguiré visitando!

    gracias!

    ResponderEliminar
  2. Hola, estoy tratando de utilizar los codigos para poner en pantalla completa un juego pero no me deja, me tira este error a la hora de guardar el script en blogger.

    "Se ha producido un error al analizar el XML, línea 687, columna 24: The content of elements must consist of well-formed character data or markup."

    Esta es la linea que no me deja poner al momento de darle en "Guardar Plantilla"

    for(var i = 0; i < pfx.length; i++) {

    ResponderEliminar
    Respuestas
    1. Dice que el error está en ese espacio entre "<" y "pfx"

      Eliminar
    2. No se si ya haz encontrado la respuesta a esta pregunta, pero como pueden existir otras personas con tu mismo problema, no descarto el responderte....

      Lo que tienes que hacer es cambiar el signo de "<" (menor que) por "<" el cual es su valor alfanumerico.

      Esto se debe a que Blogger trabaja con XML entonces este formato requiere que para estas clases de signos de usen sus valores alfanumericos, al igual que las " " que si te abras dado cuenta, blogger siempre cambia las comillas dobles "" por su valor alfanumerico el cual es """

      Mas Info aqui
      https://www.w3.org/wiki/Common_HTML_entities_used_for_typography

      Eliminar
    3. Aqui estoy volviendo a escribir, porque Blogger interpreto los valores alfa numericos y los renderizo mostrando el simbolo y no el codigo...

      Aqui vuelvo a responder....
      cambiar < por "&.l.t.;" (todo lo que esta entre comillas pero sin puntos. Lo hice asi para que blogger no vuelva a renderizar el codigo)

      Eliminar
  3. eso suena a un error de xml. no de javascript. como estas creando este juego?

    ResponderEliminar
    Respuestas
    1. Hola, no estoy creando el juego, tengo blogger, subo un juego como contenedor en <.iframe> si es html5 o en <.object> si es flash, entonces quiero saber como hago ese boton para que mi post quede con el boton para agrandar a pantalla completa el juego.

      Eso es... esta es mi web. www.legiongamer.com



      Eliminar
    2. Tambien necesito para los <.objects> o archivos.swf pasarlos a pantalla completa. He pillado algunas paginas pero la verdad no me funcionan los codigos. Y se poner la mayoria en Edit HTML pero esto del fullscreen me la gana aun.

      Eliminar
  4. si las paginas son un iframe. significa. qu eno estan en tu pagina?

    lo que te recomiendo en este caso. es que lo añadas directamente al layout de la pagina. como un javascript externo. que agregue el boton. porque en cada post esta como dificil.

    https://support.google.com/blogger/answer/43708?hl=en
    https://developers.google.com/blogger/docs/1.0/developers_guide_js

    ResponderEliminar