Uno de los beneficios de tener nuevas versiones del navegador cada seis semanas es el rápido ritmo con el que se introducen nuevas funciones. La transición de las compilaciones nocturnas a los lanzamientos oficiales está a solo unas semanas de distancia. Esto significa que incluso aquellos de ustedes que vigilan de cerca las listas de funciones pueden perderse una API o dos.
Este es el caso de la API de pantalla completa. Como si de la noche a la mañana, pasó de ser un buen experimento a una función compatible con más de la mitad de los navegadores en la naturaleza. En este momento, es posible que se pregunte en qué se diferencia esto de la pantalla completa normal que hemos tenido durante mucho tiempo.
Lo que necesitas saber
Con esta API, puede mostrar no solo páginas completas a pantalla completa, sino también elementos individuales dentro de ellas (algo que no puede hacer con la pantalla completa normal). La intención aquí es permitir videos y juegos HTML5 de pantalla completa, para que finalmente podamos declarar HTML5 como una alternativa viable a Flash.
En resumen, esto es lo que necesita saber sobre la API de pantalla completa:
- Funciona en Firefox 10 , Safari y Cromo;
- Lo activas usando el nuevo
requestFullScreen()método; - Puede mostrar cualquier elemento a pantalla completa, no solo la página completa;
- Por motivos de seguridad, la pantalla completa solo se puede activar desde un controlador de eventos (como si lo iniciara el usuario);
- También por seguridad, Safari bloquea todas las entradas del teclado excepto las flechas y las teclas de control, otros navegadores muestran mensajes de advertencia al escribir;
- La API aún es un trabajo en progreso, por lo que debe usar los métodos específicos del proveedor (con el prefijo moz y webkit );
La idea de permitir que los desarrolladores tomen la pantalla del usuario mediante programación no viene sin serias implicaciones de seguridad, razón por la cual el uso del teclado es limitado. Por supuesto, hay muchos usos legítimos para la entrada de teclado en pantalla completa, que se abordarán en futuras revisiones de la API a través de algún tipo de solicitud de permiso.
Sin embargo, incluso en su forma limitada actual, la API aún nos brinda la oportunidad de mejorar la experiencia del usuario final.
Lo básico
Según el borrador de W3, tenemos acceso a una serie de métodos y propiedades que nos ayudarán en la tarea de cambiar un elemento a pantalla completa.
var elem = document.getElementById('#content');
// Make this element full screen asynchronously
elem.requestFullscreen();
// When a full screen change is detected,
// an event will be dispatched on the document
document.addEventListener("fullscreenchange",function(){
// Check if we are in full screen
if(document.fullscreen)){
// We are now in full screen!
}
else{
// We have exited full screen mode
}
}, false);
// We can also exit the full screen mode with code
document.exitFullscreen();
En este momento, sin embargo, lidiar con la API es bastante más engorroso, ya que ningún navegador es compatible con estos métodos todavía; tendremos que usar los específicos del proveedor como elem.mozRequestFullScreen() y elem.webkitRequestFullScreen() .
La API también presenta un nuevo pseudoselector de CSS que puede usar para diseñar el elemento de pantalla completa.
#content:fullscreen {
font-size: 18;
} Por supuesto, no hace falta decir que también necesitará proporcionar versiones prefijadas de moz y webkit. Pero hay una solución más fácil.
El complemento jQuery
Hay una solución más elegante que terminar con un montón de código feo verificando cada navegador. Puede usar el complemento jQuery FullScreen, que soluciona varias diferencias de navegador y le brinda un método simple para activar el modo de pantalla completa.
$('#fsButton').click(function(e){
// Use the plugin
$('#content').fullScreen();
e.preventDefault();
}); Esto traerá el elemento #content a pantalla completa. El complemento también agrega una bandera al objeto de soporte de jQuery, por lo que puede mostrar condicionalmente su botón o activador de pantalla completa:
if($.support.fullscreen){
// Show the full screen button
$('#fsButton').show();
} Para salir del modo, llame de nuevo al método fullScreen().
El complemento agrega la clase .fullScreen a su elemento, por lo que puede diseñarlo sin tener que preocuparse por las versiones específicas del navegador. ¡Ahora usémoslo para hacer algo bueno por el mundo!
La parte divertida
Si usted es propietario de un sitio web, probablemente haya tomado decisiones que deterioran la experiencia de sus usuarios. Esto no debería ser una sorpresa para usted:necesita mostrar publicidad, necesita un cuadro de búsqueda, una barra de navegación, un widget de Twitter, una sección de comentarios y todas las cosas que hacen que su sitio sea lo que es. Todos estos son necesarios, pero hacen que su contenido, precisamente por lo que la gente acudió a su sitio, sea más difícil de leer.
También existe un límite práctico para el tamaño de la fuente antes de que se salga de lugar, sin mencionar la elección de un tipo de letra. Si tiene una barra lateral, esto también limita el espacio horizontal que puede ocupar su contenido.
Pero podemos arreglar esto con la nueva API. Usaremos la funcionalidad para llevar la sección de contenido de su sitio a pantalla completa, mejorando así la experiencia de lectura de sus lectores, incluso en dispositivos con pantallas pequeñas como computadoras portátiles y netbooks.
Hacer el modo de lectura
Es bastante sencillo, solo necesitamos algún tipo de botón que active el complemento FullScreen. Podemos usar el $.support.fullscreen bandera para probar si el navegador actual es compatible con la API. Si es así, agregaremos el botón de pantalla completa a la página.
if($.support.fullscreen){
var fullScreenButton = $('<a class="goFullScreen">').appendTo('#buttonStrip');
fullScreenButton.click(function(e){
e.preventDefault();
$('#main').fullScreen();
});
} Cuando el #div principal se muestra en pantalla completa, se le asigna un ancho y una altura del 100 %. Tendremos que solucionar esto si queremos que quede centrado en el medio de la pantalla. Esto requerirá un estilo adicional, aplicado solo en el modo de pantalla completa.
a.goFullScreen{
/* The styling of the full screen button goes here */
}
/* The following styles are applied only in Full Screen mode */
#main.fullScreen{
/* Adding a width and margin:0 auto to center the container */
width: 860px;
margin: 0 auto;
/* Increasing the font size for legibility*/
font: 17px serif;
padding: 45px 45px 10px;
}
#main.fullScreen h1{
/* Styling the heading */
font: 56px/1.1 Cambria,"Palatino Linotype",serif;
text-align: center;
}
#main.fullScreen h3{
/* Subheadings */
font: 28px Cambria,"Palatino Linotype",serif;
}
#main.fullScreen #postAuthor{
/* Centering the post author info */
/* ... */
}
/* Hiding unneeded elements and ads */
#main.fullScreen #featuredImage,
#main.fullScreen #topMiniShare,
#main.fullScreen #wideZineBanner,
#main.fullScreen #downloadDemo{
display:none;
} ¡Eso es todo! Solo los navegadores compatibles con el modo de pantalla completa mostrarán el botón y los usuarios disfrutarán de una mejor experiencia de lectura sin distracciones.
Hay muchos lugares en un sitio web donde puede usar una vista de pantalla completa, desde videos y juegos basados en lienzos, hasta informes y cuadros de diálogo de vista previa de impresión. Personalmente, me encantaría ver esto utilizado para infografías y presentaciones. Podemos recorrer un largo camino con una característica útil como esta.