Diseño de aplicaciones móviles / Navegación de Dev Building 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 de HTML5 / CSS3, es posible crear aplicaciones web para dispositivos móviles muy ágiles con algunos códigos frontend básicos.
En este tutorial, te mostraré cómo puedes construir un sitio web / aplicación web móvil. Usaremos consultas de medios CSS3 para identificar dispositivos específicos y resoluciones de pantalla. Además, un poco de jQuery ayuda a animar el menú y cargar el contenido de la página externa utilizando las llamadas Ajax. Aún mejor, el diseño puede incluso expandirse para mostrarse correctamente en navegadores de escritorio normales como Chrome o Firefox.
- Demo en vivo
- Código fuente
Definiendo la estructura de la página
Comencemos repasando primero la página HTML y diseñémosla con algunas reglas CSS. Me saltearé la mayoría de las meta etiquetas inusuales en el encabezado, ya que no afectan directamente a la aplicación web. Sin embargo, hay algunos que debo mencionar, a saber, del siguiente fragmento:
Compatible con X-UA se utiliza para describir cómo debe mostrarse su documento en ciertos navegadores. Es un escenario interesante cuando se codifica en HTML5, así que no me preocuparía demasiado por esto. Sin embargo el meta vista la etiqueta es muy importante Establece la ventana del navegador móvil en 100% en lugar del efecto de zoom estándar.
También es posible deshabilitar el zoom del usuario con el valor del contenido. escalable por el usuario = no. Pero en este caso, solo queremos configurar el ancho de pantalla completo para que sea igual al ancho de nuestro dispositivo. Las etiquetas de la aplicación web de Apple permitirán que el sitio web se guarde como un ícono de la pantalla de inicio en su iPhone o iPod Touch. No es totalmente necesario pero sí vale la pena tenerlo..
Contenido interno del cuerpo
Dentro de la etiqueta del cuerpo he configurado un div envoltorio con el ID #w. Por dentro he roto el diseño en dos divs más usando IDs # pagebody y #navmenu. El ancho completo de la página está limitado a 640 píxeles por elección, de modo que el diseño se escala a un número estricto.
Enlaces del menú
Al menú de navegación se le da un valor de índice z más bajo para que # pagebody siempre está en la cima Esto es crucial ya que el código JavaScript se deslizará sobre el cuerpo de la página un cierto número de píxeles para revelar la navegación debajo.
He usado un símbolo de hash (#) delante de cada página .html para detener algún mal comportamiento en Mobile Safari. Cada vez que haga clic en un enlace, aparecerá la barra de URL y empujará el contenido hacia abajo. Pero cuando se hace referencia a una ID, no se vuelve a cargar 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..
/ ** @group core body ** / #w #pagebody position: relative; izquierda: 0; ancho máximo: 640px; ancho mínimo: 320px; índice z: 99999; #w #navmenu background: # 475566; altura: 100%; bloqueo de pantalla; posición: fijo ancho: 300px; izquierda: 0px; arriba: 0px; índice z: 0;
Este segmento superior define los estilos para ambas secciones de la página. Nuestro menú de navegación tiene solo 300px de ancho, por lo que deja un poco de espacio para que el contenido de la página aún se pueda ver. El botón de abrir / cerrar menú 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 de posición: fijo en nuestro menú.
El encabezado de la barra de herramientas superior es también una sección interesante. Esto se establece en una posición fija para que se desplace con el contenido de la página. Esto replica un efecto similar al que encontrarías en cualquier barra de título de la aplicación iOS.
/ ** @group header ** / #w #pagebody header # toolbarnav display: block; posición: fijo izquierda: 0px; arriba: 0px; índice z: 9999; fondo: # 0b1851 url ('img / tabbar-solid-bg.png') arriba a la izquierda sin repetición; radio del borde: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-radio-borde: 5px; borde inferior-derecho-radio: 0; -moz-border-radius-bottomright: 0; -webkit-border-bottom-right-radius: 0; borde inferior-izquierdo-radio: 0; -moz-border-radius-bottomleft: 0; -webkit-border-bottom-left-radius: 0; altura: 44px; ancho: 100%; ancho máximo: 640px; #w # Pagebody header # toolbarnav h1 text-align: center; relleno superior: 10px; derecho de relleno: 40px; color: # e6e8f2; font-weight: negrita; tamaño de letra: 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. Este tamaño tiene un tamaño de 640 × 44 píxeles para mantener la estructura de diseño consistente. Pero también he desarrollado una imagen @ 2x para pantallas de retina de iPhone / iPad. Puede ver las dos imágenes a continuación, o obtenerlas de mi código fuente de demostración.
- System/demo/img/[email protected]
- System/demo/img/[email protected]
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 de retina.
/ ** pantalla de retina ** / @media solo pantalla y (-webkit-min-device-pixel-ratio: 2), solo pantalla y (min - moz-device-pixel-ratio: 1.5), solo screen y ( min-device-pixel-ratio: 1.5) #w #pagebody header background: # 0b1851 url ('img/[email protected] ') arriba a la izquierda, no se repite; tamaño de fondo: 640px 44px; #w #pagebody header # menu-btn background: url ('img/[email protected] ') no-repetir; tamaño de fondo: 53px 30px; Diseño de flechas de menú
En el área de navegación, también he incluido un pequeño icono de flecha en el lado derecho de cada enlace del menú. Esto puede ser fácilmente reemplazado con una imagen de cualquier arte creativo. Pero sobre todo a todos los aficionados a CSS3 les encantará probar este método..
#w #navmenu ul li a :: after content: "; display: bloque; ancho: 6px; altura: 6px; borde derecho: 3px sólido # d0d0d8; borde superior: 3px sólido # d0d0d8; posición: absoluta; : 30px; máximo: 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 el transformar Propiedad para crear un pequeño borde después del contenido. Yo tambien configuro posición: absoluta; por lo que podemos mover libremente estos bordes alrededor del elemento de enlace interno. Es muy fácil cambiar el color del borde en un estado flotante, lo que ofrece una sensación más dinámica. Es bastante increíble lo que puedes lograr usando las reglas básicas de HTML5 y CSS3.
Pero ahora vamos a pasar a los bits y piezas de código JavaScript. Recuerde que esto requiere una inclusión en la biblioteca jQuery para que mi código se ejecute correctamente.
jQuery animada
Al escribir estos códigos personalizados, he creado un nuevo documento llamado script.js. Siéntase libre de escribir esto directamente en >
$ (document) .ready (function () var pagebody = $ ("# pagebody"); var themenu = $ ("# navmenu"); var topbar = $ ("# toolbarnav"); var content = $ (" #content "); var viewport = width: $ (window) .width (), height: $ (window) .height (); // recupera las variables como // viewport.width / viewport.height Para empezar, he configurado 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 animación. Por ejemplo, puede verificar el ancho del navegador actual y abrir su menú más pequeño o más grande en consecuencia.
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 (izquierda: "0px", duration: 180, queue: false); pagebody.animate (izquierda: "0px", duration: 180, queue: false););
A continuación he definido dos funciones importantes para abrir y cerrar el menú. Esto podría haberse hecho en una sola función y conmutador de 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 que estamos apuntando se nombran barra superior y pagebody. El área de contenido interior con un fondo blanco es el cuerpo completo de la página; sin embargo, tenemos la posición de la barra de título fijada en la parte superior de la página. Esto significa que, naturalmente, no se animará con la página y necesitamos usar una llamada por separado. La apertura está configurada para empujar 290 píxeles a la izquierda (casi el ancho total de navegación de 300 píxeles) y la función de cierre la retrae.
Cargando contenido dinámico
El código de arriba 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 del 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 en su interior. Esto es fantástico porque incluso podemos usar páginas .html estáticas para el contenido. Sin PHP o Ruby o Perl o cualquier otro backend para hacer las cosas desordenadas.
Gestión de clics
En primer lugar, queremos probar cuándo nuestros usuarios hacen clic en los botones de navegación. Esto evitará que se cargue el valor normal de href y podemos utilizar nuestras propias funciones para mostrar contenido externo.
// cargando el contenido de la página para la navegación $ ("a.navlink"). live ("click", function (e) e.preventDefault (); var linkurl = $ (this) .attr ("href"); var linkhtmlurl = linkurl.substring (1, linkurl.length); var imgloader = '
Ahora estamos abriendo un selector para cualquier ancla con la clase. navlink. Cuando un usuario hace clic en uno de estos enlaces, evitamos que se cargue y configuramos una variable para la URL completa. También he configurado una variable para el contenido HTML para incluir un cargador de imágenes estándar. Si quieres personalizar el tuyo, te recomiendo encarecidamente Ajaxload.
Ajax .load ()
Hay dos piezas diferentes a este efecto que he dividido perfectamente. 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..
cierrame(); $ (function () topbar.css ("top", "0px"); window.scrollTo (0, 1);); Ahora, finalmente, queremos reemplazar el contenido del cuerpo interno con nuestra imagen y recuperar la página externa para cargar. Normalmente esto solo tomará un par de cientos de milisegundos o incluso más rápido, así que he configurado una función de tiempo de espera.
content.html (imgloader); setTimeout (function () content.load (linkhtmlurl, function () / * no callback * /), 1200);
Esto hará una pausa de 1200 milisegundos antes de cargar contenido nuevo. Para mi demostración, esto se ve mucho mejor y te da una idea de cómo se comportaría la aplicación en conexiones de Internet más lentas.
Conclusión
Recomiendo a todos los desarrolladores web que descarguen el código fuente del tutorial y jueguen solos. Este es un ejemplo tan básico de lo que se puede lograr con HTML / CSS3 y un toque de efectos de JavaScript. La creación de 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. Crear 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 sea 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..
