Share
¿Quiere aprender a usar PhoneGap, pero no sabe por dónde empezar? Únase a nosotros para crear "Sculder", no solo un homenaje a una excelente serie de televisión de ciencia ficción, sino también una aplicación móvil nativa para el creyente en usted.!
En las dos últimas partes, instalamos Phonegap, conseguimos un hola mundo corriendo y luego echamos un vistazo a algunas de las funciones que Phonegap nos ofrece. En las siguientes dos partes, construiremos nuestra aplicación y analizaremos algunos de los desafíos que podrían surgir al hacerlo..
Antes de comenzar con el código, tendremos que planificar un poco. De esta manera, sabemos exactamente lo que queremos lograr con la aplicación y podemos tener una buena idea de la experiencia del usuario. Puede lograr un gran trabajo simplemente presionando el código de inmediato (algo que hago todo el tiempo), pero incluso un poco de planificación de antemano puede recorrer un largo camino. Pensar en los escenarios en su cabeza le permitirá abordar los problemas desde el principio.
Primero, necesitamos saber cuáles serán las características principales de la aplicación, cómo se accederá a ellas y cómo se utilizarán. La aplicación que vamos a construir tendrá las siguientes características:
Si desea hacer wireframes para sus proyectos, siempre son buenos para asegurarse de que sabe lo que quiere que haga su aplicación y también, aproximadamente, cómo se ve. Si la aplicación va a ser grande y tiene una gran funcionalidad, haría algunos esquemas de conexión, pero en este caso creo que la aplicación es pequeña y, por lo tanto, podemos resolver la funcionalidad bastante básica a medida que desarrollamos la aplicación..
Si desea crear wireframes, hay algunas herramientas bastante buenas para ayudarle.
sinsonte es una herramienta en línea donde puede crear los wireframes en el navegador. Puedes probarlo aquí
Balsamiq Es una aplicación de Adobe Air con una gran cantidad de plantillas y elementos. Tiene un estilo esquemático muy parecido a Mockingbird también. Puedes descargarlo aquí.
Omnigraffle es una aplicación solo para Mac que puede obtener una prueba gratuita de 14 días aquí. Omnigraffle es mi favorito personal y hay muchas plantillas en Graffletopia para que uses.
La apariencia es un aspecto importante de cualquier aplicación. Cuando se trata de aplicaciones móviles, es un área que a menudo muchos se equivocan (principalmente debido a la falta de comprensión). No soy un diseñador, y no pretendo serlo, así que si no tengo un diseñador a mano para hacer los diseños, normalmente solo lo diseñaré en el navegador como codifico (o en el dispositivo en este caso).
¡Si quieres asegurarte de que tu aplicación se vea y se sienta bien para usar (y no eres una) contrata una! Como un desarrollador, los buenos diseñadores cuestan dinero. Si bien es posible que no quiera pagar por algo que podría hacer usted mismo, es mejor que alguien que entienda el diseño lo haga por usted. Tu aplicación será cien veces mejor por hacerlo.!
Ha habido algunos tutoriales de diseño excelentes aquí en Mobiletuts +, que te darán una gran comprensión de lo que se requiere al bucear en el diseño para dispositivos móviles..
Una de las consideraciones más importantes para su diseño es la cantidad de imágenes que utiliza. Si su diseño requerirá que corte los archivos PSD y use muchas imágenes (algo está mal), queremos hacer todo lo posible con CSS y, como estamos construyendo para navegadores bastante modernos, podemos aprovechar el poder de muchos. Nuevas técnicas de CSS3 para la salida deseada. Cuando comienzas a usar muchas imágenes, comienza a afectar el rendimiento de la aplicación. Cuando tengamos que usar imágenes, lo cual es probable, deberíamos crear un sprite (un archivo de imagen que contenga todas nuestras imágenes) para guardar solicitudes HTTP. También es posible almacenar imágenes en caché en el dispositivo o usar almacenamiento local.
Ahora es el momento de comenzar a codificar realmente HTML, CSS y Javascript para nuestra aplicación.
Comenzaremos con un HTML bastante básico..
Sculder
El soporte CSS en el móvil es bueno, pero no es bueno. Si bien se admiten muchos estilos comunes, también hay algunos "gotcha's". Uno de mis recursos favoritos para verificar el soporte es caniuse.com. Si bien el sitio no incluye todos los navegadores para dispositivos móviles, es una referencia útil.
Continúe y cree una nueva hoja de estilo en blanco e inclúyala en el encabezado de su html. Como ya puede hacer con las aplicaciones de su navegador de escritorio, configure algunos estilos básicos de reinicio.
html, cuerpo margen: 0; relleno: 0; borde: 0; body font-family: Arial, sans-serif; línea de altura: 1.5; tamaño de fuente: 16px; fondo: #fff; relleno: 5px; color: # 000; ajuste de palabra: palabra de descanso; -webkit-text-size-adjust: none; h1, h2, h3, h4, h5, h6 font-weight: normal; p img float: left; margen: 0 10px 5px 0; relleno: 0; img border: 0; ancho máximo: 100%;
A continuación, vamos a agregar algunos HTML básicos: un encabezado y algunos controles de pestañas..
Sculder
Primero, le daré un color al fondo y luego le daré estilo al encabezado y al pie de página. Voy a seguir adelante y distribuirlos de una manera bastante normal, fijándolos en la parte superior e inferior de la pantalla y utilizando iScroll para darnos la posibilidad de superar la falta de soporte para posición: fijo en la mayoría de los dispositivos.
/ * Estilos principales * / cuerpo fondo: # 222; header top: 0; izquierda: 0; altura: 45px; pie de página parte inferior: 0; izquierda: 0; altura: 48px; color de fondo: # c27b00; borde superior: 1px sólido #eee; header, footer background-color: # deb500; relleno: 0; posición: absoluta; índice z: 2; tamaño de fuente: 20px; ancho: 100%; text-align: center; color: # f3f3f3; font-weight: negrita; text-shadow: 0 -1px 0 rgba (0,0,0,0.5); altura de línea: 45px; h1 margen: 0; transformación de texto: mayúsculas; #wrapper posición: absoluta; índice z: 1; superior: 45px; abajo: 48px; izquierda: 0; ancho: 100%; desbordamiento: auto; # main-content position: absolute; índice z: 1; ancho: 100%; relleno: 0;
A continuación, descargaremos iScroll 4 desde aquí, e incluiremos el iscroll-lite.js expediente. Esto nos da la funcionalidad básica que necesitaremos. También haremos un app.js Archivo para manejar toda nuestra funcionalidad de JavaScript. Incluir estos archivos en la cabeza de su index.html.
En nuestro archivo Javascript necesitamos iniciar iscroll.
Accentsconagua
var theScroll; function scroll () theScroll = new iScroll ('wrapper'); document.addEventListener ('DOMContentLoaded', scroll, false); Ahora vamos a agregar nuestra barra de pestañas en nuestro pie de página..
Vamos a diseñar nuestra barra de pestañas para que cada elemento ocupe un tercio del espacio disponible..
# tab-bar margen: 0; relleno: 0; # tab-bar li display: inline; flotador izquierdo; ancho: 33.333%; # tab-bar a color: #cdcdcd; bloqueo de pantalla; font-weight: negrita; desbordamiento: oculto; posición: relativa; text-align: center; texto-decoración: ninguno; -webkit-touch-callout: ninguno;
Todo esto es un CSS bastante promedio que puedes usar en una página web. El único que podría ser el extraño para ti es el -webkit-touch-callout: ninguno. Esta regla es para detener la acción predeterminada cuando un usuario mantiene presionado un enlace..
Eso es todo lo que vamos a hacer con la barra de pestañas, pero es posible que desee agregar íconos a los suyos, al igual que la mayoría de las aplicaciones. Solo recuerde asegurarse de usar sprites para sus imágenes para mantener el impacto en el rendimiento mínimo.
Ahora que tenemos listo el esqueleto de nuestra aplicación, podemos analizar la paginación a través de nuestra aplicación. Hay una serie de buenas maneras de hacer esto. Una es cargar todo por adelantado y luego ocultar las páginas que no queremos mostrar al principio, luego, al hacer clic en un enlace, podemos usar CSS para deslizar un nuevo contenedor a la vista. Otra opción es usar Ajax y hacer una solicitud de Ajax para un archivo HTML y luego deslizarlo a la vista. Como se trata de una aplicación relativamente pequeña, no hay ningún problema en cargar todo por adelantado y usar CSS para la mayor parte del manejo de la página, como lo hace jQuery Mobile..
Primero configuraremos algunas páginas dentro de nuestro contenedor principal..
A continuación, asegúrese de que los enlaces href corresponde a estos.
Ahora vamos a ocultar todas las páginas y solo mostraremos la página con el corriente clase.
#pages> div display: none; #pages> div.current display: block;
A continuación, tenemos que sumergirnos en algunos JavaScript. Voy a seguir adelante y usar jQuery para el resto del proyecto (no jQuery mobile). Si lo desea, puede jQuerify el iScroll init (o no). Asegúrese de colocar también la versión reducida de jQuery en su directorio JS.
Primero, voy a enlazar un clic a los anclajes en la barra de pestañas, ya que estamos usando jQuery 1.7 podemos usar el nuevo .en() función. Luego evitaremos la acción por defecto de un enlace, almacenaremos href del enlace pulsado en un siguiente página variable, quitar el corriente clase de la página actual y finalmente agregar la clase a la página seleccionada.
$ ('# tab-bar a'). on ('click', function (e) e.preventDefault (); var nextPage = $ (e.target.hash); $ ("# pages .current"). removeClass ("current"); nextPage.addClass ("current");); Ahora tendrás una paginación muy básica como el contenido divs ahora se ocultará y mostrará cuando se haga clic en los enlaces.
Esto es y funcionará absolutamente bien, pero para agregar un poco más a la paginación, vamos a usar algo de CSS y hacer la transición entre páginas un poco más agradable con un fundido básico, desaparecer.
Primero, debemos asegurarnos de que nuestras páginas estén ubicadas de manera que nos den cierto control sobre su visualización. Agrega el siguiente CSS.
#pages posición: relativo; / * Actualizar este estilo * / #pages> div display: none; posición: absoluta; arriba: 0; izquierda: 0; ancho: 100%;
Ahora vamos a utilizar la animación CSS para animar la transición de la página. Primero comenzamos con algunos ajustes genéricos para la función de animación y el tiempo..
.in, .out -webkit-animation-timing-function: facilidad de entrada; -webkit-animation-duration: 400ms;
A continuación, configuramos los fotogramas clave para la animación de los fotogramas clave..
@ -webkit-keyframes fade-in from opacity: 0; a opacidad: 1;
Por último, establecemos el índice Z para asegurarnos de que la página en la que acabamos de aparecer está en la parte superior.
.fade.in -webkit-animation-name: fade-in; índice z: 5; .fade.out z-index: 0;
Ahora necesitamos agregar un poco más de JavaScript para agregar y eliminar las clases CSS al hacer clic. Primero necesitamos una función que tome un parámetro, que será la página a la que navegar, luego agregará las clases necesarias para fundir la nueva página y vincular una función a webkitAnimationEnd, Esto eliminará las clases necesarias. La función se ve así..
página de función (toPage) var toPage = $ (toPage), fromPage = $ ("# pages .current"); toPage.addClass ("fade in current"). one ("webkitAnimationEnd", function () fromPage.removeClass ("fade out current"); toPage.removeClass ("fade in"))); fromPage.addClass ("fade out"); Si nunca has visto el método jQuery. .uno() antes, echa un vistazo a la documentación, es solo una forma de encuadernación y luego de desvinculación.
Si realiza la prueba ahora en su dispositivo, notará que si hace clic en el enlace de la página actual, se desvanecerá. Necesitamos poner en una Si declaración antes de ejecutar nuestra función de página para asegurarnos de que no estamos en la página actual; si lo estamos, podemos simplemente salir de la función.
página de función (toPage) var toPage = $ (toPage), fromPage = $ ("# pages .current"); if (toPage.hasClass ("current") || toPage === fromPage) return; ; toPage.addClass ("fade in current"). one ("webkitAnimationEnd", function () fromPage.removeClass ("fade out current"); toPage.removeClass ("fade in"))); fromPage.addClass ("fade out"); Ahora puede volcar un poco de texto en cada contenedor de página y probar en un dispositivo.
Ahora hemos comenzado a crear una aplicación web y hemos conseguido que nuestro diseño y paginación funcionen. En la siguiente parte, comenzaremos a construir nuestras páginas, depuraremos en el móvil y haremos que comience nuestra integración con Phonegap..
