Tutorial: Cómo hacer el Unlock Screen de Android Ice Cream Sandwich en HTML5


Lockscreen Android en HTML5

En este tutorial les voy a enseñar a hacer un Unlock Screen o Lockscreen de Android Ice Cream Sandwich con HTML5, CSS3 y JQuery. Es bastante sencillo y les puede abrir la imaginación para cualquier tipo de proyecto que tengan en mente.

La metodología es bastante sencilla se muestra la interfaz inicial y tienes que arrastar el Lock a la parte derecha, si llega a la posición del candado abierto se dirige a otra página web, más adelante explico el código para que puedan implementar cualquier otro código en ese evento.

ACLARO: No es un SDK, No es un Toolkit, No es un entorno de desarrollo. Solo es una simulación de la interfaz del Lockscreen.

Comenzemos:

<section>
<div class="XperiaS">
<div id="Xperia-pantalla">
<div id="Xperia-fondo">
<div class="Iconos"></div>
<div id="unlock-top">
08:23

Miercoles, Julio 6</div>
<div class="Ondas"></div>
<div class="Unlock"></div>
<div id="unlock-handle" class="ui-widget-content ui-corner-all">
                            <img src="http://i.imgur.com/7HmAl.png" alt="Slider" width="100%" /></div>
</div>
</div>
</div>
</section>

Hacemos un body con un section principal que contenerá al Smartphone, en este caso usé un modelo del Sony Xperia S.
Luego pongo la imagen del Xperia S en una clase para que no se lleguen a “robar” la imagen tan fácilmente y poder posicionar más fácilmente la imagen.

En la siguiente clase construyo la pantalla, que es muy importante para que el Lock no se valla a salir de rango y para que sea más real. Obviamente debe tener un fondo o un wallpaper, dentro de ese wallpaper pongo los iconos que son una simple imagen con el Wi-Fi, la señal, etc.

Más adelante pongo una plantilla de la hora con un id único para poder asignarle más adelante la hora dinámicamente. Si se dan cuenta  en la plataforma real cuando uno presiona una vez el lock salen unas ondas indicando el lugar a donde tiene que dirigirse y eso es lo que agrego en la siguiente clase.

Finalmente pongo lo más importante que es el unlock-handle que se moverá como se desee.

Ahora le damos estilo al código HTML que hicimos previamente:

@font-face {
    font-family: 'RobotoLight';
    src: url('fonts/Roboto-Light.ttf') format('truetype');
}
@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Regular.ttf') format('truetype');
}
body {

    background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.5) 0%, rgba(143,143,143,1) 99%, rgba(142,142,142,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.5)), color-stop(99%,rgba(143,143,143,1)), color-stop(100%,rgba(142,142,142,1))); /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.5) 0%,rgba(143,143,143,1) 99%,rgba(142,142,142,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.5) 0%,rgba(143,143,143,1) 99%,rgba(142,142,142,1) 100%); /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.5) 0%,rgba(143,143,143,1) 99%,rgba(142,142,142,1) 100%); /* IE10+ */
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.5) 0%,rgba(143,143,143,1) 99%,rgba(142,142,142,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#8e8e8e',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    padding:0; margin:0;
}
a { outline:none; }
p { padding:0; margin:0; }
img { border:0; }

