Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

Aparte de los diferentes colores e imágenes que las aplicaciones utilizan, un diseño de aplicación no tiene porque ser necesariamente dinámico: Los principios de diseñar una aplicación flexible son mayormente los mismos. Pero los estilos y las herramientas que un desarrollador utiliza codificando una aplicación es una historia totalmente distinta. Hay numerosas librerías y frameworks disponibles para codificar aplicaciones para moviles.

JavaScript libraries

jQuery Mobile

El framework oficial de jQuery para móviles es  jQuery Mobile. jQuery Mobile proporciona un sistema de interfaces de usuario basado en HTML-5 para  las plataformas móviles mas populares. jQuery Mobile tambien proporciona un  creador de temas para diseño de aplicaciones como para el desarrollo de estas.

Dojo Mobile

Dojo Mobile es la  Herramienta Dojo framework para moviles,presentando una serie de vistas flexibles y widgets, detección automática de dispositivo y temas, y más. El Dojo Mobile Showcase enseña el uso de Dojo Mobile de una manera avanzada en acción.

MooTools Moobile

El framework no oficial de MooTools se llama Moobile. Moobile proporciona una aplicación con lenguaje estereotipado como también un host de widgets simples para móvil.

Hay numerosos frameworks JavaScript disponibles para ayudar al desarrollo de aplicaciones web para móviles. Cuando buscas un buen framework JavaScript para una aplicación web para móviles, busca que tenga soporte multidispositivos, soporte para eventos y una API unificada que hostee el framework.

La aplicación web construida en este tutorial utilizará JQuery Mobile.Prueba y evalúa diferentes frameworks dependiendo del objetivo de tu aplicación antes de elegir alguno (o decidir no usar ninguno). En muchas ocasiones un framework te ahorrará tiempo mientras que en otros casos malgastarás tu tiempo.

Librerías CSS, ayudas y técnicas

 CSS juega un rol muy importante en cualquiera tecnología basada en web. Hay una variedad de librerías CSS que pueden ayudarte a crear, mantener y organizar tu CSS.

Preprocesadores CSS

Mientras que CSS es un lenguaje simple, a éste le faltan variables y la necesidad de asignamientos para repetir estilos que el vendedor puede predefinir puede hacer el CSS difícil de mantener. Un dolor que un desarrollador que no desarrolla aplicaciones móviles no quiere. Los preprocesadores de CSS facilitan el desarrollo de aplicaciones, permitiendo una mejor organización del código y un mas rápido desarrollo

Con uno de estos preprocesadores de CSS, LESS, CSS puede escribirse así:

@someColor: #000; /* color var */

