Udd Informe Dispositivosmoviles 2009

Desarrollo de interfases Integración y publicación de
para dispositivos móviles contenido periodístico en telefonía celular
Proyecto de Investigación de los profesores

Claudio Pérez P. y Guillermo Verbakel V.
FACULTAD
Comunicaciones / Periodismo
Concepción, junio de 2009

Introducción
Desarrollo de interfases para dispositivos móviles
FACULTAD Proyecto de Integración y publicación de

Comunicaciones / Periodismo Investigación contenido periodístico en telefonía celular
2|
Introducción
La telefonía móvil está experimentando grandes fería a lo anterior en uno de sus cursos online de
cambios. Es una de las áreas de mayor crecimiento Lynda.com. “Los celulares están en todas partes.
en los últimos años. El Mobile World Congress -una Las ventas continúan aumentando globalmente y
feria en Barcelona en que se reúnen anualmente las aquí en Estados Unidos. Una de las causas es que
grandes empresas de este rubro- es una muestra de ya no sólo sirven para hacer llamadas. La mensajería
ello. de texto es lejos el servicio más utilizado mientras
el intercambio de archivos peer to peer y el envío
Uno de los temas principales del evento de este de fotografías está creciendo rápidamente. La gente
año fue la implementación de las redes de 4ª ge- quiere estar informada, la gente quiere entretención
neración, cuya comercialización se proyecta en 1 ó y la gente lleva teléfonos”.
2 años en los países desarrollados. Esta tecnología
permitirá streaming[1] de televisión, videoconferen- Las estadísticas ratifican la velocidad con que crece
cia y descarga de películas en dispositivos móviles, este mercado y las oportunidades para operadores,
entre otros servicios, gracias a las altas velocidades marcas de dispositivos móviles y creadores de con-
de transmisión de datos. tenido.
Edzard Overbeek, Vicepresidente Senior de Cisco y Según las proyecciones de la Unión Internacional de
Country Manager de la compañía en Japón, grafica la Telecomunicaciones (UIT) este año se llegará a los
velocidad con que están ocurriendo las innovaciones 4 mil millones de teléfonos móviles en el mundo, lo
en esta área en una entrevista que ofreció durante la cual implica una penetración de un 61%. Considere
realización del congreso. “He tenido varias conver- que en 2006 había 2 mil 700 millones suscriptores
saciones con clientes en la feria. En todas ellas les de celulares.
hago la siguiente pregunta: ‘Si es que hubiésemos
estado en esta misma reunión hace 5 años, ¿cuántas En Chile la penetración es de un 87,8% a diciembre
de sus predicciones se hubiesen hecho realidad? Y de 2008 -según la Subsecretaría de Telecomunica-
muchos de nuestros clientes dijeron que ninguna, lo ciones (Subtel)-, lo cual se traduce en 14.796.593
cual demuestra lo rápido que está evolucionando el abonados de telefonía móvil en el país.
mercado”.
Las cifras de la Asociación de Telefonía Móvil (Atel-
Ya en abril de 2008, Artur Phillips, Director de Pro- mo) entregan algo de contexto y dan muestra del
ductos Empresariales de Lodestone Digital, se re- avance y madurez del mercado chileno. A octubre de

