Diseño y Desarrollo de Aplicaciones Web Móviles

7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles

1/82

Diseo y Desarrollo de

Aplicaciones Web MvilesDra. Roco Andrea Rodrguez

Ing. Pablo Martn Vera

Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014

1

[email protected]@ing.unlam.edu.ar
mailto:[email protected]:[email protected]:[email protected]:[email protected]


2/82

2

Doctora en Ciencias Informticas UNLP

Docente de GradoUNLaMDocente de PostgradoUAI, UNLaMInvestigadora - UAI, UNLaMDireccin de Pasantes - UAI, UNLaMDireccin de Tesis Grado - Universidad Nacional de Misiones Maestra - UNLaM, UAI Doctorado - UNLP

Ingeniero en Informtica UNLaMDocente de GradoUNLaM, UTN

Docente de PostgradoUAI, UNLaMInvestigadorUAI, UNLaMDireccin de PasantesUNLamSupervisor de Prcticas Profesionales Supervisadas UNLamDirector de Tecnologas (CTO)Empresa de Telefona

Profesores



3/82

Bienvenidos

Universidad Adventista del Plata Universidad Autnoma de Entre Ros

Universidad Nacional de Chilecito

Universidad Nacional de Comahue

Universidad Nacional de Entre Ros

Universidad Nacional de La Matanza Universidad Nacional de La Plata

Universidad Nacional de La Rioja

Universidad Nacional de Misiones

Universidad Nacional de San Juan

Universidad Nacional de Santiago del Estero

Universidad Nacional del Noroeste de la Provincia de Buenos Aires

Universidad Nacional del Sur

Universidad Tecnolgica Nacional

3



4/82

TemarioCLASE TEMA FECHA

1 1- Conceptos de Diseo en General 20-10

2- La Web Actualmente

3- Los Dispositivos MvilesDDC

4- Pautas de Diseo y Desarrollo Mvil5- Validacin

6- Desarrollo Bsico

2 6- Desarrollo Bsico 21-10

3 7- Desarrollo Avanzado 22-10

4 7- Desarrollo Avanzado8- Diseo Responsivo

23-10

5 9-EvaluacinCierre del Curso10-Refexiones Finales

24-10

4


2


5/82

Diseo5



6/82

Accesibilidad Hablar de Accesibilidad Web es hablar de un acceso

universal a la Web, independientemente del tipo dehardware, software, infraestructura de red, idioma, cultura,localizacin geogrfica y capacidades de los usuarios Laidea principal radica en hacer la Web ms accesible paratodos los usuarios independientemente de lascircunstancias y los dispositivos involucrados a la hora deacceder a la informacin. Partiendo de esta idea, unapgina accesible lo ser tanto para una persona condiscapacidad, como para cualquier otra persona que seencuentre bajo circunstancias externas que dificulten su

acceso a la informacin (en caso de ruidos externos, ensituaciones donde nuestra atencin visual y auditiva noestn disponibles, pantallas con visibilidad reducida, etc.).

6

W3C - http://w3c.es/Divul

gacion/GuiasBreves/Accesibilidad


2
http://w3c.es/Divulgacion/GuiasBreves/Accesibilidadhttp://w3c.es/Divulgacion/GuiasBreves/Accesibilidadhttp://w3c.es/Divulgacion/GuiasBreves/Accesibilidad


7/82

Despus de todo la usabilidad slo significaque algo funcione bien: que una personacon capacidad y experiencia media (oincluso por debajo de la media) pueda sercapaz de usar algo (ya sea un sitio web, un

avin de combate una puerta giratoria)con el objetivo deseado sin sentirsecompletamente frustrado.

Un buen principio de la usabilidad es que sialgo requiere mucho tiempo (o parece que

vaya a necesitarlo) es menos probable quese acabe utilizndolo

7 Concepto de Usabilidad

No me hagas pensar Krug


2


8/82

8

Objetos con los que nosencontramos en la realidad



9/82

9

ContraEjemplos de usabilidad



10/82

10 Modelos de Bicicletas para 2

Mis objetos, al contrario de

los aparatos que nuestrasociedad de consumovenera, son perfectamenteintiles".

Jacques Carelman



11/82

11 Algunos Cambios en Objetos Clsicos



12/82

12 La innovacin en contra de la usabilidad



13/82

Cuando genere una mejora a lo

existente.

Cuando al probarlo con los usuariospueda verse un uso satisfactorio.

