Web Móvil - Teketenteketen.com/wp-content/uploads/2008/12/mobile-web-enpresadigital… · WAP 1.0 = WML Wireless Markup Language. La pila de protocolos de WAP 1.0 no es compatible

2008 (cc) Elurnet Informatika Zerbitzuak S.L <[email protected]> 1

Web M

óvil

Web Móvil


Web M

óvil

De que va (y no) el curso

Repetir la información del curso nunca viene mal.

●Estaría bien tener ciertos conocimientos de XHTML y CSS.●No es necesario conocer el entorno móvil, esto es lo que vamos a intentar a hacer.


Web M

óvil

Va de...

● Conocer las herramientas para crear una web para ser vista por dispositivos móviles.● Conocer las especificidades del entorno móvil.● Conocer estadísticas e información sobre la penetración de los móviles.● Conocer los diferentes métodos de diseño para el entorno móvil.● Conocer los problemas, las dificultades, las ventajas, las aportaciones que hace el entorno móvil.


Web M

óvilNo va de...

● Aprender a programar utilizando J2ME o C++ aplicaciones web.● Hacer nuestra web para un dispositivo en concreto.● Visualizar nuestra web de manera idéntica para cualquier dispositivo móvil.● Adaptar todo el contenido de nuestra web para el entorno móvil.● Que nuestra web tenga idénticas características funcionales que podemos tener accediendo mediante un ordenador.


Web M

óvilEstado actual

La penetración de la tecnología móvil es desigual.

Las capacidades de los dispositivos son desiguales.

La penetración de los planes de datos y las velocidades son desiguales.

Dispositivos con tecnologías no estandarizadas.

¡Estandarización o Caos!


Web M

óvil

Penetración y datos en el mundo

La penetración de la tecnología móvil es diferente pero es mayor que otras tecnologías anteriores.

En los países empobrecidos la penetración de las tecnologías móviles es mayor que la comunicación

telefonía fija, por ejemplo.

Según algunas informaciones los usuarios de telefonía móvil en el mundo serán 4000 millones. Si lo

comparamos con los 6700 millones de habitantes que calcula la ONU. El 59% de la población mundial.

http://www.pcworld.com/article/127820/mobile_subscribers_to_reach_26b_this_year.html


Web M

óvil

Penetración y datos en el mundo

Japón y Korea son los que más usuarios tienen con planes de datos. Aunque es EUA es el que genera más

beneficio.

Brasil, Holanda y República Checa tienen un volumen importante de negocio.

EUA obtiene un 5060% de beneficios en servicios de datos (no SMS). Japón y Korea un 7075%.

http://chetansharma.com/MobilePredictions2008.htm

http://chetansharma.com/MobilePredictions2008.htm


Web M

óvil

Penetración y dispositivos 3g

En Europa en general y en Eukal Herria en particular tenemos una penetración superior al 100% de móviles.

¡Ciudadano = Más de un móvil!

En cuanto a dispositivos con capacidades 3GEstado Español = 37,2% (12,640 millones)

República Francesa = 17,1% (7,958 millones)

EUA = 28,4% (64,207 millones)http://www.slashphone.com/comscoreushasmore3gdevicesthanwesterneurope051516

http://www.slashphone.com/comscore-us-has-more-3g-devices-than-western-europe-051516


Web M

óvil

Datos sobre planes de datos cercanosEl 19,5% de los españoles usa la banda ancha móvil, frente

al 6,9% de media comunitaria (informe Comisión Europea julio 2008)

Globalmente, Dinamarca y los Países Bajos tienen una penetración del 35%.

Nueve países de la UE (Dinamarca, los Países Bajos, Suecia, Finlandia, el Reino Unido, Luxemburgo, Bélgica, Francia y Alemania) superan a los Estados Unidos, que, según las estadísticas de la OCDE publicadas en junio de

2008, se sitúan en un 25%.http://sociedaddelainformacion.wordpress.com/2008/11/29/espanaalacabezadelaunioneuropeaenpenetraciondeinternetmovildealtavelocidad/

http://sociedaddelainformacion.wordpress.com/2008/11/29/espana-a-la-cabeza-de-la-union-europea-en-penetracion-de-internet-movil-de-alta-velocidad/


Web M

óvil

¿Qué es la Web Móvil?

Una Web en la que el usuario puede acceder a la información desde cualquier lugar, independientemente

del tipo de dispositivo que utilice para ello.

El W3C, ha puesto en marcha la Iniciativa Web Móvil que busca resolver los problemas de interoperabilidad y