3|
Introducción
2007, 804 de cada 1000 chilenos utilizaban un te- dispositivos móviles, integración y publicación de
léfono móvil, superando a Argentina (888), Estados contenido periodístico en telefonía celular”, apoyada
Unidos (767), Colombia (708) y Brasil (564), entre por la Universidad del Desarrollo.
otros países.
En ella se investigó la manera en que actualmente se
A su vez, en 2008 hubo un incremento de un 315% administra contenido en dispositivos móviles, como
en las conexiones a Internet desde dispositivos mó- teléfonos celulares y iPod, debido a la masificación
viles, respecto del año anterior, según la Asociación de estos aparatos y su enorme potencial como canal
de Telefonía Móvil de Chile (Atelmo). informativo.
Esta área presenta oportunidades de seguir crecien- A su vez, se incluyen casos de medios de comuni-
do, considerando que sólo un 27% de los chilenos cación que han implementado plataformas WAP, lo
es cliente de contrato, de acuerdo a datos entrega- cual aporta claridad en el ámbito técnico y perio-
dos por la Subtel, a diciembre de 2008. dístico, ambos necesarios para crear un producto de
este tipo.
Esta situación de un mercado creciente, con rápi-
dos cambios tecnológicos y perspectivas optimistas Con esta publicación pretendemos entregar una vi-
conlleva la necesidad de manejar nuevos conoci- sión del estado del arte de la telefonía móvil, que sir-
mientos para los creadores de contenido. Por ello va para iniciarse en la creación de contenidos para
adquiere relevancia este documento, como resulta- dispositivos móviles.
do de la investigación “Desarrollo de interfases para
[1] Es una técnica para transferir datos de manera que pueda ser procesado como un flujo regular y continuo. Con
streaming, el navegador del cliente o el plug-in puede empezar a mostrar los datos antes de que el archivo entero se
ha transmitido. (Webopedia, http://www.webopedia.com/TERM/s/streaming.htm).

4|
El proceso de creación
Contenidos para dispositivos móviles

5|
Contenidos para móviles
Funcionamiento Finalmente, adquiere relevancia el modo de actua-

lizar estos contenidos, especialmente si el sitio
En el proceso de creación de contenidos para dispo- es periodístico o implica una entrega de información
sitivos móviles hay variables tecnológicas, de con- constante.
tenido y procedimentales a considerar.
1. Dispositivos móviles
La primera de ellas son los dispositivos móviles
en sí, cuyas características determinan el modo de Un dispositivo móvil es un término que no se refiere
consumir la información. Entre ellas, el tamaño de solamente a los teléfonos móviles. En él se incluyen
la pantalla, el tipo de teclado y el soporte de ciertas algunas consolas de juegos -como la PlayStation
tecnologías multimedia. Portable (PSP)-, el iPod Touch y los Asistentes Digi-
tales Personales (PDA, en inglés), como la Palm.
Un segundo factor inherente a la elección de un
equipo telefónico es el operador de telefonía mó- Todos éstos son equipos electrónicos portátiles que
vil y las tecnologías de acceso que éste ofrezca para permiten acceder a los servicios de Internet, espe-
conectarse a Internet. cialmente la Web, además de prestar otros servicios,
como llamados de voz, mensajería de texto, agenda
Se debe precisar que el ingreso a la Web mediante y reproducción de multimedia.
celulares también se realiza a través de un navega-
dor o browser, cuyas funcionalidades serán rele- Este concepto es el punto de partida de esta investi-
vantes al momento de ingresar a ellos. gación, ya que es lo necesario para acceder a la Web
anywhere anytime.
Con todo lo anterior, el usuario puede navegar a
través de los sitios web. Sin embargo, éstos deben Hasta fines de 2008, los principales fabricantes de
cumplir con ciertas características técnicas en teléfonos móviles en el mundo son Nokia, Samsung,
su construcción para lograr una mayor cobertura y LG Electronics, Motorola y Sony Ericsson, de mayor
una estructura -tanto visual como informativa- que a menor (ver gráfico 1).
le entregue al usuario una experiencia de navegación
satisfactoria.

6|
Gráfico 1
Participación de Mercado de Fabricantes de
Telefonía Móvil en el Mundo en 2008
18%
Nokia
40% Samsung
8,2% LG Electronics
Motorola
8,5% Sony Ericsson
Otros
8,5%
17%
A esas marcas hay que sumar a la firma canadiense Por otra parte, también hay consolas de juegos,
Research in Motion, desarrolladora de la línea Blac- como la PlayStation Portable (PSP) y la Nintendo DS
kBerry, y a Apple, con el iPhone. que permiten conectarse a la Web.
Este último, junto con el iPod Touch -similar en fun- 1.1 Equipos
ciones, salvo que no sirve para llamadas- ha vendido
37 millones de unidades sólo en Estados Unidos, Los dispositivos móviles utilizados en esta investiga-
con lo cual puede considerarse uno de los modelos ción fueron un BlackBerry 8100 Pearl, de la empresa
más vendidos en el mundo. Research in Motion (RIM); un Nokia N95-2, con 8GB
de memoria, y un iPod Touch, de Apple.
En el mercado de los PDA, Palm y HP son líderes, en
orden jerárquico, contabilizando cerca de 2 millones Éstos fueron escogidos por representar a marcas
de unidades vendidas anualmente entre las dos. diferentes, estar popularizándose en el país y el

7|
iPod Touch. Autor: BlackBerry 8100 Pearlh.

Matthieu Riegler Autor: Research in Motion
mundo, y por ser una muestra de lo que será común

los siguientes años. Además, según estadísticas de
Emol.com, BlackBerry, iPhone y Nokia son las 3
marcas de móviles que más acceden al sitio.
1.2 Características de un dispositivo para ac-

ceder a la Web
Los teléfonos móviles presentan características que

los hacen únicos. La posibilidad de acceder a con-
tenidos digitales en cualquier lugar los convierte en
una herramienta de trabajo y entretención difícil-
Nokia N95.
mente reemplazable estos días.
Autor: Nokia

8|
Al mismo tiempo, el hecho de ser equipos pequeños La resolución para la cual se sugiere diseñar ac-
y portables conlleva desafíos para los creadores de tualmente es 240 x 320 pixeles. El diseñador de
contenidos. Así lo plantea Cameron Moll, en su libro información Morten Hjerde, que se desempeña en
Mobile Web Design: “…los desarrolladores de con- Vodafone, apoya este tamaño en su blog Sender 11
tenidos web para móviles enfrentan bastantes limi- y afirma que “las resoluciones de pantalla pequeñas,
taciones. Las pantallas pequeñas es el desafío más como 176 x 220, están desapareciendo y la de 128
obvio. La dificultad para ingresar información es otra x 160 está quedando para los teléfonos más bási-
que se menciona frecuentemente. La inconsistencia cos”.
de los navegadores, no sólo en lo relacionado con la
usabilidad de la interfaz, sino en lo relativo a cómo En el caso de nuestros dispositivos de prueba, la re-
se visualiza el código”. solución es la siguiente (vertical):
Si para crear un sitio web común ya hay conside- BlackBerry Pearl 8100: 240 x 260 px
raciones técnicas para lograr que éste se visualice
de forma correcta en diferentes ordenadores, en el iPod Touch: 320 x 480 px
mundo de los dispositivos móviles éstas son aún
más complejas, por la variedad de equipos y porque Nokia N95 8GB: 240 x 320 px
se trata de una temática que está en sus albores.
Aunque aún quedan equipos que utilizan dos colores
A continuación, nos referimos a los elementos a to- y que el Consorcio World Wide Web (W3C) -enti-
mar en cuenta que se relacionan con los equipos. dad que emana recomendaciones sobre la Web y su
usabilidad- sugiere trabajar con un mínimo de 256
1.2.1 Pantalla colores, la tendencia va muy por encima de eso.
En este punto se pueden incluir las resoluciones de Tanto el modelo Nokia N95 como el Blackberry 8100
pantalla, soporte de colores y formatos gráficos y soportan 16 bits de profundidad de color, lo cual
sensibilidad. significa que se pueden ver 65.536 colores. El iPod
Touch, en tanto, usa 32 bits, lo cual se traduce en
En cuanto a la primera variable, hay que aclarar que 16.777.216 de colores.
se refiere a la cantidad de pixeles que soporta la pan-
talla. A mayor resolución, mayor calidad de imagen. Los formatos gráficos que la W3C recomienda utilizar

9|
son el JPEG y el GIF 89a. No obstante, hay equipos - Usar URL’s (direcciones) cortas, incluso para las
que incluso soportan PNG’s, como el Nokia N95. secciones y páginas interiores, para facilitar el ac-
ceso a ellas.
Otro aspecto relativo a la pantalla que se masificará
en un corto plazo es la posibilidad de detectar cuan- - Optimizar toda aplicación que implique la solicitud
do el equipo está girado horizontalmente y adaptar de datos al usuario, con el fin de no hacerle perder
los contenidos a esa disposición, característica que tiempo.
ya posee el iPhone.
- Habilitar atajos mediante los números del teclado,
1.2.2 Teclado para ingresar a las principales secciones del medio.
Hay dos clases de teclados que se imponen en el

mercado de los móviles. Uno de ellos es el estándar,
que consiste en tres letras por teclado y el otro es el Teclado QWERTY.
QWERTY, que se asemeja al de un computador, pero Autor: Nokia
en miniatura.
El Nokia N95 es representante del primer tipo y el

BlackBerry 8100 del segundo, característica que ha
ayudado a que este último se convierta en uno de
Teclado QWERTY
los teléfonos más utilizados por los ejecutivos para
táctil. Autor: Apple
el envío de correo electrónico. También hay equipos
que incorporan el teclado en la pantalla táctil, como
el iPod.
En cualquier caso, el ingreso de datos a un dispo-

sitivo móvil sigue siendo aún una de las materias
Teclado estándar
que hacen la diferencia y que tienen algunas im-
Autor: Sony Ericsson
plicancias para crear un sitio web adaptado a
móviles:

10 |
1.2.3 Almacenamiento de información 1.2.4 Sistema operativo
El almacenamiento de información en dispositivos Los teléfonos móviles actuales han evolucionado

móviles puede ser interno o externo. Lo anterior tiene tanto que ahora además de llamadas telefónicas
un rol menor en la carga del sitio Wap, pero es im- tienen agenda, reproductor de multimedia, juegos,
portante para la descarga de video y audio, así como mensajería de correo electrónico, entre otras aplica-
el almacenamiento de fotografías. ciones, que los asemejan a ordenadores personales.
Estos equipos se conocen como smartphones y uti-
- BlackBerry 8100: Memoria externa Micro SD de lizan un sistema operativo para coordinar todas sus
128 MB. operaciones y servicios.
- iPod Touch: Memoria interna de 32 GB. El sistema operativo con mayores ventas en el mun-
do en 2008 es Symbian (ver gráfico 2), según un
- Nokia N95: Memoria interna de 8GB. reporte de la consultora Gartner de marzo de 2009.
Sin duda, este software domina el mercado de tele-
fonía móvil.
Tarjeta Micro SD.

11 |
Gráfico 2
Venta de smartphones a usuarios finales
por sistema operativo en 2008
2%
1%
8%
Symbian
8%
Research In Motion
Microsoft Windows Mobile
12% Mac OS X
52%
Linux
Palm OS
Otros
17%
1.2.5 Soporte de lenguajes de programación - WAP 2.0, existente desde 2002, que conlleva el
uso de XHTML Mobile Profile (XHTML MP), una ver-
Primero, debe aclararse las diversas formas de crear sión más reducida de XHTML. Este lenguaje, a su
Contenidos para móviles. Éstos son regidos por el vez, permite la aplicación de WAP CSS (versión para
Wireless Application Protocol (WAP), estándar móviles de Hojas de Estilo en Cascada).
que permite acceder a la Web mediante dispositivos
móviles. Este protocolo tiene dos versiones: Para una revisión completa de las etiquetas que
permite XHTML MP, se puede acceder la siguiente
- WAP 1.0, que rige desde 1998, y permitía la página: http://htmllint.itc.keio.ac.jp/htmllint/tagslist.
construcción de sitios WAP básicos (con imágenes cgi?HTMLVersion=XHTML-MP. En el caso de WAP
monocromáticas, escasas opciones de formato e hi- CSS, está el siguiente recurso: http://www.develo-
pervínculos), a través del lenguaje WML (Wireless pershome.com/wap/wcss/.
Markup Language).

12 |
Actualmente la recomendación para desarrollar un que a fines de 2009 habrá en el mundo un poco más
sitio adaptado para móviles es adaptar WAP 2.0, ya de 1.500 millones de dispositivos con el reproduc-
que incluso están apareciendo dispositivos móviles tor Flash Lite instalado, estas cifras corresponde a
que visualizan bien los sitios web sin adaptación. los países desarrollados y dejan de lados a teléfonos
como el iPhone y los BlackBerry.
En este contexto de WAP 2.0, interactúan otros len-
guajes, como Javascript, PHP y ASP e incluso Flash, 2. Operadores de telefonía móvil
por ejemplo en los Nokia N95. De todas maneras, su
funcionamiento dependerá del modelo de teléfono Chile se caracteriza por un mercado de telefonía mó-
móvil y su ejecución ralentizará la descarga de las vil activo, siendo éste uno de los puntos destacados
páginas. de la economía nacional. Según la Subtel, son cua-
tro las empresas que ofrecen el servicio de telefonía
En el caso de los dispositivos puestos a prueba en móvil en el país:
esta investigación, el BlackBerry 8100 no sopor-
ta Flash ni Javascript; reproduce sitios XHTML-MP - Movistar: ha ido consolidándose como
y WAP CSS (no admite uso de capas). Permite la el líder, aumentando progresivamente su parti-
comunicación con bases de datos PHP o ASP, pero cipación -según cantidad de abonados- hasta un
éstas demoran la aparición de las páginas. 43,17%.
El Nokia N95 y el iPod Touch, en tanto, sí soportan - Entel PCS: con un 38,38% de participación, se
Javascript, además de todo lo anterior, pero este úl- caracteriza por implementar nuevas tecnologías en
timo aún no permite la reproducción de información el país, como GSM, o 3.5G, donde incluso fue pri-
en Flash. mera en Latinoamérica.
Además de XHTML-MP y WAP CSS, existe la posi- - Claro: es el operador de mayor crecimiento en los
bilidad de crear Contenidos para móviles con Flash últimos años, lo cual ha permitido que alcance el
Lite, una versión del popular software de animación 18,38% de participación. No sólo ha realizado una
e interactividad Adobe Flash para este tipo de dis- fuerte inversión publicitaria, sino que ha traído al
positivos. país equipos de último modelo, como el iPhone.
Sin embargo, éste es aún un flanco por desarrollar. A - Nextel: tiene una participación menor, de sólo un 0,06%
pesar de que la consultora Strategy Analytics estime

13 |
3. Redes y tecnologías de telefonía móvil 4G: es una red cuyo lanzamiento se proyecta para
2010 en Japón y unos años después en el resto del
Cada una de las siguientes tecnologías implica redes mundo. Se basa en la utilización del protocolo IP en
de telecomunicaciones, velocidades de transmisión teléfonos móviles y entrega velocidades de acceso
y equipos móviles diferentes. de hasta 1 Gbps. Wimax y LTE (Long Term Evolution)
son dos tecnologías competidoras en esta fase de
1G: esta primera generación de redes para móviles desarrollo.
tuvo su inicio en la década de los 80. Se trataba de
un servicio analógico que sólo permitía llamadas de 4. De los navegadores
voz.
Todo sitio web es visualizado a través de un progra-
2G: redes de segunda generación, originadas en ma que se conoce como navegador o browser. Para
1990. Se diferencia de las anteriores por su carácter los dispositivos móviles no hay una excepción.
digital y el uso de protocolos como GSM. Esta pri-
mera característica permitió la aparición de teléfonos Primero, cada teléfono tiene un navegador nativo.
más pequeños, gracias al ahorro de energía. Por ejemplo, Safari para iPhone, Nokia Series 40
Browser para el Nokia N95 y el BlackBerry Browser
2.5G: es un término eminentemente comercial, ya para el BB 8100.
que son las redes de segunda generación a las que
se les aplica una tecnología conocida como GPRS Algunas características que adquieren relevancia en
(General Packet Radio System), que permite veloci- éstos son el guardar favoritos, para evitar el tipeo
dades de acceso a la red que van desde los 56 Kbps de direcciones demasiado largas y la posibilidad de
a los 114 Kbps. abrir nuevas ventanas (el Nokia N95 permite 5; el
iPod Touch, 8).
Con este servicio se popularizaron los sitios WAP
(Wireless Application Protocol), el envío de SMS Sin embargo, también está la alternativa de instalar
(Short Message Service) y MMS (Multimedia Mes- navegadores externos. Es el caso de Opera Mini, que
saging System). está haciendo bastante ruido por su velocidad (va-
rias pruebas han ratificado su supremacía frente al
3G: comenzaron en 2001 en Japón, llegando varios Safari de iPhone) y su interfaz, ya que permite acce-
años después a Chile. Permite un uso simultáneo de voz der desde la primera pantalla a buscadores, favoritos
y datos, a velocidades que pueden llegar a 14 Mbps. e historial.

14 |
con tamaños proporcionales en lugar de fijos. El

5. Del contenido: usabilidad
tamaño debe ser pequeño y orientado a aportar
La usabilidad es uno de los aspectos más importan- información, ya que se paga por cada Kb trans-
tes de un sitio web. Según Jakob Nielsen, uno de los mitido, por lo que sólo debe haber imágenes si
autores más respetados en esta área, este término es absolutamente necesario”.
“es el atributo de calidad que mide lo fáciles de usar
que son las interfaces web”. Por supuesto, este tema - Cantidad de información: “Textos cortos con
afecta a los sitios creados para teléfonos móviles, enlaces para profundizar; no se debe ofrecer de-
especialmente considerando el tamaño de la panta- masiada información; cobra relevancia el uso de
lla en que se cargan. pirámide invertida: lo más importante va prime-
ro”.
El experto en usabilidad Juan Carlos Camus afirma
que lo más relevante al crear sitios WAP “es que - Estructura hipertextual: “Es compleja de
al tratarse de pantallas pequeñas, dejan de ser rele- mantener y probablemente habrá que hacerlo
vantes algunos elementos muy utilizados en sitios a través de sistemas que den cuenta del rastro
web que ayudan a ordenar contexto, como son las seguido desde el inicio de la navegación (brea-
secciones, menús, contenidos relacionados y otros. dcrumbs). El buscador puede ser una alternativa
El énfasis está puesto en informaciones más granu- de acceso a la información, aunque hay que pro-
lares, aisladas y que se basan en texto principalmen- bar su efectividad en casos particulares, con el
te”. objetivo de que los enlaces que muestre como
resultado sean visibles desde el móvil.
En lo específico, Camus recomienda lo siguiente:
Se debe privilegiar el uso de los enlaces para
- Tipografía: “Usar tipos sans-serif de cuerpo el acceso a más información, con el objetivo de
redondo, que simplifiquen la lectura; normal- facilitar la navegación y evitar que haya demasia-
mente en texto sobre 12 puntos para mejorar la do texto en cada pantalla; probablemente habrá
visibilidad, ya que a diferencia del PC, se utilizan que escribir corto y separar la profundización del
a distancias menores”. tema tratado, mediante un grupo de enlaces”.
- Uso de imágenes: “Sólo de referencia, para - Uso de multimedia: Mientras no se avance a

evitar problemas de visualización. Para su des- 3G o 3.5 G es preferible no utilizarlo en sitios de
pliegue lo más probable es que se deba probar información, a menos que se trate de un sitio que

15 |
esté basado en dicha tecnología y cuyo foco sea

hacer con Javascript o con PHP”.
el consumo de ese tipo de material
6. Del modo de actualizar esa información
. A su vez, hay una temática relevante relacionada
con la cantidad de dispositivos disponibles, ya que
Para actualizar los contenidos de un sitio actual-
en cada uno de ellos la visualización de los sitios
mente hay tres maneras. Una es vía código XHTML
puede ser diferente.
y CSS, operación que puede realizarse a través del
bloc de notas. Una segunda es mediante un software
Por ello, existen scripts (archivos de código con una
como Dreamweaver, que puede trabajar en conjunto
función específica) que pueden detectar desde qué
con Adobe Device Central, para previsualizar las pá-
equipo se está solicitando la información y enviar el
ginas en móviles.
sitio web que corresponde a ese dispositivo, para
una mejor experiencia de usuario.
Sin embargo, una de las opciones que adquiere mu-
cha fuerza estos días es la utilización de un CMS
El ingeniero de proyectos de Emol.com, Gustavo
(Content Management System), es decir, una pla-
Vargas Retamal, explica que “para detectar si el sitio
taforma para administrar contenidos publicables en
está siendo visitado desde iPhone o BlackBerry se
Internet. Este sistema entrega la posibilidad de reno-
detecta el User Agent. Ésta es una variable que es
var contenidos sin necesidad de saber código XHT-
enviada ya sea por browser (navegador) que iden-
ML ni manejar Dreamweaver y ofrece la posibilidad
tifica al dispositivo o a la aplicación que accede al
de organizar fácilmente el sitio.
sitio”.
En esta investigación se hicieron pruebas con tres CMS:

“Esto quiere decir que cada equipo tiene su propio
Drupal, Joomla y Wordpress. Todos éstos son gratuitos
User Agent, y esto depende del modelo y la mar-
y se crearon inicialmente para trabajar con blogs, aun-
ca. Por lo tanto, como es algo complejo detectar la
que han ido ampliándose a otras aplicaciones.
cadena de caracteres exacta y para ser compatibles
con muchos modelos de celulares, lo que hacemos
Los tres trabajan en base a PHP, conectados a bases
es ver si dentro de la cadena está la palabra ‘iPho-
de datos MYSQL -tablas de contenidos que almace-
ne’”, explica el especialista.
nan la información tanto visible como de administra-
ción-, y se escogieron porque el objetivo era trabajar
Finalmente agrega: “En el caso de Emol lo hacemos
con contenido actualizable de manera dinámica.
vía ASP, consultando si dentro de esta variable viene
la palabra ‘iPhone’ o ‘BlackBerry’. También se puede

16 |
Drupal (www.drupal.org): es el más básico,

tanto en gráfica como en estructura de informa-
ción. Además, no hay plantillas demasiado desa-
rrolladas ni es muy amable para ser modificado.
Joomla (www.joomla.org): tiene hojas de es-

tilo más desarrolladas, más opciones de planti-
llas, con estructuras más personalizadas. Debido
a que estos sitios son open source (de código
abierto), están en constante crecimiento. Es mu- Pantalla de administración de
cho más popular que Drupal por un tema de per- contenidos de CMS Wordpress
sonalización.
WordPress (www.wordpress.org): en compa-

ración con los dos anteriores, tiene un interfaz
mucho más amable de renovación de contenidos
y codificación de plantillas. De hecho cuenta con
un panel dedicado para los cambios estructura-
les y estéticos. El desarrollo es más avanzado en
cantidad y depuración de los componentes, así
como en la creación de nuevas extensiones, que
le permiten al administrador darle una aplicación
que va mucho más allá de un simple blog.

17 |
Caso de estudio
Proyecto móviles emol.com

18 |
Caso de estudio
Proyecto móviles Emol.com | Desarrollo de producto e interfaz de usuario
La versión actual para teléfonos móviles de

www.emol.com fue creada durante 2008 a partir de
la inquietud del área comercial por tener un producto
que fuera coherente con las prestaciones de nave-
gación y visualización ofrecidas por los dispositivos
iPhone y BlackBerry, lanzados al mercado chileno
con gran éxito de ventas y despliegue publicitario.
Los objetivos fundamentales de las versiones a de-
sarrollar estaban orientadas a mejorar la experiencia
de navegación, obtener una oferta de contenido más
rica en cantidad y presentación, y buscar, en defini-
tiva, la fidelización a la marca al obtener un producto
de calidad en una plataforma dedicada a dispositivos
3G. Ese año -y aún en la actualidad, a la fecha en que
se realiza la presente investigación- se estimaba un
evidente crecimiento de la industria y del número de
usuarios dispuestos a usar tecnologías alternativas Vista de la portada de www.emol en un teléfono BlackBerry
al computador para navegar en Internet. 8100, que incluye una foto relacionada con la noticia princi-
pal. Cuando no existen fotos se despliegan las noticias que
Desde el punto de vista de recursos y cantidad de están a continuación.
versiones a desarrollar para cubrir el universo de
celulares usados en Chile que visitaban de mane-
ra recurrente el sitio www.emol.com, se tomó en I2B, quienes entregaron estadísticas de usuarios na-
consideración las estadísticas de navegación en- vegantes con equipos móviles y los tipos de mo-
tregadas por la empresa Certifica (www.certifica. delos usados, tanto en visitas únicas como vista de
com), organismo encargado de auditar importantes páginas (page views) durante el último año previo a
medios de comunicación en el país, incluyendo a la la construcción de las versiones actuales para móvi-
red Mercurio (www.lun.com, www.lasegunda.com, les de www.emol.com.
www.elmercurio.com, Diarios Regionales). Además
se tomaron en consideración los datos aportados En base a la información entregada, el departamento
por la empresa que proveía la anterior versión WAP, de marketing en conjunto con el área editorial tomó

19 |
Caso de estudio
la decisión de restringir las opciones de múltiples ción de este producto se destinó un equipo multidis-
sitios para móviles en una nueva versión que con- ciplinario que consideró a periodistas, diseñadores
sideraría sólo las versiones iPhone y BlackBerry. y desarrolladores, quienes en conjunto y en base a
Según los datos recabados, la tendencia indicaba requerimientos de contenido aportados por el Edi-
que en un plazo no mayor a 2 años se produciría un tor de Emol.com, Sebastián Campaña, realizaron
recambio de equipos móviles en la mayoría de los un plan de trabajo que consistió en las siguientes
usuarios del sitio, lo que conlleva una actualización etapas, algunas de las cuales se realizaron en forma
de tecnologías que permite visualizar el contenido paralela:
correctamente según el modelo de teléfono usado.
1. Estudio del lenguaje de visualización de
En cuanto a la plataforma de noticias se optó por contenido en BlackBerry y iPhone.
no traducir a otro lenguaje, asumiendo el sistema
dinámico usado para la versión WEB, es decir ASP Para ello el equipo de diseño, en conjunto con inge-
(Active Server Pages, http://www.asp.net), cuyo fa- nieros y personal del área de arquitectura (de infor-
bricante es Microsoft, y que es el usado de manera mación) de El Mercurio, trabajaron en forma paralela
genérica para la construcción de los sitios web de la para determinar los elementos que son capaces de
red Mercurio. Este se seguiría usando tanto para la mostrarse en los distintos dispositivos y el lenguaje
versión iPhone como BlackBerry, ya que en rigor el de programación que acepta cada plataforma.
sistema de administración de datos resulta “transpa-
rente” para el usuario en la medida de que se optimi- 2. Estudio de la interfaz de navegación de cada
cen las solicitudes de información hacia el servidor, equipo.
ya sea en cantidad como en el peso o complejidad
de los paquetes de información transmitidos. 1. Para iPhone se consideró las características
de la interfaz física: Navegación en base a Touch
En base a esta decisión estratégica se optó por sus- Screen (pantalla táctil - http://multi-touchscreen.
pender el servicio WAP una vez que se hubiera pu- com/iPhone.html).
blicado las nuevas versiones para móviles, lo que
implicaba un cambio radical en el servicio ofrecido Browser (navegador WEB): Por defecto tanto
a los usuarios en cuanto a hábitos de navegación y iPhone como iPod Touch (modelo de dispositivo
oferta de contenido. Para llevar a cabo la construc- que se puede conectar a Internet, pero no ofrece

20 |
Caso de estudio
la posibilidad de comunicarse telefónicamente), 2. Para BlackBerry se utilizó preferentemente el

usan Safari, que viene cargado de fábrica en es- modelo 8100 Pearl como dispositivo de prueba,
tos dispositivos. Opera Mini es el segundo nave- y posteriormente se alternó con el modelo 8130.
gador más popular en este tipo de móviles. La elección del primero obedeció a la cantidad
de dispositivos usados para conectarse a www.
Visualización del contenido: Ambos navega- emol.com, según cifras entregadas por la empre-
dores ofrecen la característica de poder visuali- sa I2B a comienzos de 2008.
zar correctamente páginas web en base a HTML
(versión 4.01 y anteriores) y XHTML, mostrando La interfaz física de navegación en este telé-
estructuras hechas en tablas, celdas, tablas ani- fono es en base a teclado alfanumérico más un
dadas, estructuras en base a div y CSS incrustado pequeño trackball o pequeña bola que opera de
o importado, colores, incrustación de imágenes y manera similar a un mouse de un computador
formato HTML estándar. tradicional, pero ubicado en un punto fijo al cen-
tro del teléfono. De esta manera se puede nave-
Flash: La versión de iPhone a la fecha de crea- gar en su pequeña pantalla en forma horizontal o
ción de la interfaz no soportaba el uso de Flash, vertical, saltando de link en link o bien de manera
por lo tanto se omitió la incorporación de cual- continua de manera vertical si es que el conteni-
quier elemento tanto funcional decorativo en do visualizado ha generado scroll lateral (barra
base a esa tecnología. lateral derecha), que permite bajar hasta el cierre
de la página.
JavaScript: Soporta la programación en base a
*.js (http://en.wikipedia.org/wiki/JavaScript), lo El navegador WEB utilizado por BlackBerry
que permitió a los diseñadores aplicar algunos 8100 es la versión 4.2 en español, desarrollado
efectos visuales como atenuaciones y transicio- por la empresa Research In Motion (www.rim.
nes entre distintos tipos de contenido. net) de manera exclusiva para este modelo de
celulares. Aunque en BlackBerry también puede
Interfaz gráfica: Se asumió el lenguaje visual
instalarse Opera Mini (http://www.opera.com/
propio de este dispositivo, basado en íconos de
mini/), se optó por el navegador por defecto que
tamaño variable, aproximadamente 40 pixeles
viene de fábrica dada la popularidad de uso.
cuadrados

21 |
Caso de estudio
Visualización de contenido: En términos gene- cualquier actividad que pudiera significar un re-
rales la navegación de páginas web en BlackBerry tardo en la respuesta en la visualización de con-
es bastante más restrictiva en cuanto a represen- tenido del equipo dada la naturaleza de su nave-
tación de estructuras y formateo en comparación gador que, comparativamente con iPhone, toma
con iPhone. Dentro de las principales caracte- más tiempo en mostrar en pantalla en contenido
rísticas se puede mencionar está la incapacidad WEB.
de soportar código HTML estándar para WEB,
estructuras div y CSS complejo (http://www. Interfaz gráfica: Dadas las restricciones de la na-
w3.org/Style/CSS/), como tampoco representa vegación lineal y de visualización de contenido
bien la anidación de tablas o el uso de especifi- HTML estándar para WEB, se optó por hacer una
caciones tipográficas puntuales, como tampoco versión más restringida en cuanto a formateo de
traduce de manera eficaz el uso de columnas o HTML y recursos gráficos, haciendo una sínte-
anchos de contenedores de elementos, ya sea sis estructural montada básicamente en base a
en pixeles o porcentajes, salvo valores puntuales una columna única dividida en celdas según la
que estén al alcance del espacio útil de visuali- definición de contenido entregada por el área pe-
zación en la pantalla activa. riodística.
Flash: BlackBerry no soporta este tipo de archi- 3. Diseño de la arquitectura de navegación para
vos. cada dispositivo
JavaScript: Es soportado por el modelo 8100, A continuación se describirán las pantallas de entra-
previa activación en el panel de opciones del da de cada versión ya que en los despliegues poste-
navegador. Sin embargo no se realizó ninguna riores el sistema de navegación no varía mayormen-
aplicación concreta que necesite de este tipo te, manteniendo como eje de contenidos principales
de programación en virtud de reducir al mínimo

22 |
Caso de estudio
el menú superior y el retorno al inicio al clickear el

logotipo en ambos diseños.
Versión iPhone
En el caso de iPhone, se consideraron los siguientes

componentes de contenido en el front-page (panta-
lla de inicio), que derivan en despliegues definidos
según cada ítem a continuación:
• La url de entrada a esta página es http://www.

emol.com/iPhone/
• Una fila superior para el menú principal de

navegación con imágenes mapeadas, es decir
con sectores con comportamiento de botones
(hipervínculos) delimitados por coordenadas Primera pantalla de http://www.emol.com para iPhone
sensibles, con links a la portada (logo de emol.
com), noticias, fotos, emolTV, y El Mercurio. A
excepción del último elemento de ese menú, que basado en JavaScript, que provoca el desplaza-
direcciona a la versión de El Mercurio versión im- miento de parte del contenido de la primera pan-
preso alojado en la url http://www.mer.cl, el resto talla, mostrando un menú con botones a noticias
de los elementos del menú despliegan contenido organizadas en las categorías nacional, Econo-
bajo la interfaz diseñada para iPhone. Además se mía, Deportes, Magazine, Tecnología y Mundo,
incorporó en una mejora posterior al lanzamiento además de un botón “cancelar” que colapsa este
de este producto, un link a “Versión WEB” bajo el menú volviendo a la posición inicial con la que se
logo de www.emol.com, que permite al usuario encuentra el usuario por defecto en esta versión.
de iPhone poder visualizar el sitio WEB tradicio- Al hacer click sobre cualquiera de los botones
nal. cuando está desplegado este menú, lleva a una
portada con contenido de noticias organizado
• El link a noticias realiza un comportamiento según la categoría seleccionada, mostrando una

23 |
Caso de estudio
estructura de contenidos similar a las portadas Se mantienen en el pie de la página los destaca-
de sección que ofrece Emol.com en su sitio web dos, seis, a las galerías ofrecidas en la portada
normal. de esta categoría. Al navegar de foto en foto se
visualiza, bajo la imagen, el número de foto que
• El link a Fotos lleva a una portada que emu- se está viendo en base al total de fotos de esa
la el sitio www.fotos.emol.com en cuanto a look galería.
and feel (sensación visual de navegación), por
su fondo negro y despliegue de miniaturas que • El link a emolTV lleva a una pantalla de fondo
muestran el acceso a las últimas galerías publi- negro con el logotipo de la sección en la parte
cadas en el sitio. Esas imágenes, seis en esta superior, bajo el menú principal. En la parte cen-
primera pantalla de la sección, apuntan a gale- tral se ofrecen previews a los últimos seis videos
rías de fotos que se alimentan automáticamente publicados en esta sección, acompañado cada
según la oferta ofrecida en la versión tradicional uno del título del video, un breve texto explicati-
WEB del sitio de fotos de Emol.com, organizados vo y la duración de dicho video. En la parte infe-
según categorías temáticas. rior de la página existe un link a ver más videos,
además del link a los términos y condiciones del
En la parte inferior de esta página se muestra una sitio, que se mantiene en todos los despliegues
imagen mapeada con links a enviar correo (mail), (al igual que el menú superior). Al clickear so-
a www.emol.com y a www.elmercurio.com, ade- bre cualquier miniatura o sobre el título que lo
más de un link a los términos y condiciones de ofrece, se llama a un archivo de video quicktime
los servicios de este portal. Al costado inferior (*.mov). En el caso de este dispositivo se mues-
derecho hay un botón con una flecha apuntan- tra automáticamente , una vez que se ha cargado,
do a la derecha que permite mostrar otros seis en el reproductor multimedia nativo del aparato.
destacados con links a más galerías de fotos.
Al clickear sobre cualquier preview (o miniatura • En la parte central de la portada para iPhone
que apunta a las galerías), se despliega una foto se muestra, bajo el menú superior, la fecha y en
adaptada al tamaño del área útil de la pantalla, la parte derecha una imagen botón que apunta
con textos heredados automáticamente de la ga- al buscador. Al hacer click lleva a una pantalla
lería publicada en Internet, más un par de flechas con un campo de texto para realizar la búsqueda
que permiten al usuario avanzar o retroceder en- deseada.
tre distintas fotos.

24 |
Caso de estudio
• A continuación se muestran dos noticias con • Abajo hay indicadores eco-

títulos destacados jerárquicamente por tamaño, nómicos, con datos de Unidad
acompañados por un párrafo complementario o de Fomento y Dólar.
“bajada” en términos periodísticos, que incluye
la hora de publicación. • En la sección El Tiempo, bajo
los indicadores económicos se
• Luego se muestra un menú dinámico en base muestran las condiciones climá-
a pestañas con links a Último minuto, que ofrece ticas de Santiago para el día en
un listado de noticias, diez elementos, organiza- curso, y del siguiente día.
dos cronológicamente según hora de publicación
en forma descendente, titulares y lo más visto. • Finalmente, cerrando la por-
Al clickear titulares se muestra en esta zona en tada de iPhone se muestra un
forma automática un listado con diez elementos, botón Horóscopo, que permite
sin hora de publicación, que corresponde a noti- acceder al listado de información
cias que han sido titular en la portada. Y el tercer relativa a cada signo zodiacal.
botón es un link a lo más visto, que muestra
10 elementos organizados en forma descendente
ordenados en base a la cantidad de veces que ha
sido visitada cada noticia.
• Bajo las noticias de último minuto aparece un

link a ver más noticias. Al hacer click envía a
un listado de noticias (http://www.emol.com/
iPhone/portadillas/listadonoticias.asp) con 10
elementos listados, cada uno con la inclusión de
hora de publicación y la fecha respectiva en la
parte superior de la página. En la parte inferior
aparece un navegador con un listado numérico Versión proporcional a página
que va del 1 al 5 con links respectivos a noticias completa con la versión de
listadas cronológicamente. www.emol.com para iPhone

25 |
Caso de estudio
los usuarios tienen posibilidad de elegir entre 50

Emol.com para BlackBerry y otros
noticias por cada sección, ordenadas cronológi-
En la versión WEB para BlackBerry se desglosan los camente. Dichas secciones son Último minuto
siguientes componentes informativos en su pantalla -que permite acceder a las últimas noticias sin
de inicio: distinción de sección -, Nacional, Economía,
Deportes, Magazine, Tecnología y Mundo. Las
• La url de entrada a esta página es http://www. noticias con las que se puebla cada listado es
emol.com/bb/ un reflejo de actualización hecha en el sitio WEB
de emol.com, y se hace visible en la medida en
• La cabecera es una sola imagen con zonas sen- que el equipo periodístico del portal realiza una
sibles (links) a la portada de esta versión, en la acción técnica denominada “replicación”, en la
parte del logotipo de Emol.com, y a continuación que los servidores hacen que el contenido del
links a las secciones Noticias, Fotos y Buscar. portal, actualizado, se renueve y se haga público
El único link que saca al usuario hacia un sitio copiando el contenido generado en el backoffice
externo es el botón El Mercurio, que al igual que hacia los distintos servidores que harán posible
la versión iPhone, direcciona hacia www.mer.cl hacer llegar la información a los usuarios. Esta
Se ha omitido en la versión BlackBerry el link a acción es común tanto para el sitio WEB como
videos, dada la incapacidad de que el formato a para las versiones móviles.
reproducir sea un estándar para todos los equi-
pos que acceden a esta versión de Emol.com. • Fotos: Tiene un despliegue con las últimas
galerías de fotos publicadas en Internet. Son
• En cuanto a los menús visibles, los links que seis galerías las que se muestran en esta primera
aparecen en la cabecera son los siguientes: pantalla, de un total de 12 que usualmente están
destacadas en la versión WEB, con sus respec-
• Noticias: Apunta a una página (http://www.
tivas previsualizaciones que son imágenes que
emol.com/bb/secciones.asp) con botones en
toma (al igual que la versión iPhone) de la por-
formato de imagen fija (*.gif). Estos botones son
tada de la página de fotos de este portal, y que
links a listados de noticias organizados en pagi-
se cargan de manera aleatoria dentro de las imá-
nación con 10 elementos en cada uno. En la parte
genes seleccionadas por el autor de la galería,
inferior de estos listados de secciones se accede
respetando el orden de posición de cada galería
a botones enumerados del 1 al 5. Es decir que
según aparecen en la página WEB. Las imáge-

26 |
Caso de estudio
nes originales (jpg a color) tienen un tamaño de

230 pixeles de ancho por 134 pixeles de alto.
Sin embargo en la versión Blackberry se escalan
a 222px por 128px, de manera que se pueden
ver alineadas cada una con un texto que indica el
título de la respectiva galería, clickeable, en una
columna única que termina con un link a ver más
galerías.
Al avanzar con las flechas hacia adelante o atrás

desde estos vínculos se accede al total de gale-
rías (12), destacadas en la portada de http:/www.
fotos.emol.com. Cabe señalar que el desarrollo
de esta página para mostrar las galerías de fotos
se basó en hacer una traducción de la versión
WEB de manera que respetara de la mejor forma
la navegación, traduciéndola al espacio útil de
la pequeña pantalla de BlackBerry, de 240px de
ancho por 260px de alto. Para ello se optó por
escalar el tamaño de las fotos ya una vez en los
despliegues de las galerías.
El tamaño original de cada imagen en la versión

WEB es de 618px por 425px, pero al ser llama-
das en la versión móvil se estrecha proporcional-
mente a e 222px por 153px. también se hereda
automáticamente el pie de foto de cada foto, si
es que lo tiene, y el título de la galería aparece
en todas las fotos aún si no tienen una bajada Versión proporcional a página com-
asociada. pleta con la versión de www.emol.com
para BlackBerry

27 |
Caso de estudio
• Buscador: Al hacer click sobre esta opción hacer click en la portada intermedia Noticias, una
del menú superior, lo que se despliega es una vez que se ha llamado desde el menú noticias de
página con un campo donde se puede escribir el la cabecera.
ítem a buscar, además del botón con la etiqueta
“Buscar”, que gatilla esta acción. A diferencia de • Entonces aparecen los mismos indicadores
la versión iPhone, este campo se acompaña de económicos que en la versión iPhone.
las últimas diez noticias indexadas (ingresadas
• Los últimos elementos son la información de
a la base de dato), ya sea de www.emol.com o
El Tiempo, que muestra además de los datos de
de www.elmercurio.com, navegables de 10 en
temperatura para Santiago de Chile, un icono que
10 noticias, con un par de flechas que indica
representa el estado de sol, nubosidad o preci-
además el total de noticias a las que se puede
pitaciones según corresponda. Abajo de éstos
acceder. Al momento de esta revisión el total as-
aparece un botón como imagen que lleva al ho-
cendía a 1.201.119 elementos, y bajo cada uno
róscopo, que despliega de idéntica forma que la
de estos llamados se muestra la procedencia de
versión iPhone.
la noticia y la sección a la que pertenece.
• En la parte inferior de la portada aparecen los

• Los siguientes elementos que se muestran en
mismos links que en el menú superior, pero se
la portada de BlackBerry es la fecha y un lista-
muestran como íconos.
do con siete noticias estructuradas con un título,
enlazado al despliegue de la noticia, la hora de
• La línea gráfica de ambas versiones es bastan-
actualización de la noticia y un párrafo contextual
te similar: Se trabajó en base al diseño de íconos
o “bajada”.
y despliegues afines, incrustando el contenido
en una columna central. En el caso de la versión
• Luego se despliega un listado con noticias de
para BlackBerry, el ancho de dicha columna es
última hora, son diez elementos. Cada uno de
al 100%, es decir que se expande de manera
ellos tiene la hora de actualización y al final del
“líquida” en la máxima extensión que permita la
hay un botón que apunta al listado de todas las
pantalla del navegador que se esté usando. En la
noticias, el mismo al que se puede acceder al

28 |
Caso de estudio
versión 8100 Pearl, el espacio útil de pantalla, sin

1. Formato HTML: En BlackBerry se trabajó en
que se genere una barra lateral (scroll), es entre
base a tablas no anidadas (etiquetas <table>
220 y 230 pixeles dependiendo de la tipografía
en lenguaje HTML), mientras que para iPhone se
que haya elegido el usuario en su navegador.
estructuró el sitio en base a div (<div>). Por lo
tanto en este último se pudo trabajar con una ver-
4. Diferencias en la construcción del HTML de
sión de CSS (hojas de estilo en cascada), dando
ambas versiones
atributos bien jerarquizados de títulos (h1, h2,
h3), párrafos y otros. Permitió además trabajar
Una vez definido el contenido de ambas versiones
con ciertos atributos de color para los links en
se procedió al diseño gráfico, que ha sido descrito
sus distintos estados (link, hover, visited).
de manera sencilla en cuanto a componentes y na-
vegación en la sección anterior. Este proceso fue
2. Estructura de áreas de contenido: Black-
iniciado con una maquetación en base a imágenes
Berry 8100 permite una navegación lineal que
jpg y diseño de iconografía, en la que participó el
permite avanzar de link en link o verticalmente
departamento de diseño de Emol.com e infografía
de El Mercurio. Una vez que fueron aprobadas las usando el trackball, pero no acepta movimientos
versiones finales se procedió a la construcción de diagonales del cursor.
los respectivos diseños en HTML. Para tal tarea se
Al no soportar comportamientos en base a Ja-
experimentaron algunas variantes en cada versión,
apoyándose en información entregada por el depar- vaScript que pudiera optimizar la pantalla al usar
tamento de Desarrollo Internet, datos recolectados pestañas con alternancia de contenido, sólo se
desde foros de en la WEB y experiencia de labora- puede avanzar en una columna única extendida.
torio con equipos adquiridos especialmente por la No permite visualizar frames o estructuras com-
empresa para desarrollar la experiencia. plejas, salvo usando tablas anidadas, lo que re-
sulta en una sobrecarga de información para una
Las maquetas visuales se tradujeron a HTML con el plataforma que no está diseñada para responder
software Adobe Dreamweaver versión CS3, que per- eficientemente a estas estructuras. Se puede
mite trabajar en base a estándares de la W3C. Las simular el trabajo con columnas al insertar eti-
principales diferencias constructivas son, en térmi- quetas de celdas dentro de filas alineadas ver-
nos generales, las siguientes: ticalmente (<tr><td></td></tr>), pero el

29 |
Caso de estudio
ancho de pantalla no deja desplegar extensiones en portada de los listados de último minuto, titu-
horizontales de contenido más allá de los 230 lares y lo más visto.
pixeles si generar desbordamientos inesperados.
Esto no es un tema del que hubiera que preocu- 3. Imágenes: Ambas versiones muestran forma-
parse mayormente en iPhone, ya que su navega- tos gif y jpg, sin embargo en BlackBerry se han
ción permite ver los sitios prácticamente tal cual determinado anchos fijos en las fotos para evitar
se visualizan en la pantalla de un computador. desbordamiento y la aparición de scroll horizon-
tal, y en iPhone se optó por anchos variables. No
Incluso, además de soportar el diseño líquido así en los íconos ni en las imágenes contenidas
horizontal (que fue la opción que se adoptó), en la cabecera o pie de páginas, que son de altu-
este equipo cuenta con la característica de rotar ra y ancho fijos.
automáticamente el contenido que se está viendo
según se ponga el teléfono horizontal o vertical- En ambas versiones las fotos se alimentan del
mente. Por lo tanto interpreta fielmente, al traba- contenido almacenado en los servidores de www.
jar con hojas de estilo CSS y div, el diseño en emol.com en el tamaño y peso originales, estre-
cuanto a anchos y altos de componentes. chándolas proporcionalmente según sea la ne-
cesidad de cada pantalla. Esto es evidente sobre
Además cuenta con un zoom o acercamiento, todo en las galerías de fotos. Pese a que es una
que permite ampliar el contenido al seleccio- solución efectiva para evitar duplicación de tra-
nar un par de puntos y hacer un arrastre sobre bajo en la edición de las miniaturas, dependien-
la pantalla táctil, agrandándolo. En relación a na- do de la calidad de la conexión a Internet, puede
vegación con pestañas y el uso de JavaScript resultar una carga excesiva de datos inecesarios,
para tal función, en la portada de iPhone se pudo si se considera el tamaño de la pantalla en ambos
optimizar el espacio útil al incorporar la posibili- teléfonos, bastante menor a el despliegue de una
dad de hacer click sobre distintos contenidos en foto en colores RGB, a 72 dpi a tamaño 618 por
una misma área, específicamente la alternancia 425 pixeles.

30 |
Caso de estudio
Proyecto móviles Emol.com | Entrevistas
Entrevista a Sebastián Campaña, Editor responsable del proyecto

de contenido para móviles de www.emol.com
Sebastián Campaña es Editor de contenidos de mostrarse según se tratara de versión iPhone o Black
www.emol.com. Su labor es visar el contenido pe- Berry. Y en cada uno de ellas definió lo que debía
riodístico que se publica en este medio online, que mostrarse en las primeras pantallas y siguientes
es actualizado permanentemente los siete días de la despliegues en relación a lo que se publica en la
semana. Tiene a su cargo el equipo periodístico y versión WEB tradicional. También sugirió la forma
el equipo de diseño. Estos últimos prestan servicios de navegación de estas versiones y la extensión de
de creación y publicación de productos en formato contenido a mostrar en cada una de ellas.
HTML, Flash y otros, destinados a la puesta al aire
tanto de noticias, especiales informativos, galerías ¿Cuándo se involucra usted en el proyecto para
fotográficas y multimedia. Sebastián Campaña tam- móviles?
bién se relaciona con el área de Desarrollo Internet
de El Mercurio en la creación de nuevos productos, R: Emol.com tenía una versión WAP, una versión para
mejoras, correcciones y proyección de las platafor- móviles generada por el área comercial a través de
mas de publicación de www.emol.com y la versión una empresa externa, que fue la que proveía el servi-
WEB de El Mercurio. cio a Emol.com. Sin embargo, fue a partir de lo que
fue la evolución de iPhone en Chile que se produ-
El equipo periodístico está dividido según áreas in- ce un interés del área periodística propiamente en
formativas. Las principales son Crónica, Deportes, Emol por decir “no podemos dejar en manos de una
Magazine, Puntomujer, Tecnología, Multimedia y empresa externa una definición de contenidos para
EmolTV. celulares que no fuera hecha por nosotros, porque
somos los que sabemos lo que queremos mostrar
Su labor dentro de la nueva versión para móviles en celulares específicos”. Yo creo que ése es el pun-
de Emol.com fue definir los contenidos que debían tapié inicial de este cuento, que si mal no recuerdo

31 |
Caso de estudio
está fijado en julio de 2008. Llega en Chile el IPho- ¿Qué se muestra de lo que hay en la portada
ne y a partir de eso logramos sacar en septiembre WEB y por qué en las versiones móviles? En
de ese año, en tiempo récord, versiones especiales cuanto a posición, jerarquía, etc.
para IPhone y Black Berry en la red.
R: Entendemos que la necesidad de la gente al vi-
¿Qué características debía tener el contenido sitar Emol.com es buscar información, noticias. En
que se presentaría en la nueva versión? ¿Qué ese sentido rescatamos los titulares y por lo menos
se heredó de la anterior versión? ¿Cuál fue la cinco noticias en línea, con lo cual lo que nosotros
principal innovación? estamos tratando de satisfacer es la noticia minuto
a minuto que la gente quiere saber en su celular,
R: Yo creo que la principal innovación tiene que ver que está asociada a economía, que está asociada a
con que se generó un equipo de trabajo, en las áreas deportes sobre todo. Y la gente que es un poco más
de desarrollo, el área periodística y diseño de Emol. metida en medios de comunicación ve noticias de
com, en que se trabajó conjuntamente en la concep- todo tipo. También entendemos que haya gente que
ción de la estructura de estas versiones móviles. Yo tenga necesidad de algunos productos, como son
creo que en definitiva la opción que se tomó tuvo que el buscador, el horóscopo, el tiempo, o los indica-
ver con cuáles eran nuestros productos principales dores económicos, que son informaciones que son
de contenido, y a eso hubo que hacer una versión relevantes como servicios. La galería de fotos y otras
mucho más amigable para un celular que la del sitio secciones no necesariamente todos van a entrar en
WEB vista desde un celular. Por eso se definieron ellas, pero es necesario que la gente las vea y que
como productos específicos para celulares: Noticias tengan la posibilidad de navegarlas. Son productos
en línea, fotos, videos, buscador, versión del diario a los que con el tiempo y mucho más nivel de desa-
(El Mercurio impreso). Esos eran los grandes ejes de rrollo -porque mientras más celulares con tecnolo-
contenido que se entregaron para celulares. O sea, gía haya, mientras más 3G esté en el mercado-, más
no están los especiales – no tiene sentido tenerlos va ser el consumo de noticias de ese tipo, de ese
en celulares-, no está el contenido de puntomujer, contenido por el celular.
etc. Consideramos que en esta etapa tuviera lo ne-
cesario y relevante.

32 |
Caso de estudio
¿Hay alguna restricción técnica que haya que

superar en las actuales versiones móviles?
R: Técnicamente creo que nos falta un paso adelante

que tiene que ver con que la disposición del contenido
de móviles se adapte a todo tipo de pantalla. Yo entiendo
que es un problema que incide en la sensación de nave-
gación, que es la usabilidad. Un tema que es la principal
prioridad: según el hábito de navegación que estamos
viendo en la gente es darle más información en la pri-
mera pantalla. Vamos a aportar en la nueva versión siete
titulares más diez noticias en línea, mientras que en la actual
versión tiene cinco titulares más diez noticias en línea.
¿Existe la intención de desarrollar tecnología

nueva o productos propietarios, como gadgets,
navegadores u otros destinados a la audiencia
de Emol.com?
R: Hay un proyecto que va en ese sentido, a cargo

de Francisco Álvarez (periodista de Emol.com), que
está destinado a generar aplicaciones para IPhone de
El Mercurio que permita entregar un producto más
acabado, de mayor calidad para nuestros usuarios.

33 |
Caso de estudio
Entrevista a Nelson Orellana, jefe del Departamento de Desarrollos

TI Internet, Subgerencia de Impresión Digital de El Mercurio
Nelson Orellana es el responsable del área de de- Reflejar el contenido de la portada de www.emol.
sarrollo de productos para Internet en Emol.com, com de manera dinámica, actualizable según van
los diarios El Mercurio, Las Últimas Noticias, La entrando noticias respetando la definición de conte-
Segunda y Ediciones Especiales de El Mercurio. nido entregada por el área periodística.
Su labor es llevar a cabo proyectos que implican la
creación y administración técnica de plataformas de ¿Cuándo comenzó el proyecto de contenido
publicación, mantenedores de contenido (Backoffi- para móviles en emol.com?
ce), administración de data y sistemas relacionados
entre las versiones impresa y versiones WEB de los R: La primera iniciativa, propiamente WAP partió el
distintos medios pertenecientes a la red El Mercurio 2006, pensando que el tema móviles era una plata-
en Santiago de Chile. Tiene a su cargo un equipo de forma fundamental para el contenido de Emol.com.
desarrolladores, en su mayoría ingenieros. Ha parti- Pensábamos en un proyecto ambicioso que incluía
cipado de todos los proyectos que implican la pu- a Clasificados (Sección de avisos comerciales de El
blicación de contenido informativo online de Emol. Mercurio versión impresa y WEB), Proyectos inmobi-
com en diversas plataformas, incluyendo WAP y las liarios, etc. Finalmente en una decisión de marketing
actuales versiones para iPhone y Black Berry, publi- de reducir los gastos (de la producción del proyecto)
cadas en septiembre de 2008. se recortaron algunas cosas, lo que se tradujo en una
versión más básica, más específica.
La participación del equipo de desarrollo en las ac-
tuales versiones de www.emol.com para móviles se ¿De qué departamento surgió la idea del pro-
dividió en dos partes: yecto?
Montaje de la interfaz de usuario creada por el equi- R: Nació del departamento de Marketing Internet.
po de diseño de Emol.com en formato HTML para Luego se involucraron el área periodística y el área
iPhone y Black Berry

34 |
Caso de estudio
técnica (Departamento de Desarrollo de emol.com). JavaScript, etc. Dependiendo de eso ellos traducían
Nació del área comercial porque había un tema de el contenido al móvil.
marketing de por medio, además de involucrarse en
el desarrollo de nuevos negocios, ya que podría abrir ¿Cuál fue el lenguaje de programación que pri-
espacio a nuevos productos. mó en esa versión?
¿Quién lo canalizó desde el área periodística? R: Fueron dos etapas. En un principio mandamos
WML, a continuación se optó por XML. Eso era
R: Inicialmente fue liderado por Luis Goycoolea, Edi- puesto al aire, previo al trabajo de extracción de la
tor de Emol.com en esa fecha. Posteriormente lo re- información desde los mantenedores de contenido
tomó Sebastián Campaña, actualmente en ese cargo, (base de datos de poblamiento del front-end del si-
quien trabajó con los datos entregados por la gente tio), obteniendo la información especificada por las
de Certifica (www.certifica.com, empresa dedicada áreas periodística y comercial de Emol.com y des-
a auditar tráfico de usuarios en Internet), definiendo pués traducíamos de acuerdo al móvil que estaba
los contenidos en base a qué era lo más visitado en llamando al sitio.
el sitio, y también en base a la experiencia previa
que tenía esa empresa en cuanto al conocimiento de ¿La detección del equipo la hacía I2B?
plataformas WAP.
R: Ése es el servicio que ellos prestaban
¿Cuál era el universo de equipos móviles de
clientes a los que se estaba apuntando con ¿Y la distribución del contenido?
este desarrollo?
R: También lo hacían ellos. I2B tenía el contacto
R: En esa primera versión la empresa que nos ayudó con los operadores telefónicos. El departamento de
era I2B, quienes tenían la capacidad de que amol- Marketing de Internet de Emol.com decidió trabajar
daban el contenido que proveíamos de acuerdo al con esa empresa porque ya tenían experiencia con el
dispositivo que navegaba nuestras páginas. Es decir, portal de contenidos de Entel.
que hacían una traducción: nosotros le enviábamos
contenido puro y ellos, dependiendo del móvil – te- ¿Recuerdas consideraciones técnicas que tu-
nían una gran base de datos de marcas de móviles y vieron que tener en cuenta en la primera ver-
modelos -, especificaban las características de pan- sión de Emol.com para celulares?
talla. Por ejemplo si soportaban WML, si soportaban

35 |
Caso de estudio
R: No. No hubo muchas recomendaciones. Nosotros de haber terminado el proyecto para IPhone salieron
construimos en base a lo que consideramos debía al mercado algunas versiones de Black Berry. Y nos
hacerse en un sitio WAP, y nos fue bien. La única dimos cuenta de que en realidad con la evolución de
complicación técnica es que la plataforma (LINUX) la tecnología móvil ya había muy pocos equipos que
en que se traducía nuestro contenido a móviles es- no soportaban ciertas características gráficas o de
taba hosteado en los servidores de ellos, en cambio HTML o WEB. Por lo tanto mantenerse en esa pla-
hoy día el 95% de la plataforma (propietaria) nuestra taforma WAP pura ya no se necesitaba. Decidimos
disponible es Microsoft. Entonces el problema que hacer un sitio específico para IPhone y un sitio para
había era que se generaba un “cuello de botella” Black Berry y otros.
(problemas de transferencia) por ciertas adaptacio-
nes de un tipo de plataforma a otra. Ahí hubo una decisión comercial, que encuentro yo
bastante acertada, y es que cuando una persona visi-
Hace poco, en septiembre de 2008, Emol.com ta un sitio y se ve mal tiende a pensar que su equipo
relanzó una nueva versión para móviles. ¿Cuál (celular) está malo, entonces eso nos dio un plus
era el objetivo? para desarrollar nuestro enfoque a estos dos produc-
tos: Si tienes IPhone ves su versión, y si tienes Black
R: Con el lanzamiento del IPhone y el explosivo au- Berry u otro, entras a la versión Black Berry. Enton-
mento de la venta en Chile nos dimos cuenta de que ces en la medida de que los celulares evolucionan,
había que hacer algo especial para este dispositivo, pueden ver a Emol.com correctamente.
en conjunto con el área comercial y el área periodís-
tica. Nosotros nos pusimos a estudiar qué significaba ¿Cada cuánto tiempo consideras tú que los
hacerlo, de manera de sacarle potencialidad técnica usuarios recambian sus equipos?
a este teléfono. Luego de la definición de produc-
to del área periodística (en el sentido de tomar la R: Cada un año se produce la renovación de equipos,
decisión de qué elementos querían mostrarse, con y cada vez queda demostrado que la competencia
qué arquitectura, con qué funcionalidades y diseño), entre (los proveedores de) equipos móviles se acor-
empezamos a construir el desarrollo para IPhone. ta entre la salida de un nuevo modelo con caracterís-
Cuando tomamos ese proyecto ya habían pasado ticas actualizadas. La competencia entre los móviles
un par de años desde la primera experiencia WAP y es corta: Nokia, Black Berry, IPhone, por ejemplo,
hubo un distanciamiento con la empresa proveedora están en constante renovación de modelos.
de servicios para celulares (I2B), y al poco tiempo

36 |
Caso de estudio
Desde el punto de vista de técnico, es decir trae una cámara de video incluida. Por ahí hay que
lenguaje, plataformas, etc. ¿A qué hay que po- poner atención en la inclusión de videos.
ner atención en el desarrollo de productos de
contenido para dispositivos móviles en el futu- ¿Existe la intención de desarrollar tecnología
ro cercano? nueva o productos propietarios, como gadgets,
navegadores u otros destinados a la audiencia
R: En cuanto a lenguajes hoy día puede ser HTML, de Emol.com?
XML. Son cosas que nosotros diariamente ocupamos
(en Emol.com), pero “yo no me muero por ninguna R: No, yo pienso que no. Yo te diría que no somos crea-
de ellas”. Es decir que yo estoy seguro que el día dores, sino que adaptadores de tecnología. Nosotros
de mañana va a salir eventualmente algún estándar siempre esperamos a que se desarrolle en el mercado
WEB para móviles. Y estoy seguro que ya se está primero. La forma de adaptación de tecnologías nuevas
trabajando y va ir cambiando en la medida que vaya no es muy temprana, esperamos a que se posicione
cambiando el mercado de la industria móvil. Justa- dentro de los usuarios masivamente, unos seis meses
mente para cerrar el lenguaje existente. de posicionamiento, hasta que eventualmente la adap-
tamos a nuestros productos. Ejemplos de esto es Sil-
Con respecto a todo lo que tenga que ver con pro- verlight, Flex, cosas que gigantes de la industria como
ductos, un ejemplo a considerar es Twitter o Face- Adobe o Microsoft demoran un año en posicionar… en
book. Lo que ha pasado con estos fenómenos es eso nosotros somos muy precavidos en el sentido de
interesante: todo lo que tenga que ver con la inclu- tomar un estándar antes de aplicarlo a los productos pú-
sión de la WEB 2.0, y eventualmente la inclusión de blicos que ofrece El Mercurio en Internet.
multimedia, inclusión de videos. El último IPhone ya

37 |
Entrevista
The Washington Post - Chrys Wu

38 |
Entrevista
The Washington Post | Chrys Wu
La periodista Chrys Wu se desempeña como estratega editorial del

The Washington Post (TWP), medio para el cual diseñó la arquitec-
tura del nuevo sitio WAP que se lanzará próximamente y trabajó
con diseñadores en la estructura e interfaz de usuario.
El actual sitio es el primero del Post y fue lanzado en para entender las expectativas de los usuarios, su
2006. Chrys se refiere a diversos aspectos relativos comportamiento y oportunidades.
a este nuevo proyecto.
Revisé las estadísticas del sitio para entender qué
¿Cuántas versiones existen del sitio para dis- páginas visitaban los usuarios del TWP con mayor
positivos móviles del The Washington Post? frecuencia y cómo estaban llegando allí. Estudié el
diseño (tanto de la arquitectura de la información
R: Actualmente son dos: hay un sitio WAP, que fun- como de la interfaz de usuario) de muchos sitios
ciona en la mayoría de los teléfonos y smartphones, para móviles, no solamente noticiosos, para encon-
y otro optimizado para iPhone. Además, para Black- trar ideas que se pudiesen aplicar en la nueva ver-
Berry The Post tiene un marcador descargable. Hay sión del sitio.
que acceder a http://twp.com/bb en un navegador
BlackBerry para obtenerlo. Para el iPhone se puede Hice una encuesta informal a consumidores de sitios
bajar un acceso directo siguiendo las siguientes ins- WAP, para entender lo que la gente entendía como
trucciones http://www.washingtonpost.com/wp-srv/ “buenos y malos sitios”, tanto en términos de con-
contents/mobile/devices.html. tenidos como de características generales. Estudié
todo el contenido que el The Post publica en sus
En términos de usabilidad y arquitectura de la versiones digitales y consideré diferentes maneras
información, ¿cuál fue tu rol en la creación del en que podríamos usarlo en nuestro soporte móvil
nuevo sitio WAP del The Washington Post? (Flash sigue siendo un gran obstáculo por ejem-
plo).
R: Trabajé con nuestro director de servicios para mó-
viles con el fin de comprender qué capacidad te- Finalmente, trabajé en estrecha colaboración con un
nía la empresa que nos proveía el respaldo técnico. equipo para dar forma a la interacción y la experien-
Realicé investigación de mercado (interna y externa) cia de usuario del sitio WAP.

39 |
Entrevista
En particular, ¿qué ha realizado el The Was- Tipografía

hington Post en las siguientes áreas?
R: Algunos teléfonos móviles tienen resoluciones de
Imágenes pantalla muy altas, así que incluso con un tamaño
de fuentes muy pequeño (por ejemplo 7 puntos), el
R: El equipo con el que trabajé consideró diferentes texto es altamente legible. A su vez, si la tipografía
aproximaciones, incluyendo: es muy grande, las historias también son difíciles de
leer. Por lo mismo, tomamos ambas cosas en con-
- No incluir fotografías en la portada (tiempo de sideración.
descarga más veloz, pero potencialmente aburrido).
También afecta la posibilidad de mostrar una historia Estructura de página
donde el elemento visual es lo más importante o in-
teresante de esa información. R: El sitio en cuyo diseño participé tomó en cuenta
cuatro factores:
- Una fotografía en la portada (mayor tiempo de des-
carga, pero más interesante visualmente, pues per- - El usuario, quien desea una experiencia veloz e
mite captar la atención de esa manera). informativa (noticias de última hora, herramientas,
navegación fácil y conveniente, y poco tiempo para
- Fotografías para las historias más actuales (tiem- llegar a la información que buscan).
po de descarga mayor y potencialmente influye en
que se vea mucha “basura” visual en una pantalla - El productor de noticias, quien está siempre bajo
reducida). algún tipo de presión por las horas de cierre.
- Sin fotografías en las historias, pero con imágenes - La empresa que compra espacios publicitarios:
de presentación para las galerías de imágenes. que desea exposición y clics.
- También consideramos muchos tamaños diferen- - El proveedor de servicios para móviles, que tiene
tes, considerando los que ya se habían creado para límites en la tecnología que puede ofrecer.
el sitio web y las restricciones que había para publi-
cación en móviles.

40 |
Entrevista
Navegación ¿Cuántos teléfonos móviles utilizaron para pre-

visualizar los contenidos al crear el nuevo sitio
R: Creo que la actual navegación está limitada de WAP?
alguna manera por las herramientas de publicación
que nos ofrece el proveedor de servicios móviles. En R: No sé para el actual, pero para el que estaba tra-
el sitio que ayudé a diseñar no tuvimos esas restric- bajando usamos varios. Nuestra primera prioridad
ciones, por lo cual el equipo pudo considerar dife- eran los modelos BlackBerry, ya que éstos compo-
rentes métodos de navegación y locaciones. nían nuestra comunidad más extensa después del
iPhone.
Extensión de los textos
¿Qué recomiendas tomar en cuenta en el pro-
R: Las historias que se publican actualmente son las ceso de crear un sitio WAP?
mismas del sitio web.
R: Primero, forma un equipo pequeño y no tengas
¿Qué lenguajes de programación ha utilizado muchas personas que tomen decisiones. Esto es
el The Washington Post en su sitio? aplicable a cualquier proyecto grande. Es tal como
dicen: “Demasiados cocineros estropean el caldo”.
R: La herramienta de publicación del proveedor de
servicios móviles permitía muy poca adaptación. El Segundo: entiende lo que tus usuarios desean del
sitio actual está creado utilizando canales RSS per- sitio. Pregúntales directamente y observa lo que tus
sonalizados. estadísticas muestran.
¿Qué CMS utiliza el TWP para actualizar sus Tercero: conoce a lo que te enfrentas. No sé cuál es
contenidos móviles? el caso en Chile, pero en Estados Unidos los ope-
radores móviles (AT&T, Verizon, Sprint, etc.) tienen
R: El actual proveedor de servicios móviles es Crips mucho poder sobre los formatos y, en cierto grado,
Wireless y el sitio usa el sistema de publicación de sobre los requerimientos para un sitio de este tipo.
Crisp.

41 |
Entrevista
Cuarto: trabaja de forma cercana a Informática. Ellos ¿Por qué no se usa video en el sitio para mó-
pueden ofrecerte una ayuda invaluable en cuanto a viles del The Washington Post, considerando el
los requerimientos técnicos para el sitio. Algunas éxito de sitios WAP como You Tube?
veces tendrás una idea fantástica, pero tendrá que
ser modificada u olvidada porque no es posible da- R: Me parece que hay diversas razones para que no
das las herramientas, la mano de obra o el tiempo. haya video en el sitio actual: solamente en los últimos
años han aparecido teléfonos que pueden transmitir vía
Quinto: si vas a incluir elementos que permitan ob- streaming. Según recuerdo, el video del The Washing-
tener ingresos en el sitio (publicidad, patrocinios, ton Post no fue codificado para streaming orientado a
etc.), asegúrate de que tienes un representante o móviles. Y creo que el proveedor de anuncios de vídeo
equipo de ventas creativo y colaborativo en casa. no tenía un medio para transmitir sus spots a teléfonos
La posibilidad de recaudar recursos está a la mano, móviles. Finalmente, el video se convierte en un ele-
pero tus agentes de venta pueden ayudarte mucho mento que se “come” el ancho de banda. El video se
en proponer ideas y campañas que cumplan lo que reproduce bien en redes 3G, pero la calidad de repro-
el anunciante desea sin estropear la experiencia de ducción no es muy buena en redes más lentas.
usuario.

42 |
Experiencia de laboratorio
Pruebas con lenguajes y CMS

43 |
Introducción
A continuación se muestran los ejercicios de es- (Content Management System), que pudiera estar
critura de código y aplicación de formatos que se orientado al manejo y visualización de información
hicieron con WAP 2.0 (Wireless Aplication Proto- pensando en un despliegue adecuado a dispositivos
col, protocolo de aplicaciones inalámbricas), y CSS móviles. Esa adecuación es en cómo debe mostrar-
(Cascading Style Sheets, Hojas de Estilo en Casca- se la información en la reducida pantalla de estos
da). Aunque también se hicieron ejercicios con WAP equipos, que en general tienen dimensiones cerca-
1.0, se omitió profundizar en este lenguaje debido nas a los 240 por 320 pixeles. Esta implementación
a lo limitado de los resultados en cuanto a gráfica, tampoco debía traducirse en una carga excesiva de
resultando ser un recurso que prácticamente no está datos que implicara demorara y exigencia de rendi-
vigente en la generación actual de telefonía celular, miento de estos aparatos.
y en particular en los equipos elegidos para hacer
las pruebas: Nokia N95, BlackBerry 8100 Pearl y Para ello se optó por trabajar con tres CMS como
iPod Touch. En cambio, los resultados de escritura prueba, cuyas características relevantes son que se
formateada de información resultó más rica con el trata de código abierto (Open Source), eventual-
uso de WAP 2.0 y la aplicación de CSS. mente modificables tanto en su estructura del lado
cliente como en la plataforma misma de publicación.
El objetivo de este primer test era determinar las Y el tercer criterio relacionado con estos mantene-
características visuales del contenido que se dores tiene que ver con que fueran administradores
muestra en pantalla en los distintos dispositivos en gratuitos, de manera que su implementación no se
relación con criterios de estructura, despliegue de tradujera en la creación o adquisición de un produc-
colores, tipografía, jerarquías de textos, desborda- to nuevo, sino que en la modificación de alguno de
miento, hipervínculos e incorporación de imágenes estos sistemas de administración de contenido que,
y otros elementos multimedia, como Flash o vídeo. por su característica de código abierto, permite que
Para la realización de las pruebas y escritura de có- sean escalables y mejorables de manera colabora-
digo se utilizó software de edición gráfica: La suite tiva.
CS3 de Adobe, con las aplicaciones Dreamweaver,
Photoshop y Device Central para algunas definicio- La estrategia usada para determinar qué CMS podría
nes de interfaz de usuario. ser de utilidad fue la experiencia previa del equipo
de investigadores en la implementación de este tipo
La segunda parte del trabajo de laboratorio tiene que de administradores en la Web orientados, por cierto,
ver con la implementación de un sistema de ges- a la publicación de blogs. Es por ello que debía con-
tión de contenidos, o CMS en sus siglas en inglés siderarse, en el caso de que pudiese hacer un cam-

44 |
Introducción
bio exitoso en el perfil de este sistema, de manera ra modificaciones sustanciales, a la vez que estu-
que la apariencia y la modalidad de actualización no viera basado en una plataforma modular en cuanto
estuviera necesariamente vinculada a la dinámica de a estructura y, lo más importante, que el resultado
blogs, es decir con actualización en base a conteni- fuera un sitio alimentado por una base de datos. Esto
dos reciente (posteos) y la posibilidad de que estas aseguraría un trabajo indexable, de manera de poder
notas fueran comentables. usar una herramienta clave en el acceso a informa-
ción, como es el buscador.
De hecho a lo que se aspiraba era a la posibilidad
de sintetizar contenido de manera automática y de En estricto rigor se consideraron inicialmente cuatro
reducir componentes que no fueran relevantes sobre CMS, todos en base a plataforma PHP (PHP Hyper-
todo, insistimos, considerando la incapacidad de text Pre-processor) usando bases de datos MySQL
que se muestre eficientemente todo el contenido de (MySQL DB). Para su implementación se contrató el
una página WEB normal en el reducido visor de un servicio profesional de una empresa que nos prove-
teléfono móvil. yera de un servidor para montar esta plataforma, a la
vez que nos entregara el acceso a las bases de datos
Perfectamente se podría haber trabajado en un si- necesarias para hacer las instalaciones y poblamien-
tio basado en, por ejemplo, XHTML actualizable a tos de contenido de prueba correspondientes.
mano con algún software de edición de HTML. In-
cluso, dado el caso, vía editor de texto simple. Pero Estos CMS son Movable Type, Drupal, Joomla y
dada la naturaleza de nuestra investigación, el obje- Wordpress. Tanto Movable Type como Drupal fue-
tivo primordial era intentar definir una herramienta ron desechados desde al comienzo del laboratorio
orientada a la publicación de contenido con perma- ya que, pese a tener una consistente gestión de las
nente actualización, dinámica y con acceso a archi- bases de datos, el desarrollo de sus plantillas era
vos históricos. bastante más reducido que la variedad encontrada
en Wordpress y Joomla. Por lo demás la similitud
Es por ello que se volvió indispensable considerar la en la gestión de contenido es bastante similar entre
aplicación de un sistema estable que se administrara este último y Drupal, por lo que el trabajo se acotó a
con una interfaz amigable, que de por sí no requirie- sólo dos plataformas.

45 |
Pruebas con lenguajes
WAP 1.0 (Wireless Markup Language). La versión Se publicó una versión en línea en la siguiente
original 1.0 data del año 1999 y fue definida por url:
la entidad internacional WAP Forum, actual Open
Mobile Alliance (OMA). Actualmente está obsole- http://www.in-movil.com/investigacion/wap/
ta, y por tanto en desuso en la mayoría de los equi- wml/index1.wml
pos celulares de la actual generación con conexión
a Internet.
Pese a que las restricciones son mayoritarias, se

hizo la prueba de escritura de un párrafo simple entre
las etiquetas <card></card>, que corresponde a
los códigos para mostrar el contenido de la página,
el resultado fue limitado. Básicamente se intentó la
carga con el software Adobe Device Central, que lo-
gró visualizar parte del contenido en forma local.
En la ilustración 1.1 se muestra la pantalla mostrada

en el emulador del equipo Nokia N95 que mues-
tra un texto continuo sin distinción de jerarquías, y
por supuesto sin la posibilidad de incorporar ningún
atributo gráfico salvo texto monocromático.
El emulador de Device Central no mostró ningún
contenido, lo mismo ocurrió con BlackBerry 8100
Pearl donde sólo se verificó la existencia de la direc-
ción WEB sin mostrar más que una pantalla en blan-
co. Mientras que tanto el emulador de http://iPho-
netester.com/, desplegado en el navegador Safari
versión 4.0, como el de http://www.testiPhone.
com/, en el navegador Mozilla Firefox versión
3.0.11, fue invocado en la página como un objeto
descargable, sin mostrar su contenido.
ilustración 1.1

46 |
WAP 2.0 (protocolo de aplicaciones inalámbricas) 1) http://www.in-movil.com/investigacion/wap/

rige desde 2004 en el ámbito de las comunicacio- html/index.xhtml
nes telefónicas móviles y está vigente a la fecha de
esta investigación. El primero de ellos se muestra en la imagen 1.2,
desde Nokia N95 emulado con el programa S60
Es un lenguaje que mezcla XHTML (XHTML Mobile 3rd Edition SDK para Symbian OS, incorporan-
Profile, lenguaje extensible de marcado de hiper- do en este navegador la url http://www.in-movil.
texto), con algunos atributos gráficos basados com/investigacion/wap/html/index.xhtml que
en CSS (Hojas de estilo en cascada, Cascading muestra atributos de encabezados (<h1>, <h2>,
Style Sheets). Con este enriquecimiento muchos <h3>), párrafo (<p></p>), listados sin ordenar
equipos móviles incorporaron en sus navegadores la (<ul><li></li></ul>), selectores de listado
capacidad de mostrar atributos similares a los que (<select><option></option></select>), links
se muestran en páginas HTML vistas desde un nave- e incrustación de imágenes relativas al documento.
gador tradicional, como por ejemplo color, jerarquía La imagen 1.3 muestra el despliegue en BlackBe-
tipográfica, imágenes bitmap, etc. rry, que no hace mayores distinciones de tamaño
entre un encabezado principal y uno de tercer orden,
Las pruebas que se hicieron a partir de este docu- por ejemplo.
mento serán abordadas en extenso en el siguiente
apartado. Para las pruebas de WAP 2.0 se crearon
tres documentos con características particulares en
cuanto a contenido.
ilustración 1.2 ilustración 1.3

47 |
El ancho del contenido está dado por defecto al te señalar que los atributos del encabezado de este
máximo de la pantalla, ya que no se han escrito documentos son las directrices básicas para que se
atributos de tamaño de ningún tipo y el código ado- muestre eficientemente desde un aparato móvil, y no
lece también de cualquier elemento contenedor, ya así desde un navegador normal como es el caso de
sean tablas o div. Firefox o Safari. Este comportamiento lo muestra la
imagen 1.4, capturado desde el navegador Firefox.
El color de fondo de la página es blanco, y el resto
de los atributos, como encabezados, párrafo, links, El código de encabezamiento de este documento es
imágenes, selectores y otros, se muestran eficien- el siguiente, donde queda de manifiesto que no se
temente, aunque con color por defecto como si se usó ninguna definición basada en CSS:
estuviera navegando en una página sin atributos grá-
<?xml version=”1.0”?>
ficos. <?xml-stylesheet type=”text/css”
media=”handheld” ?>
Un dato relevante es que al ingresar desde un na- <!DOCTYPE html PUBLIC “-//WAPFORUM//
DTD XHTML Mobile 1.0//ES”
vegador normal a esta dirección WEB, el conte- “http://www.wapforum.org/DTD/xhtml-mobi-
nido se muestra continuo sin jerarquía ni links. le10.dtd”>
<html>
Este mismo comportamiento lo muestra la aplicación <head>
Device Central, de Adobe. Por lo tanto es importan- <meta http-equiv=”Content-Type”
content=”text/html; charset=utf-8” />
<title>Primera representación xhtml (Sin es-
tilos)</title>
</head>
2) http://www.in-movil.com/investigacion/wap/
html/index2.xhtml
En la segunda página preparada para ver los atribu-

