Mobile Web

57
Una visión global

description

A \"state of art\" of the mobile web.

Transcript of Mobile Web

Page 1: Mobile Web

Una visión global

Page 2: Mobile Web
Page 3: Mobile Web
Page 4: Mobile Web
Page 5: Mobile Web

Webs diseñadas para ser visualizadas en dispositivos móviles

Page 6: Mobile Web
Page 7: Mobile Web

The Net Size guide 2008

Page 8: Mobile Web
Page 9: Mobile Web

700.000 conexiones diarias a Vodafone Live!

5.000.000 de páginas vistas al día5.000.000 de descargas en 2006

Page 10: Mobile Web
Page 11: Mobile Web

¿Por qué?¿Por qué?

Page 12: Mobile Web
Page 13: Mobile Web

Un vistazo al mundo real Hay muchos terminales muy

heterogéneos “Internet móvil” está condenado a

triunfar en cierta medida Hay un cierto jaleo de lenguajes de

marcado Japón – Pocos terminales similares Europa – Muchos terminales dispares

Page 14: Mobile Web
Page 15: Mobile Web

En movimiento Multitarea Diferentes situaciones sociales Atención difusa Comodidad Conectado

Page 16: Mobile Web
Page 17: Mobile Web
Page 18: Mobile Web

Location Based Services Servicios que aprovechan la capacidad

para localizar el dispositivo (GPS o sin GPS)

Page 19: Mobile Web
Page 20: Mobile Web

Pocas categorías No más de 10 enlaces Árboles no muy profundos Priorización y personalización

Page 21: Mobile Web

Usabilidad ClickStream

Ley 77 (IT Deusto) – 80% del contenido a menos de tres saltos

Personalización Equilibrio entre compatibilidad y

experiencia de usuario Adaptación

Diferentes interfaces de usuario

Page 22: Mobile Web

Más de 500 dispositivos se venden cada año

Más de 50 navegadores Llegar a estándares ha costado mucho

Page 23: Mobile Web
Page 24: Mobile Web

Cabecera

Navegación

Contenido

Navegación

Pie

Page 25: Mobile Web
Page 26: Mobile Web

Extensible HyperText Markup Language: Mobile Profile

Similar al XHTML Estándar para la web móvil actual

WML en desuso

Page 27: Mobile Web

Subconjunto de los CSS estándar KISS

Algunos dispositivos mostrarán mal configuraciones complejas

Mejor en el documento que externas Primero se carga el documento completo y

luego el CSS Provoca una presentación momentánea sin

estilo

Page 28: Mobile Web

Ya sabéis como hacer páginas para la web móvil

Page 29: Mobile Web

Mobile Web Best Practices Guía

Mobile Ok Sello

Descripción de dispositivos Perfiles para adaptación

Page 30: Mobile Web

<?xml version=”1.0” encoding=”UTF-8” ?>

<!DOCTYPE html PUBLIC “-//WAPFORUM//DTD XHTMLMobile 1.0//EN” “http://www.wapforum.org/DTD/xhtml-mobile10.dtd”>

Se deben cerrar todos los elementos: Los vacíos: <br/>Y los no vacíos: <p>Texto</p>

El alt es obligatorio en las imágenesNo puede haber texto directamente en el bodyLos atributos deben ir entrecomilladosTodo va en minúsculas

Page 31: Mobile Web

<body><div id=”cabecera”></div><div id=”navegación_cabecera”></div><div id=”contenido”></div><div id=”navegación_pie”></div><div id=”pie”></div></body>

Page 32: Mobile Web

Contenido relevante Enlaces relevantes Navegación relevante

<a href=”pagina.html” accesskey=”1”>Nosotros</a>

Lista ordenada – Para ser coherente con el accesskey

Imágenes relevantes

Page 33: Mobile Web

En un móvil es complicado escribir Se deben evitar los formularios

Nunca formularios largos

Page 34: Mobile Web

dominio.com/mobile mobile.dominio.com

Detección del dispositivo dominio.mobi

Page 35: Mobile Web

Un solo portal móvil para todos los dispositivos Mínimo común

Adaptación al dispositivo Por familias

Page 36: Mobile Web

Navegador estándar (Firefox u Ópera) Con herramientas para ayudarnos

Emuladores Pruebas con dispositivos

Page 37: Mobile Web

Experiencia = Expectativas: Usuario satisfecho

Experiencia > Expectativas: Usuario encantado

Experiencia < Expectativas: Usuario insatisfecho

Page 38: Mobile Web
Page 39: Mobile Web

Confianza en Internet móvil Asegura la experiencia del usuario Sites pensados y diseñados para móvil

Page 40: Mobile Web
Page 41: Mobile Web
Page 42: Mobile Web

http://flickr.com/photos/jemstone/11631878/http://flickr.com/photos/theklan/1082306956/

Page 43: Mobile Web
Page 44: Mobile Web
Page 45: Mobile Web
Page 46: Mobile Web

La web móvil 2.0 = la web 2.0 estándar

FuturoUsabilidadWidgetsCreadores potenciados

Page 47: Mobile Web
Page 48: Mobile Web

Recently a Forrester report was released stating that the iPhone "signals the beginning of the end for the mobile Web as we know it today". The report suggested that re-designing sites for the small screens of mobile phones would become "a thing of the past", because of the iPhone's advanced technology such as zooming.

http://www.readwriteweb.com/archives/iphone_vs_mobile_web.php

Page 49: Mobile Web

No es nada nuevoEs nuevo

Page 50: Mobile Web

La compañía dirigida por Steve Jobs ha vendido más de un millón de iPhones en el cuarto trimestre y la cifra total de ventas de este deseadísimo teléfono móvil ha alcanzado los 1,38 millones de aparatos, desde que llegó a las tiendas estadounidenses el pasado 29 de junio. Un verdadero récord, teniendo en cuenta que el artilugio sólo se vende de momento en el mercado estadounidense.(El País – 20/10/2007)

La compañía dirigida por Steve Jobs ha vendido más de un millón de iPhones en el cuarto trimestre y la cifra total de ventas de este deseadísimo teléfono móvil ha alcanzado los 1,38 millones de aparatos, desde que llegó a las tiendas estadounidenses el pasado 29 de junio. Un verdadero récord, teniendo en cuenta que el artilugio sólo se vende de momento en el mercado estadounidense.(El País – 20/10/2007)

Page 51: Mobile Web

PopularTarifa planaSoftware actualizableSDK AbiertoLocalizaciónPopular

Page 52: Mobile Web

HTML 4.01XHTML 1.0CSS 2.1 and partial CSS 3.xx JavaScript 1.4, including DOM

supportAJAX technologies, including

XMLHTTPRequestPDFQuicktime

Page 53: Mobile Web
Page 54: Mobile Web
Page 55: Mobile Web
Page 56: Mobile Web

Everything you always wanted to know about the mobile web Brian Fling

http://dev.mobihttp://mr.dev.mobihttp://www.mobiledesign.orgMobile Web: The Expectation of

Experience Greg Bell

Page 57: Mobile Web

How the iPhone Will Change the Mobile Space Brian Fling

http://developer.apple.com/iphone/

http://www.iPhoneWebDev.com/Mobile Megatrends 2008

Andreas Constantinou