DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
19-03-2015

Cuando estamos utilizando un dispositivo móvil con Android y/o IOS (entre otros sistemas operativos móviles), nos daremos cuenta que al rotar el dispositivo la imagen proyectada en la pantalla "rota" o se adapta a la posición en la que se coloque el dispositivo.

La API de Orientación de Pantalla en JavaScript se encuentra accesible nativamente a través del objeto Screen el cual proporciona las primitivas necesarias para detectar la posición del dispositivo, bloquear y desbloquear posiciones específicas; es decir, emplear las mismas características que tienen las aplicaciones en los sistemas operativos móviles pero en una aplicación web móvil.

En esta entrada veremos un introducción a esta API de Orientación de Pantalla en JavaScript que puede resultar esencial al momento de crear una aplicación web para que sea correctamente visualizada en los dispositivos móviles.

Propiedades y métodos y eventos de la API Screen

Cómo has podido observar a lo largo de esta entrada, la API de Orientación de Pantalla extiende del objeto Screen y cuenta con un par de métodos que se complementan entre sí:

1.0 El método Screen.lockOrientation()

El método screen.lockOrientation() también accesible como window.screen.lockOrientation() permite bloquear la pantalla dada una orientación en específico:

window.screen.lockOrientation(orientation);

El parámetro orientation representa una orientación en específico la cual puede ser:

Entonces se emplea el parámetro orientation en el método window.screen.lockOrientation(orientation) a través de un String o array de String para bloquear la pantalla según las orientaciones dadas:

window.screen.lockOrientation('portrait');
window.screen.lockOrientation('portrait-primary', 'landscape-primary');

2.0 El método Screen.unlockOrientation()

Si el primer método que tratamos bloqueaba la pantalla según la posición especificada, el método Screen.unlockOrientation() desbloquea o libera la pantalla según la orientación de pantalla especificado con el método anterior.

El evento onorientationchange

Por último, la API de Orientación de Pantalla también cuenta con un evento que indica cuando la pantalla ha sido rotada llamado onorientationchange, muy útil cuando ocurre una rotación del dispositivo y se deba actualizar la interfaz gráfica.

Caso práctico de la API de Orientación de Pantalla

El experimento presentado a continuación fué tomado de: Introducing the Screen Orientation API en donde también podrás encontrar información concerniente a la API de Orientación de Pantalla; a continuación procedemos a explicar algunas secciones de código del experimento:

Los prefijos

Al ser JavaScript nativo y no un framework como jQuery es necesario verificar el soporte a los navegadores a través de los prefijos, para esto se emplea la siguientes líneas de código:

            var prefix = 'orientation' in screen ? '' :
                    'mozOrientation' in screen ? 'moz' :
                    'webkitOrientation' in screen ? 'webkit' :
                    'msOrientation' in screen ? 'ms' :
                    null;

Puede darse el caso que simplemente el navegador no tenga soporte a la API de Orientación de Pantalla, en tal caso se mostrará un mensaje como "API no soportada".

Modo FullScreen

Para emplear la API de Orientación de Pantalla en JavaScript es necesario que la página ocupe la pantalla completa -full screen- por ello se activa y desactiva el modo de pantalla completa cada vez que se cambie la orientación del dispositivo seleccionada a través de las siguientes funciones respectivamente:

                function launchFullscreen(element) {
                    if (element.requestFullscreen) {
                        element.requestFullscreen();
                    }...
                }

                // desactiva el FullScreen
                function exitFullscreen() {
                    if (document.exitFullscreen) {
                        document.exitFullscreen();
                    }...
                }

Activar el método LockOrientation y unlockOrientation

Si la API se encuentra disponible, cada vez que se presione uno de los botones del ejemplo se des/bloqueará la pantalla según el modo seleccionado:

                // bloquea la pantalla y activa el FullScreen
                document.getElementById('lock-button').addEventListener('click', function(event) {
                    event.preventDefault();
                    launchFullscreen(document.documentElement);

                    setTimeout(function() {
                        screen[prefix + (prefix === '' ? 'l' : 'L') + 'ockOrientation'](select.value);
                    }, 1);
                });

                // desbloquea la pantalla y desactiva el FullScreen
                document.getElementById('unlock-button').addEventListener('click', function() {
                    exitFullscreen();
                    screen[prefix + (prefix === '' ? 'u' : 'U') + 'nlockOrientation']();
                });

El evento el método LockOrientation y unlockOrientation

Sencillamente se vincula una función al evento onorientationchange que recordemos se activa cada que que se rota el dispositivo:

                function orientationHandler() {
                    var orientationProperty = prefix + (prefix === '' ? 'o' : 'O') + 'rientation';
                    document.getElementById('orientation').textContent = screen[orientationProperty];
                }

                // activa el evento manejador
                screen.addEventListener(prefix + 'orientationchange', orientationHandler);

Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Hover over the cards

Hover over the cards

API REST en CodeIgniter

API REST en CodeIgniter

Circunferencia animada con Canvas

Circunferencia animada con Canvas

Algunos artículos que te pueden interesar

Primeros pasos con SQLite en JavaScript: los métodos openDatabase, executeSql y executeSql

Primeros pasos con SQLite en JavaScript: los métodos openDatabase, executeSql y executeSql

Con SQLite en HTML5 se puede almacenar información persistente de distintos tipos (del usuario, control, etc) con JavaScript empleando los métodos openDatabase, executeSql y executeSql.

Andrés Cruz 18-01-2016

Creando partículas con JavaScript y Canvas

Creando partículas con JavaScript y Canvas

En esta entrada veremos cómo crear un sencillo sistema de partículas con JavaScript y Canvas y animarlo con requestAnimationFrame.

Andrés Cruz 10-11-2015

Generando reportes PDFs con JavasCript

Generando reportes PDFs con JavasCript

La reportería es un tema fundamental que hay que llevar a cabo en cualquier sistema; querer importar datos desde una página web a otro formato como PDF es una tarea de lo más habitual que puede ser fácilmente realizado a través de librerías JavaScript.

Andrés Cruz 09-04-2015