Desarrollo de sitios web para
dispositivos móviles
Web Mobile
¿Qué es una Computadora?
• Una máquina capaz de manipular información
de acuerdo a una lista predeterminada de
instrucciones;
• La capacidad para ejecutar esta lista de
instrucciones o "programas" es lo que las distingue
de las calculadoras.
¿Qué es una PC?
• PC
• “Personal Computer” o computadora personal.
• En el ámbito de la construcción de computadoras,
existen tres tipos de computadoras básicamente:
• las computadoras,
• las minicomputadoras y
• las computadoras personales.
¿Qué es un Dispositivo Móvil?
• Dispositivo móvil
• Son aparatos de pequeño tamaño, con algunas
capacidades de procesamiento,
• con conexión permanente o intermitente a una red,
• con memoria limitada,
• diseñados específicamente para una función, pero
que pueden llevar a cabo otras funciones más
generales.
Dispositivos móviles en el
mercado actual
• PDA (Personal Digital Assistant - Asistente Personal Digital).
• Computadora pequeña, diseñada para ocupar el mínimo
espacio y ser fácilmente
transportable.
Dispositivos móviles en el
mercado actual
• CellPhones (Celulares).
• Dispositivo electrónico que permite realizar múltiples
operaciones de forma inalámbrica en cualquier lugar
donde tenga señal.
• Entre las múltiples operaciones se incluyen la
realización de llamadas telefónicas, navegación por
Internet, envío de mensajes de texto (SMS), captura de
fotos y sonidos, reloj, agenda, etc.
• Estos dispositivos representan un gran porcentaje del
mercado actual.
Dispositivos móviles en el
mercado actual
• Smartphone (Teléfonos inteligentes)
• Teléfono móvil que incorpora características de una
computadora personal.
• Suelen permitir al usuario instalar nuevas aplicaciones,
aumentando así sus funcionalidades.
• Cuenta con un sistema operativo potente de fondo.
• Pueden incluir un mini teclado, una pantalla táctil, un
lápiz óptico, etc.
• Tienden a incluir acceso a Internet, servicios de e-mail,
cámara integrada, navegador Web, procesador de textos,
etc.
Dispositivos móviles en el
mercado actual
• Tablets
• es una computadora portátil con la que se puede
interactuar a través de una pantalla táctil o multitáctil.
• Se sitúa en una categoría entre un smartphone y una
notebook, enfocado más al acceso que a la creación de
aplicaciones y temas.
Dispositivo Móvil vs PC -
DESVENTAJAS
• Portabilidad: A comparación de las computadoras los
dispositivos móviles, son más delgados y livianos.
• Resistencia: Por el material que están hechos, varios
dispositivos móviles, son capaces de resistir agua,
rayaduras, impactos fuertes, entre otros. Bateria7 hrs.
de diferencia a una computadora.
• Conectividad: 3G, 4G, wifi, GPS, GSM , NFC, bluetooth,
mini USB, mini HDMI, salida aux.
Dispositivo Móvil vs PC -
DESVENTAJAS
• Dimensiones: El tamaño de la pantalla puede dificultar
el uso de algunas aplicaciones.
• Compatibilidad: Una de las grandes desventajas es la
compatibilidad, ya que en muchos casos las
aplicaciones, no son compatibles con algunos
smartphones o las actualizaciones del SO no están para
todos, en muchos casos, dejando estos obsoletos.
En 2011 se vendió un 17% más de dispositivos móviles sobre las PC
Durante Febrero de 2012 el 10,55% de todo el tráfico web provino de
dispositivos móviles
De todos los encuestados, el 36,9% dijo haber ingresado a sitios de noticias a
través de su teléfono en enero 2012. Un crecimiento de 74% año a año.
En el último año el uso de internet a través de dispositivos móviles aumentó 22%.
El 71% de los propietarios de tabletas en el Reino Unido están dispuestos a
comprar utilizando su terminal
Un 64% de los usuarios de tabletas y un 62% de los de teléfonos inteligentes afirman
que usan estos dispositivos para consultar noticias al menos semanalmente.
Internet
• Internet es un método de interconexión
descentralizada de redes de computadoras
• Internet no es sinónimo de World Wide Web
• El www utiliza Internet como medio de transmisión
Internet
• Es una combinación de hardware (computadoras
interconectados por vía telefónica o digital) y software
(protocolos y lenguajes que hacen que todo funcione).
• Un lugar virtual, en apariencia inexistente, pero donde
cada usuario es parte de ese todo.
• Es un medio de comunicación a través de sistemas de
cables, de fibras ópticas o de señales de satélite donde
los datos se intercambian.
Web 2.0
La Web 2.0 es la representación de la evolución de las
aplicaciones tradicionales hacia aplicaciones web
enfocadas al usuario final.
“La Web 2.0 es una
actitud y no
precisamente una
tecnología”
Web 2.0
Principios de la web 2.0:
– La web es la plataforma;
– La información es lo que mueve al Internet;
– Efectos de la red movidos por una arquitectura de
participación;
– La innovación surge de características distribuidas por
desarrolladores independientes;
– El fin del círculo de adopción de software pues tenemos
servicios en beta perpetuo;
Web 2.0
• [Link]
Web 2.0
• [Link]
Web 2.0
• [Link]
Web 2.0
• [Link]
Web 2.0
• [Link]
¿Qué es la Web Mobile?
Cuando se habla de Web Móvil se está haciendo
referencia a 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.
¿Qué es la Web Mobile?
La Web móvil se presenta como un auténtico reto tanto
para usuarios como para desarrolladores
– el usuario encuentra problemas al intentar acceder a los sitios
Web desde los dispositivos móviles;
– los desarrolladores de contenido encuentran dificultades para
crear sitios Web que funcionen adecuadamente en todos los
tipos de dispositivos y configuraciones.
¿Qué es la Web Mobile?
.Diseño web para PC
=
Diseño web para dispositivos móviles
¿Qué es la Web Mobile?
- Existen grandes diferencias entre usuarios móviles y usuarios
fijos:
- Diferentes tipos de contenido que manejan,
- capacidades de los dispositivos
- pantallas pequeñas;
- velocidad de conexión.
- contexto en el cual el usuario recibe el
contenido (por ej., en el colectivo, tren o
subte).
Dispositivos móviles en el
mercado actual
• Gran variedad de tamaños de pantalla:
• Tamaños de pantalla diverso (sin estándar)
• Clasificación en base a su tamaño de pantalla:
• 128 x 160 px
• 176 x 220 px
• 240 x 320 px
• 320 x 480 px
Dispositivos móviles en el
mercado actual
• Diferentes métodos de interacción:
• Teclado clásico,
• Touchpad,
• Touchscreen,
• Lápiz óptico,
• Reconocimiento de voz, etc.
Dispositivos móviles en el
mercado actual
• Conexión a Internet:
• GPRS,
• 3G,
• 4G,
• WIFI,
• WIMAX, etc.
Dispositivos móviles en el
mercado actual
• Diferentes navegadores:
• Opera Mini,
• iPhone Web Browser,
• Nokia Web Browser,
• iPod Touch Browser,
• Blackberry Web Browser,
• NetFront,
• Android Web Browser,
• Sony PSP Web Browser,
• OpenWave, etc.
Dispositivos móviles en el
mercado actual
• Diferentes Sistemas Operativos:
• SymbianOS,
• iPhoneOS,
• Sony Ericsson,
• WinCE,
• Windows Mobile,
• Android, etc.
Características de los sitios
web mobile
• Ancho de pantalla utilizable
• 120 píxeles, mínimo.
• Marcado de Soporte de idiomas
• XHTML Basic 1.1
• Codificación de caracteres
• UTF-8
• Compatible con formatos de imagen
• JPEG.
• GIF.
Características de los sitios
web mobile
• Colores
• 256 colores.
• Hoja de estilo de Apoyo
• CSS Nivel 1
• CSS Nivel 2
• HTTP
• HTTP/1.0 o más recientes HTTP1.1
INICIATIVA WEB MÓVIL
• Iniciativa de Web Móvil
• busca resolver los problemas de
interoperabilidad y usabilidad que
actualmente dificultan el acceso a la Web
desde dispositivos móviles
• Busca transformar la Web en una
plataforma omnipresente de servicios
completamente transparentes para el
usuario.
¿Qué es la Web única?
• La adaptación del contenidos debe venir desde el
servidor para ofrecer un contenido adecuado para cada
dispositivo.
• Tipos de adaptación:
• Cliente
• Servidor
RESPONSIVE DESIGN
• Diseño receptivo y adaptivo
• Consiste en reacomodar los elementos que componen
el website según el tamaño de dispositivo que la
reproduzca.
Responsive Desing
Responsive Desing
Características de los sitios web
mobile – No se recomienda
• añadir al sitio
web ventanas
emergentes.
Características de los sitios web
mobile – No se recomienda
• utilizar
tablas
para
maquetar.
Características de los sitios web
mobile – No se recomienda
• utilizar
animaciones
de flash.
Características de los sitios web
mobile – No se recomienda
• utilizar mapa de imágenes.
Características de los sitios web
mobile – No se recomienda
• utitlizar imágenes con una alta resolución y peso elevados.
Características de los sitios web
mobile – No se recomienda
• utilizar medidas en píxeles ni unidades absolutas.
Características de los sitios
web mobile – Se recomienda
• que la barra de navegación esté ubicada
en la parte superior de la página.
Características de los sitios
web mobile – Se recomienda
• tener en cuenta el equilibrio entre tener demasiados enlaces en
una página y pedir al usuario a seguir demasiados enlaces para
llegar a lo que están buscando.
Características de los sitios
web mobile – Se recomienda
• limitar el
desplazamiento de
la página en una
dirección (vertical).
Estrategias de diseño para web
mobile
• Estrategia 1: Definición de grupos de dispositivos
• cinco grupos con diferentes anchos de
pantalla:
• tiny: 84px a 160px
• pequeña: 160px a 208px
• medio: 208px a 320px
• grande: 320px a 480px +
• escritorio: 800px +
Estrategias de diseño para web
mobile
• Estrategia 2: Crear un diseño de referencia por defecto
• Se recomienda utilizar la resolución media como
referencia (208px a 320px)
Estrategias de diseño para web
mobile
• Estrategia 3: Definir las normas para el contenido y la
adaptación de diseño
• Estas normas nos ayudan a adaptar el diseño sacando
partido al código XHTML y CSS. Por ejemplo:
• Las cabeceras deberían estirarse al 100% del
ancho de la pantalla utilizando una imagen de
fondo repetitiva (o color de fondo) siempre que
sea posible.
• Las imágenes de contenido no deben ser mayor de
200 píxeles de ancho para el grupo por defecto, (o
el 80% del ancho de la pantalla del dispositivo).
Estrategias de diseño para web
mobile
• Siempre que sea posible, las listas de iconos o gráficos
decorativos deben de ser eliminados, y así conseguir el
mayor espacio disponible para el contenido.
• Utilizar medidas relativas para los elementos.
Estrategias de diseño para web
mobile
• Estrategia 4: Optar por los estándares web y un diseño
flexible
• la estrategia final se basa en la flexibilidad de
marcado a través de la reutilización de un código
genérico, basados en estándares XHTML y CSS.
• crear diseños líquidos partiendo de un diseño de
referencia y maximizar el uso de CSS y XHTML.
• Todo esto incluye tomar como referencia las
siguientes indicaciones:
Estrategias de diseño para web
mobile
• No especificar un ancho de documento, permitiendo así
que el diseño pueda expandirse y contraerse, y así pueda
llenar la pantalla del navegador del dispositivo.
• Aprovechar los elementos de bloque que también se
expanden y se contraen de forma nativa.
• Usar la hoja de estilos para distribuir los elementos de
contenido de forma accesible para el usuario.
• Especificar el tamaño de los elementos de diseño
utilizando los porcentajes de modo que, naturalmente se
expandan y se contraigan adaptándose al ancho de página.
Navegadores web mobile
• BlackBerry® Browser
• Opera Mobile
• Opera Mini
• IE Mobile
• Safari
• Minimo (Mozilla)
• Skyfire
• Dolphine
MANEJO DE DOMINIOS
¿Como registro un dominio? ¿Dónde ubico mi web mobile?
¿Qué es un dominio?
• Un dominio es la parte de una URL (dirección de una
página) por la que se identifica, con un nombre, al
servidor en el que se aloja.
• El propósito de los nombres de dominio de Internet y
del sistema de nombres de dominio (DNS) es traducir
una dirección IP a términos fáciles de encontrar.
Registro de dominios en
Argentina
• [Link]
Registro de dominios en
Argentina
• Tipos de dominio
• .ar – Uso general
• .[Link] – uso comercial general
• .[Link] – Proveedores de servicios para internet
• [Link]– Solo para Entidades e Instituciones sin fines de
lucro, Organizaciones no gubernamentales que están
registradas en Argentina.
• .[Link] – Solo para Entidades, Instituciones u
Organizaciones Educativas tales como Colegios,
Universidades, Escuelas e Institutos registrados en
Argentina.
• .[Link] – Solo para uso del Gobierno de la Republica
Argentina y entidades gubernamentales.
• .[Link] – Solo para uso de las Fuerzas Armadas de
Argentina.
Subdominios
• ¿Qué es un subdominio?
• Un subdominio es un subgrupo o subclasificación
del nombre de dominio el cual es definido con
fines administrativos u organizativos, que podría
considerarse como un dominio de segundo nivel.
• Normalmente es una serie de caracteres o
palabra que se escriben antes del dominio.
INICIATIVA dotMobi
• Iniciativa dotMobi
• mTLD
• Mobile Top Level Domain, Ltd (dotMobi) es un
dominio de nivel superior para Internet
diseñado específicamente para móviles.
• Creada en 2003 por Vodafone, Nokia y
Microsoft.
• Sostienen que los dominios .mobi ayudarán a
los usuarios a encontrar sitios y contenido,
especialmente adaptado para dispositivos
móviles.
¿Web única o una versión
específica para dispositivos
móviles?
• Normas de dotMobi para solicitar un registro .dotMobi
• Todos los sitios dotMobi deben estar disponibles
en el estándar XHTML Mobile Profile 1.0 (WAP
2.0) o posterior (por ejemplo, XHTML Basic 1.1) y
ésta debe ser la presentación por defecto.
• Un usuario móvil debe ser capaz de acceder a un
sitio de dotMobi de [Link] así
como [Link]
¿Web única o una versión
específica para dispositivos
móviles?
• Un sitio web de dotMobi no debe utilizar frames,
ni tablas.
• Recomienda que los desarrolladores sigan las
directrices de mejores prácticas del W3C (Mobile
Web Best Practices).
Dominios web mobile
• [Link]
Dominios web mobile
• [Link]
Publicar un sitio web mobile
• Actualmente, hay varias opciones para elegir un dominio
móvil.
• Nuestra url del dominio es el acceso único:
Web única.
• Ejemplo: [Link]/[Link]
• Dominio separado: Un nombre de dominio
por separado puede dañar la marca global del
sitio y puede confundir a los usuarios.
• Ejemplo: [Link]
Publicar un sitio web mobile
• Utillizar un subdominio
• Ejemplo: [Link]
• dotmobi: Registrar un dominio con
extensión específica para dispositivos web
mobile
• Ejemplo: [Link]
Dominios web mobile
• Dominios .mobi
• [Link]
Dominios web mobile
• Subdominios m.
• [Link]
Dominios web mobile
• Subdominio creado desde el Control Panel del Hosting
Emuladores web mobile
• Guia de emuladores
• [Link]
guide-mobile-emulators
Emuladores web mobile
• Opera mini 6
• [Link]/mobile/demo/
• Opera mobile
• [Link]/developer/tools/mobile/
• Iphone / Ipad
• [Link]/
• [Link]
• Blackberry
• [Link]/developers/downloads/simulators/index.
shtml
Emuladores web mobile
• Responsinator
• [Link]
Validadores móviles
• W3C MobileOk Checker: Validador oficial de la W3C
para sitios web móviles
• [Link]
Validadores móviles
• Validador dotMobi. Evalúa buenas prácticas. incluye
revisión de buenas prácticas y muestra un puntaje de 1
a 5 sobre tu sitio web
• [Link]
Dudas - Consultas
