Diseño / desarrollo de aplicaciones móviles: creación de navegación con jQuery

Los teléfonos inteligentes ahora están equipados con algunos navegadores web muy eficientes. JavaScript es más potente que nunca y se puede ampliar con la ayuda de bibliotecas de código como jQuery. Cuando agrega las últimas especificaciones HTML5 / CSS3 , es posible crear aplicaciones web móviles muy ágiles con un código de interfaz básico.

En este tutorial, mostraré cómo puede crear un sitio web / aplicación web para dispositivos móviles . Usaremos consultas de medios CSS3 para apuntar a dispositivos y resoluciones de pantalla específicos. Además, un poco de jQuery ayuda a animar el menú y cargar el contenido de la página externa mediante llamadas Ajax. Aún mejor, el diseño puede incluso expandirse para mostrarse correctamente en los navegadores de escritorio normales, como Chrome o Firefox.

Definición de la estructura de la página

Comencemos revisando la página HTML primero y ajustándola usando algunas reglas CSS. Pasaré por alto la mayoría de las metaetiquetas inusuales en el encabezado, ya que no afectan directamente a la aplicación web. Sin embargo, hay algunos que debería mencionar, a saber, del fragmento a continuación:

1
2
3
4
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

Compatible con X-UA se utiliza para describir cómo debería mostrarse su documento en determinados navegadores. Es un escenario interesante cuando se codifica en HTML5 , por lo que no me preocuparía demasiado por esto. Sin embargo, la metaetiqueta de la ventana gráfica es muy importante. Establece la ventana del navegador móvil al 100% en lugar del efecto de zoom estándar.

También es posible deshabilitar el zoom del usuario con el valor del contenido user-scalable=no. Pero en este caso solo queremos configurar el ancho de pantalla completo para que sea el mismo que el ancho de nuestro dispositivo. Las etiquetas de la aplicación web de Apple permitirán que el sitio web se guarde como un icono de la pantalla de inicio en su iPhone o iPod Touch. No es totalmente necesario, pero ciertamente vale la pena tenerlo.

Contenido del cuerpo interno

Dentro de la etiqueta del cuerpo, configuré un div contenedor con la ID #w. En el interior, he dividido el diseño en dos divs más usando ID #pagebodyy #navmenu. El ancho total de la página está limitado a 640 px por elección para que el diseño se adapte a un número estricto.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
<div id="pagebody">
  <header id="toolbarnav">
    <a rel="external" href="#navmenu" id="menu-btn"></a>
   
    <h1>HK Mobile</h1>
  </header>
   
  <section id="content" class="clearfix">
    <h2>Welcome to the Mobile Site!</h2>
  </section>
</div>
 
<div id="navmenu">
  <header>
    <h1>Menu Links</h1>
  </header>
   
    <ul>
     <li><a rel="external" href="#homepage.html" class="navlink">Home</a></li>
     <li><a rel="external" href="#about.html" class="navlink">About Us</a></li>
     <li><a rel="external" href="#advertise.html" class="navlink">Advertise</a></li>
     <li><a rel="external" href="#write.html" class="navlink">Write for Us</a></li>
     <li><a rel="external" href="#contacts.html" class="navlink">Contacts</a></li>
     <li><a rel="external" href="#privacy.html" class="navlink">Privacy Policy</a></li>
    </ul>
</div>

El menú de navegación recibe un valor de índice Z más bajo para que #pagebodysiempre esté en la parte superior. Esto es crucial, ya que el código JavaScript se deslizará sobre el cuerpo de la página una cierta cantidad de píxeles para revelar la navegación debajo.

He utilizado un símbolo de almohadilla (#) delante de cada página .html para detener algunos comportamientos deficientes en Mobile Safari. Siempre que haces clic en un enlace, aparece la barra de URL y empuja hacia abajo el contenido. Pero cuando se hace referencia a un ID, no se recarga nada excepto a través de llamadas de JavaScript.

Posicionamiento CSS

No hay mucho contenido confuso dentro de nuestro código CSS. La mayor parte del posicionamiento se realiza manualmente y luego se manipula a través de jQuery. Pero hay algunas piezas interesantes en nuestro documento.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
dieciséis
17
18
19
/** @group core body **/
#w #pagebody {
  position: relative;
  left: 0;
  max-width: 640px;
  min-width: 320px;
  z-index: 99999;
}
 
#w #navmenu {
  background: #475566;
  height: 100%;
  display: block;
  position: fixed;
  width: 300px;
  left: 0px;
  top: 0px;
  z-index: 0;
}

