\nSe distribuyen en varios tipos de dispositivos con el objetivo de generar una plataforma de desarrollo de aplicaciones que funcione de manera parecida en todos ellos. Las plataformas licenciadas actuales son las siguientes:<\/p>\n
- \n
- Java Micro Edition<\/i>\u00a0(Java ME), m\u00e1s conocida como J2ME. Es la m\u00e1s extendida actualmente.<\/li>\n
- Binary Runtime Environment for Wireless<\/i>\u00a0(BREW<\/i>). Permite ejecutar diferentes\u00a0frameworks<\/i><\/a>, como C\/C++, Java o Flash Lite.<\/li>\n
- Windows Mobile<\/i>. Es una versi\u00f3n compacta del sistema operativo de Windows, combinada con aplicaciones para dispositivos m\u00f3viles basadas en Microsoft Win32 API.<\/li>\n
- LiMo<\/i>. Es una plataforma basada en Windows. Incluye\u00a0SDK<\/a>\u00a0para crear aplicaciones Java, nativas o web utilizando el framework<\/i> WebKit.<\/li>\n<\/ul>\n<\/li>\n
- Propietarias<\/b>:
\nEst\u00e1n dise\u00f1adas y desarrolladas por los mismos productores de m\u00f3viles para ser utilizadas en exclusiva en sus dispositivos.<\/p>\n- \n
- Palm utiliza tres plataformas propietarias diferentes. La m\u00e1s extendida es la Palm OS, basada en C\/C++, pero tambi\u00e9n soporta una plataforma basada en Windows Mobile, y la webOS, que es la m\u00e1s reciente.<\/li>\n
- BlackBerry. Tiene una plataforma propietaria basada en Java.<\/li>\n
- iPhone. Utiliza una versi\u00f3n propietaria de MAC os X, basada en Unix. Se encuentra en los iPhone, iPod y iPad.<\/li>\n<\/ul>\n<\/li>\n
- C\u00f3digo abierto<\/b>:
\nSon plataformas gratuitas que se pueden descargar, editar y modificar.\u00a0Android<\/a>\u00a0es probablemente la m\u00e1s extendida.<\/li>\n<\/ul>\nSistema operativo<\/b><\/p>\n
Los sistemas operativos permiten a las aplicaciones comunicarse las unas con las otras, as\u00ed como compartir datos o servicios. Los m\u00e1s extendidos son los siguientes:<\/p>\n
- \n
- Symbian<\/a>. Sistema operativo de c\u00f3digo abierto, en general asociado a dispositivos Nokia.<\/li>\n
- Windows Mobile<\/a>. Funciona sobre la plataforma Windows Mobile.<\/li>\n
- Palm OS<\/a>.<\/li>\n
- Linux<\/a>.<\/li>\n
- IOS 6<\/a>\u00a0(utilizado en los iPhone, iPod y iPad).<\/li>\n
- Android<\/a>. La plataforma Android tiene su propio sistema operativo, que puede ser adaptado a medida por operadores y fabricantes de dispositivos.<\/li>\n<\/ul>\n
Framework<\/i><\/b><\/i><\/p>\n
Un framework<\/i> se ejecuta sobre un sistema operativo y permite compartir servicios centrales, como mensajes, gr\u00e1ficos, posici\u00f3n, Secure<\/i>, autentificaci\u00f3n y otros. Los frameworks<\/i> m\u00e1s extendidos son los siguientes:<\/p>\n
- \n
- Java ME. Las aplicaciones escritas en Java ME se pueden distribuir en la mayor\u00eda de dispositivos basados en Java.<\/li>\n
- S60. Es un framework<\/i> de c\u00f3digo abierto para el sistema operativo Symbian. Las aplicaciones para S60 se pueden crear en Java, Symbian C + + o Flash Lite.<\/li>\n
- BREW.<\/li>\n
- Flash Lite.<\/li>\n
- Windows Mobile.<\/li>\n
- Cocoa Touch. Es la API<\/a>\u00a0utilizada para crear aplicaciones nativas para iPhone, iPod Touch y iPad. Tienen que ser certificadas por Apple antes de incluirse en la App Store.<\/li>\n
- Android SDK. Para los dispositivos con plataforma Android. Los desarrolladores pueden escribir aplicaciones en C\/C++ o utilizar la m\u00e1quina virtual Java incluida en el sistema operativo.<\/li>\n
- Web Runtime (WRT). Nokia, Opera y Yahoo! proporcionan varios Web Runtime o WRT. Basado en est\u00e1ndares web, permite generar widgets<\/i> para m\u00f3vil. Tanto los de Opera como los de Nokia cumplen las\u00a0especificaciones W3C para dispositivos m\u00f3viles<\/a>.<\/li>\n
- WebKit. Es una tecnolog\u00eda de navegador, de modo que las aplicaciones se pueden crear utilizando simplemente tecnolog\u00edas web como HTML, CSS o Javascript.<\/li>\n
- Web. La web es el \u00fanico framework<\/i> que funciona en pr\u00e1cticamente todos los dispositivos y plataformas. En realidad,\u00a0es el framework<\/i> que con m\u00e1s rapidez est\u00e1 extendiendo su uso<\/b>.<\/li>\n<\/ul>\n
Aplicaciones<\/b><\/p>\n
El m\u00e1ximo desaf\u00edo con el que se enfrenta el desarrollo de aplicaciones para m\u00f3vil es la diversidad de caracter\u00edsticas de los diferentes dispositivos. En general, el coste de desarrollo es muy alto y crece exponencialmente a medida que la aplicaci\u00f3n quiere hacerse compatible con diferentes entornos.<\/p>\n
La alternativa m\u00e1s com\u00fan consiste en crear aplicaciones para una sola plataforma, como iPhone o Android, aunque son cada vez m\u00e1s los desarrolladores que ven el\u00a0desarrollo de aplicaciones web<\/b>\u00a0(las soportadas por los navegadores) como la mejor alternativa, puesto que los navegadores permiten gestionar el contenido con independencia del dispositivo, la plataforma o el sistema operativo.<\/p>\n
Servicios<\/b><\/p>\n
Los servicios incluyen tareas b\u00e1sicas en entorno m\u00f3vil, como el acceso a Internet, el env\u00edo de mensajes textuales o la geolocalizaci\u00f3n.<\/p>\n
\n
\n<\/div>\nTablas<\/i><\/b><\/p>\n
Hay que\u00a0evitar por completo la maquetaci\u00f3n en m\u00f3vil mediante tablas<\/b>, en primer lugar porque algunas plataformas no admiten tablas nidadas y, en segundo lugar, por el peque\u00f1o tama\u00f1o de la pantalla.<\/p>\n
Las tablas son \u00fatiles para organizar y mostrar datos, pero no para mantener la estructura de la p\u00e1gina. No todos los dispositivos muestran las tablas igual ni respetan los tama\u00f1os de la tabla, las filas o las columnas.<\/p>\n
- \n
- Si se utilizan tablas para mostrar datos, hay que asegurarse de que su anchura sea siempre inferior a la de la pantalla: no todos los dispositivos permiten desplazarse de izquierda a derecha por la p\u00e1gina y algunos de ellos muestran errores de visualizaci\u00f3n cuando el ancho es del 100% de la p\u00e1gina.<\/li>\n
- Para evitar que haya tablas m\u00e1s anchas que la pantalla, hay que utilizar porcentajes en lugar de tama\u00f1os fijos para configurarlas.<\/li>\n
- Alinear las tablas a la izquierda y utilizar los estilos de fuente de CSS (por ejemplo, el estilo CSS para las cabecera de tabla es negrita y centrado, de modo que no necesita \u00e9nfasis adicional).<\/li>\n
- Mantener el n\u00famero de filas y de columnas al m\u00ednimo, ya que incrementan el tiempo de visualizaci\u00f3n de la tabla en pantalla.<\/li>\n
- Evitar tablas con elementos que tengan focos, ya que algunos dispositivos obligar\u00e1n al usuario a desplazarse celda por celda por cada uno de los elementos con focos.<\/li>\n
- Alinear arriba (top<\/i>) el contenido de la tabla. La alineaci\u00f3n por defecto es la centrada (middle<\/i>), pero si el texto de la tabla aparece cortado, solo veremos el fragmento central, lo que resultar\u00e1 confuso.<\/li>\n
- Utilizar CSS para generar un fondo de color alterno entre las filas de la tabla, puesto que agiliza la lectura de los datos. Los colores utilizados tienen que garantizar el nivel de contraste necesario para que los contenidos de la celda sean legibles.<\/li>\n
- Evitar que haya celdas m\u00e1s altas que la pantalla para no perder el contexto.<\/li>\n
- Utilizar un solo tipo o grueso de borde por tabla para no generar confusi\u00f3n.<\/li>\n<\/ul>\n
(Extra\u00eddo de http:\/\/patterns.design4mobile.com\/index.php\/Screen_Design_Basics<\/a>.)<\/p>\n
\n
\n<\/div>\nListas<\/i><\/b><\/p>\n
Algunos dise\u00f1adores evitan por completo las tablas en el dise\u00f1o para m\u00f3viles y las sustituyen por listas, que permiten m\u00e1s control, mayor compatibilidad entre navegadores, una descarga m\u00e1s r\u00e1pida y no requieren CSS sofisticado.<\/p>\n
- \n
- Utilizar ul (unordered lists<\/i> o listas no ordenadas) para las listas con vi\u00f1etas.<\/li>\n
- Utilizar ol (ordered lists<\/i> o listas ordenadas) para las listas numeradas.<\/li>\n
- Las listas de definici\u00f3n (dl) se utilizan raramente en los web tradicionales, pero son muy \u00fatiles en el dise\u00f1o para m\u00f3viles. Todos los navegadores y dispositivos las soportan, y proporcionan al dise\u00f1ador control sobre el dise\u00f1o. Permiten generar con facilidad men\u00fas en los que haya subelementos (utilizando dt para los elementos de primer nivel y dd para los de segundo nivel, que aparecer\u00e1n indentados).<\/li>\n
- Las dl tambi\u00e9n son muy \u00fatiles para listas numeradas en las que sea necesario tener control sobre la numeraci\u00f3n (por ejemplo, si tiene que existir un elemento 0, que no hay en las listas numeradas ol).<\/li>\n
- Evitar los tags<\/i> div entre elementos de la lista, ya que en algunos dispositivos se genera un salto de l\u00ednea m\u00e1s entre cada elemento de la lista.<\/li>\n<\/ul>\n
(Extra\u00eddo de http:\/\/patterns.design4mobile.com\/index.php\/Screen_Design_Basics<\/a>.)<\/p>\n
\n
\n<\/div>\nCSS<\/i><\/b><\/p>\n
El soporte CSS var\u00eda ampliamente entre los navegadores disponibles en m\u00f3viles. Para garantizar que la p\u00e1gina se ver\u00e1 correctamente a pesar de las variaciones, hay que tener en cuenta las siguientes recomendaciones:<\/p>\n
- \n
- Mantener los elementos CSS al m\u00ednimo. M\u00e1s elementos significa m\u00e1s tiempo de descarga.<\/li>\n
- Evitar el uso de abreviaturas para las propiedades CSS, en especial por margin<\/i>, padding<\/i>, border-width<\/i>, border-style<\/i> y list-style<\/i>.<\/li>\n
- Asegurarse de que la p\u00e1gina es legible sin CSS. Los dispositivos que no soporten CSS tienen que poder mostrar del mismo modo el contenido.<\/li>\n
- No incluir im\u00e1genes en hojas de estilo externas, ya que aumenta el tiempo de descarga (descarga del archivo http + llamada a CSS + llamada a descarga de la imagen).<\/li>\n
- Utilizar CSS in-line<\/i> (elemento style type<\/i> = \u201ctext \/ css\u201d), puesto que ahorra una llamada http y disminuye el tiempo de descarga de la p\u00e1gina.<\/li>\n
- Evitar el uso de los valores de fuente CSS x-large<\/i> o xx-large<\/i>, ya que en realidad los dos valores se mostrar\u00e1n como 13 p\u00edxeles. Una l\u00ednea de texto de este tama\u00f1o puede ocupar un cuarto del espacio vertical de la pantalla de un m\u00f3vil, lo que aumenta la necesidad de scroll<\/i>.<\/li>\n
- No incluir en el CSS estilos que no tengan que ser utilizados, puesto que cada estilo incrementa el tama\u00f1o del fichero y el tiempo de descarga.<\/li>\n
- Limitar el uso del valor CSS \u201ctext-decoration: blink\u201d. Un \u201cblink\u201d destaca un elemento, y su uso reiterado puede ser perjudicial para la usabilidad. No tendr\u00eda que haber m\u00e1s de un elemento con este valor en una p\u00e1gina.<\/li>\n
- Se pueden utilizar diferentes valores para la propiedad \u201ctext-decoration\u201d, pero no en la misma declaraci\u00f3n CSS. Si se aplica m\u00e1s de un valor en una misma declaraci\u00f3n, solo aparecer\u00e1 uno de los valores.<\/li>\n
- Cuando sea posible, utilizar reglas en cascada en lugar de atributos de clase, es decir, es mejor utilizar p {align: right} que .right {align: right}. Esto ahorra tener que definir class = \u201cright\u201d cada vez que se utiliza el elemento.<\/li>\n
- Evitar la utilizaci\u00f3n de atributos de bgcolor<\/i>, link<\/i> y text<\/i> para el body<\/i>. Es mejor utilizar hojas de estilo para controlar estos aspectos.<\/li>\n
- Evitar la especificaci\u00f3n del tipo de lista para listas ordenadas. Es mejor utilizar hojas de estilo para controlar este valor.<\/li>\n
- Evitar el uso de los atributos hspace<\/i> y vspace<\/i> para las im\u00e1genes. Es mejor utilizar hojas de estilo para controlar estos valores.<\/li>\n<\/ul>\n
Optimizaci\u00f3n del c\u00f3digo<\/b><\/p>\n
- \n
- La descarga de datos en un dispositivo m\u00f3vil es m\u00e1s lenta y m\u00e1s cara que desde un PC (el ancho de banda es todav\u00eda muy bajo). Las p\u00e1ginas se han de optimizar al m\u00e1ximo, tanto en los elementos que forman parte de su apariencia como en su c\u00f3digo.<\/li>\n
- Es altamente aconsejable trabajar con\u00a0CSS<\/b>, ya que:\n
- \n
- Permite una descarga m\u00e1s r\u00e1pida (optimiza el c\u00f3digo),<\/li>\n
- Favorece la accesibilidad, al adaptarse a los diferentes formatos de los dispositivos.<\/li>\n<\/ul>\n<\/li>\n
- Por la misma raz\u00f3n, se recomienda\u00a0no utilizar tablas<\/b>.<\/li>\n
- Cuando las\u00a0hojas de estilo<\/b>\u00a0o los\u00a0scripts<\/i><\/b>\u00a0son\u00a0compartidos<\/b>\u00a0por varias p\u00e1ginas, es mejor vincularlas a las p\u00e1ginas, en lugar de incluirlas.<\/li>\n<\/ul>\n
![\"Fulls](\"http:\/\/multimedia.uoc.edu\/blogs\/dim\/files\/2013\/04\/cssHtml-300x217.png\")
<\/a><\/p>\n(Extra\u00eddo de http:\/\/patterns.design4mobile.com\/index.php\/Screen_Design_Basics<\/a>.)<\/p>\n
\n
\n<\/div>\nReferencias y enlaces relacionados<\/i><\/b><\/p>\n
- Microsoft Touch Guidance<\/a><\/li>\n
- Mobile Web Application Best Practices<\/em><\/a><\/li>\n
- Mobile design<\/em><\/a><\/li>\n
- Dise\u00f1o para iPhone<\/a><\/li>\n
- Dise\u00f1o para Android\n
- \n
- http:\/\/developer.android.com\/design\/index.html<\/a><\/li>\n
- http:\/\/www.androidpatterns.com\/<\/a><\/li>\n<\/ul>\n<\/li>\n
- Disseny per a Windows Mobile<\/a><\/li>\n
- Brian Fling<\/b> (2009). Mobile Design and Development<\/i>. Sebastopol, CA, Estados Unidos: O\u2019Reilly Media Inc.<\/li>\n<\/ul>\n
<\/p>","protected":false},"excerpt":{"rendered":"
El m\u00f3vil como plataforma (Fling, p\u00e1gs. 13-26) Los contenidos que puede mostrar y gestionar un dispositivo siempre son soportados por una plataforma y un sistema operativo espec\u00edficos, sobre los cuales se ejecuta el framework, las aplicaciones y los servicios disponibles en el dispositivo. Plataforma La plataforma es el lenguaje de programaci\u00f3n en el que todo … <\/p>\n
- http:\/\/www.androidpatterns.com\/<\/a><\/li>\n<\/ul>\n<\/li>\n
- Cuando las\u00a0hojas de estilo<\/b>\u00a0o los\u00a0scripts<\/i><\/b>\u00a0son\u00a0compartidos<\/b>\u00a0por varias p\u00e1ginas, es mejor vincularlas a las p\u00e1ginas, en lugar de incluirlas.<\/li>\n<\/ul>\n
- Utilizar ol (ordered lists<\/i> o listas ordenadas) para las listas numeradas.<\/li>\n
- Windows Mobile<\/a>. Funciona sobre la plataforma Windows Mobile.<\/li>\n
- Symbian<\/a>. Sistema operativo de c\u00f3digo abierto, en general asociado a dispositivos Nokia.<\/li>\n
- Binary Runtime Environment for Wireless<\/i>\u00a0(BREW<\/i>). Permite ejecutar diferentes\u00a0frameworks<\/i><\/a>, como C\/C++, Java o Flash Lite.<\/li>\n