Necesito convertir mi aplicación web basada en HTML5 en una aplicación móvil que se dirigirá a todos los dispositivos móviles

Question

¿Es posible convertir mi sitio HTML/jquery.js existente en una aplicación móvil que se dirige a todos los dispositivos (iPhone, Android, Blackberry, etc. .). A continuación se encuentran los puntos que se me ocurren. Por favor corrígeme si estoy equivocado. Agregue jquerymobile.js y cambie el estilo de css (según el dispositivo que está accediendo a su sitio).

¿Qué puntos debo tener en cuenta al convertir mi sitio web existente basado en escritorio en uno móvil? ¿O debería empezar a crear un sitio web móvil (sitio web móvil MVC4) desde cero? Si ese es el caso, entonces tengo que mantener 2 bases de código (1 para escritorio y 1 para móvil) que no quiero hacer.

Cualquier ayuda o referencia será muy apreciada.

Saludos, Sajesh Nambiar

Answer 1

Es posible evitar la necesidad de dos bases de código si el diseño de la aplicación Web de una manera independiente del dispositivo. Eso significa que puede mostrarse en muchos tamaños de pantalla diferentes (desde pequeños teléfonos móviles hasta televisores de plasma) y navegar usando muchos métodos de entrada diferentes (ratones, teclados, pantallas táctiles, juegos, etc.). Varias técnicas para hacer eso se conocen hoy en día como "primer móvil" o "diseño receptivo". Para un buen comienzo, consulte:

• Creating a Mobile-First Responsive Web Design
• 320 and Up - the ‘tiny screen first’ responsive boilerplate
• Mobile HTML5 Boilerplate
• la Responsive Mobile First template de Initializr
• Twitter Bootstrap
• Zurb Foundation
• Para más información, véase: Nice intro to Web Design frameworks (un vídeo de Edreih Aldana)

Tenga en cuenta que no siempre es posible o conveniente si su aplicación es muy complicada y al final puede terminar con dos (o más) bases de código en ese caso, pero la mayoría de los sitios web y las aplicaciones web se pueden construir usando esos principios en mente.

Además, teniendo en cuenta que Web Content Accessibility Guidelines puede hacer mucho más fácil el diseño de sitios web que pueden funcionar en muchos dispositivos y con muchos métodos de entrada.

No ha pedido específicamente esto pero también puede usar PhoneGap para convertir sitios web móviles o aplicaciones web a aplicaciones móviles nativas reales para iOS, Android, Blackberry, Windows Phone, Palm WebOS, Bada y Symbian, para que pueda tenga sus aplicaciones disponibles para su instalación desde varias tiendas de aplicaciones para esas plataformas en particular.

Actualización 2016

escribí esta respuesta en 2012 y algunas herramientas pertinentes se han desarrollado desde entonces:

• Ionic - un marco de aplicación móvil híbrido basado en Angular
• React Native - un marco para crear aplicaciones nativas basadas en React
• Framework7 - un marco de aplicación móvil híbrida basado en Dom7 (similar a jQuery)
• Intel XDK (anteriormente conocido como appMobi)
• Appcelerator
• AppGyver
• NativeScript
• Onsen UI
• Más en el Mobile Frameworks Comparison Chart

Answer 2

Usted puede intentar PhoneGap, un ayuno forma de implementar su aplicación para variou s tipos de dispositivos.

Answer 3

Probar phonegap build service gratis. ¡Cargas tus cosas html y automáticamente generará aplicaciones para diferentes dispositivos!

Answer 4

También puedes probar Appery.io para crear fácilmente una aplicación web. Aquí hay un artículo que le muestra cómo hacer una aplicación para iOS desde su sitio web. Si su sitio web es receptivo, se orientará automáticamente a todos los tamaños de pantallas móviles. http://www.techlivewire.com/4844/generate-an-iphone-app-for-your-website.html

Answer 5

Esta pregunta se hizo hace 3 años y tiene buenas respuestas, sólo quiero añadir algo de información, basado en mi experiencia:

Es mejor no crear un diseño móvil por separado, pero modificando web existente con el diseño web receptivo usando Bootstrap.

entonces usted tiene dos opciones:

1. Crear híbrido aplicación web utilizando Apache Cordova, es casi lo mismo que PhoneGap, mencionado anteriormente. Estoy usando Visual Studio, así que usé VS project template.
2. Aplicación web alojada que usa Manifoldjs. Creo que esta opción es fácil, solo toma su sitio web existente y envuélvalo, creando la aplicación web.

Y si utiliza Visual Studio, puede crear hosted Web App even without Manifilod.