Advertisement
  1. Code
  2. PhoneGap

PhoneGap Desde Cero: Plantilla de la aplicación

Scroll to top
Read Time: 10 min
This post is part of a series called PhoneGap From Scratch.
PhoneGap From Scratch: Device APIs
PhoneGap From Scratch: Twitter & Maps

Spanish (Español) translation by Elías Nicolás (you can also view the original English article)

¿Quieres aprender a usar PhoneGap, pero no sabes por dónde empezar? Únase a nosotros mientras preparamos "Sculder", ¡no solo un tributo a una excelente serie de televisión de ciencia ficción, sino una aplicación móvil nativa para el creyente en ti!

En las últimas dos partes hemos instalado Phonegap, hemos obtenido un hello world, y luego hemos echado un vistazo a algunas de las funcionalidades que nos ofrece Phonegap. En las próximas dos partes, construiremos nuestra aplicación y veremos algunos de los desafíos que pueden surgir al hacerlo.


Planificación de la aplicación

Antes de llegar al código, vamos a tener que planificar un poco. De esta forma, sabemos exactamente lo que queremos que la aplicación logre y podemos tener una buena idea de la experiencia del usuario. Podrías lograr un gran trabajo simplemente al acertar con el código de inmediato (algo que hago todo el tiempo), pero incluso un poco de planificación previa puede ser muy útil. Pensar a través de escenarios en tu cabeza te permitirá enfrentar los problemas desde el principio.

En primer lugar, necesitamos saber qué características principales de la aplicación serán, cómo se accederá a ellas y cómo se usarán. La aplicación que vamos a construir tendrá las siguientes características:

  • Encontrar un avistamiento OVNI por ubicación
  • Tome una foto de avistamiento
  • Haga una lista de Twitter de avistamientos de OVNIS

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 quiere que se vea. Si la aplicación va a ser grande y tiene mucha funcionalidad, haré algunos wireframes, pero en este caso creo que la aplicación es pequeña y, por lo tanto, podemos clasificar la funcionalidad bastante básica a medida que construimos la aplicación.

Si desea crear wireframes, hay algunas herramientas muy buenas para ayudarlo.

Mockingbird es una herramienta en línea donde puedes 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 incompleto muy parecido a Mockingbird también. Puedes descargarlo aquí.

Omnigraffle es una aplicación mac única que puede obtener una versión de prueba gratuita de 14 días aquí. Omnigraffle es mi favorito personal y hay muchas plantillas en Graffletopia para que las use.


Diseñando la aplicación

Ver y sentir es un aspecto importante de cualquier aplicación. Cuando se trata de aplicaciones móviles, es un área que a menudo se equivoca (principalmente debido a la falta de comprensión). No soy diseñador, y no pretendo serlo, así que si no tengo un diseñador a mano para hacer los diseños, generalmente solo diseñaré en el navegador como código (o en el dispositivo en este caso).

Si quiere asegurarse de que su aplicación se vea y se sienta bien (y no lo es), ¡contrate una! Al igual que un desarrollador, los buenos diseñadores cuestan dinero. Si bien es posible que no desee desembolsar algo que pueda hacer usted mismo, es mejor que alguien que entienda el diseño lo haga por ti. ¡Tu aplicación será cien veces mejor para hacerlo!

Ha habido algunos tutoriales de diseño geniales aquí en Tuts+, que le darán una gran comprensión de lo que se requiere al sumergirse 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 usa. Si su diseño va a requerir que recorte 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 comienza 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 las solicitudes HTTP. También es posible guardar imágenes en el dispositivo o también usar almacenamiento local.


Marcado para móvil

Ahora es el momento de entrar en la codificación de HTML, CSS y Javascript para nuestra aplicación.

Comenzaremos con un HTML bastante básico.

El soporte de CSS en dispositivos móviles es bueno, pero no es genial. Si bien se admiten muchos estilos comunes, también hay algunos "te atrape". Uno de mis recursos favoritos para verificar soporte es caniuse.com. Si bien el sitio no incluye todos los navegadores para dispositivos móviles, es una referencia útil.

