SlideShare una empresa de Scribd logo
1 de 18
Descargar para leer sin conexión
ENC 2006
Using Web Pages
Accessible Design for the
Correct Web Visualization
on Mobile Devices
Dr. Juan Gabriel González Serna.
Dra. Azucena Montes Rendón.
Dr. Víctor Jesús Sosa Sosa.
Ing. Juan Carlos Olivares Rojas.
Cuernavaca, Morelos, México, septiembre de 2006.
2
Agenda
Metodología
de solución
Problemática Motivación
Resultados ConclusionesPruebas
3
Introducción
Grado de penetración de los dispositivos móviles en nuestra sociedad
Llaves
0%
Cartera
Celulares
Tarjetas
Llaves del trabajo
Periódico
Espejo
MP3/Walkman
Videojuego
Cámara
Credenciales
80% 90% 100%50% 60% 70%10% 20% 30% 40%
Siempre
Frecuentemente
4
Introducción
Tipos de conexión a Internet en México.
Fuente: Asociación Mexicana de Internet AMIPCI
¿Por qué el acceso a la Web
desde dispositivos móviles en
nuestro país es muy bajo?
5
Problemática
• Muchos de los
recursos existentes en
la Web no pueden
visualizarse en
dispositivos móviles,
por que no son
accesibles. Esto ha
originado que la Web
no sea ubicua y que
esté fragmentada.
6
Problemática
Los sitios Web no
están diseñados
tomando en
cuenta las
características y
limitaciones de los
dispositivos
móviles
800
600
7
Problemática
$63$33.122120285Total
$13.5$9.7249581.0Enviar un correo con una nota y un archivo
adjunto de 50 kb
$12$9.2445576.1Ver página Web de 70 KB
$3$1.567412.2Reenviar un correo 9 Kb
$3$1.447411.8Recibir un correo (9 kb)
$10.5$8.7637272.4Descargar una archivo PDF (68k)
$1.5$0.84426.7Cargar página Web
$4.5$0.841276.3Búsqueda de un restaurante y menú
$3$0.721005.9Buscar un numero en un directorio
$3$0.721095.4Resultados de los partidos del fútbol
$4.5$0.481533.7Buscar una película y ver su sinopsis
$3$0.24922Leer noticias
CSDGPRSTiempo
(Segs.)
Tamaño
(KB)Tarea
CSD: $1.5 minuto
GPRS: $0.12 KB
Telcel
Costos
Costos de acceso a Internet en México desde un dispositivo móvil haciendo
uso de la red de telefonía celular.
8
Motivación
Reformateo y destilado de recursos Web
9
Motivación
Formatos de transcodificación soportados
10
Motivación
GET http://www.cenidet.edu.mx/ HTTP/1.0
Accept: */*
UA-OS: Windows CE (Pocket PC) –Version 3.0
UA-Color: Color16
UA-Pixeles: 240x320
UA-CPU: ARM SA1110
UA-Voice: False
UA-Language: Mozilla/2.0
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/2.0 (Compatible; MSIE 3.02; Windows CE; PPC; 240x320)
Host: www.itmorelia.edu.mx
Proxy-Connection: Keep-Alive
X-Transform: XHTML-MP; Complete; Asynchronous
GET http://www.cenidet.edu.mx/ HTTP/1.0
Accept: */*
UA-OS: Windows CE (Pocket PC) –Version 3.0
UA-Color: Color16
UA-Pixeles: 240x320
UA-CPU: ARM SA1110
UA-Voice: False
UA-Language: Mozilla/2.0
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/2.0 (Compatible; MSIE 3.02; Windows CE; PPC; 240x320)
Host: www.itmorelia.edu.mx
Proxy-Connection: Keep-Alive
X-Transform: XHTML-MP; Complete; Asynchronous
Generador
Hoja de Estilo
Transformador
Multiformato
XSLT
HTMLR
Extractor de
Elementos
HTML
XHTML
XML
Identificador de dispositivoIdentificador de dispositivo
y formatoy formato
<HTML>
<TITLE>
<HEAD>
</HTML>
<BODY>
texto
texto
</HEAD>
</BODY>
</TITLE>
PS PDFWML
XHTML-
MPTXT XML
Proceso de transcodificación
29%
Promedio OK
11
Motivación
• Hipótesis: si una página Web está estructuralmente
bien diseñada y cumple con las normas de
accesibilidad, dicha página tiene mayor
probabilidad de visualizarse correctamente en un
dispositivo móvil.
• Al igual que las personas con alguna discapacidad
física pueden ver recursos Web si estos son
accesibles, puede verse a los dispositivos móviles
como dispositivos con capacidades limitadas que si
las páginas Web son accesibles a ellos, los podrán
visualizar.
12
Metodología de solución
No existen herramientas que se encarguen de corregir
errores de accesibilidad en línea, generalmente existen
herramientas para validar si el código es accesible
Estado del arte
13
Metodología de solución
Proxy de Accesibilidad Móvil
14
Pruebas
• 12 Usuarios respondieron la encuesta. 3 han
utilizado dispositivos móviles para acceder a
la Web.
• Se analizaron 100 Sitios Web.
• El tamaño promedio de la página principal es
de 30,476.81 (aprox. 30 Kb), los cuales
contienen un promedio de 56.99 objetos
(imágenes, otros recursos).
15
Resultados
A AA AAA
Porcentaje de páginas que cumplen con los niveles de accesibilidad del W3C.
16
Conclusiones
• Incrementar la audiencia.
• Contenido reutilizable por múltiples formatos o
dispositivos.*
• Reduce el mantenimiento del sitio.
• Menor carga del servidor.
• Menor ancho de banda requerido.
• Ahorro de costos en el acceso a la Web.
Ventajas
17
Conclusiones
• La mayoría de las páginas Web tienen un
diseño estructural inadecuado, motivo por el
cual no pueden ser accesibles por cualquier
persona e independientes del dispositivo.
Por este motivo, es de suma importancia
realizar un mecanismo de que en cierta
manera reestructure el contenido de la Web
de tal forma que sea accesible y pueda
visualizarse de manera correcta en
dispositivos móviles.
18
¿Preguntas?
• {gabriel, amr, vjsosa, jcolivares04c}
@cenidet.edu.mx
• http://www.cenidet.edu.mx/~wm-serna/
• http://mail.cenidet.edu.mx/~jcolivares04c/
“Distribuye y vencerás”.

