Secciones Universitat Oberta de Catalunya
Grau i Màster de Multimèdia Universitat Oberta de Catalunya
Disseny d'Interfícies Grau i Màster de Multimèdia

Especificacions tècniques de disseny per a dispositius mòbils

El mòbil com a plataforma

(Fling, pàg. 13-26)

Els continguts que pot mostrar i gestionar un dispositiu sempre funcionen amb una plataforma i un sistema operatiu específics, a sobre dels quals s’executa l’entorn de treball (framework), les aplicacions i els serveis disponibles en el dispositiu.

Plataforma

La plataforma és el llenguatge de programació en què tot el programari del dispositiu mòbil està escrit. Hi ha tres categories de plataformes:

  • Llicenciades:
    Es distribueixen en diversos tipus de dispositius, amb l’objectiu de generar una plataforma de desenvolupament d’aplicacions que funcioni de manera semblant en tots ells. Les plataformes llicenciades actuals són les següents:

    • Java Micro Edition (Java ME), més coneguda com a J2ME. És la més estesa actualment.
    • Binary Runtime Environment for Wireless (BREW). Permet executar diferents entorns de treball (frameworks), com C / C + +, Java o Flash Lite.
    • Windows Mobile. És una versió compacta del sistema operatiu de Windows, combinada amb aplicacions per a dispositius mòbils basades en Microsoft Win32 API.
    • LiMo. És una plataforma basada en Windows. Inclou SDK per crear aplicacions Java, natives o web utilitzant l’entorn de treball WebKit.
  • Propietàries:
    Estan dissenyades i desenvolupades pels mateixos productors de mòbils, per a ser utilitzades exclusivament en els seus dispositius.

    • Palm. Utilitza tres plataformes propietàries diferents. La més estesa és la Palm OS, basada en C / C + +, però també funciona amb una plataforma basada en Windows Mobile i la webOS, que és la més recent.
    • BlackBerry. Té una plataforma propietària basada en Java.
    • iPhone. Utilitza una versió propietària de MAC OS X, basada en Unix. Es troba a iPhone, iPod i iPad.
  • Codi obert:
    Són plataformes gratuïtes que poden ser descarregades, editades i modificades. Android és probablement la més estesa.

Sistema operatiu

Els sistemes operatius permeten a les aplicacions comunicar-se les unes amb les altres, i compartir dades o serveis. Els més estesos són:

  • Symbian. Sistema operatiu de codi obert, generalment associat a dispositius Nokia.
  • Windows Mobile. Funciona sobre la plataforma Windows Mobile.
  • Palm OS.
  • Linux.
  • IOS 6 (utilitzat en iPhone, iPod i iPad).
  • Android. La plataforma Android té el seu propi sistema operatiu, que pot ser adaptat a mida per operadors i fabricants de dispositius.

Entorn de treball

Un entorn de treball (framework) s’executa sobre un sistema operatiu, i permet compartir serveis centrals com missatges, gràfics, posició, Secure, autentificació i altres. Els frameworks més estesos són els següents:

  • Java ME. Les aplicacions escrites en Java ME poden ser distribuïdes en la majoria de dispositius basats en Java.
  • S60. És un entorn de treball de codi obert per al sistema operatiu Symbian. Les aplicacions per a S60 poden ser creades en Java, Symbian C + + o Flash Lite.
  • BREW.
  • Flash Lite.
  • Windows Mobile.
  • Cocoa Touch. És l’API utilitzada per a crear aplicacions natives per a iPhone, iPod Touch i iPad. Han de ser certificades per Apple abans d’incloure’s en l’App Store.
  • Android SDK. Per als dispositius amb plataforma Android. Els desenvolupadors poden escriure aplicacions en C/C++ o utilitzar la màquina virtual Java inclosa en el sistema operatiu.
  • Web Runtime (WRTs). Nokia, Opera i Yahoo! proporcionen diversos webs Runtime o WRT. Basat en estàndards web, permet generar ginys per a mòbil. Tant els d’Opera com els de Nokia compleixen les especificacions W3C per dispositius a mòbils.
  • WebKit. És una tecnologia de navegador, de manera que les aplicacions es poden crear utilitzant simplement tecnologies web com HTML, CSS o JavaScript.
  • Web. La web és l’únic entorn de treball que funciona a pràcticament tots els dispositius i plataformes. En realitat, és l’entorn de treball que més ràpidament està estenent el seu ús.

