Una visión global
 
 
 
Webs diseñadas para ser visualizadas en dispositivos móviles
 
The Net Size guide 2008
 
700.000 conexiones diarias a Vodafone Live! 5.000.000 de páginas vistas al día 5.000.000 de descargas en 2006
 
¿Por qué?
 
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
 
En movimiento Multitarea Diferentes situaciones sociales Atención difusa Comodidad Conectado
 
 
Location Based Services Servicios que aprovechan la capacidad para localizar el dispositivo (GPS o sin GPS)
 
Pocas categorías No más de 10 enlaces Árboles no muy profundos Priorización y personalización
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
Más de 500 dispositivos se venden cada año Más de 50 navegadores Llegar a estándares ha costado mucho
 
Cabecera Navegación Contenido Navegación Pie
 
Extensible HyperText Markup Language: Mobile Profile Similar al XHTML Estándar para la web móvil actual WML en desuso
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
Ya sabéis como hacer páginas para la web móvil
Mobile Web Best Practices Guía Mobile Ok Sello Descripción de dispositivos Perfiles para adaptación
<?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”> 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ágenes No puede haber texto directamente en el body Los atributos deben ir entrecomillados Todo va en minúsculas
<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>
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
En un móvil es complicado escribir Se deben evitar los formularios Nunca formularios largos
dominio.com/mobile mobile.dominio.com Detección del dispositivo dominio.mobi
Un solo portal móvil para todos los dispositivos Mínimo común Adaptación al dispositivo Por familias
Navegador estándar ( Firefox  u Ópera) Con herramientas para ayudarnos Emuladores Pruebas con dispositivos
Experiencia = Expectativas: Usuario satisfecho Experiencia > Expectativas: Usuario encantado Experiencia < Expectativas: Usuario insatisfecho
 
Confianza en Internet móvil Asegura la experiencia del usuario Sites pensados y diseñados para móvil
 
 
http://flickr.com/photos/jemstone/11631878/ http://flickr.com/photos/theklan/1082306956/
 
 
 
La web móvil 2.0 = la web  2.0  estándar Futuro Usabilidad Widgets Creadores potenciados
 
Recently a Forrester report was released stating that the iPhone &quot;signals the beginning of the end for the mobile Web as we know it today&quot;. The report suggested that re-designing sites for the small screens of mobile phones would become &quot;a thing of the past&quot;, because of the iPhone's advanced technology such as zooming. http://www.readwriteweb.com/archives/iphone_vs_mobile_web.php
No es nada nuevo Es nuevo
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)
Popular Tarifa plana Software actualizable SDK Abierto Localización Popular
HTML 4.01 XHTML 1.0 CSS 2.1 and partial CSS 3.xx JavaScript 1.4, including DOM support AJAX technologies, including XMLHTTPRequest PDF Quicktime
 
 
 
Everything you always wanted to know about the mobile web Brian Fling http://dev.mobi http://mr.dev.mobi http://www.mobiledesign.org Mobile Web: The Expectation of Experience Greg Bell
How the iPhone Will Change the Mobile Space Brian Fling http://developer.apple.com/iphone/ http://www.iPhoneWebDev.com/ Mobile Megatrends 2008 Andreas Constantinou

Mobile Web

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
    Webs diseñadas paraser visualizadas en dispositivos móviles
  • 6.
  • 7.
    The Net Sizeguide 2008
  • 8.
  • 9.
    700.000 conexiones diariasa Vodafone Live! 5.000.000 de páginas vistas al día 5.000.000 de descargas en 2006
  • 10.
  • 11.
  • 12.
  • 13.
    Un vistazo almundo 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
  • 14.
  • 15.
    En movimiento MultitareaDiferentes situaciones sociales Atención difusa Comodidad Conectado
  • 16.
  • 17.
  • 18.
    Location Based ServicesServicios que aprovechan la capacidad para localizar el dispositivo (GPS o sin GPS)
  • 19.
  • 20.
    Pocas categorías Nomás de 10 enlaces Árboles no muy profundos Priorización y personalización
  • 21.
    Usabilidad ClickStream Ley77 (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
  • 22.
    Más de 500dispositivos se venden cada año Más de 50 navegadores Llegar a estándares ha costado mucho
  • 23.
  • 24.
  • 25.
  • 26.
    Extensible HyperText MarkupLanguage: Mobile Profile Similar al XHTML Estándar para la web móvil actual WML en desuso
  • 27.
    Subconjunto de losCSS 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
  • 28.
    Ya sabéis comohacer páginas para la web móvil
  • 29.
    Mobile Web BestPractices Guía Mobile Ok Sello Descripción de dispositivos Perfiles para adaptación
  • 30.
    <?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”> 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ágenes No puede haber texto directamente en el body Los atributos deben ir entrecomillados Todo va en minúsculas
  • 31.
    <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>
  • 32.
    Contenido relevante Enlacesrelevantes Navegación relevante <a href=”pagina.html” accesskey=”1”>Nosotros</a> Lista ordenada – Para ser coherente con el accesskey Imágenes relevantes
  • 33.
    En un móviles complicado escribir Se deben evitar los formularios Nunca formularios largos
  • 34.
  • 35.
    Un solo portalmóvil para todos los dispositivos Mínimo común Adaptación al dispositivo Por familias
  • 36.
    Navegador estándar (Firefox u Ópera) Con herramientas para ayudarnos Emuladores Pruebas con dispositivos
  • 37.
    Experiencia = Expectativas:Usuario satisfecho Experiencia > Expectativas: Usuario encantado Experiencia < Expectativas: Usuario insatisfecho
  • 38.
  • 39.
    Confianza en Internetmóvil Asegura la experiencia del usuario Sites pensados y diseñados para móvil
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
    La web móvil2.0 = la web 2.0 estándar Futuro Usabilidad Widgets Creadores potenciados
  • 47.
  • 48.
    Recently a Forresterreport was released stating that the iPhone &quot;signals the beginning of the end for the mobile Web as we know it today&quot;. The report suggested that re-designing sites for the small screens of mobile phones would become &quot;a thing of the past&quot;, because of the iPhone's advanced technology such as zooming. http://www.readwriteweb.com/archives/iphone_vs_mobile_web.php
  • 49.
    No es nadanuevo Es nuevo
  • 50.
    La compañía dirigidapor 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)
  • 51.
    Popular Tarifa planaSoftware actualizable SDK Abierto Localización Popular
  • 52.
    HTML 4.01 XHTML1.0 CSS 2.1 and partial CSS 3.xx JavaScript 1.4, including DOM support AJAX technologies, including XMLHTTPRequest PDF Quicktime
  • 53.
  • 54.
  • 55.
  • 56.
    Everything you alwayswanted to know about the mobile web Brian Fling http://dev.mobi http://mr.dev.mobi http://www.mobiledesign.org Mobile Web: The Expectation of Experience Greg Bell
  • 57.
    How the iPhoneWill Change the Mobile Space Brian Fling http://developer.apple.com/iphone/ http://www.iPhoneWebDev.com/ Mobile Megatrends 2008 Andreas Constantinou