Más contenido relacionado

Destacado

Configuración de la Audiencia
Configuración de la AudienciaConfiguración de la Audiencia
Configuración de la AudienciaRonny Isuiz
 
Recruitment Boutique Brochure 2014
Recruitment Boutique Brochure 2014Recruitment Boutique Brochure 2014
Recruitment Boutique Brochure 2014The Scribbler
 
OBI PSY 2014 - Excel 1
OBI PSY 2014 - Excel 1OBI PSY 2014 - Excel 1
OBI PSY 2014 - Excel 1Yann Zelig
 
Monet(Fr)
Monet(Fr)Monet(Fr)
Monet(Fr)m
 
NX 9.0 Examples
NX 9.0 ExamplesNX 9.0 Examples
NX 9.0 ExamplesGil Stark
 
Arranging to go out- les sorties
Arranging to go out- les sortiesArranging to go out- les sorties
Arranging to go out- les sortiesalice ayel
 
Voyages Club CA: La confiance dans vos vacances !
Voyages Club CA: La confiance dans vos vacances !Voyages Club CA: La confiance dans vos vacances !
Voyages Club CA: La confiance dans vos vacances !Voyages Club CA
 
Consigna 06
Consigna 06Consigna 06
Consigna 06adsmlu
 
07 Bajamar La Caleta
07 Bajamar La Caleta07 Bajamar La Caleta
07 Bajamar La Caletaguest362c79
 
Taller De Blog Para Bibliotecas Junio 2008
Taller De Blog Para Bibliotecas Junio 2008Taller De Blog Para Bibliotecas Junio 2008
Taller De Blog Para Bibliotecas Junio 2008Liz Pagan
 
Monumento Al Amor
Monumento Al AmorMonumento Al Amor
Monumento Al Amordemoinge
 

Destacado (20)

Configuración de la Audiencia
Configuración de la AudienciaConfiguración de la Audiencia
Configuración de la Audiencia
 