Este segmento superior define estilos para ambas secciones de la página. Nuestro menú de navegación tiene solo 300 px de ancho, por lo que deja un poco de espacio para que el contenido de la página aún se vea. El botón de menú abrir / cerrar también se encuentra directamente en el lado izquierdo y siempre accesible. La pieza importante aquí es el valor de la propiedad del índice z y el uso position: fixed;en nuestro menú de navegación.

El encabezado de la barra de herramientas superior también es una sección interesante. Esto se establece en una posición fija, por lo que se desplazará con el contenido de la página. Esto replica un efecto similar al que encontraría en la barra de título de cualquier aplicación de iOS.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
/** @group header **/
#w #pagebody header#toolbarnav {
  display: block;
  position: fixed;
  left: 0px;
  top: 0px;
  z-index: 9999;
  background: #0b1851 url('img/tabbar-solid-bg.png') top left no-repeat;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  border-bottom-right-radius: 0;
  -moz-border-radius-bottomright: 0;
  -webkit-border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  -moz-border-radius-bottomleft: 0;
  -webkit-border-bottom-left-radius: 0;
  height: 44px;
  width: 100%;
  max-width: 640px;
}
 
#w #pagebody header#toolbarnav h1 {
  text-align: center;
  padding-top: 10px;
  padding-right: 40px;
  color: #e6e8f2;
  font-weight: bold;
  font-size: 2.1em;
  text-shadow: 1px 1px 0px #313131;
}

Reglas móviles

Es fácil notar que también estoy usando una imagen de fondo para la textura de la barra de encabezado azul. Tiene un tamaño de 640 × 44 píxeles para mantener la estructura de diseño coherente. Pero también he desarrollado una imagen @ 2x para pantallas retina de iPhone / iPad. Puede ver las dos imágenes a continuación o tomarlas de mi código fuente de demostración.

Configuré el CSS móvil para esta funcionalidad en otro archivo llamado responsive.css . Contiene dos consultas de medios que reemplazan la barra de título bg y el icono del botón de menú para dispositivos retina.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/** retina display **/
@media only screen and (-webkit-min-device-pixel-ratio: 2),
 only screen and (min--moz-device-pixel-ratio: 1.5),
 only screen and (min-device-pixel-ratio: 1.5) {
  #w #pagebody header {
    background: #0b1851 url('img/tabbar-solid-bg@2x.png') top left no-repeat;
    background-size: 640px 44px;
  }
   
  #w #pagebody header #menu-btn {
    background: url('img/nav-btn@2x.png') no-repeat;
    background-size: 53px 30px;
  }
}

Diseño de flechas de menú

En el área de navegación también he incluido un pequeño ícono de flecha en el lado derecho de cada enlace de menú. Esto se puede reemplazar fácilmente con una imagen de cualquier obra de arte de Creative Commons . Pero a todos los aficionados a CSS3 les encantará probar este método.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
dieciséis
17
#w #navmenu ul li a::after {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  border-right: 3px solid #d0d0d8;
  border-top: 3px solid #d0d0d8;
  position: absolute;
  right: 30px;
  top: 45%;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
 
#w #navmenu ul li a:hover::after { border-color: #cad0e6; }

Estamos usando la transformpropiedad para crear un pequeño borde después del contenido. También configuro position: absolute;para que podamos mover libremente estos bordes alrededor del elemento de enlace interno. Es muy fácil cambiar el color del borde en un estado de desplazamiento, lo que ofrece una sensación más dinámica. Es bastante increíble lo que puede lograr con solo usar las reglas básicas de HTML5 y CSS3.

Pero ahora pasemos a las partes del código JavaScript. Recuerde que esto requiere una inclusión en la biblioteca jQuery para que mi código se ejecute correctamente.

jQuery animado

Al escribir estos códigos personalizados, he creado un documento nuevo llamado script.js . No dude en escribirlos directamente en <script>etiquetas o descargar mi ejemplo del código fuente de la demostración.