PENSAR EN EL USUARIO!

13 Innovar cuando?



14/82

Modelos Mentales y

PreConceptosLos Objetos y sistemasinformticos respetan losmodelos conceptuales y

preconceptos?

14



15/82

15 Lenguaje Simblico - Iconos

Qu diferencia hay entre estos conos?Hay alguna pista que indique para que sirven?



16/82

16

Sin descripcinSin leyenda contextual

Sin

descripcin

Co

nleyenda

C

ontextual

Qu conos hubiera elegido para estas acciones?

LenguajeSimblico - Iconos en la web


Inicio

Tramites

Infomapas Cmo llego?

Agenda

Galera Multimedia

Buscador Datos Utiles

Consultas y Reclamos

17


17/82

17



18/82

18 Modelos Mentales



19/82

19 Municipalidad de Riad, Arabia Saudita



20/82

20 Municipalidad de Riad, Arabia Saudita Versin en Ingls



21/82

21


Comparativa de las versiones


22/82

22 Modelos Mentales



23/82

Es aplicable en todas las reas.

Debe ayudar a aplicar los modelosmentales, posee pistas visibles y permite

proceder en forma natural.No slo tiene en cuenta colores, formas y

organizacin de los elementos sino

tambin cuestiones culturales.Debe tomar en cuenta al potencial

usuario.

23 Reflexiones El diseo


2


24/82

La Web ActualmenteContraEjemplos24



25/82

25Ejemplos de Sitios WebEl Diseo ausente

http://yyyyyyy.info/

http://www.lingscars.com/

http://yyyyyyy.info/http://www.lingscars.com/http://www.lingscars.com/http://yyyyyyy.info/


26/82

26Ejemplos de Sitios WebEl Diseo ausente

http://arngren.net/

http://www.007museum.com/

http://arngren.net/http://www.007museum.com/http://www.007museum.com/http://www.directsoftwareconnection.com/http://www.007museum.com/http://arngren.net/


27/82

27

www.web_4_all.republika.pl

http://www.dokimos.org/ajff/

Ejemplos de Sitios WebEl Diseo ausente

http://www.web_4_all.republika.pl/http://www.dokimos.org/ajff/http://www.dokimos.org/ajff/http://www.web_4_all.republika.pl/


28/82

Analizando un sitio web oficial28


Di d P i I t


29/82

29

Diseo de Pginas Internas



30/82

Los dispositivosMviles y la WebPensando en las Limitaciones

30



31/82

Dispositivos Mviles31


3


32/82

Tablets

Consolas de JuegoseBooks

Dispositivos Mviles(2) - Diversidad32


3


33/82

BASICO

FEATUREPHONESOCIAL PHONE

SMART PHONE

Dispositivos Mviles(3) - Celulares33



34/82

Diversidad de Celulares quepueden navegar en la web

34


35/82

TELFONOS MVILES TABLET OTROS

Alemania 58,90% 30,30% 10,80%Argentina 80,00% 12,80% 7,20%Australia 66,10% 26,40% 7,50%Brasil 61,40% 33,40% 5,20%

Canad 47,90% 35,20% 16,90%Chile 79,80% 13,50% 6,70%Estados Unidos 68,20% 22,50% 9,30%Espaa 66,30% 28,20% 5,50%

Francia 62,60% 27,50% 9,90%India 94,90% 4,50% 0,60%Japn 82,90% 11,30% 5,80%Reino Unido 68,20% 21,60% 10,20%Singapur 67,30% 27,70% 5,00%

Dispositivos Mviles(6)Accesos a la Web35



36/82

CICOMRA (Cmara de Informtica y Comunicaciones de la Repblica Argentina)

57.850.200 lneas activas

Perodo Cantidad

Agos-10 54.623.000

Sept-10 54.623.800

Oct-10 56.624.200

Nov-10 56.624.400

Dic-10 56.725.200

Ene-11 57.850.400

Feb-11 57.850.400

Mar-11 57.875.400

Abr-11 57.840.600

May-11 57.860.500

Jun-11 57.850.400

Jul-11 57.850.200

INDEC27 de octubre de 2010 -> 40.117.096 habitantes

La penetracin del servicio de telefona mvil esaproximadamente 141,15%

ndice de penetracin = (aparatos en servicio /cantidad de habitantes) x100

Dispositivos Mviles(7)- Penetracin de Telefona Celular36


3

Dispositivos Mviles(8)