Recruitment Boutique Brochure 2014
Recruitment Boutique Brochure 2014Recruitment Boutique Brochure 2014
Recruitment Boutique Brochure 2014
 
OBI PSY 2014 - Excel 1
OBI PSY 2014 - Excel 1OBI PSY 2014 - Excel 1
OBI PSY 2014 - Excel 1
 
Sevilla
SevillaSevilla
Sevilla
 
Monet(Fr)
Monet(Fr)Monet(Fr)
Monet(Fr)
 
Ch9 miasm
Ch9 miasmCh9 miasm
Ch9 miasm
 
#25ansAPESS. Synthèse courte des conférences - Question soumises à la table ...
#25ansAPESS. Synthèse courte des conférences  - Question soumises à la table ...#25ansAPESS. Synthèse courte des conférences  - Question soumises à la table ...
#25ansAPESS. Synthèse courte des conférences - Question soumises à la table ...
 
NX 9.0 Examples
NX 9.0 ExamplesNX 9.0 Examples
NX 9.0 Examples
 
Arranging to go out- les sorties
Arranging to go out- les sortiesArranging to go out- les sorties
Arranging to go out- les sorties
 
France: Tresors Littéraires
France: Tresors LittérairesFrance: Tresors Littéraires
France: Tresors Littéraires
 
Egipto
EgiptoEgipto
Egipto
 
Voyages Club CA: La confiance dans vos vacances !
Voyages Club CA: La confiance dans vos vacances !Voyages Club CA: La confiance dans vos vacances !
Voyages Club CA: La confiance dans vos vacances !
 
FORO SOCIAL MEDELLIN 2008
FORO SOCIAL MEDELLIN 2008FORO SOCIAL MEDELLIN 2008
FORO SOCIAL MEDELLIN 2008
 
Consigna 06
Consigna 06Consigna 06
Consigna 06
 
07 Bajamar La Caleta
07 Bajamar La Caleta07 Bajamar La Caleta
07 Bajamar La Caleta
 
Portable1
Portable1Portable1
Portable1
 
Presentation C N W
Presentation  C N WPresentation  C N W
Presentation C N W
 
Ejemplo
EjemploEjemplo
Ejemplo
 
Taller De Blog Para Bibliotecas Junio 2008
Taller De Blog Para Bibliotecas Junio 2008Taller De Blog Para Bibliotecas Junio 2008
Taller De Blog Para Bibliotecas Junio 2008
 
Monumento Al Amor
Monumento Al AmorMonumento Al Amor
Monumento Al Amor
 

Similar a Accesible Web Design para dispositivos móviles

La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuariosLa web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuariosFer Torres
 
Revisión de los requisitos de accesibilidad en la interacción del usuario anc...
Revisión de los requisitos de accesibilidad en la interacción del usuario anc...Revisión de los requisitos de accesibilidad en la interacción del usuario anc...
Revisión de los requisitos de accesibilidad en la interacción del usuario anc...Grupo HULAT
 
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08Nervo Verdezoto
 
Accesibilidad Web - Universidad de Carabobo - Desarrollo de Aplicaciones Web
Accesibilidad Web - Universidad de Carabobo - Desarrollo de Aplicaciones WebAccesibilidad Web - Universidad de Carabobo - Desarrollo de Aplicaciones Web
Accesibilidad Web - Universidad de Carabobo - Desarrollo de Aplicaciones WebJesus Jimenez
 
Moviweb: A Platform to Solve the Web Content Visualization Problem on Heterog...
Moviweb: A Platform to Solve the Web Content Visualization Problem on Heterog...Moviweb: A Platform to Solve the Web Content Visualization Problem on Heterog...
Moviweb: A Platform to Solve the Web Content Visualization Problem on Heterog...Juan Carlos Olivares Rojas
 
Universidad gerardo barrio portafolio
Universidad gerardo barrio portafolioUniversidad gerardo barrio portafolio
Universidad gerardo barrio portafolioEnrique Reyes
 
Herbert mauricio leiva portafolio.
Herbert mauricio leiva portafolio.Herbert mauricio leiva portafolio.
Herbert mauricio leiva portafolio.Herbert Arevalo
 