tos de formato, gráfica y estructura, se han definido
elementos y etiquetas, que se muestran detallada-
mente en la imagen 2.1.
ilustración 1.4

48 |
tal como se muestra usualmente en los equipos Ma-

cintosh.
Otra característica importante de este documento es

que se le han dado atributos de ancho porcentual a
los distintos elementos y etiquetas, como al encabe-
zado h1. Además de que se ha anidado todo el con-
tenido dentro de una tabla, al 90% de ancho, que
tiene algunos atributos como relleno de celda de 10
pixeles. También se ha incorporado los atributos de
body, definiendo la familia tipográfica, estados de
link (link y hover), tabla y una clase con una fami-
lia tipográfica distinta de la definida en la etiqueta
<body>, llamada “.Estilo1”, y que usada para dar
cambios de color en algunos tramos del contenido y
buscar un comportamiento distinto para los atributos
ilustración 2.1
de hipervínculos.
Las consideraciones técnicas más relevantes para

observar estos resultados, visibles en la pantalla de
BlackBerry 8100 en la ilustración 2.2 son la incor-
poración de una hoja de estilo CSS incrustada
en el encabezado del documento, cuya extensión
en comparación a la hoja de estilo de una página
HTML o XHTML normal es bastante más reducida.
Dependiendo del equipo en que se visualice la pági-
na habrá algunas diferencias.
Por ejemplo iPhone o iPod Touch con su navega-