usabilidad que actualmente dificultan el acceso a la Web desde dispositivos móviles y hacer posible uno de

los objetivos principales del W3C que consiste en alcanzar una Web única.

http://www.w3.org/Mobile/


Web M

óvil

Conexión a internet

GPRS

3G o 3,5G

4G

Wifi

Wimax

http://es.wikipedia.org/wiki/GPRS

http://es.wikipedia.org/wiki/3G

http://es.wikipedia.org/wiki/4G

http://es.wikipedia.org/wiki/Wifi

http://es.wikipedia.org/wiki/Wimax


Web M

óvil

Dispositivos - Tipos

Sistema operativoSymbian, Android, Windows Mobile ...

Pantalla120x120, 320x240 ..., gama de colores

FormatoSmartphone, estilo concha, tapa deslizable, normales.


Web M

óvil

Dispositivos – Interfaces

Teclado normal

Teclado QUERTY

Pantalla táctil con lápiz

Pantalla táctil manual

Joystick

Teclados externos


Web M

óvil

Dispositivos + funciones

HablarSMS y MMS

Internet GPRS, 3G o WifiCámaraRadioJuegos

Conexión con bluetoothGPS

Vídeo conferenciaReproducción de audio y vídeo


Web M

óvil

El contexto móvil

Cuando utilizamos un dispositivo móvil para acceder a Internet el contexto en el que la acción tiene lugar tiene

vital importancia.

ContextoEl lugar, las condiciones, el momento...

ContenidoRelevancia, interes, exactitud, facilidad...

ComponentesCapacidades del dispositivo, conectividad...


Web M

óvil

Ordenador VS disp. móvil

1516 Ejemplo cine


Web M

óvilDesventajas

Pequeño tamaño de pantalla.

Interfaces de acceso distintos y diversos.

Tecnologías importantes no soportadas en muchas ocasiones. Imágenes GIF por ejemplo.

Diferentes navegadores, con distintas maneras de mostrar el contenido.

Miles de dispositivos distintos para los que hay que asegurar que tu web funciona correctamente.


Web M

óvil

Ventajas

El usuario accede a la información en cualquier momento, en cualquier lugar y cuando lo necesita.

Los dispositivos móviles conocen su localización por lo que se puede tomar esta información en cuenta.

Los dispositivos móviles tienen la capacidad de hacer llamadas de voz o enviar mensajes, para llevar a cabo

acciones concretas.

Más dispositivos móviles que ordenadores en el mundo


Web M

óvilEstándares

WAP 1.0 = WMLWireless Markup Language. La pila de protocolos de WAP 1.0 no es compatible directamente con la de

Internet. Esto exige la presencia de un nodo pasarela para hacer de intermediario en la comunicación entre un terminal WAP y un servidor de contenidos WAP

residente en Internet.WAP 2.0 =XHTMLMP

Esta versión es una reingeniería de WAP que utiliza XHTMLMP (XHTML Mobile Profile), un

subconjunto de XHTML que incluye el XHTML básico, y contempla el uso de WCSS (WAP CSS).

*

http://es.wikipedia.org/w/index.php?title=XHTML-MP&action=edit&redlink=1

http://es.wikipedia.org/wiki/XHTML

http://es.wikipedia.org/wiki/XHTML

http://es.wikipedia.org/w/index.php?title=WCSS&action=edit&redlink=1

http://es.wikipedia.org/wiki/WAP

http://es.wikipedia.org/wiki/CSS


Web M

óvilEmuladores

dotMobi Online Emulator

Nokia Browser Simulator

Openwave Phone Simulator

Opera Mini Simulator

BlackBerry Simulator

Yospace SmartPhone Emulator

Mobilrunner

http://mtld.mobi/emulator.php

http://www.forum.nokia.com/info/sw.nokia.com/id/db2c69a2-4066-46ff-81c4-caac8872a7c5/NMB40_install.zip.html

http://developer.openwave.com/dvl/member/downloadManager.htm?softwareId=23

http://www.opera.com/products/mobile/operamini/demo.dml

http://www.blackberry.com/developers/downloads/simulators/index.shtml

http://www.yospace.com/spedemo.html

http://mobilerunner.wap3.net/emu_wap3/p/wap3/


Web M

óvil

Ejemploshttp://mobile.wikipedia.org

http://m.youtube.comhttp://cuatro.mobi/

http://www.google.com/mobile/mail/index.htmlhttp://www.google.com/mobile/news/index.html

http://www.google.com/gmmhttp://m.flickr.com