Accesibilidad y usabilidad de la web
Accesibilidad y usabilidad de la webAccesibilidad y usabilidad de la web
Accesibilidad y usabilidad de la webpaoloarevaloortiz
 
Diseño Universal y Accesibilidad web
Diseño Universal y Accesibilidad webDiseño Universal y Accesibilidad web
Diseño Universal y Accesibilidad webtayzee
 

Similar a Accesible Web Design para dispositivos móviles (20)

Sergio alexis guerrero portafolio
Sergio alexis guerrero portafolioSergio alexis guerrero portafolio
Sergio alexis guerrero portafolio
 
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuariosLa web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
 
Moviweb
MoviwebMoviweb
Moviweb
 
Revisión de los requisitos de accesibilidad en la interacción del usuario anc...
Revisión de los requisitos de accesibilidad en la interacción del usuario anc...Revisión de los requisitos de accesibilidad en la interacción del usuario anc...
Revisión de los requisitos de accesibilidad en la interacción del usuario anc...
 
Estándares Web
Estándares WebEstándares Web
Estándares Web
 
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
 
Accesibilidad Web - Universidad de Carabobo - Desarrollo de Aplicaciones Web
Accesibilidad Web - Universidad de Carabobo - Desarrollo de Aplicaciones WebAccesibilidad Web - Universidad de Carabobo - Desarrollo de Aplicaciones Web
Accesibilidad Web - Universidad de Carabobo - Desarrollo de Aplicaciones Web
 
Moviweb: A Platform to Solve the Web Content Visualization Problem on Heterog...
Moviweb: A Platform to Solve the Web Content Visualization Problem on Heterog...Moviweb: A Platform to Solve the Web Content Visualization Problem on Heterog...
Moviweb: A Platform to Solve the Web Content Visualization Problem on Heterog...
 
Universidad gerardo barrio portafolio
Universidad gerardo barrio portafolioUniversidad gerardo barrio portafolio
Universidad gerardo barrio portafolio
 
Puaem
PuaemPuaem
Puaem
 
Clínica Accesibilidad Web / Lide-ar
Clínica Accesibilidad Web / Lide-arClínica Accesibilidad Web / Lide-ar
Clínica Accesibilidad Web / Lide-ar
 
Lineas invest
Lineas investLineas invest
Lineas invest
 
Herbert mauricio leiva portafolio.
Herbert mauricio leiva portafolio.Herbert mauricio leiva portafolio.
Herbert mauricio leiva portafolio.
 
PDF DE APOYO
PDF DE APOYOPDF DE APOYO
PDF DE APOYO
 
Accesibilidad web
Accesibilidad webAccesibilidad web
Accesibilidad web
 
Introducción a la accesibilidad web
Introducción a la accesibilidad webIntroducción a la accesibilidad web
Introducción a la accesibilidad web
 
Accesibilidad y usabilidad de la web
Accesibilidad y usabilidad de la webAccesibilidad y usabilidad de la web
Accesibilidad y usabilidad de la web
 
Apuntes
ApuntesApuntes
Apuntes
 
Informatica2
Informatica2Informatica2
Informatica2
 
Diseño Universal y Accesibilidad web
Diseño Universal y Accesibilidad webDiseño Universal y Accesibilidad web
Diseño Universal y Accesibilidad web
 

Más de Juan Carlos Olivares Rojas

Analítica de Datos usando Single Board Computers
Analítica de Datos usando Single Board ComputersAnalítica de Datos usando Single Board Computers
Analítica de Datos usando Single Board ComputersJuan Carlos Olivares Rojas
 
Analitica de Datos en Dispositivos de Internet de las Cosas
Analitica de Datos en Dispositivos de Internet de las CosasAnalitica de Datos en Dispositivos de Internet de las Cosas
Analitica de Datos en Dispositivos de Internet de las CosasJuan Carlos Olivares Rojas
 
A Comparative Assessment of Cryptography Algorithms for Data Analytic Applica...
A Comparative Assessment of Cryptography Algorithms for Data Analytic Applica...A Comparative Assessment of Cryptography Algorithms for Data Analytic Applica...
A Comparative Assessment of Cryptography Algorithms for Data Analytic Applica...Juan Carlos Olivares Rojas
 