dor nativo muestra la página sin ninguna diferencia
estructural a como podría mostrarse en un compu-
tador navegando con Safari. Incluso las tipografías
ilustración 2.2
se dibujan con suavizado, es decir sin bordes duros,

49 |
Aunque se haya determinado en la hoja de esti- Nokia N95 sí respeta con un comportamiento de su-
lo CSS un comportamiento cuando pasa el cursor brayado cuando se posa el cursor sobre un link.
sobre un link, en Blackberry esa definición no se
muestra, dejando siempre subrayados los links y Si bien estas diferencias entre mostrar o no las
sin cambio de color por defecto. definiciones visuales de los hipervínculos en
diferentes equipos puede resultar un factor relevante
Por lo tanto entre un equipo y otro los comporta- para algunos usuarios desde el punto de vista de la
mientos pueden variar. Esto queda demostrado en el usabilidad, no resulta ser un estándar en los equipos
dibujo que hace Nokia N95 de la página en cuestión tratados.
con un coportamiento bastante más cercano al
HTML visto en un navegador normal de computador, En cambio las definiciones de ancho en base
incluso suavizando la tipografía. a porcentaje es una definición que se muestra
sin problemas. En este ejercicio prevalece el valor
“90%” en varias etiquetas, y efectivamente es un
comportamiento respetado por la totalidad de los
equipos. He aquí un dato absolutamente relevante, y
que tiene que ver con el desbordamiento del con-
tenido y la eventual aparición de la barra lateral u
horizontal (scroll).
Al designar un valor que no es el 100% del ancho,