http://www.bloglines.com/mobilehttp://blogsearch.google.com/xhtml

http://google.com/xhtmlhttp://es.m.yahoo.com/

[más]

http://mobile.wikipedia.org/

http://m.youtube.com/

http://cuatro.mobi/

http://www.google.com/mobile/mail/index.html

http://www.google.com/mobile/news/index.html

http://www.google.com/gmm

http://m.flickr.com/

http://www.bloglines.com/mobile

http://blogsearch.google.com/xhtml

http://google.com/xhtml

http://es.m.yahoo.com/

http://www.jtcdesign.com/classroom/mobileweb/rockstars.html


Web M

óvil

Ejemplos


Web M

óvil

Crear una Web

Se pueden utilizar entornos de programación específicos como por ejemplo J2ME, Symbian o Adobe

Flash Lite.

Pero en este curso el objetivo es generar una web...

Los métodos más comunes son utilizar XHTML o WML. Por otra parte formatos como el RSS o los

microformatos son cada vez más utilizados.

http://microformats.org/


Web M

óvil

Evolución de los formatos

http://en.wikipedia.org/wiki/Image:Mobile_Web_Standards_Evolution_Vector.svg

http://en.wikipedia.org/wiki/Image:Mobile_Web_Standards_Evolution_Vector.svg


Web M

óvil

WML vs XHTML-MP

Después de que WAP1.0 (WML) quedará casi en desuso nuestra opción es utilizar:

WAP 2.0 (XHTMLMP+)


Web M

óvilXHMTL-MP

Es la suma de XHTMLBasic (junto con algunos cambios) y WAP CSS (WCSS).

Ha sido adoptado por la mayoría de fabricantes de dispositivos móviles.

Lista de etiquetas

http://www.openmobilealliance.org/tech/affiliates/wap/wap-277-xhtmlmp-20011029-a.p

http://htmllint.itc.keio.ac.jp/htmllint/tagslist.cgi?HTMLVersion=XHTML-MP


Web M

óvil

Metodos

1. No hacer nada.2. Quitar formato.

3. Diseño basado en CSS.4. Crear un web móvil.


Web M

óvil

Metodos y valor


Web M

óvil

1. No hacer nada (SSR)

Este método consiste en dejar todo el trabajo de la transformación de la web para el móvil al navegador.

Muchos de los navegadores actuales como Opera y su Small Screen Rendering, los iPhone y los nuevos

navegadores de Nokia por ejemplo.

Algunos otros simplemente quitan todo los estilos CSS y muestran el contenido resultante.


Web M

óvil

Cuando utilizarloNo esperas que muchos usuarios entren a tu web

mediante un dispositivo móvil.

Tus usuarios utilizan Smartphones o dispositivos con pantallas grandes y navegadores preparados.

Tus usuarios van a querer utilizar tu web como la utilizan desde el ordenador. Sin ninguna característica

específica para el entorno móvil.

No tienes tiempo o capacidad para los otros métodos


Web M

óvil

Cuando no utilizarlo

Pretendes llegar al máximo número de clientes potenciales.

Los usuarios que accedan a tu web necesitan hacer una acción concreta, que tienen que hacer rápido.

Pretendes dar la mejor experiencia móvil a tus usuarios.


Web M

óvil

2. Quitar formato

Este método consiste en quitar complejidad, estilo y reducir las imágenes para que los navegadores móviles

puedan visualizar esa web de manera más simple.

Hay herramientas que te permiten hacer esto de manera sencilla incluso automatizada http://iyhy.com,

http://skweezer.net, http://mowser.com .

Utilizando estas librerias de PHP puedes hacer tu web accesible con este método

http://iyhy.com/

http://skweezer.net/

http://mowser.com/

http://www.mikeindustries.com/blog/archive/2005/07/make-your-site-mobile-friendly


Web M

óvil

Cuando utilizarlo

Quieres una web accesible mediante dispositivos móviles rápido y fácil.

Quieres cubrir la mayor parte de navegadores.

Tu sitio es sobre todo texto y tiene una buena estructura de navegación.


Web M

óvil


La web necesita un buen diseño de interface. No quieres que los usuarios se muevan en páginas llenas de

texto.

La mayor parte del contenido no es interesante para el usuario que accede mediante un dispositivo móvil.


Web M

óvil

3. Diseño basado en CSS Este método trata de crear una web de manera correcta en XHTML. Con una estructura correcta y con un CSS

para el estilo normal y otro para los dispositivos móviles.

Se puede añadir un nuevo CSS (se puede utilizar WCSS) mediante esta sentencia

<link rel=”stylesheet” type=”text/css” media=”handheld” href=”mobile.css”>


Web M

óvil

Cuando utilizarlo

Interesa tener la misma estructura para los diferentes dispositivos sólo cambiando el estilo.

Un método simple y efectivo para mostrar el contenido en los dispositivos móviles.

Tienes mucho contenido formateado utilizando CSS y quieres mostrar el contenido de manera rápida para

dispositivos móviles


Web M

óvil


No quieres que tus usuarios tengan que descargarse todas las imágenes de la web.

Tus usuarios no utilizan un navegador con capacidad para leer CSS.

La web actual utiliza tablas y no CSS para formatear la web.


Web M

óvil

4. Crear una web móvilEn este método no sólo se mira el diseño sino que

también toma importancia la relevancia del contenido y el contexto móvil en dónde el usuario llevará a cabo la

acción.

También podríamos ir más lejos y intentar adaptar nuestra web a diferentes dispositivos.

Esta opción es la mejor pero requiere más trabajo. Otra manera de hacerlo de manera más fácil es buscar el

MCD (Mínimo Común Denominador) de tus usuarios.


Web M

óvil

Cuando utilizarlo Queremos dar la mejor experiencia de uso al usuario.

Queremos utilizar funciones específicas como hacer una llamada de teléfono.

Muchos usuarios van a entrar a tu web para realizar una función concreta y para cerciorarnos de que la harán

bien y rápido.

Crear una web con poco peso para que sea más rápida.

Tenemos recursos y tiempo para utilizar este metodo.


Web M

óvil


La mayoría de tus usuarios utilizan tu web por el ordenador.

No hay una verdadera necesidad para acceder a tu web desde un dispositivo móvil.

Queremos evitarnos dolores de cabeza, la curva de aprendizaje y todo el proceso que este método necesita.


Web M

óvil

Nuestro métodoLos dos tres primeros métodos son casi triviales para cualquier diseñador web. En cambio el último tiene

especificidades interesantes que necesitan ser conocidas.

El 4. método es nuestro elegido

“Hemos decidido adaptar nuestra web, quizás no toda sino la parte que consideremos más relevante para el

entorno móvil. Ahora tenemos que pensar en la estructura, el flujo de datos, el diseño cumpliendo los

estándares y pensando en el usuario”


Web M

óvilPaso a paso

1. Identificar los usuarios.2. Define las acciones.

3. Define los dispositivos y las capacidades.4. Haz un prototipo en papel.

5. Prueba con usuarios verdaderos.6. Haz un prototipo en XHTML y prueba de nuevo.


Web M

óvil

Trucos● Elimina todo lo que se pueda eliminar.● Piensa en los usuarios y sus acciones.

● Rápido y efectivo.● Máximo 10 enlaces por página.

● La navegación debe de ser mediante menús contextuales. No más de 5 niveles.

● Lo más importante siempre lo primero.● Da la posibilidad siempre de volver a la portada y en

el pie de página la posibilidad de volver atrás.● Parte los largos formularios en procesos de paso a

paso.


Web M

óvil

Preparando un entorno de programaciónUn editor XHTML normal.

Un editor de CSS sería útil

Un servidor local para acceder a las web si estas están en un lenguaje de programación como PHP, ASP, JSP,

Python etc.

Con un navegador puedes probar las página, pero estaría bien que utilizaras emuladores y luego

dispositivos reales.


Web M

óvil

Alojar nuestra página

Este es un paso trivial si tenemos ya un hosting lo podríamos hacer allí mismo. En caso que no lo

tuviéramos tendríamos que contratar o disponer de uno.

El dominio a usar es aconsejable que sea diferente al de la página original si esta existiera. Existen los dominios

.mobi específicos para este tipo de aplicaciones.

Si no disponemos de un .mobi podríamos optar por un subdominio http://m.dominio.com y redireccionar

desde la web original.

http://m.dominio.com/


Web M

óvil

Estructura del sitio

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>XHTML MP Tutorial</title> </head>

<body> <p>Hello world. Welcome to our XHTML MP tutorial.</p> </body></html>


Web M

óvil

Metadatos útiles

Se insertan en el encabezado

La página se refresca y no se cachea. Interesante para páginas con información en tiempo real.

<meta http-equiv="Cache-Control" content="no-cache"/> <meta http-equiv="refresh" content="15"/>

La página se redirigirá a otra en 15 segundos <meta http-equiv="refresh" content="15;URL=indexeje.xhtml”>


Web M

