Cómo usar ajax para hacer una aplicación para HTML5 y CSS3 programación

Todo el mundo quiere hacer que las aplicaciones móviles en estos días. Aquí está el gran secreto. Muchas aplicaciones son realmente escritas en HTML5, CSS y javascript. Usted ya sabe todo lo necesario para hacer que las aplicaciones que funcionan en los dispositivos móviles. Mejor aún, usted no necesita aprender un nuevo idioma o pedir permiso a la tienda de aplicaciones o comprar una licencia, como lo hace para las aplicaciones nativas.

Hay un par de trucos maravillosos que puede hacer por los usuarios de iOS. Usted puede diseñar su programa de manera que el usuario puede añadir un icono directamente en el escritorio. El usuario puede iniciar el programa como cualquier otra aplicación. También puede hacer que el navegador ocultar el navegador normal de pertrechos para que su programa no parece que se está ejecutando en un navegador!

Resulta que estos efectos son muy fáciles de hacer.

Añadir un icono para su programa

Las versiones modernas de iOS (el sistema operativo del iPhone / iPad) ya tienen la capacidad de almacenar cualquier página web en el escritorio. Sólo ver la página web en Safari y haga clic en el botón Compartir. Usted encontrará una opción para guardar la página Web para el escritorio. Usted puede enseñar a los usuarios a hacer esto, y que será capaz de poner en marcha su programa como una aplicación normal.

Sin embargo, el icono por defecto para una aplicación de salvado es bastante feo. Si quieres un icono de aspecto agradable, puede guardar una imagen pequeña como un archivo .jpg y lo puso en el mismo directorio que el programa. A continuación, puede añadir esta línea a su página (en la cabecera) y que la imagen aparecerá en el escritorio cuando el usuario guarda su programa:

Como bono adicional, el iPhone o el iPad ajustar automáticamente la imagen para que parezca un icono de Apple, añadiendo los efectos correspondientes a la versión instalada de iOS (redondeados y vidriosos en iOS6, plana en iOS7.)

Por supuesto, este icono truco es un único Apple mecanismo. Con la mayoría de las versiones de Android, cualquier marcador que ha designado con el navegador principal se puede agregar a la mesa, pero no hay ninguna opción de icono personalizado. los apple-touch-icon Directiva simplemente se ignora si está utilizando otro sistema operativo.

Retire la barra de herramientas de Safari

Aunque el programa se ve bien en la pantalla principal, cuando el usuario activa el programa sigue siendo obvio que el programa es parte del navegador web. Puede ocultar fácilmente la barra de herramientas del navegador con otra línea en la cabecera:

Este código no va a hacer nada diferente a menos que el programa se llama desde el escritorio. Sin embargo, en ese caso, se esconde la barra de herramientas, por lo que el aspecto del programa y sentirse como una aplicación en toda regla. Como bono adicional, este se ejecuta el programa en modo de pantalla completa, que le da un poco más de espacio para el juego.

De nuevo, esto es una solución de Apple-específico. No hay una manera fácil de conseguir el mismo efecto en los dispositivos Android.

Guarde el programa en línea

Ahora el programa está mirando mucho a una aplicación, excepto que sólo se ejecuta cuando se está conectado a Internet. HTML5 tiene una característica maravillosa que le permite almacenar una página web completa a nivel local la primera vez que se ejecute.

Entonces, si el usuario intenta acceder al programa y el sistema no puede conectarse a Internet, la copia local del juego se ejecuta en su lugar. En esencia, el programa se descarga la primera vez que se activa y se queda en el dispositivo local.

Este es un efecto relativamente fácil de lograr:

• Haga su programación estable: Antes de poder utilizar el mecanismo de almacenamiento fuera de línea, usted querrá asegurarse de que su programa está cerca de-liberar listo. Como mínimo, usted tendrá que asegurarse de saber todos los archivos externos necesarios por el juego.

• Utilice sólo los recursos locales: Para este tipo de proyecto, no se puede confiar en la Internet externa, por lo que tendrá que tener todos sus archivos locales. Esto significa que no puedes usar PHP o archivos externos. Usted necesita tener una copia local de todo en el servidor.

• Construir un archivo cahce.manifest: Mira el directorio que contiene el juego, y crear un nuevo archivo de texto llamado.

• Escribe la primera línea: La primera línea del archivo cache.manifest sólo debe contener el texto CACHE MANIFEST (todo en mayúsculas).

• Haga una lista de todos los archivos en el directorio: Escribe el nombre de cada archivo en el directorio, un archivo por línea. Tenga cuidado con su capitalización y ortografía.

• Agregue el atributo manifest: los etiqueta tiene un nuevo atributo llamado manifiesto. Use esto para describir al servidor donde el manifiesto de caché se puede encontrar:

• Cargue la página normalmente: Usted tendrá que cargar la página web una vez de la forma habitual. Si todo está configurado correctamente, el navegador en silencio hacer una copia del archivo.

• Prueba en línea: La mejor manera de probar almacenamiento fuera de línea es para desactivar temporalmente el acceso inalámbrico en su equipo y luego tratar de acceder al archivo. Si las cosas funcionaron, usted debería ser capaz de ver su página como si estuviera todavía en línea.

• Compruebe la configuración del servidor: Si el almacenamiento sin conexión no funciona, puede que tenga que consultar con su administración de servidores. El texto / tipo MIME manifiesta necesita ser configurado en el servidor. Puede que tenga que pedirle a su administrador del servidor para configurar esta opción en el archivo .htaccess para su cuenta:

  AddType text / .manifest-manifiesto de la caché

Tenga en cuenta que puede tardar el mecanismo de caché de manifiesto varias horas para reconocer los cambios, por lo que cuando se realizan cambios en su página, estos cambios no se actualiza automáticamente en el navegador local. Por eso lo mejor es guardar el archivo fuera de línea para cerca del final de su ciclo de desarrollo del proyecto.