sino que menor a ese valor, se sugiere un “resguar-
do” del área útil de la pantalla, ya que con eso se
evita que aparezca el scroll.
Probablemente en un navegador WEB de computa-

dor, el atributo de ancho de contenido al 100% se
traduce en diseño absolutamente líquido, y es desde
el punto de vista de la usabilidad una característica
Nokia N95 mostrando el ejemplo de WAP 2.0 deseable en cuanto a adaptación del contenido al ta-
maño más adecuado según la pantalla del usuario.

50 |
font-family: Georgia, “Times New Roman”, Ti-

En el caso de la pantalla del móvil optamos por mes, serif;
un valor menor (el referido 90%), aún teniendo en color: #FFFFFF;
cuenta lo restringido del área útil. Pero con esa ins- background-color: #000000;
padding-right: 10px;
trucción se deja un margen aceptable con respecto a padding-left: 10px;
las variantes de ventana útil que ofrecen los navega- }
a:link {
dores en los distintos equipos móviles. color: #FFCC00;
text-decoration: none;
}
Otra recomendación es el uso de la hoja de esti- a:hover {
lo CSS incrustada dentro de la página, tal como se color: #CF0;
muestra en el detalle de la cabecera. También en text-decoration: underline;
}
este ejercicio se incorporó un combo desplegable .table1 {
“jumper”. Para tal efecto Dreamweaver generó un background-color: #003399;
border-top-width: 1px;
pequeño Javascript. Esta definición, que hace que se border-top-style: solid;
despliegue y vuelva a su posición original un menú border-right-style: solid;
border-bottom-style: solid;
desplegable, está definido en la cabecera. Aquí está border-left-style: solid;
el detalle de la información contenida dentro de las border-top-color: #FFFFFF;
etiquetas <head></head> de esta página XHT- text-align: center;
}
ML. Se ha coloreado cada tramo de definiciones h1 {
para aclarar el dominio de cada grupo de atributos: font-family: Geneva, Arial, Helvetica, sans-se-
rif;
font-weight: bold;
<?xml version=”1.0” encoding=”utf-8”?> color: #00CCFF;
width: 90%;
<?xml-stylesheet type=”text/css” border: 1px solid #33CCFF;
media=”handheld” ?> text-align: center;
<!DOCTYPE html PUBLIC “-//WAPFORUM// }
DTD XHTML Mobile 1.0//ES” .Estilo1 {
“http://www.wapforum.org/DTD/xhtml-mobi- font-family: Verdana, Arial, Helvetica, sans-
le10.dtd”> serif;
<html> color: #000000;
<head> background-color: #FFFF66;
<meta http-equiv=”Content-Type” width: 90%;
content=”text/html; charset=utf-8” /> border-bottom-width: 10px;
<title>Segunda representación xhtml con es- border-bottom-style: solid;
tilos incrustados</title> border-bottom-color: #00FFFF;
<style type=”text/css”> margin-top: 10px;
 más completo en cuanto
</style> a atributos y estructura
<script type=”text/javascript”>

</script> Se trabajó en este docu-
</head>
mento para establecer
Finalmente hay que mencionar que tanto en esta qué características de una
versión como en el ejercicio anterior de WAP 2.0, página HTML simple es
la incorporación de imágenes con la etiqueta <img capaz de mostrar correc-
src=”” alt=”” /> funciona sin ningún problema, tamente los tres modelos
salvo que la información alternativa no se muestra de móvil escogidos para
hacer las pruebas.
Pero esto último ocurrirá exactamente según una de
sus definiciones de utilidad, y es que aparece este
texto cuando la imagen no ha sido cargada comple-
tamente, y en ese caso cumple correctamente su
función en los dispositivos estudiados.
Aplicación de XHTML

52 |
Ésta es la definición de su cabecera: En algunos diseños realizados en el sitio www.

emol.com para la versión BlackBerry se usaron ta-
!DOCTYPE html PUBLIC “-//W3C//DTD XHT-
ML 1.0 Transitional//ES” “http://www.w3.org/ blas contenedoras de 230px de ancho. Sin embargo
TR/xhtml1/DTD/xhtml1-transitional.dtd”> se comprobaría posteriormente que según el tema
<html xmlns=”http://www. (o “skin”) elegido por los usuarios podía variar hasta
w3.org/1999/xhtml”>
<head> en 12px el ancho de un párrafo según la tipogra-
<meta http-equiv=”Content-Type” fía usada en dicho tema. Otra característica que se
content=”text/html; charset=iso-8859-1” />
incorporó en esta versión es la inclusión de celdas
(<td><tr></tr></td>) con distintos atributos
de ancho, ya sea porcentuales como de ancho fijo
La manera en que se estructuró esta página es en
en pixeles, trabajando estructuras de columnas sim-
base a una sucesión de tablas contenedoras con an-
ples.
cho fijo, definido en pixeles. Se optó por el ancho
de 220px, tamaño que se visualiza sin problemas en
También se aplicaron códigos de color para fondos
los tres equipos usados.
de tabla, y se usó el mismo atributo vía clase (como
por ejemplo .fondonaranja), aplicados a determina-
das celdas. También se intentó utilizar el efecto de
imagen de sustitución, es decir que cuando se posi-
ciona el cursor sobre un link con esta característica,
el fondo de lo seleccionado muestra una imagen di-
ferente. Ese efecto es muy común para simular bo-
tones en páginas web normales. Sin embargo, este
atributo respondió efectivamente sólo en la versión
iPhone.
El resto de las características de la construcción se

muestran en la foto 3.1, y a continuación se mues-
tra la pantalla de Nokia N95 en una foto editada con
Nokia N95 y prueba
Adobe Photoshop que muestra toda la información
con XHTML
estructurada en tablas contenedoras. La página se
muestra en el navegador Firefox. (Foto 3.2)

53 |
En base a esta prueba se pudo establecer un pun- <div>. El resultado en iPhone es una representa-
to de referencia importante sobre qué carac- ción sin problemas, mostrando el contenido tal cual
terísticas de formato es lo que mayoritariamen- fue diseñado en cuanto a flotación de elementos, uso
te pueden mostrarse en los equipos probados, sin de clases e identificadores en la hoja de estilo CSS.
correr demasiados riesgos de distorsiones mayores, Incluso muestra correctamente frames e iframes.
desbordamientos o, definitivamente evitando errores
que impidan que cierta información se muestre en
estas pantallas.
Por tanto, es este tercer ejercicio el determinante

para usar como referencia si es que lo que se quiere
es generar contenido estructurado en anchos conte-
nedores fijos. Se conecta directamente con el caso
de estudio de www.emol.com, y los marcadores
de fútbol o tenis usados durante 2009 en la trans-
misión de partidos importantes. Un ejemplo de esta
experiencia se muestra en la siguiente imagen (Foto
3.3).
Se trata de una estructura de página en base a tablas

contenedoras que se usó para la transmisión en vivo
de relatos deportivos. Si bien en la foto anterior se
muestra dentro de la interfaz de iPhone, su uso esta-
ba destinado principalmente a la correcta visualiza-
ción en teléfonos BlackBerry y Nokia N95 más todo
el resto de celulares que pudiesen tener conexión a
Internet.
Un punto muy importante que es necesario men-

cionar es que para iPhone y Nokia N95 se hicie-
ron pruebas con la importación de hojas de estilo Marcador de tenis en www.emol.com con un con-
CSS externas, y se construyó en base a etiquetas tenedor <table> de ancho 220px. (Foto 3.3)

54 |
Quizás el único elemento en consideración que se En el caso de BlackBerry, y por extensión en equipos
recomienda no usar es tecnología flash, ya que celulares distintos de los otros dos casos de estudio
la actual versión de OS en estos equipos simple- de nuestro laboratorio, el trabajo con elementos de
mente no lo muestra. flotación definitivamente no es recomendable, dado
lo incontrolable que resulta la interpretación de estas
El resto de la visualización es prácticamente la estructuras y la imposiblidad de mostrar correcta-
misma que en un sitio WEB tradicional. Incluso mente ciertas definiciones específicas, ya sea es-
iPhone tiene la cualidad de mostrar el contenido al tructurales, tipográficas, de imágenes o de otro tipo
100% del ancho de pantalla según se está viendo el de elementos.
visor en forma vertical u horizontal, con una herra-
mienta llamada acelerómetro, que detecta y adecua
lo que se muestra en el navegador en relación a la
posición vertical u horizontal con respecto a la lí-
nea de horizonte del usuario. Si a esto se suma la
posibilidad de hacer zoom manual del contenido en
pantalla, hace que este dispositivo sea el que mejor
interpreta páginas HTML tradicionales.
En esta línea de trabajo, en base a etiquetas <div>

y definiciones vía CSS usadas en WEB tradicional,
las pruebas realizadas con Nokia N95 en líneas ge-
nerales muestran un dibujo de página cercano a lo
que muestra iPhone, pero con claras distorsiones
de render en la tipografía y flotación de ele-
mentos, generando márgenes que en ciertos casos
provoca desbordamiento de contenido y el desarme
de estructuras de ancho fijo.

55 |
Pruebas con CMS
Joomla.
La primera experiencia de trabajo con CMS se rea-

lizó con este sistema ya que, como se mencionó
anteriormente, es uno de los administradores de
contenido que se presta de mejor manera a modifi-
caciones con mayor facilidad dado que es una apli-
cación de código abierto (Open Source), es decir
que se puede acceder a la construcción de plantillas
En la foto superior se muestra el despliegue de esta
de parte del usuario (Front-End) modificando la es-
misma portada en la pantalla de BlackBerry 8100
tructura de, por ajemplo, anidación de etiquetas PHP,
Pearl, simulado con la herramienta (Add-On) Web
como también de la visualización del contenido vía
Developer en Firefox, que permite adecuar el an-
CSS.
cho de pantalla a un ancho de 240px, que es el que
tiene este modelo de celular.
La versión usada es Joomla 1.0.15 Stable, actuali-
zada el 22 de febrero de 2008. En la foto de abajo se
La imagen de abajo se muestra el mantenedor de
puede observar la portada de este sitio vista desde
contenidos desde la parte de administración, aloja-
el navegador Mozilla Firefox, que está actualmente
da en la url http://www.educacion-digital.com/
instalado en la url http://www.educacion-digital.
Joomla/administrator/index2.php
com/Joomla/

56 |
Pruebas con CMS
significa que los módulos de llamado a informa-

ción o “posteos” (se llaman así debido a que es
un administrador de contenido orientado a manejo
de blogs), debía ser lo más limpios posible, ideal-
mente sin adición de herramientas de comentarios,
sindicación, despliegue de textos complementarios,
etc. Había que priorizar la correcta visualización del
texto. Pese a que prácticamente es imposible encon-
La plantilla usada es xe_mobile (/export/home/ed/
trar una plantilla que tuviera esas características por
educacion-digital.com/public_html/Joomla/tem-
defecto, la que se eligió era bastante sencilla, lo que
plates/xe_mobile/css/template_css.css), que fue
facilitó su edición.
modificada en su código CSS.
3. El despliegue de la portada es en base a ta-

La elección de esta plantilla obedece a las si-
blas anidadas, con el menú de acceso a secciones
guientes razones:
que ordenado verticalmente en una columna única,
una disposición ideal para el despliegue en una
1. La estructura de presentación del contenido
pantalla de celular ya que no se extiende horizontal-
de parte de los usuarios no debe ser comple-
mente como ocurre en la mayoría de los menús de
ja, es decir, que el objetivo básico era trabajar con
acceso de páginas web tradicionales. Por otro lado,
una plantilla que idealmente se mostrara en una sola
la cabecera fue modificada incorporando el logotipo
columna.
corporativo en un mínimo espacio (205px por 43px
de alto). Mientras más espacio útil, mejor.
En general las plantillas Joomla se muestran con dos
columnas: Una central y otra columna secundaria,
4. Por último, la estructura de contenido de la
lateral, donde usualmente se despliegan elementos
portada es líquida, lo mismo que el despliegue de
de navegación componentes de búsqueda, categori-
contenidos, es decir que se expande a lo ancho de
zación y sindicación. En ese sentido fue fundamental
la pantalla sin delimitaciones fijas. Esto es un factor
trabajar con una plantilla que no tuviera esos ele-
favorable para su adaptabilidad a cualquier tipo de
mentos laterales, o que los tuviera en otra posición.
pantalla. Este despliegue se muestra en la foto 4.5,
que extiende todo el contenido de un artículo y per-
2. La composición de módulos de contenido,
mite ver que en el cierre de la página aparece un par
que es la manera en que se muestra la informa-
de navegadores y un link de retorno a la portada.
ción en este CMS, también debía ser simple. Esto

57 |
Pruebas con CMS
Problemas detectados En cuanto a la anidación de tablas de -por ejem-

plo- la portada, implica tener que trabajar “en duro”,
Si bien este mantenedor de contenido y más espe- es decir, manualmente, para hacer modificaciones
cíficamente sus atributos visuales son relativamente puntuales de algunos anchos de contenedores, edi-
fáciles de modificar vía edición de CSS, no es muy tando el código HTML de la página. Esto resulta
amigable en cuanto a la anidación de tablas y es- incongruente con algunas definiciones hechas
tructura de navegación. Lo último queda demostrado con código CSS, encontrando incompatibilidad de
en que la lógica de despliegue debiese ser que al algunas definiciones y sobreescritura de algunos
hacer click sobre algún texto debiera mostrarlo in- comandos y etiquetas, específicamente en relación
mediatamente en el siguiente despliegue. con las características de algunas tablas y celdas.
Además, esto hace que su presentación no sea es-
Sin embargo este navegador ofrece al menos un paso calable a otras plataformas. Por lo tanto la plantilla
intermedio antes de llegar a lo que se desea leer. se convierte en un producto exclusivamente para te-
Ese paso indeseado es de vital importancia cuando léfonos móviles.
un usuario navega desde su móvil, ya que significa
tiempo de espera, una sensación de no encontrar lo En términos generales, implementar un sistema de
solicitado inmediatamente. Además, puede ser un administración de contenidos con Joomla no es en
costo monetario extra si es que se está navegando extremo difícil, considerando la implementación de
con un plan de datos limitado, o en base a Kbytes una plantilla que permita ser modificada. Sin embar-
transferidos. go, su arquitectura lo alejan en cierta medida de ser
considerado un producto realmente escalable y que
Si bien la estructura de navegación puede ser corre- además sea bien visualizado en un universo amplio
gida mejorando los enlaces cuando se hace el po- de teléfonos móviles. Y visto desde un navegador de
blamiento del contenido, su forma de avance entre la páginas web, este despliegue resulta realmente pobre,
portada y los despliegues no es naturalmente fluida. desprolijo y la escala en que se muestran sus conteni-
Esto no es una característica que hayamos detectado do como fotos, títulos y textos, no se ajusta alas nece-
en la plantilla modificada; más bien es parte la arqui- sidades de visualización de una pantalla estándar de
tectura de este CMS. 1024px por 768px. Ni hablar de tamaños superiores.

58 |
Pruebas con CMS
Wordpress.
Una vez realizada las experiencias de modificación

de un CMS, en su estructura funcional y poblamien-
to parcial de contenido en relación con la arquitectu-
ra de navegación para móviles (experiencia realizada
con Joomla), se procedió a realizar una labor similar
con Wordpress versión 2.8, en inglés. La url del
sitio en el que se hizo la instalación es la siguiente:
http://www.in-movil.com/investigacion.
También se trabajó con una base de datos MySQL

orientada a la administración de tablas de datos en
PHP, lenguaje nativo de este administrador de datos.
Por lo tanto en nuestro proceso de implementación
Hay que mencionar que no fue necesario adentrar- del CMS el paradigma de trabajo cambió, ya que ya
se demasiado en actividades de personalización de no era necesario generar un tema visual o plantilla
código, es decir, en la modificación de la plataforma que se adecuara genéricamente fuera pantalla de
de publicación del lado cliente, como tampoco en la computador o teléfono móvil. Lo que había que ha-
del back-office del mantenedor, o parte administra- cer es simplemente determinar qué contenido mos-
tiva del sitio. trar en una u otra plataforma, sin tener que sacrificar
nada ni hacer modificaciones engorrosas.
El motivo de esto es que una vez que se empezó a in-
vestigar en las plantillas disponibles para este CMS, El plugin que se usó es Mobile Blog, adaptado para
nos encontramos con que existía una extensión, o Wordpress por el programador brasileño Lenon Mar-
plugin que permitía hacer una mantención paralela cel, que a su vez modificó funciones de una versión
de dos plataformas simultáneas, una para WEB tradi- más simple de Andy Moore.El nombre de esta fun-
cional y otra para dispositivos móviles, con la misma ción es “function mblog_detect_mobile_devi-
base de datos y con actualización simultánea. ce()”.

59 |
Pruebas con CMS
Básicamente este plugin hace que se detecte en la border-top-color: #FFCC00;
entrada al sitio el “User Agent”, discriminando la border-bottom-color: #FFCC00;
plataforma de navegación si es desde un computa- }
a{
dor o desde un dispositivo móvil. Si detecta que es text-decoration: none;
un móvil lo que hace es redireccionar a una versión color:#051481
}
del blog que tiene contenido reducido de la versión a:hover{
WEB, a la vez que entrega una hoja de estilo dedica- text-decoration:underline;
color:#fff;
da a estas plataformas. background-color: #353748;
}
La hoja de estilo está tratada con definiciones tipo- .page{
padding:0.3em;
gráficas escalables, en “ems”, lo que permite una }
presentación proporcional de las distintas jerarquías .ftlinks{
padding:0.3em;
de letras del dispositivo: background-color: #DCE0E7;
margin-top: 0.3em;
<style type=”text/css”> }
body{ ul{
background-color: #FFF; list-style-image:none;
font-family: Arial, Helvetica, sans-serif; list-style-position:outside;
color: #333; list-style-type:circle;
} }
.intro{ .bl{
padding:0.3em; font-weight:bold;
color:#fff; }
font-family: Georgia, “Times New Roman”, Ti- .sm{
mes, serif; font-size:smaller;
background-color: #424A59; }
border-bottom-width: 2px; </style>
border-bottom-color: #8693A8;
margin-bottom: 0.5em;
}
Otra característica importante es que no impor-
.naveg { ta el tamaño de las imágenes originales que se
padding:0.1em;
color:#000; muestran en la versión WEB, las redimensiona
text-align:center; a 150px por 150px, lo que es un verdadero alivio
background-color: #B5BDCA;
border-top-width: 2px; en el tiempo de descarga del sitio.
border-bottom-width: 2px;
border-top-style: solid; Las noticias o “posteos” se muestran sólo en for-

60 |
Pruebas con CMS
mato de títulos, por lo tanto no muestra las bajadas www.opera.com/mini/demo/), y a DotMobi

o párrafos introductorios. Esto es interesante en una Emulator (http://mtld.mobi/emulator.php), que tie-
primera pantalla de celular, ya que se accede inme- ne simulaciones de teléfonos Sony Ericcson Nokia,
diatamente a la totalidad de contenidos que los au- lo que es una muy buena herramienta de referencia.
tores quieren exhibir en portada y no más.
Problemas detectados: En estricto rigor no son pro-
Se muestra el navegador de secciones (Inicio, Cate- blemas, ya que las cosas que faltan no son atributos
gorías, Páginas y Archivo) al pie de la portada, de- imprescindibles para los requerimientos de publica-
jando entonces que no sea el menú lo que ocupe la ción del tipo de contenido tratado en esta investiga-
primera pantalla, sino que el contenido informativo. ción. La versión móvil de Wordpress con Mobile Blog
Tiene también, como última opción del menú, un instalado no muestra comentarios publicados en la
link por si se quiere ver la versión original del sitio. versión WEB, no muestra avatares o imágenes per-
Es útil si es que se quiere hacer una comparación, sonalizadas de autores o comentaristas, no permite
pero no es recomendable de hacer desde un teléfo- hacer comentarios, no permite tener acceso al panel
no móvil, ya que afecta demasiado el rendimiento administrativo ni la adición de otros temas (planti-
del equipo y la transferencia de datos se multiplica, llas) que pudieran potenciar esta versión. Tampoco
con todos los inconvenientes que esto significa. Este es posible tomar imágenes de su visualización en
menú se mantiene en todos los despliegues. pantallas móviles dado que no admite capturas de
emuladores, ya que los redirecciona inmediatamente
En definitiva nuestro trabajo, una vez que se imple- a la versión WEB del sitio.
mentó este plugin, fue hacer un poblamiento del si-
tio teniendo en consideración lo que es adecuado de Sin embargo después de tratar en laboratorio con
mostrarse en primera pantalla de móviles y modificar este mantenedor, nos da la sensación de que es al-
los estilos CSS de acuerdo a lo que es permitido de tamente personalizable, muy intuitivo en su pobla-
visualizar en esta plataforma, dedicando más tiempo miento y totalmente escalable, además que el desa-
a la implementación del sitio versión WEB con un rrollo de plantillas, extensiones y plugins de acceso
diseño más depurado. libre está en constante crecimiento, lo que lo hace
muy atractivo desde el punto de vista de mejoras
En la parte administrativa de este plugin vienen links futuras al producto.
a emuladores del navegador Opera Mini (http://

61 |
Conclusión

62 |
Conclusión
Un campo de oportunidades
Esta investigación ha permitido ofrecer una visión En Chile hay muchas oportunidades para los crea-
del estado del arte de la creación de contenidos para dores de contenidos, siendo éste un momento ideal
dispositivos móviles, así como dar a conocer las di- para ingresar a este mercado. El país ha mostrado
ficultades y desafíos en esta área. un crecimiento sostenido los últimos años y una
competitividad que podría verse aumentada con un
Una de las características que pudimos detectar es quinto operador de telefonía móvil en los próximos
el desconocimiento que existe en torno a la materia meses.
y la falta de estándares. Aunque el Consorcio de la
World Wide Web se preocupa de emanar sugeren- Creemos que este campo mantendrá su rápido de-
cias, éstas aún son muy elementales. sarrollo y que hay variadas posibilidades, tanto en el
desarrollo con XHTML y CSS como en Flash y el uso
La cantidad de dispositivos móviles, sistemas ope- de multimedia.
rativos y navegadores hace que resulte más difícil
adaptar los sitios web a todos los equipos.

63 |

Udd Informe Dispositivosmoviles 2009

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Udd Informe Dispositivosmoviles 2009

Transféré par

Droits d'auteur :

Formats disponibles

Desarrollo de interfases Integración y publicación de

para dispositivos móviles contenido periodístico en telefonía celular

Proyecto de Investigación de los profesores

Concepción, junio de 2009

FACULTAD Proyecto de Integración y publicación de

FACULTAD Proyecto de Integración y publicación de

FACULTAD Proyecto de Integración y publicación de

FACULTAD Proyecto de Integración y publicación de

Funcionamiento Finalmente, adquiere relevancia el modo de actua-

FACULTAD Proyecto de Integración y publicación de

FACULTAD Proyecto de Integración y publicación de

iPod Touch. Autor: BlackBerry 8100 Pearlh.

mundo, y por ser una muestra de lo que será común

1.2 Características de un dispositivo para ac-

Los teléfonos móviles presentan características que

FACULTAD Proyecto de Integración y publicación de

FACULTAD Proyecto de Integración y publicación de

Hay dos clases de teclados que se imponen en el

El Nokia N95 es representante del primer tipo y el

En cualquier caso, el ingreso de datos a un dispo-

FACULTAD Proyecto de Integración y publicación de

1.2.3 Almacenamiento de información 1.2.4 Sistema operativo

El almacenamiento de información en dispositivos Los teléfonos móviles actuales han evolucionado

Tarjeta Micro SD.

FACULTAD Proyecto de Integración y publicación de

FACULTAD Proyecto de Integración y publicación de

FACULTAD Proyecto de Integración y publicación de

FACULTAD Proyecto de Integración y publicación de

con tamaños proporcionales en lugar de fijos. El

- Uso de imágenes: “Sólo de referencia, para - Uso de multimedia: Mientras no se avance a

FACULTAD Proyecto de Integración y publicación de

esté basado en dicha tecnología y cuyo foco sea

En esta investigación se hicieron pruebas con tres CMS:

FACULTAD Proyecto de Integración y publicación de

Drupal (www.drupal.org): es el más básico,

Joomla (www.joomla.org): tiene hojas de es-

WordPress (www.wordpress.org): en compa-

FACULTAD Proyecto de Integración y publicación de

FACULTAD Proyecto de Integración y publicación de

La versión actual para teléfonos móviles de

FACULTAD Proyecto de Integración y publicación de

FACULTAD Proyecto de Integración y publicación de

la posibilidad de comunicarse telefónicamente), 2. Para BlackBerry se utilizó preferentemente el

FACULTAD Proyecto de Integración y publicación de

FACULTAD Proyecto de Integración y publicación de

el menú superior y el retorno al inicio al clickear el

En el caso de iPhone, se consideraron los siguientes

• La url de entrada a esta página es http://www.

• Una fila superior para el menú principal de

FACULTAD Proyecto de Integración y publicación de

FACULTAD Proyecto de Integración y publicación de

• A continuación se muestran dos noticias con • Abajo hay indicadores eco-

• Bajo las noticias de último minuto aparece un

FACULTAD Proyecto de Integración y publicación de

los usuarios tienen posibilidad de elegir entre 50

FACULTAD Proyecto de Integración y publicación de

nes originales (jpg a color) tienen un tamaño de

Al avanzar con las flechas hacia adelante o atrás

El tamaño original de cada imagen en la versión

FACULTAD Proyecto de Integración y publicación de

• En la parte inferior de la portada aparecen los

FACULTAD Proyecto de Integración y publicación de

versión 8100 Pearl, el espacio útil de pantalla, sin