óvilComentarios

<! Comentario en XHTMLMP >

<! Esto es un comentarioen varias líneas >


Web M

óvil

Saltos de línea y línea separadora

Saltos de línea<br />

Línea separadora (no entre <p>)<hr />


Web M

óvilEncabezados

Diferentes niveles de 16. Algunos navegadores no tienen muchos estilos predefinidos por lo que algunos

de estos se parecerán bastante.

<h1>Level 1 Heading</h1> <h2>Level 2 Heading</h2> <h3>Level 3 Heading</h3> <h4>Level 4 Heading</h4> <h5>Level 5 Heading</h5> <h6>Level 6 Heading</h6>


Web M

óvil

Estilos predefinidosHay diferentes estilos predefinidos b (negrita), i

(cursiva), small (reduce la fuente), big (agranda la fuente), em (emfasis), strong (importante).

Algunos navegadores mostrarán em y strong iguales y otros diferente depende del navegador. Esto se puede

retocar con los CSS. <b>Bold</b><br/> <i>Italic</i><br/> <b><i>Bold italic</i></b><br/> <small>Small</small><br/> <big>Big</big><br/> <em>Emphasis</em><br/> <strong>Strong</strong>


Web M

óvil

Listas

Las listas pueden ser ordenadas (ol) o desordenadas (ul) <ul> <li>Part 1 XHTML MP Introduction</li> <li>Part 2 Development of Wireless Markup Languages</li> <li>Part 3 Advantages of XHTML MP</li> <li>Part 4 WML Features Lost in XHTML MP</li> </ul>


Web M

óvil

Imágenes

Los dispositivos actuales soportan normalmente GIF, GIFs animados, JPG o PNG. Algunos de ellos sólo un

subgrupo de estos.

Es recomendable utilizar imágenes de tamaño pequeño el especificar un tamaño más pequeño utilizando height

y width no ayuda mucho.

<img src="smile.gif" alt="Smile" height="62" width="60" />


Web M

óvil

TablasLos elementos de una tabla tienen que estar dentro del elemento <table> cada información puede estar dentro de una línea <tr> y la información de la celda dentro de

<td>. También se puede utilizar <th>. <table> <tr> <td>Cell A</td> <td>Cell B</td> <td>Cell C</td> </tr> <tr> <td>Cell D</td> <td>Cell E</td> <td rowspan="2">Cell F</td> </tr> </table>


Web M

óvil

EnlacesEnlace a otra página

<a href=”otraweb.htm”>otra web</a>

Enlace a una misma parte de la página <p><a id="top">Table of Contents:</a></p> <p>Contenido de la web</p> <p>...</p> <p><a href="#top">Back to top</a></p>

Teclas de acceso <a accesskey="1" href="otraweb.htm">otraweb</a>

Telefono como el email <a href=”tel:+34666666666”>llama</a>


Web M

óvil

Selects

Los selects pueden ser de opción única o multiple y pueden tener opciones predefinidas.

<select name="selectionList" multiple="multiple"> <option value="opcion A" selected=”selected”>Parte A</option> <option value="opcion B">Parte B</option> <option value="opcion C">Parte C</option></select>

Los selects se pueden agrupar<form method="get" action="procesa.php”> <p><select name="selectionList"> <optgroup label="Grupo 1"> <option value="opcion A">Parte A</option> <option value="opcion B">Parte B</option> </optgroup> <optgroup label="Grupo 2"> <option value="opcion D">Parte D</option> <option value="opcion F">Parte F</option> </optgroup> </select></p></form>


Web M

óvil

Tipos de inputs

Text<input type="text" name="myTextField" maxlength="16"

value="Text default"/>

Password<input type="password" name="contraseña"/>

Checkbox (más de uno seleccionable)<input type="checkbox" name=”opcion1” value="1"

checked=”checked”/>

Radio button (sólo uno seleccionable)<input type="radio" name=”opcion1” value="1"

checked=”checked” />

Hidden<input type="hidden" name="temp_id" value="123456"/>


Web M

óvil

Envío de formularios<form method="get" action="procesa.php"> <p> Username:<br/> <input name="username"/><br/> Password:<br/> <input type="password" name="password"/><br/> Gender:<br/> <input type="radio" name="gender" value="m"/>Male <input type="radio" name="gender" value="f"/>Female<br/> Country:<br/> <select name="country"> <option value="ca">Canada</option> <option value="cn">China</option> <option value="fr">France</option> <option value="de">Germany</option> </select><br/> Which part of our XHTML MP tutorial do you like?<br/> <input type="checkbox" name="tutorial_part" value="1"/>Part 1 <input type="checkbox" name="tutorial_part" value="2"/>Part 2 <input type="checkbox" name="tutorial_part" value="3"/>Part 3 <input type="checkbox" name="tutorial_part" value="4"/>Part 4 <input type="hidden" name="temp_id" value="123456"/> </p> <hr/> <p> <input type="submit"/> <input type="reset"/> </p> </form>