1
2
3
4
5
6
7
8
9
10
11
$(document).ready(function(){
  var pagebody = $("#pagebody");
  var themenu = $("#navmenu");
  var topbar  = $("#toolbarnav");
  var content = $("#content");
  var viewport = {
    width : $(window).width(),
    height : $(window).height()
  };
  // retrieve variables as
  // viewport.width / viewport.height

Para empezar, configuré algunas variables de página donde podemos hacer referencia a elementos en el documento mucho más rápido. El valor de la ventana gráfica nunca se usa, pero puede ser útil si desea ajustar las etapas de la animación. Por ejemplo, puede verificar el ancho actual del navegador y abrir su menú más pequeño o más ancho en consecuencia.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
dieciséis
17
18
19
20
21
function openme() {
  $(function () {
    topbar.animate({
      left: "290px"
    }, { duration: 300, queue: false });
    pagebody.animate({
      left: "290px"
    }, { duration: 300, queue: false });
  });
}
 
function closeme() {
  var closeme = $(function() {
    topbar.animate({
      left: "0px"
    }, { duration: 180, queue: false });
    pagebody.animate({
      left: "0px"
    }, { duration: 180, queue: false });
  });
}

A continuación, definí dos funciones importantes para abrir y cerrar el menú. Esto podría haberse hecho en una sola función y alternar la devolución de llamada, excepto que en realidad necesitamos animar dos elementos distintos al mismo tiempo. Desafortunadamente, este no es el comportamiento predeterminado de jQuery, por lo que debemos recurrir a una sintaxis alternativa.

Los dos elementos a los que nos dirigimos se denominan barra superior y cuerpo de página . El área de contenido interior con fondo blanco es el cuerpo de página completo; sin embargo, tenemos la posición de la barra de título fijada en la parte superior de la página. Esto significa que no se animará naturalmente con la página y necesitamos usar una llamada separada. La apertura está configurada para empujar 290px hacia la izquierda (casi el ancho de navegación completo de 300px) y la función de cierre la retrae.

Cargando contenido dinámico

El código anterior es bastante fácil para cuidar la animación. Y, en teoría, eso es todo lo que necesita para un sitio web móvil tan simple, pero quiero agregar un poquito más.

Cada vez que el usuario hace clic en un enlace de menú queremos cerrar la navegación actual y mostrar un gif de carga mientras buscamos el contenido de la página. Luego, una vez completado, eliminamos la imagen gif y la cargamos dentro. Esto es fantástico porque incluso podemos usar páginas .html estáticas para el contenido. Sin PHP o Ruby o Perl o cualquier lenguaje de backend para complicar las cosas.

Gestión de clics

En primer lugar, queremos probar cuando nuestros usuarios hacen clic en los botones de navegación. Esto evitará que se cargue el valor href normal y, en su lugar, podremos usar nuestras propias funciones para mostrar contenido externo.

1
2
3
4
5
6
7
// loading page content for navigation
$("a.navlink").live("click", function(e){
  e.preventDefault();
  var linkurl   = $(this).attr("href");
  var linkhtmlurl = linkurl.substring(1, linkurl.length);
   
  var imgloader  = '<center style="margin-top: 30px;"><img src="img/preloader.gif" alt="loading..." /></center>';

Ahora estamos abriendo un selector para cualquier ancla con la clase navlink. Cada vez que un usuario hace clic en uno de estos enlaces, evitamos que se cargue y configuramos una variable para la URL completa. También configuré una variable para el contenido HTML para incluir un cargador de imágenes estándar. Si desea personalizar el suyo, le recomiendo encarecidamente Ajaxload .

Ajax .load ()

Hay dos piezas diferentes en este sentido que he dividido cuidadosamente. El siguiente código es nuestro primer bit que cierra el menú de navegación y desliza la ventana total del documento hasta la parte superior. Queremos reemplazar el contenido del cuerpo interno con una pequeña animación de cargador, y los usuarios no pueden ver esto si estaban mirando al final de la página.

1
2
3
4
5
6
closeme();
   
$(function() {
  topbar.css("top", "0px");
  window.scrollTo(0, 1);
});

Ahora, finalmente, queremos reemplazar el contenido del cuerpo interno con nuestra imagen y buscar la página externa para cargar. Normalmente, esto solo tomará un par de cientos de milisegundos o incluso más rápido, así que configuré una función de tiempo de espera.

1
2
3
content.html(imgloader);
   
setTimeout(function() { content.load(linkhtmlurl, function() { /* no callback */ }) }, 1200);

Esto detendrá 1200 milisegundos antes de cargar contenido nuevo. Para mi demostración, esto se ve mucho mejor y le da una idea de cómo se comportaría la aplicación en conexiones a Internet más lentas.

Aplicación web móvil HTML5 / CSS3 / tutorial de jQuery - demostración en vivo

Conclusión

Animo a todos los desarrolladores web a descargar el código fuente del tutorial y jugar por su cuenta. Este es un ejemplo básico de lo que se puede lograr con HTML / CSS3 y un toque de efectos JavaScript. La creación para pantallas móviles es más fácil que nunca con consultas de medios y navegadores web más extensibles.

Vea si puede aplicar alguno de estos códigos en sus futuros proyectos web. La creación de aplicaciones móviles es un arte, al igual que el diseño web, y requiere mucha dedicación y práctica. Espero que este tutorial pueda ser un buen punto de partida para unos pocos desarrolladores entusiastas. Si tiene preguntas o pensamientos sobre el código, no dude en compartir con nosotros en el área de discusión posterior.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *