¿Es posible tomar una aplicación web existente y hacer que funcione en una tableta o teléfono?

Pregunta original: ¿Es posible tomar una aplicación web existente y hacer que funcione en una tableta o teléfono?

La respuesta corta es no.

No me malinterpreten, técnicamente, si acceden a su sitio desde cualquier teléfono inteligente (iOS o Android), aún podrán ver el sitio web, por desgracia, todo parecerá pequeño e ilegible, en el mejor de los casos, otra posibilidad es que su sitio pueda se ve roto si hay funciones que no son compatibles con Android y iPhone. es decir, los reproductores flash no son compatibles con dispositivos iOS y la versión más reciente de los androides. Aquí hay algunas ideas sobre apple sobre por qué no es compatible con flash.

Dicho todo esto, creo que es posible que deba comenzar a hacer una nueva aplicación web y adoptar la filosofía de un sitio web receptivo.

Un sitio web receptivo es un enfoque para la creación de páginas web que utiliza diseños flexibles, imágenes flexibles y consultas de hojas de estilo en cascada. El objetivo del diseño receptivo es crear páginas web que detecten el tamaño y la orientación de la pantalla del visitante y cambiar el diseño en consecuencia. [1]

Pocas cosas a considerar que hacen que un sitio web responda:

  1. Cuadrícula fluida : estos conceptos se centran en establecer unidades como porcentajes para el ancho y la altura de los elementos html en lugar de usar unidades absolutas como píxeles o puntos, creando así un diseño fluido que se redimensionará para adaptarse al tamaño de la pantalla.
  2. Las consultas de medios : una característica de las hojas de estilo en cascada (CSS), permiten al desarrollador especificar cuándo un cierto estilo tiene efecto. 1. esto permite que las hojas de estilo se orienten a la pantalla de un dispositivo y sirvan una hoja de estilo de escritorio, tableta o teléfono inteligente, según la respuesta de la consulta.
  3. Imágenes flexibles : también se dimensionan en unidades relativas, para evitar que se muestren fuera de su elemento contenedor.

Con todo esto, hay ciertos marcos CSS / JS que pueden ayudarlo a acelerar el proceso de hacer un sitio que tenga un diseño receptivo. Mi favorito es Bootstrap y es uno de los frameworks ampliamente utilizados que admite diseños web receptivos.

Bootstrap · El marco front-end más popular del mundo para dispositivos móviles y receptivo.

¡Apuñálalo y buena suerte!

Notas al pie

[1] ¿Qué es el diseño receptivo? – Definición de WhatIs.com

Sí, existen algunas tecnologías que le permiten reutilizar el código de aplicación web existente en aplicaciones para dispositivos móviles.

Lo más fácil y obvio es hacer que su aplicación web responda. Use CSS para diseños de cuadrícula fluida (flexbox) y use consultas de medios (consulte la otra respuesta de Carlos) para ajustar el diseño de acuerdo con el tamaño de la pantalla del dispositivo.

Apache Cordova es un marco de código abierto que le ayuda a acceder a las API nativas (como la gestión de archivos, eventos táctiles, sensores de dispositivos, gestión de derechos) a través de una única API de alto nivel. Las vistas en sí siguen siendo HTML + CSS. Si bien este enfoque es probablemente el más fácil, la aplicación resultante nunca se sentirá como una aplicación nativa real. Las animaciones no son tan fluidas, se sentirán menos receptivas. Dado que las aplicaciones Cordova / Phonegap ejecutan procesos javascript de subproceso único, siempre serán menos eficaces que una aplicación nativa. Las ventajas de una aplicación Cordova para una aplicación web solo son relevantes si es absolutamente necesario tener una aplicación. En la mayoría de los casos, recomendaría invertir en una mejor aplicación web.

Una tecnología más reciente para escribir aplicaciones multiplataforma es React Native. La principal ventaja de esto es que el código realmente se compila en un código verdaderamente nativo, lo que hace que la aplicación sea eficiente. Se admiten varios sistemas operativos (Android, iOS) y la comunidad de desarrolladores está creciendo rápidamente. Desafortunadamente, es probable que no pueda reutilizar el código de su aplicación web, pero invertir en este marco de desarrollo multiplataforma probablemente dará sus frutos a largo plazo.

Enfoque simple, hacer un sitio web y luego envolverlo alrededor de la aplicación? En caso de que se evite la codificación para dispositivos móviles.