.XperiaS{
    background-image:url(http://i.imgur.com/YljIp.png);
    background-repeat: no-repeat;
    height: 600px;
    width: 400px;
    margin-left: 35%;
    position: relative;

}
.Iconos{
    background-image:url(http://i.imgur.com/DBudt.jpg);
    background-repeat: no-repeat;
    width:232px;
    height: 17px;
    position: relative;
}

.Ondas{
    background-image: url(http://i.imgur.com/RAbgl.gif);
    position: relative;
    z-index: 9;
    height: 50px;
    width: 100px;
    top: 230px;
    left: 120px;
    opacity: 0.0;
}

.Unlock{
    background-image: url(http://i.imgur.com/T4SJQ.png);
    position: relative;
    z-index: 10;
    height: 50px;
    width: 50px;
    top: 185px;
    left: 180px;
    opacity: 0;
}
#Xperia-pantalla { height:420px; width:232px; position:relative; top:65px; left:63px; background-color:#000000; }

#Xperia-fondo { overflow: hidden; height:100%;  background-image:url(http://i.imgur.com/2Bwcp.jpg); }

#unlock-slider { width:277px; height:150px;}

#unlock-handle{
    position: relative;
    z-index: 11;
    height: 50px;
    width: 53px;
    top: 130px;
    left: 95px;
    cursor: pointer;

}

.time { text-align: right; color:#FFFFFF; Font-family: 'RobotoLight'; font-size:45px; padding:6px 15px;}
.date { text-align: right; color:#FFFFFF; font-family:'Roboto', Arial; font-size:12px; padding:0px 15px; margin-top: -10px; }

#caja{
    width: 350px;
    height: 50px;
}

Lo primero que hacemos es usar los tipos de letra que queremos, en este caso es el tipo de letra oficial de Android llamada Roboto para el reloj.

Para hacer el gradiente radial de del body pueden hacerlo a punta de código o puedes usar un generador de gradientes como Colorzilla, que fue lo que usé en este caso.

En las siguientes etiqueta, a, p, img, hago un reset que por lo general se hace al principio, pero no creo que sea pertinente hacerlo así que continuemos. Luego sigo con 4 clases que tienen casi los mismos atributos, el único especial es de las ondas donde pongo la propiedad de la opacidad en 0.0 para más adelante mostrarlo y ocultarlo con JQuery.

En el ID unlock-handle pongo el cursor como una manito para que sea más llamativo jeje y un z-index mayor para que esté por encima de toodas las capas hechas.

Y finalmente pongo el estilo de la hora y la fecha que cambiaremos dinámicamente.

Para finalizar le doy vida a la página con JQuery:

$(function() {
                 $("#unlock-handle").draggable({ // Active la funcionalidad de poderse mover a Unlock-Handle
                     drag: function() { // En el evento drag
                         $(".Unlock").fadeTo(50, 0.8); // Haga aparecer la clase Unlock
                     },
                     stop: function(event, ui) { // En el evento stop o cuando se pare de mover el unlock
                         $(".Unlock").fadeTo(50, 0); // Haga desaparecer la clase Unlock
                         if($("#unlock-handle").position().left > 140 && $("#unlock-handle").position().left < 200 && $("#unlock-handle").position().top > 280) {//si el punto deseado donde se puede desbloquear

                             runEffect(); // Haga el efecto Puff

                             $("#Xperia-fondo").fadeOut("normal", function() { window.location = "/"; }); //Hace un fadeout a toda la "pantalla" y redirige a otra página
                         }
                         else {
                             $("#unlock-handle").animate({ left: 95, top: 130 }, 100); // Si no se llegó al punto deseado hace q se devuelva a la posición inicial
                         }
                     }
                 });

                 $("#unlock-handle").draggable({ containment: "#Xperia-pantalla", scroll: false }); // Evita que se salga de la "pantalla"

                 function runEffect() {

                     var selectedEffect = "puff"; // Selecciono el nombre del efecto

                     var options = { percent: 1000 }; // El valor donde se agrandará con un porcentaje de 1000

                     $("#unlock-handle").effect(selectedEffect, options, 200, callback); // Hace el efecto y llama a la función callback

                 };

                 function callback() { }; // Función vacía

                 var on_off = false; // Variable que controla si se ve o no se ve la animación

                 $("#unlock-handle").click(function() { // Si se hace click en el Unlock
                     if(on_off == false) { // Si no se está mostrando la animación
                         $(".Ondas").fadeTo(0, 0.1) // Que la muestre
                         on_off = true;
                     } else {
                         $(".Ondas").fadeTo(0, 0) // Si se está mostrando que la oculte
                         on_off = false;
                     }
                     return false;
                 });
             });

El código está comentado y explicado línea por línea.

Finalmente para concluir:

  • Descargar
  • Demo