Propuesta de Flexibilidad Curricular en el Tecnológico Nacional de México
Propuesta de Flexibilidad Curricular en el Tecnológico Nacional de MéxicoPropuesta de Flexibilidad Curricular en el Tecnológico Nacional de México
Propuesta de Flexibilidad Curricular en el Tecnológico Nacional de MéxicoJuan Carlos Olivares Rojas
 
Analítica de Datos en Simulador de Redes para Sistemas de Medición Inteligente
Analítica de Datos en Simulador de Redes para Sistemas de Medición InteligenteAnalítica de Datos en Simulador de Redes para Sistemas de Medición Inteligente
Analítica de Datos en Simulador de Redes para Sistemas de Medición InteligenteJuan Carlos Olivares Rojas
 
Propuesta de Mercado Eléctrico Minorista Transactivo en México
Propuesta de Mercado Eléctrico Minorista Transactivo en MéxicoPropuesta de Mercado Eléctrico Minorista Transactivo en México
Propuesta de Mercado Eléctrico Minorista Transactivo en MéxicoJuan Carlos Olivares Rojas
 
Cyber Security on Transactions in Smart Metering Systems usign Blockchain
Cyber Security on Transactions in Smart Metering Systems usign BlockchainCyber Security on Transactions in Smart Metering Systems usign Blockchain
Cyber Security on Transactions in Smart Metering Systems usign BlockchainJuan Carlos Olivares Rojas
 
A Survey on Smart Metering Systems using Blockchain for E-mobility
A Survey on Smart Metering Systems using Blockchain for E-mobilityA Survey on Smart Metering Systems using Blockchain for E-mobility
A Survey on Smart Metering Systems using Blockchain for E-mobilityJuan Carlos Olivares Rojas
 
Detección de Movimiento usando Medidores Inteligentes
Detección de Movimiento usando Medidores Inteligentes Detección de Movimiento usando Medidores Inteligentes
Detección de Movimiento usando Medidores Inteligentes Juan Carlos Olivares Rojas
 
A Survey on Smart Metering Systems using Human-Computer Interaction
A Survey on Smart Metering Systems using Human-Computer InteractionA Survey on Smart Metering Systems using Human-Computer Interaction
A Survey on Smart Metering Systems using Human-Computer InteractionJuan Carlos Olivares Rojas
 
Machine Learnign Model for the Detection of Electricity Energy Fraud Using an...
Machine Learnign Model for the Detection of Electricity Energy Fraud Using an...Machine Learnign Model for the Detection of Electricity Energy Fraud Using an...
Machine Learnign Model for the Detection of Electricity Energy Fraud Using an...Juan Carlos Olivares Rojas
 
Forecasting Electricity Consumption Using Weather Data in Edge-Fog-Cloud Data...
Forecasting Electricity Consumption Using Weather Data in Edge-Fog-Cloud Data...Forecasting Electricity Consumption Using Weather Data in Edge-Fog-Cloud Data...
Forecasting Electricity Consumption Using Weather Data in Edge-Fog-Cloud Data...Juan Carlos Olivares Rojas
 
Aplicacion de Tecnicas de UX en el Desarrollo de un Portal de un Sistema de M...
Aplicacion de Tecnicas de UX en el Desarrollo de un Portal de un Sistema de M...Aplicacion de Tecnicas de UX en el Desarrollo de un Portal de un Sistema de M...
Aplicacion de Tecnicas de UX en el Desarrollo de un Portal de un Sistema de M...Juan Carlos Olivares Rojas
 
Internet de las Cosas en Redes Eléctricas Inteligentes
Internet de las Cosas en Redes Eléctricas InteligentesInternet de las Cosas en Redes Eléctricas Inteligentes
Internet de las Cosas en Redes Eléctricas InteligentesJuan Carlos Olivares Rojas
 
Optimización de la Eficiencia Energética en los Hogares utilizando una Arquit...
Optimización de la Eficiencia Energética en los Hogares utilizando una Arquit...Optimización de la Eficiencia Energética en los Hogares utilizando una Arquit...
Optimización de la Eficiencia Energética en los Hogares utilizando una Arquit...Juan Carlos Olivares Rojas
 