.rounded-corners (@radius: 5px) { /* function */
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

p {
  color: @someColor;
  a {
    color: #fff;
    background: @someColor;
    
    .rounded-corners;
  }
}
	

Esto pasa a ser convertido en lo siguiente por el preprocesado de LESS

p { 
  color: #000;
}

p a {
  color: #fff;
  background: #000;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
	

Mientras que LESS es el preprocesador mas popular de CSS, SASS y Stylus tambien estan disponibles y son utiles.

CSS3 Tecnicas

Las aplicaciones web pueden tener ventajas de numerosas técnicas CSS que permiten enriquecer el diseño y estrategias para evitar las imágenes.

Gradientes

CSS3 proporciona la habilidad de crear gradientes lineales y radiales con un código CSS simple:

h1 { 
  background-image: linear-gradient(#6facd5, #497bae);
}

Sombras de texto y cajas

Cajas de sombra y sombra de textos proporciona un sutil encanto a elementos de bloque y textos:

.shadower {
  box-shadow: 10px 5px 5px #000;
  text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
  color: white;
  font: 1.5em Georgia, "Bitstream Charter", "URW Bookman L", "Century Schoolbook L", serif;
}

Formas CSS

CSS también proporciona la habilidad de crear formas como triángulos y círculos:

.arrowRight {
  width: 0; 
  height: 0; 
  border-bottom: 5px solid transparent;
  border-top: 5px solid transparent;
  border-left: 5px solid #2f2f2f;
  font-size: 0;
  line-height: 0;
}

.circle {
  border-radius: 50%;
  width: 200px;
  height: 200px;
}

Creando layouts receptivos

Codificar layouts receptivos es primordial para crear aplicaciones flexibles que operan en multiples dispositivos y en multiples orientaciones. Lo siguientes son algunas técnicas para crear un diseño.

Nuestro Layout de escritorio

desktop-screenshot1.png

Nuesto layout de móvil y dispositivos

iphone-screenshot1.pngiphone-screenshot2.png

Ancho porcentual

Ajustar el ancho de los píxeles suele ser raramente usado. El ancho porcentual es preferido ya que te dejan ajustar los elementos a la dimensiones del dispositivo. Las anchuras y alturas se deberían utilizar solo para elementos ajustados y pequeños.

Tamaño dependiente de la vista al mostrar elementos

 Enseñar y ocultar objetos basándose en la vista es una práctica común. En vez de apiñar mucho contenido en un espacio pequeño o cambiando el diseño de una app completamente simplemente esconder esos elementos de soporte podría ser una buena opción.

Tamaño dependiente de la imagen en una vista

Adaptar el tamaño de una imagen a la vista de un dispositivo también es una práctica común, hacer imágenes vectoriales(usando SVG, por ejemplo) la mejor práctica para tu aplicación web.

Consultas Media

Las consultas media deCSS dejan a los desarrolladores ajustar el layout y estilos de elementos al tamaño, la orientación, relación de aspecto de la vista y más:

/* screen size media queries */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {

}

/* orientation media queries */
@media (orientation:portrait) {

}
@media (orientation:landscape) {

}

/* advanced media query usage */
@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {

}

/* aspect ratio */
@media screen and (device-aspect-ratio: 16/9) {

}

Cambio de orientación y redimensionar eventos

Los cambios de orientación también pueden ser detectados con JavaScript. La mayoria de los navegadores usan un evento orientationchange mientras todos los navegadores son conocidos por usar el evento resize.

window.addEventListener("resize", function() { 
  // Detect orientation based on width
  var orientation = window.innerWidth > window.innerHeight ? "landscape" : "portrait";
  
  // Execute more code accordingly...
}, false);

Aplicaciones Web bootstraps

El procesamiento del lado del servidor puede ser manejada por este con la tecnología que escojas. Los lenguajes populares para servidores incluyen PHP, Python y  NodeJS + express. Hay una probabilidad de que tu aplicación implemente Mozilla Persona  para logearse en la app.

Manifiesto de las App

Las aplicaciones enviadas al MarketPlace de Firefox necesitan un manifiesto de aplicacion. Este manifiesto contiene información básica que el navegador web necesita para interactuar con la aplicación. Los manifiestos están escritos en  JSON. Un ejemplo podria ser este:

{
  "version": "0.1",
  "name": "Area Tweet",
  "description": "Find tweets by for any location",
  "icons": {
    "16": "http://areatweet.com/images/icon-16.png",
    "48": "http://areatweet.com/images/icon-48.png",
    "128": "http://areatweet.com/images/icon-128.png"
  },
  "developer": {
    "name": "David Walsh",
    "url": "http://areatweet.com"
  },
  "installs_allowed_from": [
    "https://marketplace.firefox.com",
    "http://areatweet.com"
  ],
  "default_locale": "en"
}

El manifiesto de la aplicación reside en el servidor host no en el Firefox Marketplace. Es recomendable que tu manifiesto este guardado con la extension .webapp. El manifiesto debe ser servido con un Content-Type HTTP header de application/x-web-app-manifest+json. Usa HTTPS si te lo recomienda.

Una lista completa de todas las propiedades de los manifiestos puede ser encontrada  aqui. También hay un documento de Preguntas frecuentes que proporciona consejos para crear tu manifiesto y explicaciones de porqué el proceso de host se hace así.

Utiliza paths absolutos en el manifiesto, incluso para las imágenes .El Firefox Marketplace no aceptará manifiestos con paths relativos.

Application cache

Mira Usando la cache de la aplicacion para más detalles.

Cuando una aplicación web está corriendo en la web, no se muestran los controles de navegación. Si quieres estos mira la propiedad  window.locationbar.visible . Si window.locationbar.visible está en false, no se mostrara la navegación. Podrías querer mirar esto, entonces puedes proveer controles de navegación para el usuario de la aplicación. Esto es también una manera para controlar si la aplicación está instalada o si está corriendo en la web.

Para otras maneras de controlar si estas dentro de una app mira ¿Como puede mi app detectar si esta corriendo en la web?

Etiquetas y colaboradores del documento

Colaboradores en esta página: serarroy, Adorta4
Última actualización por: serarroy,