Web M

óvilResumiendo


Web M

óvil

Diseño

Hacer un diseño para un móvil o para una web que se va a visualizar mediante el navegador no es lo mismo.

Vamos a utilizar eso sí un subgrupo de CSS llamado WCSS para crear el diseño.

Vamos a ver los diferentes opciones para las diferentes pantallas.

Las mejores maneras de diseñar una plantilla para el entorno móvil.


Web M

óvil

Tamaños de pantalla


Web M

óvil

Colores, Imagenes, Tamaño etc.

Por lo menos espera 256 colores en el dispositivo.

GIF y JPG se consideran un estándar universal.

Incluyendo WCSS, XHTML MP y las imágenes no deben de sobrepasar los 30K.

Hay que dar alternativas correctas a las imágenes.


Web M

óvil

Plantillas de diseño


Web M

óvil

WCSS

WCSS es un subconjunto de CSS 2.1 por lo que es familiar para muchos diseñadores.

Hay que recordar que los navegadores cargan la página y luego el estilo, por lo que, es interesante que la

página en si tenga cierta estructura.

Un tutorial muy interesante sobre WCSS

http://www.developershome.com/wap/wcss/


Web M

óvil

Diferentes maneras de llamar a la hoja de estilo

Lo mejor es utilizar hojas de estilo externas y utilizar los elementos inline para sobrescribir lo necesario.

<link rel="stylesheet" href="site.css" type="text/css" media="handheld">

<style type="text/css" media="handheld">...</style>

<style type="text/css"> @media handheld { ... }

</style>

<style type="text/css"> @import url(...) handheld;

</style>

<p style="align: left">Some text</p>


Web M

óvil

Los formularios no se visualizan igual


Web M

óvil

Delimitando los inputs con WCSS

Con -wap-input-required especificamos si el campo es necesario o no.

Con -wap-input-format especificamos que formato deben de tener los campos (text, password o textarea).


Web M

óvil

Delimitando los inputs con WCSS ejemplo

<style>/* Deberia de estar en un CSS externo para total compatibilidad */.zip {-wap-input-required: true;-wap-input-format: "NNNNN"}</style>Zip: <input type="text" name="zip" class="zip" value="<?php echo$data["zip"]; ?>"/>


Web M

óvil

Efecto marqueeEl efecto marquee consiste en hacer desplazar por la

pantalla una imagen como si fuera un rotulo.

<style>/* Deberia de estar en un CSS externo para total compatibilidad */.offer { display: -wap-marquee; -wap-marquee-dir: rtl; -wap-marquee-style: slide; -wap-marquee-loop: 5; -wap-marquee-speed: slow}</style><div class="offer"><img src="assets/pep_spice_offer.jpg" alt="Pepperoni Spice at just $7!" width="200" height="100" /></div>


Web M

óvil

Detección de dispositivosUna de las opciones es la de generar una web única para dispositivos móviles por lo que necesitamos

detectar nada, la acción queda en manos del usuario.

La segunda opción es detectar el useragent que envía el navegador y si es un useragent correspondiente a un

móvil, redirigir al usuario a una web capaz de mostrarse en dispositivos móviles

Podemos optimizar el contenido específicamente para ciertos dispositivos detectando estos mediante WURFL

o scripts como Detect Mobile Browsers

http://wurfl.sourceforge.net/

http://detectmobilebrowsers.mobi/


Web M

óvil

Otras herramientas

FeedburnerFeeburner convierte cualquier página con RSS en una página capaz de ser mostrada en dispositivos móviles.

Feed2mobileHace básicamente lo mismo y además nos da un código

bidimensional para acceder fácilmente.

http://www.feedburner.com/

http://feed2mobile.kaywa.com/


Web M

óvil

Otras herramientas

Los CMS actuales están diseñados más o menos siguiendo los estándares XHTML, por lo que muchos

de ellos se pueden visualizar más o menos bien en algunos dispositivos.

Pero hay CMSs que además tienen herramientas especificas para convertir el contenido al entorno

móvil. Mobile Web Toolkit.

http://www.beeweb.com/


Web M

óvil