Ciber Seguridad en Redes Eléctricas Inteligentes
Ciber Seguridad en Redes Eléctricas InteligentesCiber Seguridad en Redes Eléctricas Inteligentes
Ciber Seguridad en Redes Eléctricas InteligentesJuan Carlos Olivares Rojas
 
Estudio de Vulnerabilidad de Protocolos y Redes de Comunicación para Medidore...
Estudio de Vulnerabilidad de Protocolos y Redes de Comunicación para Medidore...Estudio de Vulnerabilidad de Protocolos y Redes de Comunicación para Medidore...
Estudio de Vulnerabilidad de Protocolos y Redes de Comunicación para Medidore...Juan Carlos Olivares Rojas
 

Más de Juan Carlos Olivares Rojas (20)

Ieee itmsb20
Ieee itmsb20Ieee itmsb20
Ieee itmsb20
 
Ropec20neural stick
Ropec20neural stickRopec20neural stick
Ropec20neural stick
 
Analítica de Datos usando Single Board Computers
Analítica de Datos usando Single Board ComputersAnalítica de Datos usando Single Board Computers
Analítica de Datos usando Single Board Computers
 
Analitica de Datos en Dispositivos de Internet de las Cosas
Analitica de Datos en Dispositivos de Internet de las CosasAnalitica de Datos en Dispositivos de Internet de las Cosas
Analitica de Datos en Dispositivos de Internet de las Cosas
 
A Comparative Assessment of Cryptography Algorithms for Data Analytic Applica...
A Comparative Assessment of Cryptography Algorithms for Data Analytic Applica...A Comparative Assessment of Cryptography Algorithms for Data Analytic Applica...
A Comparative Assessment of Cryptography Algorithms for Data Analytic Applica...
 
Propuesta de Flexibilidad Curricular en el Tecnológico Nacional de México
Propuesta de Flexibilidad Curricular en el Tecnológico Nacional de MéxicoPropuesta de Flexibilidad Curricular en el Tecnológico Nacional de México
Propuesta de Flexibilidad Curricular en el Tecnológico Nacional de México
 
Analítica de Datos en Simulador de Redes para Sistemas de Medición Inteligente
Analítica de Datos en Simulador de Redes para Sistemas de Medición InteligenteAnalítica de Datos en Simulador de Redes para Sistemas de Medición Inteligente
Analítica de Datos en Simulador de Redes para Sistemas de Medición Inteligente
 
Propuesta de Mercado Eléctrico Minorista Transactivo en México
Propuesta de Mercado Eléctrico Minorista Transactivo en MéxicoPropuesta de Mercado Eléctrico Minorista Transactivo en México
Propuesta de Mercado Eléctrico Minorista Transactivo en México
 
Cyber Security on Transactions in Smart Metering Systems usign Blockchain
Cyber Security on Transactions in Smart Metering Systems usign BlockchainCyber Security on Transactions in Smart Metering Systems usign Blockchain
Cyber Security on Transactions in Smart Metering Systems usign Blockchain
 
A Survey on Smart Metering Systems using Blockchain for E-mobility
A Survey on Smart Metering Systems using Blockchain for E-mobilityA Survey on Smart Metering Systems using Blockchain for E-mobility
A Survey on Smart Metering Systems using Blockchain for E-mobility
 
Detección de Movimiento usando Medidores Inteligentes
Detección de Movimiento usando Medidores Inteligentes Detección de Movimiento usando Medidores Inteligentes
Detección de Movimiento usando Medidores Inteligentes
 
A Survey on Smart Metering Systems using Human-Computer Interaction
A Survey on Smart Metering Systems using Human-Computer InteractionA Survey on Smart Metering Systems using Human-Computer Interaction
A Survey on Smart Metering Systems using Human-Computer Interaction
 
Machine Learnign Model for the Detection of Electricity Energy Fraud Using an...
Machine Learnign Model for the Detection of Electricity Energy Fraud Using an...Machine Learnign Model for the Detection of Electricity Energy Fraud Using an...
Machine Learnign Model for the Detection of Electricity Energy Fraud Using an...
 
