Si has estado en la escena con iOS, seguramente has visto aparecer algunos de los hermosos sitios web de aplicaciones. Estos se han publicado en los últimos años, ya que los desarrolladores han estado buscando formas de atraer el potencial de marketing. Hay muchas plantillas de apariencia muy estándar para los diseñadores web, ¡pero mi esperanza es abordar algo nuevo!
Hoy vamos a crear una plantilla de sitio web de aplicación de iPhone con estilo usando HTML5 / CSS3. Esto no se dirigirá a una aplicación específica, por lo que no incluimos un enlace de descarga a la tienda de aplicaciones. En su lugar, he creado un pequeño formulario de registro de correo electrónico a través de MailChimp para que pueda enganchar a los primeros usuarios a la aplicación para el lanzamiento previo. Esto es genial para los desarrolladores que necesitan poner algo en marcha para su producto antes de que esté en el mercado.
Pruébalo
Ver demostración en vivo - Descargar fuente
Sin embargo, si has notado que la captura de pantalla de la aplicación que estoy usando es de una aplicación real. Se llama Ballin ~ Dribbble para iPhone y acaba de aparecer en la tienda hace unas semanas. Este diseño no se usa para aprobar la aplicación Ballin, en lugar de eso, solo necesitaba una captura de pantalla para incluir con fines de demostración. Pero no dude en utilizar otra pantalla si copia la plantilla para su propio sitio web.
Empezando
Como siempre, comenzamos con una estructura de página HTML muy simple. Si verificó la demostración, todo lo que necesitamos se centra en la página y se alinea correctamente. ¡El código no está enredado en absoluto! Estoy usando el doctype estándar de HTML5 con 3 archivos externos incluidos.
El primero son nuestros estilos global.css en un archivo alternativo. En segundo lugar, necesitamos la última biblioteca de jQuery alojada en las bases de datos de Google Code. Y, finalmente, he agregado la secuencia de comandos de validación de formularios de MailChimp. Esta etiqueta de script normalmente se copia en su área del cuerpo con el formulario de registro de correo electrónico, pero para simplificar el código lo he movido a la cabeza.
Así que ahora vamos a centrarnos en partes del cuerpo. Pasaré por alto nuestro registro de correo electrónico solo por ahora para que podamos centrarnos en los estilos y el marco básicos. Después de abrir el cuerpo notarás una identificación. # iphone-preview que se utiliza para albergar la aplicación de Ballin iPhone captura de pantalla. En realidad, solo estamos usando dos imágenes en esta página web: la pantalla del iPhone y nuestro fondo azul degradado.
También como una nota rápida, he usado un archivo PSD de iPhone 4 para crear el gráfico. Puede verlo en el blog de Macristocracy donde Jake Moore ha ofrecido el PSD gratuito para descargar. O alternativamente, simplemente descargue directamente desde su enlace de CloudApp sin visitar la página.
Más arriba hay un ejemplo de cómo se ve mi formulario después de eliminar todas las tonterías de MailChimp. Todavía contiene una gran cantidad del código original, pero he movido los mensajes de error sobre el campo de entrada principal. También utilizando el HTML5 marcador de posición atributo podemos agregar texto predeterminado en la entrada del campo de correo electrónico antes de que un usuario haga clic.
Ahora la etiqueta de script es donde la gente tiende a perderse. Si observa dos scripts, debe verificar si uno de ellos es el archivo validate.js de jQuery. Si es así, puede eliminarlo ya que ya lo hemos incluido en nuestro encabezado. Todos los demás códigos se utilizan realmente para verificar si el formulario se ha completado correctamente. Es muy complicado si no entiendes jQuery, pero afortunadamente no necesitas editar mucho de nada aquí. Si copia el JS de mi demostración frente a la descarga desde MailChimp, puede experimentar diferencias si han actualizado el servidor desde esta publicación. Para jugar de forma segura, intente trabajar en mi demo por ahora.
Quiero llamar su atención sobre un aspecto final importante del código JavaScript. La variable de opciones se utiliza para pasar información a la llamada Ajax cuando se comprueba la validación. Notarás otra URL de suscripción en jQuery, pero si tienes un ojo atento debes notar que esta no es la misma URL que antes!
Es muy importante que tengas ambas URL configuradas correctamente. La acción de formulario llama a una URI con / suscribir / publicar mientras la jQuery URL está llamando / subscribe / post-json. Incluso si copia / pega de mi demostración, solo la actualización de estas dos URL con la suya será suficiente para que el script funcione para usted.
Ver demostración en vivo - Descargar fuente
Conclusión
Esta ha sido una introducción rápida a la configuración de un sitio web de aplicación iOS con MailChimp. Hemos descargado un iPhone PSD de Internet y hemos configurado un pequeño gráfico de aplicación.También hemos utilizado algunos modelos básicos de jQuery y CSS3 para crear un fantástico formulario de registro de correo electrónico utilizando Ajax. Y con todo esto vinculado a MailChimp, obtendrá un gran servicio de suscripción totalmente gratuito.
Háganos saber sus pensamientos o preguntas en el área de comentarios a continuación. Además, si implementa el código tutorial en cualquier lugar, nos encantaría verlo en vivo. Incluya un enlace a su página web si ha configurado un diseño de plantilla de aplicación de iPhone o iPad similar.