Diseño de Vistas en PhoneGap

albertoshu · #1 (**permalink**) 24/07/2015, 01:10

Hola a todos,

Estamos desarrollando una app en Phonegap.Si bien el desarrollador hace un buen trabajo de programación y la app hace lo que tiene que hacer, no es especialista en diseño y, por tanto, las vistas que hace no son muy bonitas que digamos. Por otra parte tengo un diseñador que además de diseñar puede maquetar vistas (conoce bien html y css) y, por tanto, y por tanto debería ser el encargado del diseño y maquetación como se está haciendo con la parte web.

Sin embargo, según me dice el desarrollador, cada vez que se hace un cambio de html, para ver el resultado hay que hacer un proceso de compilación de la app en PhoneGap y luego pasarlo al móvil o en un emulador. Esto hace que el diseñador no pueda trabajar porque desconoce como realizar todo este proceso y su trabajo resultaría muy tedioso.

Lo consulta es saber si existe algún emulador, framework o algo que te permita trabajar en HTML y CSS directamente y sin tener que compilar la app cada vez que se quiera ver el resultado de un cambio en css o html (aunque la similitud con lo que luego se vea en el móvil no sea del 100%). Así, el diseñador podría trabajar de forma autónomo y una vez que las vistas estuvieran aprobadas se las podríamos pasar al desarrollador para que las integrase en el código.

Alguna sugerencia?

Gracias a todos!!

AngelKrak · #2 (**permalink**) 25/07/2015, 06:54

amigo eso es de HTML y CSS solo crea el Documento HTML en el caso y lo que hace Phonegap es compilarlo a Android o Iphone no modifica nada >_<

Código HTML:

Ver original<html>
<head>
<title>Titulo de la pag</title>
<style>
/*aqui irian los codigos del diseñador*/
</style>
</head>
<body>
<p>Aqui tu contenido</p>
</body>
</html>

y listo con eso tienes la pagina, phonegap nomas se ocupo de Compilarla al dispositivo que es ;)

pzin · #3 (**permalink**) 26/07/2015, 02:06

No creo que eso exista. Y si existe, el emulador va a tener que compilarlo. Lo que puedes hacer es usar Grunt o algo parecido para que compile (cordova prepare) cada vez que guardas un archivo. Y luego usas el emulador que sueles usar. Si usas Mac será el emulador que viene en XCode, y sino, pues el que se use normalmente, que no sé cuál será. Aunque me parece haber leído que Cordova trae un servidor para emularlo luego con una app desde un móvil (esto para Android).

Subirlo siempre a Phonegap para compilarlo e instalar en un dispositivo es obviamente un workflow bastante improductivo.

marcusaurelio · #4 (**permalink**) 31/07/2015, 17:58

Hay una extension de chome. Que si mal no recuerdo se llama ripple... que emula la medida y otras funciones de celulares... como acelerometro... ubivacion.. camara... orientacion... etc... espero te sirva...

Por otro lado para el tema diseño.. podes ver frameworks como jquery-mobile... anda muy bien y resuelve mucho

marcusaurelio · #5 (**permalink**) 31/07/2015, 18:01

Ahhhh me olvidaba... con netbeans 8 si tenes cordova y todo instalado podes compilar automaticamente y cargarlo derecho al celu... con cable... similar a como se hace con android stdio

chilam_guzman · #6 (**permalink**) 03/11/2015, 17:22

Se que ya pasó tiempo, pero dejo la respuesta por si alguien sigue atorado en esto. Es muy común este conflicto, una solución rápida y sencilla es la siguiente.
El diseñador podrá continuar su trabajo haciendo los cambios que desee, probandolo todo como un simple html en Google Chrome. ya visto en Chrome, le da en F12, so mostrara la consola de Java, en la parte de arriba hay un icono de forma de movil. Un click ahi y quedará la vista de un dispositivo, con opcion a ajustar la medida.

De esta forma el desarrollador tocará las vistas y todo el html una ves que se haya aprobado y esté listo para meterlo en phonegap