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]7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles
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
Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014
7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles
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
Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014
7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles
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
Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014
2
7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles
5/82
Diseo5
Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014
7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles
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
Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014
2
http://w3c.es/Divulgacion/GuiasBreves/Accesibilidadhttp://w3c.es/Divulgacion/GuiasBreves/Accesibilidadhttp://w3c.es/Divulgacion/GuiasBreves/Accesibilidad7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles
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
Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014
2
7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles
8/82
8
Objetos con los que nosencontramos en la realidad
Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014
7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles
9/82
9
ContraEjemplos de usabilidad
Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014
7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles
10/82
10 Modelos de Bicicletas para 2
Mis objetos, al contrario de
los aparatos que nuestrasociedad de consumovenera, son perfectamenteintiles".
Jacques Carelman
Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014
7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles
11/82
11 Algunos Cambios en Objetos Clsicos
Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014
7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles
12/82
12 La innovacin en contra de la usabilidad
Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014
7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles
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?
Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014
7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles
14/82
Modelos Mentales y
PreConceptosLos Objetos y sistemasinformticos respetan losmodelos conceptuales y
preconceptos?
14
Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014
7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles
15/82
15 Lenguaje Simblico - Iconos
Qu diferencia hay entre estos conos?Hay alguna pista que indique para que sirven?
Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014
7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles
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
Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014
Inicio
Tramites
Infomapas Cmo llego?
Agenda
Galera Multimedia
Buscador Datos Utiles
Consultas y Reclamos
17
7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles
17/82
17
Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014
7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles
18/82
18 Modelos Mentales
Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014
7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles
19/82
19 Municipalidad de Riad, Arabia Saudita
Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014
7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles
20/82
20 Municipalidad de Riad, Arabia Saudita Versin en Ingls
Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014
7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles
21/82
21
Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014
Comparativa de las versiones
7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles
22/82
22 Modelos Mentales
Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014
7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles
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
Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014
2
7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles
24/82
La Web ActualmenteContraEjemplos24
Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014
7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles
25/82
25Ejemplos de Sitios WebEl Diseo ausente
http://yyyyyyy.info/
http://www.lingscars.com/
Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014
http://yyyyyyy.info/http://www.lingscars.com/http://www.lingscars.com/http://yyyyyyy.info/7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles
26/82
26Ejemplos de Sitios WebEl Diseo ausente
http://arngren.net/
http://www.007museum.com/
Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014
http://arngren.net/http://www.007museum.com/http://www.007museum.com/http://www.directsoftwareconnection.com/http://www.007museum.com/http://arngren.net/7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles
27/82
27
www.web_4_all.republika.pl
http://www.dokimos.org/ajff/
Ejemplos de Sitios WebEl Diseo ausente
Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014
http://www.web_4_all.republika.pl/http://www.dokimos.org/ajff/http://www.dokimos.org/ajff/http://www.web_4_all.republika.pl/7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles
28/82
Analizando un sitio web oficial28
Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014
Di d P i I t
7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles
29/82
29
Diseo de Pginas Internas
Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014
7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles
30/82
Los dispositivosMviles y la WebPensando en las Limitaciones
30
Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014
7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles
31/82
Dispositivos Mviles31
Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014
3
7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles
32/82
Tablets
Consolas de JuegoseBooks
Dispositivos Mviles(2) - Diversidad32
Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014
3
7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles
33/82
BASICO
FEATUREPHONESOCIAL PHONE
SMART PHONE
Dispositivos Mviles(3) - Celulares33
Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014
7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles
34/82
Diversidad de Celulares quepueden navegar en la web
34
7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles
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
Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014
7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles
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
Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014
3
Dispositivos Mviles(8)
7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles
37/82
R-37
Dispositivos Mviles(8)37
Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014
7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles
38/82
SITIOS WEB FIJOS
SITIOS WEB MVILES
ROSARIO CORDOBA BS. AS.
Sitios WebVisualizacin desde un celular38
Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014
7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles
39/82
Sitios WebDistintos tipos de Sitios39
Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014
7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles
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
Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014
3
http://www.w3.org/
http://www.w3.org/http://www.w3.org/7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles
41/82
W3C41
http://www.w3.org/
http://www.w3c.es/
Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014
http://www.w3.org/http://www.w3c.es/http://www.w3c.es/http://www.w3.org/7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles
42/82
W3CBuenas Prcticas Mviles42
Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014
7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles
43/82
W3C (DDCDefault Delivery Context)43
Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014
3
3
7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles
44/82
W3C (DDC y los Dispositivos)44
Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014
3
7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles
45/82
http://www.w3c.es/Divulgacion/Tarjetas/MW
BP/http://www.w3.org/TR/mobile-bp/
W3CGua de Buenas Prcticas45
Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014
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/7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles
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.
Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014
3
3
7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles
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.
Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014
3
4
4
7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles
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.
Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014
4
4
7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles
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
Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014
4
4
7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles
50/82
Principios Tcnicos50
Etiquetado Vlido Estructura: Utilizar el lenguaje de
etiquetado para darle una estructuralgica al documento.
Codificacin de Caracteres
Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014
4
4
7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles
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
Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014
4
Evitar Ventanas Emergentes.
4
7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles
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
Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014
4
7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles
53/82
Validadores del W3CHerramientas Automticas
53
Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014
5
7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles
54/82
Validacin - Links54
Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014
5
5
7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles
55/82
Validacin - CSS55
Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014
5
5
7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles
56/82
Validacin - Markup56
Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014
5
5
7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles
57/82
ValidacinMobile OK
31/60
57
Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014
5
5
7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles
58/82
58
Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014
5
5
7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles
59/82
59
Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014
5
5
7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles
60/82
ValidacinMobile OK / Errores60
Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014
5
7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles
61/82
61 Validando un sitio web mvil
Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014
7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles
62/82
Resumiendo Validador Unificado62
Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014
http://validator.w3.org/unicorn/
http://validator.w3.org/unicorn/http://validator.w3.org/unicorn/7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles
63/82
Desarrollopara Dispositivos Bsicos
XHTML 1.0 Basic
63
Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014
6
7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles
64/82
Desarrollo de sitios web mviles Doctype Juego de Caracteres
64
Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014
6
7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles
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
Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014
65
XHTML
6
7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles
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
Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014
66
6
XHTML
http://www.w3schools.com/html/html_xhtml.asphttp://www.w3schools.com/html/html_xhtml.asp7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles
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)
Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014
67
XHTML 6
7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles
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)
Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014
68
6
XHTML
6
7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles
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)
Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014
69
6
7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles
70/82
HTML permite:
Este texto quedar ennegrita y cursiva
XHTML:Este texto quedar ennegrita y cursiva
XHTMLPrincipales Diferencias con HTML (2)
Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014
70
7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles
71/82
MAL:
Este es el primer prrafo
Este es el segundo prrafo
BIEN:
Este es el primer prrafo
Este es el segundo prrafo
XHTMLPrincipales Diferencias con HTML (3)
Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014
71
XHTML
7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles
72/82
MAL:
Salto de lnea:
Lnea horizontal: Imagen:
BIEN:Salto de lnea:
Lnea horizontal: Imagen:
XHTMLPrincipales Diferencias con HTML (4)
Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014
72
XHTML
7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles
73/82
MAL:
Esto es un prrafo
BIEN:
Esto es un prrafo
XHTMLPrincipales Diferencias con HTML (5)
P-73Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014
73
XHTML
7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles
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
XHTMLPrincipales Diferencias con HTML (6)
P-74Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014
74
Ejemplo: Documento XHTML
7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles
75/82
j pcon los mnimos tags requeridos
Title of document
......
P-75Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014
75
XHTML
7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles
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)
P-76Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014
76
XHTML
7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles
77/82
MAL:
BIEN:
XHTMLAtributos - Reglas de Sintaxis (2)
P-77Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014
77
XHTML
7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles
78/82
MAL:
BIEN:
XHTMLAtributos - Reglas de Sintaxis (2)
P-78P-78Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014
78
XHTML
7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles
79/82
MAL:
BIEN:
Atributos - Reglas de Sintaxis (2)
P-79P-79Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014
79
7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles
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
P-80P-80Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014
80
7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles
81/82
Mdulos disponibles:http://www.w3.org/TR/xhtml-basic/#s_xhtmlmodules
XHTML Basic
Roco Rodrguez, Pablo Martn Vera Escuela Internacional de Informtica - CACIC 2014
8081
http://www.w3.org/TR/xhtml-basic/http://www.w3.org/TR/xhtml-basic/7/25/2019 Diseo y Desarrollo de Aplicaciones Web Mviles
82/82
Prctica en Clase
Desarrollo Bsico82