Radiografía de una WebApp – Iphone
Como proyecto personal me puse a hacer una WebApp, para mostrar Imágenes, y resulto se muy sencillo.
Esto es un breve análisis de un par de aspectos básicos de una WebApp especifica para un dispositivo Apple como ser un iPhone o un iPod touch, o por que no un iPad
para esto no voy a usar ningún tipo de librería, el objetivo es ver que tan difícil resulta, no estoy en contra de estas de hecho soy usuario de jquery pero en este caso no será necesario.
Estructura HTML basada en HTML5
<!DOCTYPE html> <html lang="en" manifest="offline/lightbox.manifest"> <head> <title>Lightbox</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <link rel="apple-touch-icon" href="images/lightbox_icon.png" /> <link rel="apple-touch-startup-image" href="images/lightbox_startup.png" /> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <link rel="stylesheet" type="text/css" href="includes/style.css" /> <script type="text/javascript" src="includes/script.js"></script> </head> <body onorientationchange="updateOrientation();"> <h1><a href="#">Programa de Examen</a></h1> <section class="content" id="lightbox"> <ul class="thumbnails"> <li> <img src="images/slideshow/GUP-10_tn.jpg" srchighres="images/slideshow/GUP-10.jpg" onclick="showImage(this);" > <p class="caption">Blaco</p> </li> <li> <img src="images/slideshow/GUP-09_tn.jpg" srchighres="images/slideshow/GUP-09.jpg" onclick="showImage(this);" > <p class="caption">Pta. Amarilla</p> </li> <li> <img src="images/slideshow/GUP-08_tn.jpg" srchighres="images/slideshow/GUP-08.jpg" onclick="showImage(this);" > <p class="caption">Amarillo</p> </li> <li> <img src="images/slideshow/GUP-07_tn.jpg" srchighres="images/slideshow/GUP-07.jpg" onclick="showImage(this);" > <p class="caption">Pta. Verde</p> </li> <li> <img src="images/slideshow/GUP-06_tn.jpg" srchighres="images/slideshow/GUP-06.jpg" onclick="showImage(this);" > <p class="caption">Verde</p> </li> <li> <img src="images/slideshow/GUP-05_tn.jpg" srchighres="images/slideshow/GUP-05.jpg" onclick="showImage(this);" > <p class="caption">Pta. Azul</p> </li> <li> <img src="images/slideshow/GUP-04_tn.jpg" srchighres="images/slideshow/GUP-04.jpg" onclick="showImage(this);" > <p class="caption">Azul</p> </li> <li> <img src="images/slideshow/GUP-03_tn.jpg" srchighres="images/slideshow/GUP-03.jpg" onclick="showImage(this);" > <p class="caption">Pta. Roja</p> </li> <li> <img src="images/slideshow/GUP-02_tn.jpg" srchighres="images/slideshow/GUP-02.jpg" onclick="showImage(this);" > <p class="caption">Rojo</p> </li> <li> <img src="images/slideshow/GUP-01_tn.jpg" srchighres="images/slideshow/GUP-01.jpg" onclick="showImage(this);" > <p class="caption">Pta. Negra</p> </li> </ul> <div id="overlay"></div> </section> </body> </html>
Bueno hasta el momento si conocemos mas o menos una estructura html nos deberían interesar solo algunos puntos.
- DOCTYPE y etiqueta html
- Algunas cosas que encontramos dentro del Head
- El evento dentro de la etiqueta body
doctype
Mucho mas sencillo que al que estabamos acostubrados con XHTL o HTML se acuerdan?
etiqueta html
Este hace referencia a un archivos .manifest que actúa como un cache para el trabajo desconectado de la web.
El Head
Esta etiqueta de metadato que hace referencia al viewport, este es el tamaño que el iPhone le da una página normal.
Aquí hacemos que saque las barras superior e inferior a Safari, esto es para simular un efecto de aplicación nativa. En resumidas cuentas es un fullscrean.
Pone un fondo negro a la barra de estado, para una mejor visualización.
En el body
Safari nos permite detectar el cambio de orientación del teléfono para ordenarle mediante código javascript algún tipo de comportamiento.
Código CSS
body {
margin: 0;
padding: 0;
font: 14px/16px Helvetica;
background-image: url(images/background-iphonelines.png);
}
h1 {
font-size: 20px;
margin: 0;
padding: 0;
border-bottom: 1px solid #666;
text-align: center;
background-image: -webkit-gradient(linear,
left top, left bottom, from(#CCC), to(#999)
);
text-shadow: 0 1px 0 #FFF;
}
h1 a {
color: #444;
text-decoration: none;
display: block;
padding: 10px 0;
}
.content {
width: 100%;
}
#lightbox ul.thumbnails {
list-style: none;
margin: 0;
padding: 10px;
z-index: 10;
position: absolute;
}
#lightbox ul.thumbnails p.caption {
margin: 0;
font: bold 10pt/9pt Helvetica;
color: #333;
text-shadow: 0 1px 0 #FFF;
}
#lightbox ul.thumbnails img {
-webkit-border-radius: 10px;
}
#lightbox ul.thumbnails li {
width: 100px;
height: 130px;
padding: 0;
float: left;
}
#overlay {
background-color: black;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 5;
opacity: 0;
-webkit-transition: all 500ms ease-out;
}
#overlay.fadein {
opacity: 1;
z-index: 30;
}
#overlay.fadeout {
opacity: 0;
z-index: 5;
}
#overlay img {
-webkit-transition: all 500ms ease-out;
-webkit-transform: scale(0);
opacity: 0.5;
}
#overlay img.showit{
-webkit-transform: scale(1);
opacity: 1;
}
#overlay img.hideit{
-webkit-transform: scale(0);
opacity: 0.5;
}
No tenemos mucho que decir sobre el código css, mas que prestar atención a las propiedades que llaman a webkit, que es el motor del navegador Safari y es lo que nos asegura la compatibilidad con iphone.
El script de nuestro archivo script.js
function showImage(originalImage) {
var highResImageURL=originalImage.getAttribute('srchighres'); //get value of high res image
var insertLocation=document.getElementById('overlay'); //create a variable to store the insertion point
var newimage=document.createElement('IMG');
newimage.src=highResImageURL; //create an image object
insertLocation.appendChild(newimage); //place the image in the document at the insert location
window.setTimeout(function() {
newimage.className="showit";
}, 100);
//Find the overlay
document.getElementById('overlay').className='fadein';
//Add a handler to the overlay that checks for clicks on it
newimage.onclick=function(){
document.getElementById('overlay').className='fadeout';
newimage.className="hideit";
window.setTimeout(function() {
insertLocation.removeChild(newimage);
}, 500);
}
}
function updateOrientation(){
var contentType = "show_";
switch(window.orientation){
case -90:
document.getElementById('lightbox').style.display = 'block';
break;
case 90:
document.getElementById('lightbox').style.display = 'block';
break;
}
}
El código javascript básicamente tiene dos funcionalidades que se encuentran bien separadas, por un lado, tenemos la funcionalidad de hacer click, en este caso seria hacer touch sobre un icono de imagen y mostrar esta una vista optimizada en nuestro dispositivo y mediante el mismo evento volver al estado anterior donde muestra todas las miniaturas, no vamos a explicar esto puesto que es una utilidad javascript que no esta relacionada específicamente a dispositivos mobiles.
La otra funcionalidad es detectar la rotación del dispositivo para desplegar de forma vertical u horizontal el contenido en este caso una imagen.
Lo detectamos como mencionamos antes con
y la función updateOrientation() se encarga de la propiedad css correspondiente.
lightbox.manifest
CACHE MANIFEST ../images/background-iphonelines.png ../images/slideshow/GUP-10_tn.jpg ../images/slideshow/GUP-10.jpg ../images/slideshow/GUP-09_tn.jpg ../images/slideshow/GUP-09.jpg ../images/slideshow/GUP-08_tn.jpg ../images/slideshow/GUP-08.jpg ../images/slideshow/GUP-07_tn.jpg ../images/slideshow/GUP-07.jpg ../images/slideshow/GUP-06_tn.jpg ../images/slideshow/GUP-06.jpg ../images/slideshow/GUP-05_tn.jpg ../images/slideshow/GUP-05.jpg ../images/slideshow/GUP-04_tn.jpg ../images/slideshow/GUP-04.jpg ../images/slideshow/GUP-03_tn.jpg ../images/slideshow/GUP-03.jpg ../images/slideshow/GUP-02_tn.jpg ../images/slideshow/GUP-02.jpg ../images/slideshow/GUP-01_tn.jpg ../images/slideshow/GUP-01.jpg ../images/lightbox_icon.png ../images/lightbox_startup.png
Como verán no resulto tan doloroso, como tip final para ejecutar en la aplicación en nuestro dispositivo apple, y que esta misma quede accesible desde el SpringBoard.
Podemos hacerlo de dos maneras la manera tradicional, la cual consiste en visitar la aplicaron accediendo a la web de la misma y con el boton mas la agregamos al inicio y de esta manera tendremos el icono en el SpingBoard. La otra forma es agregar en nuestra aplicacion un boton que haga esto de agregar a favoritos, se los dejo por su cuenta.
Espero que les sea de gran utilidad, con esto no solo estamos entrando al desarrollo de WebApps si no tambien nos estamos aproximando al desarrollo con html5.
Saludos desde Buenos Aires
Adru