Otras herramientas

MyMobileWeb Es una herramienta basada en Java para generar página compatibles con la iniciativa .mobi.

Tiene incluso un plugin para eclipse.

http://forge.morfeo-project.org/


Web M

óvilValidación

ready.mobiEs un sitio donde poder validar la compatibilidad de tu sitio, verlo en un emulador y visualizar los errores y las

posibles soluciones a los problemas que aparecen.

http://ready.mobi/


Web M

óvil

Mejores prácticas

W3C guía básica de mejores prácticas http://www.w3.org/TR/mobilebp

Validador de mejores prácticas http://validator.w3.org/mobile

http://www.passani.it/gap/http://my.opera.com/community/dev/device/

http://www.w3.org/TR/mobile-bp

http://validator.w3.org/mobile

http://www.passani.it/gap/

http://my.opera.com/community/dev/device/


Web M

óvil

ChecklistLa checklist que se os proporciona es una herramienta interesante para la generación de páginas web móviles.

La información está sacada de este libro.

http://www.packtpub.com/mobile-web-development/book


Web M

óvilMultimedia y

Aplicaciones RIA

Además de las páginas XHTML cada vez es más común ver aplicaciones más avanzadas y formatos de

presentación dentro de los móviles.


Web M

óvilSMS y MMS

Se pueden enviar SMSs y MMSs para alguna acción necesaria ya que es una de las capacidades más

utilizada y específicas de los móviles.

Para ello lo mejor puede ser elegir una pasarela de envío de mensajes.

Una de las más utilizadas es clickatell.com pero puedes mirar más antes de elegir

http://developershome.com/sms/smsGatewayProvComp.asp

http://clickatell.com/

http://developershome.com/sms/smsGatewayProvComp.asp


Web M

óvil

PagoTambién se pueden incluir sistemas de pago como

PayPal.

PayPal nos aporta herramientas para integrar en nuestras aplicaciones para poder hacer el pago de

manera sencilla.

https://cms.paypal.com/us/cgibin/?cmd=_rendercontent&content_ID=developer/library_download_sdks

Hay otros sistemas de pago y temas de seguridad importantes. Esto no esta del todo establecido en

nuestro alrededor.

http://paypal.com/

https://cms.paypal.com/us/cgi-bin/?cmd=_render-content&content_ID=developer/library_download_sdks


Web M

óvil

SVG

Scalable Vectro Graphics (SVG) es un lenguaje para describir gráficos vectoriales bidimensionales, tanto

estáticos como animados (estos últimos con ayuda de SMIL), en XML.

Cada vez son más los dispositivos que soportan estos formatos en sus sabores Basic y Tiny (reducido).

http://www.w3.org/Graphics/SVG


Web M

óvil

AJAXAJAX, acrónimo de Asynchronous JavaScript And

XML (JavaScript asíncrono y XML). Estas aplicaciones se ejecutan en el cliente, es decir, en el navegador de los usuarios mientras se mantiene la

comunicación asíncrona con el servidor en segundo plano. De esta forma es posible realizar cambios sobre

las páginas sin necesidad de recargarlas, lo que significa aumentar la interactividad, velocidad y

usabilidad en las aplicaciones.

No todos los dispositivos lo soportan pero ya existen librerías para entornos móviles como Frost.

http://www.pavingways.com/frost-ajax-library


Web M

óvil

Java MEJava ME o plataforma Java, edición Micro (en inglés

Java Platform, Micro Edition), anteriormente conocida como Java 2 Platform, Micro Edition o J2ME, es una

colección de APIs de Java para el desarrollo de software para dispositivos de recursos limitados, como PDA, teléfonos móviles y otros aparatos de consumo.

Una página de referenciahttp://java.sun.com/javame/reference

Un entorno para Java MEhttp://www.j2mepolish.org

http://java.sun.com/javame

http://java.sun.com/javame/reference

http://www.j2mepolish.org/


Web M

óvil

Flash lite

Macromedia Flash Lite es una versión especial de Adobe Flash. Fue creada para ser usada

específicamente en teléfonos móviles y otros dispositivos.

http://www.macromedia.com/software/flashlite/


Web M

óvil

Promoción y .mobi

Es importante mostrar de manera clara que nuestra web es capaz de mostrarse mediante dispositivos móviles.

Para eso lo mejor es crear una nueva web o la adaptación de la web con otro dominio.

La mejor opción es utilizar un .mobi pero si no disponemos de esta oportunidad podemos utilizar

http://m.dominio.com por ejemplo

http://mtld.mobi/