Forecasting Electricity Consumption Using Weather Data in Edge-Fog-Cloud Data...
Forecasting Electricity Consumption Using Weather Data in Edge-Fog-Cloud Data...Forecasting Electricity Consumption Using Weather Data in Edge-Fog-Cloud Data...
Forecasting Electricity Consumption Using Weather Data in Edge-Fog-Cloud Data...
 
Aplicacion de Tecnicas de UX en el Desarrollo de un Portal de un Sistema de M...
Aplicacion de Tecnicas de UX en el Desarrollo de un Portal de un Sistema de M...Aplicacion de Tecnicas de UX en el Desarrollo de un Portal de un Sistema de M...
Aplicacion de Tecnicas de UX en el Desarrollo de un Portal de un Sistema de M...
 
Internet de las Cosas en Redes Eléctricas Inteligentes
Internet de las Cosas en Redes Eléctricas InteligentesInternet de las Cosas en Redes Eléctricas Inteligentes
Internet de las Cosas en Redes Eléctricas Inteligentes
 
Estrategias didacticas
Estrategias didacticasEstrategias didacticas
Estrategias didacticas
 
Optimización de la Eficiencia Energética en los Hogares utilizando una Arquit...
Optimización de la Eficiencia Energética en los Hogares utilizando una Arquit...Optimización de la Eficiencia Energética en los Hogares utilizando una Arquit...
Optimización de la Eficiencia Energética en los Hogares utilizando una Arquit...
 
Ciber Seguridad en Redes Eléctricas Inteligentes
Ciber Seguridad en Redes Eléctricas InteligentesCiber Seguridad en Redes Eléctricas Inteligentes
Ciber Seguridad en Redes Eléctricas Inteligentes
 
Estudio de Vulnerabilidad de Protocolos y Redes de Comunicación para Medidore...
Estudio de Vulnerabilidad de Protocolos y Redes de Comunicación para Medidore...Estudio de Vulnerabilidad de Protocolos y Redes de Comunicación para Medidore...
Estudio de Vulnerabilidad de Protocolos y Redes de Comunicación para Medidore...
 