37/82

R-37

Dispositivos Mviles(8)37



38/82

SITIOS WEB FIJOS

SITIOS WEB MVILES

ROSARIO CORDOBA BS. AS.

Sitios WebVisualizacin desde un celular38



39/82

Sitios WebDistintos tipos de Sitios39



40/82

No se pueden volcar todos los contenidosde un sitio web en un sitio mvil.

Debe priorizarse los contenidos que sernms relevantes.

Debe proveerse un vnculo entre el sitioweb mvil y el sitio web fijo.

Sitios WebContenidos40


3

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


41/82

W3C41

http://www.w3.org/

http://www.w3c.es/

http://www.w3.org/http://www.w3c.es/http://www.w3c.es/http://www.w3.org/


42/82

W3CBuenas Prcticas Mviles42



43/82

W3C (DDCDefault Delivery Context)43


3

3


44/82

W3C (DDC y los Dispositivos)44


3


45/82

http://www.w3c.es/Divulgacion/Tarjetas/MW

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

W3CGua de Buenas Prcticas45


3
http://www.w3c.es/Divulgacion/Tarjetas/MWBP/http://www.w3.org/TR/mobile-bp/http://www.w3.org/TR/mobile-bp/http://www.w3.org/TR/mobile-bp/http://www.w3c.es/Divulgacion/Tarjetas/MWBP/


46/82

Principales basados en el Contenido46

Coherencia Temtica: El contenidoesencial debe ser accedido desdecualquier dispositivo

Contenido: Limitado a lo que el usuario

solicita y asegurndose que el contenidoesencia est antes del que no lo es.

Pginas de Tamao Prctico: Dividas ensecciones manejables

Equilibrio: Entre tener demasiados enlacesen una pgina y hacer que el usuario vayade un sitio a otro hasta llegar a lo que estbuscando.


3

3


47/82

47 Pruebas: Probar en Emuladores y

Dispositivos Reales Capacidades: Aprovechar las

capacidades del Dispositivo para Ofreceruna mejor experiencia al Usuario

Uso de Colores: Buen Contraste yAsegurarse que la informacin transmitida

mediante colores puede entendersetambin si no se cuenta con colores.

Redimensin de imgenes: En el servidor sitienen un tamao intrnseco.


3

4

4


48/82

48 URIs: Lo ms cortas posibles

Mensajes de Error: Claros, Informativos ycon posibilidad de volver al estadoanterior.

Barra de Navegacin: Concentrarla en la

parte superior y reducirla al mximo. Teclas de Acceso Rpido: En los menues

de navegacin y funciones ms utilizadas.


4

4


49/82

Alternativas

Hojas de Estilo: Usar hojas de estilo paramaquetar (no tablas) y asegurarse que elcontenido se puede visualizar igual si eldispositivo no tiene posibilidad de utilizarlas

Tablas de datos: Asegurarse que lainformacin pueda visualizarse sininconvenientes an cuanto las tablas noestn disponibles.

Elementos no textuales: Ofrecer alternativosde texto (Por ejemplo: Imgenes).

49


4

4


50/82

Principios Tcnicos50

Etiquetado Vlido Estructura: Utilizar el lenguaje de

etiquetado para darle una estructuralgica al documento.

Codificacin de Caracteres


4

4


51/82

Ingreso de Datos51

Minimizar el uso del teclado

Seleccin por defecto

Especificar el modo de entrada por defecto (para dispositivos compatibles)

Orden de tabulacin

Etiquetado de Controles

Posicin de los Controles


4

Evitar Ventanas Emergentes.

4


52/82

Evitar Scrolling en una segunda direccin.

Tablas Anidadas.

Grficos par el espaciado.

Marcos.

Mapas de imagen (a no ser que sepa que el dispositivolo interpreta eficazmente).

Imgenes grandes o de mucha resolucin.

Cookies.

Medidas absolutas (en imgenes, hojas de estilo, etc).

Objetos con Script.

Scripting del lado del Cliente. Actualizacin Automtica Peridica (salvo que se

ofrezca al usuario forma de desactivarla).

Redireccin (no utilizar el lenguaje de etiquetado pararedirigir. Configurarlo desde el servidor).

52


4


53/82

Validadores del W3CHerramientas Automticas

53


5


54/82

Validacin - Links54


5

5


55/82

Validacin - CSS55


5

5


56/82

Validacin - Markup56


5

5


57/82