Aplicacions

El màxim desafiament amb què s’enfronta el desenvolupament d’aplicacions per a mòbil és la diversitat de característiques dels diferents dispositius. Generalment el cost de desenvolupament és molt alt, i creix exponencialment a mesura que l’aplicació vol fer-se compatible amb diferents entorns.

L’alternativa més comuna consisteix a crear aplicacions per a una sola plataforma, com iPhone o Android, encara que són cada vegada més els desenvolupadors que veuen el desenvolupament d’aplicacions web (les que funcionen amb els navegadors) com la millor alternativa, ja que els navegadors permeten gestionar el contingut independentment del dispositiu, la plataforma o el sistema operatiu.

Serveis

Els serveis inclouen tasques bàsiques en entorn mòbil, com l’accés a Internet, l’enviament de missatges textuals o la geolocalització.

Taules

Cal evitar completament la maquetació en mòbil mitjançant taules, en primer lloc perquè algunes plataformes no admeten taules niuades, i en segon lloc per la mida petita de la pantalla.

Les taules són útils per a organitzar i mostrar dades, però no per a mantenir l’estructura de la pàgina. No tots els dispositius mostren les taules igual, ni respecten les mides de la taula, les files o les columnes.

  • Si s’utilitzen taules per a mostrar dades, cal assegurar-se que l’amplada és sempre inferior a la de la pantalla: no tots els dispositius permeten desplaçar-se d’esquerra a dreta per la pàgina, i alguns mostren errors de visualització quan l’ample és del 100% de la pàgina.
  • Per a evitar que hi hagi taules més amples que la pantalla, cal utilitzar percentatges en lloc de mides fixes per a configurar-les.
  • Cal alinear les taules a l’esquerra i utilitzar els estils de font de CSS (per exemple, l’estil CSS per a la capçalera de taula és negreta i centrat, de manera que no necessita èmfasi addicional).
  • Cal mantenir el nombre de files i de columnes al mínim, ja que incrementen el temps de visualització de la taula en pantalla.
  • Cal evitar taules amb elements que tinguin focus, ja que alguns dispositius obligaran l’usuari a desplaçar-se cel·la per cel·la per cadascun dels elements amb focus.
  • Cal alinear a dalt (top) el contingut de la taula. L’alineació per defecte és la centrada (middle), però si el text de la taula apareix tallat, només veurem el fragment central, cosa que resultarà confús.
  • Cal utilitzar CSS per a generar un fons de color altern entre les files de la taula, ja que agilitza la lectura de les dades. Els colors utilitzats han de garantir el nivell de contrast necessari perquè els continguts de la cel siguin llegibles.
  • Cal evitar que hi hagi cel·les més altes que la pantalla, per a no perdre el context.
  • Cal utilitzar un sol tipus o gruix de vora per taula, per a no generar confusió.