http://m.dominio.com/


Web M

óvilPublicidadLa publicidad en los móviles es cada vez mayor y es

considerada una de las más interesantes.

Por otra parte existe por parte de los usuarios bastante rechazo a este tipo de publicidad, que incluso pudiera

superar el 75%.

Google http://services.google.com/adwords/mobile_adsy otras empresa como http://www.admob.com ya están

ofreciendo publicidad en dispositivos móviles.

Un estudio eEspaña2008 interesante.

http://services.google.com/adwords/mobile_ads

http://www.admob.com/

http://www.fundacionorange.es/areas/25_publicaciones/e2008.pdf


Web M

óvil

Widgets

Los widgets son pequeñas aplicaciones que hacen una acción en concreto.

Generalmente utiliza XHTML, CSS o AJAX.

Se han hecho más conocidas con el iPhone.

Ya existen diferentes herramientas para la creación y la utilización de widgets en los dispositivos móviles.

Widsets o Plusmo por ejemplo.

http://widsets.com/

http://plusmo.com/


Web M

óvil

FuturoLo que vemos actualmente en los móviles es el inicio. La punta del iceberg de una sociedad hiperconectada.

Donde Internet estará en todos los sitios, las herramientas se comunicarán entre si y la web tenga

más semántica.


Web M

óvil

El móvil para crearLos móviles con más funciones poseen una cámara, la

posibilidad de crear vídeo, la posibilidad de conectarnos con bluetooth a otros dispositivos etc.

Las posibilidades que ofrecen estas herramientas van a ser utilizadas de verdad muy pronto. Ya están siendo utilizadas pero se utilizarán de manera más efectiva.

http://zonetag.research.yahoo.com/


Web M

óvil

El móvil como interface

El móvil ya está siendo utilizado como interface de interconexión entre Internet y el mundo físico.

http://reader.kaywa.com/


Web M

óvil

La web ubicuaWeb ubicua una web donde exista una interacción que

incluya el espacio y el contexto, una Web que “comprenda” y que esté “en todos lados”.

Por lo tanto la web móvil es el inicio de esta web ubicua.


Web M

óvil

Realidad Aumentada (AR)La realidad aumentada consiste en un conjunto de dispositivos que añaden información virtual a la

información física ya existente. Esta es la principal diferencia con la realidad virtual, puesto que no

sustituye la realidad física, sino que sobreimprime los datos informáticos al mundo real.

http://es.wikipedia.org/wiki/Realidad_aumentada

http://es.youtube.com/watch?v=BUOHfVXkUaI


Web M

óvil

La Web semántica

La Web semántica (del inglés semantic web) se basa en la idea de añadir metadatos semánticos a la World Wide Web. Esas informaciones adicionales —que

describen el contenido, el significado y la relación de los datos— se deben proporcionar de manera formal, para que así sea posible evaluarlas automáticamente

por máquinas de procesamiento. El objetivo es mejorar Internet ampliando la interoperabilidad entre los

sistemas informáticos y reducir la necesaria mediación de operadores humanos.


Web M

óvil

El Internet de las cosas

Se trata de que el actual Internet salte del universo en que se mueve al de los objetos, identificados y capaces

de conectarse e intercambiar información.

Ahora se muestra en forma de juguete


Web M

óvil

Enlaces e informaciónEnlaces

http://bildu.net/bookmarks/teketen/mobileweb

ContactoGorka Julio

[email protected]

http://bildu.net/bookmarks/teketen/mobileweb

mailto:[email protected]

http://www.elurnet.net/


Web M

óvil

Licencia* de la presentación

Eres libre de● Copiar, distribuir y comunicar públicamente la obra● Hacer obras derivadas

Bajo las condiciones siguientes:● Reconocimiento. Debe reconocer los créditos de la obra de la manera especificada por el autor o el licenciador (pero no de una manera que sugiera que tiene su apoyo o apoyan el uso que hace de su obra).● Compartir bajo la misma licencia. Si transforma o modifica esta obra para crear una obra derivada, sólo puede distribuir la obra resultante bajo la misma licencia, una de similar o una de compatible.

* Las citas, imágenes, logotipos y gráficos son están sacadas de las fuentes citada y su propiedad es la de su autor.

http://creativecommons.org/licenses/by-sa/3.0/deed.es

Documents

Web Móvil - Teketenteketen.com/wp-content/uploads/2008/12/mobile-web-enpresadigital… · WAP 1.0 = WML Wireless Markup Language. La pila de protocolos de WAP 1.0 no es compatible