ValidacinMobile OK

31/60

57


5

5


58/82

58


5

5


59/82

59


5

5


60/82

ValidacinMobile OK / Errores60


5


61/82

61 Validando un sitio web mvil



62/82

Resumiendo Validador Unificado62


http://validator.w3.org/unicorn/
http://validator.w3.org/unicorn/http://validator.w3.org/unicorn/


63/82

Desarrollopara Dispositivos Bsicos

XHTML 1.0 Basic

63


6


64/82

Desarrollo de sitios web mviles Doctype Juego de Caracteres

64


6


65/82

HTML

HyperText Markup Language No es un lenguaje de

programacin es un lenguaje deetiquetado.

Un lenguaje de etiquetado estaformado por un conjunto deetiquetas denominadas tags.

HTML utiliza los tags y texto planopara describir pginas web


65

XHTML

6


66/82

XHTMLeXtensible HyperText Markup

Language es casi idntico HTML 4.01

es una versin estricta y ms limpia queHTML

es HTML definido como una aplicacinXML

es una recomendacin del W3C desdeel ao 2000

est soportado por todos los browsershttp://www.w3schools.com/html/html_xhtml.asp


66

6

XHTML
http://www.w3schools.com/html/html_xhtml.asphttp://www.w3schools.com/html/html_xhtml.asp


67/82

Hay muchas pginas en internet con cdigoHTML mal formado pero que se visualizan bien enun browser

This is bad HTML

Bad HTML

This is a paragraph

XHTMLPor qu nace XHTML? (1-2)


67

XHTML 6


68/82

Nace para lograr documentos bienformados

No todos los dispositivos pueden corregirel cdigo html mal formado

Se interpreta con un parser XML

Crossbrowsing

XHTMLPor qu nace XHTML? (2-2)


68

6

XHTML

6


69/82

Los elementos XHTLM deben estar correctamente anidados

Los elementos XHTML deben estar siempre cerrados

Los elementos XHTML deben estar en

minsculas Los documentos XHTML deben tenerun

elemento raz

XHTMLPrincipales Diferencias con HTML (1)


69

6


70/82

HTML permite:

Este texto quedar ennegrita y cursiva

XHTML:Este texto quedar ennegrita y cursiva



70


71/82

MAL:

Este es el primer prrafo

Este es el segundo prrafo

BIEN:

Este es el primer prrafo

Este es el segundo prrafo



71

XHTML


72/82

MAL:

Salto de lnea:
Lnea horizontal: Imagen:

BIEN:Salto de lnea:
Lnea horizontal: Imagen:



72

XHTML


73/82

MAL:

Esto es un prrafo

BIEN:

Esto es un prrafo


P-73Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014

73

XHTML


74/82

El es la declaracin del tipo dedocumento DTD (Document Type Definition)

Especifica las reglas de marcacin para que elbrowser las pueda interpretar correctamente

Los elementos html, head, title y body deben estar

presentes En el elemento html debe estar presente el atributo

xmlns que especifica el namespace deldocumento



74

Ejemplo: Documento XHTML


75/82

j pcon los mnimos tags requeridos

Title of document

......


75

XHTML


76/82

Los nombres de los atributos debenestar en minsculas

Los valores de los atributos deben estarentre comillas

Esta prohibida la minimizacin deatributos

El DTD define los elementos obligatorios

XHTMLAtributos - Reglas de Sintaxis (1)


76

XHTML


77/82

MAL:

BIEN:



77

XHTML


78/82

MAL:

BIEN:


P-78P-78Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014

78

XHTML


79/82

MAL:

BIEN:

Atributos - Reglas de Sintaxis (2)


79


80/82

Contiene el conjunto mnimo demdulos para crear un documentoXHTML

Agrega imgenes, formularios, tablas

bsicas y soporte de objetos. Diseado para clientes que no

soportan el conjunto completo de

caractersticas de XHTML. Suficientemente poderoso como para

crear contenido.

XHTML Basic


80


81/82

Mdulos disponibles:http://www.w3.org/TR/xhtml-basic/#s_xhtmlmodules

XHTML Basic


8081
http://www.w3.org/TR/xhtml-basic/http://www.w3.org/TR/xhtml-basic/


82/82

Prctica en Clase

Desarrollo Bsico82

Diseño y Desarrollo de Aplicaciones Web Móviles

Documents

Transcript of Diseño y Desarrollo de Aplicaciones Web Móviles