Desarrollo de aplicaciones web móviles (I)

Desarrollo web. Y mobile. Se están realizando actualmente proyectos en los dos ámbitos, pero son muchos los factores a tener en cuenta a la hora de afrontar desarrollos de escritorio o móviles.
Todos conocemos el mundo de las APPS, y el usuario está totalmente encantando! Si pensamos en APP, diríamos que tenemos que ofrecerla para iOS y para Android. Ahora, podemos emplear HTML5.

Es decir, HTML+CSS+Javascript. Lo encapsulamos con phoneGap y tendremos nuestra APP Nativa. Un front-end developer, tendrá que aprender a configurar un Eclipse, importar librerías, … pronto podréis ver un caso práctico de nuestros amigos de Molecularts. Vamos a frenar en seco.

  • APP NATIVA. iOS Developer/Android Developer. Mobile Developer.
  • APP Híbrida. Se desarrolla con HTML5, y se encapsula para distribuirla en las store de Apple o Android. Que no son las únicas.
  • Web APP. Se desarrolla con HTML5. Optimizando para navegadores móviles, aprovechando las características de los dispositivos: no-smartphone, smartphone, tablet… pero teniendo en cuenta sus limitaciones. En la imagen inferior podéis ver como ‘instalar’ una aplicación web a tu iphone.

Trabajamos duro para construir aplicaciones web multiplaforma, pero la fragmentación del mercado de navegadores en escritorio o en entorno móvil es horrible… Si nos ceñimos al entorno de los dispositivos móviles ademas de ser demasiados, muchos son ellos son limitados, algunos muy innovadores, la mayoría sin documentación, la mayoría sin nombre, la mayoría sin herramientas de debug…

Para Mobile, disponemos de Safari en iOS, Android Browser, Symbian Browser, webOS browser, Bada, Firefox, IE,.. Opera Mobile y Opera Mini, Nokia Browser(OVI), Myriad, NetFront.. Para Tablets: Safari en iOS, Android Browser, webOS browser, Blackberry, Opera Mini… Y todos ellos con sus diferentes versiones claro.

En Mobile Patterns podéis ver cómo resolver la falta de espacio😉
Piensa en los usuarios que acceden desde un navegador móvil. Cuando accedan quítales la barra de direcciones, cómo: window.scrollTo(0, 1);

Olvidaros de los píxeles. De los diseños estáticos, nuestros usuarios cada vez disponen de más diversos dispositivos, con muy diferentes resoluciones. Y recordar que no sólo hablamos en este caso de un monitor o la pantalla de un móvil o una tablet, pueden ser también SmartTV. Pero para entornos móviles tener en cuenta que nuestros usuarios quizás no puedan estar siempre conectados, y que los dispositivos tienen un límite de energía.

Para desarrollar para móviles unos primeros consejos:

Debug & Test

Keynote Device Anywhere
perfecto mobile
Mobitest

Emuladores

http://www.mobilexweb.com/emulators
http://www.opera.com/developer/tools/mini/

– No ‘parsees’ javascript, se toma entre 1/100ms por cada 1kb; y produce retardos en el onload.
– Divide tu código en módulos.
– Una práctica muy interesante del equipo Mobile de Gmail. COMENTA TU CÓDIGO: <script>/**/</script>. Y cuando lo necesites descomentas.
– El código que sólo se emplee una vez, debería ir en línea. Sin hojas de estilos, scripts, o imágenes externas. Que tienes más de una página y es inevitable desarrollar inline, puedes emplear recursos externos. Pero podrías empezar a usar LocalStorage.

Trataremos de ir aportando contenidos pero sino puedes esperar más y quieres aprender ya a desarrollar aplicaciones web móviles te recomendamos que empieces en Mobile HTML5.
Y si lo que buscas es inspiración entonces tu sitio es http://mediaqueri.es.

En el próximo post abordaremos como desarrollar plantillas adaptables según el dispositivo que consume nuestra aplicación empleando Media Queries.

4 comments

  1. Pingback: Desarrollo de aplicaciones web móviles (I) « HTML5 Spain » Web Design
  2. Óscar Antón · mayo 23, 2012

    Eso es lo que estaba buscando de tu ponencia en el DevUp.

  3. Pablo · enero 22, 2013

    Para quienes se interesen en este tema he preparado un curso online de desarrollo de apps para iOS y Android con HTML5: http://www.udemy.com/apps-iphone-android-con-html5/

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s