Accesible Web Design para dispositivos móviles

  • 1. ENC 2006 Using Web Pages Accessible Design for the Correct Web Visualization on Mobile Devices Dr. Juan Gabriel González Serna. Dra. Azucena Montes Rendón. Dr. Víctor Jesús Sosa Sosa. Ing. Juan Carlos Olivares Rojas. Cuernavaca, Morelos, México, septiembre de 2006.
  • 3. 3 Introducción Grado de penetración de los dispositivos móviles en nuestra sociedad Llaves 0% Cartera Celulares Tarjetas Llaves del trabajo Periódico Espejo MP3/Walkman Videojuego Cámara Credenciales 80% 90% 100%50% 60% 70%10% 20% 30% 40% Siempre Frecuentemente
  • 4. 4 Introducción Tipos de conexión a Internet en México. Fuente: Asociación Mexicana de Internet AMIPCI ¿Por qué el acceso a la Web desde dispositivos móviles en nuestro país es muy bajo?
  • 5. 5 Problemática • Muchos de los recursos existentes en la Web no pueden visualizarse en dispositivos móviles, por que no son accesibles. Esto ha originado que la Web no sea ubicua y que esté fragmentada.
  • 6. 6 Problemática Los sitios Web no están diseñados tomando en cuenta las características y limitaciones de los dispositivos móviles 800 600
  • 7. 7 Problemática $63$33.122120285Total $13.5$9.7249581.0Enviar un correo con una nota y un archivo adjunto de 50 kb $12$9.2445576.1Ver página Web de 70 KB $3$1.567412.2Reenviar un correo 9 Kb $3$1.447411.8Recibir un correo (9 kb) $10.5$8.7637272.4Descargar una archivo PDF (68k) $1.5$0.84426.7Cargar página Web $4.5$0.841276.3Búsqueda de un restaurante y menú $3$0.721005.9Buscar un numero en un directorio $3$0.721095.4Resultados de los partidos del fútbol $4.5$0.481533.7Buscar una película y ver su sinopsis $3$0.24922Leer noticias CSDGPRSTiempo (Segs.) Tamaño (KB)Tarea CSD: $1.5 minuto GPRS: $0.12 KB Telcel Costos Costos de acceso a Internet en México desde un dispositivo móvil haciendo uso de la red de telefonía celular.
  • 10. 10 Motivación GET http://www.cenidet.edu.mx/ HTTP/1.0 Accept: */* UA-OS: Windows CE (Pocket PC) –Version 3.0 UA-Color: Color16 UA-Pixeles: 240x320 UA-CPU: ARM SA1110 UA-Voice: False UA-Language: Mozilla/2.0 Accept-Encoding: gzip, deflate User-Agent: Mozilla/2.0 (Compatible; MSIE 3.02; Windows CE; PPC; 240x320) Host: www.itmorelia.edu.mx Proxy-Connection: Keep-Alive X-Transform: XHTML-MP; Complete; Asynchronous GET http://www.cenidet.edu.mx/ HTTP/1.0 Accept: */* UA-OS: Windows CE (Pocket PC) –Version 3.0 UA-Color: Color16 UA-Pixeles: 240x320 UA-CPU: ARM SA1110 UA-Voice: False UA-Language: Mozilla/2.0 Accept-Encoding: gzip, deflate User-Agent: Mozilla/2.0 (Compatible; MSIE 3.02; Windows CE; PPC; 240x320) Host: www.itmorelia.edu.mx Proxy-Connection: Keep-Alive X-Transform: XHTML-MP; Complete; Asynchronous Generador Hoja de Estilo Transformador Multiformato XSLT HTMLR Extractor de Elementos HTML XHTML XML Identificador de dispositivoIdentificador de dispositivo y formatoy formato <HTML> <TITLE> <HEAD> </HTML> <BODY> texto texto </HEAD> </BODY> </TITLE> PS PDFWML XHTML- MPTXT XML Proceso de transcodificación 29% Promedio OK
  • 11. 11 Motivación • Hipótesis: si una página Web está estructuralmente bien diseñada y cumple con las normas de accesibilidad, dicha página tiene mayor probabilidad de visualizarse correctamente en un dispositivo móvil. • Al igual que las personas con alguna discapacidad física pueden ver recursos Web si estos son accesibles, puede verse a los dispositivos móviles como dispositivos con capacidades limitadas que si las páginas Web son accesibles a ellos, los podrán visualizar.
  • 12. 12 Metodología de solución No existen herramientas que se encarguen de corregir errores de accesibilidad en línea, generalmente existen herramientas para validar si el código es accesible Estado del arte
  • 13. 13 Metodología de solución Proxy de Accesibilidad Móvil
  • 14. 14 Pruebas • 12 Usuarios respondieron la encuesta. 3 han utilizado dispositivos móviles para acceder a la Web. • Se analizaron 100 Sitios Web. • El tamaño promedio de la página principal es de 30,476.81 (aprox. 30 Kb), los cuales contienen un promedio de 56.99 objetos (imágenes, otros recursos).
  • 15. 15 Resultados A AA AAA Porcentaje de páginas que cumplen con los niveles de accesibilidad del W3C.
  • 16. 16 Conclusiones • Incrementar la audiencia. • Contenido reutilizable por múltiples formatos o dispositivos.* • Reduce el mantenimiento del sitio. • Menor carga del servidor. • Menor ancho de banda requerido. • Ahorro de costos en el acceso a la Web. Ventajas
  • 17. 17 Conclusiones • La mayoría de las páginas Web tienen un diseño estructural inadecuado, motivo por el cual no pueden ser accesibles por cualquier persona e independientes del dispositivo. Por este motivo, es de suma importancia realizar un mecanismo de que en cierta manera reestructure el contenido de la Web de tal forma que sea accesible y pueda visualizarse de manera correcta en dispositivos móviles.
  • 18. 18 ¿Preguntas? • {gabriel, amr, vjsosa, jcolivares04c} @cenidet.edu.mx • http://www.cenidet.edu.mx/~wm-serna/ • http://mail.cenidet.edu.mx/~jcolivares04c/ “Distribuye y vencerás”.