Continúa y crea una nueva hoja de estilo en blanco e inclúyela en el encabezado de tu html. Como ya puede hacer con las aplicaciones de su navegador de escritorio, configure algunos estilos básicos de reinicio.

A continuación, vamos a agregar un poco de HTML básico: un encabezado y algunos controles de pestañas.

Primero, le voy a dar un color al fondo y luego le doy estilo al encabezado y al pie de página. Voy a seguir adelante y presentarlos de una manera bastante normal, fijándolos en la parte superior e inferior de la pantalla y usando iScroll para darnos la capacidad de superar la falta de soporte de position:fixed en la mayoría de los dispositivos.

A continuación, descargaremos iScroll 4 desde aquí e incluiremos el archivo iscroll-lite.js. Esto nos da la funcionalidad básica que necesitaremos. También haremos un archivo app.js para manejar toda nuestra funcionalidad de JavaScript. Incluya estos archivos en el encabezado de su index.html.

En nuestro archivo Javascript necesitamos iniciar iscroll.

Ahora vamos a agregar su barra de pestañas en su pie de página.

Vamos a diseñar nuestra barra de pestañas para que cada elemento ocupe un tercio del espacio disponible.

Todo esto es CSS bastante promedio que puedes usar en una página web. El único que podría ser raro para usted es el -webkit-touch-callout:none. 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 iconos a la suya, 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.


Paginación

Ahora que tenemos listo el esqueleto de nuestra Aplicación, podemos buscar en la página 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 deslizar eso en la vista. Como se trata de una aplicación relativamente pequeña, no hay inconveniente en cargar todo por adelantado y utilizar CSS para la mayor parte del manejo de la página, al igual que lo hace jQuery Mobile.

Primero configuraremos algunas páginas dentro de nuestro contenedor principal.

Luego, asegúrese de que los enlaces href correspondan a estos.

Ahora vamos a ocultar todas las páginas y solo mostrar la página con la clase current.

A continuación, tenemos que profundizar en JavaScript. Voy a seguir adelante y usar jQuery para el resto del proyecto (no jQuery mobile). Si lo desea, puede jQuerify el inicio de iScroll (o no). Asegúrese de colocar también la versión reducida de jQuery en su directorio JS.

Primero, voy a vincular un clic a los anclajes en la barra de pestañas, ya que estamos usando jQuery 1.7 podemos usar la nueva función .on(). Luego, evitaremos la acción predeterminada de un enlace, almacenaremos el href del enlace cliqueado en una variable nextPage, eliminaremos la clase current de la página actual y finalmente agregaremos la clase a la página en la que se hace clic.

Ahora tendrá una paginación muy básica, ya que las divs de contenido ahora se ocultarán y mostrarán 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 CSS y hacer la transición entre las páginas un poco más agradable con un desvanecimiento.

Primero debemos asegurarnos de que nuestras páginas estén ubicadas de manera que nos den cierto control sobre su pantalla. Agregue el siguiente CSS.

Ahora vamos a usar animación CSS para animar la transición de página. Primero comenzamos con una configuración genérica para la función de animación y el tiempo.

Establecemos los fotogramas clave para la animación de los fotogramas clave.

Por último, configuramos el índice Z para asegurarnos de que la página que acabamos de desvanecer esté en la parte superior.

Ahora necesitamos agregar algo más de JavaScript para agregar y eliminar las clases de CSS al hacer clic. Primero necesitamos una función que tome un parámetro, que será la página a 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í.

Si nunca antes ha visto el método jQuery .one(), revise la documentation para ver solo una forma de enlace y luego desvincularla.

Si prueba ahora en su dispositivo, notará que si hace clic en el enlace de la página actual, se desvanecerá. Necesitamos poner una declaración if antes de ejecutar nuestra función de página para asegurarnos de que aún no estemos en la página actual; si lo estamos, podemos simplemente regresar de la función.

Ahora puede descargar texto en cada contenedor de página y probarlo en un dispositivo.

PhoneGap From Scratch - Demo

Conclusión

Ahora comenzamos a construir una aplicación web y conseguimos que nuestro diseño y paginación funcionen. En la siguiente parte comenzaremos a construir nuestras páginas, depurando en el móvil y comenzando nuestra integración de Phonegap.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.