(Extret de: http://patterns.design4mobile.com/index.php/Screen_Design_Basics)

Llistes

Alguns dissenyadors eviten completament les taules en el disseny per a mòbils i les substitueixen per llistes, que permeten més control, major compatibilitat entre navegadors, una descàrrega més ràpida, i no requereixen CSS sofisticat.

  • Cal utilitzar ul (unordered lists – llistes no ordenades) per a les llistes amb vinyetes.
  • Cal utilitzar ol (ordered lists – llistes ordenades) per a les llistes numerades.
  • Les llistes de definició (dl) s’utilitzen rarament en els web tradicionals, però són molt útils en el disseny per a mòbils. Tots els navegadors i dispositius les admeten, i proporcionen al dissenyador control sobre el disseny. Permeten generar fàcilment menús en què hagi subelements (utilitzant dt per als elements de primer nivell i dd per als de segon nivell, que apareixeran indentats).
  • Les dl també són molt útils per a llistes numerades en què sigui necessari tenir control sobre la numeració (per exemple, si ha d’existir un element 0, que no existeixen en les llistes numerades ol).
  • Evitar les etiquetes (tags) div entre elements de la llista, ja que en alguns dispositius es genera un salt de línia més entre cada element de la llista.

(Extret de: http://patterns.design4mobile.com/index.php/Screen_Design_Basics)

CSS

El suport CSS varia àmpliament entre els navegadors disponibles per a mòbils. Per a garantir que la pàgina es veurà correctament malgrat les variacions, cal tenir en compte les següents recomanacions:

  • Mantenir els elements CSS al mínim. Més elements significa més temps de descàrrega.
  • Evitar l’ús d’abreviatures per a les propietats CSS, especialment per margin, padding, border-width, border-style, i list-style.
  • Assegurar-se que la pàgina és llegible sense CSS. Els dispositius que no admetin CSS han de poder mostrar igualment el contingut.
  • No incloure imatges en fulls d’estil externs, ja que augmenta el temps de descàrrega (descàrrega de l’arxiu http + crida a CSS + crida a descàrrega de la imatge).
  • Utilitzar CSS in-line (element style type = “text / css”), ja que estalvia una crida http i disminueix el temps de descàrrega de la pàgina.
  • Evitar l’ús dels valors de font CSS x-large o xx-large, ja que en realitat els dos valors es mostraran com a 13 píxels. Una línia de text d’aquesta mida pot ocupar un quart de l’espai vertical de la pantalla d’un mòbil, cosa que augmenta la necessitat de desplaçament.
  • No incloure en el CSS estils que no hagin de ser utilitzats, ja que cada estil incrementa la mida del fitxer i el temps de descàrrega.
  • Limitar l’ús del valor CSS text-decoration: blink. Un blink destaca un element, i el seu ús reiterat pot ser perjudicial per a la usabilitat. No hi hauria d’haver més d’un element amb aquest valor en una pàgina.
  • Es poden utilitzar diferents valors per a la propietat text-decoration, però no en la mateixa declaració CSS. Si s’aplica més d’un valor en una mateixa declaració, només n’apareixerà un.
  • Quan sigui possible, utilitzar regles en cascada en lloc d’atributs de classe o aneu, és a dir, és millor utilitzar p {align: right} que .right {align: right}. Això estalvia haver de definir class = “right” cada vegada que s’utilitza l’element.
  • Evitar la utilització d’atributs de bgcolor, link i text per al body. És millor utilitzar fulls d’estil per a controlar aquests aspectes.
  • Evitar l’especificació del tipus de llista per a llistes ordenades. És millor utilitzar fulls d’estil per a controlar aquest valor.
  • Evitar l’ús dels atributs hspace and vspace per a les imatges. És millor utilitzar fulls d’estil per a controlar aquests valors.

Optimització del codi

  • La descàrrega de dades en un dispositiu mòbil és més lenta i més cara que des d’un PC (l’amplada de banda és encara molt baixa). Les pàgines han d’optimitzar al màxim, tant en els elements que formen part de l’aparença, com en el codi.
  • És altament aconsellable treballar amb CSS, ja que:
    • Permet una descàrrega més ràpida (optimitza el codi).
    • Afavoreix l’accessibilitat, en adaptar-se als diferents formats dels dispositius.
  • Per la mateixa raó, es recomana no utilitzar taules.
  • Quan els fulls d’estil o els scripts són compartits per diverses pàgines, és millor vincular-les a les pàgines, en lloc d’incloure-les.
    Fulls d'estil compartits

(Extret de: http://patterns.design4mobile.com/index.php/Screen_Design_Basics)

Referències i enllaços relacionats