Desarrollo de Aplicaciones Web Multiplat

Desarrollo de Ministerio
de Educación, Cultura
y Deporte
Aplicaciones Web
Multiplataforma
COLECCIÓN AULA MENTOR SERIE PROGRAMACIÓN
CamSp SGALV
Desarrollo de Aplicaciones
Web Multiplataforma
Aula Mentor
Catálogo de publicaciones del Ministerio: www.educacion.gob.es
Catálogo general de publicaciones oficiales: www.publicacionesoficiales.boe.es
Autores
Miguel Ángel Contreras Castañeda
Coordinación pedagógica
Rocío de la Bandera Berlanga
Edición y maquetación de contenidos

Diseño gráfico e imagen

NIPO: 030-15-106-6
ISBN: 978-84-369-5623-8
ÍNDICE
Pág.
Módulo 0. Introducción.........................................................19
Unidad 0. Introducción..........................................................................................20
1. ¿Por qué realizar este curso?............................................................................................20
2. Estructura del curso..........................................................................................................21
3. Curva de aprendizaje.......................................................................................................22
Módulo 1. HTML5.................................................................25
Unidad 1. Introducción e instalación del entorno de trabajo...............................26
1. Introducción e Historia de la www................................................................................26
1.1. Esquema y elementos necesarios de la web........................................................28
1.2. Estructura de directorios en el servidor web........................................................32
2. Diferencias entre HTML5 y versiones anteriores...........................................................34
3. Preparando el entorno de desarrollo..............................................................................35
3.1. Editor de textos.......................................................................................................35
3.1.1. Instalación de Sublime Text 2 para Windows..............................................36
3.1.2. Instalación de Sublime Text 2 para MAC.....................................................39
3.1.3. Instalación de Sublime Text 2 para Linux....................................................39

3.1.4. Creando snippet propios............................................................................40
3.1.5. Más utilidades de Snippet.........................................................................43
3.2. Servidor de aplicaciones web............................................................................48
3.2.1. Instalación de Wamp (Windows 7)..........................................................48
3.2.2. Instalación de Lamp (Linux Ubuntu).......................................................55
3.2.3. Instalación de Mamp (MAC).....................................................................58
3.3. Navegador y emulador de dispositivos............................................................61
4. Resumen.......................................................................................................................63
Unidad 2: Webs con HTML5..............................................................................65

1. Estructura básica de HTML5........................................................................................65
1.1. Cabeceras, navegación, pie de página y Anexos.............................................65
1.2. Párrafos...............................................................................................................75
1.3. Títulos..................................................................................................................76
1.4. Listas...................................................................................................................77
1.5. Citas....................................................................................................................84
1.6. Formateado de textos........................................................................................85
1.7. Saltos de línea.....................................................................................................86
1.8. Elementos separadores......................................................................................87
1.9. Sección y artículos..............................................................................................88
1.10. Enlaces e hipervínculos....................................................................................91
1.10.1. Enlaces a una página local......................................................................91

1.10.2. Enlaces a una página externa........................................................................94
1.10.3. Enlaces al interior de la página.....................................................................95
1.10.4. Enlaces a una dirección de correo electrónico............................................98
1.10.5. Enlaces a un archivo....................................................................................100
1.10.6. Enlaces a elementos de bloque...................................................................101
2. Multimedia e imágenes......................................................................................................102
2.1. Insertar imágenes...................................................................................................102
2.2. Insertar audio y vídeo............................................................................................106
2.2.1. Insertar Audio.................................................................................................106
2.2.2. Insertar Vídeo.................................................................................................108
3. Tablas y formularios.........................................................................................................111
3.1. Tablas.......................................................................................................................111
3.2. Formularios.............................................................................................................117
3.2.1. Campos de texto.............................................................................................119
3.2.2. Campos de texto para contraseñas................................................................122
3.2.3. Áreas de texto.................................................................................................122
3.2.4. Listas desplegables..........................................................................................124
3.2.5. Botones de selección única............................................................................127
3.2.6. Botones de selección múltiple.......................................................................128
3.2.7. Botón de envío...............................................................................................129
3.2.8. Botón de reset.................................................................................................130

3.2.9. Botón de acción........................................................................................130
3.2.10. Campos ocultos.......................................................................................132
4. Resumen.......................................................................................................................133
Unidad 3. Elementos avanzados con HTML5....................................................136

1. Elementos avanzados con HTML5.............................................................................136
1.1. Script y NoScript...............................................................................................136
1.2. Drag and Drop..................................................................................................142
1.3. Diseño 2D. Canvas............................................................................................147
1.3.1. Trazar una línea.........................................................................................148
1.3.2. Trazar un rectángulo.................................................................................155
1.3.3. Trazar formas geométricas........................................................................158
1.3.4. Agregar texto.............................................................................................162
1.3.5. Agregar sombreados.................................................................................164
1.3.6. Agregar imágenes......................................................................................167
1.3.7. Transformaciones......................................................................................173
1.4. Geo-localización..................................................................................................176
1.4.1. Introducción...............................................................................................176
1.4.2. Protección de la privacidad......................................................................178
1.4.3. Coordenadas..............................................................................................179
1.4.4. Localización en un mapa..........................................................................183
1.4.5. Seguimiento de los desplazamientos.......................................................189

1.5. Almacenamiento de datos........................................................................................190
1.5.1. Temporal o de sesión.....................................................................................191
1.5.2. Persistente........................................................................................................197
2. Resumen..............................................................................................................................201
Módulo 2. CSS3.....................................................................203
Unidad 4: Estructura, estilos, selectores y jerarquías en CSS3...............................204
1. Introducción a CSS3..........................................................................................................204
2. Estructura de una web con CSS3 y modelo de cajas......................................................205
3. Estilos.................................................................................................................................208
3.1. En línea...................................................................................................................208
3.2. Internos. ..................................................................................................................209
3.3. Externos...................................................................................................................210
4. Jerarquía..............................................................................................................................211
5. Reglas de estilo y selectores.............................................................................................215
5.1. Selector de elemento..............................................................................................215
5.2. Selector de ID.........................................................................................................216
5.3. Selector de Clase.....................................................................................................219
5.4. Jerarquía entre selectores.......................................................................................222
6. Resumen.............................................................................................................................223
Unidad 5: Propiedades, elementos flotantes y posicionamiento............................225

1. Propiedades CSS3..............................................................................................................225
1.1. Unidades de medida...............................................................................................225

1.2. Anchura y Altura................................................................................................226
1.3. Colores...............................................................................................................229
1.4. Textos.................................................................................................................232
1.4.1. Tipo.............................................................................................................233
1.4.2. Tamaño......................................................................................................237
1.4.3. Estilo...........................................................................................................238
1.4.4. Grosor........................................................................................................239
1.4.5. Línea de decoración..................................................................................240
1.4.6. Sombras......................................................................................................241
1.4.7. Transformaciones.......................................................................................241
1.4.8. Indentación................................................................................................242
1.4.9. Espaciados.................................................................................................242
1.4.10. Alineación................................................................................................243
1.5. Márgenes, bordes y rellenos Box Model..........................................................245
1.6. ShortHand CSS3.................................................................................................250
1.6.1. Bordes........................................................................................................250
1.6.2. Fuentes.......................................................................................................251
1.6.3. Background................................................................................................252
1.6.4. Margin, padding, outline...........................................................................252
1.6.5. Listas...........................................................................................................253
2. Elementos flotantes......................................................................................................254
2.1. Float.........................................................................................................................256
2.2. Clear.........................................................................................................................257
2.3. Overflow..................................................................................................................258
3. Posicionamiento de los elementos...................................................................................260
3.1. Normal o estático....................................................................................................261
3.2. Relativo....................................................................................................................261
3.3. Absoluto..................................................................................................................262
3.4. Fijo...........................................................................................................................263
3.5. Visibilidad................................................................................................................264
3.6. Profundidad.............................................................................................................265
4. Selectores avanzados........................................................................................................266
4.1. Selector descendente...............................................................................................266
4.2. Selector de hijos......................................................................................................267
4.3. Selector adyacente..................................................................................................268
4.4. Selector de atributos...............................................................................................268
4.5. Pseudo-clases..........................................................................................................271
4.5.1. De selección....................................................................................................271
4.5.2. De enlace........................................................................................................273
4.5.3. Hover, active y focus......................................................................................278
5. Compatibilidad con los navegadores HTML5 y CSS3.....................................................281
6. Ejemplos prácticos............................................................................................................282
6.1. Posicionamiento de elementos..........................................................................282
6.2. Menú de navegación.........................................................................................284
6.2.1. Versión 1....................................................................................................284
6.2.2. Versión 2....................................................................................................285
6.2.3. Versión 3....................................................................................................287
7. Propiedades avanzadas de CSS3................................................................................288
7.1. Degradados de color.........................................................................................288
7.2. Transformaciones..............................................................................................296
7.2.1. Rotaciones..................................................................................................296
7.2.2. Escalado.....................................................................................................298
7.2.3. Deformación oblicua.................................................................................299
7.2.4. Desplazamiento.........................................................................................299
7.2.5. Transiciones...............................................................................................300
8. Resumen.......................................................................................................................307
Módulo 3. JQUERY...........................................................309
Unidad 6: Introducción e historia a jQuery.......................................................310
1. Introducción.................................................................................................................310
2. JavaScript y jQuery......................................................................................................311
3. Introducción a la programación en JavaScript..........................................................312
3.1. Definición..........................................................................................................312
3.2. Variables.............................................................................................................313
3.3. Funciones...........................................................................................................314
3.4. Operadores básicos................................................................................................315
3.5. Operadores lógicos................................................................................................316
3.6. Control de flujo del programa...............................................................................316
3.7. Ámbito de las variables..........................................................................................321
3.8. Arrays......................................................................................................................324
3.9. Objetos....................................................................................................................324
4. Empezando a trabajar con jQuery...................................................................................329
5. Selectores y filtros en jQuery............................................................................................335
5.1. Selector de Etiqueta................................................................................................335
5.2. Selector de Id..........................................................................................................335
5.3. Selector de Clase.....................................................................................................335
5.4. Conjunto completo de selectores..........................................................................338
6. Eventos...............................................................................................................................343
6.1. Eventos del ratón....................................................................................................343
6.1.1. Ejemplo: .click()..............................................................................................346
6.1.2. Ejemplo: .dblclick............................................................................................349
6.1.3. Ejemplo: mouseover vs …out/enter/leave....................................................350
6.1.4. Ejemplo: .mousemove()..................................................................................352
6.1.5. Ejemplo: .mouseup / .mousedown................................................................353
6.2. Eventos del teclado.................................................................................................355
6.3. Eventos de formularios...........................................................................................361

6.4. Eventos de documento.....................................................................................371
6.5. Eventos del navegador......................................................................................372
6.6. El objeto Event..................................................................................................374
6.7. Gestor de eventos.............................................................................................395
7. Atributos.......................................................................................................................406
7.1. Operaciones sobre Clases.................................................................................407
7.1.1. Añadir Clases.............................................................................................407
7.1.2. Eliminar Clases...........................................................................................408
7.1.3. Permuta de Clases.....................................................................................410
7.2. Leer....................................................................................................................412
7.3. Editar..................................................................................................................413
7.4. Añadir.................................................................................................................414
7.5. Eliminar..............................................................................................................416
8. Resumen.......................................................................................................................417
Unidad 7. Formularios, CSS3, Ajax y efectos.....................................................419

1. Formularios..................................................................................................................419
1.1. Selección de elementos.....................................................................................419
1.2. Validación de formularios.................................................................................423
2. CSS3..............................................................................................................................438
2.1. Acceder a las propiedades................................................................................438
2.2. Modificar las propiedades.................................................................................440

2.3. Dimensiones y posicionamiento............................................................................440
3. AJAX...................................................................................................................................446
3.1. Introducción............................................................................................................447
3.2. Preámbulo................................................................................................................449
3.2.1. Métodos GET y POST.....................................................................................449
3.2.2. Tipos de datos.................................................................................................449
3.2.3. Sincronismo/Asincronismo.............................................................................450
3.2.4. Métodos AJAX en jQuery................................................................................450
3.2.4.1. $.get().......................................................................................................450
3.2.4.2. $.post().....................................................................................................451
3.2.4.3. $getScript()...............................................................................................451
3.2.4.4. $.ajax().....................................................................................................452
3.2.5. Posicionamiento (SEO) con AJAX..................................................................453
4. Efectos................................................................................................................................454
4.1. Ocultar/mostrar elementos.....................................................................................454
4.2. Fundidos..................................................................................................................459
4.3. Desplazamientos.....................................................................................................462
4.4. Animaciones............................................................................................................464
4.5. Cola de efectos........................................................................................................465
4.6. Método queue.........................................................................................................466
4.7. Detener efectos.......................................................................................................472
5. Resumen............................................................................................................................474
Unidad 8. jQuery UI y Plugins..........................................................................475
1. jQuery UI.....................................................................................................................475
1.1. Instalación y uso en nuestra aplicación...........................................................475
1.2. Acordeón...........................................................................................................478
1.3. Autocompletar...................................................................................................482
1.4. Botones..............................................................................................................485
1.5. Calendario..........................................................................................................487
1.6. Diálogos.............................................................................................................488
1.7. Menús................................................................................................................489
1.8. Barra de progreso..............................................................................................492
1.9. Menús de selección...........................................................................................495
1.10. Slider.................................................................................................................496
1.11. Spinner.............................................................................................................498
1.12. Tabs..................................................................................................................501
1.13. Tooltip..............................................................................................................503
2. Uso y desarrollo de plugins........................................................................................504
2.1. Añadir funciones globales................................................................................505
2.2. Añadir métodos de objeto jQuery....................................................................507
2.3. Compartir un Plugin..........................................................................................508
3. Resumen.......................................................................................................................510
Módulo 4. Aplicaciones Web Multiplataforma.................513

Unidad 9. jQuery Mobile..................................................................................514
1. Introducción......................................................................................................................514
2. Preparando el entorno de desarrollo..............................................................................515
3. Estructura básica...............................................................................................................520
3.1. Roles........................................................................................................................525
3.2. Temas......................................................................................................................527
3.3. Página, encabezado, contenido y pie.....................................................................527
3.4. Navegación entre páginas......................................................................................529
4. Botones..............................................................................................................................534
5. Iconos personalizados......................................................................................................539
6. Columnas...........................................................................................................................543
7. Listas..................................................................................................................................544
7.1. Lista básica..............................................................................................................544
7.2. Lista con enlaces.....................................................................................................549
7.3. Listas divididas........................................................................................................550
7.4. Filtrado en listas......................................................................................................551
7.5. Listas compuestas...................................................................................................552
7.5.1. Título y descripción........................................................................................552
7.5.2. Agregar Imagen..............................................................................................552
7.5.3. Columna adicional. .........................................................................................554
7.5.4. Contadores......................................................................................................555
8. Tab.....................................................................................................................................557
9. Formularios...................................................................................................................562
9.1. Etiquetas.............................................................................................................564
9.2. Contenedores.....................................................................................................564
9.3. Agrupar elementos............................................................................................565
9.4. Botones y campos de texto..............................................................................566
9.5. Conmutadores...................................................................................................567
9.6. Deslizadores/Slider............................................................................................567
9.7. Campos tipo fecha............................................................................................568
9.8. Menús de selección...........................................................................................569
10. Correo electrónico.....................................................................................................573
11. Transiciones...............................................................................................................582
12. Temas personalizados...............................................................................................584
13. Conmutar entre Web Normal/Multiplataforma........................................................588
14. Resumen.....................................................................................................................599
Unidad 10. Introducción al desarrollo de aplicaciones multiplataforma................601

1. Introducción.................................................................................................................601
2. Visión general de los Framework Existentes.............................................................602
3. Introducción para el empaquetado multiplataforma................................................604
4. Monetización de las aplicaciones. Consejos..............................................................606
5. Limitaciones y tendencias...........................................................................................609
Módulo 0. Introducción.
Unidad 0. Introducción.
Unidad 0. Introducción
1. ¿Por qué realizar este curso?

Hoy en día es necesario crear páginas web para verlas en los distintos navegadores del
ordenador personal, además de poder verlas independientemente de la plataforma ya sea Tablet,
Smartphone o Smart TV. Debemos adaptar nuestra web para mostrar al usuario los datos de la
forma más rápida, eficiente y agradable.
El perfil actual del programador Web ha cambiado debido a la rápida expansión de los
dispositivos móviles, y otros nuevos dispositivos que se están desarrollando en este mismo mo-
20
mento. Cuando un programador realiza una web, ya sea personal o para una empresa, se da por
entendido que se puede ver desde cualquier navegador.
Con los diferentes tamaños de pantallas existentes entre Smartphone, SmartTv, Tablet y
dispositivos móviles en general, es necesario crear una versión específica, y reducida para ellos,
así el usuario podrá disfrutar de una forma más amigable de los contenidos.
Además con la fragmentación existente hoy en día y diferentes dispositivos, cada vez es
más difícil dar soporte como programador a las diferentes marcas y vertientes, y si quisiéramos
abarcar todos los campos, deberíamos:
Programar para Android. (API10, API11,….)
Programar para IPhone, Ipad. (IOS6, IOS7...)
Programar para Windows Phone. (WP)
Programar para BlackBerry.
Otros.
Para evitar todo esto, se está extendiendo la programación multiplataforma, orientada en

HTML5, CSS3, JQuery para web, JQuery Mobile y algunos Framework Multiplataforma que ayu-
dan a implementar todos estos conocimientos en nuestras aplicaciones. Las aplicaciones Webs
que realizaremos en el curso, se podrán integrar en cualquier servidor web y darán la base para
agregarlo posteriormente a los dispositivos en forma de aplicación; y en determinados casos y
M0. Introducción
cuidando la estética, el usuario no distinguirá entre una aplicación nativa y una basada en Web.
2. Estructura del curso.

En este curso, vamos a formarnos primero en saber cómo realizar páginas web para los
navegadores existentes en los ordenadores personales usando HTML5, hojas de estilo CSS3 y
JQuery, corrigiendo y ampliando conocimientos para saber desarrollar páginas webs livianas,
atractivas y con posibilidad de cambiar totalmente el diseño completo, con poco esfuerzo.
Posteriormente nos adentraremos en desarrollar aplicaciones Webs usando JQuery Mobi-

le, siendo la mejor forma de hacer webs dinámicas, (mejorando JavaScript y Ajax), aplicar efec-
tos y modificar las hojas de estilo CSS3 de forma dinámica, (sin usar fabricantes dependientes
como Flash), además de mejorar la compatibilidad con los navegadores; tarea muy pesada con
la fragmentación existente y los patrones por los que se rigen cada navegador.
Aplicaremos todo lo aprendido creando aplicaciones webs Multiplataforma, probando

en los emuladores., tanto para iPhone, Android, BlackBerry…etc.
Todo el software que vamos a usar en el curso no tiene licencias de pago, y en caso de
mencionarse alguno, siempre se referenciarán a las webs oficiales por si algún alumno lo quiere
utilizar en su forma Trial o Demo.
Iremos construyendo una aplicación Web, ampliando los conocimientos en cada módulo
hasta posteriormente tener una web multiplataforma, teniendo diferentes entradas, para PC´s o
para dispositivos móviles. Cuando finalicemos habremos adquirido los siguientes conocimien-
tos: 21
Aula Mentor
22
3. Curva de aprendizaje.
En este curso vamos a ver unos contenidos bastante amplios y de diferentes ámbitos,
por lo que existirán algunas partes que notaremos que avanzamos más que otras, por ello es
importante saber en qué fase estás en cada momento y la dificultad que puede tener cada una.
El gráfico siguiente muestra la curva de aprendizaje para un alumno que tenga unos
conocimientos avanzados del manejo de su ordenador y disponga del tiempo suficiente para
realizarlo, cada uno puede tener una curva totalmente diferente. Debido a los conocimientos
previos de cada uno, existirán módulos en los que avances más rápido; lo importante que debes
comprender es que los módulos se van entrelazando entre sí para que finalmente tengas unos
conocimientos bastante amplios para desarrollar aplicaciones web multiplataforma con un nivel
avanzado, además adquirirás uno de los perfiles más demandados hoy en día en programación.
M0. Introducción
Fig. 1. Curva de aprendizaje en el caso más desfavorable.
Como se puede observar en el gráfico, los dos primeros módulos tienen una curva de
aprendizaje bastante rápida y luego se hace más lenta cuando llega al módulo de JQuery, pero
¿qué pasa en este módulo? Bueno realmente esta curva representa el peor de los casos, ya que 23
vamos a ver programación, aunque todo se explica desde cero, puede ser que vayas más rápido
o más lento dependiendo de tu perfil. Aunque la sintaxis de JQuery es mucho más sencilla que
JavaScript, sigue siendo un poco difícil en la primera toma de contacto. Posteriormente cuando
comprendas la base, verás que es muy sencillo y notarás que tienes un gran control sobre todos
los elementos de la web.
Todo esto no es para que temas al módulo de JQuery, sino todo lo contrario primero
hacerte ver que si tardas un poco más en el módulo, es lo normal y tendrás que dedicarle más
atención, JQuery es una de las herramientas con más potencia que disponemos hoy en día en
la web, puede hacer efectos y manejo de la web con poco código, sustituyendo y no siendo
necesario usar en la mayoría de los casos Adobe Flash, teniendo en cuenta la dependencia que
obliga al dispositivo a poder visualizar animaciones con Adobe Flash Player, por ejemplo en los
dispositivos móviles de Apple.
Posteriormente en el módulo de JQuery Mobile vemos que avanzamos muy rápido, se

podría decir incluso es el más rápido de los módulos, esto es porque hemos sentado la base en
los módulos iniciales y nos ha facilitado todas las herramientas para hacer aplicaciones web para
Smartphone de forma rápida, con muchísimo estilos y configuraciones predefinidas. Con muy
poco código se consiguen efectos que de otra forma requerirían muchas líneas de código.
Módulo 1. HTML5.
Unidad 1. Introducción e instalación del entorno del trabajo.

Unidad 2. Webs con HTML5.
Unidad 3. Elementos avanzados con HTML5.
Unidad 1. Introducción e instalación del
entorno de trabajo
1. Introducción e Historia de la www.

Hoy en día todo el mundo usa su ordenador personal, Tablet, Smart tv o Smartphone
para navegar a través de internet, pero ¿quién, dónde y cómo nació todo esto?: Timothy “Tim”
John Berners-Lee en noviembre de 1989 realizó su primera comunicación entre dos ordena-
dores, por lo que se puede decir que fue el padre de la hoy llamada web, nube, la Internet o
comúnmente llamada Internet. En concreto salió de la necesidad de intercambio de información
entre diferentes personas que estaban investigando sobre un proyecto.
26
Él y su grupo de investigación crearon lo que por sus siglas en inglés se denomina Len-
guaje HTML (HyperText Markup Language) o lenguaje de etiquetas de hipertexto, el protocolo
HTTP (HyperText Transfer Protocol) y el sistema de localización de objetos en la web URL
(Uniform Resource Locator).
Tim Berners-Lee podemos decir de forma resumida que creó un protocolo de comunica-
ción (HTTP), un lenguaje para que las máquinas se entendieran (HTML) y una forma de llamar
a los recursos a través de (URL), lo que solemos llamar la dirección web. Hoy en día, cuando
pensamos en Internet, pensamos en miles de ordenadores interconectados, transmitiendo imá-
genes, música, en definitiva, información. Pero nosotros también podemos tener varios ordena-
dores conectados a un servidor de forma local, crear una intranet, y tener nuestra página web
de la empresa o corporación; eso sí, se podrán ver dentro de la red, a no ser que se dé permiso
en el router para que esa página web ser vea desde fuera de nuestra red.
Un símil puede ser que dos amigos están en una habitación y están comunicándose
(usando lenguaje español ~ HTML), usando como medio físico el aire, a través de nuestras cuer-
das vocales; pero también podríamos comunicarnos mediantes lenguaje de señas, o incluso de
humo, al final son diferentes medios existentes. También estos dos amigos tienen un protocolo
de comunicación (turnos de palabra y tiempo, primero habla uno, y luego responde el otro ~
HTTP). También deben saber dónde está uno y el otro, porque el amigo A no sabe si está en el
salón o en la cocina, sino sabe la ubicación no podrá intercambiar nada con él (localización de
cada amigo ~ URL).
Ellos pueden disfrutar de conversaciones horas y horas sin necesidad de nada más. Pero
si quisieran comunicarse con otros amigos que están en otro país, tendrían que usar el teléfono.
Bien, pues en este símil, el teléfono sería lo que nos comunica con otras redes, a través de otro
dispositivo llamado modem, con otras personas. Si a su vez están interconectados con muchos
M1. HTML5
amigos de muchos países, finalmente tendrían una red muy grande de comunicación; pues es
un ejemplo en otro contexto de que es Internet.
Por tanto dependiendo del número, el ámbito y el uso de ordenadores que usen la red
podemos tener diferentes tipos de redes (tipos de reuniones de amigos). Los tipos de redes más
importantes que tendríamos son:
Redes de Área Local (LAN). Local Área Network, se refiere a redes que suelen tener
pocos cientos de metros y no suelen exceder de kilómetros de distancia. Si tu ordenador o
Smartphone está conectado a una red, tendrás una red local, entre tu dispositivo y el router, con
el cual te puedes conectar a Internet si lo tienes contratado, pero tener Internet no es necesario
para conectar varios ordenadores en una red, como hemos visto anteriormente en el símil de
los dos amigos. Por tanto, la mayor parte del curso, lo puedes realizar utilizando incluso un solo
ordenador, y realizar las pruebas sin tener Internet.
Redes de Área Amplia (WAN). Wide Área Network, se refiere a una red de ordena-
dores que abarca varias ubicaciones físicas, proveyendo servicio a una zona, un país, incluso
varios continentes. Es cualquier red que une varias redes locales (LAN), por lo que sus usuarios
no están todos en una misma ubicación física.
Muchas WAN son construidas por organizaciones o empresas para su uso privado, otras son ins-
taladas por los proveedores de Internet (ISP) para proveer conexión a sus clientes, por ejemplo
Telefónica, Jazztel, Orange, Ono…etc. Son empresas (ISP – Internet Services Provider) por las
que nos conectamos desde nuestra red LAN (nuestro router, PC, Smartphone y Tablet) a la WAN
y a su vez a Internet. Un ejemplo típico es el que se puede ver en la siguiente imagen, donde
disponemos de varios PC en nuestra casa u oficina, que se conecta a una WAN a través de la 27
empresa que nos provee los servicios de internet (ISP).
No debemos olvidar que independientemente de si nuestro equipo se conecta de forma

inalámbrica o alámbrica (por cable) pertenece a la misma red local LAN, ser inalámbrica es un
medio más de comunicación (el aire). Todo esto es transparente para el dispositivo y para el
usuario, que sólo cambiará la velocidad de transmisión de cada medio y el encapsulamiento o
forma de trasmisión física.
Fig. 2: Ejemplo de LAN.

Aula Mentor
28
Fig. 3: Conexión desde tu LAN a internet.
1.1. Esquema y elementos necesarios de la web.
Volviendo al apartado anterior, para poder ver una página web necesitamos un ordena-
dor que nos sirva páginas web usando el protocolo HTTP, el lenguaje HTML para comunicarnos
y las direcciones URL para saber qué recurso es el que queremos en cada momento. Con todo
eso podemos intercambiar información y disfrutar de navegar por nuestro servidor web.
En la siguiente imagen podemos ver un ejemplo típico de Intranet en una empresa:

M1. HTML5
29
Cuando ponemos en nuestro navegador una URL, comúnmente dirección web, estamos
diciendo al navegador tráeme (GET) la información que haya en la dirección que te he puesto
en la URL. Llegados a este punto hay que aclarar una cosa que seguro que has cambiado o al
menos escuchado y son los DNS (Domain Name System). De forma simplificada, podemos decir
que los ordenadores tienen un identificador propio dentro de la red local y único, como si fuera
el DNI sólo que en redes distintas tipo local (LAN) dos personas pueden usar el mismo DNI,
dentro de cada red para saber quién es quién y mandar los mensajes a las personas correctas.
Por ejemplo, si hacemos un símil con las personas, cada persona tiene un nombre y un
DNI, y normalmente cuando nos comunicamos entre nosotros usamos el nombre y no el núme-
ro que nos identifica. ¿Por qué? Es más fácil de recordar, es más bonito…etc. Este nombre es tan
importante que incluso hay una guerra por cogerse los nombres, ya que en Internet sólo puede
existir un nombre concreto. No pasa como con las personas, que se pueden llamar varias per-
sonas del mismo nombre, en Internet el que coge el nombre por primera vez, queda registrado.
¿Por qué? Por ejemplo, si ponemos www.google.es nos referimos a una empresa y no puede
existir nadie que se llame exactamente igual. Pero www.google.es tiene un “DNI” o dirección
física, ¿quieres saberla? Usa la consola de comandos, en Windows / Inicio / Accesorios / Símbolo
del sistema y escribe el siguiente comando:
ping www.google.es
Y obtendrás algo parecido a esto:

Aula Mentor
Haciendo ping a www.google.es [173.194.34.215] con 32 bytes de datos:
Respuesta desde 173.194.34.215: bytes=32 tiempo=67ms TTL=56
El DNI de google para mi conexión en este caso es 173.194.34.215, ya que se usan

los DNS para adquirir las direcciones físicas reales del dominio. Realmente las DNS es como
si tenemos una tabla con relación de nombres y DNI, en el caso de Internet serían dominios y
direcciones IP físicas.
NOMBRE DNI
Nombre1 Apellido1 Apellido1 11222331K
Nombre2 Apellido2 Apellido2 22333442A
DOMINIO IP
http://www.google.es http://173.194.34.215/
http://www.mecd.gob.es http://193.147.0.116/
30
Esto no funciona con todos los dominios, ya que a veces se usan dominios compartidos,
es decir que para una misma IP cabecera se usan varios dominios, por lo que lo que distingue
a un dominio de otro sería el dominio que lo llama.
Si ahora abrimos cualquier navegador y en vez de escribir www.google.es escribimos

su DNI, digo su IP; nos llevará a la misma página, ya que hemos ido directos sin preguntar su
identificador.
Ahora nos debemos preguntar qué hay detrás de la dirección IP, ¿qué pasa realmente y
cómo podemos ver las web usando el dominio o la IP? Otro elemento fundamental en internet
son los servidores. Pero antes debemos explicar ¿qué es un servidor?
Bueno, un servidor según Wikipedia es: “un nodo que, formando parte de una red,
provee servicios a otros nodos denominados clientes”. Creo que es una buena definición porque
no especifica nada más ni se mete el tipo de hardware, ya que hay personas que se centran
solo en el hardware para definir si es un servidor o no. Puede ser desde Supercomputadoras
o computadores con rendimientos muy altos, con fuentes de alimentación redundantes por si
falla alguna, infinidad de rack de discos duros intercambiables en caso de ruptura en caliente y
sin que el usuario note nada; a simples ordenadores personales (PC), claro está; el rendimiento,
la efectividad, el mantenimiento y la durabilidad nunca va a ser la misma, pero muchas veces
cuando nos conectamos a una web, no podemos saber en primera instancia si el equipo que hay
detrás es de mayor o menor envergadura, ni tampoco el sistema operativo. (En casos aislados y
por fuerza mayor he tenido que usar un PC con Linux como servidor web mientras reparaba el
Servidor principal, y dependiendo del número de usuarios conectados a esa hora, el usuario no
ha notado ninguna diferencia).
M1. HTML5
Existen muchos tipos de servidores y servicios, los más comunes y usados por los usua-
rios podrían ser los siguientes:
TIPO DE SERVIDOR BREVE DESCRIPCIÓN

Podemos almacenar archivos en HTML y mos-
trar contenidos a los usuarios que dispongan
Servidor web de nuestra URL. Es aquí donde tenemos que
tener la página web con la que el usuario
posteriormente interactuará. Usa el protocolo
HTTP para comunicarse con los clientes.
(File Transfer Protocol) o Protocolo de trans-
ferencia de archivos. Es un protocolo utiliza-
Servidor FTP do para la transferencia de archivos entre un
cliente y un servidor, permitiendo al cliente
descargar y enviar archivos hacia el servidor.
Comúnmente si tenemos contratado un hos-
ting en la nube, subiremos nuestras páginas a
través de FTP.
Domain Name System. Es un sistema por el
que se asocia una información con un nombre
Servidores DNS de dominio. De forma reducida se ha explica-
do anteriormente.
Normalmente se usa un protocolo llamado
POP3 y SMTP, por el cual los usuarios dispo-
Servidores de correo electrónico nen de su correo electrónico, enviando y reci- 31
biendo los correos a través de él. Existen otros
protocolos para correo electrónico, pero éstos
son los más usados.
Últimamente la tendencia en las empresas es
usar VoIp, y dejar las antiguas centralitas, para
Servidor de telefonía ello se usan programas para poder usar a tra-
vés de internet e interconectar toda la empre-
sa de una forma más fluida. (Asterix)
Existen muchos más tipos de servidores, pero éstos son los más usuales.
En definitiva, si tienes un equipo podemos usarlo de muchas formas distintas, y en al-

gunas ocasiones dando varios servicios, lo más común es como servidor de páginas web, en
próximos capítulos te ayudaré a configurarlo, y FTP para transferir archivos, aunque últimamente
debido a los servicios en la nube de almacenamiento (dropbox, googledrive, Shared...Etc.) se
usa exclusivamente para subir las páginas webs.
Además si configuramos correctamente el router e Internet, puedes crear tu web; y si

compras un dominio o usas uno gratuito, cuando finalices el curso puedes tener tu primera pá-
gina web en el mundo por muy poco dinero y conforme vayas adquiriendo visitas ir pensando
en otras opciones más profesionales.
Aunque a nivel profesional, por consumos eléctricos el tener un ordenador siempre

encendido y sobre todo porque la velocidad de Internet de usuarios suele ser muy inferior; es
recomendable dejar toda la parte de hardware o equipos a terceros, pagar una cuota anual y
centrarnos sólo en la creación de la web. Normalmente estas empresas nos ofrecen un tamaño
Aula Mentor
de espacio limitado para alojar nuestra web, pero también nos ofrecen servicios más avanzados,
como pueden ser servidores cloud o servidores dedicados.
Nos vamos a centrar en los servidores web ya que en este curso vas a poder crear tus
páginas webs y luego decidir dónde alojarlas, ya que lo bueno de todo lo que vas aprender, es
que puedes trasladar tu trabajo de una forma rápida a cualquier opción. Para hacer todas las
pruebas vamos a usar un servidor de páginas web local, así desde cualquier dispositivo de tu
LAN, podrás acceder a la página que has creado. Así, verás en tu Tablet, Smartphone, Smart tv
u ordenador personal lo que estés programando.
1.2. Estructura de directorios en el servidor web.
Una cosa que tenemos que tener en cuenta es el esquema típico de directorios en los
servidores web, es decir, cómo debemos movernos por los directorios cuando pongamos nues-
tros archivos en la web. Para empezar, en nuestro equipo vamos a disponer de una carpeta
raíz donde vamos a tener alojada la página web, que será la que verán nuestros usuarios. Nor-
malmente se llama www o httpdocs. Imaginemos que tenemos en nuestro equipo una carpeta
donde están nuestras webs. Si usamos Windows por ejemplo puede ser:
C:/mentor/webmultiplataforma/www/ index.html
images/inicio/img1.jpg
images/contactar/img2.jpg
32
audio/audio1.mp3
audio/audio2.mp3
video/web/video1.mp4
video/video2.mp4
accesocliente/login.html
accesocliente/avanzado/login2.html
accesocliente/img/img3.jgp
………………
A partir de ese directorio vamos a tener nuestros archivos HTML, que serán las páginas
webs que hayamos creado, además de tener la configuración correcta en el servidor Web, en
este caso Apache, debemos tener al menos un archivo llamado index.html, que será el que
siempre se toma por defecto en cualquier servidor. Cuando ponemos en el navegador www.mi-
dominio.com, automáticamente el servidor nos direcciona al archivo de inicio: index.php, index.
html, index.htm, index.asp…etc., completando la dirección con www.midominio.com/index.
html en el caso que sea este el formato. Si no existe ningún archivo que el servidor entienda
como inicial, mostrará todos los existentes y una ruta parecida a la mostrada anteriormente.
Para poder referirnos a un archivo concreto del servidor, siempre lo podemos hacer de
M1. HTML5
dos formas, de forma relativa o absoluta:
Relativa: Partiendo desde el directorio actual y avanzando o retrocediendo desde él.

Para avanzar sólo tendremos que ir poniendo los directorios inferiores donde indiquen las rutas.
Para retroceder debemos anteponer en cada paso dos puntos y una barra “../” indicando que
subo al directorio padre del archivo, si tuviera que subir dos niveles en el directorio podría po-
ner “../../”.
Absoluta: Ruta completa desde el directorio raíz donde tenemos alojado nuestra página,
es decir, a partir de ‘/’ que hayamos seleccionado en el servidor web.
Tenemos que tener muy en cuenta que en nuestro servidor tenemos varias formas de
movernos por la ruta de directorios y siempre tenemos que tener muy presente donde está el
archivo dentro de su estructura. Imaginemos que estamos en el ejemplo de la página anterior y
nos plantean los siguientes supuestos:
Estamos en el index.html y queremos llamar al archivo de audio “audio1”:
De forma absoluta: “/audio/audio1.mp3”
De forma relativa: “audio/ audio1.mp3”
Estamos en el directorio accesocliente/login.html y queremos llamar al archivo de au-

dio “audio1”:
De forma absoluta: “/audio/audio1.mp3” 33
De forma relativa: “../audio/ audio1.mp3”
Estamos diciendo al sistema que acceda al directorio padre del archivo actual, y a partir de ahí
vaya a la ruta audio/audio1.mp3
Estamos en el directorio accesocliente/avanzado/login2.html y queremos cargar la ima-

gen img3.jgp:
De forma absoluta: “/accesocliente/img/img3.jgp”
De forma relativa: “../img/img3.jgp”
Estamos diciendo al sistema que acceda al directorio padre del archivo actual, y a partir de ahí
vaya a la ruta img/img3.jgp
Estamos en el directorio accesocliente/avanzado/login2.html y queremos cargar el ar-

chivo inicial index.html:
De forma absoluta: “/index.html”
De forma relativa: “../../index.html”

Aula Mentor
Debemos tener soltura para manejarnos por los directorios, ya que en el curso usaremos
muchos recursos y debemos saber las URL de los archivos que queremos cargar, ya sea una
imagen, otro enlace web, una imagen, un video…etc. De todas formas, no te preocupes ya que
durante todo el curso estaremos trabajando sobre todos los apartados y asimilaremos los con-
ceptos.
2. Diferencias entre HTML5 y versiones anteriores.

HTML5 es la última versión de este lenguaje, desde que salió su primera versión han
existido varias modificaciones para adaptarse a las necesidades de los usuarios en cada mo-
mento. Para todos aquellos que hayan visto HTML anteriormente notarán algunos cambios pero
la base observarán que es la misma, solo que han añadidos funcionalidades y simplificado la
inserción de contenidos multimedia.
Durante el curso iré notificando y corrigiendo para aquellos que estén acostumbrado a
programar en versiones anteriores, pero a modo de resumen podemos decir que HTML5 nos
aporta:
- Incorpora etiquetas (canvas 2D y 3D, audio, vídeo) con codecs para mostrar los conteni-
dos multimedia. Actualmente hay una lucha entre imponer codecs libres (WebM + VP8) o
privados (H.264/MPEG-4 AVC).
- Etiquetas para manejar grandes conjuntos de datos: Datagrid, Details, Menu y Com-
mand. Permiten generar tablas dinámicas que pueden filtrar, ordenar y ocultar contenido.
34
- Mejoras en los formularios. Nuevos tipos de datos (eMail, number, url, datetime…) y fa-
cilidades para validar el contenido sin JavaScript.
- Visores: MathML (fórmulas matemáticas) y SVG (gráficos vectoriales). En general se deja

abierto a poder interpretar otros lenguajes XML.
- Drag & Drop. Nueva funcionalidad para arrastrar objetos como imágenes.
- Web Semántica.
Añade etiquetas para manejar la Web Semántica (Web 3.0): header, footer, article, nav, time
(fecha del contenido), link rel=‘’ (tipo de contenido que se enlaza).
Estas etiquetas permiten describir cuál es el significado del contenido. Por ejemplo su importan-
cia, su finalidad y las relaciones que existen. No tienen especial impacto en la visualización, se
orientan a buscadores.
- Nuevas APIs y JavaScript
API para hacer Drag & Drop. Mediante eventos.
API para trabajar Off-Line. Permite descargar todos los contenidos necesarios y trabajar en local.
API de Geo posicionamiento para dispositivos que lo soporten.
API Storage. Facilidad de almacenamiento persistente en local, con bases de datos (basadas en
M1. HTML5
SQLite) o con almacenamiento de objetos por aplicación o por dominio Web (Local Storage y
Global Storage). Se dispone de una Base de datos con la posibilidad de hacer consultas SQL.
WebSockets. API de comunicación bidireccional entre páginas. Similar a los Sockets de C.
WebWorkers. Hilos de ejecución en paralelo.
Para más información puede ver el listado de comandos en:
http://es.wikipedia.org/wiki/HTML5#Diferencias_entre_HTML5_y_HTML4.2FXHTML
3. Preparando el entorno de desarrollo.

Para poder realizar el curso, vamos a necesitar Internet para la descarga de los conteni-
dos y los programas necesarios. Posteriormente, sólo necesitaremos:
• Un ordenador personal. En el que vamos a desarrollar nuestras páginas webs multiplata-

forma y podremos visualizar mediante emuladores nuestro trabajo.
• Un editor de textos. Las páginas webs están creadas con texto llano, texto simple o tam-
bién llamado texto plano. Necesitamos un software que nos ayude a esto.
• Un servidor de aplicaciones. Software que dotará a nuestro equipo de lo suficiente para

poder ejecutar y servir páginas webs. Si se configura bien, podrás acceder desde la Wi-fi de
tu móvil a las páginas webs de tu equipo y ver el resultado. Y con una configuración correc- 35
ta, poner tu web en Internet.
• Navegadores web y emulador de dispositivos. Para probar todo lo que vayamos de-
sarrollando necesitaremos al menos el navegador web que traiga el sistema operativo y
recomendamos Google Chrome por el plugins existente para emular dispositivos desde un
Iphone5, Ipad, Nexus 7, Blackberry, etc., entre otros muchos más.
3.1. Editor de textos.
Vamos a explicar la instalación en diferentes sistemas operativos del editor de textos Su-
blime Text 2, aunque puedes usar cualquier otro de forma gratuita (Notepad++, Kwrite, MacVim,
Vi, Komodo Edit, etc.). El motivo es porque está muy adaptado para los entornos de desarrollo y
automatiza muchos procesos de una forma sencilla evitando posibles errores y creando peque-
ñas macros o snippet.
Lo primero que tenemos que hacer es ir a su web oficial y descargar la versión corres-
pondiente a tu sistema operativo.
http://www.sublimetext.com/2
Nos aparecerá una pantalla mostrando la última versión, y los link de descarga, a partir
de ahí vamos a realizar algunas capturas de pantalla para facilitar la instalación en los sistemas
operativos más usuales:
Aula Mentor
Como se aprecia en la imagen, se necesita una versión superior a OS X 10.6, y para Win-
dows y Linux, disponemos de dos versiones: para 32 bits y para 64 bits.
3.1.1. Instalación de Sublime Text 2 para Windows.
Debemos comprobar si nuestro dispositivo es de 32 bits o de 64 bits, para ello existen

programas gratuitos que te dan información sobre tu pc, pero de una forma rápida puedes hacer
botón derecho sobre el icono de Mi Pc o Equipo y ver las propiedades del mismo si x64 o no.
Cuando estemos seguros de cuál es nuestro sistema operativo seleccionamos el link y

ejecutamos el archivo. Es posible que dependiendo del antivirus nos pregunte si queremos au-
torizar la descarga, siempre que se haga desde la web oficial no debe existir ningún problema
de virus.
36
M1. HTML5
Seleccionamos Next y nos aparecerá la siguiente pantalla preguntándonos la ruta de

instalación:
37
A no ser que queramos usar una ruta diferente, pulsamos Next. Ahora nos pregunta si
queremos agregar una línea al menú contextual del sistema operativo; esto es para que cuando
pulsemos botón derecho sobre un archivo nos de la opción de abrir directamente con nuestro
programa Sublime Text 2. Es útil, por lo que es recomendable marcarla en la instalación:
Aula Mentor
38
Pulsamos Next y nos aparece una pantalla de confirmación:
M1. HTML5
Pulsamos en Install y tendremos instalado nuestro programa correctamente y en la si-

guiente pantalla seleccionamos finalizar la instalación (Finish).
Para probarlo nos podemos ir al icono creado en la instalación por defecto, o si tenemos
algún fichero que sea de texto, pulsamos sobre él con el botón derecho del ratón y nos aparece
el menú contextual:
3.1.2. Instalación de Sublime Text 2 para MAC.
Debemos seleccionar en este caso el link OS X y descargarlo a nuestro equipo. Una vez
esté descargado, nos saldrá la siguiente pantalla:
39
Si ejecutamos ahora el programa Sublime Text 2 veremos que nos pregunta si queremos
ejecutar esta aplicación descargada de internet, seleccionamos abrir y ya tendríamos instalado
nuestro editor de texto avanzado para Mac.
Aula Mentor
3.1.3. Instalación de Sublime Text 2 para Linux.
En este caso debemos seleccionar la versión correcta para descargarnos dependiendo

del sistema operativo instalado. En este caso vamos a usar la versión de 32 bits, ya que nuestro
sistema operativo es i386.
Pulsamos en Linux 32 bit y nos abrirá una ventana indicando si queremos abrir o guardar
el archivo en el ordenador. Lo podemos guardar donde decidamos:
40
3.1.4. Creando snippet propios.
Una funcionalidad que podemos aprovechar con Sublime Text 2 es usar los snippet
creados por nosotros mismos. Si nunca has oído este término, comentarte que los snippet es
“una utilidad usada en programación para referirse a partes reusables de código fuente, código
binario o texto”. Por ejemplo, imaginemos que usamos un texto muchas veces, o por ejemplo
hemos preparado un esquema para escribir un libro, en el cual vamos a repetir en cada capítulo
la siguiente estructura:
#----------------------------------------------------------------------------------------------------------------
#Capítulo:
M1. HTML5
#----------------------------------------------------------------------------------------------------------------
#Título:
#----------------------------------------------------------------------------------------------------------------
#Contenido:
#---------------------------------------------------------------------------------------------------------------
#Ejercicio de iniciación:
#---------------------------------------------------------------------------------------------------------------
#Ejercicio de refuerzos:
#---------------------------------------------------------------------------------------------------------------
#Evaluación:
#---------------------------------------------------------------------------------------------------------------
#Conclusiones:
Si nos fijamos, tenemos textos, símbolos, guiones, espacios concretos, y una estructura 41
fijada. Lo ideal en el supuesto del libro sería mantener siempre la misma estructura, además,
imaginemos que lo podemos no sólo repetir exactamente igual, sino que lo podemos repetir con
un mínimo esfuerzo y escribir tantas veces necesitemos usando la combinación de teclas que
hemos decidido nosotros.
En la documentación del software podemos ver varios parámetros que podemos usar.
No obstante, en el curso vamos a utilizar los más importantes y dejamos del lado del alumno
realizar snippets más avanzados:
http://sublimetext.info/docs/en/extensibility/snippets.html
Bien, pues vamos a ver a continuación cómo poder crearnos nuestros snippets, y vamos
a utilizar el ejemplo anterior para ver cómo con una simple combinación de teclas el programa
nos inserta las veces que desees un trozo de código exactamente igual.
Para ello nos dirigimos a Tools – New Snippet…

Aula Mentor
Directamente nos creará un código automatizado como se puede ver en la siguiente

captura de pantalla:
En este ejemplo podemos ver que nos aparece un texto por defecto:
Hello, ${1:this} is a ${2:snippet}.
Podemos borrar ese texto que aparece y agregar el texto que habíamos comentado an-
teriormente, a modo de ejemplo y práctica, pero lo importante es aprender a crear el snippet
según necesitemos, existirán épocas que programemos mucho en HTML5 y otras en jQUERY,
PHP, etc. Por ejemplo, si hacemos una conexión a una base de datos, no es necesario que vol-
vamos a escribir todo el código de nuevo, simplemente reutilizamos ese código y lo integramos
en nuestro editor de textos. En la siguiente captura de pantalla hemos añadido el texto, para ello
simplemente hemos copiado y pegado lo que queremos reutilizar dentro de las etiquetas
<content><![CDATA[ (texto que quiero reutilizar) ]]></content>
42
Con eso tenemos cubierta la parte de texto que vamos a reutilizar, pero ahora debemos
decidir ¿cómo vamos a recuperar ese texto?, ¿cómo va a saber el programa cuándo debe propo-
nernos insertar este texto?, ¿qué tipo de alarma o disparo (trigger) vamos a utilizar?
Existen dos formas básicas:
• Mediante tabTrigger. Mediante un texto concreto, por ejemplo, quiero que cuando escriba
el texto “estructuracapitulo” y pulsemos el tabulador me agregue el texto automáticamen-
te. Debemos escribir a continuación de la etiqueta </content> el siguiente texto:
M1. HTML5
<tabTrigger>estructuracapitulo</tabTrigger>
• Mediante una combinación de teclas. Por ejemplo quiero que cuando pulse las teclas
“keys”: [”ctrl+shift+e”] me agregue el texto. Debemos tener cuidado en no usar una combi-
nación de teclas ya existente, por ejemplo la combinación de teclas Ctrl + A selecciona todo
el texto, no podemos usar esa combinación ya que habría dos Triggers. Para ello siempre se
suele anteponer las teclas ctrl+shift por la cercanía entre ellas, facilidad y rapidez.
En vez de poner esta información dentro del fichero, se creará a posteriori, es decir,
primero debemos guardar el snippet con un nombre y posteriormente cambiar la combinación
de teclas del usuario de Sublime Text 2. Una forma para saber si la combinación elegida puede
crear conflictos sería tan sencilla como usar la combinación de teclas que deseemos testear en
un archivo vacío, si produce algún resultado, entonces deberemos cambiar la combinación.
Supongamos que hemos creado y guardado el snippet con el nombre:
estructuracapitulo.sublime-snippet
Para asociarlo a una combinación de teclas, nos vamos a Preferences y seleccionamos Key
Bindings - User
43
Nos aparecerán dos corchetes vacíos y ahí es donde vamos a insertar el siguiente texto:
“keys”: [“ctrl+shift+e”],
“command”: “insert_snippet”,
“args”: { “name”: “Packages/User/estructuracapitulo.sublime-snippet” }
3.1.5. Más utilidades de Snippet.
Existen otros parámetros interesantes en la creación de los Snippets, como puede ser la
limitación a una extensión concreta de archivo, así si estamos en un archivo con extensión html
podemos elegir unos tabTrigger concretos y si estamos en un archivo css podemos tener una
respuesta diferente. Para ello usamos las etiquetas <scope></scope>.
Imaginemos que queremos que nuestro trigger funcione sólo cuando estemos en un
archivo de página web con extensión html, para eso debemos agregar después de <tabTrigger>
</tabTrigger> la nueva etiqueta:
Aula Mentor
<scope>source.html</scope>
Si fuera el lenguaje PHP tendríamos que escribir:
<scope>source.php</scope>
Si fuera python tendríamos que escribir:
<scope>source.python</scope>
Y así con las extensiones que quisiéramos usar. En concreto vamos a limitarlo para el
uso de archivos html, aunque si se omite esta etiqueta, se podrá usar para todas las ex-
tensiones sin limitación.
Guardar nuestro Snippet
Ya hemos definido el texto que vamos a reutilizar, cómo vamos a recuperarlo, y ahora
sólo nos falta guardarlo para que Sublime Text 2 lo tenga agregado a su lista de snippets. Para
ello debemos pulsar Ctrl+S (Cmd+S en MAC) o mediante el menú File – Save.
44
Y nos abrirá una ventana indicando la ruta donde debemos guardarla, tenemos que
asegurarnos que se guarda en la ruta /Sublime Text2/Packages/User, al igual que debemos
asegurarnos que la extensión del archivo que guardemos tenga obligatoriamente la extensión
“ .sublime-snippet”.
Debes revisar muy bien estos dos puntos ya que la mayoría de las veces que no funcio-
nan nuestros snippets es por alguno de estos dos motivos. Dicho sea de paso, debemos elegir
un nombre que nos indique y oriente sobre el contenido del archivo, en nuestro caso vamos
a elegir estructuracapitulo.sublime-snippet, introduciremos el nombre que hayamos decidido y
pulsaremos guardar:
M1. HTML5
En Windows 7 la ruta donde guarda el archivo es: 45
C:\Users\TuUsuario\AppData\Roaming\Sublime Text 2\Packages\User
En caso que queramos guardar nuestros Snippet para reservarlos, compartirlos o usarlo
en otro ordenador, debemos recordar que debemos tener activada la opción Mostrar archivos,
carpetas y unidades ocultas:
Aula Mentor
Una vez guardado nuestro snippet podemos probarlo de la siguiente forma: creamos un
fichero nuevo File – File New y empezamos a escribir el nombre que pusimos en el tabTri-
gger (estructuracapitulo): estr y pulsamos la tecla Ctrl+(Tecla Espaciadora), directamente si
no tenemos ningún snippet que empiece igual nos saldrá directamente el texto que habíamos
predefinido, si no nos aparecerá un menú de autocompletado donde podremos elegir.
Y si hemos creado nuestra combinación de teclas, pulsando Ctrl+Shift+e obtendremos

el mismo resultado. Así tenemos dos formas para reutilizar el código, conforme vayamos estu-
diando en el curso veremos la gran utilidad de esta herramienta.
Por último, vamos a ver una última utilidad de los snippets que es la utilización de pa-
rámetros, es decir, en el texto que hemos creado anteriormente tenemos varios apartados, los
cuales siempre que vayamos a reutilizarlo queremos repetir el valor que introduzcamos en todas
las líneas que deseemos.
Por ejemplo, imaginemos que tenemos que poner la nota de cada alumno y tenemos una
estructura básica, pero el nombre del alumno se repite en varios sitios y lo único que cambia es
la nota. Podríamos hacer nuestro snippet de la siguiente forma:
<snippet>
<content><![CDATA[
46 RESULTADOS:
${1:nombre} MATEMÁTICAS:
${1:nombre} LENGUA:
${1:nombre} INFORMÁTICA:
${1:nombre} INGLÉS:
]]></content>

<tabTrigger>resultados</tabTrigger>


</snippet>

M1. HTML5
En este caso hemos creado una variable llamada nombre, donde vamos a insertar el
nombre del alumno y directamente se duplicará en el resto del documento, ahorrándonos poner
en cada línea el mismo valor del parámetro. Lo guardamos con el nombre:
resultados.sublime-snippet
Cuando lo utilicemos, a diferencia del método normal, notaremos que en este caso nos
aparece el cursor en el parámetro que hemos definido con la variable y conforme empecemos
a escribir se duplicarán en todas las líneas; si vamos a escribir Albert Einstein veremos que se
duplica en todos los sitios:
Comentar que se pueden usar varias variables y reutilizar el código, como el contenido
de las variables que decidamos. Para pasar de una a otra, en caso de más parámetros, pulsando
la tecla TAB, saltará al siguiente parámetro.
A lo mejor ahora no le ves la utilidad, pero conforme vayamos realizando código empe-
zarás a crearte muchos snippets y te darás cuenta que tus proyectos son mucho más ágiles. Para
usar más variables sólo debemos ir aumentado el número y cambiando el nombre de la misma,
un ejemplo compuesto para poner de manifiesto el uso de varias variables e interactuar con 47
ellas sería:
<snippet>
<content><![CDATA[
Estando reunidos de una parte ${1:comprador} y el vendedor ${2:vendedor}:
El Sr. ${2:vendedor} expone que vende el artículo a don ${1:comprador} por el precio de ${3:precio}.
La cantidad de ${3:precio} será pagadera por ${1:comprador} en un solo pago realizado el día ${4:fe-
chapago}.
Por otra parte, ${2:vendedor} expone que el artículo es nuevo y tiene dos años de garantía según nor-
mativa vigente.
Reunidos en la provincia de ${5:provincia}, a fecha ${6:fechahoy}:
Firmado: ${1:comprador} Firmado: ${2:vendedor}
]]></content>

Aula Mentor
<tabTrigger>contrato</tabTrigger>


</snippet>
Invéntate tu propio snippet con varios parámetros para comprobar su utilidad.
3.2. Servidor de aplicaciones web.
Como vimos anteriormente las páginas webs se alojan en diferentes equipos, ya sea de
forma local o en servidores remotos. En este curso vamos a usar un servidor de páginas webs
de forma local, es decir, vamos a instalar un software que va a proporcionar a nuestro equipo el
alojamiento de páginas webs.
Para ello vamos a ver cómo se instala en los sistemas operativos más comunes:
Wamp – Software de instalación en (W)indows de un servidor de páginas web HTTP, en este

caso (A)pache, con un gestor de base de datos, en este caso (M)ysql y un lenguaje programa-
ción llamado (P)HP, del lado del servidor.
Lamp – Software de instalación en (L)inux de un servidor de páginas web HTTP, en este caso
48 (A)pache, con un gestor de base de datos, en este caso (M)ysql y un lenguaje programación
llamado (P)HP, del lado del servidor.
Mamp – Software de instalación en (M)ac de un servidor de páginas web HTTP, en este caso
(A)pache, con un gestor de base de datos, en este caso (M)ysql y un lenguaje programación
llamado (P)HP, del lado del servidor.
Si te has fijado, sólo cambia la primera letra indicando el sistema operativo en el cual
será usado, existen muchas versiones gratuitas y en caso que tengas instalada alguna no será
necesario que uses estas versiones, puedes usar la tuya. Si no tienes ninguna, elige la que co-
rresponda a tu sistema operativo.
3.2.1. Instalación de Wamp (Windows 7).
Debemos bajarnos de la web oficial ( http://www.wampserver.com/en/ ) el software, y

elegir la versión correcta dependiendo de si nuestro equipo es de 32 bits o de 64 bits y la des-
cargamos a nuestro equipo:
M1. HTML5
Una vez sigamos los pasos que nos dice la web, descargaremos e instalaremos con las
49
opciones que nos dé por defecto, tenemos que tener en cuenta que salen modificaciones y ver-
siones nuevas cada mes, pero no te debes preocupar ya que para este curso no nos afectará el
número versión:
Aula Mentor
Pulsamos Next y aceptamos los términos de la licencia:
50
Pulsamos Next y elegimos el directorio de instalación:
M1. HTML5
En la siguiente ventana pulsamos Next o elegimos si queremos agregar un icono en el

escritorio para facilitar el acceso:
51
Por último revisamos la configuración y seleccionamos Install:

Aula Mentor
Luego nos preguntará el cortafuegos de Windows a mitad de instalación si queremos

permitir que el servidor Apache tenga acceso a las redes, para ello tenemos que darle permiso
para poder acceder desde otros dispositivos y no tengamos problemas:
52
Una vez finalice la instalación nos preguntará la configuración del servidor SMTP, en este
caso no lo vamos a configurar y en caso de necesitarlo se puede configurar posteriormente, así
que pulsamos Next y ya tenemos instalado nuestro servidor web, con Apache, PHP y Mysql.
M1. HTML5
Finalizamos la instalación pulsando sobre Finish:
53
Al finalizar la instalación observaremos en la barra de tareas un icono nuevo que ha ido

cambiando de color Rojo / Naranja / Verde si todo ha ido bien.
Si pulsamos sobre el icono con el botón izquierdo se nos abrirá un desplegable indican-
do todas las opciones del mismo.
Aula Mentor
Si pulsamos sobre Localhost veremos que se nos abre una página web indicando mucha
información. Esto es señal que ha ido todo bien, toda esta información se refiere a las caracte-
rísticas de nuestro servidor, con la versión del Apache, PHP y extensiones activas.
¡Ojo! Si no se pone en verde revisa que no haya otro programa intercediendo, p.e. Skype suele
dejar sin arrancar al servidor web. Debemos arrancar en tal caso 1º el Servidor Web y luego
Skype, si está por defecto en Skype: Ejecutar Skype al arrancar el equipo, habrá que desactivarla,
cerrar el programa y ya si podemos ejecutar el Servidor Web.
54
Es posible que en el momento de la instalación te salgan otras versiones, aunque no

sea necesario para el curso, es bueno saber que Wamp permite descargarte versiones concretas
de APACHE, PHP, y MYSQL, eso sí, debemos tener cuidado porque algunos son incompatibles
entre sí. Para ello, debemos abrir nuevamente el menú del WampServer y pulsamos en la opción
que queramos obtener:
APACHE Sobre APACHE / Version / Get more
MYSQL Sobre APACHE / Version / Get more
PHP Sobre APACHE / Version / Get more
Aunque para este curso no es necesario debes saber que si trabajas en un servidor
remoto, este tiene unas versiones instaladas, es bueno tener la misma configuración que tenga
el servidor remoto donde vayas alojar tus páginas webs, ya que si son versiones muy distintas
y difieren entre sí tendrás opciones y funcionalidades distintas, por lo que tendrás que retocar
y modificar el código que has realizado, pero todo esto afecta más cuando trabajes con PHP y
Mysql.
M1. HTML5
3.2.2. Instalación de Lamp (Linux Ubuntu).
1º) Instalación de Apache.
Para ello debemos tener Internet, ejecutar un terminal y escribir el siguiente comando:
sudo apt-get install apache2
Empezarán a salir mensajes y se instalará automáticamente. El servidor web normalmen-

te se inicia cuando arranques el equipo, en caso de no tenerlo configurado así, se puede iniciar
de forma manual, para ello debes escribir en el terminal el siguiente comando:
sudo service apache2 start
Para detener el servicio:
sudo service apache2 stop
Y para reiniciarlo, en caso de haber realizado alguna modificación en la configuración:
sudo service apache2 restart
El directorio donde alojaremos nuestras webs será:
/var/www/html
55
Si abrimos el navegador y escribimos localhost, nos aparecerá una pantalla indicando la
configuración del servidor:
En caso de tener problemas de permisos, puedes usar el siguiente comando, teniendo

en cuenta que estamos en el directorio de desarrollo, sino no es necesario que lo hagas:
sudo chmod -R 775 /var/www/html
Con esto tenemos ya podríamos seguir el curso sin problemas, ya que sólo necesitamos
el servidor web. De todas formas, vamos a dejar instalado PHP y Mysql.
Aula Mentor
2º) Instalación de PHP.
Para php debemos escribir en el terminal:
sudo apt-get install php5 libapache2-mod-php5 php5-cli php5-mysql
Para probarlo deberíamos reiniciar el servidor Apache como hemos visto anteriormente.
Luego nos podríamos crear un archivo php de prueba escribiendo por ejemplo en el terminal
sudo gedit /var/www/html/miconfiguracion.php y escribe el siguiente contenido:
<?php
phpinfo();
?>
Si nos vamos a nuestro navegador y escribimos la dirección URL siguiente: /localhost/

miconfiguracion.php nos aparecerán los datos de instalación y parámetros del PHP; así nos ase-
guramos que está todo correctamente instalado.
Si nos fijamos después de la carpeta /www/ ha agregado en la instalación una carpeta

llamada /html/ y es a partir de ahí, donde podemos agregar nuestras páginas webs, aunque el
navegador en este caso (por la configuración realizada en el Apache que es quien les sirve las
páginas webs) hemos escrito localhost/nombreFichero. Debes prestar mucha atención en es-
tos casos ya que dependiendo de la versión que utilices te puede crear una ruta diferente, pero
56
no te preocupes porque todo esto se puede revisar en el fichero del apache.
3º) Instalación de Mysql.
Para instalar nuestro gestor de bases de datos debemos insertar los siguientes comandos:
sudo apt-get install mysql-server mysql-client libmysqlclient-dev
Nos pedirá confirmación y además tendremos que asignar un usuario y contraseña:
Escribimos una contraseña para el usuario de Mysql, y debemos tener cuidado en no

olvidar ésta ya que si queremos hacer cambios a posteriori no vamos a poder. Si queremos tam-
bién podemos instalar un administrador gráfico para el gestor de base de datos, el más usado es
el PhpMyAdmin, y para instalarlo debemos escribir en el terminal:
M1. HTML5
sudo apt-get install phpmyadmin
Y después de aceptar la confirmación nos pedirá para qué servidor queremos instalarlo,
en nuestro caso Apache2:
Marcamos con el espacio la opción correcta, pulsamos intro. A continuación nos pre-
guntará que debemos tener alguna base de datos instalada, en principio usamos los parámetros
por defecto y pulsamos Aceptar:
57
Pulsamos Enter y nos pedirá la creación de la base de datos dbconfig-common, pulsa-

mos nuevamente Enter y nos pedirá un usuario administrador para la gestión de la base de datos
nueva:
Y después de unos instantes ya tendremos instalado nuestro gestor gráfico de bases de

datos. Para comprobar que todo ha ido correctamente, vamos nuevamente al navegador y escri-
bimos la siguiente dirección: localhost/phpmyadmin nos debe aparecer nuestro gesto gráfico
pidiéndonos Usuario y Contraseña:
Aula Mentor
3.2.3. Instalación de Mamp (MAC).
Hay diferentes formas de tener instalado en nuestro MAC un servidor de páginas web
con Apache, PHP y Mysql. Podemos usar Mamp o Xmamp, en este manual vamos a ver una
forma fácil y gratuita de instalar Mamp para poder seguir el curso sin problemas.
Nos debemos descargar el código de la web:
http://www.mamp.info/en/download
Y pulsamos en el link DOWNLOAD en este caso, la versión es la 3.05, es posible que

58 exista una superior, de todas formas si deseas tener la misma versión en internet puedes encon-
trar las versiones anteriores.
Una vez descargado ejecutamos el programa de instalación:

M1. HTML5
59
Pulsamos en Continuar y vamos aceptando las opciones de configuración por defecto,
en uno de los pasos, nos pedirá la contraseña del usuario del equipo. La introducimos, comen-
zará la instalación, y pasados unos minutos tendremos finalmente nuestro servidor de páginas
web instalado.
Una vez que lo tengamos instalado tendremos todas las opciones del programa dentro
del FINDER / APLICACIONES / MAMP.
Aula Mentor
Cuando ejecutemos el programa MAMP nos pedirá Arrancar MAMP PRO o Arrancar
MAMP; a no ser que queramos usar la versión de pago debemos desmarcar la opción Compro-
bar MAMP PRO al arrancar MAMP y pulsar en Arrancar MAMP:
Una vez arranque el programa tendremos configurado nuestro servidor de páginas web
de forma gratuita y podremos usarlo para realizar los ejercicios del curso:
60
Pulsamos sobre Iniciar Servidores y podemos comprobar que se nos han activado las
pestañas de Servidor Apache y Servidor MySql, además nos habrá cambiado la interfaz, pudien-
do pulsar sobre la opción Abrir página de inicio:
Y ahora si hacemos clic en Abrir página de inicio podremos comprobar que está co-
rrectamente instalado.
M1. HTML5
Si queremos acceder a nuestro directorio raíz, donde deberemos escribir nuestras pági-
nas webs, debemos escribir en el Navegador localhost:8888, o acceder a través de la ruta “/
Aplication/MAMP/htpdocs”. Para probar que todo está correcto y además el directorio donde
debemos trabajar en el curso es ése, podemos hacer una prueba. Prueba a escribir el siguiente
link:
http://localhost:8888/ 61
Todo esto se puede configurar en las preferencias del programa Mamp:
Si prefieres, puedes pulsar en la opción Establecer los puertos 80 y 3306 y así podrás
acceder directamente sin tener que escribir el puerto a continuación de localhost. Pudiendo ac-
ceder directamente desde el navegador con http://localhost.
3.3. Navegador y emulador de dispositivos.
Aunque todos los sistemas operativos disponen de un navegador propio (o varios), va-
mos a usar Google Chrome. Pero ¿puedo usar el navegador que tengo instalado? existen plugins
y complementos para la mayoría de navegadores, no obstante para unificarnos, independien-
temente de la plataforma, hemos decidido usar este. Además todas las capturas de pantalla y
Aula Mentor
configuración están realizadas para este. De todas formas no existen grandes diferencias para
usarlos, ya que en definitiva lo que necesito es que me emule un dispositivo, por ejemplo un
IPhone 5, para poder ver cómo se vería mi trabajo en diferentes dispositivos.
Para instalarlo podemos realizarlo a través de la página oficial:
https://www.google.com/intl/en/chrome/
Una vez instalado el navegador Google Chrome con la configuración por defecto, debe-
mos irnos a la tienda de Google para descargarnos el emulador Ripple:
https://chrome.google.com/webstore/category/apps
En el buscador que nos aparece debemos buscar “Ripple emulator beta”:
62 Pulsamos sobre el icono y nos abrirá una ventana preguntándonos
si queremos añadir a Google Chrome:
Una vez pulsemos en “Añadir”, nos aparecerá una ventana de confirmación de instalación
y podremos usar emulador de dispositivos. Para saber que lo tenemos correctamente instalado,
debemos fijarnos en la parte superior derecha y nos debe aparecer el icono de la extensión.
Hasta el módulo de JQuery Mobile no disfrutaremos plenamente de esta extensión, pero

sí podremos ir probando los resultados en los dispositivos. Para activar el emulador sólo debe-
mos pulsar sobre el icono y activar la extensión Ripple:
M1. HTML5
Pulsamos sobre ENABLE y a partir de ese momento se nos abrirá una nueva ventana y
podremos configurar en el menú de la izquierda diferentes opciones: el dispositivo a emular, la
orientación de la pantalla, modificar el acelerómetro, geolocalización, etc.
63
4. Resumen.
- Existen diferentes dispositivos en el mercado que tienen acceso a Internet, cada uno de ellos
tiene una pantalla y resolución concreta, por lo que la misma web puede tener diferente
apariencia dependiendo del dispositivo.
- Internet nació de la necesidad de la comunicación entre personas, para ello se tuvo que de-
sarrollar un protocolo de comunicación (HTTP), un lenguaje (HTML) y una forma de acceder
a los diferentes recursos (URL).
- Para poder conectarnos desde nuestro equipo a Internet necesitamos un Proveedor de Servi-
cios de internet (ISP) que nos comunique con las otras redes. En la mayoría de los casos se
Aula Mentor
utiliza un Router-Modem; dependiendo de las características de éste, la distancia y nuestro

ISP tendremos mayor o menor velocidad.
- Los routers pueden ser inalámbricos o alámbrico (con cable) pudiendo conectarse diferentes
dispositivos a él y a su vez a Internet. La velocidad se verá reducida tanto en cuanto el nú-
mero de dispositivos aumente.
- Para poder ver las páginas webs se necesita un servidor que nos sirva e interactúe con las
páginas webs alojadas en él. En la mayoría de los casos se suele usar como servidor web
HTTP Apache, ya que es libre y de código abierto.
- El servidor de páginas webs lo podemos tener en diferentes localizaciones, tanto en un hos-

ting externo como en nuestro propio domicilio, ya que una vez que estamos conectados a
Internet, seríamos un nodo más de la red, con la única limitación de la velocidad de trans-
misión dada por nuestro ISP.
- HTML5 es la última versión de este lenguaje e incorpora muchas funcionalidades y mejoras,

entre las más destacadas estarían: el canvas 2D y 3D, audio, vídeo y estructura del código.
- Para escribir páginas webs podemos usar cualquier editor de texto plano. El resultado final
es el mismo, pero las herramientas que nos traiga, nos ayudará para escribir código y crear
páginas webs más rápida y cómodamente.
- Los Snippet son utilidades que usan los software de programación para referirse a partes
reusables de código fuente, código binario o texto. Con ellos podemos repetir texto e inclu-
64 so pasarle parámetros, pudiendo insertar el valor de esos parámetros a la vez en diferentes
sitios, agilizando la tarea del programador web.
- Dentro de los diferentes lenguajes y servidores web, tenemos de forma gratuita (Wamp –
para Windows), (Lamp – para Linux) y (Mamp – para Mac). Todos ellos instalan Apache para
mostrar las páginas webs, Mysql como gestor de base de datos y PHP será un lenguaje de
programación del lado del servidor que permite incorporar directamente en el documento
HTML.
- Si usamos nuestro equipo como servidor web, tendremos un directorio donde almacena-
remos los archivos HTML donde tendremos nuestras páginas webs. Dependiendo del S.O.
puede ser c:/www/, /aplication/mamp/www/htpdocs, /var/www. o cualquier otro que
asigne el programa de instalación. Posteriormente se puede modificar a otro directorio en la
configuración del Apache.
Unidad 2: Webs con HTML5
1. Estructura básica de HTML5.
1.1. Cabeceras, navegación, pie de página y Anexos.
Como hemos comentado anteriormente, HTML5 difiere en algunos puntos de sus ver-
siones anteriores, sobre todo por la forma de trabajar y estructurar las páginas. Ahora debemos
hacer un buen trabajo de planificación para poder avanzar sin tener que modificar partes ya
programadas anteriormente y sacarle todo el partido a este lenguaje. Un buen trabajo previo nos
puede ahorrar y facilitar posibles modificaciones. 65
Todo documento o página web en HTML5 debe tener esta estructura básica:
<!DOCTYPE html>

<html lang=”es”>

<head>
<title> Título de la página </title>
<meta charset=”utf-8” />
</head>

<body>
<p> Mi primera Web con HTML5 </p>

Aula Mentor
</body>
</html>
Esta es la estructura básica reducida de cualquier página web, posteriormente veremos

una un poco más avanzada, ideal para guardar como un Snippet propio como vimos en la uni-
dad anterior, pero con este ejemplo se puede ver a simple vista para todo el que haya progra-
mado anteriormente páginas web que cambia la estructura. Aparentemente puedes pensar que
son detalles sin importancia, pero nada más lejos de la realidad; están pensados en la semántica
de la web y agilizando la creación de las mismas.
Voy a explicar detenidamente cada elemento para que comprendamos correctamente la

estructura básica; al inicio iremos un poco más lentos para crear una buena base y poder ir más
rápidos en las siguientes secciones:
<!DOCTYPE html>
El doctype o también llamado DTD, no se debe confundir con el tipo de archivo que lo
contiene, con él le estamos diciendo al navegador el tipo de documento y las reglas genéricas
para renderizar a toda costa la página HTML; dependiendo de éste, el navegador se adaptará a
un formato u a otro. Si no existiera esta primera línea el navegador no sabría qué reglas debe
procesar para la página, lo que puede hacer que dependiendo del navegador no se visualice
como teníamos previsto.
El modo de compatibilidad, o quirks mode, será el modo que adoptará el navegador y

66 como mostrará la página, si no encuentra declarado el doctype en la primera línea del archivo
HTML. Incluso un espacio o línea en blanco antes de esta línea puede provocar que el nave-
gador considere la página en modo quirks mode, cosa que debemos evitar a toda costa.
Para los programadores de versiones anteriores de HTML pensarán que falta texto al doctype, ya
que estarán acostumbrados a algo parecido a esto:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xht-

ml1/DTD/xhtml1-transitional.dtd”>
Hoy en día para beneficio de todos, se ha simplificado y no es necesario escribir nada

más. Por ejemplo, si una página web está realizada en HTML5 no tendrá ese encabezado. Para
comprobarlo tenéis que situaros sobre ella, pulsar botón derecho del ratón sobre el interior de
la página web, seleccionar p.e. en Google Chrome “Ver código fuente” y comprobar que está
realizada en HTML5 si comienza por las siguientes líneas:
<!DOCTYPE html>
La siguiente línea que nos encontramos es esta:
Este tipo de etiquetas  nos sirve para indicar comentarios dentro del có-
digo de programación HTML, en principio se usarán para agregar información al código (autor,
empresa…), o ayudar al programador a entender u organizar el código para facilitar el mante-
nimiento de la página en un futuro. No es obligatorio de cara a la web, pero sí recomendable
para nosotros aunque también debéis tener en cuenta que, aunque el navegador no los muestra
M1. HTML5
inicialmente, usando el método comentado en la nota anterior podemos ver el código fuente,
por lo que nunca debemos poner información trascendental: usuarios, contraseñas o cualquier
otra que nos sea en perjuicio nuestro.
Como comentamos en la unidad anterior, las páginas webs, están llenas de etiquetas.
Éstas se deben abrir y cerrar para informar al navegador cuando hemos finalizado cada una, de-
bemos ser muy organizados y tener cuidado en el orden de apertura y cierre de las mismas, es
decir, debemos ir cerrando las etiquetas en el mismo orden que las abrimos, y nunca cambiar el
orden. Las etiquetas básicas de cualquier documento HTML son <html><head><body> con sus
correspondientes cierres.
<html lang=”es”> 67
<head>
</head>

<body>
</body>
</html>
Aula Mentor
En esta línea le decimos al navegador que vamos abrir la etiqueta html y vamos a usar
el lenguaje “es” para el Español. La etiqueta <html></html> sólo puede ser declarada una única
vez en el documento.
<head>
Indicamos el inicio del encabezado de la página (heading) mostrando opciones adicio-

nales a la página, como pueden ser las hojas de estilo, archivos adicionales con <link..> que se
verán en unidades posteriores, <title> para el título de la página o los <meta charset:
La meta etiqueta charset, indica el juego de caracteres usado (charset), es un detalle muy
importante, ya que la codificación puede hacer que algunos caracteres aparezcan con símbolos
no legibles, con algunos caracteres especiales como pueden ser: tildes, ñ...etc.
Hay diferentes métodos de codificación de caracteres, es decir, internamente las letras se

codifican siguiendo unas normas que posteriormente son representadas, las más normales son:
ASCII: Juego de caracteres en el inicio de la web, al no existir acentos en inglés, no existen

problemas. Para poder usarlos correctamente debíamos de usar unos caracteres especiales, por
ejemplo para poner camión en internet y se viera correctamente se debía de usar en su lugar:
camión.
68
ISO-8859-1: También llamada Latin-1 o Europea occidental, se codifican añadiendo caracteres
latinos y otros signos de puntuación.
ISO-8859-15: Añade símbolos nuevos, entre otros el del €.
UTF-8: Conjunto de caracteres internacionales de Unicode de diferentes idiomas. No es necesa-

rio usar caracteres extraños para representar la mayoría de los caracteres y nos permite represen-
tar los miles de caracteres de los diferentes idiomas para que pueda ser multilenguaje, facilitando
la visualización de nuestra web sin tener que adaptarnos a la codificación de cada país.
La siguiente línea que nos encontramos en el documento es:
<title> Título de la página </title>
El <title> es el título que aparecerá en la página web, en todo navegador web, aparece
un título indicativo de la página web en la que estamos. Vemos un ejemplo de como se muestra
a continuación en los diferentes navegadores, Chrome, Firefox, Explorer y Safari:
M1. HTML5
Google Chrome 33.0.17 Safari 5.1.7
Internet Explorer 10
69
Mozilla Firefox 28.0
Debemos probar nuestras web en diferentes navegadores, si usas Windows hay versio-
nes de Safari para Windows, y si usas Mac hay también versiones de Chrome, Firefox y Explorer.
Lo importante que debéis pensar como programadores webs es ser lo más estándar posi-
ble, que tus webs o aplicaciones se vean en la mayoría de dispositivos y evitar caer en el mono
desarrollo, ya que éste siempre es limitado, pero en caso de duda, tenemos que ir siempre a la
mayoría actual y por supuesto debemos soportar los navegadores que sabemos que van a usar
nuestro usuarios mayoritariamente.
Cuando finalicemos una web podemos usar aplicaciones web online, que nos ahorran
ese trabajo y realizan una captura de pantalla previsualizando cómo se verá tu web en el nave-
gador correspondiente.
Un ejemplo puede ser: http://browsershots.org/. Como es una web externa, es posible

que dependiendo de la fecha aparezca de modo diferente, lo importante es: saber que existen
sitios web para hacer pre visualizaciones de nuestra web en diferentes navegadores.
Como visualizar tus webs en distintos navegadores:

Aula Mentor
Elegimos los navegadores que queremos testear y agregamos la dirección a testear en

Enter URL here:
70
Hacemos clic en Submit

M1. HTML5
Guardamos los diseños seleccionando Download All y nos descargará una carpeta con
todas las capturas de pantalla de la web que hemos puesto y los navegadores seleccionados.
Ahora bien, si estamos trabajando en local, y no tenemos la web subida a ningún servidor en
internet, no podremos hacer esto a no ser que dispongamos de algún hosting ya sea de pago o
gratuito donde hayamos alojado nuestra web.
También se puede usar si tienes los conocimientos suficientes e internet tu propio or-
denador para almacenar las páginas web de internet, para ello necesitas; usar la IP pública de
tu router (mejor si es estática), abrir los puertos TCP/IP del puerto 80 en el router, direccionar
a tu servidor/pc y configurar el servidor local en tu ordenador correctamente para que acepte
peticiones en el puerto 80. Así, si compras un dominio, le modificas el registro A CNAME y agre-
garias la dirección IP de tu casa, cuando escribas www.tudominiocomprado.com accederás al
servidor web que has creado de tu casa u oficina.
Te recomiendo inicialmente que adquieras un hosting gratuito en los diferentes sitios

web que hay y vayas subiendo tus pruebas, así comprenderás un poco más la metodología usual
en el mantenimiento de páginas web, pero recuerda que para superar el curso, deberás entregar
independiente todas las actividades con los archivos y carpetas creadas.
Seguimos con la estructura de la web. La siguiente etiqueta es imprescindible:
<body>
Con esta etiqueta body o cuerpo de la página, le estamos diciendo al navegador que a
partír de ahí va a ser donde vamos a insertar el contenido que él tiene que mostrar al usuario,
por lo que al igual que las etiquetas anteriores, es fundamental que esté declarada para un co- 71
rrecto funcionamiento. En este primer ejemplo hemos escrito un pequeño párrafo con un texto
de ejemplo usando la etiqueta <p> que posteriormente veremos:
Como hemos comentado anteriormente, debemos cerrar todas las etiquetas HTML5 en
el orden correcto e inverso al que hemos abierto, como hemos visto en la Fig. U2.img1. Por lo
que las siguientes etiquetas obligatorias son:
</body>
</html>
Con el código descrito, tendrías definido una estructura básica de una web, puedes verlo
dentro del Ejemplo 0 dentro del módulo 1, HTML5.
Para poder continuar con las siguientes secciones debemos poner de manifiesto que
para cualquier desarrollo web debemos utilizar siempre una planificación y organización ade-
cuada. Para ello, lo más usual es usar storyboard (representación gráfica de bocetos/páginas y
su secuencia/interacción con el usuario), con ello podemos organizar tanto la parte lógica como
posteriormente la visual de la aplicación. Existen diversos programas para ello, pero lo impor-
tante es pararse y realizarlo, aunque sea en papel, para posteriormente seguir el patrón diseñado
más fácilmente.
Normalmente siempre vamos a tener un encabezado de página, una zona de navegación

para mostrar las diferentes páginas de la web, un contenido relacionado con cada página, op-
Aula Mentor
cionalmente una zona anexa para otros contenidos y un pie de página.
Diferentes ejemplos y diseños podrian ser los siguientes
Fig. U2.Img2 Fig. U2.Img3
72
Fig. U2.Img3 Fig. U2.Img4
Existen muchas formas de organizar una web, y se pueden hacer según necesitemos,
siguiendo estos ejemplos podemos tener las siguientes partes:
Encabezado: Normalmente va a ser una imagen o presentación de imágenes, también puede

ser el logotipo y texto del nombre de una empresa; si existe, se suele situar en la parte superior.
Navegación: Nos va a indicar la navegación de la página, con qué secciones y enlaces voy a
interactuar en la página web. Un ejemplo típico es crear los siguientes elementos en el menú:
M1. HTML5
INICIO | PRODUCTOS | ¿QUIÉNES SOMOS? | CONTACTAR
Se puede organizar la navegación en la parte superior, en la parte de la izquierda, dere-

cha, encima del encabezado o donde tenga sentido según nuestra página. Según el requerimien-
to de la web se decidirá un diseño u otro.
Contenido: Vamos a tener el contenido principal de la web, datos, imágenes, vídeos…etc.
Anexos: Esta sección que nos proporciona HTML5 es para agregar contenido adicional que
queramos a la web, un ejemplo típico es poder agregar la zona de redes sociales, si es una web
de empresa y queremos que el cliente siempre tenga presente un anexo para CREAR PEDIDO
| VER CARRITO | CONTACTAR | ME GUSTA…etc.
Los anexos están dentro del body o de las secciones <section>, que veremos más adelan-
te. Con HTML5 se introduce unos nuevos elementos que facilitan al programador la organización 73
del contenido web, anteriormente esta labor se realizaba primero con CSS y en algunos casos
de HTML se organizaba el contenido con tablas, pero con los diferentes dispositivos que visitan
hoy una web y sus pantallas, es difícil que esas estructuras cumplan su cometido en la mayoría
de los casos.
Las etiquetas nuevas que nos proporciona son: <headers>, <nav>, <footer> y <aside>,
por ejemplo, vamos a escoger un diseño y asociarle los elementos nuevos:
<headers>
<nav>
<body>
<footer> <aside>
Fig. U2.Img5

Aula Mentor
El código correspondiente a la imagen anterior, podría ser algo como se muestra a con-
tinuación:
<!DOCTYPE html>
<head>
</head>
<body>
<header>

<h1>MI PRIMERA WEB CON HTML5</h1>

74
</header>
<nav>
<ul>
<li>Inicio</li>
<li>Productos</li>
<li>Empresa</li>
<li>Contactar</li>
</ul>
</nav>
<footer>
<p> Pie de página construido con HTML5 </p>

M1. HTML5
</footer>
</body>
</html>
En el navegador se verá algo parecido a esto:
Puedes ver el código en el ejemplo1.html de los recursos del curso.
Los elementos existentes en esta web fuera de la estructura básica son:
Párrafos: <p> 75
Títulos: <hx>
Listas ordenadas y desordenadas: <ul><li>
1.2. Párrafos.
En HTML5 al igual que en versiones anteriores disponemos de la etiqueta <p> y </p>

para encerrar un texto, como en el ejemplo anterior
<p> Pie de página construido con HTML5 </p>
Todo texto que exista en una página web o aplicación debe estar contenido dentro de
alguna etiqueta, no se puede omitir porque dificulta el diseño y posterior mantenimiento de la
web y no cumple con las normas establecidas. Por defecto, cada párrafo que insertemos en la
web contendrá un salto de línea antes y después de él. Aunque en el capítulo de CSS3 veremos
cómo modificar esta acción.
Para ver ejemplos de párrafos vamos a usar un método muy usado en programación.
Inicialmente cuando estamos en fase de diseño, construyendo la aplicación web, no vamos a a
tener contenido, ya que el contenido se agregará posteriormente, o incluso lo creará el propio
cliente. Pero aunque no tengamos ningún contenido, necesitamos textos y párrafos para ver
cómo va desarrollándose la web.
Aula Mentor
En estos casos se suele usar texto neutro generado; normalmente se usa: Lorem limsum
que podemos encontrar en internet o directamente en esta web http://es.lipsum.com/ . Imagi-
nemos que queremos probar y tener tres párrafos en nuestra web, pero queremos agregar texto
y no tenemos ninguno todavía, deberíamos tener algo parecido a esto:
<p> Párrafo 1 </p>
<p> Párrafo 2 </p>
<p> Párrafo 3 </p>
Nos dirigimos a la web, seleccionamos 3 párrafos y nos genera el código correspondien-

te, al que le añadiremos al inicio y fin de cada párrafo la etiqueta <p>:
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultrices massa at odio dapibus,
a pellentesque purus aliquet. </p>
<p>Suspendisse sed enim quis nisi condimentum tempor at in nisi. Maecenas rhoncus semper varius.
Praesent sodales leo eget lorem rhoncus vulputate. </p>
<p>Mauris ut dui neque. Mauris purus risus, placerat sodales eleifend eget, tincidunt et orci. Cras in
fermentum risus. Pellentesque gravida ue sit amet. Curabitur at nulla convallis ipsum placerat susci-
pit. Sed ultrices dictum rhoncus. </p>
76 Aunque visualmente puede parecer que el salto de línea lo hemos dado nosotros, no
nos podemos dejar engañar, los saltos de línea nos los han dado las etiquetas <p> y </p>, si nos
fijamos obtenemos el mismo resultado haciendo:
<p> Párrafo 1 </p>
<p> Párrafo 2 </p>
<p> Párrafo 3 </p>
Que esto:
<p> Párrafo 1 </p> <p> Párrafo 2 </p> <p> Párrafo 3 </p>
En el ejemplo1b.html podrás ver cómo quedarían visualmente los párrafos que hemos
añadido. Te recomiendo que empieces por tu propia cuenta un archivo e intentes usar los com-
ponentes que hemos visto hasta ahora.
1.3. Títulos.
Los siguientes elementos que vamos a enseñar son los títulos. Si nos fijamos en el código
hemos escrito:
<h1>MI PRIMERA WEB CON HTML5</h1>
HTML5 nos proporciona hasta 6 niveles de título, con ellos podemos organizar el conte-
M1. HTML5
nido de una forma más lógica y posteriormente con las modificaciones del diseño CSS3 podre-
mos enriquecer globalmente y con unas pocas directivas los títulos.
Tendríamos entonces:
<h1>Título de nivel 1</h1>
Y en nuestro navegador veríamos algo como esto:
77
En el ejemplo1c.html tienes el código fuente. Practica intentando imitar el resultado sin

usar el código del archivo.
Los títulos deben usarse siempre para diferenciar secciones en un texto o aumentar/
disminuir la importancia al texto que estamos tratando. Nunca se debe usar para disminuir
o reducir el tamaño del texto o poner en negrita, para ello existen otros elementos que
veremos en capítulos posteriores.
Tal es la importancia de los títulos que W3C lo remarca y el buscador de google busca
este tipo de elementos para realizar su propio mapa web, por lo que es necesario elegir correcta-
mente los títulos en cada momento y nunca usarlo para el aspecto gráfico o distinción del texto.
1.4. Listas.
El siguiente elemento que vamos a ver son las listas en páginas web. Éstas pueden ser
de tres tipos:
- Listas ordenadas.
- Listas desordenadas.
- Listas de descripciones.
Aula Mentor
Listas ordenadas
Nos muestra una lista ordenada o numerada, para ello se usan las etiquetas <ol> (orde-
red list) seguido de <li> (list ítem) para elemento de la lista, un ejemplo puede ser:
<ol>
<li>Unidad 1</li>
<li>Unidad 2</li>
<li>Unidad 3</li>
<li>Unidad 4</li>
</ol>
Nos mostraría en el navegador:
78
Practica intentando imitar el resultado sin usar el código del archivo.
En algunas etiquetas de HTML se pueden agregar parámetros u opciones distintas, éstas

se llaman atributos y dependiendo de cada etiqueta tendremos unas posibilidades u otras.
En concreto a las etiquetas de lista se pueden agregar diferentes atributos. Se pueden

usar los atributos de las versiones anteriores, más una nueva que se ha incorporado en HTML5.
Atributo Valores posibles Descripción

reversed reversed Especifica la lista en orden in-
verso (9, 8, 7...). Incorporado
en HTML5
start number Especificamos el valor inicial
de la lista
M1. HTML5
type 1 Especificamos el carácter usa-

do para la numeración: numé-
A rica, alfanumérica, números
romano, etc. Por defecto siem-
a pre saldrá de tipo numérico:
“1”.
I
Todos estos valores también se pueden modificar desde CSS3, ya que es específica para
el diseño. Además se pueden anidar diferentes listas, unas dentro de otras.
Por ejemplo si escribimos:
<ol>
<li>Unidad 1</li>
<ol type=”A”>
<li>Elemento 1.</li>
79
</ol>
<li>Unidad 2</li>
<ol type=”a” start=”4”>
</ol>
<li>Unidad 3</li>
<ol type=”I”>

Aula Mentor
</ol>
<li>Unidad 4</li>
<ol type=”i” reversed>
</ol>
</ol>
Veremos dependiendo del navegador que no funciona tal y como he comentado, esto
es porque la tendencia es que todos los navegadores con las últimas actualizaciones vayan
soportando este tipo de atributos. En la imagen siguiente podemos ver como el atributo rever-
sed, funciona correctamente en Mozilla Firefox 28.0, Google Chrome, Opera y no en Internet
Explorer y Safari.
80 Debemos tener cuidado con determinados atributos, aunque lo importante es que la

tendencia es que todos los navegadores soporten HTML5, debemos saber cuál es el perfil de
nuestros usuarios. Todo lo que estamos aprendiendo hoy de este lenguaje tenemos la certeza
que va a mantenerse por un buen tiempo ya que va implantándose poco a poco, y si sacan al-
guna versión nueva será sólo pequeñas modificaciones, pues la base será muy similar.
Atributo “reversed” en la Unidad 4 mostrado en distintos navegadores:
Mozilla Firefox 28.0 Microsoft Internet Explorer 10.0.9200.16660

M1. HTML5
Safari 5.1.7 Google Chrome 33.0.1750.154 m
En el ejemplo1e.html tienes el código fuente. Practica intentando imitar el resultado sin

usar el código del archivo. Pruébalo en diferentes navegadores y observa su resultado.
Listas no ordenadas
81
En estos casos la lista no viene precedida por un número, sino por un carácter están-
dar que en versiones anteriores se podía cambiar, y en HTML5 por ahora no nos da opción a
cambiarla (a fecha de este documento); pero si nos proporciona diferentes niveles e imágenes
asociadas según la profundidad del nivel de la lista.
Para ello, se usa la etiqueta <ul> (unordered list):
<ul>
<li>Inicio</li>
<li>Productos</li>
<li>Empresa</li>
<li>Contactar</li>
</ul>
Por supuesto podemos entrelazar y anidar las listas, sean ordenadas, con listas des-
ordenadas, un ejemplo podría ser:
Aula Mentor
<ul>
<li>Inicio</li>
<li>Productos</li>
<li>Empresa</li>
<li>Contactar
<ol>
<li>Por teléfono</li>
<li>Por mail</li>
<li>Otros
<ul>
<li>En la delegación de Madrid</li>
<ol type=”i”>
82 <li>Teléfono 111222333</li>
<li>Teléfono 222333444</li>
</ol>
<li>En la delegación de Londres</li>
</ul>
</li>
</ol>
</li>
</ul>
Debe parecerse a la siguiente captura de pantalla, dependiendo del navegador:

M1. HTML5
Listas de descripciones
Muchas veces para hacer glosarios o si la web que estamos desarollando requiere el
uso, podemos usar listas de descripciones donde tendremos un elemento y su descripción, por
ejemplo si escribimos el código:
<dl>
<dt>Término 1</dt>
<dd>Descripción 1</dd>
<dt>Término 2</dt>
<dt>Término 3</dt>
83
</dl>
<dl>
<dt>h1</dt>
<dd>Títulos de nivel 1</dd>
<dt>h2</dt>
<dt>h3</dt>
<dt>h4</dt>
<dt>h5</dt>

Aula Mentor
<dt>h6</dt>
</dl>
Practica intentando imitar el resultado sin usar el código del archivo. Debe parecerse a
la siguiente captura de pantalla:
1.5. Citas.
En determinadas ocasiones necesitaremos escribir un texto que nos indique una cita o
nota aclaratoria dentro de un párrafo. Para ello, podemos usar la etiqueta <blockquote>. Por
tanto si escribimos:
84
<p> No debemos olvidar lo que nuestro gran amigo Albert Einstein dijo:</p>
<blockquote>”Hay una fuerza motriz más poderosa que el vapor, la electricidad y la energía atómica: la
voluntad”</blockquote>
Destacar que <blockquote> preformatea la cita añadiendo y desplazando el código a la

derecha automáticamente. Podemos enriquecer la cita añadiendo más información especifican-
do la fuente de la cita, para ello podemos usar el atributo cite dentro de blockquote, no confun-
dir con la etiqueta <cite> que se usa por ejemplo para poner el título debajo de una imagen.
Usando <blockquote cite=”url”> no se mostrará en pantalla la url de la cita.
<p> No debemos olvidar lo que nuestro gran amigo Albert Einstein dijo:</p>
<blockquote cite=”http://es.wikipedia.org/wiki/Albert Einstein”>”Hay una fuerza motriz más poderosa

que el vapor, la electricidad y la energía atómica: la voluntad”</blockquote>
Practica intentando imitar el resultado sin usar el código del archivo en el ejemplo 1.

M1. HTML5
También se puede crear una cita en línea usando la etiqueta <q> para resaltar algún
punto en concreto y no cambie de salto de línea, pero sí resalte de alguna forma el contenido
del párrafo. Por ejemplo, siguiendo con el ejemplo anterior se podría poner:
<p> No debemos olvidar lo que nuestro gran amigo Albert Einstein dijo:
<q>Hay una fuerza motriz más poderosa que el vapor, la electricidad y la energía atómica: la voluntad</
q>
</p>
Practica intentando imitar el resultado sin usar el código del archivo en el ejemplo 1. 85
Destacar que la etiqueta <q>, no inserta ningún salto de línea, como nos pasaba cuando
usábamos la etiqueta <blockquote>.
1.6. Formateado de textos.
Vamos a destacar solo las siguientes opciones: texto en negrita y texto en cursiva, ya que
en el módulo siguiente de CSS3 trataremos la parte de diseño y maquetación más en profundi-
dad.
Siguen permitidas las etiquetas <b></b> para escribir un texto en negrita y la etiqueta
<i></i> para poner el texto en cursiva. Veamos un ejemplo:
<p> Soy un texto normal </p>
<p> <i> Soy un texto en cursiva </i> </p>
<p> <b> Soy un texto en negrita </b> </p>
<p> <b><i> Soy un texto en negrita y cursiva </i></b></p>

Aula Mentor
1.7. Saltos de línea.
En determinadas circunstancias es posible que necesitemos añadir un salto de línea, para

ello HTML5 nos sigue proporcionando la etiqueta <br>, y sólo donde queramos agregar el salto
de línea. En versiones anteriores era obligado/recomendable escribir la etiqueta agregando “/”:
<br /> para indicar que es una etiqueta que no va a disponer de etiqueta de cierre. Los navega-
dores todavía aceptan las dos formas.
Como en el ejemplo de los párrafos, las etiquetas las lee el navegador y son las que rigen
el formateo y posición del texto. Voy a volver a poner de manifiesto que en este caso, sólo con
incluir los <br> el navegador entiende que debe incluir un salto de línea. Aunque siempre hay
que intentar realizar un código legible y que en un futuro sea fácil de modificar. Por ejemplo,
86 veamos el siguiente ejemplo:
<h3>Las seis cuerdas</h3>
<p>
La guitarra <br>
hace llorar a los sueños. <br>
El sollozo de las almas <br>
perdidas <br>
se escapa por su boca <br>
redonda. <br>
Y como la tarántula, <br>
teje una gran estrella <br>
para cazar suspiros, <br>
que flotan en su negro <br>

M1. HTML5
aljibe de madera. <br>
<cite>Federico García Lorca - 1924</cite>
</p>
<h3>Las seis cuerdas</h3><p>La guitarra <br>hace llorar a los sueños. <br>El sollozo de las almas <br>
perdidas <br>se escapa por su boca <br>redonda. <br>Y como la tarántula, <br>teje una gran estrella
<br>para cazar suspiros, <br>que flotan en su negro <br>aljibe de madera. <br><cite>Federico García
Lorca - 1924</cite>
</p>
Reflexiona sobre qué forma de escribir ayuda mejor a los cambios futuros. Como obser-
varás, el navegador a omitido los saltos de línea y sólo ha tenido en cuenta las etiquetas. Si eje-
cutamos el código anterior, tendremos que ambos párrafos se han representado de igual forma:
1.8. Elementos separadores.
Para insertar separadores horizontales existe la etiqueta <hr>, o en su versión anterior

<hr />. Esta etiqueta insertará: un salto de línea, una línea horizontal y otro salto de línea. Crean- 87
do así la sensación de crear secciones diferentes, por ejemplo si escribimos:
<hr>
<h3>Las seis cuerdas</h3>
<hr>
<p>
La guitarra <br>
hace llorar a los sueños. <br>
El sollozo de las almas <br>
perdidas <br>
se escapa por su boca <br>
redonda. <br>
Y como la tarántula, <br>
teje una gran estrella <br>

Aula Mentor
para cazar suspiros, <br>
que flotan en su negro <br>
aljibe de madera. <br>
<cite>Federico García Lorca - 1924</cite>
</p>
88
1.9. Sección y artículos.
En HTML5 se han incorporado dos elementos muy importantes para organizar el

contenido y la semántica de la página. Junto con los elementos anteriormente aprendidos
<header><nav><footer> y <aside> serían las más importantes que debemos dominar y usar
correctamente para sacarle el mayor partido:
<section></section>: nos va a definir una sección en nuestro código, indicándonos

que ese trozo va a ser un bloque o sección concreta.
<article></article>: tiene una identidad dentro de una sección y pueden existir varios
artículos dentro de una misma sección.
Pensemos en un periódico, podemos tener la sección deporte, y dentro podemos tener

muchos artículos ordenados por orden de importancia o visitas de los usuarios. Tan importante
es organizar bien los contenidos, que para la optimización y sacarle partido a SEO (posiciona-
miento en buscadores u optimización de motores de búsqueda) es vital hacer un código limpio
y “facilitar” el trabajo al buscador, usando sus reglas para que él organice el contenido correcta-
M1. HTML5
mente y nos encuentren los usuarios correctamente cuando busquen nuestra web.
Al igual que las listas, podemos tener varias secciones anidadas y artículos, siempre que
respetemos el orden de cierre y apertura.
Cuando nos referimos a secciones no tiene por qué estar vinculado con la parte visual,
aunque en algunos casos esté relacionado debemos tener en cuenta que estamos primero escri-
biendo qué vamos a ver en nuestra web.
Estudiemos el siguiente ejemplo:
<!DOCTYPE html>
<head> <meta charset=”utf-8” /> </head>
<body>
<header> <h1>MI PRIMERA WEB CON HTML5</h1> </header>
<nav>
<ul>
89
<li><a href=””>Inicio</a></li>
<li><a href=””>Productos</a></li>
<li><a href=””>Empresa</a></li>
<li><a href=”contactar.html”>Contactar</a></li>
</ul>
</nav>
<hr>
<section>
<article>
<h2> Este es mi primer artículo </h2>
<p> Aquí podemos escribir todo el artículo </p>
</article>
<aside>
Aula Mentor
<p>Aquí podemos poner los link a las redes sociales (p.e me gusta, leer más, twitter...) < /
p>
</aside>
<hr>
<article>
<h2> Este es mi segundo artículo </h2>
<p> Aquí podemos escribir todo el artículo </p>
</article>
<aside>
<p>Aquí podemos poner los link a las redes sociales (p.e me gusta, leer más, twitter...) < /
p>
</aside>
</section>
90 <footer>
<p> Píe de página construido con HTML5 </p>
</footer>
</body>
</html>

M1. HTML5
Hemos creado una sección con dos artículos, podíamos haber creado dos o más seccio-
nes, con muchos más artículos y cada uno con su información correspondiente. En este ejemplo
hemos añadido un elemento nuevo que es la etiqueta <a> que veremos a continuación. 91
1.10. Enlaces e hipervínculos.
Podemos tener diferentes tipos de enlaces:
- Enlaces a una página local.
- Enlaces una página externa.
- Enlaces al interior de la página.
- Enlaces a una dirección de correo electrónico.
- Enlaces a un archivo.
- Enlaces a elementos de bloque.
1.10.1. Enlaces a una página local.
En todas las aplicaciones web debemos usar una etiqueta para enlazar con otras páginas,
por ello cuando queremos abrir otra página dentro de la web que estamos creando debemos
usar la etiqueta <a>.

Aula Mentor
Normalmente debemos dotar a nuestro menú de navegación con este tipo de etiquetas,
(INICIO | PRODUCTOS | CONTACTAR...) pues todo son enlaces (o link) usando la etiqueta
<a>. Lo más usual para las secciones de navegación es realizar listas y posteriormente con CSS3
tratarlas para que parezcan menús, siempre va a ser más óptimo que usar dos imágenes: botón
sin pulsar; botón al pasar el ratón por encima, ya que tendríamos que almacenar dos imágenes.
Además de ser más costoso y crear una web más pesada, impedía la organización para
la búsqueda de los motores de búsqueda automáticamente. De todas formas, en determinados
casos tendremos que usar este método.
Como de la parte estética nos ocuparemos en el módulo siguiente con CSS3, vamos a ver
varios ejemplos básicos que posteriormente podremos alimentar con nuestros diseños y colores
deseados.
La etiqueta <a> puede tener varios atributos, el más común es realizar un link a una pá-
gina web, ya sea local, dentro de nuestro servidor, o externa:

<a href=”http://www.google.es”>Ir a Google</a>

<a href=”contactar.html”>Ir a google</a>

92
Por ejemplo imaginemos la siguiente situación:
Vamos a realizar una página web que va a tener cuatro archivos, por supuesto no es
obligatorio hacerlo así, como veremos en capítulos posteriores, pero puede ser una interesante
forma para comprender los enlaces o hipervínculos. Nuestros ficheros van a ser:
index.html: Fichero por defecto que se va a cargar siempre que accedan al

directorio, la página de inicio de nuestra página web.
produtos.html: Fichero donde vamos a mostrar los productos de la empresa.
empresa.html: Fichero donde vamos a mostrar una sección y artículo explicando la

empresa.
contactar.html: Fichero donde vamos a mostrar una sección y un artículo de

contacto.
M1. HTML5
Para interactuar entre ellas debemos tener un menú de navegación, puede ser, vertical,
horizontal, carrusel, etc. Cuando pulse el usuario sobre cualquiera de ellos nos debe abrir otra
página y sus contenidos.
l”>
<a
<a h
.htm
hre
”>
ref=
ml
f=”
ctos
.ht
”em
co
cio
dud
nta
ini
pre
cta
f=”
”pro
sa.h
hre
r.ht
ref=
ml”
<a
tml”
<a h
>
>
93
Para ello podemos crear un menú de la siguiente forma en cada archivo:
<nav>
<ul>
<li><a href=”inicio.html”>Inicio</a></li>
<li><a href=”productos.html”>Productos</a></li>
<li><a href=”empresa.html”>Empresa</a></li>
<li><a href=”contactar.html”>Contactar</a></li>
</ul>
</nav>
Para parecerse un poco más al menú de navegación que buscamos, sin usar CSS3 podía-
mos poner en una línea todo el texto y añadir el carácter “|”:
Aula Mentor
<a href=”inicio.html”>Inicio</a> |
<a href=”productos.html”>Productos</a> |
<a href=”empresa.html”>Empresa</a> |
<a href=”contactar.html”>Contactar</a>
El efecto quedaría como se puede ver a continuación:
Se pueden hacer modificaciones, como por ejemplo eliminar que aparezcan subrayados
los elementos tipo <a>, añadir fondo y colores diferentes. Que cambien de forma, color, posición
al pasar el ratón por encima, etc. Pero al ser aspecto de diseño, lo veremos en el módulo de
CSS3.
1.10.2. Enlaces a una página externa.
Los enlaces pueden ser a páginas externas o internas. En el ejemplo anterior, hemos visto
que los cuatro link estaban localmente, ya que los archivos estaban en la raíz de nuestro servidor
web, pero a veces es necesario crear enlaces a web externas, y bien podemos cargar su conteni-
do en la misma ventana, pero esto hará que el usuario “pierda” nuestra web, ya que abrimos el
nuevo link sobre la misma ventana. En el caso que no queramos que el usuario pierda u olvide
94 nuestra web, podemos abrir en la misma página del navegador mediante una pestaña o crear
una nueva ventana en el navegador. Para ello usamos el atributo target, dentro de la apertura de
la etiqueta y a continuación del contenido de href sus atributos. Veamos un ejemplo:
<a href=”http://www.aulamentor.es” target=”_blank”>Enlace en nueva ventana</a>
Cuando pulsemos sobre “Enlace en nueva ventana” queremos que nos abra una nueva
pestaña con la dirección contenido en el href; en este caso del aula mentor, pero que la página
que llama al enlace no se cierre. El efecto sería abrir el enlace especificado por href en una pes-
taña distinta:
M1. HTML5
Los atributos de apertura de los enlaces que podemos utilizar son:
• target=”_blank”: La página se abre en una nueva instancia o nueva pestaña del

navegador.
• target=”_top”: La página de destino se abre en la misma ventana pero ocupará toda la

ventana mostrada.
• target=”_self: Opción por defecto que usa el navegador sino se le indica nada.
Dependiendo del navegador, algunos atributos pueden actuar de una u otra forma, como
ya hemos comentado anteriormente, por ejemplo: el efecto target=”_blank” en Mozilla Firefox
28.0 al igual que en Google Chrome 33.0.1750.154 m. es abrir una pestaña. Sin embargo en Safari 95
5.1.7 nos abre una ventana nueva de navegación, al igual que en Internet Explorer 10.0.9200.
En principio no nos debemos preocupar mucho ya que en ninguno de los dos casos se cierra
nuestra ventana y el usuario sigue manteniendo nuestra web.
1.10.3. Enlaces al interior de la página.
Existen otros tipos de enlaces que pueden ser interesantes cuando desarrollemos web,
y son enlaces a nuestra propia página dentro del mismo archivo, por ejemplo realizar varios
capítulos y que pueda desplazarme hacia ellos directamente, y por ejemplo subir al inicio de la
página cuando deseemos. Esto se hace a través de “anclas” dentro de la propia página y po-
demos crear tantas como queramos dentro de nuestra página. Por ejemplo si necesitamos hacer
una página con esta estructura:
Aula Mentor
Debemos declarar tantas anclas como lugares queramos identificar, y podremos hacer
los enlaces a ese lugar indefinidas veces, un ejemplo podría ser tener un ancla al inicio mostran-
do diferentes capítulos y poner en diferentes sitios un link o enlace al inicio.
Para agregar anclas se usa la estructura siguiente:

96
<a id=”identificador del ancla”></a>
Y para acceder a él usamos el carácter # más el nombre del identificador:
<a href=”#identificador”>Nombre del enlace</a>
Por tanto en el ejemplo anterior tendríamos un ancla por cada punta de flecha, y supo-
niendo cada capítulo como un artículo:
<section>
<article>
<a id=”listado_capitulos”></a>
<h2> Mis capítulos</h2>
<ul>
<li><a href=”#capitulo1”>Capitulo 1</a></li>

M1. HTML5
</ul><hr>
</article>
<article>
<a id=”capitulo1”></a>
<h3> Capítulo 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus hendrerit arcu odio, at mattis diam
bibendum et. Vivamus felis enim, pulvinar eu vulputate sit amet, congue a enim. Ut et tortor nisi. Fusce
viverra orci vitae elit tristique semper. Sed vitae velit quam. Vivamus sed quam felis. Nam lacinia
ornare purus ut dignissim.</p>
<a href=”#listado_capitulos”>Ir al indice de capítulos</a><hr>
</article>
<article>

97
<a href=”#listado_capitulos”>Ir al índice de capítulos</a><hr>
</article>
<article>
Aula Mentor
<a href=”#listado_capitulos”>Ir al indice de capítulos</a><hr>
</article>
</section>
Comprueba el ejemplo 2/#listado_capitulos.
98
1.10.4. Enlaces a una dirección de correo electrónico.
Para crear enlaces en nuestra web con una dirección de correo electrónico del tipo, “para
realizar sus pedidos <piche aquí>” y al realizarlo se nos abra nuestro cliente de correo electró-
nico con la dirección, podemos usar el mailto después de indicar href. La sintaxis sería:
<a href=”mailto:direcciondecorreo@sudominio.com”>texto a mostrar</a></p>
Un ejemplo puede ser:
<p> Para contactar con el autor puede pinchar <a href=”mailto:aplicacioneswebmultiplataforma@gmail.

com”>aquí</a></p>
M1. HTML5
Si queremos además añadirle copia a otra dirección de mail y un asunto podemos usar
los atributos: subject y cc; siguiendo el ejemplo anterior si queremos mandar una copia a otroe-
mail@otrodominio.com y poner de asunto: Email recibido desde mi página web, debemos usar:
<p> Para contactar con el autor y la editorial puede pinchar <a href=”mailto:aplicacioneswebmultiplata
forma@gmail.com?subject=Email recibido desde mi página web&cc=otroemail@otrodominio.com”>aquí</a></p>
Al usuario que está navegando por tu web le aparecerán las siguientes ventanas:
99
Le preguntará la primera vez que lo usa si le da permiso y le da la opción a usarla por de-
fecto marcando “No volver a mostrar la advertencia acerca de este programa”. Al pulsar permitir,
le aparecerá su cliente de correo con los datos que les hemos rellenado nosotros previamente:
Ejemplo si el cliente tiene como cliente de correo Microsoft Outlook
Ejemplo en el caso que el cliente tiene como cliente de correo Mozilla Thunderbird. An-
tes nos habrá pedido confirmación de Seguridad como pasaba con el otro cliente de correo.
Aula Mentor
1.10.5. Enlaces a un archivo.
Para que el usuario que navega por la web pueda descargarse información que le quera-
mos facilitar, por ejemplo en una web de un Gimnasio poder descargarse el horario de las clases,
ya sea una imagen, archivo comprimido, pdf, etc. En una web de una empresa, descargarse los
100 catálogos, los precios..etc. Podemos usar la sintaxis siguiente:
<a href=”rutacompletadelarchivo/nombredelarchivo.extension”>
Recordamos que cuando nos referimos a la ruta completa del archivo es partiendo desde
la raíz del archivo que lo llama, como vimos en el módulo 1. Apartado 1.2.
Si creamos una carpeta que se llame descargas dentro de nuestro sitio web, algunos
ejemplos podrían ser los siguientes:
<p> Para descargarte la información puedes pinchar
<a href=”descargas/documento_pdf_para_descargar.pdf”>aquí</a></p>
<a href=”descargas/imagen_para_descargar.jpg”>aquí</a></p>
<a href=”descargas/archivo_comprimido.zip”>aquí</a></p>
Es importante cuando se use esta estructura proteger el directorio para que no se visuali-
ce toda la información (audio, pdf, zip, etc.), a no ser que sea ése el propósito. Por ejemplo, un
primer método, existen más métodos, para ocultar la información es usar un archivo anexo que
se llama .htaccess donde se prohíbe el listar el directorio que deseemos, indicándole al usuario
M1. HTML5.
el error HTTP 403.
Para crearlo podemos crear un fichero de esta forma y copiar el archivo al directorio que
queremos evitar que se indexes / listen los archivos.
En Windows/Linux/Mac: echo Options -Indexes > .htaccess
o es posible que el sistema operativo (Linux/Mac) oculte el archivo, por lo que para verlo
deberás listar los archivos con la opción ls –a.
El resultado sería el siguiente:
El usuario vería todos los archivos, tamaño, fecha y se los podría descargar. Si añadimos
el fichero antes comentado “.htaccess” a este directorio, prohibimos el listado, pero los archivos
siguen estando en el servidor, sólo no se muestran. El resultado sería el siguiente:
101
1.10.6. Enlaces a elementos de bloque.
Con esta nueva versión de HTML5 podemos hacer un enlace no sólo a un elemento de
texto, sino también a un elemento de bloque que en la versión anterior no era soportado. Los
más comunes son los <li> o <div>. Esta última etiqueta <div> nos delimita trozos de código ya
sea por estética o por utilidad, la veremos más detenidamente en el módulo de CSS3.
En la versión anterior de HTML4 se usaba muy frecuentemente, pero al proporcionarnos

HTML5 <section></section> su uso es menor. Lo importante de <div> al igual que <section>
es que nos permite definir código que posterior podremos identificar, modificar y ocultar si es
necesario.
Podíamos tener un ejemplo como el siguiente:

Aula Mentor
<p> Si nos hemos creado un div especial y quiero hacer un enlace, en HTML5 se puede hacer:
<a href=”miarchivo.html”><div>aquí puede ir no solo texto, sino muchos elementos (imágenes, videos,
tablas...etc.), y posteriormente los podré modificar con CSS3 y JQuery </div></a></p>
Sin usar nada de diseño respecto al divisor ni a la etiqueta <a> quedaría de la siguiente
forma, en siguientes capítulos volveremos a este ejemplo y ampliaremos:
Te recomiendo que una vez hemos llegado a este punto, te dirijas al ejemplo del curso
del directorio Ejemplo2/index.html y compruebes todo lo que hemos aprendido hasta ahora.
Intenta imitar el resultado sin utilizar el código original para asimilar correctamente los conoci-
mientos.
Si comprendes todos los elementos y los ejemplos; puedes continuar con el siguiente
apartado, sino, coméntale a tu tutor las dudas que no entiendas, dándole la mayor información
posible, apartado, página del manual, capturas de pantalla con el error, etc.
2. Multimedia e imágenes.
102 2.1. Insertar imágenes.
Cuando navegamos por las páginas web, en muchas ocasiones existen diferentes imá-
genes, ya sean imágenes de fondo, logotipos de la empresa, fotografías de los autores, etc. Una
imagen en la página web puede tener diferentes formatos: Gif, Jpeg y Png. Cada formato tiene
unas características, de forma resumida podemos decir que vamos a tener los siguientes forma-
tos de imágenes:
GIF: 256 colores como máximo, para imágenes que necesiten mucha definición no
serían válidas, pero para donde se usen pocos colores son idóneas por el poco tamaño que
ocupan. También permite animaciones, llamados GIFs animados, que son secuencias de varias
imágenes.
JPEG: 16,7 millones de colores por imagen, lo que son muy indicados cuando queramos
una buena definición de la imagen, aunque debemos mencionar que tiene cierta pérdida de
calidad al realizar la compresión. No permite trasparencias ni animaciones.
PNG: soporta también 16,7 millones de colores y tienen una buena tasa de
compresión, superior a las del tamaño GIF, además de ser un formato abierto y sin patentar.
Permite trasparencias de hasta 256 colores pero no permite generar imágenes animadas.
WebP: desarrollado por Google está ganando terreno cada vez más debido a su integra-
ción con HTML5 y reducción del tamaño de los archivos más que JPEG y GIF, perdiendo muy
poca calidad.
Para insertar una imagen en nuestra aplicación web vamos a poder usar.
M1. HTML5
<img src=”rutaynombredelaimagen”>
Por ejemplo podríamos tener en nuestra web una carpeta para ir almacenando las imá-
genes, y tener ahí todas las imágenes que vamos a utilizar en la web, además de estar todo más
organizado, nos creará una estructura web más fácil de mantener. Si escribimos el siguiente
código:
<img src=”images/contactar/logo_mentor_mini.jpg”>
Estaríamos indicando que muestre la imagen logo_mentor_mini.jpg que está en la ruta

images/contactar; a partir del directorio del archivo que lo llama. En este caso se ha creado
una subcarpeta para la sección contactar, para intentar guardar un orden lógico dentro de las
diferentes imágenes, ya que esta carpeta suele crecer mucho conforme se va desarrollando la
web.
Debemos pensar que la imagen puede estar no en nuestro propio servidor, puede ser un
enlace externo, por ejemplo imaginemos que una empresa que tiene diez sedes, muestran el ca-
lendario de entrega de sus productos; claro, es el mismo para todas las empresas, pero cada una
tiene su propio servidor. ¿Qué solución se podría dar? Tener los datos comunes en un servidor
web, imaginemos que está localizado en http://www.servidorexterno.com/imagenes/calendario.
png. En las restantes sedes deberíamos crear la imagen de la siguiente forma:
<img src=”http://www.servidorexterno.com/imagenes/calendario.png”>
Como única contrapartida tenemos lo siguiente: si el servidor donde está alojada la ima-
gen está caído, no se mostrará en ningún de los sitios restantes, además del tráfico extra que 103
estamos generando ya que debe realizar una petición web a otro sitio.
Los atributos adicionales que se pueden usar con las imágenes son los siguientes:
width y height: definen el ancho y alto en píxeles respectivamente. Es recomendable siempre

adaptar estos valores a los reales de la imagen, además facilita información al navegador que
acelera la carga mostrando y estructurando la web. Aunque no son obligatorios, son altamente
recomendables usarlos siempre.
alt: contiene un texto alternativo sobre la imagen. Este texto tiene varias funciones importantes,
la primera es para los invidentes para poder leer el texto referido a la imagen, y el otro usado
por Google para almacenar y clasificar las imágenes respecto a los contenidos, a fin de alimentar
su base de datos de imágenes.
Un ejemplo de estos atributos puede ser:
<img src=”http://www.mentor.educacion.es/images/stories/logos_varios/linkedin.png” width=”128”

height=”128” alt=”Imagen de LinkedIn”>
Podemos ver el resultado y si en Firefox, pulsamos sobre la imagen y dentro del menú
que nos aparece seleccionamos Ver información de la imagen comprobaremos que todo está
correcto:
Aula Mentor
104
Para aquellos que hayan estudiado HTML4, pensarán que me he olvidado de aligh,
border, hspace, vspace y longdesc. Estas etiquetas no se han mantenido en HTML5, por lo que
debemos usar CSS3 en su caso.
Antiguamente y en determinadas ocasiones se han usado las imágenes en forma de bo-

tón e imágenes de sustitución para hacer el efecto de pulsado al pasar el ratón por encima de
los elementos. Hoy en día esa práctica está más en desuso, pero sí se sigue teniendo el 90% de
las webs alguna imagen (logotipo de la empresa generalmente) donde al pulsar sobre ella, nos
lleva al índice (index) de la página web.
Para ello, se puede utilizar como realizamos en el apartado anterior un enlace a un blo-
que o en este caso una imagen. De tal modo que al pulsar sobre el enlace dirigimos al usuario
donde queramos; página web externa o interna. Un ejemplo puede ser:
M1. HTML5
<h3> Imagen como un enlace</h3>
<p>Si pulsas en esta imagen se abrirá en una nueva instancia la web del aula mentor <br>
<a href=”http://www.aulamentor.es” target=”_blank”>
<img src=”images/contactar/logo_mentor_mini.jpg”></a></p>
Si nos damos cuenta, dependiendo del navegador, aparece un recuadro del mismo color
de los enlaces alrededor de la imagen. Esto es porque el navegador le da las mismas propieda-
des y lo trata como un enlace más. Todo esto sería parte del diseño y trataremos en el módulo
de CSS3.
Para agregar a la web una imagen de fondo, se ha de usar la propiedad background- 105
image en las hojas de estilo con CSS3, pues ha quedado obsoleto el atributo background en el
body como se hacía con HTML4, pero adelantamos que se puede añadir una imagen de fondo a
nuestra web añadiendo estas etiquetas al head dentro de las etiquetas <style></style>, realmente
corresponde a etiquetas de CSS3, pero a modo de introducción:
<head>
<style>
body {background-image: url(‘images/mifondo.jpg’)}
</style>
</head>
Crea tu propia imagen de fondo e insértala en tu web. Observa su resultado.
La imagen de fondo se repetirá por toda la web. Hay formas de usar imágenes muy
pequeñas y crear efectos o degradados muy interesantes con pocos kbs, liberando a la web de
cargar un archivo grande en memoria. Aunque hoy en día se disponen de conexiones y disposi-
tivos más avanzados, una web que no sea muy pesada (imágenes de mucha resolución) siempre
va a ser más valorada por los usuarios.
Aula Mentor
Por ello, hay que definir muy bien cada imagen al tamaño correcto y no caer en el error
de usar una imagen superior, por ejemplo 1024x768 píxeles, y modificarle luego con width y
height el tamaño para usar el 10% del tamaño. Ya que aunque muestre esa imagen en el navega-
dor, a título de navegador y memoria en el navegador ha cargado completamente la imagen y ha
tenido que descargar primero la imagen del tamaño superior. Todo esto se soluciona realizando
una buena estructura y organización de la web en la fase del diseño.
2.2. Insertar audio y vídeo.
2.2.1. Insertar Audio.
Con HTML5 se ha facilitado la inserción de audio y vídeo en nuestras web, sin tener que
usar plug-in ni flash como se hacía anteriormente. Ahora con la etiqueta <audio> insertamos
audio, y con la etiqueta <video> podemos incrustar vídeos en nuestra web.
Por ejemplo si queremos insertar un audio, lo primero que tenemos que saber es qué
formatos soporta, los atributos opcionales y la sintaxis de uso.
FORMATO DESCRIPCIÓN
Mp3 Realiza una compresión fija o variable (bitra-
te). Pero no lo soportan todos los navegado-
res.
Ogg Alternativa al formato mp3 libre y muy expan-
106 dido.
Wav Sin compresión, ocupa mucho más que los
anteriores, por lo que no es muy aconsejable
usarlos.
Acc Más compresión que todos los anteriores, por
lo que es muy recomendable usarlo.
Opus Opus puede funcionar igualmente en altos y
bajos bitrates. Opus tiene un algoritmo con un
retraso muy bajo (22.5 ms), lo que es muy
necesario para usarlo como formato de audio
en enlaces de comunicaciones, que necesitan
una latencia muy baja para permitir la conver-
sación natural en eventos en directo. Lanzado
el 11 de septiembre de 2012.
Weba Desarrollo de Google y complemento del for-
mato de vídeo WebM que veremos a conti-
nuación.
Como podéis apreciar tenemos una gran variedad y se están trabajando en formatos
nuevos y mejores de compresión. Pero debemos tener presente que no todos los navegadores
soportan todos los formatos, por lo que es necesario al menos usar dos para ampliar al máximo
posible el número de navegadores soportados. A fecha de la escritura de este documento tene-
mos las siguientes compatibilidades:
M1.HTML5
Browser MP3 Wav Ogg

Internet Explorer SI NO NO
Chrome SI SI SI
Firefox NO SI SI
Actualizado en: Fire-

fox 21 con Windows
7, Windows 8, Win-
dows Vista, y Android
ahora soporta MP3
Safari SI Dependiendo de la SI NO
versión.
Opera NO SI SI
Y podemos usar los siguientes atributos:
Atributo Valor Descripción

autoplay autoplay Fuerza el arranque al cargar la
página.
controls controls Proporciona los controles de
audio, Empezar, parar, etc.
loop loop Realiza un bucle, cuando fi-
naliza vuelve a empezar cons-
107
tantemente.
muted muted Pone en silencio la reproduc-
ción.
preload auto Organiza cómo se va a cargar
el audio en la página.
metadata
none
src URL Ruta del fichero.
Voy a usar música de licencia libre descargada de https://www.youtube.com/audioli-

brary, aunque también podía haber usado Creative Commons. He escogido el archivo Smi-
le_Quiet_Looking_Up.mp3 el cual quiero agregarlo a mi web, para ello he de escribir:
<audio autoplay=”true” >
<source src=”sound/Smile_Quiet_Looking_Up.mp3” type=”audio/mp3”>
<source src=”sound/Smile_Quiet_Looking_Up.ogg” type=”audio/ogg”>
</audio>
Si observas el código he tenido que poner obligatoriamente autoplay=”true” porque

si no, nunca sonaría la música (esta configuración es la típica música de fondo de una web),
además, al no tener controls activado, no tengo forma de pararla ni iniciarla. Otra herramienta
Aula Mentor
que debemos tener es un conversor de vídeo y audio a diferentes formatos.
Existen varios gratuitos, por ejemplo uno de ellos puede ser http://audacity.sourceforge.
net en el que podemos abrir el archivo .mp3 y exportarlo a .ogg para poder agregarlo a nuestra
carpeta sound.
Para ello debemos, seleccionar Archivo / Abrir / Buscar el archivo.mp3 origen /

Aceptamos. Una vez realizado debemos exportarlo a .ogg. Archivo / Exportar / Selecciona-
mos el formato Ogg / Seleccionamos la ruta de destino, le damos a Guardar y Acepta-
mos.
También he creado un vídeo convirtiendo el archivo .mp3 a .ogg, el cual me servirá de

prueba y usaré para insertar vídeos en nuestra web.
Si además le agrego los controles controls=”true”, obtendríamos los siguientes resulta-

dos:
108
Internet Explorer 10 Mozilla Firefox 28.0
Google Chrome Opera 20.0
2.2.2. Insertar Vídeo.
Para insertar vídeos en nuestra web y que podamos reproducirlos debemos usar un mé-
todo parecido al que hemos realizado con el audio, pero vamos a prestar atención a fijarle un
ancho y alto específico al vídeo. Esto también se puede realizar con CSS3, como veremos en el
capítulo correspondiente.
M1. HTML5
Al igual que con el audio, debemos saber que formatos son los más usado y permitidos
en la web:
Ogv Equivalente a Ogg pero para archivos de ví-
deo.
H.264 Codecs estándar y promocionado por Apple,
no es libre ni gratuito.
WebM Formato de Google y muy estándar en nave-
gadores de Android 2.3 y otros navegadores.
Mp4 Formato avanzado el mp3, muy usado ya que
la mayoría de los dispositivos móviles graban
en Mp4 o 3GP.
Los controles más usados son:
Atributo Valor Descripción

autoplay autoplay Fuerza el arranque al cargar la
página.
controls controls Proporciona los controles de
audio, iniciar, para, etc.
loop loop Realiza un bucle, cuando fi-
naliza vuelve a empezar cons-
tantemente. 109
muted muted Pone en silencio la reproduc-
ción.
preload auto Organiza cómo se va a cargar
la el audio en la página.
metadata
none
src URL Ruta del fichero.
poster URL Ruta de una imagen que apa-
recerá antes de que el usuario
pulse a play.
Para realizar las conversiones de vídeos existen diferentes herramientas, una de ellas es
el Freemake Video Converter: http://www.freemake.com/. El potencial de esta herramienta es
que si le pasamos un vídeo por ejemplo en formato wmv y seleccionamos convertir a HTML5,
el sólo nos hará todo el trabajo automáticamente y nos generará los 3 diferentes formatos Ogv,
WebM y Mp4, creándonos el código en HTML5 para que podamos insertarlo en nuestra web.
Los pasos serían:
• Descargo e instalo el software Freemake Video Converter.
• Ejecuto el software y selecciono Vídeo y busco el archivo a convertir.
1. Selecciono Convertir.
Aula Mentor
2. Elijo la opción HTML5.
3. Posteriormente selecciono la carpeta de salida.
4. Selecciono el formato final; en este caso lo voy a dejar igual que la fuente origen.
5. Pulso en Convertir.
Me genera una carpeta y archivo HTML5 donde puedo copiar y pegar directamente en
mi web.
(En mi caso he modificado las rutas de los archivos para que todo esté en la ruta /www/film/)
110
Si insertamos el código generado comprobando que las rutas, localización de los ar-
chivos dentro de nuestro servidor, están correctas a donde están los archivos, por consiguiente
tendremos:
<video id=0 controls width=640 height=480>
<source src=”film/mivideo.ogv” type=’video/ogg; codecs=”theora, vorbis”’/>
<source src=”film/mivideo.webm” type=’video/webm’ >
<source src=”film/mivideo.mp4” type=’video/mp4’>
<p>Este video no es soportado por tu navegador; no soporta la etiqueta video de HTML5</p>

M1. HTML5
</video>
Y si lo ejecutamos en los mismos navegadores que antes se puede ver que los que sopor-
taban correctamente la etiqueta audio, lo hacen también con vídeo. Prueba a insertar un vídeo
que tengas o te descargues de internet y prueba su resultado.
Poco a poco la tendencia de todos los navegadores es soportar las etiquetas <audio> y
<video>, ya que se simplifica mucho el uso elementos multimedia.
En determinados casos deberemos hacer comprobaciones para detectar los navegadores y usar
los métodos antiguos en su caso.
Comentar también, que muchas veces dependiendo del programa que ha generado/ 111
convertido el audio o vídeo no funcionará en algunos navegadores que sí soporta HTML5. Esto
es por el tipo de codificación que usa, versiones o errores en la conversión que algunos pasan
por alto y otros no los permiten.
Debéis probar en este caso con otro programa reconvirtiendo el archivo y probar
antes de desestimar el navegador. Muchas veces no es problema del navegador sino de la com-
probación o el programa que lo ha generado.
3. Tablas y formularios.
3.1. Tablas.
En versiones anteriores de HTML el uso de tablas en web tenían un doble uso: insertar
elementos organizados del usuario para mostrar datos al usuario, con o sin borde, y otro muy
importante que la mayoría de los usuarios no sabían mientras navegaban por la red, y era la
maquetación y colocación de las secciones o elementos web, por ejemplo, una forma sencilla de
organizar una web sería: ¿para qué resolución voy a trabajar? p.e. 800 píxeles (su forma abrevia-
da px), de ancho como máximo. Voy a poner encabezado, ¿de qué tamaño? 250px, y un menú
de 150px. Y un pie de página de 250px. Se podía representar algo parecido a esto:
Aula Mentor
112
Hoy en día con la nueva versión de HTML5 y el fomento de las hojas de estilo con CSS3
todo esto es impensable. Ya que el anidamiento de las tablas y el mantenimiento de la misma
hacía difícil las modificaciones a posteriori. Como veremos con (div), junto con los elementos de
clase (class) y de elemento (id) la forma de organizar las web es totalmente diferente.
Para insertar tablas en nuestra web debemos usar las etiquetas o tag:
Tag Descripción
<table> Para definir la tabla globalmente y con la eti-
queta.
<tr> Para indicar una fila dentro de la tabla.
<td> Para indicar cada columnas dentro de la tabla.
<th> Para indicar que corresponde a la celda nomi-
nativa de la fila o columna. Aunque no es obli-
gatoria ponerla, nos debemos acostumbrar a
realizarlo, ya que es muy recomendable usarla
para posteriormente cuando estemos con el
diseño aplicar una característica concreta, por
ejemplo, quiero que todas las celdas nominati-
vas o cabeceras <th> sean de color azul y con
fondo blanco.
M1. HTML5
Si queremos representar una tabla de 3 filas y 3 columnas como la que se ve a continuación:
Celda 1 Celda 2 Celda 3

Debemos ingresar un código como éste:
<table>
<tr>
<th>Celda 1</th> <th>Celda 2</th> <th>Celda 3</th>
</tr>
<tr>
<td>Celda 4</td> <td>Celda 5</td> <td>Celda 6</td>
</tr>
<tr>
113
<td>Celda 7</td> <td>Celda 8</td> <td>Celda 9</td>
</tr>
</table>
Puedes ver el código en el Ejemplo3/empresa. La forma de tabular el código ha sido para

facilitar la visualización y aprendizaje; realmente como vimos anteriormente, el navegador obvia
los espacios, saltos de líneas y tabuladores que no estén dentro de una etiqueta. Obtendremos
un resultado como éste:
Si nos fijamos, automáticamente el navegador nos ha mostrado en este ejemplo la prime-

ra fila de un color diferente, podíamos haber utilizado ésta como celdas cabeceras, las filas o las
columnas; en este ejemplo se ha utilizado Opera 20.0.1387.91. También estarás pensando que
las tablas que estás acostumbrado a ver tienen un borde, por defecto, si no se indica nada (me-
diante CSS3) nos pondrá una tabla de borde 0, es decir, de grosor 0, por lo que posteriormente
deberemos agregar las características que deseemos.
Voy adelantar cómo se puede añadir un borde de un píxel, para que se puedan ver bien
las demás características. Dentro del <head> </head> de la página, vamos a definir el siguien-
te código:
Aula Mentor
<style>
body {background-image: url(‘images/mifondo.jpg’)}
table{border-collapse:collapse;}
table, td, th{border:1px solid black;}
</style>
Con este código obtendríamos el resultado que esperábamos, una tabla con sus filas,
pero depende de la versión del navegador tendrás otro resultado, si es muy antigua no entende-
rá o representará bien la etiqueta border-collapse.
Si por ejemplo queremos fusionar o combinar tablas, debes saber que podemos fusionar
tanto filas como columnas. Para ello usamos los siguientes atributos sólo cuando sean necesa-
rios:
colspan: Atributo para fusionar columnas. Indica el número que fusiona

partiendo desde ella.
114
rowspan: Atributo para fusionar filas. Indica el número que fusiona partiendo
desde ella.
Si queremos crear una tabla como la que se muestra a continuación:
Celda 1 2 Celdas tipo fila combina- 2 Celdas tipo fila combina-

das das
4 Celdas tipo columna com- Celda 7 Celda 8 Celda 9 Celda 10
binadas Celda 12 Celda 13 Celda 14 Celda 15
Celda 17 Celda 18 Celda 19 Celda 20
Celda 22 Celda 23 Celda 24 Celda 25

El código correspondiente para representar esta tabla con estas características sería el
siguiente:
<table>
<tr>
<th>Celda 1</th><th colspan=”2”>2 Celdas tipo fila combinadas</th><th colspan=”2”>2 Celdas tipo fila
combinadas</th>
M1.HTML5
</tr>
<tr>
<td rowspan=”4”>Celda 6</td><td>Celda 7</td><td>Celda 8</td><td>Celda 9</td><td>Celda 10</td>
</tr>
<tr>
<td>Celda 12</td><td>Celda 13</td><td>Celda 14</td><td>Celda 15</td>
</tr>
<tr>
</tr>
<tr>
</tr> </table> 115
Además, siempre podemos añadir un título o leyenda a la tabla. Para ello usamos la
etiqueta <caption>, la cual ha de situarse justo después de la etiqueta <table> y sólo puede
aparecer una sola vez en esa tabla. El título se adaptará al tamaño de la tabla. En principio la
posición del título aparecerá en la parte superior; si quisiéramos modificarla se hará mediante
CSS3 añadiendo al estilo caption {caption-side: bot-tom;}. Si realizamos el siguiente código:
<table>
<caption>Tablas en HTML5</caption>
<tr>
<th>Celda 1</th><th>Celda 2</th><th>Celda 3</th>
</tr>
<tr>
<td>Celda 4</td><td>Celda 5</td><td>Celda 6</td>
</tr>
<tr>
Aula Mentor
<td>Celda 7</td><td>Celda 8</td><td>Celda 9</td>
</tr>
</table>
Prueba este código en tu página web y observa el resultado. Si tienes problemas o el

resultado no es el que esperas, tienes la solución en en ejemplo 3/empresa.
Ahora vamos a ver un atributo muy interesante para agrupar diferentes celdas y aplicarle
el diseño que queramos, para ello usamos la etiqueta <colgroup>. Esta etiqueta iría después
de la etiqueta <caption>, si se ha implementado, sino a continuación de la etiqueta <table>.
Imaginemos que queremos obtener una tabla con varias celdas de un color y otras de otro color.
<colgroup>
116 <col span=”1” style=”background-

color:#8db3e2”>
<col style=”background-color:green”>
</colgroup>

<colgroup> <colgroup>
<col span=”2” style=”background-color:#8db3e2”> <col span=”3
<col style=”background-color:green”> style=”background-color:#8db3e2”>
</colgroup> <col style=”background-color:green”>
</colgroup>
M1. HTML5
Por si quedara alguna duda, vamos hacer un último ejemplo más complejo:
Celda 1 Celda 2 Celda 3 Celda 4 Celda 5 Celda 6
Tendríamos que agregar el siguiente texto a nuestra tabla:
<colgroup>
<col span=”1” style=”background-color:#8db3e2”>
<col span=”2” style=”background-color:green”>
<col style=”background-color:yellow”>
<col span=”2” style=”background-color:orange”>
</colgroup>
Hay que destacar que hemos usado notación en línea de CSS3 para exponer el ejemplo
de una forma más clara, en concreto hemos usado la sentencia style para indicar que vamos a
117
usar un estilo propio, y el atributo “background-color:#8db3e2” para indicar el color. Para
indicar el color se puede usar en notación RGB precedida de #, indicando 8d para el nivel de
R(Red-Rojo), d3 para en nivel de G(Green-Verde) y e2 para el nivel de B(Blue-Azul). También se
puede indicar el color usando algunos nombres en inglés predefinidos, por eso hemos podido
añadir style=”background-color:green”.
Este tipo de diseño es muy útil ya que la mayoría de las tablas que se representarán en
la web, debido a que las web siempre crecen hacia abajo (por eso la rueda del ratón estándar
solo actúa hacia arriba y abajo), nos podría indicar con diferentes colores las columnas de una
tabla, consiguiendo facilitar visualmente el contenido de la tabla a nuestro usuario.
El lector puede estar pensando que le gustaría hacer lo mismo con las filas. Bueno, en
principio también es posible. Normalmente lo que se suele hacer es poner un sombreado a las
filas alternas para facilitar la lectura de la tabla, pero todo eso lo vamos a ver en los siguientes
módulos, con CSS3 y JQuery una forma muy fácil de obtener estos ejemplos.
Para los que hayan programado anteriormente en HTML4, comentar que están obsole-
tas los atributos align, bgcolor, border, cellpadding, cellspacing, frame, rules, summary y width.
¿Cómo podemos hacer todo lo que hacíamos antes? Como era de esperar toda la parte del di-
seño se ha trasladado a CSS3, que veremos en el siguiente módulo. En HTML5 se ha intentado
cargar toda la parte del diseño o aspecto a las hojas de estilo, de ahí la potencia y versatilidad.
3.2. Formularios.
Los formularios web están presentes en todas aquellas páginas o aplicaciones que nece-
siten interacción con el usuario, ya sea para obtener datos de él como para filtrar o seleccionar
Aula Mentor
los datos. Seguro que alguna vez te has identificado en una web mediante usuario y contraseña,
esta acción tiene detrás un formulario web:
El usuario rellena los datos en su navegador.
- Se validan los datos en el navegador del cliente. Opcional pero recomendable para hacer un
primer bloqueo a los robots e inyección de código malicioso.
- Se recibe los datos en el servidor.
- Se trata y se envía respuesta al cliente. En este caso, mostrar un error si los datos no son
correctos y acceder si es usuario correcto del sistema.
No veremos la parte del servidor ya que ésta se suele hacer mediante otros lenguajes
de programación: CGI, Perl, PHP, ASP, JSP, etc. Pero sí vamos a ver todas las partes y elementos
que podemos usar en HTML5. Antes para la validación de formularios se podía hacer en el na-
vegador mediante JavaScript, pero hoy en día HTML5 nos proporciona también elementos para
validar los datos por parte del navegador del cliente.
Es obligatorio comentar al respecto que como HTML5 está siendo la tendencia pero no
está implementada todavía en todos los navegadores. Existen clientes con navegadores antiguos
que no se actualizan, por ello hay que saber el perfil de nuestros usuarios, ya que la validación
no sería correcta para navegadores que no cumplan con el estándar de HTML5. Decir que tiene
una parte buena, ya que la tendencia es que todos los navegadores lo hagan en un futuro y
estaríamos dominando a día de hoy el lenguaje que se va a implantar.
118
Para declarar un formulario tenemos que usar la etiqueta <form> seguida de todos los
elementos que queremos solicitar al usuario y debemos cerrarla con </form> para indicar al
navegador que ha finalizado la entrada de datos. A continuación, podemos usar los siguientes
atributos:
Atributo Descripción
name Nombre que va a designar este formulario
para identificarlo de otros en el caso de existir
varios.
action Indica la acción a realizar cuando el usuario en-
víe el formulario, estas acciones pueden ir desde
enviar mail (action=”mailto:nombrecorreo@
nombredominio), de forma interna con
(action=””), o si tenemos un archivo ya
sea local o en internet, podríamos po-
ner: (action=”nombrearchivo”) ó
(action=”direccionWeb/archivo”).
enctype Especifica el mime type como se enviarán los
datos del formulario, su valor por defecto es
application/x-www-form-urlencoded, pero
también puede tomar los valores multipart/
form-data o text-plain.
M1. HTML5
method Puede ser GET o POST. Nos indica el método

de la transmisión de datos, en el caso de GET
es caracteres ASCII y no pueden exceder los
100 caracteres y POST gestiona caracteres no
ASCII y capacidad ilimitada de caracteres.
Cuando se hacen validaciones por parte del usuario indicado en el action, los atributos
enctype y method no llegan al servidor por lo que no son necesarios.
Para comprobar los datos que recibirían el servidor o la página que va a tratar el formu-
lario, vamos a crearnos un archivo llamado recogidadedatos.php, éste se va a usar para mostrar
todos los valores. Este archivo usa sentencias del lenguaje PHP, que no corresponden a este
manual, pero nos ayudará a entender la forma usual de trabajar con este componente en HTML5.
index.html recogidadedatos.php
Traspaso de datos del formulario creado en index.html al archivo recogidadatos.php

119
3.2.1. Campos de texto.
El dato más usual de entrada en un formulario web va a ser el campo de texto, donde
podemos escribir texto alfanumérico (p.e. Nombre de usuario, dirección, DNI, etc.). Para ello,
usamos la sentencia <input type=”text”>.
En HTML5 se puede asociar una etiqueta de tipo <label> para indicar el texto asociado
al campo en cuestión. Vamos a omitirlo en este módulo porque no hemos dado identificadores
(id). El uso sería: <label for=”miIdCampo”>Introduce tu nombre</label>
Rellenamos los datos. Por ejemplo
Hemos añadido un botón para decir al navegador que queremos enviar los datos,
<input type=”submit” name=”Enviar Datos”>
Cuando pulsemos el botón “Enviar Datos”, se enviarán los datos que hemos rellenado
desde el fichero que contiene el formulario, hacia el fichero que habíamos puesto en el action.

Aula Mentor
[nombre] => Miguel Ángel
[edad] => 35
index.html recogidadedatos.php
Los atributos que podemos añadirle a los campos de texto son:
name Nombre que va a distinguir unívocamente a
ese campo dentro de ese formulario.
size Define el número de caracteres visibles del
campo de texto y la longitud que ocupará en
la pantalla. Por defecto el valor es 20.
maxlength Número máximo de caracteres que el usuario
puede introducir en el campo.
value Valor por defecto que va a contener el campo,
como si el usuario hubiera escrito el valor. El
usuario puede modificar si quiere el valor.
120 readonly Indica que el usuario no puede modificar el
contenido, se quedaría en modo lectura. Apa-
recerá el valor pero no se podrá editar.
placeholder Sugerencia del texto, orientamos al usuario
con el valor a introducir, pero no lo toma
como valor por defecto, como pasa con el
atributo value.
autofocus Sitúa el foco sobre el elemento para que el
usuario no tenga que desplazarse a él y hacer
clic.
required Obliga al usuario a escribir o rellenar este
campo. Si no lo hace aparece mensaje indi-
cando que se complete este campo, evitando
así mandar al servidor campos vacíos y proce-
samiento erróneo.
pattern Obliga al usuario usar un patrón definido de
entrada. Por ejemplo si estamos pidiendo la
edad o el número de teléfono, debe introducir
valores entre [0-9]. Si queremos ajustar a una
longitud exacta podemos usar {longitud} justo
después.
Con los nuevos atributos de HTML5 se simplifica mucho la validación de datos, pues
antes se debía usar JavaScript y normalmente en otra sección muy distinta del código. Como
contraposición, tenemos que tener en cuenta que no todos los navegadores lo soportan todavía,
ya que es un lenguaje en plena expansión. Algunos atributos sobre el diseño se verán en el ca-
pítulo de CSS3 y JQuery.
M1. HTML5
Un ejemplo de formulario puede ser el siguiente:
Si escribimos valores incorrectos, al pulsar en Enviar Datos nos aparece un mensaje

indicando que no coincide con el formato:
El código correspondiente dentro de las etiquetas <body> y </body> sería el siguiente:
<h4> CAMPO DE TEXTO. VARIOS ATRIBUTOS</h4>
<form action=”recogidadedatos.php” method=”post”>
Estoy aprendiendo<br>
121
<input type=”text” name=”curso” value=”HTML5” readonly><br>
Introduce tu nombre (valor por defecto, obligatorio y autofocus)<br>
<input type=”text” name=”nombre” value=”Usuario” required autofocus><br>
Introduce tu edad (solo número y longitud 2)<br>
<input type=”text” name=”edad” pattern=”[0-9]{2}”><br>
Introduce tu nombre de usuario (solo letras mayúsculas-minúsculas y 8 caracteres exactamente)<br>
<input type=”text” name=”usuario” pattern=”[A-Za-z]{8}”><br>
<hr>
Introduce tu dirección (texto orientativo)<br>
<input type=”text” name=”direccion” placeholder=”Dirección actual”><br>
<input type=”submit” value=”Enviar Datos”>
</form>
Aula Mentor
3.2.2. Campos de texto para contraseñas.
En muchas ocasiones nos interesa agregar un campo que oculte la información que está
escribiendo en pantalla el usuario, por ejemplo cuando vamos a ingresar una contraseña, no se
imprimirán por pantalla el texto sino que aparecerán * o •. Para ello usamos el atributo <input
type=”password”> Si al ejemplo anterior, quisiéramos añadirle el campo contraseña tendría-
mos que agregar después del nombre usuario:
Introduce tu contraseña<br> o <label for=”miCampoPass”>Introduce tu contraseña</label>
<input type=”password” name=”pass” id=”miCampoPass”>
También podemos usar los atributos de filtro y restricciones vistos anteriormente, por
ejemplo si queremos que tenga solo números y 6 números de caracteres exactamente, debería-
mos escribir:
Introduce tu contraseña<br>
<input type=”password” name=”pass” pattern=”[0-9]{6}”><br>
Envío datos formulario

122
Comentar que en el lado del servidor se representarán los valores que hayamos escrito,
el formulario completo que se recibirá usando datos del ejemplo 4.
Si nos fijamos en el campo referente a la dirección actual, no hemos recibido nada ya

que al no poner que sea obligatorio con required, ni haber rellenado el usuario, sólo se ha
mostrado el texto orientativo “Dirección actual”; pero debemos recordar que este no llega al
servidor, se queda en la parte del cliente.
3.2.3. Áreas de texto.
Las áreas de texto son ampliamente usadas para la escritura de texto con muchos carac-
teres, normalmente van a ser comentarios u observaciones por parte del usuario. No debemos
confundir con un campo de tipo input=”text”. Para ello usamos la etiqueta <textarea>…</tex-
tarea>.
Siguiendo con el ejemplo anterior, si queremos añadir un campo que sea comentarios/
observaciones u otros datos, deberemos escribir lo siguiente:
M1. HTML5
Otros datos de interés. Versión 1: Por defecto con nombre<br>
<textarea name=”comentarios1”></textarea><br>
Nos mostraría un campo donde podemos introducir texto, en el navegador veríamos:
Podemos usar muchos atributos como pasaba con la anterior etiqueta, a continuación os
muestro los más importantes:
ese campo dentro de ese formulario.
maxlength Número máximo de caracteres que el usuario
puede introducir en el campo.
value Valor por defecto que va a contener el campo,
como si el usuario hubiera escrito el valor. El
usuario puede modificar si quiere el valor.
readonly Indica que el usuario no puede modificar el
contenido, se quedaría en modo lectura. Apa-
recerá el valor pero no se podrá editar.
placeholder Sugerencia del texto, orientamos al usuario 123
con el valor a introducir, pero no lo toma
como valor por defecto, como pasa con el
atributo value.
autofocus Sitúa el foco sobre el elemento para que el
usuario no tenga que desplazarse a él y hacer
clic.
required Obliga al usuario a escribir o rellenar este
campo. Si no lo hace aparece mensaje indi-
cando que se complete este campo, evitando
así mandar al servidor campos vacíos y proce-
samientos erróneos.
Pattern Obliga al usuario a usar un patrón definido de
entrada. Por ejemplo si estamos pidiendo la
edad o el número de teléfono, debe introducir
valores entre [0-9]. Si queremos limitar a una
longitud exacta podemos usar {longitud} justo
después.
Wrap Específica cómo se van a tratar los saltos
de línea cuando se envíe el contenido. Con
wrap=”hard” se inserta un carácter de salto de
línea junto al texto. Con wrap=”soft” no se in-
serta ningún carácter de salto de línea (opción
tomada por defecto en el navegador).
Veamos un ejemplo con algunos atributos y veamos la diferencia de wrap=”hard”:

Aula Mentor
Y obtendríamos en el navegador el siguiente resultado, cada vez que ha cambiado de

línea ha insertado un salto de línea en el código:
Hemos usado el siguiente código:
Otros datos de interés. Versión 1: Por defecto con nombre<br>
<textarea name=”comentarios1”></textarea><br>
Otros datos de interés. Versión 2: Añadimos más atributos<br>
<textarea name=”comentarios2” wrap=”hard” required autofocus maxlength=”50” cols=”150”></textarea><br>

124
3.2.4. Listas desplegables.
En determinadas ocasiones nos encontramos en las páginas y aplicaciones web listas

desplegables, dando diferentes opciones predefinidas al usuario. Estas opciones normalmente
se cargan de ficheros o bases de datos, pero si necesitamos de una forma rápida dar varias op-
ciones podemos hacerlo agregando dentro de nuestro formulario el siguiente código:
<select name=”opcion_documento”>
<option value=”dni”>DNI</option>
<option value=”cif”>CIF</option>
<option value=”otros”>Otros documentos</option>
</select>
Nos mostraría una lista desplegable como la siguiente:
Envío datos formularios

M1. HTML5
Debemos fijarnos que el valor que se mandaría con este formulario no es DNI en ma-
yúsculas, ya que ese valor es el que se muestra al usuario, el verdadero valor es el que está en
el parámetro value=” “.
ese campo dentro de ese formulario. Si va a
ser una selección múltiple debemos añadir
después del nombre dos corchetes [ ]. P.e <se-
lect name=”opciones[ ]” multiple>
size Indica el número de elementos que va a visua-
lizar en el desplegable, por defecto, siempre
es uno y al hacer clic en la fecha de la derecha
se despliegan los elementos restantes, pero si
se hace igual al número de elementos apare-
cerán todos de una vez y se podrá seleccionar
haciendo clic en uno de ellos directamente.
value Valor por defecto que va a contener el campo;
éste puede ser alfanumérico. Es el valor que
recibirá el servidor o elemento que esté indi-
cado en el action.
multiple Si indicamos este atributo podremos seleccio-
nar varios elementos de la lista y éstos serán
los que reciban el servidor o elemento que
esté indicado en el action. Para marcar más 125
elementos, el usuario deberá tener la tecla
[Ctrl] pulsada a la vez que hace la multiselec-
ción.
selected Si no se indica ningún elemento de la lista,
aparecerá por defecto el primer elemento de
la lista. En caso contrario, el elemento que ten-
ga selected como atributo será marcado por
defecto.
Veamos a continuación un ejemplo más complejo usando los atributos mostrados:
¿Qué tipo de música te gusta?:
<select name=”opcion_musica” multiple>
<option value=”blues” selected>Blues</option>
<option value=”jazz”>Jazz</option>
<option value=”clasica” selected>Clásica</option>
<option value=”disco”>Disco</option>
<option value=”pop”>Otros documentos</option>

Aula Mentor
</select>
En este caso hemos usado una selección múltiple, con varias opciones predefinidas. Si
ejecutamos eso en el navegador tendríamos un resultado parecido a éste:
[opcion_musica1] => clasica
En este momento nos hemos dado cuenta que sólo le ha pasado la última opción que
tiene el selected, ¿entonces para qué está la selección múltiple? Bueno, realmente lo está ha-
ciendo bien y si pasamos los datos en action=”” pasará los datos por URL correctamente. Si
cambiamos el action veremos que en la barra de direcciones aparece lo siguiente
……MODULO1/U2/HTML5/Ejemplo4/?opcion_musica2=blues&opcion_musica2=clasica
Pero ojo, pensemos que tenemos que mantener una web que usa PHP y debemos captu-
rar todos los datos que ha marcado el usuario, ¿cómo se podría hacer? Debemos forzar e indicar
al navegador que esta variable va a ser un array (lista de parámetros) en vez de una variable
sola, para ello al final del nombre de la lista de selección debemos poner dos corchetes [ ], sin
espacio entre ambos.
126 Versión 2. ¿Qué tipo de música te gusta?:<br>
<select name=”opcion_musica2[]” multiple>
<option value=”blues” selected>Blues</option>
<option value=”jazz”>Jazz</option>
<option value=”clasica” selected>Clásica</option>
<option value=”disco”>Disco</option>
<option value=”pop”>Pop</option>
</select>
[opcion_musica2] => Array
Envía datos formulario [0] => blues
[1] => clasica
)
M1. HTML5
Recordar que los valores que se envían son los contenidos en el atributo value del
option y no el nombre que define el ítem de la lista.
3.2.5. Botones de selección única.
Para mostrar botones de selección única, llamadas radio button, se usa la siguiente
sintaxis.
<input type=”radio” name=”nombre asociado” value=”valor asociado”>Texto mostrado
El texto mostrado es sólo para indicar al usuario que opción está relacionada con la
elección, así si quisiéramos preguntar al usuario su país de nacimiento podríamos escribir:
<p>Selecciona tu país de nacimiento</p>
<form action=”recogidadedatos.php” method=”get”>
<input type=”radio” name=”nacidoen” value=”spain”>España
<input type=”radio” name=”nacidoen” value=”london”>Londres
<input type=”radio” name=”nacidoen” value=”eeuu”>Estados Unidos
<input type=”radio” name=”nacidoen” value=”germany”>Alemania

127
<br>
</form>
Mostrando en pantalla las siguientes opciones:
[nacidoen] => spain
Si queremos marcar una opción predefinida en el formulario, aunque el usuario siem-

pre puede modificar ésta y poner otra, podemos usar el atributo checked quedando el código
anterior si queremos poner por defecto nacido en Estado Unidos:
<p>Selecciona tu país de nacimiento</p>
<input type=”radio” name=”nacidoen” value=”spain”>España
<input type=”radio” name=”nacidoen” value=”london”>Londres

Aula Mentor
<input type=”radio” name=”nacidoen” value=”eeuu” checked>Estados Unidos
<input type=”radio” name=”nacidoen” value=”germany”>Alemania
<br>
</form>
3.2.6. Botones de selección múltiple.
Si queremos usar otro componente para seleccionar varios elementos, y poder hacer una
especie de lista para checkear, existen los elementos de tipo chekbox.
128
<input type=”checkbox” name=”nombre asociado” value=”valor asociado”>
También disponemos del atributo ckecked para indicar los valores marcado previamente
y recordando lo que pasaba en el ejemplo anterior, si queremos pasarle todos los datos al post,
debemos agregar al final del nombre corchete de apertura y de cierre [ ] (sin espacio entre am-
bos). Si por ejemplo, queremos hacer al usuario una pregunta que va a tener múltiples respues-
tas, podríamos hacer lo siguiente:
¿Qué tipo de música te gusta?:<br>
<p>Selecciona la música que te gusta</p>
<input type=”checkbox” name=”megustalamusica[]” value=”blues” checked>Blues<br>
<input type=”checkbox” name=”megustalamusica[]” value=”jazz”>Jazz<br>

M1. HTML5
<input type=”checkbox” name=”megustalamusica[]” value=”clasica” checked>Clásica<br>
<input type=”checkbox” name=”megustalamusica[]” value=”disco”>Disco<br>
<input type=”checkbox” name=”megustalamusica[]” value=”pop”>Pop<br>
<br>
</form>
3.2.7. Botón de envío.
Como hemos visto anteriormente la forma más común de envío de un formulario es

usando dentro del formulario la etiqueta:
<input type=”submit” value=”NombreDelBoton”>
Con esto le comunicamos al navegador que debe actuar y enviar a la dirección que
contenga action los datos que contenga el formulario. Si no se indica nombre en el value del
submit, dependiendo del idioma y del navegador, agregará un texto por defecto, por ejemplo
en Firefox el texto que pone por defecto es “Enviar consulta”, en Google Chrome “Enviar”, en
Internet Explorer “Enviar consulta”, etc.
129
Podemos usar en vez de un botón, una imagen. Para ello debemos usar el atributo src y
usar la etiqueta de la siguiente forma:
<input type=”image” src=”rutadelaimagen”>
Veamos un ejemplo; si en vez del típico botón queremos agregar uno diferente, y tene-
mos la siguiente imagen, llamada btn_envio.jpg dentro de la carpeta img:
Tendríamos que agregar el siguiente código:
PRUEBA: <input type=”text” name=”prueba” value=”prueba”>
<input type=”image” src=”img/btn_envio.jpg”>
</form>
Y obtendríamos el siguiente resultado, al pulsar sobre él:

Aula Mentor
Si nos fijamos además de la variable de texto que le hemos enviado llamada prueba con
el valor que hemos escrito “prueba”, se ha enviado unas coordenadas [x] e [y] que corresponde
a las coordenadas donde hemos hecho clic dentro del botón de la imagen.
3.2.8. Botón de reset.
Es posible que en determinadas situaciones queramos resetear todo el formulario y po-

nerlo en su estado original, para ello debemos escribir los siguientes atributos:
<input type=”reset” >
Al igual que pasaba con el botón submit, podemos agregarle un texto inicial distinto al
que selecciona el navegador:
<input type=”reset” value=”Resetear configuracion”>
El efecto será en el caso de que hayamos escrito algo en todos los elementos que com-
130 pongan el formulario (texto, textarea, select, radio button, checkbox, etc.) después de pulsar el
botón “Resetear configuración”, los pondrá en su estado original. Veamos un ejemplo de prueba,
si el usuario tiene relleno un formulario con los siguientes datos:
Si pulso aquí se resetean los campos del

formulario
3.2.9. Botón de acción.
Podemos añadir otro tipo de botón a nuestro formulario, tanto para activar comandos en
JavaScript o JQuery, como para hacer que todo un bloque o imagen sea un botón para el usua-
rio. Para ello usamos la etiqueta <button> </button>, y si la estamos usando en un formulario
esta etiqueta puede sustituir el botón de envío o de anulación de un formulario (submit, reset).
Pero también se puede usar fuera del formulario, por eso se les llama de acción, porque van a
realizar alguna acción ya sea localmente o va activar una función externa, que posteriormente
debemos de programar.
M1.HTML5
Imaginemos que queremos que cuando se pulse el botón nos salga una ventana de
JavaScript indicando “Hola, has pulsado el botón”; posteriormente en el módulo de JQuery pro-
fundizaremos más en estas acciones.
<button onclick=”alert(‘Hola, has pulsado el botón’)”>Pulsa aquí y se abrirá una ventana</button>
El resultado y la forma de la ventana dependen del navegador, por ejemplo en Mozilla

Firefox se vería así:
Los atributos más importantes que puedes usar con esta etiqueta son los siguientes:
name Nombre que va a distinguir a este componen-
te.
type Define el estilo del botón, si es para dentro
de un formulario podemos usar los atributos
submit y reset. Si es fuera de él podemos usar
button.
disabled Desactiva el botón impidiendo que el usuario 131
pulse sobre él. Un ejemplo típico puede ser,
hasta que no rellene todos los campos desac-
tivamos el botón de continuar. Cuando todos
los campos no estén vacíos, vuelvo a poner el
botón en enabled.
Un ejemplo de formulario usando el botón de acción podría ser:
PRUEBA : <input type=”text” name=”prueba” value=”” placeholder=”Introduce un texto”>
<br>
<button type=”submit”>Enviar Formulario</button>
<button type=”reset”>Resetear Formulario</button>
</form>
Crea por ti mismo dos formularios, uno usando <input type=”submit”> y otro con <button
type=”submit”>, observa que el resultado es el mismo, pero en este último caso puedes agregar
más información ya que al tener etiqueta de apertura y de cierre, dentro podemos usar más co-
sas como pasa con el <input type=”submit>.
Aula Mentor
Si tienes problemas, puedes usar el código de ejemplo 4.
3.2.10. Campos ocultos.
Además de las variables que hemos visto anteriormente, podemos pasar información
oculta que no aparecerá en la pantalla del usuario, pero sí podremos tratar posteriormente en
el servidor, o localmente con JQuery. Un ejemplo puede ser la hora del sistema, el índice de la
tabla que ha pinchado el usuario, el nombre del archivo que lo llama o cualquier otra cosa que
se crea para que ayude al programador. Para ello tenemos que usar la siguiente estructura:
<input type=”hidden” name=”nombre_variable” value=”valor_variable”>
Vamos a crear un formulario donde le vamos a preguntar al usuario su nombre y su dni.

Además vamos a mandar de forma oculta una variable llamada estoyoculta con un valor fijo, en
posteriores capítulos enriqueceremos todas estas características. Puedo pasar muchas variables,
en este caso voy a pasar dos, una llamada oculta1 con el valor valoroculta1 y otra llamada
oculta2 con el valor valoroculta2.
132
Deberemos de usar el siguiente código:
Nombre: <input type=”text” name=”nombre” value=”” placeholder=”Introduce tú nombre”><br>
DNI: <input type=”text” name=”dni” value=”” placeholder=”Introduce tú dni”><br>

<input type=”hidden” name=”oculta1” value=”valoroculta1”>
<input type=”hidden” name=”oculta2” value=”valoroculta2”>
<button type=”submit”>Enviar Formulario</button>
<button type=”reset”>Resetear Formulario</button>
</form>
El formulario se mostraría de la siguiente forma:

M1.HTML5
Y si rellenamos los campos con Minombre y 12345678, estaríamos mandado los siguien-
tes datos, sin que el usuario lo sepa:
Prueba a pasar varias variables ocultas dentro de un formulario, y observa que se reciben
correctamente. Tienes un ejemplo en el archivo: Ejemplo4/#variablesocultas
4. Resumen.
- La estructura de HTML5 difiere de sus versiones anteriores, en declaraciones distintas de las
etiquetas y la incorporación de etiquetas o Tags nuevos.
- Quirks Mode será el modo que adoptará el navegador y como mostrará la página si no
encuentra declarado el DOCTYPE en la primera línea del archivo HTML.
- La meta etiqueta charset, indica el juego de caracteres usado, en nuestro caso usaremos UTF-
8, ya que es un conjunto de caracteres internacionales de Unicode de diferentes idiomas.
- Las etiquetas que nos proporciona HTML5 para crear la semántica de la web son <headers>
para cabeceras, <nav> para la navegación, <footer> para la parte inferior y <aside> para los
anexos que deseemos añadir.
133
- Para crear párrafos usaremos la etiqueta <p>…texto…</p>, ésta insertará un salto de línea
antes y después del texto insertando en su interior.
- El uso de títulos en la web es muy importante para organizar y clasificar el contenido se-
gún la importancia. Disponemos de diferentes niveles de títulos, siendo de mayor a menor
<h1><h2><h3><h4><h5><h6>.
- Podemos usar listas ordenadas <ol> como no ordenadas <ul>. Los ítems de cada lísta se han
de definir con la etiqueta <li>. Éstas tienen diferentes atributos que podemos usar, además
de poder entremezclarlas entre sí.
- Con la etiqueta <blockquote> podemos agregar citas a nuestra web, ésta agregará un salto
de línea antes y otra después. También podemos usar la etiqueta <q> para crear citas, pero
en este caso serían en línea, sin agregar ningún salto de línea.
- Se pueden agregar diferentes formatos o estilos a los textos de nuestra web, para ello usare-
mos <b> para texto en negrita, <i> para texto en cursiva. Para agregar saltos de línea usare-
mos la etiqueta <br> y para agregar líneas de separación usaremos <hr>, ésta última también
agrega un salto de línea antes y después.
- Otras etiquetas nuevas disponibles en HTML5 para la organización y estructura semántica de

la web, sería <section> para agregar secciones y <article> para agregar artículos.
Aula Mentor
- En todas las páginas usaremos enlaces de diferentes tipos usando la etiqueta <a>. Común-
mente se llaman hipervínculos y nos pueden enlazar tanto con una página local a nuestra
web, a una página web externa, secciones concreta de la misma página, direcciones de
correo o archivos para que el usuario se descargue. En HTML5 también se pueden hacer
enlaces a elementos de bloque para posteriormente agregarles los efectos que deseemos.
- Para el uso de elementos multimedia en la web, tenemos la etiqueta <audio> para agregar
audio y <video> para agregar nuestros vídeos. A veces será necesario la conversión a dife-
rentes formatos para dar soporte a más navegadores.
- Para el uso de tablas, usaremos la etiqueta <table>, donde definiremos las filas como <tr> y
las columnas con <td>. Existen otras etiquetas como son <th> para indicar celda cabecera o
<caption> para agregar un texto a la tabla.
- Los formularios son unos elementos web que usaremos a través de la etiqueta <form>, don-
de agregaremos elementos en su interior de diferentes tipos para que el usuario introduzca
datos para su posterior procesado en la URL indicada en el action.
- Podemos agregar dentro de los formularios los diferentes elementos:
* Campos de texto: <input type=”text” ….name=”x” value=”y”>
* Campos de texto - codificado: <input type=”password” name=”x” value=”y”>
* Areas de texto: <textarea name=””>x</textarea>

134
* Listas de selección: <select name=” “>
<option value=” “>Opcion1</option>
….
….
</select>
* Botón de selección única (radio): <input type=”radio” name=”x” value=”y”>
* Botón de selección multiple (checkbox):<input type=”checkbox” name=”x”

value=”y”>
* Botón de envío de formulario: <input type=”submit” name=”x” value=”y”>
<input type=”image” src=”x”>
* Botón para resetear formulario: <input type=”reset” value=”y”>
* Botón de acción: <button name=”x”>texto</button>
<button type=”submit”>texto</button>
M1.HTML5
<button type=”reset”>texto</button>
* Podemos ademas agregar a los formularios información oculta al usuario, no

puede interactuar con ella pero si se mandaría al servidor:
<input type=”hidden” name=”nombre_variable” value=”valor_variable”>
135
Unidad 3. Elementos avanzados con
HTML5
1. Elementos avanzados con HTML5.
1.1. Script y NoScript.
En esta unidad vamos a ver algunos elementos que son totalmente nuevos y otros que
se han mantenido en HTML5 ya que su utilidad era realmente necesaria. Este es el caso de las
etiquetas <script></script><noscript></noscript>.
136 Debemos saber que un script son trozos de código de programación que realizan una
función determinada, en HTML y HTML5 siempre que hablamos de script nos referimos a trozos
de código realizado en JavaScript. Por ejemplo, si queremos sacar una ventana cuando pulsa-
mos sobre un texto, deberíamos agregar este texto entre el <head> del documento:
<script type=”text/javascript”>
function muestraVentana() {
alert(‘Soy una ventana!’);
</script>
Analicemos este código y así nos vamos introduciendo un poco en la programación

avanzada para la web, vamos a ir analizando línea por línea:
Le comunicamos a nuestro navegador que vamos a usar un script de tipo “text/javascript”
Una function o función es aquella que realiza unas acciones determinadas, puede reci-
bir unos parámetros de entrada para procesarlos posteriormente y además nos puede devolver
M1. HTML5
el resultado o la acción que deseemos. En este caso nos creamos una función muestraVenta-
na(), la cual no va a tener ningún parámetro de entrada, podría tener por ejemplo un texto de
entrada y sea ése texto el que muestra la ventana, y nos abrirá una ventana en el navegador.
Un detalle muy importante respecto a las funciones es que podremos llamarlas las veces
que deseemos dentro del código, pues siempre debemos intentar reutilizar el código, ya que
éste nos facilitará el mantenimiento web, reducirá y simplificará la página. Las siguientes líneas
que tengamos a partir de la llave de la función serán las acciones a realizar, en este caso tene-
mos:
alert(‘¡Soy una ventana!’);
En esta función vamos a crear una ventana con un texto fijo. Por ejemplo ¡Soy una ven-
tana! Pero podríamos hacer muchas otras funciones: sumar parámetros de entrada y devolver el
resultado, restar, modificar el contenido web, etc. Lo único que tenemos que tener en cuenta es
que todas estas funciones se hacen del lado del cliente, es decir, quien realizaría la suma es el
navegador del cliente, y no nuestro servidor web.
Esto es muy ventajoso, ya que en muchos casos realizamos acciones de cálculo en el

cliente, comprobaciones de formularios, etc. y no saturamos el servidor, sirviendo a su vez de
pre-filtro. Lo único que sí debemos tener en cuenta es que al estar del lado del cliente y poder
mostrarse el código fuente del archivo, el usuario siempre podrá ver este código y saber qué
hemos realizado o qué estamos comprobando; pero la mayoría de las veces este detalle no nos
repercutirá.
} 137
Con esta llave cerramos la función e indicamos al navegador que ya hemos terminado de
hacer nuestras acciones. Todo este tipo de sintaxis es obligatoria y no se puede omitir, ya que
sino no funcionará correctamente, y encontrar errores a posteriori puede ser difícil.
</script>
Como en la mayoría de las etiquetas o tag HTML, debemos agregar la etiqueta de cierre
para comunicar que ahí finaliza. Es obligatoria ya que si no puede transformar el código html y
hacer pensar al navegador que toda nuestra página es de tipo script, lo que generaría errores en
nuestra web.
Ahora lo que nos hace falta es “llamar” a esa función para que realice las acciones per-
tinentes, una forma de hacerlo sería así:
<span onclick=” muestraVentana();”>Si pulsas sobre mí, abriré una ventana</span>
La parte de código en la que nos tenemos que fijar es en onclick=” muestraVentana();”
Le hemos añadido el evento onclick para decirle al navegador, cuando el usuario pulse
sobre mí (haga click sobre mí), que llame a la función muestraVentana();”.
El código completo sería:

Aula Mentor
<!DOCTYPE html>
<head>
<title>Script en HTML5</title>
</script>
</head>
138 <body>
<section>
<span onclick=” muestraVentana();”>Si pulsas sobre mí, abriré una ventana</span>
</section>
</body>
</html>
El resultado sería éste, aparece el texto y al pulsar sobre él, llamaremos a la función
muestraVentana(), realizará las acciones que corresponda, en este caso mostrar una alerta con
un texto concreto:
Puedes prácticar en Ejemplo01-noscript.html
Como hemos comentado existen muchos script posibles y acciones a desarrollar que
puede ser que nuestro navegador, sobre todo si es muy antiguo, no las soporte. Todo esto es
M1. HTML5
porque cuando se creó esa versión no existían, y si no se auto-actualiza el navegador no ha

renovado las funciones y métodos nuevos.
Otro problema que nos podemos encontrar es que el usuario tenga bloqueados los
script en su navegador, por lo que no podrá ejecutarlos. Si hemos basado parte del desarrollo de
nuestra web en ellos, es vital comprobar si el usuario va a poder leer o no los script. Para ello
se creó la etiqueta <noscript>, un ejemplo de uso puede ser:
</script>
<noscript>
<hr>
<p>Estimado usuario</p>
<p>Hemos detectado que nuestra página no se va a ver correctamente en tu navegador porque tienes des-
139
activado JavaScript </p>
<p>La prueba es que si pulsas sobre el texto anterior no se abrirá ninguna ventana</p>
<hr>
</noscript>
Para probar esto en nuestro navegador podemos bloquear la ejecución de JavaScript,

una forma puede ser directamente en el acceso directo del explorador y añadir el parámetro
-disable-javascript.
En Windows 7, nos vamos al enlace de Google Chrome, botón derecho sobre él, y botón
derecho nuevamente sobre el enlace Google Chrome y seleccionamos propiedades:
Nos abrirá una ventana con la configuración del acceso directo, buscamos la ruta y le
añadimos al final el parámetro -disable-javascript después de la comilla, dándole un espacio
entre ambos, quedando de la siguiente forma:
Aula Mentor
140
¡Ojo! Debemos ejecutar ese acceso directo y no cualquier otro que haya en el ordenador,
ya que sólo hemos modificado éste, y posteriormente escribir en la barra de direcciones del
navegador que se ha abierto: http://localhost . Por ejemplo si se hace desde el propio Wamp, no
funcionará ya que es un acceso diferente al que acabamos de modificar.
Otra forma de hacerlo es a través del propio navegador, para ello nos vamos a las prefe-
rencias del navegador:
M1. HTML5
Dentro de Privacidad, seleccionamos la opción Configuración de Contenido y se

abrirá una ventana:
141
Dentro de la opción de JavaScript seleccionamos: No permitir que ningún sitio eje-

cute JavaScript y pulsamos OK.
Ahora que tenemos desactivado JavaScript en nuestro navegador, si volvemos a ejecutar

el mismo archivo veremos que nos ha salido algo diferente, y además si pulsamos sobre el texto
como hacíamos antes, no nos abre ninguna ventana.
Además de usar la etiqueta <noscript> podemos detectar más información del navegador
y mostrar información más personalizada, informando al usuario de la necesidad de actualiza-
ción, sobre todo con las versiones antiguas de Internet Explorer, para ello podríamos hacer:
Aula Mentor



Practica intentando imitar el resultado sin usar el código del archivo ejemplo01-noscript.html.
1.2. Drag and Drop.
HTML5 da un gran paso con esta funcionalidad y se adapta a los nuevos dispositivos tác-
tiles, ya que permite que podamos hacer dinámica nuestra web y podamos arrastrar y soltar
(drag and drop) elementos a través de ella.
Para poder usar este elemento antiguamente se solía usar Adobe Flash Player, debido a
las posibilidades que nos facilitaba, pero con poco código hoy en día podemos añadir muchas
funcionalidades a nuestra web, y tendrán un efecto muy llamativo, además darán soporte a
Smartphone, Tablet y dispositivos táctiles en general.
¿Qué necesitamos para usar drag and drop?
1) Lo primero que necesitamos es un elemento a desplazar, lo más usual es una imagen. Por
ejemplo, voy a escoger la imagen de HTML5 y CSS3, le voy a poner de nombre logo_html5_css3.
jpg y la voy a guardar en mi carpeta images dentro de la carpeta web de mi servidor.
M1. HTML5
2) Lo siguiente es un elemento donde vaya a encajar esa imagen. Tenemos que pensar que ini-
cialmente estará en una ubicación y cuando la seleccionemos y arrastremos necesitaremos un
sitio donde soltarla. Para ello, adelantándome un poco a CSS3 vamos a usar una etiqueta que
se llama <div>. Pensemos de forma resumida, que con la etiqueta <div> voy a crear una capa/
caja contenedora, y ahí es donde voy a soltar mi imagen. Le voy a poner un borde (border) y
un tamaño para que se vea donde se insertaría, pero toda la parte del estilo no sería necesaria.
143
Si seleccionamos la imagen y sin soltar la arrastramos hasta el recuadro, vemos que se

queda dentro del recuadro. Para ello hemos tenido que usar el siguiente código:
<!DOCTYPE HTML>
<head>
<style>
#cajareceptora {width:160px;height:100px;padding:10px;border:1px solid #aaaaaa; }
</style>
<script>
function allowDrop(ev)
{
Aula Mentor
ev.preventDefault();
function drag(ev)
ev.dataTransfer.setData(“Text”,ev.target.id);
function drop(ev)
ev.preventDefault();
var data=ev.dataTransfer.getData(“Text”);
ev.target.appendChild(document.getElementById(data));
144 </script>
</head>
<body>
<p>Arrastra la imagen hasta dentro del recuadro:</p>
<div id=”cajareceptora” ondrop=”drop(event)” ondragover=”allowDrop(event)”></div>
<br>
<img id=”elementomovil” src=”images/logo_html5_css3.png” draggable=”true” ondragstart=”drag(event)”

width=”150” height=”92”>
</body>
</html>
Practica intentando imitar el resultado sin usar el código del archivo ejemplo02-drag-and-drop.
html
Vamos a ir analizando todo el código fuente para comprender la funcionalidad ya que

es un código un poco complejo si nunca has programado. Así nos irá sirviendo de introducción
para el módulo de jQuery.
M1. HTML5
<!DOCTYPE HTML>
<head>
Aquí no hay nada nuevo, declaramos nuestras etiquetas y preparamos el archivo como
hemos realizado en otras ocasiones:
<style>
#cajareceptora {width:160px;height:100px;padding:10px;border:1px solid #aaaaaa; }
</style>
Esta parte pertenece a CSS3 ya que se refiere a estilos, la hemos usado para hacer una
caja de 160px de ancho por 100px de alto. Le hemos puesto de nombre al divisor cajarecep-
tora. Le hemos agregado un espaciado de 10px y un border de 1px de tipo solido con el color
#aaaaaa, lo único realmente obligatorio de esta parte sería crearnos el divisor #cajareceptora,
darle un ancho (width) y un alto (height).
Ahora, voy a explicar cómo hemos definido la imagen, así entenderemos mejor cómo
funciona el drag and drop: 145
<img id=”elementomovil” src=”images/logo_html5_css3.png” draggable=”true” ondragstart=”drag(event)”

width=”150” height=”92”>
1) Hemos creado una imagen con identificador (id) = “elementomovil” para poder recuperarla
luego.
2) Seleccionamos la ruta donde va a estar nuestra imagen en nuestro servidor, en nuestro caso
sería: src=”images/logo_html5_css3.png”.
3) Luego le decimos al navegador que este objeto va a ser de tipo draggable, para que pueda
ser arrastrado, lo hacemos con: draggable=”true”.
4) Le vamos a decir la función que vamos a usar cuando se esté arrastrando: ondragstart=”drag(event)”
y a su vez llamamos a la función drag(event) de nuestro script. Si nos fijamos está declarada en
el head dentro del script:
function drag(ev)
ev.dataTransfer.setData(“Text”,ev.target.id);
}
Aula Mentor
Cuando la función drag(ev) recibe el parámetro (ev), llamaremos al método dataTrans-

fer.setData() que nos establece el tipo de dato y el valor de los datos arrastrados. En nuestro caso
sería de tipo Text y el valor sería el id que está recibiendo el evento, es decir, el id de la imagen
que se está trasladando: id=”elementomovil”.
En este caso, el tipo de datos es “texto” y el valor es el id del elemento arrastrado (“ele-
mentomovil”). Y por último le damos un tamaño, ancho y alto, a la imagen que ha de ser inferior
al que hemos declarado en la caja.
Con esto ya tendríamos definido lo que vamos a mover. Ahora nos tocaría definir donde
lo vamos a insertar o soltar:
<div id=”cajareceptora” ondrop=”drop(event)” ondragover=”allowDrop(event)”></div>
Para ello, volvemos a asignarle un identificador a nuestra caja, en este caso “cajareceptora” y le
añadimos los siguientes atributos:
ondrop Cuando suelte el elemento, quiero que llame a la función drop.
ondragover El evento ondragover especifica dónde los datos arrastrados se pueden

soltar. Por defecto, los datos / elementos no se pueden soltar sobre
otros elementos. Para permitir una caída sobre él, hay que evitar el
control predeterminado del elemento. Esto se hace llamando al méto-
do event.preventDefault() para el evento ondragover.
146 Ya tendríamos definido el elemento, donde lo vamos a soltar y qué métodos/funciones

tenemos que usar para poder realizarlo. Para comprender un poco más esta funcionalidad va-
mos a usar otro ejemplo, en este caso vamos a tener dos imágenes y dos recuadros, y vamos a
poder insertar cada una de las imágenes en cualquiera de los dos recuadros.
Y cada vez que queramos coger una imagen, la podemos arrastrar en el recuadro que
deseemos.
M1. HTML5
Tienes el código fuente en el ejemplo: Ejemplo03-drag-and-drop2.html
Revísalo e intenta imitar el resultado por ti mismo. Si te ha costado un poco entender esta
parte, conforme vayamos avanzando en el curso irás cogiendo soltura, no te preocupes. Debes
pensar que con pocas líneas puedes hacer un juego para tus usuarios, es decir, puedes coger
varias imágenes que correspondan a un paisaje y divídelas, coger varias cajas contenedoras y un
mensaje que diga: “ordena las fotografías correctamente”.
1.3. Diseño 2D. Canvas.
Otra de las funcionalidades más potentes de HTML5 es la integración del diseño 2D,
como si se tratara de un lienzo en un espacio web podremos crear diseños sobre él. Para ello
se usa la etiqueta <canvas> que está asociada a la API Canvas. Se podrían visualizar gráficos de
estadística directamente, crear formas geométricas, líneas, textos y dibujos propios. El diseño 2D
en HTML5 es el comienzo y se está trabajando para realizar 3D, lo que daría al programador de
webs total libertad para hacer lo que desee sin tener que usar ningún software externo.
Para empezar a usar el diseño en 2D lo primero que tenemos que hacer es delimitar el
espacio de trabajo, es decir, asignar un ancho y alto dentro de nuestra web, por ejemplo si qui-
siéramos un lienzo de 350 x 350, deberíamos poner:
<canvas width=”350px” height=”350px” canvas>
En caso de no indicar ningún tamaño nos crearía uno por defecto de 350px de ancho
por 150px, aunque la mayoría de las veces ese tamaño no será suficiente, todo dependerá del
proyecto que vayamos a abordar. 147
Al igual que en el apartado anterior vamos agregarle un borde a nuestro canvas, ya que
sino no podremos apreciarlo. Por ejemplo, un borde de un 1px y de color azul:
<canvas width=”350px” height=”350px” style=”border:1px solid blue”></canvas>
Eso nos crearía un recuadro en nuestra web, y en él podremos empezar a crear nuestros
diseños:
Esta etiqueta es relativamente reciente y no todos los navegadores lo soportan, por lo

que es muy interesante acompañar de un pequeño texto el canvas y así notificamos al usuario
que su navegador no es soportado para el diseño 2D. También al poder usar varios <canvas>
Aula Mentor
dentro de la misma página es bueno asignarle un identificador para poder acceder a él en caso
que sea necesario. Para comprobar si lee la etiqueta debemos escribir texto dentro de la etiqueta
<canvas>texto</canvas> indicando al usuario la información, por ejemplo una forma podría
ser:
<canvas id=”milienzo” width=”350px” height=”350px” style=”border:1px solid blue”>
Hemos detectado que tu navegador no soporta la etiqueta canvas, le recomendamos que actualice la versión
de su navegador para disfrutar totalmente de esta web….
</canvas>
Por ejemplo si ejecutáramos el mismo código en un navegador no compatible (Versión

igual o anterior de Internet Explorer 8):
148 Además se podrían dotar de más configuración de aspecto, pero al disponer de CSS3
siempre es mejor utilizarlo para independizar el código y la semántica del diseño. Una vez de-
clarado nuestro lienzo podemos pasar a escribir el código que generará nuestro gráfico en 2D.
Para ello vamos a usar nuevamente JavaScript, realizando las acciones que deseemos dentro de
las etiquetas <script type=”text/javascript”></script>.
Este se puede poner dentro de la etiqueta <head></head> o en el lugar que queramos

dentro del <body></body> y cerca de cuando la vayamos a usar para no tener problemas y no
tener que estar buscando el código por todo el documento. Para facilitar el uso, en estos ejerci-
cios lo pondremos justo después de declarar el lienzo.
1.3.1. Trazar una línea.
Para trazar una línea dentro de nuestro lienzo debemos saber dos puntos, el punto de
inicio y el punto final. Para facilitar esto existe una función llamada lineTo(x, y) que partiría des-
de el último punto e iría hasta las coordenadas indicadas en x e y de la función. Es decir, debe
existir alguna forma de indicar el punto inicial o desplazarnos a unas coordenadas concretas,
para ello disponemos de la función moveTo(x, y). Para trazar una línea horizontal, tendríamos
que hacer lo siguiente:
1) Seleccionar el canvas y su contexto. Imagina en la vida real que cogemos el cuaderno y ele-
gimos en que página o trozo de página vamos a dibujar.
//Declaramos una variable var de nombre canvas. Seleccionamos el elemento por el id
var canvas = document.getElementById(“milienzo”);

M1. HTML5
//Nos creamos otra variable var para almacenar el contexto del lienzo
var contexto = canvas.getContext(“2d”);
//Iniciamos el lienzo
contexto.beginPath();
2) Situamos el punto de inicio, para ello voy a elegir el punto (0,0) y vamos a elegir las coorde-
nadas x=0 e y=0 para que sepamos desde donde parte nuestro gráfico, aunque podríamos haber
elegido otra cualquiera:
//Seleccionamos el punto de referencia de nuestro gráfico
contexto.moveTo(0,0);
3) Ahora vamos a dibujar una línea hasta dentro de nuestro lienzo, como es de 350px de ancho
y 350px de alto, el centro estará en x=175, y=175.
//Seleccionamos el punto final
contexto.lineTo(175,175);
4) Pintamos o realizamos la traza que hemos preparado. Para ello debemos acabar el comando
stroke(). 149
//Agregamos tinta/trazamos la línea
contexto.stroke();
El ejemplo completo sería:
</canvas>
//Preparamos el lienzo y el contexto donde vamos a dibujar
Aula Mentor
//Seleccionamos donde va a partir nuestro gráfico
//Agregamos la “tinta a nuestro dibujo
contexto.stroke();
</script>
Y el resultado sería:
150
Bueno, a lo mejor te esperabas un resultado parecido a este:
Realmente este gráfico corresponde al siguiente código:
Por lo que se puede deducir que el lienzo tiene el punto con x=0 e y=0 (0,0) en la parte
superior izquierda, y el punto con x=350 e y=350 será la parte inferior derecha, para aclarar este
concepto añadamos una línea más con el fin de que vaya al punto x=350 e y=350:
M1. HTML5
//Seleccionamos donde va a finalizar nuestra línea
//Nos desplazamos al siguiente punto
contexto.stroke();
151
En verdad los valores x e y los tenemos que tomar como la separación desde la parte
superior respecto del eje de ordenadas y de abscisas. Supongamos un lienzo de 10px por 10 px,
y queremos dibujar una línea desde el (3,8) al (8,2). En la imagen siguiente se puede apreciar
cómo es realmente:
El código correspondiente a esta línea sería el siguiente:

Aula Mentor
</canvas>
//Seleccionamos donde va a finalizar nuestra línea
152
contexto.stroke();
</script>
Si pruebas este código veras que dibujas una línea exactamente tal y como hemos defini-
do, eso sí, demasiado pequeña porque 10px es muy poco en una pantalla, si multiplicamos los
valores por 10 o 20 o 30, etc. (x e y) tanto del lienzo como de los elementos se apreciará que
efectivamente la forma de trabajar y nombrar las coordenadas del canvas es de la forma antes
descrita.
Supongo que te estarás preguntando si podemos agregarle color a las trazas, por ejemplo
usar un color fijo o un color definido con RGB. Si queremos cambiar el color de la traza pode-
mos usar la siguiente función.
contexto.strokeStyle = “red”;
Podemos indicar el color de varias formas:
contexto.strokeStyle = “red”; //Color en inglés.
contexto.strokeStyle = “#FF0000”; //Color en Hexadecimal indicando intensidad RGB
contexto.strokeStyle = “rgb(255,0,0)”; //Color indicando la intensidad numérica (0-255)

M1. HTML5
contexto.strokeStyle = “rgba(255,0,0,1)”;
// Color indicando además la transparencia, el cuarto valor es un número entre 0 y 1. Por ejemplo 0
sería totalmente transparente, 1 sería totalmente opaco y 0.5 sería una transparencia al 50%, es decir,
mitad opaco mitad transparente.
Para el ancho de la línea también disponemos de otra función, en este caso deberíamos
usar lineWidth y el valor en píxeles del ancho de la línea, por ejemplo para una línea de 3
píxeles, deberíamos usar:
contexto.lineWidth = “3”;
Además podemos modificar la terminación de la línea, para ello usamos en este caso la
función lineCap, que puede tomar los siguientes valores:
- Butt. Valor por defecto. La línea acaba donde indica el valor de la línea.
- Round. Agrega medio círculo en el extremo de la línea, por lo que sobresaldría del valor de-
finido como terminación. El radio de este valor será la mitad del grosor de la línea.
- Square. Añade un borde cuadrado del mismo ancho que la línea y de alto como la mitad del
grosor de la línea.
153
¡Ojo! Para que se agregue el valor debemos forzar el pintado, e iniciar el trazo con con-
texto.beginPath() y finalizar con contexto.stroke(). Si no se aplicaría el último valor definido
en el lineCap a todos los trazos. El código correspondiente a este gráfico se puede ver a conti-
nuación:
contexto.strokeStyle = “blue”;
contexto.lineWidth= 30;
contexto.lineCap= “butt”;
Aula Mentor
contexto.stroke();
contexto.strokeStyle = “blue”;
contexto.lineCap= “round”;
contexto.stroke();
154 contexto.strokeStyle = “blue”;
contexto.lineCap= “square”;
contexto.stroke();
También podemos definir cómo se unen las líneas entre sí, para ello tenemos la propie-
dad lineJoin y puede tomar tres valores también:
- Miter. Valor por defecto. Prolonga las líneas para que converjan en un único punto.
- Round. Redondea las esquinas de la forma. El grosor de la parte redondeada sería en este caso
igual al grosor de la línea.
- Bevel. No realiza ninguna acción para enlazar las líneas.

M1. HTML5
miter
round
bevel

Si nos fijamos, la última línea está en el fin del marco del lienzo, pero debemos sacar
dos conclusiones, siendo el canvas de 400px de ancho por 400px de alto: la primera sería que
las líneas de un ancho de 30px, en este caso, estando ajustadas al final (400px) nos llevaría al
centro exacto de la línea (15px), el resto sería grosor, es decir, crece desde el centro hacia fuera
½ del tamaño de la línea. Y otro detalle que era de esperar es que aunque pintemos fuera del
canvas, no se mostrará, por lo que uno de los fallos típicos es escribir en coordenadas que no
corresponden a la “ventana” o al lienzo de existente.
Practica intentando imitar el resultado sin usar el código del archivo ejemplo08-canvas-linea4.
html.
1.3.2. Trazar un rectángulo.
Para trazar un rectángulo, con los conocimientos que ya tenemos podemos hacerlo rea- 155
lizando cuatro líneas:
//Nos vamos hacia la derecha, nos desplazamos por el eje x
//Nos vamos hacia abajo, nos desplazamos por el eje y
//Nos vamos hacia la izquierda, nos desplazamos por el eje x
//Nos vamos hacia arriba, nos desplazamos por el eje y
//encontrándonos con el valor que hemos definido anteriormente
Aula Mentor
Y nos dibujará un rectángulo con las dimensiones que habíamos creado:
Así podríamos crear las figuras geométricas que quisiéramos, cuadrados, triángulos, etc.
También existe otra forma de realizar ésto con una sola función, aunque muchas veces es nece-
saria la combinación de estas técnicas para realizar nuestro diseño. La función es strokeRect(x,
y, width, height).
//Dibujamos el rectángulo o cuadrado de dimensiones 200 de ancho y 200 de alto

156
contexto.strokeRect(100,100,200,200);
Prueba que el resultado es el mismo que el que teníamos anteriormente. Si quisiéramos

rellenarlo totalmente podemos usar una función específica para crear rectángulos rellenos, esta
se llama fillRect(x, y, width, height). Por ejemplo: queremos dibujar un rectángulo de 200 px
de ancho (width=”200px”) y 120px de alto (height=”120px”). Y queremos posicionarlo a 50px
del eje y, 100px del eje x (100,50). Como vimos en el apartado anterior las coordenadas x e y
corresponden a la parte superior izquierda del rectángulo.
contexto.fillRect(100,50,200,120);

M1. HTML5
Como hemos visto con una sola función, hemos realizado un rectángulo del tamaño pre-
visto y relleno, ahora si quisiéramos quitar relleno y por ejemplo dejarlo con un borde de 5px,
tendríamos que usar la función clearRect(x, y, width, height) y hacer lo siguiente:
Debemos pensar que tenemos que dibujar otro rectángulo dentro del mismo, pero real- 157
mente lo que estamos haciendo es hacer trasparente esa parte del dibujo:
//Dibujamos el rectángulo de dimensiones 200 de ancho y 120 de alto
contexto.fillRect (100, 50, 200,120);
//Limpiamos el interior del rectángulo desde el punto (105,55)
contexto.clearRect (105, 55,190,110);
Para usar otro color al definido por defecto (negro) podemos usar la función
fillStyle=”color” al igual que lo usábamos con las trazas. Por ejemplo si queremos añadir color
a este rectángulo debemos usar:
Aula Mentor
//Añadimos el estilo de relleno con un color predeterminado
contexto.fillStyle = “red”;
Podemos usar también la notación usando transparencia al igual que con la función
fillStroke, siendo el valor comprendido entre 0 y 1.
Con todo lo que hemos visto hasta ahora estamos preparados para dibujar el siguiente
gráfico. Aunque tienes el código resuelto en los ejemplos del curso, intenta por ti mismo reali-
zarlo para ir cogiéndole soltura al diseño con canvas 2D.
158
Te animo a que intentes reproducirlo por ti mismo en el ejemplo12-canvas-rectangulos-

y-transparencias.html y fíjate que en la parte inferior hay un rectángulo con una transparencia al
50% (0.5), puedes usar para ello:
contexto.fillStyle = “rgba(126, 255, 95, 0.5)”;
contexto.fillRect (0, 750, 800, 50);
1.3.3. Trazar formas geométricas.
Podemos realizar formas geométricas agregando ángulos definidos en radianes a nuestro

canvas. Para ello tenemos la función:
arc(x, y, radio, anguloInicial, anguloFinal, sentidoInverso)
x e y: Se refiere a las coordenadas del centro del círculo o la forma a dibujar.
radio: Radio del círculo o arco en radianes (no en grados). Recordemos que:
360 grados = 2π rad
180 grados = π rad

M1. HTML5
90 grados = π/2 rad
45 grados = π/4 rad
Para representar π podemos usar la constante Math.PI, en la siguiente imagen podemos

ver cómo se corresponden los grados y los radianes.
159
anguloInicial y anguloFinal: Ángulos desde el eje x.
sentidoInverso: Valor booleano que indica el sentido del arco. Con valor = false el
sentido de las agujas del reloj, con valor = true en orden inverso.
Veamos un ejemplo: para trazar en un canvas de 400 x 400 un círculo de radio 150, de-
beremos fijar primero el centro a un valor: (200,200), el radio: (150) y si es un círculo completo,
debemos añadir de ángulo inicial cualquiera: (0) y de final: (360), lo que es 2*Math.PI, y el sen-
tido daría igual en este caso, por lo que lo pondríamos a true.
Aula Mentor
Y el código fuente para realizarlo sería el siguiente:
//Definimos un tamaño para la línea
contexto.lineWidth = 2;
160
//Definimos nuestro círculo
contexto.arc(200,200,150,0,2*Math.PI, true);
//Añadimos Tinta al trazo
contexto.stroke();
Ahora nos plantemos una pregunta, ¿y si quisiéramos rellenar el círculo y utilizar un co-
lor concreto para el exterior? Podemos realizarlo sin ningún problema, si quisiéramos llenar el
interior del color #aabbcc podemos usar la función fill() y para el trazo de color rojo, tendremos
que añadirle las propiedades de antes de realizarlo:
//Definimos un tamaño para la línea
//Preparamos los estilos de la línea y relleno

M1. HTML5
contexto.strokeStyle = “red”;
contexto.fillStyle = “#aabbcc”
contexto.fill();
//Añadimos Tinta al trazo
contexto.stroke();
Y el resultado sería el siguiente:
161
Si por ejemplo quisiéramos hacer solo la parte superior o la inferior del círculo, es decir
desde los grados “0”, hasta “270” en el sentido inverso de las agujas del reloj, simulando la puesta
de sol tendríamos:
sentidoInverso=true sentidoInverso=false
Debemos comprender que podemos hacer todas las configuraciones que queramos para
obtener aquel resultado que tenemos pensado. Siempre debemos tener claro los parámetros que
nos da la función arc y usarla correctamente.
Aula Mentor
Existe la posibilidad de realizar formas más complejas como son las curvas de Bézier,
quadraticCurveTo y bezierCurveTo. Para poder usarlas debemos tener conocimientos avan-
zados sobre matemáticas y las curvas de Bézier, en los recursos se pueden ver dos ejemplos y a
continuación se muestran los resultados, dejamos de tu parte profundizar en este tema ya que
es una parte muy potente, amplia y a la vez bonita, aunque se aleja de los objetivos del curso:
Puedes prácticar en ejemplo16-canvas-Bezier-quadraticCurveTo.html.
Puedes prácticar en ejemplo17-canvas-Bezier-bezierCurveTo.html.

162
Si nunca has usado las curvas de Bezier, puedes ver un ejemplo a modo introductorio
en:
http://www.geogebratube.org/student/m39087
o en:
http://resources.arcgis.com/es/help/main/10.1/index.html#//01m80000000w000000
la mayoría de los programas de diseño las usan debido a su potencia.
1.3.4. Agregar texto.
Además de líneas, rectángulos, círculos, arcos y sus combinaciones podemos agregar

texto como tal a nuestro canvas, pudiendo agregar el texto con sólo el contorno o relleno. Para
ello tenemos dos funciones:
fill-Text(“texto”, x, y). Inserta el texto dado en el primer parámetro en las coordenadas

x e y; en este caso con el interior relleno.
strokeText(“texto”,x,y). Inserta el texto dado en el primer parámetro en las coordena-

das x e y; en este caso solo el contorno.
Estas funciones soportan tres parámetros para poder adaptarse a nuestras necesidades:
M1. HTML5
Propiedad Descripción
font Tipo de letra que vamos a usar, asignando un
tamaño y un tipo de letra en concreto, por
defecto el tipo de letra es sans-serif.
textAlign Nos indica la alineación del texto que puede
tener varios parámetros:
Left: alineación a la izquierda.
Right: alineación a la derecha.
Center: alineación centrada.
Start: alineación en el inicio de la línea para

escribir de izquierda a derecha, esta opción es
la seleccionada por defecto.
End: alineación al final de la línea para es-

cribir de derecha a izquierda.
163
textBaseline Indica la línea de referencia de la escritura de

texto. Los posibles valores pueden ser: top,
middle, alphabetic y bottom. El valor por
defecto es alphabetic, también existe hanging
y ideographic pero los más usados son los
cuatro primeros:
Aula Mentor
Por ejemplo, para agregar texto a nuestro canvas lo podemos hacer de la siguiente ma-
nera:
contexto.texBaseline = “alphabetic”;
contexto.textAlign = “left”;
contexto.font = ‘40px “Arial” bold’;
contexto.fillText(“Aprendiendo HTML5”, 20,100);
contexto.font = ‘40px “Segoe UI” bold’;
contexto.strokeText(“Aprendiendo HTML5”,20,200);
Y el resultado sería el siguiente, nótese que hemos usado la misma fuente pero una fun-
164 ción diferente en cada caso:
Puedes consultar el ejemplo18-canvas-texto.html.
1.3.5. Agregar sombreados.
Una función muy utilizada últimamente en las web, es usar sombreados de textos y lí-
neas. En HTML5 podemos añadir tanto sombreados a nuestros gráficos, como a nuestros textos.
Para ello disponemos de cuatro propiedades que vamos a ver a continuación:
M1. HTML5
shadowOffsetX Indica el margen de sombra respecto del eje
X. El valor puede ser positivo o negativo, des-
plazándose por el eje hacia la izquierda o de-
recha.
shadowOffsetY Indica el margen de sombra respecto del eje Y.
El valor puede ser positivo o negativo, despla-
zándose por el eje hacia arriba o hacia abajo.
shadowBlur Indica el efecto de dispersión de la sombra, el
valor por defecto es 0.
shadowColor Indica el color del efecto sombreado, por de-
fecto es negro y la notación es similar al estilo
CSS3 que veremos en el siguiente módulo.
Un ejemplo agregando líneas, textos y círculos puede ser el siguiente: Ejemplo19-canvas-

sombreado.html
165
Debemos fijarnos en el siguiente detalle; hemos decidido que no se muestre el texto

superior con sombreado, agregando las funciones sobre el sombreado a continuación de éste.
El código fuente correspondiente será:
//dibujamos el primer texto
contexto.texBaseline = “alphabetic”;
contexto.textAlign = “left”;
contexto.font = ‘40px “Arial” bold’;
contexto.fillText(“Aprendiendo HTML5”, 20,100);
//vamos a definir el sombreado
contexto.shadowOffsetX = 5;
contexto.shadowOffsetY = 5;
Aula Mentor
contexto.shadowBlur = 5;
contexto.shadowColor = “red”;
//dibujamos la línea debajo del texto
contexto.moveTo (20,102);
contexto.lineTo (380,102);
contexto.stroke ();
//dibujamos el segundo texto
contexto.font = ‘40px “Segoe UI” bold’;
contexto.strokeText (“Aprendiendo HTML5”, 20,200);
166 //dibujamos la línea debajo del texto
contexto.moveTo (20,202);
contexto.lineTo (380,202);
contexto.stroke ();
//Preparamos los estilos de la línea y relleno
contexto.fillStyle = “#aabbcc”

M1. HTML5
//Añadimos tinta al trazo
contexto.stroke();
1.3.6. Agregar imágenes.
Como era de esperar, además de figuras dibujadas por nosotros mismos, podemos agre-
gar imágenes a nuestro canvas, con esta funcionalidad podemos hacer unos gráficos muy poten-
tes, ya que por ejemplo podemos agregar una fotografía y agregarle marcos distintos (dibujando
rectángulo del tamaño de la imagen), agregarle encima de la fotografía cualquier figura que
hemos visto anteriormente.
Para ello necesitamos hacer tres pasos:
• Al no poder agregar la imagen como tal directamente en el canvas <img src=…, a lo mejor
en versiones futuras de HTML5, debemos pasar la imagen a un objeto JavaScript. Para ello
primero debemos agregar la imagen a nuestro archivo html con <img src…, ocultarla para
que no se vea inicialmente y cargarla como objeto JavaScript, para ello debemos usar las
siguientes funciones:
//1º debemos agregar dentro del body el <canvas …> y la imagen oculta <img.. 167
//2º Posteriormente en el head dentro del script <script… nos declaramos
//una función que será la que cargue la imagen a nuestro canvas mediante JavaScript
//Nos declaramos una variable que contendrá la imagen para poder procesarla
var img = new Image();
//Enlazamos nuestra variable con la ruta donde está la imagen
Img.src = ‘ruta_imagen.extension_imagen.png’
//3º Agregamos en el inicio del body la función
• Usamos la función drawImage(imagen, x, y) para agregar la imagen a nuestra área de

dibujo. Esta función tiene como primer parámetro la imagen, siendo esta la variable que
hemos declarado anteriormente, y los siguientes parámetros son las coordenadas a partir de
donde se situará la imagen, partiendo desde el extremo superior izquierdo.
Veamos un ejemplo, teniendo un canvas (área de dibujo) de 400 x 400 px y una imagen
de 67 x 85 px, queremos insertarla a 50px de la parte superior y otros 50px de la parte izquierda,
debemos escribir el siguiente código:
Aula Mentor
<!DOCTYPE HTML>
<head>
<title>Canvas en HTML5</title>
function midiseño(){
// Asociamos el lienzo a la variable canvas
168 var img = new Image();
img.src = ‘images/logo_html5.png’
//Agregamos la imagen a nuestro contexto
contexto.drawImage(img,50,50);
} //fin de la función midiseño
</script>
M1. HTML5
</head>

<body onload=”midiseño()”>
</canvas>
<img src=”images/logo_html5.png” style=”visibility: hidden;”>
</body>
</html>
169
Cuando veamos jQuery estaremos más acostumbrado a las funciones JavaScript y a cómo
se desenvuelve sobre los elementos de la página o DOM. De todas formas, llegado a este punto
creo que es importante usar una herramienta que disponemos en Google Chrome para detectar
errores en nuestro código, por ejemplo modifica la línea correspondiente a la ruta de la imagen
por esta:
img.src = ‘RUTAERRONEA/logo_html5.png’
Si vuelves a ejecutar el archivo (guardar el archivo en Sublime Text 2 y pulsas F5: actua-
lizar) verás que no te sale ninguna imagen, pero no sabes qué ha pasado, dónde está el error o
si es problema del navegador o de tu código. Para ello, podemos depurar el programa usando la
consola de depuración de Google Chrome, concretamente pulsando la tecla F12. Nos aparecerá
una ventana en la parte inferior con varias opciones, realmente nos está mostrando el navegador
cómo está entendiendo el código, lo que nos da mucha información. Por ahora, nos vamos a la
opción Console y veremos que sale algo parecido a ésto:
Aula Mentor
Si nos fijamos, nos está dando información muy concreta, Fail to load resource (fallo
cargando el recurso) y donde ha fallado concretamente a la derecha nos aparece la ruta:
http://localhost/MOD1.HTML5/U3/RUTAERRONEA/logo_html5.png
Que significa que ha ido a buscar el recurso logo_html5.png y no lo ha encontrado,

cosa que sabíamos previamente, pero cuando tengas muchos archivos te será de gran ayuda que
te indique dónde está el error. Vuelve a poner la línea correcta, y ahora vamos a simular que nos
equivocamos en la ruta del archivo al agregarla a la etiqueta
<img src=”RUTAERRONEA/logo_html5.png” style=”visibility: hidden;”>
Si repetimos el paso anterior, teniendo activa la consola de depuración pulsando F12

veremos que esta vez nos vuelve a decir dónde falla,
170
Que nos vuelve a decir lo mismo, pero al ser una etiqueta propia del código HTML5,
nos dice incluso la línea, la 37 (en mi caso): Ejemplo20-canvas-imagen.html:37 y nos dice que
ha sido un error usando el GET del recurso, ya que la información normalmente se usa GET o
POST, y nos comenta la ruta también que ha fallado. Pero nos da aún más datos, si pulsamos en
la pestaña Network nos da una información muy completa de los recursos:
Lo primero donde debemos fijarnos es en la zona que está en rojo, vemos que nos vuel-
ve a dar la información que antes sabíamos, pero además nos dice que por ejemplo el recurso
logo_html5.png sí está correctamente en el script, pero en la línea 37, 404 not found, que es
un mensaje típico de internet para indicar el servidor que no ha encontrado el recurso. Además,
nos da información del tiempo que ha tardado, el estado, etc. Por ahora debemos usarlo para
detectar errores cuando nuestro código nos dé problemas, la mayoría de las veces suelen ser
errores sintácticos. Hay que decir de paso, que este método no es infalible, pero nos va a servir
de gran ayuda cuando estemos desarrollando nuestras web.
Ahora vamos a agregar a modo de prueba una imagen y posteriormente unas líneas en-
cima de él, por ejemplo usemos una imagen de René Magritte, en su obra el hijo del hombre,
donde se ve un hombre con una manzana en la cara. Vamos a agregarle, con el respeto al autor
y para afianzar el conocimiento de la materia de esta unidad, dos ojos, nariz y una sonrisa a la
M1. HTML5
manzana:
Original sin agregar nada Agregando trazos y figuras encima
Para ello hemos utilizado el siguiente código:
……..
function midiseño(){
// Asociamos el lienzo a la variable canvas

171
var img = new Image();
img.src = ‘images/TheSonOfMan.jpg’;
//Centramos la imagen
var centroX = (canvas.width - img.width)/2;
var centroY = (canvas.height - img.height)/2;
//Agregamos la imagen a nuestro contexto

Aula Mentor
contexto.drawImage(img,centroX,centroY);
//Ahora vamos a agregar dos círculos para simular dos ojos
contexto.strokeStyle = “white”;
contexto.fillStyle = “white”
contexto.fill();
172 //dibujamos la nariz
contexto.strokeStyle = “white”;
contexto.stroke();
//dibujamos la sonrisa
M1. HTML5
contexto.fillStyle = “white”
contexto.arc(207,170,12,0,Math.PI, false);
contexto.fill();
} //fin de la función
</script>
</head>

<body onload=”midiseño()”>
Hemos detectado que tu navegador no soporta la etiqueta canvas, le recomendamos que actualice la versión 173
</canvas>
<img src=”images/TheSonOfMan.jpg” style=”visibility: hidden;”>
……….
Si nos fijamos en el código hay una parte que usamos para centrar la imagen, esto nos es
muy útil porque así podemos centrar nuestras imágenes en el lienzo, justo en el centro, indepen-
dientemente del tamaño del lienzo y de la imagen, para ello, usamos las propiedades .width y
.height obteniendo los valores dados de los elementos y ya calculando lo que nosotros desee-
mos, en este caso, el centro:
//Centramos la imagen
var centroX = (canvas.width - img.width)/2;
var centroY = (canvas.height - img.height)/2;
1.3.7. Transformaciones.
Hasta ahora cuando hemos hablado de canvas, estamos pensando en un zona estática,
donde podemos agregar elementos (líneas, rectángulos, imágenes, etc) pero además, nos ofre-
cen funciones de gran potencia para trabajar sobre los propios elementos, haciendo dinámico
Aula Mentor
nuestro canvas, pudiendo aplicar transformaciones, creando zonas animadas y creando efectos
impactantes con poco código.
Las transformaciones que nos permite aplicar sobre los elementos son:
Translación: Desplazar elementos dentro del área de dibujo, desde el origen hasta un nuevo
punto indicado en coordenadas x e y. Para ello usamos la función:
translate(x, y)
Rotación: Pudiendo hacer giros sobre un elemento sobre su origen, expresando en radianes el
ángulo que va a girar y siempre en el sentido de las agujas del reloj:
rotate(ángulo)
Escala: Podemos aumentar o disminuir el tamaño de los elementos del área de dibujo. Para ello
debemos pasar dos parámetros: “x”, que sería el factor de escala en la dirección horizontal, e “y”
el de la dirección vertical. Estos valores siempre han de ser positivos. Los valores posibles son:
Valor < 1.0 - Reducen el tamaño del elemento.
Valor > 1.0 - Aumentan el tamaño del elemento.
Valor = 1.0 - Deja al elemento con tamaño igual al original.

174
Para escalar nuestros elementos usamos en este caso la función:
scale(x, y)
Veamos todos estos ejemplos aplicados a una imagen dada. Para translaciones:
Translate
contexto.drawImage(img, 50,50); contexto.drawImage(img,50,50);
contexto.translate(150,150);
M1. HTML5
Para rotaciones:
Rotate
contexto.rotate(15*Math.PI/180);
Como podemos apreciar, lo que ha pasado es que ha girado todo el canvas 15º. No solo
ha girado la imagen, sino también otro punto que hemos puesto de testigo, realmente es como
si giráramos el papel sobre el que hemos dibujado. Para poder corregir ésto, es necesario hacer
modificaciones con translaciones para compensar el giro. Pero cuando hemos realizado varias
transformaciones sobre el mismo lienzo y queremos que no intercedan uno y el otro, que sean
independientes, debemos usar las funciones: 175
.save() y .restore().
Puedes consultar el ejemplo24-canvas-rotate2.html
Recuerda que se podrían compensar con translaciones cada rotación, compensando así
el giro de cada imagen.
Aula Mentor
Recuerda que para pasar de grados a radianes debes usar la siguiente fórmula:
Valor en grados * (π /180°)
De paso recordamos la fracción de vuelta de un círculo:
0 1/12 1/8 1/6 ¼ ½ ¾ 1
Grados 0° 30° 45° 60° 90° 180° 270° 360°
Radianes 0 π6 π4 π3 π2 π 3π2 2π
Para escalados:
TRANSLATE
SCALE
176
Como hemos visto anteriormente cuando se realiza escalados también es necesario com-
pensar con translaciones, ya que realmente lo que hace es expandir el área de dibujo desde la
parte superior izquierda, hacia la parte inferior derecha. Por eso hemos tenido que compensar
con una translación del área de dibujo hacia la parte superior izquierda.
1.4. Geo-localización.
1.4.1. Introducción.
La geo-localización es el procedimiento que nos permite localizar un objeto o persona

sobre un mapa. Con HTML5 se incluye de forma nativa esta funcionalidad, no teniendo que usar
bibliotecas o API externas.
Además de la creación de una web para mostrar productos de una empresa o cualquier
otro uso, debemos ver la web como un gran potencial estadístico y promocional, con la geo-
localización podemos por ejemplo:
- Coger las coordenadas del Smartphone, Tablet o ubicación del PC.
- Sacar estadísticas de ver qué usuarios o zonas suelen visitar más en nuestra web, para ver
el impacto que la imagen de la empresa tiene en la vida real. Si por ejemplo sacamos una
promoción sobre una temática concreta, podemos ver qué zonas son las que más impacto ha
tenido, para hacer más hincapié o reforzar aquellas que no han tenido una buena acogida.
M1. HTML5
- Promocionar las tiendas o comercios, más próximos a mi ubicación, por ejemplo si mi web
se refiere al control de gasolineras y el usuario me está pidiendo una gasolinera, automáti-
camente le mostraré aquella que esté más cerca al usuario.
- Las redes sociales también buscan y usan la ubicación para buscar personas o perfiles afines
cercanos, para esto también necesitamos saber la ubicación actual.
- Detectando automáticamente la ubicación, podemos mostrar el lenguaje que corresponda al

país, al igual que la moneda en curso (euros, libras, dólares, etc).
Y muchas cosas más que se pueden hacer.
Para conocer la ubicación del usuario necesitamos tener un indicador que nos muestre a
través de su conexión el navegador web, ya que está con nuestra página web abierta, para coger
los datos. Esta información viene dada de la siguiente forma:
Smartphone
Los Smartphone y algunas Tablet tienen conexión de datos de una o varias compañías
para poder usar voz y datos. Estos dispositivos se conectan a través de las antenas de la com-
pañía (torres, centrales o edificios) y están constantemente recibiendo datos de las antenas, para
saber cuál está más cerca, cuál tiene más potencia, y si estoy en movimiento, a qué antena me
debo conectar en el siguiente paso, etc. Esta acción se llama hand-over y es el paso que hace
una antena de comunicaciones a otra, y cuando nos quedamos sin cobertura es porque o no
hay antena para dar el salto siguiente, o está mal calculado y tienen una avería la compañía en
ese momento. 177
Con todos estos datos y al ser la posición de las torres de telefonía estática, se puede
triangular la posición aproximada de la ubicación del dispositivo. Han existido muchos casos de
pérdida de personas o vehículos y gracias a esta información han podido acercarse a la última
ubicación leída por el teléfono.
Aula Mentor
Además de la triangulación de las antenas emisoras de las compañías de telefonía, el

dispositivo nos puede dar esta información a través de GPS si lo tiene incorporado, siendo de
una precisión más aproximada a la anterior si se le da el tiempo necesario, pero por el consumo
de batería no suelen tenerlo activado por defecto.
Ordenadores personales
Al igual que los equipos móviles, podemos obtener la información de la ubicación del
usuario a través de la IP del ordenador, ya que como vimos en las primeras unidades es el
“DNI” de nuestra conexión, y éste nos la da nuestro ISP (Proveedor de Servicios de Internet) más
cercano. Eso sí, no es tan fiable como las de los Smartphone ya que cada ISP tiene su propia
red y estructura interna, y puede darnos un valor muy erróneo y muy lejos de la realidad. Pero
la mayoría de las veces nos puede ser útil para utilizar al menos el idioma o hacernos una idea
aproximada de la ubicación del usuario.
También se puede sacar a través de la Wi-fi del usuario (dirección MAC), existen base
de datos que dan información de las redes Wi-fi y su localización; Google Street View aprove-
chó y fue cogiendo las MAC de las Wi-fi y las fue ubicando. Así, si te vas a una plaza, parque
con Wi-fi, o a una red Wi-fi de una universidad, ayuntamiento o la del vecino si coincide, y
Google añade esa MAC a su base de datos, te puede dar un posicionamiento muy cercano de la
ubicación de tu ubicación, pudiendo a partir de ahí usar esa información de tantas formas
como hemos comentado anteriormente.
1.4.2. Protección de la privacidad.

178 Después de todo lo comentado anteriormente seguro que ha despertado en ti una sensa-
ción de inseguridad, aunque toda esa información tiene un protocolo manejado por las empre-
sas, en este caso tú también serías un elemento intermediario si eres el que creas la web, para no
almacenar y relacionar datos de ubicación con datos personales y cumplir el protocolo respecto
a la geo-localización del usuario.
Puedes ver más información sobre la especificación sobre la geo-localización en:
http://www.w3.org/TR/2010/CR-geolocation-API-20100907/
La información que se trasmite siempre es cifrada para intentar evitar que terceros re-
ciban esa información. De todas formas, siempre nos debe preguntar el navegador si damos el
consentimiento para compartir nuestra localización:
Y google también nos da soporte de cómo activar/desactivar esta función en los diferen-
tes navegadores:
https://support.google.com/plus/answer/2998354?hl=es
M1. HTML5
1.4.3. Coordenadas.
Las coordenadas sería la representación numérica de la ubicación de un usuario, y para

el caso de nuestras aplicaciones siempre serán Longitud y Latitud que se expresan en coorde-
nadas decimales. A lo mejor estás acostumbrado a los grados, minutos y segundos, pero existen
algoritmos de conversión para transformar de una representación a otra. Tendríamos por tanto
los siguientes parámetros:
Longitud: La longitud es la distancia que existe entre un punto cualquiera y el Meridia-

no de Greenwich, medida sobre el paralelo que pasa por dicho punto.
Latitud: La latitud es la distancia que existe entre un punto cualquiera y el Ecuador,

medida sobre el meridiano que pasa por dicho punto.
179
En nuestras aplicaciones tenemos una función que nos da la información del dispositivo:
getCurrentPosition(función en caso de éxito, función en caso fallido, otras opciones);
Función en caso de éxito: será aquella que llamemos cuando va todo bien. Esta fun-
ción la podemos crear fuera como una función más o agregarla directamente en el propio códi-
go, ya que en JavaScript se pueden crear funciones en línea.
Función en caso fallido (opcional): función que se usará en caso que el método
haya encontrado algún error y no se haya podido ejecutar.
Otras opciones (opcional): además de las llamadas funciones en caso de éxito y en

caso de error, se le pueden pasar otros parámetros. A través del objeto PositionOptions, pode-
mos pasarle tiempo máximo de ejecución, tiempo de expiración y precisión de la búsque-
da. Un ejemplo podría ser:
Aula Mentor
navigator.geolocation.getCurrentPosition(verDatos, errorDatos, varOpcionales);
Y debemos crearnos nuestras funciones aparte, una para verDatos, otra para errorDa-
tos, y pasarle un array con los parámetros opciones que le vayamos a pasar. Un ejemplo igual-
mente válido sería el siguiente:
navigator.geolocation.getCurrentPosition(
function(position) {console.log(position.coords);},
function(error) {console.log(error.message, error.code);},
{enableHighAccuracy: true, timeout: 2500, maximumAge: 0}
);
Si nunca has visto JavaScript, verás que a la función .getCurrentPosition le hemos pa-
sado como parámetro otra función. Esto es porque se le pueden pasar directamente; podríamos
tener function suma(a=4 , b=7) que nos sumaría a y b; pero también función suma(function
dameA(){ return 4;}, function dameB(){ return 7;}), etc. poco a poco nos iremos introduciendo
en este tipo de programación. Veamos un ejemplo concreto en el cual al pulsar sobre un botón,
nos da las coordenadas actuales:
180
Puedes consultar el ejemplo26-ubicacion.html
Al pulsar sobre el botón, llamo a la función getCurrentPosition y muestro el valor de

las coordenadas, en este caso he cogido las coordenadas de la Alhambra de Granada para poner
unas coordenadas de ejemplo. Podemos pensar lo siguiente, ¿y si el navegador no soporta estos
métodos de geo-localización? Al igual que nos pasaba antes, podemos comprobar si nuestro
navegador es compatible e informar al usuario. Para ello, usamos el método:
navigator.geolocation
El cual nos dará un valor verdadero si el navegador soporta la geo-localización, y false

en caso contrario, en el que deberemos informar al usuario.
//Comprobamos si el navegador soporta la geo-localización
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(verCoordenadas, mostrarError);
M1. HTML5
} else {
//añadimos texto a nuestra web
x.innerHTML = “Lo sentimos pero tu navegador no soporta la geo-localización.”;
Hemos usado para mostrar los mensajes el método innerHTML, más adelante lo ve-
remos más detenidamente, pero a modo de introducción, podemos añadir texto HTML direc-
tamente desde el código JavaScript. Para este caso también se podía haber usado una etiqueta
<p> asociarla con un id, buscar el elemento por id y añadir el texto que necesitemos en cada
momento.
Para mostrar los datos, nos hemos creado una función donde nos cargarán los datos de
las coordenadas, pero ¿cómo se rescatan y qué opciones hay? Para rescatar los parámetros nos
crea un objeto position donde almacena las coordenadas coords. Estos parámetros son de sólo
lectura, por lo que sólo podremos leer los datos, pero no modificarlos.
Parámetro Descripción
position.coords.longitude Valor devuelto del valor de la longitud leída.
position.coords.latitude Valor devuelto del valor de la latitud leída.
position.coords.altitude Valor devuelto del valor de la altitud leída.
position.coords.accuracy Indica la precisión de las coordenadas. 181
position.coords.altitudeAccuracy Indica la precisión de la altitud.
position.coords.heading Indica la posición en grados respecto del nor-
te.
position.coords.speed La velocidad del usuario tomando como valor
la última posición tomada.
No todos los navegadores dan la información de todos los parámetros, pero la tendencia
es ir dotando cada vez más al navegador la interacción con el posicionamiento del usuario. Un
ejemplo completo podría ser el siguiente (dentro del body):
<p id=”getLocation”>Calcular coordenadas</p>
<button onclick=”getLocation()”>Dame mis coordenadas</button>
<script>
var x = document.getElementById(“getLocation”);
function getLocation() {
//Comprobamos si el navegador soporta la geolocalización
navigator.geolocation.getCurrentPosition(verCoordenadas, datosErroneos);
Aula Mentor
} else {
//añadimos texto a nuestra web
x.innerHTML = “Lo sentimos pero tu navegador no soporta la geo-localización.”;
function verCoordenadas(position) {
x.innerHTML = “<br>Logintud: “ + position.coords.longitude +
“<br>Latitud: “ + position.coords.latitude +
“<br>Altidud: “ + position.coords.altitude +
“<br>Precisión coordenadas: “ + position.coords.accuracy +
“<br>Precisión altitud: “ + position.coords.altitudeAccuracy +
182 “<br>Posición en grados (N): “ + position.coords.heading +
“<br>Velocidad: “ + position.coords.speed;
</script>
Y el resultado que obtendríamos en mi ordenador personal sería:
Si nos fijamos, no nos ha dado todos los datos, pero dependiendo del navegador, el dis-
positivo y la ubicación, los valores que nos devuelva serán otros. Otro detalle a tener en cuenta
sería controlar los valores devueltos de la función positionError, cuando da error la función. En
este caso tendríamos otros parámetros:
M1. HTML5
Parámetro Descripción
PERMISSION_DENIED Nos indica que nuestro documento no ha te-
nido acceso a la API de geo localización. Nor-
malmente es por permisos, cuando nos pre-
gunta el navegador y el usuario ha contestado
que no da permiso a nuestra aplicación. Valor
devuelto = 1.
POSITION_UNAVAILABLE Valor devuelto cuando no ha sido posible ob-
tener ningún valor, por ejemplo si no tiene
GPS o acceso a las redes en ese momento.
Valor devuelto = 2.
TIMEOUT Valor devuelto cuando se ha excedido el tiem-
po de ejecución de adquisición de datos. Valor
devuelto = 3.
1.4.4. Localización en un mapa.
En el apartado anterior hemos hablado de coordenadas y cómo obtenerlas para po-

der tratarlas en infinidad de usos, pero el uso más usual que vamos a tener para usar nuestras
coordenadas es insertar esas coordenadas en un mapa. Para ello Google nos ofrece una API de
JavaScript, que estaría integrada o mejor dicho, es compatible con HTML5. Para ello vamos a
usar un ejemplo sencillo mostrando un mapa y posteriormente realizaremos uno un poco más
complejo.
Insertando un mapa con Static Maps API. 183
var mapurl=’http://maps.google.com/maps/api/staticmap?center=’+posicion.coords.latitude+’,’+
posicion.coords.longitude+’&zoom=16&size=400x400&sensor=false&markers=’+posicion.coords.latitude+
‘,’+posicion.coords.longitude;
He omitido la parte de obtener las coordenadas y dotar de un botón para llamar a la

función correspondiente. Si nos fijamos en la llamada de este método tenemos varios parámetros
que podemos modificar:
Parámetros de ubicación
center (obligatorio si no hay marcadores presentes): define el centro del mapa, equidis-
tante de todos los bordes de éste. Este parámetro toma una ubicación como un par separado por
comas {latitud, longitud}, por ejemplo “40.714728, -73.998672”, o como una dirección de cadena,
por ejemplo “ayuntamiento, nueva york, ny”, identificando una ubicación única en la superficie
de la Tierra.
zoom (obligatorio si no hay marcadores presentes): define el nivel de zoom del mapa,
que determina su nivel de ampliación. Este parámetro toma un valor numérico correspondiente
al nivel de zoom de la región deseada. Para obtener más información, consulta la sección sobre
niveles de zoom más adelante.
Aula Mentor
Parámetros de mapa
size (obligatorio): define las dimensiones rectangulares de la imagen del mapa. Este pa-
rámetro adopta la forma de una cadena {horizontal_value}x{vertical_value}. Por ejemplo, 500x400
define un mapa de 500 píxeles de ancho por 400 de alto. En los mapas cuyo ancho sea inferior
a 180 píxeles se mostrará un logotipo reducido de Google. Este parámetro se ve afectado por el
parámetro scale, que se describe a continuación. El tamaño final de salida será el producto de
los valores de escala y tamaño.
scale (opcional): afecta al número de píxeles que se muestran. scale=2: muestra el doble
de píxeles que scale=1, pero mantiene la misma área de cobertura y el mismo grado de detalle,
es decir, el contenido del mapa no cambia. Es de utilidad al desarrollar un mapa que se vaya a
ver con una alta resolución o al crear mapas que se vayan a imprimir. El valor predeterminado es
1. Los valores aceptados son 2 y 4 (4 solo está disponible para clientes del API de Google Maps
for Business). Para obtener más información, consulta los valores de escala.
format (opcional): define el formato de la imagen resultante. De forma predeterminada,

el API de Google Static Maps crea imágenes PNG. Hay varios formatos posibles disponibles,
incluidos los tipos GIF, JPEG y PNG. El formato que debes utilizar dependerá de cómo desees
presentar la imagen. JPEG suele proporcionar un mayor grado de compresión, mientras que GIF
y PNG proporcionan mayor nivel de detalle. Para obtener más información, consulta la sección
sobre formatos de imagen.
maptype (opcional): define el tipo de mapa que se va a generar. Hay varios valores de
tipo de mapa posibles, incluidos roadmap, satellite, hybrid y terrain. Para obtener más informa-
184 ción, consulta la sección sobre tipos de mapas del API de Google Static Maps que aparece más
adelante.
language (opcional): define el idioma que se debe utilizar para mostrar las etiquetas de
los mosaicos de mapas. Ten en cuenta que este parámetro sólo es compatible con algunos mo-
saicos de países, por lo que si el idioma específico solicitado no es compatible con el conjunto
de mosaicos, se utilizará el idioma predeterminado de ese conjunto.
region (opcional): define los límites apropiados que se deben mostrar en función de
determinados factores geográficos y políticos. Acepta un código de región especificado como un
valor ccTLD de dos caracteres (“dominio de nivel superior”).
Parámetros de recurso
markers (opcional): define uno o varios marcadores para adjuntarlos a la imagen en

ubicaciones especificadas. Este parámetro adopta una definición de marcador único con pará-
metros separados por plecas (|). Se pueden colocar varios marcadores en el mismo parámetro
markers cuando tienen el mismo estilo; puedes añadir marcadores adicionales de diferentes
estilos mediante la adición de parámetros markers complementarios. Ten en cuenta que si su-
ministras marcadores para un mapa, no tendrás que especificar los parámetros center ni zoom,
que normalmente son obligatorios. Para obtener más información, consulta la sección sobre
marcadores de mapas estáticos que aparece más adelante.
path (opcional): define una única ruta de dos o más puntos conectados para superpo-
nerla en la imagen en ubicaciones especificadas. Este parámetro toma una cadena de defini-
ciones de puntos separadas por plecas ( | ). Puedes proporcionar rutas adicionales si añades
parámetros path complementarios. Ten en cuenta que si suministras una ruta para un mapa, no
M1. HTML5
tendrás que especificar los parámetros center ni zoom, que normalmente son necesarios. Para
obtener más información, consulta la sección sobre rutas de mapas estáticos que aparece más
adelante.
visible (opcional): especifica una o varias ubicaciones que deben estar visibles en el
mapa, aunque no se muestre ningún marcador o ningún indicador. Utiliza este parámetro para
asegurarte de que se muestren determinados recursos o ubicaciones de mapas en el mapa está-
tico.
style (opcional): define un estilo personalizado para alterar la presentación de un recur-

so concreto (carretera, parque, etc.) del mapa. Este parámetro utiliza los argumentos feature y
element que identifican los recursos que se pueden seleccionar y un conjunto de operaciones
de estilo que se debe aplicar a esa selección. Puedes proporcionar diferentes estilos si añades
parámetros style complementarios. Para obtener más información, consulta la sección Mapas
con estilos que se incluye más adelante.
Parámetros de notificación
sensor (obligatorio): especifica si la aplicación que solicita el mapa estático va a utilizar

un sensor para determinar la ubicación del usuario. Este parámetro es obligatorio para todas las
solicitudes de mapas estáticos. Para obtener más información, consulta la sección “Cómo indicar
el uso de un sensor” que aparece más adelante.
Comentar que Google ha limitado el uso de esta herramienta a 25.000 solicitudes gratui-
tas diarias de mapas estáticos por aplicación. Cuando se llegue a ese valor, nuestra aplicación
fallaría y tendríamos que pasar a la opción de pago. 185
Puedes ver el código resuelto en los recursos del curso, y el resultado debe ser algo si-
milar a éste, claro está, mostrando tu ubicación:
Puedes consultar el ejemplo27-mapas.html
Insertando un mapa con Google Maps API JavaScript v3
Otra forma es usar el servicio web de Google, para ello podríamos tener el siguiente
ejemplo completo, los puntos importantes son casi idénticos sólo varía la forma de llamar al
mapa:
Aula Mentor
<! DOCTYPE html>
<Html>
<Head>
<title>Mapas en HTML5. API v3</title>
<meta name=”viewport” content=”initial-scale=1.0, user-scalable=no”>
<meta charset=”utf-8”>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
186 </style>
<script src=”https://maps.googleapis.com/maps/api/js?v=3.exp”></script>
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 16
};
map = new google.maps.Map(document.getElementById(‘map-canvas’),
mapOptions);
M1. HTML5
/ Try HTML5 geolocation
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
var infowindow = new google.maps.InfoWindow({
map: map,
position: pos,
content: ‘Localización usando HTML5.’
});
map.setCenter(pos);
}, function() { 187
handleNoGeolocation(true);
});
} else {
// Browser doesn’t support Geolocation
handleNoGeolocation(false);
function handleNoGeolocation(errorFlag) {
if (errorFlag) {
Aula Mentor
var content = ‘Error: El servicio de Geolocalización ha fallado.’;
} else {
var content = ‘Error: Tu navegador no soporta la Geolocalización.’;
var options = {
map: map,
position: new google.maps.LatLng(60, 105),
content: content
};
var infowindow = new google.maps.InfoWindow(options);
188 map.setCenter(options.position);
google.maps.event.addDomListener(window, ‘load’, initialize);
</script>
</head>
<body>
<div id=”map-canvas”></div>
</body>
</html>
El resultado sería que nos abre directamente en nuestra página web el Google Map con
la ubicación que ha calculado, y además nos proporciona la opción de usar Street View. Al igual
que en el otro método podemos agregarle varios parámetros.
Existen varias formas de integrar mapas en nuestra web, y google nos proporciona mu-
chas formas y métodos. Dependiendo de la forma que uses tendrás que generar una KEY en
M1. HTML5
google y darte de alta en el servicio. Si estás interesado en aprender más, te aconsejo que leas
los siguientes artículos que nos proporciona google:
Manual:
https://developers.google.com/maps/documentation/javascript/tutorial
https://developers.google.com/maps/documentation/javascript
Más Ejemplos:
https://developers.google.com/maps/documentation/javascript/examples/
Limitaciones y licencias:
https://developers.google.com/maps/licensing
189
Puedes consultar el ejemplo28-mapas2.html
1.4.5. Seguimiento de los desplazamientos.
Si el usuario va desplazándose con su dispositivo móvil se puede ir haciendo un segui-

miento de los puntos que va pasando, por ahora sólo con los Smartphone, Tablet con 3G y no
con los ordenadores personales.
Para ello se utiliza la función watchPosition, que devuelve el valor del usuario en inter-
valos regulares, ésta al ejecutarse en segundo plano en el dispositivo para eliminarla necesitare-
mos usar la función clearWatch. La función nos devuelve un whatch ID con los intervalos mar-
cados, y éste será el valor que tenemos que usar para eliminar mediante la función clearWatch.
Ponemos la variable enableHighAccuracy para obtener una mayor precisión.
Aula Mentor
function startWatch(){
var optn = {
enableHighAccuracy : true,
timeout : Infinity,
maximumAge : 0
};
watchId = navigator.geolocation.watchPosition(showPosition, showError, optn);
} else {
alert(‘Geolocation is not supported in your browser’);
190 }
function stopWatch() {
if (watchId) {
navigator.geolocation.clearWatch(watchId);
watchId = null;
1.5. Almacenamiento de datos.

Con HTML5 podemos almacenar datos en el navegador del cliente, pudiendo así trabajar
con datos offline y liberar las transmisiones con el servidor. Normalmente para almacenar los
datos de una web, siempre se ha necesitado otro medio mediante cookies, o mediante almace-
namiento externo, es decir, los datos del cliente van y vienen por la red pero se almacenan en
el servidor, no en el navegador del cliente. Si quieres leer más información sobre las cookies
puedes ver el documento “Guía de cookies.pdf” dentro de los recursos, o en la página web de
la Agencia Española de Protección de Datos http://www.agpd.es/.
Esta forma nueva de actuar nos abre una nueva forma de trabajar para datos no superio-
res a 5MB, que en formato texto se considera una gran cantidad de información, no se descarta
M1. HTML5
que conforme se vaya necesitando más capacidad ésta se vaya ampliando, ya que el tamaño del
almacén depende del propio navegador pues hay algunos que soportan 10MB y lo normal es
que vaya en aumento.
Uno de los puntos más importantes de poder almacenar los datos offline en el navega-
dor, es para los dispositivos móviles, los cuales almacenarán también los datos dentro del nave-
gador, y bajarán considerablemente la tasa de transmisión de datos, punto a controlar cuando
desarrollamos aplicaciones web para móviles.
Existen dos formas de almacenar datos en el navegador:
Datos temporales (sesión): Se denominan sessionStorage. Son datos que se man-

tienen mientras esté activa la sesión del navegador, por supuesto si se cierra el navegador o la
ventana que los creó se pierde la sesión y los correspondientes datos que hayamos almacenado.
Datos persistentes: Se denominan localStorage. Trabaja de forma similar a un sistema

de almacenamiento para aplicaciones de escritorio. Estos datos son grabados de forma perma-
nente y se encuentran siempre disponibles para la aplicación que los creó. Aunque se cierre el
navegador, incluso se apague el ordenador, esos datos los podría usar de nuevo la aplicación
web.
1.5.1. Temporal o de sesión.
Este tipo de almacenamiento es similar al de las Cookies de sesión. Se mantendrán los

datos disponibles durante un tiempo específico y se usa una ventana o pestaña dependiendo
del navegador para mostrar los datos. Con las Cookies los datos estarán disponibles mientras el 191
navegador continúe abierto, mientras que con sessionStorage estarán solo disponibles mientras
la ventana que los creó no es cerrada.
Los datos se van a guardar en parejas Clave - Valor Clave, por ejemplo podríamos crear
los siguientes valores de prueba:
Clave (key) Valor (Value)

Nombre José
Apellidos Martínez
Tlf 123456789
Como vimos en la parte de los formularios, podemos crearnos un formulario que se lla-
mara a sí mismo, e ir introduciendo los datos que quisiéramos:
Aula Mentor
Un ejemplo puede ser el siguiente:
<!DOCTYPE html>
<head>
<title>Almacenamiento temporal en HTML5</title>
</head>
<body>
<section id=”cajaformulario”>
<form name=”formulario”>
<p>Clave:<br><input type=”text” name=”clave” id=”clave”></p>
<p>Valor:<br><textarea name=”text” id=”valorClave”></textarea></p>
192 <p><input type=”button” name=”insertarDatos” id=”insertarDatos” value=”Insertar Datos”></p>
</form>
</section>
<section id=”datosGuardados”>
</section>
</body>
</html>
Cuando le demos al botón Insertar Datos, debemos agregar a nuestro navegador, en la

parte de sessionStorage los datos que hemos insertado en las cajas de texto. Para ver que todo
esto se hace correctamente necesitamos una forma de verlo, para ello vamos a ingresar en el
navegador nuevamente en modo Depurador/desarrollador pulsando la tecla F12.
Ahora nos debemos fijar que en la parte inferior, si seleccionamos la pestaña Resources
nos aparecen mucha información importante, ahora nos vamos a fijar donde nos indica ses-
sionStorage y vamos abrir nuestra hoja, en este caso para localhost.
M1. HTML5
Debemos fijarnos que tenemos una tabla, por ahora vacía, donde las cabeceras son
key y Value, como habíamos comentado anteriormente, y podremos ir insertando ítem según
necesitemos. Ahora nos debemos concentrar en la parte de interactuar con los datos, para ello
tendremos los siguientes métodos:
Método Acción
sessionStorage.setItem(clave,valor) Inserta un ítem del tipo valor - clave en nues-
tro.
sessionStorage.getItem(clave) Recupera el valor de la clave guardada pre-
viamente.
sessionStorage.removeItem(clave) Elimina el ítem que corresponde a la clave
dada.
sessionStorage.clear() Elimina todos los ítems insertados anterior-
mente.
sessionStorage.legth Nos devuelve el número de registros que te-
nemos almacenados. 193
sessionStorage.key(índice) Nos devuelve el orden de inserción que ocupa
en el registro el índice dado. Empieza en 0 el
primer valor hasta n registros por lo que es
sólo numérico.
Si nos creamos varios botones <input type=”button”…> y le asociamos unas acciones

o mejor dicho llamamos a unas funciones en JavaScript, que cojan los valores pasados y ejecuten
nuestros métodos, podríamos insertar y borrar datos.
<input type=”button” name=”insertarDatos” id=”insertarDatos” value=”Insertar Datos”>
function nuevoitem(){
//buscamos los valores de los campos por id
var clave=document.getElementById(‘clave’).value;
var valor=document.getElementById(‘valorClave’).value;
//Agregamos el ítem a nuestro sessionStorage
sessionStorage.setItem(clave,valor);
}
Aula Mentor
<input type=”button” name=”borrarDato” id=”borrarDato” value=”Borrar ítem”>
function borraitem(){
var clave=document.getElementById(‘borraItem’).value;
//Borramos el item que nos pasa el usuario
sessionStorage.removeItem(clave);
<input type=”button” name=”borrarTodo” id=”borrarTodo” value=”Borrar todos ítem”>
function borratodo(){
194
//Eliminados todos los datos de nuestro sessionStorage
var valor=sessionStorage.clear();
}
Podíamos pensar que deberíamos de agregar un método más que fuera MODIFICAR,
pero en principio a efectos prácticos no es necesario porque para modificar un dato, sólo debe-
mos insertarlo de nuevo con la misma clave. Este punto lo tenemos que tener muy en cuenta,
porque si no nos damos cuenta e insertamos en diferentes sitios del código la variable con el
mismo key y un valor distinto, estaríamos modificando este valor y podríamos tener resultados
no esperados.
También la API, nos facilita la opción de usar sessionStorage.miclave = valor. Inicial-

mente queríamos insertar unos datos concretos: nombre, apellidos y tlf. Si lo hacemos usando
los métodos que hemos visto, se almacenarán en el navegador y podremos verlos almacenados
si accedemos en modo depurador (F12) de la siguiente forma en nuestra sessionStorage.
M1. HTML5
Puedes consultar el ejemplo29-sessionStorage.html 195
Tienes el código fuente en los recursos del curso, pruébalo e intenta reproducirlo nue-
vamente por tu cuenta. Existen partes que a lo mejor no comprendes porque son un poco avan-
zadas, te las explico a continuación:
1º Le decimos a nuestro navegador, en concreto a nuestra ventana windows, que

cuando se cargue “load”, inicie una función, en este caso, le he llamado iniciar:
window.addEventListener(‘load’, iniciar, false);
2º En iniciar, lo único que hago es proporcionarle un “escuchador” a cada botón, es otra

forma de interactuar con ellos, así le digo: búscame el botón que tenga un ID llamado “x” por
ejemplo “insertarDatos”, y cuando lo tengas, asígnalo a una variable y créale un EventListener,
es decir, un escuchador que se active cuando ocurra un evento, en este caso, hacer click sobre
el botón, y cuando ésto pase llama a la función que te ponga a continuación. Como habíamos
creado unas funciones donde íbamos a añadir, borrar y borrarTodo, pues usamos dependiendo
del botón que haya pulsado una función u otra. Debemos fijarnos que cada vez que buscamos
un botón siempre lo buscamos por el id que le habíamos puesto en el código HTML, fíjate y
verás cómo coincide. En el formulario teníamos un botón para insertar datos:
Aula Mentor
<input type=”button” name=”insertarDatos” id=”insertarDatos” value=”Insertar Datos”>
Y luego en la función iniciar:
function iniciar(){
var botonInsertar=document.getElementById(‘insertarDatos’);
botonInsertar.addEventListener(‘click’, nuevoitem, false);
var botonBorrarItem=document.getElementById(‘borrarDato’);
botonBorrarItem.addEventListener(‘click’, borraitem, false);
var botonBorrarTodo=document.getElementById(‘borrarTodo’);
196 botonBorrarTodo.addEventListener(‘click’, borratodo, false);
A partir de ahí, en cada función lo que hago es coger el contenido que ha rellenado el
usuario en el campo de entrada; el campo clave y el campo valorClave, obtengo su valor .va-
lue, y voy asignándolo a una variable, para poder trabajar con él, por ejemplo para la function
insertar lo que hago es lo siguiente:
function nuevoitem(){
//Agregamos el ítem a nuestro sessionStorage
//Informamos al usuario, no obligatorio pero recomendable

M1. HTML5
var informarUsuario=document.getElementById(‘informarUsuario’);
//Leemos los datos insertados anteriormente con sessionStorage.getItem(Clave)
var valor=sessionStorage.getItem(clave);
Lo que hacemos es rescatar los valores que ha introducido el usuario en los campos
antes de llamar a sessionStorage.setItem(clave,valor):
<p>Clave:<br><input type=”text” name=”clave” id=”clave”></p>
<p>Valor:<br><textarea name=”text” id=”valorClave”></textarea></p>
Si recordamos lo que hay en el formulario es la definición de un campo de texto llamado

clave (name=”clave”) y de un textarea llamado text (name=”text”), además del nombre o name,
le he agregado un id que es el que busco con getElementById(Identificador). 197
Posteriormente ya solo aplico los métodos de sessionStorage en cada caso, para hacer
una acción u otra (añadir, modificar, borrar o borrar todo). Por ejemplo para insertar el elemento
recordemos que era con:
Es muy importante que te encuentres cómodo en esta forma de programar, por un lado
nuestra estructura (etiquetas HTML), por otro lado nuestras acciones sobre los elementos (ya sea
con JavaScript o jQuery) y por último, la parte del diseño que veremos en el siguiente módulo.
Por lo que te recomiendo que intentes hacerte un esquema con toda la secuencia y no avances
hasta que entiendas muy bien todo este ejercicio.
1.5.2. Persistente.
Para almacenar los datos persistentemente en el navegador del cliente, vamos a usar en
este caso localStorage, que se usa de forma muy parecida al método anterior, es más, si nos
fijamos en la captura de pantalla cuando hemos activado las herramientas de desarrollo o de-
puración, pulsando la tecla F12 podemos ver que en la parte superior nos aparece también la
opción LocalStorage.
El mecanismo es muy parecido, solo cambiando el nombre de sessionStorage por localS-

torage, por tanto los métodos en este caso serían los siguientes:
Aula Mentor
Método Acción
localStorage.setItem(clave,valor) Inserta un ítem del tipo valor - clave en nues-
tro.
localStorage.getItem(clave) Recupera el valor de la clave guardada pre-
viamente.
localStorage.removeItem(clave) Elimina el ítem que corresponde a la clave
dada.
localStorage.clear() Elimina todos los ítems insertados anterior-
mente.
localStorage.legth Nos devuelve el número de registros que te-
nemos almacenados.
localStorage.key(índice) Nos devuelve el orden de inserción que ocupa
en el registro el índice dado. Empieza en 0 el
primer valor hasta n registros por lo que es
sólo numérico.
Veamos el mismo ejemplo del apartado anterior, solo cambiando el nombre de session
por local, tendríamos los siguientes datos sin insertar ningún dato, a no ser que el navegador
haya guardado algún dato anteriormente. Vemos que es similar a cuando usábamos SessionSto-
rage, teniendo nuestras parejas de key, value.
198
Si insertamos los mismos datos que en el almacenamiento temporal, usando los métodos
correspondientes, obtendremos el siguiente resultado:
La única diferencia será que si cerramos el navegador y volvemos a abrirlo obtendremos

el mismo resultado siempre que accedamos a la página http://localhost. Con esto quiero decir
que si accedes a la web de google, y ejecutas el modo desarrollador, verás otras variables que ha
usado esa web. Puede aparecerte algo como esto con cualquier web, por ejemplo http://www.
google.es al pulsar F12 verás muchos datos:
M1. HTML5
Cada página web tiene sus propias variables, y tenemos que tener cuidado qué vamos a
almacenar, qué valores voy a guardar y tener en cuenta que los datos siempre van a permanecer
aun cuando el cliente apague el ordenador. Debemos evitar guardar datos importantes y estruc-
turales de nuestra web, por ejemplo nunca guardar datos de contraseñas suyas, ni de acceso a
nuestro servidor, base de datos, etc.
Si se pueden guardar otro tipo de datos que nos sea útil para nosotros, en que página
está ahora mismo y los datos que tenía guardados, por ejemplo el carrito de la compra, si tenía
tres elementos agregados y se va la corriente eléctrica, cuando el cliente se identifique, buscar
los datos en su navegador y proponerle a cargar esos datos, por donde iba en el carrito, por el
minuto que estaba escuchando tu vídeo, etc.
Debes almacenar toda la información que puedas necesitar y recuperar posteriormente,

y lo importante que no debes olvidar es que lo estás usando del lado del cliente, en su nave-
gador, por lo que estamos liberando nuestro servidor. No debemos olvidar que cada navegador
tiene un tamaño máximo, del cual sólo nos podemos asegurar 5MB en la actualidad, indepen- 199
dientemente de que ya otros navegadores lo hayan ampliado, por ello es bueno tener un meca-
nismo que nos indique si hemos superado nuestra cuota siempre que insertemos algún dato:
//El bloque try es donde voy hacer la acción que vaya a realizar
try{
localStorage.setItem(contador1,contador2);
} catch (e) {
//capturo la excepción ya que el bloque try ha dado algún tipo de error
alert(‘Atención: Ha ocurrido un error.\n\nNombre: ‘+e.name+’ \n\nValor: ‘+e.message);
console.error(e.message);
if (e.name == “QuotaExceededError”) {
//Muestro una ventana a modo de ejemplo, se podrían hacer otras acciones
alert(‘Ha superado el tamaño en su almacén, no se podrá insertar el item o su navegador tiene deshabi-
litado el Almacenamiento: Storage’);
Aula Mentor
Los mensajes cuando excedan de la cuota del navegador, o si el navegador no tiene

activa el almacenamiento Storage serán capturados con el bloque try – cacth. En el caso de
que exista un error de inserción, saltará una excepción con el nombre QuotaExceededError, en ese
momento debemos hacer otra acción. En este caso mostraremos dos mensajes, uno más general,
indicando que ha existido un error y otro más concreto seleccionando exactamente una acción
para la excepción que ha saltado.
200
Sería conveniente que siempre que realicemos inserciones usando los mecanismos ses-
sionStorage o localStorage comprobemos si tenemos acceso y si no hemos superado la cuota.
M1. HTML5
2. Resumen.
- Para detectar si el navegador tiene activado JavaScript podemos usar la etiqueta <noscript>.
Lo usaremos siempre que nuestra aplicación dependa de JavaScript o jQuery, ya que éste
último está basado en JavaScript.
- Con HTML5 se pueden arrastrar y soltar (drag and drop) elementos en la pantalla. Para usar-
lo necesitaremos básicamente un elemento el cual arrastraremos y otro elemento que será el
que recogerá el elemento donde lo soltaremos.
- Podemos usar diseño 2D a través de canvas. Éste será el lienzo en el que realizaremos nues-
tros gráficos. Se pueden realizar las siguientes acciones:
• Trazar líneas. Dos puntos necesario: inicio (contexto.moveTo(x,y); ) y fin (contexto.

moveTo(x,y);) y agregamos tinta con (contexto.stroke();).
• Trazar rectángulos. Se puede hacer dibujando las líneas una por una o usando el método:
strokeRect(x, y, width, height).
• Trazar formas geométricas. Para realizar formas geométricas usamos el siguiente método:
arc(x, y, radio, anguloInicial, anguloFinal, sentidoInverso)
- Agregar texto: Para agregar texto tenemos dos opciones: 201
fill-Text(“texto”, x, y). Inserta el texto dado en el primer parámetro en las coordenadas

x e y; en este caso con el interior relleno.
strokeText(“texto”,x,y). Inserta el texto dado en el primer parámetro en las coordena-

das x e y; en este caso solo el contorno.
• Sombreados: Para los sombreados tenemos diferentes métodos que debemos usar:
shadowOffsetX. Margen de sombra respecto del eje X.
shadowOffsetY. Margen de sombra respecto del eje Y.
shadowBlur. Efecto de dispersión de la sombra.
shadowColor. Color del efecto sombreado.
• Imágenes: Podemos agregar imágenes al canvas, para ello nos apoyaremos de JavaScript.
Tenemos que agregar dentro del body el canvas y la imagen oculta, posteriormente en el
head dentro del script nos declaramos una función que será la que cargue la imagen a nues-
tro canvas, nos declaramos una variable que contendrá la imagen para poder procesarla y
enlazamos nuestra variable con la ruta donde está la imagen y por último agregamos en el
inicio del body la función.
• Transformaciones: Podemos hacer tres tipos:

Aula Mentor
Translación: translate(x, y)
Rotación: rotate(ángulo)
Escala: scale(x, y)
• Una de las ventajas de usar HTML5 es el uso del geo posicionamiento, con él podemos
localizar la ubicación del usuario a través de su dispositivo. Para realizar ésta localización
usaremos coordenadas decimales.
Para ello usamos el método:
getCurrentPosition(función en caso de éxito, función en caso fallido, otras opciones);
• Podemos agregar mapas a nuestras web o con la Static Maps API o con Google Maps API
JavaScript v3. Con estos métodos podremos interactuar con él y trabajar con la posición
leída por el dispositivo.
• Podemos realizar también seguimientos de los desplazamientos con unos intervalos a tra-
vés de la función watchPosition. En el caso que queramos borrar los mismos, usaremos
clearWatch.
• Podemos almacenar datos en el navegador, en el lado del cliente, de forma temporal o de

sesión (sessionStorage), o de forma permanente (localStorage). Para ello nos ayudaremos
de funciones en JavaScript donde añadiremos/modificaremos/borraremos los datos inserta-
202 dos.
• Los datos insertados con sessionStorage se eliminarán cuando el usuario cierre la ventana
del navegador.
• Los datos insertados con localStorage se guardarán permanentemente, incluso si el usuario

apaga su equipo.
• La estructura de inserción de datos de almacenamiento en el navegador se hará con pares

de datos del tipo Clave, Valor.
• Si queremos ver los datos que estamos usando actualmente en nuestro navegador, ten-
dremos que usar el modo depurador/desarrollador del mismo y buscar las opciones de
sessionStorage o localStorage en cada caso. También podremos a través de él agregar/modi-
ficar/eliminar datos.
Módulo 2. CSS3.
Unidad 4. Estructura, estilos, selectores y jerarquías en CSS3.

Unidad 5. Propiedades, elementos flotantes y posicionamiento.
Unidad 4: Estructura, estilos, selectores y
jerarquías en CSS3
1. Introducción a CSS3.
En HTML5 nos hacíamos cargo de la semántica de la web y de los elementos que la iban
a integrar. En esta última versión se ha intentado separar la parte de la semántica de la parte
del diseño, es decir, una aplicación web que tenga una estructura y una funcionalidad concreta
puede tener un aspecto totalmente diferente sólo con cambiar solo un archivo (css) y lo más
importante, sin tener que modificar nada en los archivos html que habíamos creado inicialmente.
Esto nos trae muchas ventajas, en las que podemos destacar total independencia del
204
equipo de diseño y del de desarrollo; eso no quita que trabajen conjuntamente, sino que se
puedan dividir el trabajo. Renovar la apariencia de una web estéticamente creando un efecto
totalmente diferente, sin cambiar una letra del contenido.
Un ejemplo sencillo: imaginemos que hemos escrito un menú superior con una lista,
como vimos en las primeras unidades. Algo parecido a esto:
Como toma de contacto no estaría mal, pero ¿y si pudiéramos poner en un sitio diferente
algo distinto? como:
miarchivo.css
.menuinicio{
texto: azul;
tipo: negrita y cursiva;
fondo: amarillo;
}
M2. CSS3
Esos no serían los comandos exactos, pero si muy parecidos, la mayoría sería una simple
traducción. Obtendríamos un resultado muy parecido a éste:
Bueno, ha cambiado un poco el menú y la verdad que hoy en día podemos encontrar
muchos ejemplos de menús realizados así. Lo importante como hemos dicho anteriormente, es
que si la empresa que nos pidió el diseño decide cambiar los colores de la marca, no es necesa-
rio cambiar todo, archivo por archivo: inicio.html, productos.html, etc, solo nos tendríamos que
ir a nuestro archivo miarchivo.css y modificarlo y el cambio se aplicará a todos los archivos
existentes. Imaginemos que la marca ha cambiado los colores de amarillo y azul, por azul y
blanco:
miarchivo.css
.menuinicio{
texto: blanco;
tipo: negrita y cursiva;
fondo: azul;
205
}
Como podréis ver, tenemos un menú totalmente diferente, cambiando sólo “algo” en un
sitio, ésto es porque hemos independizado totalmente el diseño de la parte semántica de la web.
Existe una web donde podremos ver muchos más ejemplos de ésto:
http://www.csszengarden.com/
Si seleccionas, view all design verás que hay muchos diseños diferentes pero si te fijas
en el contenido, apreciarás que es el mismo; ésta es la idea en la que tenemos que pensar siem-
pre que desarrollemos nuestra aplicación web, ya que nos facilitará muchísimo el mantenimien-
to, además de agilizar las modificaciones respecto al diseño.
Estos archivos que contienen nuestros modificaciones de diseños se llama hojas de

estilo en cascada, (CSS - Cascading Style Sheets) y la última versión es la CSS3 que veremos a
continuación.
2. Estructura de una web con CSS3 y modelo de cajas.

CSS3 es externo a las web HTML5, aunque cada vez está más ligado, pues puedes hacer
una web entera sin usar ninguna hoja de estilo. Por lo que tenemos que tener en cuenta cuan-
do estemos programando, debemos añadir en un futuro o a la vez que se esté desarrollando
Aula Mentor
el código las hojas de estilo necesarias. En este curso se ha decidido añadir el estilo después,
para comprender aún más la independencia de ellos, y ver que el diseño puede ir totalmente
independiente del código en HTML5. En el siguiente apartado veremos las formas de agregar las
hojas de estilo a nuestros ficheros en HTML5.
Debemos recordar que un navegador web se encarga de ir leyendo etiqueta por etiqueta
nuestra página y entenderá solo dos tipos de elementos:
Elementos de bloque (block). Serán tratados como una estructura que se van posicio-
nando uno sobre otros, creciendo hacia abajo de nuestra web, y aunque pusiéramos las etique-
tas en línea, una seguida de la otra, aparecerá como si fueran dos bloques diferentes, ésto pasa
con la mayoría de las etiquetas: <header><section><aside><footer><p>, etc. Veamos un ejemplo:
<!DOCTYPE html><html lang=”es”><head><meta charset=”utf-8” /><title>WEB EN HTML5</tit-

le></head><body><header><a id=”inicio”></a><h1>MI PRIMERA WEB CON HTML5</h1></
header><nav><ul><li><a href=”#INICIO”>INICIO</a></li><li><a href=”#CONTACTAR”>CONTACTAR</a></
li></ul></nav><section><article><h3> FORMULARIOS </h3><p>Primer texto</p><p>Segundo texto</p></
article><article><p>Tercer texto</p><p>Cuarto texto</p></article></section><footer><p> Píe de página
construido con HTML5 </p></footer></body></html>
Como verás, están todas las etiquetas seguidas una de otra, forma no aconsejada para un
mantenimiento efectivo, pero si como una forma de dificultar a un tercero cómo se ha realizado
la web. Pero si ejecutamos el archivo en el navegador veremos el siguiente resultado:
206
Elementos en línea (in line). En este caso los elementos se posicionan uno al lado del
otro, no crecen hacia abajo ni insertan ningún salto de línea a no ser que ya no haya más espacio
en la web.
M2. CSS3
Pero antes de continuar y llegados a este punto debemos conocer en qué consiste el
modelo de cajas y para qué nos sirve en la creación de nuestras aplicaciones web. El navega-
dor entiende cada etiqueta HTML como una caja, y cada caja tiene unas propiedades definidas,
según las cuales las ubicarán en un sitio y forma concreta. Si recordamos cuando usamos el
modo desarrollador de nuestra web, nos vamos a la pestaña Element y abrimos una web que
ya hayamos realizado, por ejemplo voy a usar la página del ejemplo2.
Podemos ver que hay varios elementos, pero si vamos pasando el ratón por encima de
ellos y vamos desplegando los elementos, al seleccionar el enlace que teníamos creado llamado 207
empresa, lo primero que nos muestra es donde está seleccionado en el código; cosa muy útil
cuando cogemos código de terceros para el mantenimiento y estamos un poco perdidos.
Aula Mentor
También debemos fijarnos que a la derecha aparece una caja con unas propiedades del
elemento, padding, border, margin, etc y si vamos moviéndonos por ella, observaremos a qué se
refiere cada punto. Como ya veremos más adelante todo esto es muy importante. Además, nos
comenta qué estilo está usando por defecto el navegador, si subimos con el scroll vertical, entre
otras cosas podemos ver en la zona Styles esa información, el estilo que está usando el propio
navegador para ese código en concreto:
Conforme el navegador va leyendo etiquetas, va creando su modelo de cajas, con las

propiedades, cuando nosotros le agregamos otro modelo en el archivo, prevalece nuestro estilo
al del navegador, y la mezcla de su modelo, más el nuestro, será nuestra aplicación web.
3. Estilos.
Hemos hablado de estilos y que hay que aplicarlos en nuestros archivos, y cuando el
navegador los lea, los irá interpretando y comprobará si tiene que modificar las propiedades de
la etiqueta en concreto, pero ¿dónde le digo exactamente al navegador donde están mis estilos?
208 Existen varias formas donde podemos insertar nuestros diseños:
- En línea.
- Internos.
- Externos.
Es importante saber que se pueden usar de varias formas, porque dependiendo de cada
necesidad, usaremos una forma, otra o la combinación de varias.
3.1. En línea.
Nosotros podemos aplicar estilos directamente sobre el propio elemento una vez esta-
mos declarando la etiqueta de apertura, independiente de la etiqueta que sea:
<etiqueta style=”mis propiedades”> </cierre etiqueta>
Cuando existan más de una propiedad, estas deberán ir separadas por punto y coma “ ;
“ . style=”propiedad1: valorPropiedad1; propiedad2: valorPropiedad2;”>
<p style=”mis propiedades”>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
Podemos usar como ejemplo los siguientes estilos. Para aplicar un tamaño de letra de 22
pixeles y un estilo cursivo (italic) tendríamos que agregar:
M2. CSS3
<p style=”font-size: 22px; font-style: italic;”>CSS3.</p>
Por ahora debemos fijarnos en la forma de declarar las propiedades, las propiedades
que estamos viendo son a modo de ejemplo para que puedas verlo gráficamente, y veas un
resultado. Tienes en los recursos del curso el ejercicio con el código utilizado, revísalo e intenta
reproducirlo cambiándole por ejemplo el tamaño en font-size de 22px por uno 10px, luego por
30px o cualquier otro. Recuerda que siempre que realices algún cambio, deberás guardar y ac-
tualizar el navegador, sino el cambio producido no lo mostrará.
3.2. Internos.
Además de definir nuestros estilos en la propia etiqueta, en línea, podemos hacerlo in-
ternamente en la cabecera de la página actual. Es decir, si quiero aplicar a toda la página un
estilo concreto podemos hacerlo declarándolo dentro del <head></head> como vimos en un
ejemplo del módulo anterior.
209
Para ello debemos imaginarnos que queremos usar para todos los párrafos <p> un estilo
concreto, por ejemplo “font-size: 22px;” tamaño de letra 22px y estilo de texto en cursiva font-
style: italic. Vamos a coger el mismo ejemplo anterior y agregar el siguiente texto en el <head>
de la página:
....
....
<head>
<style>
p { font-size: 22px;
font-style: italic;
</style>
Aula Mentor
</head>
....
....
Si ejecutamos el texto, veremos que se ha aplicado a todos nuestros párrafos, es decir,

hemos actuado sobre todas las etiquetas <p> y no hemos tenido que escribir nada en la parte
del HTML5, cosa que vamos buscando para independizar el diseño del texto.
Puedes consultar el ejemplo3-estilo-interno.html
3.3. Externos.
210
En la mayoría de los proyectos de gran embergadura, será necesario trabajar con varios
archivos a la vez, y cada uno de ellos deberá hacer su función, tendremos por tanto:
- Un archivo HTML5, (extensión .html) donde tendremos nuestras etiquetas: texto, formula-
rios, tablas, la semántica de la web, etc.
- Un archivo CSS3, (extensión .css) donde tendremos las reglas de estilo referidas a las eti-
quetas con nuestro diseño.
Además, sería conveniente ir organizando nuestro sitio web, teniendo carpetas para te-
ner los contenidos mejor estructurados. Un ejemplo puede ser el siguiente, no tiene por qué ser
el mismo nombre, es más, cada cual puede organizar y nombrar las carpetas según le interese,
pero a modo de ejemplo:
- Una carpeta css. Donde tendremos todas las hojas de estilo.
- Una carpeta js. Donde tendremos todos los archivos JavaScript.
- Una carpeta audio. Donde almacenaremos nuestros archivos de audio.
- Una carpeta vídeo. Donde almacenaremos nuestros vídeos.
- Una carpeta img. Donde vamos a guardar nuestras imágenes.
Respecto al archivo HTML5 y CSS3 hay una forma de relacionarlo, que debemos incluir
en nuestro fichero html dentro del head usando la etiqueta:
M2. CSS3
<link rel=”stylesheet” type=”text/css” href=”ruta_archivo.css”>
index.html miestilo.css (dentro de la carpeta css)
Imaginemos que en el mismo ejemplo usado en el apartado anterior, en vez de tenerlo

de forma interna, queremos tener nuestros estilos de forma externa en un archivo, ¿cómo lo
haríamos?
index.html miestilo.css (dentro de la carpeta css) 211
Prueba a ejecutar el ejemplo 4/index.html y verás que el resultado es el mismo que ha-
ciéndolo directamente en el <head>:
Puedes consultar el ejemplo04-estructura/
Es posible que ahora mismo no le veas mucha utilidad, pero lo normal es que el archivo
de diseño ocupe cientos de líneas solo con el diseño, y es mucho más claro tenerlo todo en un
fichero aparte, sino tendría que estar todo el código dentro del head del documento.
4. Jerarquía.
Como hemos visto, podemos definir estilos en diferentes sitios, entonces ¿cuál es el sitio
predilecto por el navegador? ¿Qué estilo va a poner el navegador finalmente cuando vea el estilo
de esta etiqueta?
Aula Mentor
Como era de esperar, siempre el navegador va a dar más prioridad al estilo que esté más
cercano a la etiqueta. Esto nos viene muy bien también porque si por ejemplo ponemos toda
la web concreta con un estilo concreto, por ejemplo fondo azul, y queremos en un apartado en
concreto poner un fondo amarillo, podemos dejar el fichero inicial tal cual y modificar sólo el
archivo en cuestión. Pero veamos un ejemplo donde pongamos ésto de manifiesto:
Vamos a declarar tres estilos diferentes sobre la misma etiqueta:
- En línea – Color Verde.
- Interna – Color Azul.
- Externa – Color Rojo.
En el siguiente ejemplo vamos a comprender como cada navegador va leyendo y apli-

cando los estilos a cada etiqueta según unas reglas.
miestilo.css
212
index.html
El resultado sería el siguiente, donde vemos que:
¿Por qué no se ha aplicado el estilo externo (rojo) en el fichero? Porque había uno más
cercano a la etiqueta indicando otra definición. Por eso, debemos recordar que cuando el diseño
sea externo no quiere decir que tenga menos valor, si por ejemplo nos equivocamos y cambia-
mos el orden, poniendo la definición justo después de la otra definición, veremos que la cosa
cambia.
….
<head>

M2. CSS3
<style>
p{
color:blue;
</style>
<link rel=”stylesheet” type=”text/css” href=”css/miestilo.css”>
</head>
….
<p style=”color:green”>Texto de prueba CON diseño en línea. </p>
<p>Texto de prueba sin diseño en línea</p>
En este caso, ya si aparece el color Rojo, pero desaparece el color Azul, tendríamos el
siguiente efecto en nuestra aplicación web:
213
Ésto es porque realmente cuando hacemos una llamada a un fichero externo, el navega-
dor lo que hace es agregarlo a continuación, y como está más cerca de la etiqueta, es el último
que tiene en su caché, es el que va a usar, por lo que uno de los fallos más típicos cuando se
trabajan con ficheros externos es el orden de los mismos, haciendo efectos que no esperamos
cuando se trabaja sobre la misma etiqueta. En este ejemplo tenemos que pensar que el navega-
dor ha agregado a continuación del estilo, el contenido del fichero como tipo “text/css”:
Agregado del fichero

miestilo.css
Aula Mentor
También podríamos utilizar unas propiedades de diseño en los ficheros externos, otros
en los internos y otros distintos en línea, se puede hacer las mezclas que se nos ocurra, pero
siempre debemos comprender que el último estilo aplicado a la etiqueta HTML es el que el na-
vegador mostrará, es como si existe una cascada y diferentes niveles, siempre recibirás el agua
de fuente inmediatamente superior, de ahí viene el nombre de Cascading Style Sheets, hojas de
estilo en cascada.
Al igual que en una cascada, si en alguna altura una etiqueta recibe una propiedad, las
que estén dentro de ella la heredarán, recibirán ese color, si además se le aplicará un estilo a esta
segunda, todas las etiquetas de este tercer nivel, heredarán las propiedades del primer nivel, más
las del segundo, más las propias, y así se podría repetir indefinidas veces. Veamos un ejemplo:
Nivel 1. Tenemos un artículo <article> que tiene como estilo la letra de color Azul.
Nivel 2. Tenemos un párrafo <p> en su interior que va a tener la letra tamaño 22.
Nivel 3. Tenemos un párrafo <p> en su interior que va a tener la letra en cursiva.
<article style=”color:blue”>
<p> Texto del nivel 1 </p>
<article style=”font-size:32px;”>
<p>Texto de nivel 2
214
<article style=”font-style:Italic;”>
<p>Texto de nivel 3
</article>
</article>
</article>
El texto de nivel inferior se irá impregnando de las etiquetas superiores que hay por
encima, teniendo el nivel 3, en este caso color azul, tamaño 32 y cursiva.
Puedes visitar el ejemplo06-jerarquia3/

M2. CSS3
He realizado mucho hincapié en esto porque la mayoría de los errores que hay con las
hojas de estilo es seguir correctamente el orden, prioridad de las etiquetas, la jerarquía y la he-
rencia. Todo ésto, conforme se vayan realizando ejercicios se irá dominando cada vez más, así
que ¡ánimo y prueba por ti mismo todos estos ejercicios!
5. Reglas de estilo y selectores.

Las reglas de estilo serán los diseños aplicados a cada etiqueta HTML de nuestro docu-
mento, pero en un documento pueden existir muchas etiquetas, y en determinados casos quere-
mos aplicar nuestro diseño a sólo una parte. En el apartado anterior vimos que si ponemos una
regla de estilo a una etiqueta concreta, cuando la aplicamos a la etiqueta <p>, se aplica a toda
etiqueta existente en el documento; pero si queremos seleccionar nuestras etiquetas para hacer
llegar nuestros diseños de una forma más concreta, tenemos otras formas de hacerlo. Para ello
existen los selectores:
- Selectores de elemento.
- Selectores de ID.
- Selectores de Clase.
5.1. Selector de elemento.
Un selector de elemento nos va a permitir aplicar una regla de estilo sobre un tipo de
elemento concreto de HTML. Para ello tenemos que poner el tag o etiqueta seguido de los pares 215
de propiedad: valor, separadas por “;”, todo ello cerrado entre corchetes. Es muy importante
seguir estrictamente el formato porque si no tendremos errores difíciles de detectar.
/* Podemos añadir comentarios opcionalmente, y pueden ocupar una o varias líneas. Estos comentarios los
verá un usuario avanzado, por lo que no se debe poner información transcendental.
*/
etiquetaHTML {
propiedad1: valor1;
propiedad2: valor2;
propiedad3: valor3;
Por ejemplo si queremos aplicar a la etiqueta <h3> el color Azul y a la etiqueta de párrafo
<p>, el color Rojo y cursiva tendremos que escribir lo siguiente:
Aula Mentor
miestilo.css
Si creamos una página de ejemplo, veremos que efectivamente se ha aplicado correcta-

mente a todas las etiquetas del fichero.
Puedes visitar el ejemplo07-selectores-elemento/
216 5.2. Selector de ID.
Los selectores de ID, seleccionarán aquellas etiquetas que coincidan con el identificador
asociado id=”nombre_identificador”. Estas etiquetas serán distinguidas en el fichero o estilo
CSS, porque les preceden una #, usándose de la siguiente forma:
/*
En este caso seleccionamos todos los elementos que hay en documento que corresponde al identificador
dado. Solo se puede usar una vez en el documento CSS y debe ser declarado una única vez en el CSS. Por
lo que se suele usar para secciones bien diferenciadas, tipo menú superior, contenido, barra lateral,
etc. Aunque se puede usar para cualquier otra etiqueta como párrafos, títulos, tablas, etc.
*/
#nombre_identificador {
propiedad1: valor1;
propiedad2: valor2;
propiedad3: valor3;

M2. CSS3
Veamos un ejemplo, imaginemos que vamos a tener dos identificadores, uno para el
menu_superior y otro para el menu_inferior, y en el menú superior vamos a poner un texto
más grande para destacarlo junto con otras propiedades, y en el inferior un texto más pequeño
y otras propiedades distintas.
…..
<nav id=”menu_superior”>
<a href=”index.html”>Inicio</a> | <a href=”index.html”>Productos</a> | <a href=”index.html”>Empresa</

a> | <a href=”index.html”>Contactar</a>
</nav>
…..
…..
<footer id=”menu_inferior”>
<a href=”index.html”>Inicio</a> | <a href=”index.html”>Productos</a> | <a href=”index.html”>Empresa</

a> | <a href=”index.html”>Contactar</a>
</footer>
217
…..
…..
Si creamos un fichero css con el siguiente contenido:
/*####################################*/
/*SELECTORES DE ID */
/*####################################*/
#menu_superior{
font-size: 40px;
font-style: italic;
Aula Mentor
color: red;
#menu_inferior{
font-size: 20px;
font-style: normal;
color: blue;
/*####################################*/
218 /*SELECTORES DE ELEMENTO (del ejemplo anterior)*/
/*####################################*/
/* Comentario para la etiqueta h3*/
h3 {
color: blue;
p{
color: red;
font-style: italic;
}
Obtendremos el siguiente resultado:

M2. CSS3
Puedes visitar el ejemplo08-selectores-id/
Además si usamos el modo desarrollador, pulsando la tecla F12, podremos comprobar

qué estilo es el que se está aplicando en ese momento, útil para detectar errores en el código,
indicando el diseño, y el archivo:
5.3. Selector de Clase.

219
Los selectores de Clase, seleccionan los elementos dados por un nombre de clase, esta se
puede utilizar al contrario de los selectores de ID varias veces, comienzan con punto ‘.’, seguido
del nombre que queramos darle a la clase. Esta regla afectará a todos los elementos HTML que
pongamos su atributo ‘class’.
Veamos un ejemplo, siguiendo con el apartado anterior, vamos a añadir dos clases, tex-
to_actual y texto_antiguo, y con algunas propiedades para distinguirlos, más adelante veremos
que hace cada una de las propiedades, pero ahora debemos centrarnos en cómo seleccionar los
elementos de nuestra página.
/*
En este caso seleccionamos todos los elementos que correspondan a la

clase con el nombre dado.
*/
.nombre_clase {
propiedad1: valor1;
propiedad2: valor2;
Aula Mentor
propiedad3: valor3;
Si añadimos al fichero que teníamos miestilo.css el siguiente contenido:
...
/*####################################*/
/*SELECTORES DE CLASE*/
/*####################################*/
.texto_actual{
text-decoration: underline;
220 .texto_antiguo{
text-decoration: line-through;
...
Añadimos varios ejemplos de fichero HTML:
….
<section>
<article>
<h1>Título principal artículo 1</h1>
<p class=”texto_antiguo”>Texto1 del artículo....</p>
<p class=”texto_actual”>Texto2 del artículo....</p>

M2. CSS3
</article>
….
<article>
<h1>Título principal artículo 2</h1>
</article>
</section> 221
Obtendríamos el siguiente resultado:
Puedes visitar el ejemplo09-selectores-clase/
Como podemos apreciar el efecto ha sido el que queríamos dependiendo de la clase

hemos realizado unas acciones u otras. En este caso hemos usado el estilo text-decoration: line-
Aula Mentor
through; para el estilo antiguo, insertando una línea en el centro y text-decoration: underline;
para poner el texto subrayado.
5.4. Jerarquía entre selectores.
Una vez visto las diferentes formas de seleccionar los elementos, nos podemos realizar
la siguiente pregunta, ¿cuál tiene prioridad respecto a las demás en caso de duda sobre una eti-
queta? En la siguiente tabla podemos ver el orden de prioridad:
1º Selector de ID
2º Selector de Clase
3º Selector de Elemento
Es decir, si a un elemento lo seleccionamos por el elemento, por la clase y por el ID, el

valor que prevalecerá siempre será el del ID y luego la Clase. Veamos un ejemplo:
<p class=”desdeClase” id=”desdeID”>¿De qué color soy?, tengo ID= azul, Clase= rojo y elemento = verde.
Solución= AZUL</p>
<p class=”desdeClase”>¿De qué color soy?, No tengo ID, Clase= rojo y Elemento = verde. Solución=
ROJO</p>
222
<p>¿De qué color soy?, No tengo ID ni Clase pero si Elemento = verde. Solución= VERDE</p>
En el fichero CSS3 tenemos:
/*SELECTORES DE ID */
#desdeID{
color: blue;
/*SELECTORES DE CLASE*/
.desdeClase{
color: red;
M2. CSS3
/*SELECTORES DE ELEMENTO */
p{
color: green;
El resultado sería:
223
Puedes visitar el ejemplo10-selectores-jerarquia/
6. Resumen.
- Las hojas de estilo en cascada (CSS - Cascading Style Sheets) contienen las definiciones de
estilo y diseño de los documentos HTML5.
- Las etiquetas de HTML serán de dos tipos: elementos de bloque y elemento en línea. Depen-
diendo del diseño que vayamos a realizar tendremos que tener en cuenta esto para obtener
el resultado deseado.
- Para definir nuestras propiedades sobre el documento podemos realizarla de tres formas
diferentes.
• En línea.
• Internos.
• Externos.
- Las hojas de estilo tiene una jerarquía que dependiendo de la proximidad de la etiqueta se
usará un estilo u otro. Por norma general el orden de mayor a menor: en línea, internos y
externos. Aunque debemos tener cuidado en el orden de la definición de éstos dos últimos.
Aula Mentor
- En caso de duda, por existir varias definiciones del mismo nivel sobre la misma etiqueta,
usamos a continuación de la propiedad !important, indicando al navegador que ésta es la
que prevalece sobre las demás.
- En los documentos existen muchas etiquetas y la mayoría se repiten. Para concretar y se-
leccionar más eficazmente a qué etiquetas les queremos aplicar los estilos, tendremos tres
formas básicas:
• Selector de elemento. Selecciona los tag o etiquetas propias del HTML.
• Selector de ID. Crea unos identificadores únicos y se selecciona a través del identifi-
cador creado.
• Selector de Clase. Crea unas clases y se podrán usar varias veces en el mismo documen-
to, seleccionando en tal caso todas las etiquetas que correspondan a esa clase.
- La jerarquía entre selectores será el diseño que decidirá el navegador en caso de duda ante
varias selecciones sobre la misma etiqueta.
1º - Selector de ID.
2º - Selector de Clase.
3º - Selector de elemento.
224
Unidad 5: Propiedades, elementos
flotantes y posicionamiento
1. Propiedades CSS3.
1.1. Unidades de medida.
Cuando estamos asignándole propiedades a nuestras etiquetas podemos expresar de

diferentes formas las unidades de medida según deseemos:
Unidades de medida Absolutas:

225
Este tipo de medida nos permite asignar un valor estático y preconcebido a nuestro
elemento o etiqueta, representándose internamente independientemente del navegador, sistema
operativo y estado de la ventana (al 100% o parcial). Debemos recordar que la resolución de la
pantalla siempre nos la da en píxeles, por ejemplo: 1024x7688, 1280x1024, 800x600, etc.
Medidas en pt (puntos). Define el tamaño en puntos, y cada punto equivale a 1 pulgada/72,

es decir, unos 0.35 milímetros. No muy extendida.
Medidas en mm (milímetros). Define el tamaño en milímetros. No muy extendida.
Medidas en cm (centímetros). Define el tamaño en centímetros. No muy extendida.
Medidas en in (pulgadas). Define el tamaño en pulgadas. No muy extendida.
Medidas en pc (picas). Define el tamaño en picas, y cada pica equivale a 12 puntos, es decir,
unos 4.23 milímetros. No muy extendida.
Unidades de medida Relativas:
Este tipo de medida es más dinámico que el anterior y están referidas a un valor por otra
variable, por lo que no en cada momento va a depender del otro parámetro. Aunque pueda ser
más difícil su manejo, es de los más usados en la web, sobre todo cuando queramos adaptarnos
a diferentes dispositivos de pantalla y resoluciones.
Aula Mentor
Medidas en px (píxeles). Es muy usual usar esta medida al menos para algunas zonas,
para fijar un tamaño concreto e indicar el número de píxeles en pantalla que va a ocupar.
Por ejemplo, cuando dijimos con la propiedad font-size: 32px; estamos diciendo que el texto va
a ocupar 32 píxeles de nuestra pantalla. Esta medida algunos autores la toman también como
absoluta, ya que define un valor fijo, aunque realmente va a depender de la resolución de la
pantalla del usuario.
Medidas en em. Esta unidad de medida es útil cuando queremos tener en cuenta la con-
figuración del tamaño de letra en el ordenador de usuario, por ejemplo para aplicaciones para
discapacitados visuales. Ya que esta medida es relativa al tamaño de letra pre configurado del
usuario en su navegador. El nombre de EM está relacionado con la letra M. Originalmente, la
unidad se deriva de la anchura de la letra mayúscula “M” en el tipo de letra dado. Esta unidad
es la misma para todas las fuentes en un tamaño de punto dado.
Medidas en %. Esta es la más recomendada, está basada en aplicar una unidad relativa a
otro elemento definido en la página. Si por ejemplo queremos que el ancho de una capa sea la
mitad de su contenedor padre, podemos indicar width: 50%.
Podemos usar tanto las medidas absolutas como las relativas conjuntamente, siempre
y cuando la usemos con un objetivo concreto. Siempre es obligatorio indicar las unidades de
medida a continuación del valor que estamos utilizando, salvo que indiquemos que el valor de
una propiedad es 0.
Veamos varios ejemplos con el texto, aunque usar la medida en % se aplica a contene-
dores o div y no a textos como tal:
226
<p style=”font-size:10pt;”>Texto con valor = 10pt<p>
<p style=”font-size:10mm;”>Texto con valor = 10mm<p>
<p style=”font-size:10cm;”>Texto con valor = 10cm<p>
<p style=”font-size:10in;”>Texto con valor = 10in<p>
<p style=”font-size:10pc;”>Texto con valor = 10pc<p>
<p style=”font-size:10px;”>Texto con valor = 10px<p>
<p style=”font-size:10em;”>Texto con valor = 10em<p>
<p style=”font-size:10%;”>Texto con valor = 10%<p>
Puedes visitar el ejemplo01-unidad-medida/
Puedes ver el resultado en los recursos de la Unidad 5, apreciarás una gran diferencia en
cada caso, por lo que debemos prestar mucha atención a los valores que ponemos.
1.2. Anchura y Altura.
En algunos casos necesitaremos fijar un valor de altura y anchura a nuestros elementos

de HTML5, por ejemplo, si creamos un contenedor para almacenar las promociones de nuestra
M2. CSS3
web, este contenedor deberá tener un valor de anchura o altura. En caso de no indicarse, el
navegador, entenderá que si necesita crecer el interior del elemento crecerá en el valor que no
se ha indicado.
Para ello, disponemos de una etiqueta para fijar la anchura (width) y otra para fijar la
altura (height). Imaginemos que vamos a crear varios contenedores y queremos darle un tama-
ño concreto, en el archivo HTML5 tendríamos:
<section id=”deportes”>
<article>
<div id=”caja1”></div>
</article>
</section>
<section id=”sucesos”>
<article>
<div id=”caja2”></div>
227
</article>
</section>
Y en el fichero CSS3 tendríamos lo siguiente (nótese que hemos usado una propiedad
para agregarle un fondo background-color y poder distinguir visualmente qué es lo que mostra-
ría nuestro navegador):
#deportes{
width: 200px;
height: 200px;
background-color: green;
#sucesos{
width: 100px;
Aula Mentor
height: 100px;
background-color: red;
#caja1{
width: 50px;
height: 50px;
background-color: blue;
#caja2{
width: 20px;
height: 20px;
228 background-color: black;
Puedes visitar el ejemplo02-anchura-altura/
Debes prestar atención a la forma que ha usado el navegador para mostrar cada com-
ponente, y qué elemento está dentro de cuál, cómo y dónde se han ubicado. Comprender todo
ésto te facilitará en un futuro la organización de contenidos en tu aplicación web.
M2. CSS3
1.3. Colores.
Para expresar los colores en CSS3 existen varias formas, dependiendo de la necesidad
usaremos una u otra:
Color en Inglés:
Se puede escribir el nombre del color en inglés, esta forma nos mostraría un número
limitado de colores. Por ejemplo: red, white, yellow, green, etc.
Color en Hexadecimal indicando intensidad RGB:
Se puede expresar el color en valor hexadecimal indicando el valor de tinte en los colo-
res primarios R (Red), G (Green) y B (Blue). Siendo el valor menor el 00 y el valor máximo el
FF. Los valores en Hexadecimal serían los siguientes:
Para ello, tenemos que anteponer la almohadilla a los colores:
#RRGGBB
Por ejemplo, si queremos poner el color rojo con esta definición, pondríamos el rojo RR con
229
valor FF y el resto con 00:
#FF0000
Si quisiéramos un rojo menos fuerte sólo deberíamos indicar el nuevo valor:
#990000
Color en decimal indicando intensidad RGB:
Podemos expresar la intensidad del color de forma numérica, siendo más precisa que
la forma anterior, ya que en vez de usar 16 valores para definir el tinte del color usamos 255,
siendo 0 el valor inferior y 255 el valor máximo. No acepta negativos en caso de asignarse por
equivocación se tomará el 0. Para ello tenemos el método:
rgb(valor de rojo, valor de verde, valor de azul)
Para el caso que queramos sacar el color violeta (5 partes de azul y 2 de rojo) podríamos
usar la siguiente combinación:
rgb(20,0,100);
Color en % indicando intensidad RGB:
Al igual que en el apartado anterior, podemos indicar los colores usando el método rgb,
pero en este caso en vez de indicar un valor entre el 0 y 255, se usará entre el 0% del color y el
Aula Mentor
100% del color.
rgb(% valor de rojo, % valor de verde, %valor de azul)
Si queremos crear un color que tenga un 30% de rojo, un 60% de verde y un 80% de azul,
tendríamos que indicar:
rgb(30%, 60%, 60%)
Además podemos indicar la transparencia añadiendo un parámetro más al final, como

vimos cuando hicimos los diseños en 2D en el canvas, para ello añadimos al final de rgb una “a”
y el parámetro en última posición:
contexto.strokeStyle = “rgba(255,0,0,1)”;
El cuarto valor es un número entre 0 y 1. Por ejemplo 0 sería totalmente transparente, 1

sería totalmente opaco y 0.5 sería una transparencia al 50%, es decir, mitad opaco mitad trans-
parente. Esta notación también se puede usar con las otras formas de agregar colores.
En la siguiente tabla podemos ver los nombres en inglés más estándares en la web:
Color Color name Hex rgb Decimal

black #000000 0,0,0
silver #C0C0C0 192,192,192
230
gray #808080 128,128,128
white #FFFFFF 255,255,255
maroon #800000 128,0,0
red #FF0000 255,0,0
purple #800080 128,0,128
fuchsia #FF00FF 255,0,255
green #008000 0,128,0
lime #00FF00 0,255,0
olive #808000 128,128,0
yellow #FFFF00 255,255,0
navy #000080 0,0,128
blue #0000FF 0,0,255
teal #008080 0,128,128
aqua #00FFFF 0,255,255
Respecto a los colores también se pueden usar otros métodos, como son el HLS (hue-
saturation-lightness) y definir muchos más colores con el nombre en inglés; pero con los méto-
dos vistos hasta ahora se puede representar la mayoría de los colores existente y si te interesa
mucho los formatos y definición de los colores, siempre puedes ampliar la información en la
documentación oficial en:
http://www.w3.org/TR/css3-color/#numerical
M2. CSS3
Propiedades de color
Para la definición del color en sí, hemos visto antes varias etiquetas, pero existen algu-
nas propiedades distintas que también están relacionadas con los colores de nuestra aplicación
web, estas son: color (color del texto), background-color (color de fondo) y border-color
(color del borde) y box-shadow (sombra).
Veamos un ejemplo, imaginemos una sección que va a tener un color de texto concreto
(blanco), color de fondo (azul), un borde (verde) y un sombreado (naranja). Podríamos escribir:
#miseccion{
width: 600px;
height: 300px;
color: white;
/* Para que se aprecie mejor aumentamos el grueso del borde*/
border-width: 4px;
border-style: solid;
231
border-color: black;
/* Para la sombra de color naranja */
box-shadow: 2px 2px 12px orange;
/* Para que lo soporte mozilla */
*moz-box-shadow: 2px 2px 12px orange;
/* Para que lo soporte Android Browser 2.1+ */
*webkit-box-shadow:2px 2px 12px orange;
/* Para que lo soporte Internet Explorer 9 (IE9) */
filter:progid:DXImageTransform.Microsoft.Shadow(color=’#FFA500’,
Direction=135, Strength=12);}

Aula Mentor
Puedes visitar el ejemplo03-colores/
Para el sombreado tenemos varios parámetros para poder configurar la dirección, el ta-
maño, intensidad y color de la sombra. Éstas son:
box-shadow: x y z color X: margen de la sombra hacia la derecha.
232 Ejemplo: Y: margen de la sombra hacia abajo.
box-shadow: 2px 2px 12px orange; Z: intensidad de degradado o desenfocado

(opcional, por defecto 0)
Color: es el color de la sombra.
1.4. Textos.
Una de las partes más importantes en las páginas web es el tratamiento de texto y las
propiedades que podemos hacer. Podemos aplicar diferentes propiedades a nuestros textos,
entre las más destacadas tendríamos:
1.4.1. Tipo.
1.4.2. Tamaño.
1.4.3. Estilo.
1.4.4. Grosor.
1.4.5. Línea de decoración.
1.4.6. Sombras.
M2. CSS3
1.4.8. Indentación.
1.4.9. Espaciados.
1.4.10. Alineación.
1.4.1. Tipo.
Con CSS3 podemos usar diferentes tipos de letra y fuentes predefinidas o incluso con las
nuevas versiones podemos incorporar nuestros propios tipos de fuente, incluso si el usuario no
tiene instalada esa fuente. Para esto tenemos la siguiente etiqueta:
font-family: “Tipo de letra”
Es posible añadir varios tipos de letra y si ése no existiera cogerá el siguiente, y en caso
que el navegador no encontrase el tipo de letra asociado al texto, escogerá el que tenga él por
defecto.
Veamos el siguiente ejemplo:
.opcion1{
font-family: batang, “Comic Sans MS”, Arial, Erronea;
} 233
.opcion2{
font-family: “Comic Sans MS”, Arial, Erronea;
.opcion3{
font-family: Arial, Erronea;
.opcion4{
font-family: Erronea;
}
Aula Mentor
Puedes visitar el ejemplo04-texto-font/
Si nos fijamos hay dos características que no debemos dejar escapar, la primera es que
cuando el tipo de letra tiene más de una palabra, ésta ha de ir encerrada entre comillas. Y la
segunda, el último tipo de letra ha sido inventado, y he puesto tipo de fuente errónea, y me ha
escrito el texto en un formato concreto, ¿cuál? Debemos recordar que el modo desarrollador de
nuestro navegador (F12) es nuestro mejor aliado, por ejemplo en Firefox si nos vamos al ele-
mento en concreto, veremos que nos indica el tipo de fuente elegida, en este caso al no existir
el tipo Errónea, ha cogido la suya por defecto que es Times New Roman:
234
- Ve pasando el ratón por cada uno de los textos y las opciones y confirma que se ha ido
aplicando los estilos que hemos ido definiendo.
Agregar nuestras propias fuentes de texto
Imaginemos que las fuentes existentes no nos satisfacen o queremos usar un tipo de
fuente que no me detecta el navegador y la apariencia de mi web va a depender mucho de la
tipografía existente, deberíamos usar la siguiente sintaxis:
/* definimos primero el tipo de fuente */
@font-face {
font-family: nombredemifuente;
src: url(rutadelafuente);
}
M2. CSS3
/* Ya la podemos usar en nuestros diseños */
…..
font-family: nombredemifuente;
…..
@font-face
font-family: “mitipografia”;
src: url(‘../font/waltographUI.ttf’);
Recuerda que si tenemos el archivo .CSS en una carpeta de distinto nivel, debemos usar
“..” para acceder al padre, y a partir de ahí a la carpeta donde estén las fuentes, en este caso font.
235
Podemos hacer nuestras propias fuentes, existen programas específicos donde te las
pueden diseñar, pero también podemos descargarnos otras gratuitas en otros sitios; bien de va-
rios recursos de internet o las que nos facilitan Google Fonts.
http://www.google.com/fonts/#
Por ejemplo, vamos a descargarnos, una fuente de ejemplo (Lobster):

Aula Mentor
Seleccionamos el botón con el título Quick Use a la izquierda de Add to Collection.
Se nos abrirá una ventana con las diferentes opciones del tipo de fuente y la forma de
usarla en nuestra web:
Tenemos tres métodos para agregar la fuente:

236
- Enlazando la ruta del archivo en el head de nuestra página:
<link href=’http://fonts.googleapis.com/css?family=Lobster’ rel=’stylesheet’ type=’text/css’>
- Haciendo un import con la ruta remota del archivo.
@import url(http://fonts.googleapis.com/css?family=Lobster);
- Mediante JavaScript.
WebFontConfig = {
google: { families: [ ‘Lobster::latin’ ] }
};
(function() {
var wf = document.createElement(‘script’);
wf.src = (‘https:’ == document.location.protocol ? ‘https’ : ‘http’) +
‘://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js’;
M2. CSS3
wf.type = ‘text/javascript’;
wf.async = ‘true’;
var s = document.getElementsByTagName(‘script’)[0];
s.parentNode.insertBefore(wf, s);
})(); </script>
Te recomiendo que pruebes a descargarte alguna fuente que te guste, y si tuvieras alguna
duda, puedes ver un ejemplo completo con todos estos ejemplos:
Puedes visitar el ejemplo04-texto-font/ 237
1.4.2. Tamaño.
Para variar el tamaño de letra tenemos la propiedad que ya hemos usado anteriormente:
font-size: valor;
Este valor lo podemos expresar de varias formas:
Absoluta Un palabra clave que asigna un valor concre-
to:
{xx-small, x-small , small, medium, large, x-

large, xx-large}
Ejemplo: font-size: x-large;

Aula Mentor
Relativa Relativa al tamaño por defecto que tenga el

navegador en el elemento padre, si está den-
tro de una etiqueta H1 será mayor en relación
a esa etiqueta:
{ larger | smaller }
Ejemplo: font-size: large;

Longitud Indicamos un tamaño específico, indepen-
diente del valor por defecto del navegador. No
se pueden usar valores negativos.
Ejemplo: font-size: 18px;
font-size: 1.7em;
Porcentaje Indicamos el valor en % teniendo como base
la que tenga por defecto el navegador.
Ejemplo: font-size: 200%;
El resultado lo puedes ver en el ejemplo05-texto-size.
Relación de medidas absolutas y otros tamaños de HTML.
238
Valores ab- xx-small x-small small medium large x-large xx-large
solutos
Factor de 3/5 ¾ 8/9 1 6/5 3/2 2/1 3/1
escala
HTML títulos h6 h5 h4 h3 h2 h1
HTML ta- 1 2 3 4 5 6 7
maños de
fuente
1.4.3. Estilo.
También podemos agregarle varias propiedades para modificar el estilo de texto, para
ello, usamos la propiedad:
font-style: valor;
VALOR DESCRIPCIÓN
normal Es el estilo por defecto del navegador, no es
necesario especificarlo mientras no haya una
propiedad padre aplicando otro estilo:
Ejemplo: font-style: normal;

M2. CSS3
italic Representaría nuestro texto de forma cursiva.
Ejemplo: font-style: italic;

oblique Representaría nuestro texto de forma oblicua,
es muy parecida a la italic y dependiendo so-
bre todo del estilo de fuente se apreciará más
o menos.
Ejemplo: font-style: oblique;
1.4.4. Grosor.
Otra forma de destacar nuestro texto es agregarle un grosor concreto, poner por ejemplo
el texto en negrita ayuda mucho a la lectura de texto que queramos destacar. Para ello CSS3 nos
proporciona la siguiente etiqueta:
font- weight: valor;
Se pueden usar los siguientes valores:
VALOR DESCRIPCIÓN
Numérico Existen diferente grosores predefinidos, y de-
pende de la fuente, el navegador y el tamaño
{100 – 900} se apreciará más o menos. 239
•100 - Thin
•200 - Extra Light (Ultra Light)
•300 - Light
•400 - Normal
•500 - Medium
•600 - Semi Bold (Demi Bold)
•700 - Bold
•800 - Extra Bold (Ultra Bold)
•900 - Black (Heavy)
Ejemplo: font-weight: 300;

normal/bold El valor normal correspondería al numérico
400 y el valor bold al 700.
Aula Mentor
bolder/lighter Dependiendo del valor de la etiqueta padre,

aumenta el grosor (bolder) o disminuye el
grosor (lighter)
Puedes ver algunos ejemplos en ejemplo06-texto-style+weight/
1.4.5. Línea de decoración.
Podemos agregar líneas de decoración al texto, usando la siguiente propiedad:
text-decoration: valor;
VALOR DESCRIPCIÓN
none Elimina cualquier apariencia que tenga defi-
nida, ya venga de un elemento jerárquico su-
perior.
Ejemplo: text-decoration: none;

overline Agrega una línea a la parte superior del texto.
Ejemplo: text-decoration: overline;

line-through Agrega una línea en medio del texto, efecto
de tachado.
240
Ejemplo: text-decoration: line-through;
underline Agrega una línea debajo del texto, efecto su-
brayado.
Ejemplo: text-decoration: underline;
Estas propiedades al igual que muchas otras se pueden combinar aplicándose simultá-
neamente mientras no sea restrictiva una de la otra. Serían factibles por ejemplo, agregar a un
texto una línea superior y una inferior.
text-decoration: overline underline;
El resultado de aplicar estas propiedades sería el siguiente:
Puedes visitar el ejemplo07-texto-decoration+shadow+transform/

M2. CSS3
1.4.6. Sombras.
Se puede añadir sombra al texto, usando la propiedad:
text-shadow: valores;
text-shadow: x y z color X: margen de la sombra hacia la derecha.
Ejemplo: Y: margen de la sombra hacia abajo.
text-shadow: 2px 2px 12px orange; Z: intensidad de degradado o desenfocado

(opcional, por defecto 0)
Color: es el color de la sombra.
Estas propiedades al igual que pasa con box-shadow, otras en HTML5 y CSS3 son sopor-
tadas por las últimas versiones de los navegadores.
El resultado de aplicar la propiedad text-shadow: 2px 2px 12px orange; sería:
241
En muchas ocasiones nuestra aplicación web tendrá que realizar transformaciones sobre
el texto, ya sea porque reciba los datos de una base de datos en bruto, un formulario web o
porque nos queramos asegurar que el texto tenga un formato en concreto. Para ello tenemos la
siguiente propiedad:
text-transform: valor;
VALOR DESCRIPCIÓN
Escribe la primera letra de cada palabra en
mayúsculas.
capitalize
Ejemplo: text-transform: capitalize;
Escribe todas la letras en mayúsculas.
uppercase Ejemplo: text-transform: uppaercase;

Escribe todas la letras en minúscula.
lowercase Ejemplo: text-transform: uppaercase;

Aula Mentor
Deja las letras sin modificación para evitar que

exista una etiqueta de orden superior con otra
none transformación.
Ejemplo: text-transform: none;
El resultado de aplicando estas propiedades al texto sería:
1.4.8. Indentación.
Al igual que la propiedad anterior, cuando estemos rellenando texto de otras fuentes,
o escribiendo directamente el texto en nuestra web, es necesario indentar nuestro texto (dar
espacios al inicio de la primera línea de cada párrafo). Para ello disponemos de la siguiente
propiedad:
text-indent: valor;
242
En este caso el valor se puede expresar en un valor estático o variable en porcentaje res-
pecto al ancho del párrafo, en caso de que el usuario reduzca o amplíe el tamaño de la ventana,
este % se calculará automáticamente. También se le puede aplicar un valor inherit (valor que
viene heredado de los padres del elemento). Puedes ver unos ejemplos en el Ejemplo08-texto-
indent.
1.4.9. Espaciados.
Podemos asignar un valor concreto de espaciado tanto en las letras como en las palabras
de nuestros párrafos de texto, al igual que el espacio entre líneas (interlineado). Para ello dispo-
nemos de las siguientes etiquetas:
PROPIEDAD DESCRIPCIÓN
letter-spacing: valor; Permite variar el espacio entre los caracteres
de cada palabra.
Ejemplo: letter-spacing: 20px;
letter-spacing: -2px;
M2. CSS3
word-spacing: valor; Permite variar el espacio entre las palabras de

un párrafo.
Ejemplo: word-spacing: 20px;
Ejemplo: word-spacing: -2px;

line-height: valor; Permite controlar el espacio entre líneas, éste
puede ser fijo, un valor de longitud, normal o
un porcentaje.
Ejemplo: line-height: 30px;
line-height: 85%;
white-space: valor; Permite controlar los espacios vacíos, sus va-
lores son pre (preserva los espacios escritos
en el HTML y los saltos de línea). nowrap (Im-
pide los saltos de línea automáticos por lo que
crecerá la web horizontalmente). normal (deja
que el navegador gestione los saltos de línea y
espacios múltiples).
Ejemplo: white-space: pre;
white-space: nowrap;
243
white-space: normal;
Puedes visitar el ejemplo09-texto-espaciado/
Puedes ver varios ejemplos en el link anterior, prueba a realizar varias propiedades y
comprueba que funcionan tal y como dice la especificación.
1.4.10. Alineación.
El texto lo podemos alinear de dos formas diferentes, de forma horizontal y de forma

vertical, para ello HTML5 nos proporciona las siguientes etiquetas y valores posibles.
Aula Mentor
ALINEACIÓN DESCRIPCIÓN
horizontal Alinea el texto de forma horizontal, aunque
dependiendo del caso no hace el efecto exac-
text-align: valor; to que esperábamos. Existen varios valores
posibles que puede coger esta propiedad:
left: Texto alineado a la izquierda (valor por

defecto).
right: Texto alineado a la derecha.
center: Texto centrado.
justify: Texto justificado.
auto: Alineación heredada por defecto.

vertical Alinea el texto de forma vertical respecto a los
otros elementos. Puede tomar varios valores
vertical-align: valor; diferentes:
baseline: Alinea el texto respecto a la parte

inferior de la línea base (valor por defecto).
sub: Escribe el texto en formato subíndice.

244
super: Escribe el texto en formato superíndice
o exponente.
Valor de longitud: Si este es positivo, alinea

el texto por encima de la línea base. Si es ne-
gativo, lo hace por debajo.
Porcentaje: Si es positivo, alinea el texto por

encima de la línea base. Si es negativo, lo hace
por debajo.
top: Realiza una alineación superior respecto

al elemento padre. Por ejemplo en una tabla
sería la parte superior.
middle: Alineación en el medio respecto al

elemento padre. Por ejemplo en una tabla se-
ría en el medio de la celda.
bottom: Alineación inferior respecto al ele-

mento padre. Por ejemplo en una tabla sería
en la parte inferior de la celda.
Al igual que en otras propiedades, dependiendo de valor, mientras no se contradigan se

pueden usar simultáneamente.
M2. CSS3
Puedes ver ejemplos tanto de alineación en el siguiente ejemplo y recuerda realizar tus
propias alineaciones de texto y practicar con las propiedades en el ejemplo10-texto-alineacion/
Hemos visto hasta ahora las propiedades más importantes y que se utilizan en la mayo-
ría de las aplicaciones web aplicadas al texto. Si estás interesado sobre alguna propiedad más
específica y fuentes de CSS3 siempre podemos ver las actualizaciones e información completa
en:
http://www.w3.org/TR/css3-fonts/
1.5. Márgenes, bordes y rellenos Box Model.
Como habíamos comentado anteriormente, debemos ver nuestra web como un conjunto
de etiquetas HTML y estas etiquetas se comportan como un modelo de caja. Pensemos que cada
etiqueta va a ocupar un rectángulo y este rectángulo tiene unas propiedades: márgenes, bordes
y rellenos. Debes prestar mucha atención a los siguientes conceptos porque posteriormente te
facilitarán o dificultarán que lo que quieres representar en tu aplicación web sea realmente lo
que deseas:
245
Tendríamos por tanto las siguientes propiedades sobre nuestra caja:

Aula Mentor
PROPIEDAD DESCRIPCIÓN
margin Nos permite aplicar un margen (espaciado ex-
terno a nuestra caja) a un elemento HTML. Se
puede hacer de forma genérica aplicando el
mismo tamaño a toda la caja usando margin:
valor;. Por ejemplo margin: 50px; aplicaría un
margen de 50px a toda nuestra caja.
También se puede hacer de forma selectiva en

cada lado:
margin-top: Para el margen superior.
margin-bottom: Para el margen inferior.
margin-left: Para el margen izquierdo.
margin-right: Para el margen derecho.

padding Nos permite aplicar un relleno interno (espa-
ciado de nuestra caja) a un elemento HTML.
Se puede hacer de forma genérica aplican-
do el mismo tamaño a toda la caja usando
padding: valor;. Por ejemplo padding: 50px;
aplicaría un margen de 50px a toda nuestra
246 caja.
También se puede hacer de forma selectiva en

cada lado:
padding-top: Para el relleno superior.
padding-bottom: Para el relleno inferior.
padding-left: Para el relleno izquierdo.
padding-right: Para el relleno derecho.
* ¡Ojo! Esta propiedad aumenta el tamaño

de la capa, si tuviéramos un padding=15px;
en un elemento de 100x100px, la
capa correspondiente habrá crecido a
100+15(lado1)+15(lado2)=130px de alto y
130px de ancho.
Veamos varios ejemplo sobre una caja de un tamaño fijo y cómo va interactúan las pro-
piedades vistas sobre las etiquetas de HTML5.
En el siguiente ejemplo podrás ver cómo afectan las propiedades anteriores:

M2. CSS3
Ejemplo11-margin-padding/
Aquí no hemos aplicado nada, sólo he ido agregando cajas dentro de cajas, debéis pen-
sar que es como un puzzle donde tenemos varias cajas. En nuestro caso, una caja grande de
color verde, a continuación cajas de menor tamaño (100x100px). Si usamos el modo depurador
del navegador nos da esa información, muy interesante ya que puedo ver los elementos pasan-
do el ratón por encima de ellos, ésto nos ayudará porque además de indicarnos dónde está el
elemento en cuestión, nos dirá el área que entiende el navegador que va a tener para ubicar ese
elemento y las propiedades.
Estarás pensando que en la imagen de la derecha, la información que nos da es de

102x102 px, pero, ¿si nuestra caja era de 100px? Debemos tener en cuenta que le hemos puesto
un borde de 1px, para distinguir las cajas en este ejemplo, a cada lado y el navegador nos dice
realmente lo que a él le va a ocupar poner esta caja en su tablero. Cuando se crean web y nos 247
crean efectos raros o inesperados suele ser por este tipo de errores, por ejemplo, si hubiera
puesto una caja contenedor (la de color verde) de 300x300 exactamente, no habríamos contado
los 2px añadidos de cada caja por lo que se bajaría a la siguiente línea.
Y ahora imaginemos que aplicamos un margen de 10px a la caja justo del medio, ¿qué
crees que pasará? ¿Y si le aplicamos en vez de un margen un padding?
Margen de 10px (margin:10px;) Padding de 10px (padding:10px)
Queda puesto de manifiesto en los ejemplos anteriores el resultado de aplicar las di-
ferentes propiedades, y además de sacar la conclusión de el margin (da espacio exterior) y el
padding (da espacio interior). No obstante, no debemos dejar pasar por alto qué ha pasado
cuando hemos ampliado esas líneas y cómo han afectado a la posición de las cajas y ¿porqué la
caja 7 no se ha colocado justo debajo de la caja 4? En verdad es porque los elementos van flotan-
do al usar una propiedad que veremos más adelante y se han ido colocando e intentado meter
Aula Mentor
pero se ha topado con la caja 5 y no ha podido ir más allá, y ¿qué ha pasado con las siguientes?
Pues que ha intentado ponerse justo a la derecha de la caja 7 y no ha cogido tampoco, entonces
ha bajado e ido al siguiente hueco libre, justo debajo de todas. De todas formas del apartado 2
sobre los elementos flotantes y posicionamiento veremos más ejemplos.
Depuración en Firefox Imagen girada 90º para ver por qué la caja 7
no se ha puesto debajo de la caja 4.
Aplicar bordes a nuestros diseños
Como ya hemos visto podemos aplicar border a nuestros diseños y este borde será exter-
nos a nuestra caja, por lo que ocupará de ancho: (ancho caja)+2*(ancho del borde). Para aplicar
248 bordes usamos las siguientes propiedades:
border-width: valor;
border-style:
valor;
Con border-width le asignamos un valor de ancho al borde y con border-style el estilo,

estas dos etiquetas son las mínimas para aplicar un border a nuestros elementos.
Los diferentes valores que puede tomar border-style serían los siguientes:
Valor Descripción
none Valor por defecto, si está activa anula un bor-
de específico.
hidden Pone un borde oculto, depende del diseño es
posible que lo necesitemos en el caso de con-
flictos de bordes por ejemplo en elementos
de tabla.
dotted Pone un borde con relleno con puntos.
dashed Pone un borde relleno de rayas.
solid Pone un borde contiguo, con relleno sólido.
double Pone doble línea sólida.
groove Efecto 3D relieve incrustado en la página.
ridge Efecto 3D relieve saliendo de la página.
M2. CSS3
inset Efecto 3D simulando marco incrustado hacia

dentro.
outset Efecto 3D simulando marco biselado hacia
fuera.
Podemos ver un ejemplo a continuación:
Cada navegador puede representar de una forma cada propiedad y podemos aplicar un
estilo diferente a cada propiedad, para ello podemos especificar el borde de dos formas:
Específicamente:
border-top-style Estilo del borde de la parte superior. 249
border-right-style Estilo del borde de la parte derecha.
border-bottom-style Estilo del borde de la parte inferior.
border-leftstyle Estilo del borde de la parte izquierda.
En línea:
border-style: (estilo borde superior) (estilo borde derecho) (estilo borde inferior) (es-
tilo borde izquierdo)
Por ejemplo: border-style: dotted solid double dashed;
Además si solo especificamos dos estilos, éste se hará en parejas
border-style: (superior-inferior) (izquierdo-derecho);
Por ejemplo: border-style: dotted solid;
Ya vimos que en el apartado 1.3 que podíamos aplicar además colores a esos bordes con la
etiqueta:
border-color: valor;
Por ejemplo: border-color: blue;
Puedes ver un ejemplo resuelto en el ejemplo de los recursos: Ejemplo12-boder/

Aula Mentor
Si quieres ver toda la documentación al repecto de los border puedes verlo en:
http://www.w3.org/TR/css3-background/#borders
1.6. ShortHand CSS3.
Los “Shorthand” de CSS3, son la forma de aplicar una propiedad CSS de forma reducida,
lo que nos va a permitir hacer un código menos pesado y más eficiente.
Realmente cuando en el apartado anterior aplicamos varias propiedades de formas con-

tigua, estábamos usando la notación shorthand. Podemos ver a continuación varios ejemplos:
1.6.1. Bordes.
Para representar los bordes, en vez de usar:
border-top-style: valor; border-top-style: dotted;
border-right-style: valor; border-right-style: solid;
border-bottom-style: valor; border-bottom-style: double;
border-left-style: valor; border-left-style: dashed;
250
Podemos usar todo en la misma línea:
border-style: dotted solid double dashed;
Para aplicar varias propiedades a la vez:
border-width: valor; border-width: 2px;
border-style: valor; border-style: solid;
border-color: valor; border-color: blue;
Para aplicar estas propiedades podemos usar:
border: 2px solid blue;
Para aplicar nuevamente más propiedades sobre bordes:

M2. CSS3
border-left-width: 2px;
border-left-style: solid;
border-left-color: black;
border-right-width: 2px;
border-right-style: solid;
border-right-color: orange;
border-top-width: 2px;
border-top-style: solid;
border-top-color: blue;
border-bottom-width: 2px; 251
border-bottom-style: solid;
border-bottom-color: red;
Podemos usar de forma shorthand reduciendo muchas líneas de código:
border-left: 2px solid black;
border-right: 2px solid orange;
border-top: 2px solid blue;
border-bottom: 2px solid red;
1.6.2. Fuentes.
Al igual que con los bordes podemos usar la notación shorthand, reduciendo y simplifi-
cando las especificaciones de nuestra propiedades.
Por ejemplo para escribir:

Aula Mentor
font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-size: 1.5em;
line-height: 200%;
font-family: Georgia, “Times New Roman”, serif;
Podemos escribir por ejemplo:
font: bold italic small-caps 1.5em/200% Georgia, “Times New Roman”, serif;
1.6.3. Background.
En la mayoría de los casos usamos esta notación de forma normal o extendida, como por
ejemplo:
background-color: orange;
background-image: url(img/mi_imagen.gif);
252
background-repeat: no-repeat;
background-position: bottom right;
background-attachment: scroll;
Donde estaríamos especificando el color de fondo (orange), la ruta de la imagen de fon-

do (url(img/mi_imagen.gif)), si queremos que se repita la imagen o no por todo el fondo o
queremos que se inserte sólo una vez (no-repeat), la posición (top left) se puede usar también
la siguiente notación:
background: orange url(../img/mi_imagen.jpg) no-repeat bottom right scroll;
1.6.4. Margin, padding, outline.
Este ShorHand es muy útil también porque nos ahorraría muchas líneas, en el caso que
tuvieramos el siguiente ejemplo:
M2. CSS3
div.actual {
margin-top: 1em;
margin-right: 1.5em;
margin-bottom: 2em;
margin-left: 2.5em;
Podríamos usar:
margin: 2em 2.5em 3em 2.5em;
Pasa igual con las otras propiedades: padding o outline. Al igual que nos pasaba con los
bordes, si sólo se indica dos parámetros:
margin: 2em 3em;
El navegador entenderá que el primer parámetro se refiere al valor (top-bottom) superior

e inferior y al valor (left-right) izquierda y derecha.
1.6.5. Listas. 253
Si quisieramos usar varias propiedades en nuestras listas, tendríamos que usar:
list-style-type: circle;
list-style-position: inside;
list-style-image: url(../img/mi_imagen.jpg);
Y usando la notación ShortHand sería:
list-style: circle inside url(../img/mi_imagen.jpg);
Puedes ver varios ejemplos sobre los bordes y la notación ShortHand en el ejemplo13-shorthand/
Varios autores fomentan el uso de la notación ShortHand por la simplificación del código y la
reducción del número de líneas de los archivos. Otros comentan que queda más claro y que me-
morizar las posiciones que corresponden dificulta el desarrollo. Ambas son igualmente válidas,
elige la que más se adapte a ti, y aunque al principio te resulte más incómodo esta notación, no
descartes la notación ShortHand, cuando estés continuamente trabajando con ella, no encontra-
rás excesivos problemas.
Aula Mentor
2. Elementos flotantes.
Como hemos podido comprobar en varias ocasiones los elementos que vamos inser-
tando en nuestra aplicaciones web se mueven y posicionan según unos patrones que debemos
controlar correctamente para no tener problemas posteriormente.
Este apartado es muy importante porque te ayudará o dificultará los diseños web cuan-
do estés en algún proyecto, la diferencia de entender estos conceptos o no, puede ser colocar
elementos y posicionarlos “a ojo” cambiando propiedades hasta que nos dé el resultado que
queremos (evitar a toda costa) o comprender el flujo de los elementos y cómo se posicionan
en la web, y anticiparse al resultado o en su defecto, en caso de error, comprender por qué ha
fallado y poder solucionarlo rápidamente.
Supongamos que nuestra web, va a mostrar siempre en la página inicial tres artículos,
para ello vamos a declararnos tres artículos en el html de la siguiente forma: archivo.html
….
<article id=”articuloI”>
<p>BLOQUE IZQUIERDO</p>
</article>
254 <article id=”articuloC”>
<p>BLOQUE CENTRAL</p>
</article>
<article id=”articuloD”>
<p>BLOQUE DERECHO</p>
</article>
….
archivo.css
#articuloI{
width: 200px;
height: 200px;
background-color: green;
text-align: center;
M2. CSS3
#articuloC{
width: 200px;
height: 200px;
text-align: center;
#articuloD{
width: 200px;
height: 200px;
background-color: blue; 255
text-align: center;
Si ejecutamos ésto tal cual lo tenemos obtendríamos el siguiente resultado:

Aula Mentor
2.1. Float.
Si recordamos cuando vimos los elementos o etiquetas HTML se comportaban como

unas cajas o bloques que iban armándose y si es un elemento de tipo bloque, se colocarán
unas debajo de otras. Para “romper este orden”, podemos sacar a los elementos del flujo normal
usando la propiedad:
float: valor;
Para poder usar esta propiedad, debemos tener obligatoriamente definida la pro-
pieda width del elemento. Esta propiedad admite los siguiente parámetros:
VALOR DESCRIPCIÓN
right Coloca al elemento de forma flotante a la de-
recha, dentro del contenedor padre.
left Coloca al elemento de forma flotante a la iz-
quierda dentro del contenedor padre.
none Decimos implícitamente que este elemento no
va a ser flotante.
Si aplicamos al ejemplo anterior la propiedad float:left; obtendríamos este resultado:
256
Pero sin embargo si aplicamos la propiedad float:right; veríamos que los elementos se
nos han desplazado a la derecha y fíjate en el orden en el que aparecen los bloques:
Debemos entender cómo ha resuelto el navegador estas etiquetas:
1. Lee el primer bloque, lo saca del flujo y lo pone a la derecha del padre.
2. Lee el siguiente bloque, lo saca también del flujo y lo pone a la derecha del padre, como ya
hay otro elemento, lo pone a la derecha de él.
3. Lee el siguiente bloque, lo saca nuevamente del flujo y lo pone a la derecha del padre, como
ya hay otros elementos, lo pone a la derecha de ellos.
M2. CSS3
Por último si le agregamos la propiedad izquierda al bloque titulado como BLOQUE IZ-
QUIERDO y la propiedad derecha al bloque titulado como BLOQUE DERECHO, obtendremos el
siguiente resultado, el cual debes analizar con el modo desarrollador para ver qué ha realizado
exactamente. Para clarificar un poco más hemos reducido el tamaño de bloque IZQUIERDO de
200x200 a 150x150, sino lo taparía y no se puede apreciar, fíjate que al indicar float el elemento
bloque verde se ha salido del flujo, y se ha puesto a la izquierda de su padre, pero en el ele-
mento BLOQUE CENTRAL no hemos especificado nada por lo que él sigue en su flujo, que sería
el que hay por defecto. El bloque azul no se ha puesto justo arriba a la derecha, porque encima
al existir un elemento anterior que ha ocupado una posición del padre, éste elemento BLOQUE
CENTRAL al estar en formato de bloque ha ocupado su posición.
Tienes las opciones que estamos comentando en el archivo Ejemplo14-float/

257
2.2. Clear.
Cuando tenemos elementos flotantes tenemos que tener alguna forma de indicar a nues-
tra aplicación que algunos de ellos no van a permitir elementos flotantes junto a él. Para ello
tenemos la siguiente propiedad:
clear:valor;
VALOR DESCRIPCIÓN
none Permite elementos flotantes a ambos lados.
left No permite elementos flotantes a su izquierda.
right No permite elementos flotantes a su derecha.
both El elemento no permite elementos flotantes a
ningún lado.
Veamos el siguiente ejemplo donde comprenderemos cómo y cuándo es necesario usar

la propiedad clear:
Aula Mentor
Se han puesto todos los elementos con float:left, para que se salten el flujo y se vayan
ordenando en el siguiente hueco libre del padre. Ahora si nos centramos en el bloque central y
le añadimos la propiedad clear: left; no permitirá que se ponga ningún elemento flotante a la
derecha.
258
¡Ojo! Este resultado será el mismo que si aplicarámos clear:both; Y a no ser que los
tres bloques estuvieran flotando hacia la derecha float:right; no podríamos probar la opción de
clear:rigth;
Puedes visitar el ejemplo15-clear/
2.3. Overflow.
Imaginemos un supuesto en el que los tres bloques en vez de tener como elemento
padre todo el body de la web, tiene otro elemento padre, y éste no tiene definido ni el ancho
ni el alto, para que se adapte automáticamente al contenido, sin aplicar ninguna propiedad de
M2. CSS3
flotabilidad, tendríamos:
<div id=”padre”>
<div id=”articuloI”>
<p>BLOQUE IZQUIERDO</p>
</div>
<div id=”articuloC”>
<p>BLOQUE CENTRAL</p>
</div>
<div id=”articuloD”>
<p>BLOQUE DERECHO</p>
</div>
</div>
Se vería en el navegador algo similar a ésto: 259
Si le ponemos los tres elementos de bloque como flotante float:left; veremos que el
padre se ha quedado apenas en nada, sólo en unos píxeles porque le he aplicado un borde para
que se aprecie, sino ni se vería, ¿por qué? Porque se ha salido del flujo del padre y como el padre
ahora no tiene ningún elemento (relleno) dentro no puede adaptarse, tendríamos la siguiente
situación:
Aula Mentor
La línea negra que se aprecia sería el elemento padre, para subsanar ésto tenemos la
propiedad:
overflow: valor;
Con las siguientes opciones:
VALOR DESCRIPCIÓN
visible Opción por defecto. El contenido no se re-
corta.
hidden El contenido oculto se recorta pero el nave-
gador no mostrará la barra de scroll, quedará
oculta.
auto El contenido oculto se recorta pero el navega-
dor no mostrará la barra de scroll a no ser que
260 sea necesario porque el hijo ocupe más del
espacio del padre.
scroll El contenido oculto se recorta pero el navega-
dor y mostrará la barra de scroll.
Inherit Toma el valor que venta por el elemento pa-
dre.
Si aplicamos el valor overflow: auto obtendríamos el siguiente resultado, donde podemos

comprobar que ha metido a sus hijos dentro, a esta opción también se le suele llamar por algu-
nos autores limpiar los float, ya que aun teniendo float fuera del flujo se han encauzado dentro
del elemento contenedor o padre.
3. Posicionamiento de los elementos.

Para indicarle al navegador o browser dónde tiene que posicionar los elementos exiten
diferentes formas:
M2. CSS3
- 3.1. Normal o estático.
- 3.2. Relativo.
- 3.3. Absoluto.
- 3.4. Fijo.
- Heredado jerárquicamente (inherit) como en la mayoría de las propiedades.
3.1. Normal o estático.
Es el valor por defecto que usa el navegador, para los elementos de bloque es colocarse
uno debajo de otro. Y para los elementos en línea, uno detrás del otro mientras los elementos
entren en el elemento padre, en caso que el siguiente elemento no entre, se bajará a la siguiente
línea.
261
Puedes visitar el ejemplo17-position-static/
3.2. Relativo.
La posición relativa se refiere a la distancia dada respecto alguna referencia del elemen-
to conjunto, top, right, bottom o left. Para ello usamos previamente la propiedad: position:
relative; .Si cogemos y decimos en el ejemplo anterior que el bloque del medio (el de color
naranja) queremos que esté a 25px de la izquierdo y 25px de la parte superior, el efecto sería el
de la imagen siguiente, nótese que el elemento inferior no se ha desplazado, se ha quedado en
la misma posición:
Aula Mentor
position: relative;
left: 25px;
top: 25px;
262
Puedes visitar el ejemplo18-position-relative/
3.3. Absoluto.
Si queremos que esté a un valor concreto del elemento padre, tenemos que usar la pro-
piedad position: absolute; y además debemos usar como en el apartado anterior las indicacio-
nes con top, right, bottom o left. En este caso el elemento se sale del flujo y dejaría su hueco
libre, lo que provocaría desplazamientos indeseados sino lo tenemos en cuenta. Si usamos las
siguientes propiedades en el bloque del medio (el de color naranja):
position: absolute;
bottom: 150 px;
right: 25px;
M2. CSS3
Puedes visitar el ejemplo19-position-absolute/
Si nos fijamos en el ejemplo anterior han pasado las siguientes cosas:
- Hemos sacado el bloque naranja de su flujo.
- Se han reordenado los elementos inferiores, subiendose hacia arriba porque ha dejado el
hueco libre el bloque naranja.
- Se ha colocado el bloque naranja a 150px de la ventana del navegador, y no del elemento

padre y a 25px del margen derecho. Si vamos cambiando el tamaño de la ventana veremos
que el elemento va recalculando su posición y se ajusta estrictamente al valor que hay.
En este tipo de posicionamiento si el elemento contenedor también tiene posicionamien-

to absoluto o relativo, el elemento se posicionará con respecto a la esquina superior izquierda
del contenedor.
3.4. Fijo.
El posicionamiento fijo nos va a servir para establecer una posición fija (inamovible) de
un elemento HTML en la Web. Para ello usamos la propiedad con el siguiente valor: position:
fixed; .Al igual que el posicionamiento absoluto, el posicionamiento fijo hace que el elemento
pierda el flujo normal del documento, y se posicionará mediante las mismas propiedades ante-
riores top, left, right y bottom.
263
Puedes visitar el ejemplo20-position-fixed/
Esta opción puede ser muy indicada para posicionar un elemento concreto en un sitio,
por ejemplo, para agregar los link de las redes sociales, o algún banner, etc. Aunque el ususario
haga scroll, este elemento o capa estará siempre visible al usuario.
Aula Mentor
3.5. Visibilidad.
Como hemos visto en los ejemplos anteriores, los elementos tienen unas características
propias definidas previamente, así por ejemplo, cuando usábamos un párrafo con la etiqueta
<p>, sabemos que tiene un valor de bloque, al igual que cuando usamos imágenes con la eti-
queta <img> son elementos en línea. Cuando necesitemos cambiar la forma de un elemento
respecto a ver como bloque o en línea, hemos de usar la siguiente propiedad:
display: valor
Los valores que pueden tomar son:
VALOR DESCRIPCIÓN
block La etiqueta se tratará como un elemento en
bloque.
Inline La etiqueta se tratará como un elemento en
línea.
none Retira al elemento del documento y la visuali-
zación de la página.
Veamos los siguientes ejemplos para comprender esta propiedad, supongamos que tene-
mos en nuestro fichero varios párrafos (elementos en bloque) y varias imágenes (elementos en
línea) y además queremos aplicar la propiedad none a la imagen que pone HTML5.
264
Si asignamos la propiedad inline a los elementos que serían por definición de bloque y
viceversa, obtendríamos el siguiente resultado:
Puedes visitar el ejemplo21-display/

M2. CSS3
Hemos obtenido el resultado que esperábamos y si vemos en modo desarrollador esta

página y pasamos el ratón por el link del elemento que hemos quitado, veremos que tampoco
aparece.
Si quisiéramos que el elemento se ocultase, no fuera visible en el navegador, pero que

siguiera ocupando el espacio original que le corresponde, podemos usar la siguiente propiedad:
visibility: valor;
Siendo los dos valores posibles, visible, cuando el elemento lo puede ver el usuario al
mostrarse en la página, o hidden, cuando queramos que el elemento permanezca oculto en la
página. Siguiendo el ejemplo anterior podríamos poner la imagen central que antes se veía con
visibility:hidden:
265
3.6. Profundidad.
Por último en posicionamiento vamos a ver un tema que seguro te has preguntado; en
el caso que tenga varios bloques y la estructura de la página lo requiera y existan unos encima
de otros, ¿cómo puedo ordenar todo esto?. Para ello usamos la siguiente propiedad:
z-index:número;
El numero ha de ser un número positivo y sólo se podrá aplicar sobre los elementos
que tiene la propiedad position como absoluta, relativa o fixed. El nombre de esta propie-
dad viene dada por “z”, por el eje z indicando la profundidad, e “index” por el valor que indica
su orden dentro del eje. Si tuvieramos varios bloques posicionados de forma relativa, y que el
index coincida con el valor de lectura del documento, tendríamos:
Aula Mentor
Si no se especifica ningún valor, el valor inherit o heredado por el navegador es auto,

es decir, iría posicionando los elementos y la profundidad según va leyendo el documento. Si
por ejemplo quisieramos que el bloque de color naranja adelantase dos posiciones, tendríamos
que aumentar el z-index del bloque naranja y disminuir el del bloque azul y el amarillo. ¡Ojo!
Ante la duda entre dos elementos con el mismo orden de profundidad, se utilizará el orden de
lectura del documento.
Puedes visitar el ejemplo23-z-indez/
4. Selectores avanzados.
Como vimos en la unidad anterior, en el apartado 5, existen unos selectores que me
permiten elegir por medio de una clasificación previa los elementos de HTML a los que quiero
hacer referencia. En concreto existían elemento de clase, id y de elemento.
266
Además de esas herramientas, existen otras que podemos usar en nuestros diseños:
1. Selector descendente.
2. Selector de hijos.
3. Selector adyacente.
4. Selector de atributos.
4.1. Selector descendente.
El selector descendente nos va a permitir aplicar reglas de estilo sobre todos aquellos
elementos que estén contenidos dentro de otro, es decir, que sean descendientes. Como había-
mos visto anteriormente se van replicando las propiedades de un descendiente a otro.
Se entiende que es descendiente de otro siempre que la etiqueta esté dentro de otra, por
ejemplo, en el siguiente ejemplo veremos el selector descendiente:
M2. CSS3
/*################################*/
/*SELECTORES DESCENDIENTE*/
/*################################*/
Div{
color: blue;
Puedes visitar el ejemplo24-selectores-avanzados/
Hemos de destacar que como hemos visto se ha aplicado la propiedad tanto a hijos,
nietos, hermanos, etc. Todo elemento que esté dentro del contenedor o padre.
4.2. Selector de hijos.
En determinadas ocasiones necesitaremos que nuestra propiedad sólo afecte a los hijos
directos y no se propague más por sus descendientes, para ello se utiliza la siguiente notación: 267
Etiqueta_padre > Etiqueta_hija
Si queremos en el ejemplo anterior, poner de un color diferente los elementos hijos de

la lista <ul>, tendremos que hacer lo siguiente:
/*################################*/
/*SELECTOR DE HIJOS*/
/*################################*/
ul>li{
color: orange;
Como podemos apreciar de una forma muy sencilla hemos seleccionado sólo los ele-
mentos hijos, independientemente de la profundida, esta propiedad solo ha afectado a los hijos
Aula Mentor
directos de <ul> que en este caso son <li>.
4.3. Selector adyacente.
El selector adyacente nos permite aplicar reglas de estilo sobre elementos que van se-
guidos en el código y que tienen el mismo padre, es decir, sobre elementos “hermanos” y están
seguidos unos del otro. Para ello usamos la siguiente notación:
Etiqueta_hermana1 + Etiqueta_hermana2 (donde se aplicará la propiedad)
/*################################*/
/*SELECTORES DESCENDIENTE*/
/*################################*/
Div{
color: blue;
}
268
Debes fijarte que se ha aplicado en los elementos nieto 1 hijo1 y nieto 1 hijo2 y que no
se ha aplicado la propiedad en el nieto 2 y 3 del Hijo 1 porque no van a continuación de las
etiquetas <li><p> ¿por qué? Porque no tiene la pareja li+p sino en ellas tendría p+p. Si tienes
dudas al respecto, veamos un ejemplo más, imaginemos que tenemos 5 párrafos, pero entre el
párrafo 4 y 5 hay una imagen, si aplicamos la siguiente propiedad p+p:
Obtendremos el siguiente resultado:
p+p{
color; blue;
4.4. Selector de atributos.
Los selectores de atributos, nos van a permitir aplicar reglas de estilo sobre elementos
HTML en función de sus atributos. De esta forma podemos incidir aún más en los elementos que
deseemos, para ello podemos usar los siguientes esquemas:
M2. CSS3
elementoHTML[ atributo = “valor del atributo”]
elementoHTML[ atributo ~= “valor contenido”]
elementoHTML[ atributo |= “valor comienza por+”-””]
[ atributo = “valor del atributo” ]
[ atributo ~= “valor contenido” ]
[ atributo |= “valor comienza por+”-”” ]
Cojamos como base un ejemplo anterior donde ya teníamos definido una propiedad de
adyacencia sobre los párrafos (p+p{color: blue;}), pero queremos afinar aún más la selección y
buscar aquellos que tenga el atributo párrafo3 y párrafo4.
p[id=”parrafo3”]{
color: orange;
p[id=”parrafo5”]{
color: red; 269
Presta atención a la potencia de este selector, ya que puede ser tan preciso como que-
ramos, además no ha interferido con los otros elementos como sucedía con los selectores adya-
centes.
En la otra notación cuando se usa ~= nos estamos refiriendo a elementos que en su

nombre o definición contengan ese valor, por ejemplo en el siguiente fichero html:
<p class=”menu superior”>SOY EL TEXTO 6</p>
<p class=”sin menu”>SOY EL TEXTO 7</p>
<p class=”otras cosas”>SOY EL TEXTO 8</p>
<p class=”menu derecho”>SOY EL TEXTO 9</p>
Si agregamos el selector de atributo de la siguiente forma:
class~=”menu”
Buscaría el atributo class, y después seleccionaría todos aquellos que su clase contenga
Aula Mentor
el nombre “menu”. Quedando de la siguiente forma:
[class~=”menu”]{
color: lime;
/* O también podemos usar: */
p[class~=”menu”]{
color: lime;
Un detalle muy importante que no debemos dejar pasar es el nombre asignado:
<p class=”menu-superior”>SOY EL TEXTO 6</p>
<p class=”sin menu”>SOY EL TEXTO 7</p>
<p class=”otras cosas”>SOY EL TEXTO 8</p>

270
<p class=”menu-derecho”>SOY EL TEXTO 9</p>
En este caso, hemos añadido un – después de nombre menu; si usamos el ejemplo an-
terior, el resultado sería muy distinto:
[class~=”menu”]{
color: lime;
Y si usaramos la otra forma de seleccionar por atributo, el atributo empieza por un nom-
bre seguido de un guión “-”, obtendríamos el siguiente resultado.
[class|=”menu”]{
color: lime;
}
M2. CSS3
Esto nos pone de manifiesto que es necesario un buen análisis previo de lo que vas
a emplear en la página web, y elegir unos nombres adecuados para posteriormente llegar a
ellos fácilmente. Existen más formas de seleccionar atributos, aunque estas son las más usuales,
si quieres ver toda la información completa puedes hacerlo en:
http://www.w3.org/TR/selectors/
4.5. Pseudo-clases.
Podemos encontrarnos ocasiones que los elementos que queremos seleccionar no están
tan ligados al atributo, descendencia, adyacencia o seleccionar todos los hijos. En determinadas
ocasiones necesitaremos ser más concretos o referirnos a la relación parental o del estado de
la propia etiqueta, dato que almacena el navegador en su caché. Podrían ser ciertos elementos
no referenciados en la página, como por ejemplo, el primer párrafo, o cómo se muestra el link
cuando ha sido visitado, etc.
La sintaxis para usar las pseudo-clases podrían ser las siguientes:
selector : Pseudo-clase { propiedades de estilo }
selector.clase : Pseudo-clase { propiedades de estilo }
4.5.1. De selección.
Existen diferentes formas de elegir los elementos del documento a las antes vistas, éstas 271
se puede ver en la siguiente tabla:
VALOR DESCRIPCIÓN
:root Elemento raíz o el elemento en el nivel más
alto. P.e en HTML5 la etiqueta <html>
:empty Corresponde a los elementos vacíos y que no
tienen hijos.
:only-child Devuelve aquellos que tienen solo un único
hijo.
:first-child Selecciona el primer elemento hijo.
:last-child Selecciona el último elemento hijo.
:nth-child(n) Selecciona el elemento enésimo o bien las pa-
labras claves even (pares) y odd (impares).
:nth-last-child(n) Selecciona el enésimo hijo a partir del último
elemento.
:only-of-type Devuelve el único elemento de este tipo.
:first-of-type El primer elemento de este tipo.
:last-of-type El último elemento de este tipo.
:nth-of-type(n) El enésimo elemento de este tipo, donde n es
un número o las palabras claves: even (pares)
y odd(impares)
:nth-last-of-type(n) El enésimo elemento de este tipo partiendo
del último elemento.
Aula Mentor
Podemos elegir etiquetas en la que dentro de su descendencia queramos escoger la pri-

mera, como puede ser por ejemplo, elegir al primer hijo, para ello usaríamos:
Pseudo-clase :first-child
Por ejemplo, pensemos que tenemos un elemento HTML concreto, una lista, donde
queremos que el primer elemento de la lista (su primer hijo) aparezca de otro color. Para ello
usaríamos:
div p:first-child{
color:blue;
Si tuvieramos un párrafo y quisieramos aplicar una propiedad concreta a la primera letra

de un párrafo, tendríamos que usar la propiedad:
Pseudo-clase :first-letter
272
div p:first-letter{
color:blue;
font-size: 200%;
O también se podría usar:
.letracapital:first-letter{
color:blue;
font-size: 200%;
Si tenemos muchas líneas y queremos resaltar la primera línea de un párrafo por el mo-
tivo que sea, también podemos seleccionar la primera línea con la propiedad:
Pseudo-clase :first-line
M2. CSS3
.primeralinea:first-line{
font-weight: bold;
font-style: italic;
color: blue;
Debes fijarte que cuando se utiliza esta psedo-clase, se aplica exclusivamente a la pri-
mera fila, por lo que si cambias el tamaño de la ventana, o dinámicamente crece el texto, el
navegador irá calculando automáticamente el texto a la primera fila en tiempo real.
4.5.2. De enlace.
Como vimos en el módulo de HTML5, en nuestros documentos podemos agregar enlaces

a páginas externas, internas, al propio documento o archivos. Cada navegador tiene una forma
concreta de representarla, y tiene además unas propiedades estándar. Normalmente cuando es
un link o enlace lo pone de color azul y subrayado, o cuando el usuario ya ha visitado el enlace
anteriormente, el navegador lo almacena en su caché y nos lo muestra también de otro color.
Ésto puede ser una ventaja en algunas circunstancias, pero existirán muchas otras que deseemos
modificar para dar otra apariencia. Las formas que vamos a ver a continuación van a ser las si- 273
guientes:
Pseudo-clase Descripción
a:link Define la apariencia de un enlace que todavía
no ha sido seleccionado o navegado por el
usuario. Lo más normal es eliminar el subra-
yado y el color.
Una primera aproximación podría ser:
a:link{
text-decoration: none;
color: black;
}
Aula Mentor
a:visited Define la apariencia de un enlace que ha sido

seleccionado o navegado por el usuario. Nor-
malmente se suele usar las mismas propieda-
des que el anterior, aunque claro está todo
depende de nuestra aplicación.
a:visited{
color: black;
}
a:active Define la apariencia de un enlace en el mo-
mento que el usuario hace click sobre él.
a:hover Define la apariencia de un enlace cuando el
274 usuario ha pasado el ratón por encima del en-
lace. Aquí usualmente sí se aplican más pro-
piedades o efectos combinados, por ejemplo
cambiar el tamaño, ponerla en negrita o cam-
biar el fondo.
a:hover{
color: black;
font-size: 125%;
font-weight: bold;
}
M2. CSS3
Partamos de un ejemplo sencillo y vayamos aplicando las propiedades anteriores.
<a href=”index.html”>Inicio</a> |
<a href=”productos.html”>Productos</a> |
<a href=”empresa.html”>Empresa</a> |
<a href=”contactar.html”>Contactar</a>
Aplicamos la pseudo-clase a:link:
a:link{
color: black;
275
}
Como hemos visto el usuario no tendría que saber qué es un enlace, a no ser que pase
el ratón por encima, además podemos aplicarle muchas más propiedades.
Normalmente siempre se hacen las declaraciones de a:link y a:visited ya que están muy
relacionadas entre sí, por ejemplo podríamos hacer las siguientes declaraciones:
a:link{
color:black;
a:visited{
Aula Mentor
color:black;
O relacionarlas directamente en la declaración:
a:link,a:visited{
color:black;
Ahora si queremos darle un énfasis al enlace cuando el usuario tenga activo el enlace,
por ejemplo ponerlo en negrita, de color blanco y ponerle un fondo a la etiqueta, podríamos
276 hacer:
a:active{
color: white;
font-weight: bold;
font-style: italic;
Si mantenemos el ratón haciendo click sobre el link, nos aparecerá el estado que tenía-
mos diseñado:
M2. CSS3
Si queremos aplicar nuestros diseños cuando el ratón pase por encima del link, por
ejemplo, que cambie el fondo y que además ponga el tamaño de letra un 150% más grande
tendríamos que hacer:
a:hover{
font-size: 150%;
font-weight: bold;
background-color: lime;
Y tal y como hemos definido, si hacemos click sobre el enlace, activamos a:active, vería-
mos que nos mantiene el tamaño de letra ya que la propiedad superior sólo nos difiere en que
277
es cursiva y el fondo de color azul:
Puedes visitar el ejemplo26-visited-hover-link/index.html
Como podemos ver, es muy fácil aplicar varias propiedades o efectos cuando pasemos
el ratón por encima del link o el enlace, se podría usar como hemos visto aquí en un menú o
en cualquier otro tipo de enlace que tenga nuestra aplicación web.
Debemos tener presente que estas pseudo-clases referidas a los enlaces, tienen un orden
de defición exacto, ya que tiene algunas vinculaciones sobre las propiedades, sino obtendríamos
efectos no controlados, por tanto el orden correcto de definición:
- a:link
- a:visited
- a:hover
- a:active
Aula Mentor
4.5.3. Hover, active y focus.
Las pseudo-clases que hemos visto anteriormente, (hover, active) las podemos aplicar no
solo a los elementos de tipo enlace, existirán etiquetas que podamos crearle sus efectos y de-
pende de la etiqueta tendrá sentido unas mas que otras, como por ejemplo puede ser un botón
o un propio div. Pero además de eso tenemos otra propiedad añadida a las anteriores que es:
EtiquetaHTML : hover
EtiquetaHTML : active
EtiquetaHTML : focus
Que cambiará las propiedades de la etiqueta HTML cuando esta tenga el foco del nave-
gador, por ejemplo, en un formulario, cuando esté el foco en un campo de texto.
Veamos el siguiente código html:
<form>
<label>Campo de texto SIN control del focus</label>
<input type=”text” name=”campo1” />

278
<br>
<label>Campo de texto <span class=”pasadaraton”>CON</span> control del focus</label>
<input type=”text” name=”campo2” class=”confocus”/>
<br>
<button type=”submit” class=”miclick”>Enviar Formulario</button>
</form>
Y respecto al CSS:
.confocus:focus{
color:blue;
M2. CSS3
.miclick:active{
color:lime;
font-size: 125%;
.pasadaraton:hover{
background-color: lime; 279
color:blue;
font-size: 125%;
Me he creado varias clases, aunque se podía aplicar a un elemento HTML o ID., etc. Le
he asignado varias propiedades dependiendo de cuál es la acción del usuario y seleccionado
algunos elementos del código. Así tendríamos los siguientes efectos, aunque debemos recordar
que depende del navegador éstos puede diferir o incluso no funcionar si es muy antiguo:
Aula Mentor
ORIGINAL
FOCUS en el primer campo de texto (sin propieda :focus)
FOCUS en el campo con la propiedad :focus
280
Al pasar el raton por el texto CON, con la propiedad :hover
Al pulsar en el botón, con la propiedad :active
Puedes visitar el Ejemplo27-hover-active-focus/
Como puedes ver, estas propiedades dan mucho poder al diseñador web para crear
efectos con la interacción del usuario. Ahora si recuerdas cuando navegas por internet en alguna
web y pasas el ratón por algunas zonas concretas, aparecen sin haber realizado nada un banner
con publicidad u otra página web emergente, éstas se activan con estos métodos.
M2. CSS3
5. Compatibilidad con los navegadores HTML5 y CSS3.

Como hemos visto anteriormente existen muchos efectos que dependemos mucho del
navegador, tanto propiedades como métodos definidos en HTML5. Existe una herramienta que
puede ayudar a solventar en la mayoría de los casos estas diferencias.
Para ello podemos nos dirigirnos a la web:
http://modernizr.com/
Nos vamos a DOWNLOAD y selecionamos qué elementos queremos que soporte con el
código.
281
Hacemos click en las opciones que queremos que nuestro código HTML5 sea compati-
ble y después pulsamos en GENERATE!. Posteriormente en DOWNLOAD Custom Build.
Aula Mentor
Ésto nos descargará un archivo JavaScript de nombre similar a modernizr-xxxx.js el

cual vamos a copiar dentro de nuestra carpeta del proyecto web js. y le vamos a cambiar el
nombre, para facilitar la lectura y estructura de la web, por compatibilidad.js. En la mayoría
de los casos tendrá éxito, todo depende de la versión del navegador, según ésta tendrá más o
menos éxito.
Posteriormente en nuestro proyecto, en cada página que tengamos debemos añadir den-
tro del <head> </head> el enlace al archivo que hemos creado, en nuestro caso:
<head>
<title>COMPATIBILIDAD CON NAVEGADORES</title>
<script src=”js/compatibilidad.js”></script>
282 </head>
6. Ejemplos prácticos.
Vamos a ver varios ejemplos y opciones complejas para que podamos integrar nuestras
páginas web creadas con HTML5 con CSS3. Realmente ya tendrías la mayoría de los elementos
y conocimientos para poder realizar diseños por ti mismo, pero creo que es conveniente ver
algunos ejemplo completos para afianzar aún más los conceptos. En los recursos del curso se
irán añadiendo cada vez más ejemplos resueltos además de los resueltos aquí. Te recomiendo
encarecidamente que intentes resolverlos por tu cuenta antes de mirar la solución, así te au-
toexaminarás para saber si has comprendido los contenidos.
6.1. Posicionamiento de elementos.
Una empresa nos pide un diseño concreto en el que van a estructurar sus productos
según unos parámetros, nos pasan su código HTML actual:
<body>
<div id=”cabecera”>
<div id=”logo”></div>
M2. CSS3
</div>
<div id=”contenido”>
<div id=”subcontenido”>
<div id=”subencabezado”>
<div class=”columna”></div>
</div>
</div>
283
</div>
<div id=”redes”></div>
<div id=”pie”></div>
</article>
</section>
</body>
Aula Mentor
Realmente este código sería más común de versiones anteriores de HTML, ya que HTML5
nos ofrece otras características, podríamos actualizárselo a HTML5 usando artículos, secciones,
pies y navegación. Te animo que una vez completes este ejercicio, actualices también el código
HTML5, en los recursos hay una versión pero por ahora, nos centraremos sólo en el diseño. Para
ello, nos han proporcionado el siguiente boceto, indicándonos cómo quieren la estructura de la
web:
Puedes visitar el ejemplo29-extra1/

284
Debes intentar respetar los espacios y posicionamientos, algunos serán relativos, otros
absolutos, ahí es donde entra tu faceta como diseñador/a. Puedes usar otra combinación de
colores, aunque si debes respetar la unidad de todos ellos, es decir, las columnas que están en
amarillo indicando las secciones las puedes poner de otro color, pero aplicándole el mismo a
todas y el tamaño debe ser lo más similar posible.
6.2. Menú de navegación.
6.2.1. Versión 1.
La misma empresa anterior, después del éxito que ha tenido nuestro trabajo, decide que
le hagamos un menú en la parte superior, éste ha de ser de texto plano y que se cargue a través
de una lista que nos pasen ellos, por ahora, nos han dado los siguientes datos:
<div id=”barraHorizontal”>
<ul class=”menuHorizontal”>
<li> RECIBIR MATERIAL </a></li>
<li> BUSCAR MATERIAL </li>
<li> LISTAR MATERIAL </li>

M2. CSS3
<li> UBICAR/TRASPASAR MATERIAL </li>
</ul>
</div>
Y visualmente quiere que tenga un aspecto parecido al de la imagen, cambia de color al

pasar el ratón por encima, como se puede ver en Listar Material:
6.2.2. Versión 2.
Otra empresa diferente no está contenta con el menú que tiene y nos pide que realice-
mos un menú lateral desplegable para mostrar sus categorías, los datos que nos pasan ahora son
los siguientes:
<ul id=”menu”>
<li>INICIO</li>
285
<li>Sección 1
<ul class=”submenu”>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
<li>Elemento 4</li>
</ul>
</li>
<li>Sección 2
<li>Elemento 1</li>
<li>Elemento 2</li>
Aula Mentor
<li>Elemento 3</li>
<li>Elemento 4</li>
</ul>
</li>
<li>Seccion 3
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
<li>Elemento 4</li>
</ul>
</li>
286 <li>Seccion 4
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
<li>Elemento 4</li>
</ul>
</li>
</ul>
Y queremos realizar un menú que tenga varias secciones y varios elementos dentro de
esas secciones, además conforme vamos pasando el ratón nos va apareciendo otro color dife-
rente al de la lista:
M2. CSS3
Hemos de destacar las siguientes propiedades que hemos añadido:
cursor:pointer;
Para cambiar el cursor cuando pase por encima y que no aparezca la flecha por defecto,
podemos consultar el siguiente enlace puesto que existen muchos más estilos:
http://www.w3.org/TR/SVG/interact.html#CursorProperty
Y list-style-type: none; para evitar que salte el icono indicando que es una lista como vimos
anteriormente.
6.2.3. Versión 3.
La misma empresa que nos pidió el diseño anterior, después de varios meses, deciden
cambiar nuevamente la web, y usando la misma estructura, quieren dar la impresión de que han 287
creado una web nueva. Para ello, quieren en vez de usar un menú vertical desplegable, desean
uno horizontal desplegable, que tenga una apariencia similar a ésta:
Aquí tenemos varias secciones y elementos, pero cuando ejecutemos el menú veremos
una cosa muy distinta que todavía no hemos visto, ¡tienen animaciones y efectos! Bien es la parte
más interesante que nos ha traído CSS3 que veremos en el siguiente apartado, antes para hacer
este tipo de menú debíamos usar flash.
Los ejemplos que hemos visto de menú, serían candidatos a tenerlos en tu snippet pro-
pio o hacerte tus propias plantillas estándar y cuando necesites hacer tu web, crear la estructura
rápidamente y posteriormente sólo tendrías que modificar los nombres de las secciones y los
elementos.
También he de decir que existen muchas web donde puedes ver y descargarte menús de
todo tipo: Apple, Explorador de Windows, animados, lisos, con efectos, sin efectos, horizontales,
verticales, inferiores, etc. No debes pensar que entonces todo lo visto no es necesario, ya que la
mayoría de las veces tendrás que adaptar, modificar y entender que estás realizando para sacarle
todo el partido a tu web.
Aula Mentor
7. Propiedades avanzadas de CSS3.
7.1. Degradados de color.
Un recurso muy usado y con efectos muy importantes en las páginas web son los degra-
dados de color. Tendríamos por tanto dos tipos de degradados: lineales o circulares:
Degradados lineales. Para que los navegadores que utilicen el prefijo –webkit se defi-
nen según la propiedad:
linear. Degradado lineal
origen. Punto inicial del degradado (top left)
background: -webkit-gradient fin. Punto final del degradado (bottom right)
from(color). Color de inicio del degradado
to(color). Color final del degradado
Para el resto de navegadores

288
inicio. Punto inicial del degradado (top left)
background: -linear-gradient color inicio. Color de inicio del degradado
color final. Color final del degradado
Para soportar el máximo de navegadores debemos usar además los siguientes prefijos a
éste:
Prefijo Descripción
-ms- Internet Explorer 10
-moz- Firefox 3.6 y posteriores 16+ no necesita pre-
fijo
-webkit- Chorme 10+
-webkit- Safari 4
-o- Opera 11.1 y a partir de 12.1 sin prefijo
-webkit- iOS Safari 3.2+
-webkit- Android Browser 2.1+
M2. CSS3
Esta tabla no debemos perderla de vista ya que cuando queramos aplicar un diseño con-
creto a un navegador completo deberemos de usar esta clasificación. Además esta clasificación
también se hará para otras propiedades, como por ejemplo los sombreados.
Las versiones antiguas de Internet Explorer no implementa la propiedad de estilo gra-

dient. Se basa en un filtro propietario de Microsoft, por la que deberemos usar:
/* IE 6 y 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ff000000’, endColorstr=’#77ff0000’,

gradientType=’1’);
/* IE 8 y 9 */
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ff000000’,
endColorstr=’#77ff0000’, gradientType=’1’)”;
Un ejemplo típico donde aplicar los degradados sería para crear un efecto botón o efecto
de profundidad, veamos varios ejemplos de degradados donde vamos a intentar dar soporte a
la mayoría de navegadores.
...
289
<div class=”degradado1”></div>
...
Y en el css tenemos:
.degradado1 {
width: 300px; height: 300px;
border: 1px solid black;

Aula Mentor
margin-top: 6px;
background:-webkit-gradient(linear,left top,left bottom,from(#1d1f4c), to(#dee3f3));
background:-webkit-linear-gradient(top, #1d1f4c, #dee3f3);
background:-moz-linear-gradient(top, #1d1f4c, #dee3f3);
background:-ms-linear-gradient(top, #1d1f4c, #dee3f3);
background:-o-linear-gradient(top, #1d1f4c, #dee3f3);
background:linear-gradient(top, #1d1f4c, #dee3f3)
290
Si queremos usarlo el efecto para simular un botón sólo debemos cambiar el tamaño de
nuestra capa y dejar todo lo demás igual.
.degradado2 {
……
Ahora le vamos a aplicar sombreados y los bordes redondeados:
.degradado3 {
display: block;
height: 300px;
width: 300px;
padding-top: 6px;
M2. CSS3
margin-bottom: 12px;
margin-top: 12px;
text-align: center;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
box-shadow: 1px 3px 5px rgba(0,0,0,0.6);
-moz-box-shadow: 1px 3px 5px rgba(0,0,0,0.6);
-webkit-box-shadow: 1px 3px 5px rgba(0,0,0,0.6);
background:-webkit-gradient(linear,left top,left bottom, from(#1d1f4c), to(#dee3f3));
background:-webkit-linear-gradient(top, #1d1f4c, #dee3f3);
background:-moz-linear-gradient(top, #1d1f4c, #dee3f3); 291
background:-ms-linear-gradient(top, #1d1f4c, #dee3f3);
background:-o-linear-gradient(top, #1d1f4c, #dee3f3);
background:linear-gradient(top, #1d1f4c, #dee3f3)
Sólo con cambiarle el tamaño simularíamos un botón muy llamativo:

Aula Mentor
.degradado4 {
display: block;
height: 25px;
width: 300px;
……
Degradados circulares. En este caso el degradado tendrá forma circular y la siguiente

configuración:
inicio. Punto inicial del degradado.
forma. Forma circular (circle) o elíptica (ellipse).
background: -radial-gradient color inicio. Color de inicio del degradado
color final. Color final del degradado
292
Ahora apliquemos un degradado circular sin sombreado:
.degradado5 {
background: -moz-radial-gradient(top left, circle, #1d1f4c, #dee3f3);
background: -webkit-radial-gradient(top left, circle, #1d1f4c, #dee3f3);
background: -ms-radial-gradient(top left, circle, #1d1f4c, #dee3f3);
background: -o-radial-gradient(top left, circle, #1d1f4c, #dee3f3);
background: radial-gradient(top left, circle, #1d1f4c, #dee3f3);
}
M2. CSS3
Ahora apliquemos el mismo degradado circular, pero con un tamaño inferior para simu-
lar un botón y con sombreado:
.degradado6 {
height: 25px;
width: 300px;
border-radius: 4px;
box-shadow: 1px 3px 5px rgba(0,0,0,0.6); 293
….
Un ejemplo de degradado multicolor con sombreado y bordes redondeados:
.degradado7 {
display: block;
height: 300px;
width: 300px;
margin-top: 12px;
Aula Mentor
background:-webkit-linear-gradient(left, tomato, cyan, lime);
background:-moz-linear-gradient(left, tomato, cyan, lime);
background:-ms-linear-gradient(left, tomato, cyan, lime);
background:-o-linear-gradient(left, tomato, cyan, lime);
background: linear-gradient(left, tomato, cyan, lime);
294
Y por último otro degradado donde hemos agregado una imagen de fondo para aún
dar más soporte a los navegadores, el truco consiste en añadir una imagen de fondo al inicio
de la regla CSS para que todos aquellos navegadores que no soporten el degradado tengan una
imagen, para ello se utiliza una con el gradiente realizado y que se repita, esta opción es menos
eficiente ya que tendría que cargar una imagen y repetirla por todo el lienzo, pero se gana en
compatibilidad:
.degradado8{
height: 300px;
width: 300px;
margin-top: 12px;

M2. CSS3
background: black url(img/imagen.png) repeat-x;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(white), to(black));
background: -webkit-linear-gradient(top, black, white);
background: -moz-linear-gradient(top, black, white);
background: -o-linear-background(top, black, white);
background: -ms-linear-background(top, black, white);
background: linear-background(top, black, white);
295
Y la imagen que voy a usar para que en caso que el navegador no lo soporte es la si-
guiente:
Si has programado antes HTML seguro que has usado este truco para poner un fondo
de pantalla en modo mosaico y repetido por toda el fondo, reduciendo el archivo de fondo de
la página. Éste se repetirá por el eje x, de ahí la propiedad:
background: black url(img/imagen.png) repeat-x;

Aula Mentor
7.2. Transformaciones.
Uno de los puntos que ha incorporado CSS3 es las transformaciones sobre los elementos,
esta propiedad permite aplicar rotaciones, cambios de escala, zoom o deformaciones oblicuas.
Para ello tenemos que usar la propiedad:
transform:
Y podremos usar las siguientes transformaciones a los elementos:
- Rotaciones.
- Escalas.
- Deformación oblicua.
- Desplazamiento.
7.2.1. Rotaciones.
Para rotar un elemento usamos el parámetro rotate(ángulo) en grados (deg), radianes

(rad) o gradientes (grad). Siempre que el valor sea positivo la rotación será en el sentido de las
agujas del reloj y por el contrario, los valores negativos lo hacen en sentido inverso. Si se define
296 sólo un valor, el navegador entenderá que queremos que se aplique a los ejes X e Y. Si se espe-
cifican dos valores, el primero al eje de la X y el segundo al de la Y.
Veamos un ejemplo, aplicándolo por ejemplo a un texto, en este caso indicando que el
artículo en cuestión está vendido, sin entrar que ya vimos cómo usar tipos de fuentes y propie-
dades para dar la sensación de:
Aplicamos rotación, color rojo del texto, borde y fondo amarillo en el CSS
Y el código correspondiente sería en el archivo HTML:

M2. CSS3
<section>
<article class=”articulo”>
<p class=”vendido”>VENDIDO</p>
</article>
</section>
Y en el archivo CSS o en la parte de diseño tendríamos:
.articulo{
width: 300px;
height: 300px;
.vendido{
297
width: 50%;
color: red;
font-size: 30px;
border: 3px solid red;
background-color: yellow;
text-align: center;
-moz-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
Aula Mentor
7.2.2. Escalado.
En algunas ocasiones vamos a querer escalar algún elemento HTML, tenemos que tener
en cuenta que el escalado puede ser positivo (realizan un zoomIN acercándose) o negativo
(realizan un ZoomOut). Si se define sólo un valor se aplica a los ejes X e Y por igual, si se espe-
cifican dando los dos datos, corresponderán al eje X e Y. Cuando se hace un escalado negativo
se realiza una reflexión sobre el elemento, el valor con escala 1:1 sería scale(1) entre ese valor
y el 0 iría disminuyendo y todos los valores menores que cero harían reflexión progresiva sobre
el elemento.
Hagamos transformaciones al ejemplo anterior:
/*ESCALA*/
-moz-transform: scale(2);
-webkit-transform: scale(2);
-o-transform: scale(2);
transform: scale(2);
/*ROTACIONES*/
298
-moz-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
¡OJO! Este código anterior estaría mal porque si hiciéramos eso, dependiendo del nave-
gador sólo nos haría la última transformación, en este caso la rotación, y si estuviera ésta antes
que el escalado, sólo nos haría el escalado, ¿qué solución hay? Declararlo conjuntamente:
Sin aplicar escala. Con scale(2) Con scale(0.5)

M2. CSS3
7.2.3. Deformación oblicua.
Para las deformaciones oblicuas tenemos la siguiente propiedad:
skew(ángulo)
Donde el ángulo, al igual que en las otras propiedades, se puede expresar en grados
(deg), radianes (rad) o gradientes (grad), además de valores positivos realizar la transformación
en el sentido de las agujas del reloj y los negativos en sentido contrario. Cuando se aplica sólo
un valor se aplica a los ejes X e Y, y si se define con dos valores el navegador entenderá que el
primer valor es el X y el segundo el Y.
Veamos un ejemplo realizando una deformación oblicua al ejercicio anterior, en este

caso se lo vamos aplicar a nuestro artículo que teníamos definido de 300x300px.
transform: skew(-30deg) transform: skew(-30deg,10deg) 299
7.2.4. Desplazamiento.
El desplazamiento de los elementos se usa a través de la propiedad:
translate(logintud);
Donde la longitud puede estar definida en px, %, em, in, mm o cm. Los desplazamientos
serán hacia la derecha si se usan valores positivos en el eje de las X, y hacia la izquierda en caso
contrario. Para el eje de la Y, los valores positivos efectúan un desplazamiento hacia arriba y los
negativos hacia abajo. Al igual que pasa con las otras propiedades; si se aplica solo un valor, éste
se hará efectivo sobre ambos ejes a la vez, y cuando se especifique dos valores, se entiende que
el primer valor es el de la X y el segundo el de la Y.
Veamos varios ejemplos:

Aula Mentor
translate(150px,0) translate(150px,150px) translate(0,150px)
Puedes visitar el ejemplo34-transformaciones/
7.2.5. Transiciones.
JavaScript podía hacer todo tipo de transiciones, pero ahora con la nueva definición de
CSS3 podemos aplicarlas directamente desde el diseño. Si nunca has visto transiciones, debes
saber que hay unas propiedades básicas que necesitamos dominar para hacer los efectos tal y
como queremos, estas son:
transition-property
Definimos la propiedad que vamos a animar, por ejemplo si vamos a cambiar el alto,
el ancho, el color, etc. Se pueden definir varias propiedades separadas por comas, indicando a
cuales van a ser aplicadas, sino se designa ninguna, por defecto (clave all) se usa todas las pro-
piedades asignables al elemento.
transition-duration
Tiempo en segundos (s) o en milisegundos (ms) que va a durar la transición.
transition-timing-function
300 Define la función de transición que se va a utilizar, existen varias:
- ease: rápida al inicio y más lenta al final.
- linear: rapidez constante en toda transición. En (s) o (ms).
- ease-in: lento al inicio y acelerado al final.
- ease-out: rápida al inicio y desacelerado al final.
- ease-in-out: tanto al inicio como al final más lento.
transition-delay
Corresponde al retardo (o el avance) del inicio de la transición. En (s) o (ms).
También se puede usar la propiedad de forma abreviada como hemos visto a lo largo del
curso con otras propiedades:
transition: font-size 3s ease, color 2s linear;
Ejemplo.
Veamos un ejemplo de transiciones aplicado a un menú vertical, conforme el usuario

vaya pasando el ratón por encima de cada ítem se irá abriendo en forma de acordeón, y cuando
aparezcan las opciones, al pasar por alguna de ella, las vamos a desplazar hacia la derecha y
poner negrita:
M2. CSS3
Inicio Hover sobre Item1 Hover sobre Subitem 2
Puedes visitar el ejemplo35-transiciones/
Para realizar este ejemplo, podríamos tener un fichero HTML parecido a ésto:

<nav >
<div class=”menu_vertical”>
<ul>
<li>
<h3>Item 1</h3>
<div> 301
<ul class=”submenu_vertical”>
<li><a href=”#”>Subitem 1</a></li>
</ul>
</div>
</li>
<li>
<h3>Item 2</h3>
<div>

Aula Mentor
</ul>
</div>
</li>
<li>
<h3>Item 3</h3>
<div>
302 </ul>
</div>
</li>
<li>
<h3>Item 4</h3>
<div>

M2. CSS3
</ul>
</div>
</li>
</ul>
</div>
</nav>

En el fichero CSS3 tenemos que tener las propiedades y los selectores correspondientes 303
a la clase menu_vertical y a la clase submenu_vertical.
.menu_vertical>ul {
margin: 0;
padding: 0;
list-style:none;
width: 280px;}
.menu_vertical>ul>li {
display:block;
overflow: hidden;
margin: 0;
padding: 0;
Aula Mentor
list-style:none;
height:30px;
width: 280px;
background-color: #196ded;
border-radius: 8px;
transition: height 0.3s ease-in-out;
-moz-transition: height 0.3s ease-in-out;
-webkit-transition: height 0.3s ease-in-out;
-o-transition: height 0.3s ease-in-out;}
.menu_vertical>ul>li>h3 {
304 display:block;
margin: 0;
padding:10px;
height:19px;
border-top:#f0f0f0 1px solid;
font-family: Arial, Helvetica, sans-serif;
font-size: 80%;
color: #fff;
background: #4486f7; }
.menu_vertical>ul>li>div {
M2. CSS3
margin:0;
overflow: auto;
padding:10px;
height:150px;}
.menu_vertical>ul>li:hover { height: 150px;}
.menu_vertical:hover>ul>li:hover>h3 {
color:#fff;
background: #196ded;
font-size: 80%;}
.menu_vertical>ul>li>h3:hover { cursor:pointer;} 305
.submenu_vertical li {
padding:6px;
list-style:none;
color:black;
cursor:pointer;}
.submenu_vertical li:hover {
list-style:none;
color:#fff;
Aula Mentor
font-weight: bold;
cursor:pointer;
font-size: 22px;
margin-left: 45%;
transition: margin-left 0.25s ease-in;
-moz-transition: margin-left 0.25s ease-in;
-webkit-transition: margin-left 0.25s ease-in;
-o-transition: margin-left 0.25s ease-in;}
.submenu_vertical a {
color:#fff;
text-decoration: none;}
306 ¡Ojo! Debes prestar atención a la definición de las transformaciones, ya que en muchas
ocasiones puedes tener efectos no esperados cuando haces combinaciones de ellas, por ejemplo
prueba el siguiente efecto:
translate(150px, 150px) rotate(-45deg);
Y este otro cambiando el orden:
rotate(-45deg) translate(150px, 150px);
¿Qué hay diferente? Depende de la transformación tendremos que guardar un orden para
que sea correcta y se produzca.
Puede ver muchas más transformaciones y visualizar cómo quedarían en la siguiente

web:
http://www.westciv.com/tools/transforms/
También no debes pasar por alto las definiciones que hemos realizado en el CSS, llegan-
do a los elementos exactos que nosotros queremos, como vimos en la sección de selección de
los selectores:
.menu_vertical>ul>li>h3:hover
Estaríamos refiriéndonos en este caso, leyendo de derecha a izquierda:

M2. CSS3
- Voy aplicar las siguientes propiedades hagan :hover sobre el elemento siguiente.
- Título <h3> que sea descendiente de un elemento de lista <li>.
- Que a su vez sea descendiente de un elemento de lista <ul>.
- Y que pertenezca a la clase .menu_vertical.
Con esa definición en el CSS nos estamos refiriendo exactamente a estos elementos de-
finidos en el html en el mismo orden, cuando haga :hover sobre:

<div class=”menu_vertical”>
<ul>
<li>
<h3>Item 1</h3>
Si por ejemplo, cambiáramos cualquier etiqueta <h3> por <h1> o el orden de los ele-
mentos en esa definición no nos estaríamos refiriendo al mismo caso, y obtendríamos un resul-
tado totalmente diferente.
8. Resumen. 307
- Las hojas de estilo las definimos a través de propiedades. Estas propiedades se pueden referir
a varias transformaciones o cambios; tamaño tanto en anchura y altura, colores, márgenes,
bordes y rellenos.
- Unas de las propiedades a las que debemos darle importancia en nuestra aplicación web son
los textos. Pudiendo modificar el tipo de letra, tamaño, estilo, grosor, línea de decoración
(subrayado), indentación, alineación y espaciados.
- Las propiedades se pueden definir de una en una o conjuntamente en una notación corta. A
ésta se le llama ShortHand y si la usamos en todo el archivo nos podremos ahorrar un gran
número de líneas.
- Los elementos en la aplicación web se tratan como bloques o cajas que se van uniendo entre
sí hasta que forman la web que ve el usuario. Estas cajas según del tipo que sea tendrán un
comportamiento predefinido. Con las propiedades float, clear y overflow podemos mane-
jar orden de colocación de las mismas.
- Existen unos selectores distintos de los de elemento, id o clase. Estos selectores avanzados
juegan más con la semántica y posición de los elementos definidos en la web. Por tanto ten-
dremos selectores de elementos descendientes, de hijas, adyacentes y de atributos.
- Cuando queramos afinar aun más la selección de elementos, podemos fijarnos en su posi-
ción parental o del estado de la propia etiqueta. Se llaman pseudo-clases y podríamos definir
con ellas: :opcion, a:opcion, etiqueta:hover, etiqueta:active o etiqueta:focus.
Aula Mentor
- Debido al número elevado de navegadores y versiones de los mismos, a veces se emplea

mucho tiempo en realizar una página web compatible con el mayor número. Para evitar eso
se puede solicitar ayuda a través de una web que nos generan código compatible con las
propiedades que hemos generado, es el caso de http://modernizr.com/
- Además de las propiedades básicas, con CSS3 se pueden realizar desde degradados de color
(lineales, circulares) y transformaciones de los elementos (rotaciones, escalado, deformacio-
nes oblicuas, desplazamientos y transiciones).
308
Módulo 3. JQUERY.
Unidad 6. Introducción e historia a JQUERY.

Unidad 7. Formularios, CSS3, AJAX y efectos.
Unidad 8. JQUERY UI y plugins.
Unidad 6: Introducción e historia a Jquery
1. Introducción.
Con los conocimientos de los módulos anteriores podríamos realizar nuestras aplicacio-
nes web, sabríamos usar los elementos HTML5 y le aplicaríamos un diseño concreto a nuestra
web, usando CSS3. Pero en determinadas ocasiones necesitamos realizar un procesamiento aún
más avanzado de las etiquetas de HTML y la aplicación web en general.
Como hemos podido comprobar en determinadas circunstancias hemos usado un len-

guaje llamado JavaScript; el primer y más sencillo script que usamos fue abrir una ventana al
310
pulsar un botón, si recuerdas era éste:
</script>
Con JavaScript, suplíamos la interacción con el usuario gracias a que podemos procesar
mucha información en el navegador del cliente, para ello teníamos el DOM (Document Object
Model) que trabaja la página web como un conjunto de objetos (etiquetas) que se iban selec-
cionando y modificando. El problema que existía con este modelo, era que JavaScript no podía
interactuar con el servidor directamente, sino que en determinadas ocasiones teníamos que
mandar una petición al servidor, esperar que el servidor nos devuelva una respuesta y mostrar
los datos, por ejemplo para saber si un usuario y contraseña son correctos en el sistema. Debido
a que este tráfico generado no era muy eficiente, ya que el usuario que se ha logueado tiene
que cargar toda la página entera (con las imágenes, textos, etc), ¿qué se hacía? Se empezó a usar
AJAX (Asynchronous JavaScript and XML), que precisamente nos permitía hacer eso entre otras
muchas cosas.
Posteriormente a JavaScript y a AJAX nació jQuery, creado por John Resig, y el se centró
en la interacción entre el DOM, JavaScript, AJAX, HTML y CSS. Para ello creo un framework libre
M3. JQUERY
y Open Source.
Muchas de las empresas de informática más importantes reconocen la calidad y utilidad

de este framework, desde Google a Microsoft están incorporándolo sino a sus proyectos, sopor-
tando sus versiones y agregándolos a sus entornos de desarrollo.
2. JavaScript y jQuery.
JavaScript accedía a los elementos del DOM para interactuar con ellos, si teníamos la
siguiente etiqueta:
<div id=”deporte” name=”mideporte”>…..</div>
Si queríamos acceder podíamos acceder a ella usando:
getElementById:
Cogeríamos el elemento con el id buscado, p.e. id=”deporte”.
getElementByName:
Cogeríamos el elemento con el name buscado, p.e. name=”mideporte”.
getElementByTagName.
311
Cogeríamos el elemento con el nombre buscado, p.e. tag=”div”.
Como supongo habrás supuesto, depende del navegador puede ser que tenga una es-
tructura concreta del DOM, ya que cada browser ha intentado sacar novedades y modificacio-
nes, pero todos los navegadores deben respetar este diseño de DOM:
¿Qué quiere decir este esquema? Este esquema es la representación de la organización

del documento HTML según unas jerarquías, etiquetas, atributos y propiedades concretas. Como
podemos ver, la etiqueta principal sería Document, y a partir de ahí ya iríamos accediendo a
cualquier elemento, seleccionándolo por etiqueta, nombre, etc.
Puedes ver la definición del DOM por ejemplo de Mozilla Firefox
https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction
El problema surge cuando el diseñador quiere acceder mediante a JavaScript a los atri-
butos y otras propiedades de estilo, acción que con jQuery se puede acceder de una forma muy
sencilla a todo usando el selector correcto.
Aula Mentor
jQuery sería una versión avanzada para tratar las páginas web, usando como lenguaje
JavaScript, haciendo más dinámica la interacción con el documento, que además, gracias a todo
el desarrollo que hay detrás cada vez más jQuery se está volviendo más compatible con el resto
de navegadores.
3. Introducción a la programación en JavaScript.

Como hemos comentado anteriormente jQuery usa como lenguaje JavaScript, por lo que
necesitamos saber programar JavaScript, para poder programar con jQuery, ya que si no tene-
mos una base en JavaScript, no vamos a sacarle el rendimiento que puede dar jQuery.
3.1. Definición.
Para ello vamos a explicar de forma resumida y simplificada la programación de JavaS-

cript, empezando con la declaración en nuestros documentos HTML, se pueden hacer directa-
mente en el propio documento dentro de las etiquetas <script></script>.
<head>
….
….
312
// Código JavaScript
</script>
</head>
O también podemos hacer igual que hacíamos con nuestros archivos CSS y enlazarlos
(“linkarlos”) a un archivo externo donde estén los script de JavaScript, una buena forma sería
crearnos una carpeta llamada js y agregar en el interior nuestros script. Posteriormente debemos
recordar que debemos llamarlos desde el <head></head> de nuestro documento, por ejemplo
si el archivo que contiene nuestro script se llama miarchivo.js y está alojado dentro de la carpeta
js podíamos crear el siguiente enlace:
<head>
….
….
<script type=”text/javascript” src=”js/miarchivo.js”></script>
</head>
M3. JQUERY
3.2. Variables.
Cuando estamos programando vamos a necesitar poder definir variables, en ellas vamos
a definir diferentes formatos: un valor numérico entero (1, 2,3…) un valor numérico decimal o
float (1.2, 3.4, 5.5...etc), un valor de texto (“texto y palabras…”), un valor booleano (verdadero
o falso, true o false), otras variables, etc.
Para definir una variable en JavaScript no es necesario definir el tipo, ya que la misma
variable puede tomar en un momento dado del programa un valor numérico, otro de texto o
nulo. Las definiciones de variables se hacen así:
var nombre_variable = ‘valor’
Ejemplos:
var miVariable1 = 34;
var miVariable2 = “Hola Mundo”;
var miVariable4 = miVariable1;
…etc.
Además, estas variables tendrán un nombre único, el cual debemos definir intentando
facilitar la comprensión del código. Por ejemplo si me creo una función que cada vez que el 313
usuario haga click en el ratón me salte un contador, y éste va incrementando en uno en cada
interacción, lo más normal sería llamar a esa variable declarada:
var contador = 1;
Debemos tener en cuenta que en JavaScript se distinguen entre mayúsculas y minúsculas

(case-sensitive), por tanto la variable contador es distinta de la variable Contador y distinta de la
variable ConTaDor.
Cuando estamos usando operaciones aritméticas, debemos tener cuidado y respetar el

orden de los operadores y los paréntesis:
Es decir, obtendremos resultados distintos en los siguientes ejemplos:
var a = 2;
var b = 5;
var c = 7;
var operacion1 = a + b * c;
var operacion2 = (a + b) * c;
var operacion3 = a + (b * c);

Aula Mentor
3.3. Funciones.
Las funciones o function van a ser bloques de código que van a realizar alguna acción
y una vez finalice puede devolver un resultado o simplemente ejecutarse. Si recordamos en el
ejercicio 3 de la unidad 2 abríamos una ventana usando el siguiente código:
</script>
En este caso la función muestraVentana() no tiene ningún parámetro de entrada ni de-

vuelve ningún valor, pero podríamos tener otro tipo de funciones, por ejemplo queremos crear-
314 nos una función que reciba dos parámetros a y b y nos devuelva un valor resultado, la suma de
a+b.
function suma(valorA, valorB) {
var miSuma = valorA + valorB;
return miSuma;
</script>
Las funciones en JavaScript también se pueden definir directamente en la creación de

una variable, por ejemplo, podíamos hacer siguiendo con el ejemplo anterior lo siguiente:
M3. JQUERY
var resultadoSuma = function suma(valorA, valorB) {
var miSuma = valorA + valorB;
return miSuma;
Si recordamos en el modo Depurador o avanzado de los navegadores (F12) puedes ver

una pestaña que pone console, si quisiéramos mostrar mensajes por ahí podríamos hacerlo
usando el siguiente comando:
console.log(resultadoSuma(5,4));
Y aparecerá en él el valor 9. De esta forma podemos depurar nuestro programa, pero

también podemos usar ventanas emergentes, para el fujo del programa, o hacer una depuración
con el propio navegador.
3.4. Operadores básicos. 315
En JavaScript podemos crear programas para resolver nuestro algoritmos, y para ello,
debemos pensar que al igual que nosotros si tuvieramos que usar un papel y un boli, tenemos
que tener unos signos para poder realizar operaciones matemáticas, éstos son los operadores
básicos que disponemos en JavaScript:
x+y Suma dos valores numéricos o concatena dos cadenas.
x-y Resta dos valores numéricos.
x*y Multiplica dos valores numéricos.
x/y Realiza la división de dos valores numéricos.
x%y Calcula el resto de una división (módulo)
x++ Incrementa en uno el valor numérico.
x-- Decremente en uno el valor numérico.
x=y Asigna a x el valor de y
x+=y Asigna a x el valor de x+y. ~(x = x + y)
x-=y Asigna a x el valor de x-y. ~(x = x - y)

Aula Mentor
x*=y Asigna a x el valor de x*y. ~(x = x * y)
x/=y Asigna a x el valor de x*y. ~(x = x / y)
x%=y Asigna a x el valor de x*y. ~(x = x % y)
3.5. Operadores lógicos.
En los algoritmos encontraremos situaciones que debemos hacerle preguntas al progra-

ma, del tipo: ¿es la variable a mayor que la variable b? o ¿es el valor del contador igual a 7? Y
muchas preguntas de tipo lógico entre varias variables. Para ello disponemos de los siguientes
operadores lógicos:
x>y Comprobamos si x es mayor que y.
x<y Comprobamos si x es menor que y.
x>=y Comprobamos si x es mayor o igual que y.
x<=y Comprobamos si x es menor o igual que y.
x==y Comprobamos si x es igual a y, pudiendo ser cadenas o números.
x===y Comprobamos si x es igual a y, pudiendo ser cadenas o números pero

316 además comprobamos que el tipo de datos sea igual.
x!=y Comprobamos si x es distinto a y, pudiendo ser cadenas o números.
x!==y Comprobamos si x es distinto a y, pudiendo ser cadenas o números pero

además comprobamos que el tipo de datos sea igual.
x&&y Concatena comparaciones, devolviendo true o verdadero si se cumplen

las dos a la vez.
x||y Concatena comparaciones, devolviendo true o verdadero si se cumplen

alguna de las dos condiciones.
3.6. Control de flujo del programa.
En un script o algoritmo que diseñemos, siempre vamos a tener sentencias condicionales

y acciones repetitivas que van a crearnos un flujo concreto de programa. Para ello, vemos el
siguiente flujograma y sobre él vamos a sentar las base de la metodología de la programación. Si
has visto antes programación puedes saltarte este esquema e ir directamente al siguiente apar-
tado.
M3. JQUERY
317
Es una forma muy simplificada de la metodología de la programación, pero para empe-
zar está bien. Analicemos este diagrama de flujo:
Inicio:
Cuando inicia el programa, puede ser cuando hacemos una llamada a la función.
Parámetros de entrada:
En algunas ocasiones tendremos 1 o varios parámetros de entrada con los que nuestro
algoritmo operará.
Sentencias condicional:
Cuando en el programa nos encontramos con una toma de decisiones según un pará-
metro usamos una sentencia if – else. En el ejemplo estaría representada por el rombo y la
pregunta, ¿es A=B?, y según si es verdad esta pregunta (true) o si es falsa (false) se tomará una
decisión u otra.
En programación es una de las sentencias más usadas, siempre se pregunta sobre los
parámetros o condiciones exactas del programas. En JavaScript al igual que en el 98% de los
lenguajes se realiza con las sentencias if - else:
Aula Mentor
if (condición){
//Acciones a realizar si la condición es verdadera
}else{
//Acciones a realizar si la condición es falsa.
También se pueden volver hacer nuevas preguntas y encadenar estas sentencias las ve-
ces que necesitemos, usando la sentencia else if por ejemplo:
if (condición1){
318
//Acciones a realizar si la condición es verdadera
}else if(condición2){
//Acciones a realizar si la condición es falsa.
if(a=b){
Muestro_mensaje(‘El parámetro a es igual a b’);
}else if (a<b){
Muestro_mensaje(‘El parámetro a es menor que b’);
}else{
M3. JQUERY
Muestro_mensaje(‘a no es igual que b, y a no es menor, entonces a es mayor que b’);
Si nos fijamos en el diagrama de flujo, en la rama de la derecha, cuando en la pregunta

¿es A=B? el programa ha comprobado que NO se inician dos nuevas sentencias varC y varD, por
ejemplo, varC en este caso la vamos a usar como variable contador y ejecutar un número fijo de
veces una acción. Este tipo de acciones se llama buclés o acciones interativas porque se van a
ejecutar un número de veces dependiendo de una condición.
Para ello JavaScript, y la mayoría de los lenguajes nos ofrecen tres formas de ejecutar un
código un número de veces:
for
Los bucles for se definen de la siguiente forma:
for( [expresionInicial] ; [condición] ; [incremento o decremento]){
//acciones a realizar
Si nos fijamos en nuestro ejemplo, tenemos una expresión incial que es varC = 10, ini-
ciamos a 10 el contador, posteriormente preguntamos si cumple la condición ¿es varC=0?, y 319
miestras que no sea 0 vamos haciendo nuestras acciones, en nuestro caso sumar el valor del
contador, más el valor de la variable varC. Ésto se podría representar de la siguiente forma:
for(varC = 10; varC > 0; varC--){
varD+= varC
Este ejemplo iría restando varC hasta llegar a varC = 0, cuando se cumpla la condición,
dejaría de utilizarse y pasaría a la siguiente rama. Normalmente, si ves código fuente de algún
lenguage, verás que casi siempre utilizan una variable para hacer los bucles, i o j, el nombre
es realmente lo de menos, pero lo que si se hace es declarar un nombre que sea sólo para los
bucles y una vez termine el bucle se elimina automáticamente, ésto es por el ámbito de las va-
riables que veremos en el apartado siguiente:
Ejemplos de bucles for:
//Decrementando el valor de i
for(var i=0; i > 0; i--){
varD+= varC
}
Aula Mentor
//Aumentando el valor de i
for(var i=0; i < 10; i++){
varD+= varC
//Definiendo el final en la expresión inicial.
//Hay que darse cuenta que usamos “ , “ para las expresión inicial y “ ; “ para el siguiente bloque.
for(var i=0, limite=10, i < limite; i++){
varD+= varC
while
Los bucles while es similar a la anterior, es más, siempre podemos elegir for o while
mientras se elija bien las expresiones iniciales y las condiciones finales, para ello debemos de-
clarar la expresion incial antes de la condición, la traducción de while y el uso sería:
320 mientras(condición){
//Acciones a realizar
En determinadas situaciones va a ser más conveniente usar while, podríamos decir que
el for, leyendo la cabecera sabemos el número de veces que se va a ejecutar el bloque, y while
estaría más indicado cuando no sabemos cuántas veces se va a ejecutar pero sí sabes cuando va
a salir del bucle, por ejemplo:
var valorSalida = 24;
mientras(temperatura != valorSalida){
if(temperatura < valorSalida)
sube_temperatura;
else
baja_temperatura;
M3. JQUERY
Si te fijas después del if no he usado las llaves para abrir “ { “ y cerrar “ } “ ya que cuando
sólo hay una sentencia se puede omitir, mi consejo, por ahora, usarlo siempre para evitar erro-
res, y conforme te encuentres más cómodo programando ve haciendo pruebas.
var varC=10;
while(varC > 0){
varD+=varC;
do-while
Los bucles do-while son muy parecidos a los bucles while, sólo que con este tipo de
bucle nos aseguramos que al menos ejecutamos una vez nuestro conjunto de acciones ya que
la condición la comprobamos al final y no al inicio.
do{
}while(condicion) 321
var varC=0;
do{
alert(‘Hola voy abrir una ventana al inicio y si todo va bien no aparezco más’);
}while(varC > 0)
Si te fijas antes de ejecutar el bucle, sabíamos que la condicón ¿es varC >0? Era falsa, pero
independientemente se ha ejecutado las sentencias que había dentro.
3.7. Ámbito de las variables.
Como hemos visto anteriormente en los programas muchas veces declaramos variables
sólo para unas acciones, un contador para un bucle, o una función. El ámbito de las variables,
también llamado scope pueden ser de dos formas.
Local: Serán válidas y accesibles sólo en el ámbito de la función que la define.

Aula Mentor
Global: Serán válidas desde cualquier parte del código, para ello sólo tenemos que de-
finirlas fuera de las funciones, y éstas se podrán usar desde cualquier sitio.
Ejemplo de variable local:
function muestraNombre(){
var nombre = ‘Mi nombre es Miguel Ángel’;
alert(nombre);
El ámbito de la variable nombre es sólo a la función muestraNombre(), una vez finalice

la función se elimina, si quisieramos mostrar posteriormente un alert con el nombre, éste sería
vacío, ya que no existe la variable nombre fuera de la función.
alert(nombre);
}
322
muestraNombre();
alert(nombre);
Ejemplo de variable global:
alert(nombre);
muestraNombre();
alert(nombre);
En este caso, la variable nombre está siendo visible y accesible desde dentro de la fun-
ción, aunque no hayamos declarado, como fuera de la misma.
Un ejemplo más para poner de manifiesto las variables globales y locales, usando los dos
ámbitos sería el siguiente:
M3. JQUERY
var nombre = ‘Mi nombre es Antonio’;
alert(nombre);
alert(nombre);
muestraNombre();
alert(nombre);
La salida de este ejemplo sería:
Mi nombre es Miguel Ángel
Mi nombre es Antonio
Aunque se defina una variable local con el mismo nombre, siempre prevalecerá la varia- 323
ble local a la global, por lo que debes tener cuidado ya que puedes tener un resultado totalmen-
te diferente, sólo por haber puesto var delante de la variable nombre dentro la función (error
común).
//actualizo el valor de la variable nombre por otro texto
nombre = ‘Mi nombre es Antonio’;
alert(nombre);
alert(nombre);
muestraNombre();
alert(nombre);
Aula Mentor
3.8. Arrays.
Los array son listas donde vamos almacenar elementos, por ejemplo, los nombres de los
alumnos de una clase, numerándolos desde el índice 0, pero ¡ojo!, no empiezan en el 1, sino el
0. Si queremos un arrays con 5 elementos, tendríamos que el primer elemento sería el 0 y último
en el 4:
0 Luis
1 María
2 Francisco
3 Emilio
4 Antonio
Para definir nuestro array/lista en JavaScript tendríamos que usar la siguiente sintaxis:
var miLista = [‘Luis’,’María’,’Francisco’,’Emilio’,’Antonio’];
Si queremos mostrar algún elemento concreto podemos nombrarlo usando directamente

324 el índice:
alert(miLista[3]);
Mostraría el nombre de Emilio. Si queremos saber la longitud o número de elementos de

un array, tenemos la propiedad .length
alert(‘El nombre seleccionado entre los ‘+miLista.length+’ participantes es ‘+miLista[3]);
3.9. Objetos.
Uno de los elementos más importantes a la hora de la programación es poder realizar

Programación Orientada a Objetos (POO), y JavaScript nos ofrece la posibilidad de crear nuestro
objetos, darle sus propiedades y métodos, pero ¿qué es un objeto? ¿Qué es realmente la POO o
OOP ( Object Oriented Programming) ?
La programación orientada a objetos es un paradigma de programación que utiliza la

abstracción para crear modelos basados en el mundo real, es decir, si queremos crear un pro-
grama donde vamos a usar personas, éstas como tal no se pueden representar tal cual en un
ordenador, por lo que se crea un modelo para poder realizar las operaciones que deseemos con
él, por ejemplo:
[Objeto = Prototípo]{
[ Propiedad = Variable ]
M3. JQUERY
[ Método = Funcion ]
Imaginemos que queremos modelizar a las personas:
function Persona( parametros )
// Codigo
};
Como vimos antes se podía declarar también de la siguiente forma:
var Persona = function (parametros) {
/* Codigo*/
Y ahora le podemos agregar propiedades a la persona, por ejemplo:

325
var Persona = function (nombre, apellidos, edad, colorOjos) {
this.nombre = nombre;
this.apellidos = apellidos;
this.edad = edad;
this.colorOjos = colorOjos;
Ya hemos creado un modelo para nuestra aplicación web que va a ser Persona, la cual va
a tener un nombre, apellidos y edad concreta, se podrían añadir todas las propiedades que qui-
sieramos. Si nos fijamos hemos usado this.propiedad, con ésto nos estamos refiriendo a este
elemento en concreto. Ahora para poder crearnos objetos de ese tipo, podemos usar la palabra
reservada new y el objeto que vamos a crear:
var Antonio = new Persona(‘Antonio’, ‘González Martínez’, ‘23’, ‘Azules’);
Y ya podemos hacer con la nueva Persona Antonio lo que quisieramos, mostrar mensaje,
calcular otros datos o por ejemplo mostrarlo por pantalla, para ello, nos creamos un párrafo con
un id llamada “textoSalida” y le agregamos los datos hemos creado:
Aula Mentor
document.getElementById(“textoSalida”).innerHTML =
“<br>Nombre : “+Antonio.nombre +
“<br>Apellidos : “ + Antonio.apellidos +
“<br>Edad : “+Antonio.edad +
“<br>Color de Ojos : “+Antonio.colorOjos;
El resultado sería éste:
Otro punto importante de usar objetos es que pueden contener cualquier tipo de valor:
un número, una cadena, un array, una función o incluso otro objeto. Podemos crear por tanto
en la definción del objeto todo lo que necesitemos para en un futuro poder usarlo, por ejemplo
vamos agregarle un método a nuestro objeto Persona donde nos devuelva el nombre completo,
el nombre más los apellidos:
var Persona = function (nombre, apellidos, edad, colorOjos) {
this.nombre = nombre;
326
this.apellidos = apellidos;
this.edad = edad;
this.colorOjos = colorOjos;
function nombreCompletoPersona(){
return nombre+” “+apellidos;
this.nombreCompleto = nombreCompletoPersona();
Si ahora cogemos y declaramos nuevamente nuestro objeto, tendríamos:
var Antonio = new Persona(‘Antonio’, ‘González Martínez’, ‘23’, ‘Azules’);
document.getElementById(“textoSalida”).innerHTML =
“<br>Nombre : “+Antonio.nombre +
M3. JQUERY
“<br>Apellidos : “ + Antonio.apellidos +
“<br>Edad : “+Antonio.edad +
“<br>Color de Ojos : “+Antonio.colorOjos +
“<br>Nombre completo: “+Antonio.nombreCompleto +
“<br>Nombre erróneo: “+Antonio.nombreCompletoPersona;
Y nos mostraría por pantalla el siguiente resultado:
Si nos fijamos cuando hemos intentado acceder directamente a la función nombreCom-

pletoPersona nos ha dado undefined y no hemos podido acceder, y si probamos a acceder con:
Antonio.nombreCompletoPersona();
Nos dará un error el script entero y si accedemos en modo depurador del navegador F12,
dentro de la pestaña Consola, tendremos el siguiente error:
327
Uncaught TypeError: undefined is not a function
Otra forma que también permite sería usar dentro del objeto la siguiente definición:
this.nombreCompleto2 = function () {
return this.nombre+” “+this.apellidos;
};
Y para acceder debemos usar corchetes en este caso, porque estaríamos accediendo a la
función y no a la propiedad:
Antonio.nombreCompleto2();
Este error es difícil de detectar y aunque a veces el navegador en modo depurador nos
da información si pulsamos en la pestaña consola, otras veces hay que revisar y ser muy metó-
dico en la programación, sino en grandes proyectos será muy difícil detectar donde se ha pro-
ducido el error.
Otra forma de tener métodos o proporcionar nuevas características es crear métodos

prototypados de los objetos, usando la palabra resevada prototype.
Aula Mentor
Persona.prototype.nombreCompleto3 = function () {
return this.nombre+” “+this.apellidos;
};
Y para acceder a ella, podemos hacerlo como en el caso anterior con el doble corchete
después del nombre asignado ().
Antonio.nombreCompleto3();
Pero no sólo podemos agregar métodos a nuestros objetos creados, podemos hacerlo
también a funciones propias de JavaScript, como por ejemplo:
Array.prototype.contarRepetidos = function(palabraBuscada){
var contador = 0;
for (var i = this.length - 1; i >= 0; i--) {
if(this[i] == palabraBuscada)
328 contador++;
};
return contador;
var miLista = [‘Luis’,’María’,’Francisco’,’Luis’,’Emilio’,’Antonio’,’Luis’];
document.getElementById(“textoSalida2”).innerHTML = “Lista : “;
for (var i = miLista.length - 1; i >= 0; i--) {
document.getElementById(“textoSalida2”).innerHTML+= miLista[i];
if(i!=0) //para que en el último elemento no muestre una coma
document.getElementById(“textoSalida2”).innerHT-
ML+=” , “;
};
M3. JQUERY
document.getElementById(“textoSalida2”).innerHTML+=
“<br>El número de veces que aparece Luis en la lista es: “+miLista.contarRepetidos(‘Luis’);
Si ejecutamos este script, nos mostrará por pantalla el siguiente mensaje:
Puedes visitar el ejemplo1-javascript/
4. Empezando a trabajar con jQuery.

jQuery es una librería que podemos usar gratuitamente y poder usar online o directa-
mente descargarla e incorporarla a nuestro servidor directamente. Como hemos comprobado en
el apartado anterior, jQuery está íntimamente ligado a JavaScript y usándolo pretendemos los
siguientes objetivos en nuestras aplicaciones web:
- Acceder al DOM y etiquetas y propiedades más fácilmente.
- Modificar la apariencia de nuestra web dinámicamente alterando el documento.

329
- Podemos interactuar aún más con el usuario facilitando el uso de eventos.
- Simplificar tareas comunes de JavaScript acelerando el desarrollo web.
- Realizar animaciones y efectos en un documento sin el uso de Flash.
Llegados a este punto, y como estamos acostumbrados cuando se habla de software,

framework o conjunto de script, siempre hay versiones y cada versión tendrá unas características
concretas, las cuales se podrán adaptar o no a nuestras necesidades. Hemos decidido usar la
última versión existente a fecha de la creación del manual, y queremos resaltar que es posible
que cuando accedas a descargarte la última versión exista otra diferente, en principio podrías
utilizarla sin problemas, pero te aconsejo si nunca has trabajado jQuery uses la versión del curso,
está en la sección de recursos.
Todavía se da soporte y puedes descargarte las últimas versiones de la 1.11.x, aunque

ya está la nueva versión 2.1.x. Esta última a diferencia de la 1.11.x da soporte a los navegadores
antiguos, ya que en la propia documentación de jQuery 2.1.x nos indica que no soporta la ver-
siones de Internet Explorer 6, 7, or 8. Han eliminado las adaptaciones y código existente para
intentar mantener la apariencia, cosa que ha reducido el código acelerando la web, pero hemos
perdido mantener al máximo porcentaje la compatibilidad con estos navegadores.
Según la plataforma Netmarketshare el uso de Internet Explorer 8, a día de hoy ocupa el

21,19% de la población mundial:
Aula Mentor
http://www.netmarketshare.com/browser-market-share.aspx?qprid=2&qpcustomd=0
En el gráfico se muestra que a día de hoy, sigue siendo el navegador más usado y no hay
ningún navegador que supere la cuota de éste y más de un 20% sobre el mercado creo que es
importante como para tenerlo en cuenta, y lo que es peor, un navegador tan antiguo como es
Internet Explorer 6.0 tiene una cuota del 4.08% que es muy superior a otros navegadores más
actuales como es FireFox.
Se ha decidido por tanto basarnos todo el curso en la última versión que soporta a esos
navegadores lo máximo posible la 1.11.1, pero ¡ojo! lo máximo posible, puede ser que haya ca-
sos excepcionales que tengamos problemas.
De todas formas, a lo largo del curso iremos haciendo pruebas con la última versión
y veremos los resultados obtenidos. Y si han sacado alguna versión posterior a la 1.11.1 en la
sección de recursos del curso tendrás la misma versión para que no tengas problemas.
Para empezar a trabajar nos vamos a la web oficial:

330
http://jquery.com/download/
M3. JQUERY
Vamos a descargarnos a la carpeta js de nuestro servidor el archivo:
Esta versión está pensada para programadores, y por eso está uncompressed, ya que esta
versión viene con documentación, comentarios de código, y está tabulada para su fácil lectura. Si
elegimos la versión compressed estaría sin ningún comentario, ni tabulada y ocuparía lo mínimo
posible para agilizar nuestro navegador, esta versión es la que debemos descargar cuando vaya-
mos a poner online nuestra web, y mientras trabajamos, por si tenemos alguna duda, usamos la
versión de desarrollador o descomprimida.
Versión sin tabuladores, comentarios…etc.

Tamaño 94KB
331
Versión tabulada y comentada. Etc. Tamaño 277KB
Para poder usar este archivo jQuery sólo tenemos que añadirlo a nuestro archivo HTML
en el <head></head> pero para enlazarlo usaremos la siguiente sentencia, si el archivo que nos
hemos bajado se llama jquery-1.11.1.js:
<script type=”text/javascript” src=”js/jquery-1.11.1.js”></script>
O también podemos cargarla directamente desde la web de jquery:
<script type=”text/javascript” src=”http://code.jquery.com/jquery-1.11.1.min.js”></script>
O incluso otra opción interesante es desde los servidores de Google:
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.

js”></script>
Básicamente podemos usar el fichero de forma remota o de forma local, dependiendo

del caso puede ser mejor una u otra. Por ejemplo si estas haciendo una web para un almacén y
en él tienes problemas de internet, no se aconseja la remota, ya que no se cargará el archivo y
no funcionará correctamente.
Pensamos que queremos hacer una aplicación donde vamos a tener tres botones y que
dependiendo de donde haga click el usuario nos muestre un texto u otro.
Aula Mentor
¿Cómo harías esto con HTML5 y CSS3? Este es un ejemplo muy sencillo y aunque haya-
mos usado funciones de JavaScript, realmente por si solo, no podríamos hacer ésto. Tienes la
solución en el siguiente link:
Puedes visitar el ejemplo2-jquery-empezando/
Y el código usado es:
<!DOCTYPE html>
<head>

332
<title>Módulo jQuery</title>
<link rel=”stylesheet” type=”text/css” href=”css/miestilo.css”>
</head>
<body>
<header>
</header>
<nav>
</nav>
<section>
<article>
<p id=”mensaje”>Aquí se mostrarán los mensajes</p>

M3. JQUERY
</article>
<article>
<form>
<input type=”button” value=”Opcion A” onclick=”$(‘#mensaje’).html(‘Ha elegido la opción A’)”>
<input type=”button” value=”Opcion B” onclick=”$(‘#mensaje’).html(‘Ha elegido la opción B’)”>
<input type=”button” value=”Opcion C” onclick=”$(‘#mensaje’).html(‘Ha elegido la opción C’)”>

</form>
<article>
</section>
<footer>
</footer>
</body>
333
</html>
¿Qué hay de nuevo en este código? Bueno, asignar un id a un párrafo, lo hemos reali-
zado muchas veces, le hemos asignado al párrafo un texto cualquiera para mostrar que se está
iniciando:
<p id=”mensaje”>Aquí se mostrarán los mensajes</p>
Y posteriormente lo que vamos hacer es que cuando el usuario haga onclick sobre el
botón, voy a usar la función html() y le voy a pasar un texto, en concreto con la opción que ha
elegido.
onclick=”$(‘#mensaje’).html(‘Ha elegido la opción A’)”
Si en vez de coger el archivo jquery-1.11.1.js cogemos el archivo jquery-2.1.1.js obser-

varemos que no nos afecta por lo que realmente en este caso y muchos más que iremos co-
mentando en el curso. Si en nuestra web usamos estas funciones, nos interesaría usar la versión
anterior y así daríamos más soporte a los navegadores antiguos.
Pero sin embargo, en Internet Explorer 6, no funciona con la versión jquery-2.1.1.js

Aula Mentor
Y sin embargo si cargamos la versión 1.11.1 funcionaría sin ningún problema:
334
Volviendo al código del ejercicio, analicemos un poco más la sentencia que hemos usa-
do:
$(‘#mensaje’)
En jQuery la función principal es jQuery( ) o en su forma corta $( ) y con ello estamos

diciendo que vamos a cargar algún elemento de la página, en este caso, queremos acceder al id
#mensaje, te debe recordar a cuando usabamos selectores en CSS3. No te resultarán muy difíci-
les usar selectores en jQuery, ya que se basan en características muy similares. Cuando usamos
#mensaje, estamos seleccionando el elemento HTML del documento que tiene ese identificador
(id), en nuestro caso <p id=”mensaje”> .
Posteriormente vamos a usar una función que puede agregar texto HTML en donde esté
la etiqueta, por ejemplo si usamos .html(textoHtml), añadiremos al párrafo en este caso, el
texto que hemos seleccionado, html(‘Ha elegido la opción …’) por eso, sustituye el texto que
había antes en la etiqueta y nos muestra el que hemos seleccionado con la función.
M3. JQUERY
Si no has entendido muy bien este último párrafo no te preocupes, se ha usado para que
podamos probar nuestro primer ejercicio de jQuery, y corresponde algunas funciones a leccio-
nes futuras, se ha usado para poder ver cómo interactuamos con el documento. Ahora lo que
importa es que sepas cómo debes llamar a tu fichero jquery desde tu fichero HTML y más ade-
lante iremos viendo más ejercicios y volveremos a retomar la edición del texto dinámicamente
entre otras muchas cosas más.
5. Selectores y filtros en jQuery.

Como hemos comentado, jQuery facilita la lectura del documento HTML para poder
acceder a sus elementos, y una vez que ha accedido, ver sus propiedades, modificarlas y añadir
otras en tiempo real. Aquí al igual que pasaba en el módulo de CSS3, tenemos que tener una
forma concreta y exacta de seleccionar el elemento correcto, por lo que jQuery nos facilita una
serie de selectores similares a los de CSS3.
Si recuerdas en JavaScript vimos unos métodos para acceder a los elementos del docu-
mento (DOM), getElementById Y getElementByTagName, etc. Con jQuery se han transformado
para poder acceder a los mismos elementos pero de una forma más sencilla, por tanto tendría-
mos los siguientes selectores:
5.1. Selector de Etiqueta.
Al igual que en CSS3 cuando queremos acceder al identificador podemos hacerlo lla-
mándo directamente sobre las etiquetas que queremos actuar:
335
$(“etiqueta”)
Por ejemplo si queremos acceder a la etiqueta lista, seleccionando todas las etiquetas del
documento que sean listas no ordenadas, podíamos usar la siguiente sintaxis:
$(“ul”)
5.2. Selector de Id.
Para seleccionar los identificadores de nuestra web, podemos usar el caracter #, y al igual
que pasaba en CSS3 debes recordar que debe existir sólo una definición del identificador, en
caso que existan más, no se aplicarán a todas, sino como vimos en CSS3 a la primera etiqueta
que encuentre al leer el documento.
$(“#identificador”)
Imagina que has creado un identificador llamado miboton, tendremos que usar la si-
guiente sintaxis para seleccionarlo:
$(“#miboton”)
5.3. Selector de Clase.
Para seleccionar nuestra clases definidas en nuestro documento podemos usar el selector
de clase de jQuery, y éste si puede estar definido en varios sitios del documento:
Aula Mentor
$(“.clase”)
Si tenemos una clase que se llama ocultarme y queremos seleccionar todos los elemen-
tos que tengan esa clase, podremos usar:
$(“.ocultarme”)
Veamos un ejemplo usando selectores de etiqueta, id y de clase, supongamos el siguien-

te código HTML:
<p>Dependiendo de que botón eligas, se ocultarán varios o todos los elementos de la lista </p>
<ul>
<li class=”ocultame”>Elemento 1</li>
<li>Elemento 2</li>
<li class=”ocultame”>Elemento 3</li>
</ul>
336 <button id=”muestraLista”>Muestra Lista</button>
<button id=”ocultaLista”>Oculta Lista</button>
<button id=”ocultaItem2”>Oculta Item 1 y 3</button>
Tendremos los siguientes elementos HTML:
Etiqueta: <p> <ul> <li> <button>
Id: muestraLista, ocultaLista, ocultaItems
Clase: ocultame
Veamos un ejemplo completo y sólo adelantaremos una propiedad que podemos usar
sobre las etiquetas HTML que es para ocultar una etiqueta seleccion.hide() o para mostrar selec-
cion.show(). Más adelante veremos muchos más métodos y eventos; ahora centrémonos en la
selección de elementos.
1. <script type=”text/javascript”>
2. $(document).ready(function(){
3.
4. $(“#muestraLista”).click(function(){
M3. JQUERY
5. $(“ul”).show();
6. $(“.ocultame”).show();
7. });
8. $(“#ocultaLista”).click(function(){
9. $(“ul”).hide();
10. });
11. $(“#ocultaItems”).click(function(){
12. $(“ul”).show();
13. $(“.ocultame”).hide();
14. });
15.
16. });
17. </script> 337
Puedes visitar el ejemplo3-selectores/
Las líneas 1 y 17 es la forma de decir al navegador que vamos a insertar texto de tipo
javascript o jQuery, aunque se puede omitir y dejar exclusivamente con <script></script>.
La línea dos es una de las principales y más importantes de jQuery, ya que en ella, esta-
mos diciendo que hasta que no se lea el documento no esté accesible el script, ésto es porque si
una página no ha terminado de cargar los elementos y nosotros en nuestro script, seleccionamos
una etiqueta que no está, y a lo mejor toda nuestra aplicación o parte depende de ese elemento
o etiqueta, fallará y el usuario no comprenderá que ha pasado.
Esta forma de llamar al documento, se puede decir de varias formas, por si en algún ma-
nual o documentación lo encuentras definido de otra forma, ten presente que son otras formas
de decir lo mismo:
$(function(){
alert(‘Se ha cargado el documento’);
});
Pruébalo y ya verás como cuando termine de cargar el documento aparece una ventana
emergente indicándote el mensaje. De todas formas, aún existiendo esta función abreviada, te
recomiendo que al inicio uses la otra denominación.
Aula Mentor
En las líneas 4, 8 y 11 estamos usando el selector de identificador (ID) que hemos asig-
nado a cada botón, y una vez que lo hemos seleccionado podemos interactuar con él, en este
caso, hemos aplicado el evento .click y creamos una función para ocultar o mostrar el elemento
según me interese.
En las líneas 5,9 y 12 estamos usando un selector de etiqueta, en este caso el de la lista
<ul> y dependiendo de nuestro programa, mostramos o ocultamos el contenido.
En las líneas 6 y 13 estamos usando un selector de clase, llamando a todos los elementos
que tiene esa clase asignada, como son los ítems 1 y 3 de la lista definida en el HTML.
Bien, ahora es cuando tenemos que hacer nuestro algoritmo para interactuar con los
elementos web según queramos. ¿Qué queremos hacer? ¿Cómo nos planteamos el ejercicio?. El
80% de todo el trabajo en los algoritmos es el análisis del programa, los parámetros de entrada
que vamos a tener y cuál es la mejor forma de procesar los datos y hacer sobre todo lo que
tengamos planeado. El resto, es como se suele decir en el argot “teclear código”.
5.4. Conjunto completo de selectores.
Una vez entendido la idea de que son los selectores, y habíendonos parado en los más
comunes, entendiendo que es una forma de filtrar, seleccionar las etiquetas y elementos de un
documento html, vamos a exponer los selectores más comunes en jQuery y aunque se repiten
las tres iniciales, los adjuntos todos en una tabla y seguidos para que los tengas todos centrados
y te sea fácil buscar el selector o filtro que necesites en cada situación:
338
Selector Ejemplo Conjunto de elementos o
acción
* $(“*”) Todos los elementos
#id $(“#identificador”) El elemento con identificador
id=”identificador”
.class $(“.miclase”) Todos los elementos con
que pertenezcan a la clase
class=”miclase”
.class,.class $(“.miclase1,.miclase2”) Todos los elementos con la
clase “miclase1” o “miclase2”
element $(“p”) Todas los elementos de la eti-
queta HTML <p>
el1,el2,el3 $(“h1,div,p”) Todos los elementos que ten-
gan las siguiente etiquetas
<h1>, <div> y <p>
:first $(“p:first”) El primer elemento HTML, en

este caso, la primera etiqueta
<p>
:last $(“p:last”) El último elemento HTML, en
este caso, la última etiqueta
<p>
M3. JQUERY
:even $(“tr:even”) Selecciona las líneas pares

con índice JavaScript 0, 2 y 4,
usada para crear tablas con fi-
las de color dispar.
:odd $(“tr:odd”) Selecciona las líneas impares
con índice JavaScript 1, 3 y 5.
:first-child $(“p:first-child”) Todos los elementos <p> que

son el primer hijo de su padre.
:first-of-type $(“p:first-of-type”) Todos los elementos <p> que
son el primer elemento <p>
de su padre.
:last-child $(“p:last-child”) Todos los elementos <p> que
son el último hijo de su padre
:last-of-type $(“p:last-of-type”) Todos los elementos <p> que
son el último elemento <p>
de su padre
:nth-child(n) $(“p:nth-child(2)”) Todos los elementos <p> que
son el número de hijo de sus
padres, en este el segundo.
:nth-last-child(n) $(“p:nth-last-child(2)”) Todos los elementos <p> que
son el número de hijo de sus
padres, en este el segundo
contando desde el final 339
:nth-of-type(n) $(“p:nth-of-type(2)”) Todos los elementos <p> que
son el segundo elemento <p>
de su padre
:nth-last-of-type(n) $(“p:nth-last-of-type(2)”) Todos los elementos <p> que
son el segundo elemento <p>
de su padre, a contar desde el
último hijo
:only-child $(“p:only-child”) Todos los elementos <p> que
son el único hijo de su padre.
:only-of-type $(“p:only-of-type”) Todos <p> elementos que son
la única hijo, de su tipo, de
sus padres
parent > child $(“div > p”) Todos los elementos <p> que
son un hijo directo de un ele-
mento <div>
parent descendant $(“div p”) Todos los elementos <p> que
son descendientes de un ele-
mento <div>
element + next $(“div + p”) El elemento <p> que están al
lado de cada uno de los ele-
mentos <div>
Aula Mentor
element ~ siblings $(“div ~ p”) Todos los elementos <p> que

son hermanos de un elemento
<div>
:eq(index) $(“ul li:eq(3)”) Seleccina un elemento con-

creto con el valor del índice,
en este caso el tercer elemen-
to de la lista.
:gt(no) $(“ul li:gt(3)”) Seleccionala los elementos
con un valor superior al valor
dado, en este caso 3.
:lt(no) $(“ul li:lt(3)”) Seleccionala los elementos
con un valor inferior al valor
dado, en este caso 3.
:not(selector) $(“input:not(:empty)”) Excluye de la selección todos
los elementos que responden
al criterio que especifica el se-
lector. En este caso todos los
elementos que no están va-
cíos.
:header $(“:header”) Devuelve todos los elementos

de título, <h1>, <h2> ...
340 :animated $(“:animated”) Selecciona todos los elemen-
tos animados.
:focus $(“:focus”) El elemento que tiene el foco
o atención en ése momento.
Por ejemplo para formularios
el campo actual que está edi-
tando el navegador.
:contains(text) $(“:contains(‘Hello’)”) Todos los elementos que con-
tiene el texto “Hola”.
:has(selector) $(“div:has(p)”) Todos los elementos <div>
que tienen un elemento <p>
:empty $(“:empty”) Todos los elementos que es-
tán vacíos.
:parent $(“:parent”) Todos los elementos que son
uno de los padres de otro ele-
mento.
:hidden $(“p:hidden”) Todos los elementos ocultos,
en este caso todos los <p>
que estén ocultos.
:visible $(“table:visible”) Todos los elementos visibles,
en este caso, todas las tablas
visibles.
M3. JQUERY
:root $(“:root”) Selecciona el elemento raíz.

Una vez que esté podemos
hacer lo que deseemos, por
ejemplo, cambiar el fondo:
$(“:root”).css(“background-
color”,”blue”);
:lang(language) $(“p:lang(es)”) Todos los elementos <p> con
un valor de atributo lang co-
menzando con “es”
[attribute] $(“[href]”) Todos los elementos con el

atributo href
[attribute=value] $(“[href=’obras.htm’]”) Todos los elementos que ten-
gan el atributo en href igual a
“obras.htm”
[attribute!=value] $(“[href!=’ obras.htm’]”) Todos los elementos con un
valor de atributo href no es
igual a “obras.htm”
[attribute$=value] $(“[href$=’.jpg’]”) Todos los elementos con un
valor de atributo href que ter-
mina con “.jpg”
[attribute|=value] $(“[title|=’miweb’]”) Todos los elementos con un
valor de atributo de título 341
igual a ‘miweb’, o que empie-
zan con ‘miweb’ seguido de
un guion
[attribute^=value] $(“[title^=’Mig’]”) Todos los elementos con un
valor de atributo de título que
empieza con “Mig”
[attribute~=value] $(“[title~=’miweb’]”) Todos los elementos con un
valor de atributo de título que
contiene la palabra “miweb”
específica
[attribute*=value] $(“[title*=’miweb’]”) Todos los elementos con un
valor de atributo title que con-
tienen la palabra “miweb”
:input $(“:input”) Todos los elementos input

:text $(“:text”) Todos los elementos del
tipo=”text” type=”text”
:password $(“:password”) Todos los elemen-
tos del tipo=”password”
type=”password”
:radio $(“:radio”) Todos los elementos del
tipo=”radio” type=”radio”
Aula Mentor
:checkbox $(“:checkbox”) Todos los elemen-

tos del tipo=”checkbox”
type=”checkbox”
:submit $(“:submit”) Todos los elementos del
tipo=”submit” type=”submit”
:reset $(“:reset”) Todos los elementos del
tipo=”reset” type=”reset”
:button $(“:button”) Todos los elementos del
tipo=”button” type=”button”
:image $(“:image”) Todos los elementos del
tipo=”image” type=”image”
:file $(“:file”) Todos los elementos del
tipo=”file” type=”file”
:enabled $(“:enabled”) Todos los elementos input
enabled
:disabled $(“:disabled”) Todos los elementos input di-
sabled
:selected $(“:selected”) Todos los elementos input se-
lected
:checked $(“:checked”) Todos los elementos input
checked

342 Como puedes ver, hay muchas formas de seleccionar y cambiar los elementos de forma
masiva, selectiva o jerárquica. Como ya hemos visto en CSS3 una vez que tenemos el elemento
correcto aplicamos las propiedades que queremos a ese elemento, aquí podemos hacer exac-
tamente lo mismo e incluso como veremos en apartados posteriores aplicar estilos CSS desde
jQuery. Eso no quiere decir que lo sustituye, en absoluto, lo complementa, al poder modificar
las propiedades dinámicamente, podrías por ejemplo cambiar de fondo o de color de letra cada
segundo, ocultar elementos o mostrar elemento como en el ejemplo 4 de la lista.
Existen muchos selectores que están indicados, o mejor dicho, se suelen usar para deter-
minados componentes de la web, uno muy útil es el de los formularios, donde tenemos acceso
a <input type=”text”… type=”button”…etc, con él podemos seleccionar todos los elementos y
tratar dinámicamente el texto que está introducciendo. Otros elementos están muy indicados
para las tablas, :first, :last, :even, :odd, que podríamos decir: la primer fila de la tabla (cabecera),
la última (resumen de tabla), las filas pares de un color y las filas impares de otro.
Hay un punto muy importante que poco a poco debes de ir comprendiendo, para sa-
carle realmente el partido a HTML5, CSS3 y jQuery; has de hacer un estudio y diseño previo
concienzudo, es más, incluso no debemos dejar de lado usar eficazme los nombres, y me refiero
a nombres lógicos que en un futuro me pueden ayudar, por ejemplo:
Tenemos un menu horizontal, un menu lateral y un menu inferior, si usamos los nombres
de clase o identificador, por ejemplo, en vez de usar:
<div id=”horizontal”>…</div>
<div id=”lateral> … </div>

M3. JQUERY
<div id=”inferior>… </div>
Sería mejor usar
<div id=”menu-horizontal”>… </div>
<div id=”menu-lateral>… </div>
<div id=”menu-inferior>… </div>
Y si estamos usando un tipo de letra concreto para los menús, o un estilo concreto, po-
dríamos hacer uso del selector $(“[div|=’menu’]”) y podemos acceder de golpe a los elementos
anteriores y una vez seleccionados aplicar las propiedades o acciones que tengamos pensadas.
Si el nombre no hubiera sido precedido por la palabra menu, se podría hacer, pero tendríamos
que ir uno por uno, que al final es más líneas de código, más complejo, más posibilidad de error
y peor para futuros cambios.
6. Eventos.
El usuario tiene varias formas de interactuar con las aplicaciones web, y jQuery tiene
muchos mecanismos para facilitar que sean dinámicas y respondan a cierto eventos. También se
podría usar JavaScript, como hemos dicho anteriormente, jQuery es un motor que usa en defini-
tiva JavaScript sólo que remodelado para facilitar el trabajo al desarrollador. Veamos los eventos
que disponemos en jQuery, para ello vamos a ver eventos referidos a varios actores respecto a
nuestro documento:
343
6.1. Eventos del ratón.
Evento .click()
Descripción Enlaza un controlador de eventos para el
evento “click” con JavaScript o desencadena
ese evento en un elemento.
Ejemplo $(“miseleccion”).click(function(){
//Mis acciones
});
Evento .dblclick()
evento “dobleclick” con JavaScript o desenca-
dena ese evento en un elemento.
Ejemplo $(“miseleccion”).dblclick(function(){
//Mis acciones
});
Aula Mentor
- Este evento también está presente en los eventos de teclado.
Evento .focusout()
Descripción Enlaza un controlador de eventos al evento
“focusOut” de JavaScript. Este evento se dis-
para cuando el elemento pierde el foco, por
ejemplo en un formulario cuando estamos en
un campo y le damos al tabulador para pasar
al siguiente campo, este llamaría al evento .fo-
cusout.
Ejemplo $(“miseleccion”).focusout(function() {
//Mis acciones
})
Evento .hover()
Descripción Enlaza uno o dos controladores a los elemen-
tos coincidentes, y se ejecutará cuando el pun-
tero del ratón entra y sale de los elementos.
Ejemplo $(“miseleccion”).hover(function() {
//Mis acciones
344
})
Evento .mouseup()
Descripción Enlaza un controlador de eventos al even-
to “mouseup” de JavaScript. Este se activará
cuando se ha presionado el ratón al soltar la
presión sobre el ratón.
Ejemplo Bind an event handler to the “mouseup” JavaS-
cript event, or trigger that event on an element.
Evento .mousedown()
“mousedown” de JavaScript. Este se activará
cuando se ha presionado el ratón hasta llegar
a activar el click del ratón, (sin tener que soltar
la presión sobre el ratón este se activará).
M3. JQUERY
Ejemplo $(“miseleccion”).mousedown(function() {
//Mis acciones
})
Evento .mouseenter()
Descripción Enlazar un controlador de eventos para ser
disparado cuando el ratón entra en un ele-
mento, es muy similar al evento .hover, pero
no son iguales.
Ejemplo $(“miseleccion”). mouseenter(function() {
//Mis acciones
})
Evento .mouseleave()
Descripción Enlaza un controlador de eventos para ser dis-
parado cuando el ratón sale de un elemento.
Ejemplo $(“miseleccion”). mouseleave(function() {
//Mis acciones 345
})
Evento .mouseout()
“mouseout” de JavaScript. Se activa cuando el
ratón sale fuera del elemento.
Ejemplo $(“miseleccion”). mouseout(function() {
//Mis acciones
})
Evento .mouseover()
evento “mouseover” de JavaScript. Se activa
cuando el ratón pasa por encima del elemento
Ejemplo $(“miseleccion”). mouseover (function() {
//Mis acciones
})
Aula Mentor
Evento .mousemove()
“mousemove” de JavaScript. Se activa cuando
el ratón se mueve, además podemos sacar las
coordenadas del mismo.
Podemos acceder para ello a las variables:
event.pageX e event.pageY. Para la distan-

cia del ratón a la esquina superior izquierda
del documento.
event.clientX e event.clientY. Para la distan-

cia del ratón a la esquina superior izquierda
del la ventana visible que tiene el cliente ac-
tual. Es decir, si minimizas la ventana un 50%,
y te situas en la parte del centro de un div, la
distancia de event.page, será la misma inde-
pendientemente, con event.client será diferen-
cia ya que es relativa a la ventana actual del
cliente. Ver el ejemplo donde sobre eventos
para saber distinguir: Ejemplo5-eventos-mou-
se/
Ejemplo $(“miseleccion”). mousemove(function() {
346
//Mis acciones
})
6.1.1. Ejemplo: .click().
Este evento asocia una función al evento “click” del ratón sobre los elementos de la
selección. Normalmente esta asociado a botones, pero pueden ser otros elementos ya que en
nuestra web muchas veces no todo es lo que parece y lo que parece que sea un botón, puede
ser una lista con unas propiedades determinadas, como vimos en los ejemplos de los menús.
Puedes visitar el ejemplo5-eventos-mouse/
Una forma para depurar errores, ya que suele ser muy común escribir el nombre equi-
vocado o no aplicarle el evento correcto es utilizar el modo depurador del navegador F12, pero
esta vez, si usamos Google Chrome, en la pestaña Elements, en el apartado de la derecha pin-
chamos en EventListener (Escuchadores de eventos) podremos comprobar que tenemos activo
M3. JQUERY
el evento .click en el párrafo.
En el ejemplo anterior tendríamos las siguientes definiciones:
Artículo dentro del html
...
<article>
<p>EVENTOS: click() </p>
<ul>
<li>Elemento 1</li>
347
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>
<button id=”muestraLista”>Muestra Lista</button>
<button id=”ocultaLista”>Oculta Lista</button>
<p class=”cambiacolor”>Soy un párrafo y si haces click sobre mí cambio de color </p>
</article>
...
Parte de jQuery
$(document).ready(function(){
$(“#muestraLista”).click(function(){
$(“ul”).show();
Aula Mentor
});
$(“#ocultaLista”).click(function(){
$(“ul”).hide();
});
$(“.cambiacolor”).click(function(){
// Acceso a la propiedad color del párrafo
var coloractual = $(“.cambiacolor”).css(“color”);
//Compruebo si es rojo, y si lo es lo pongo azul,
//en caso contrario lo pongo rojo
if(coloractual == “rgb(255, 0, 0)”)
$(“.cambiacolor”).css(“color”,”blue”);
else
348 $(“.cambiacolor”).css(“color”,”red”);
});
});//fin de la lectura del documento
</script>
Y en la parte de CSS tenemos una clase para asignar un color inicial:
<style type=”text/css”>
.cambiacolor{
color: red;
</style>
Conforme vayamos haciendo click en el párrafo, obtendremos un color, rojo o azul, se-
gún el color actual del texto.
M3. JQUERY
6.1.2. Ejemplo: .dblclick.
Podemos capturar el evento “doble click” sobre algún elemento HTML, similar a click,
pero esta vez tendremos que usar dos click seguidos, siguiendo con el ejemplo anterior podría-
mos tener:
Artículo dentro del HTML
<p>EVENTO: dblclick() </p>
<hr>
<p class=”cambiacolor2”>Soy un párrafo y si haces dos clicks sobre mí cambio de color </p>
Código jQuery
$(“.cambiacolor2”).dblclick(function(){
// Acceso a la propiedad color del párrafo
var coloractual = $(“.cambiacolor2”).css(“color”);
//Compruebo si es rojo, y si lo es lo pongo azul, 349
//en caso contrario lo pongo rojo
if(coloractual == “rgb(255, 0, 0)”)
(“.cambiacolor2”).css(“color”,”blue”);
else
$(“.cambiacolor2”).css(“color”,”red”);
});
});

Aula Mentor
6.1.3. Ejemplo: mouseover vs …out/enter/leave.
Puede resultar un poco confusa las definiciones sobre los eventos del ratón que hemos
comentado anteriormente. Para aclarar ésto, puedes usar el siguiente ejemplo para entender
cómo se comporta nuestra aplicación con los eventos del ratón, aunque agregaré el código, te
recomiendo que empieces por ejecutar el archivo en tu ordenador y posteriormente leer el có-
digo.
En el html tendríamos:
….
350
<article>
<br><hr><br>
<p>EVENTOS: mouseover vs mouseout vs mouseenter vs mouseleave </p>
<br><hr><br>
<div class=”out overout”>
<p>Mueve tu ratón</p>
<div class=”in overout”><p>Mueve tu ratón</p><p>0</p></div>
<p>0</p>
</div>
<div style=”margin: 30px”></div>
<div class=”out enterleave”>
<p>Mueve tu ratón</p>
M3. JQUERY
<div class=”in enterleave”><p>Mueve tu ratón</p><p>0</p></div>
<p>0</p>
</div>
</article>
….
Y en el jQuery:
var i = 0;
$(“div.overout”)
.mouseover(function() {
$( “p:first”, this ).text( “mouse over” );
$( “p:last”, this ).text( ++i );
})

351
.mouseout(function() {
$( “p:first”, this ).text( “mouse out” );
});
var n = 0;
$( “div.enterleave” )
.mouseenter(function() {
$( “p:first”, this ).text( “mouse enter” );
$( “p:last”, this ).text( ++n );
})
.mouseleave(function() {
$( “p:first”, this ).text( “mouse leave” );
});
Aula Mentor
6.1.4. Ejemplo: .mousemove().
Con este evento capturamos la posición exacta del usuario de nuestro ratón y podemos
obtener los valores numéricos respecto al documento y la ventana del cliente. Supongamos que
tenemos una caja donde vamos a detectar la posición exacta del ratón:
Tendríamos en el fichero html:

352
...
<p>EVENTO: mousemove, fíjate que los valores even.page y even.client no coincide, reduce el tamaño de
la ventana y comprueba como afectan los valores</p>
<br><hr><br>
<p>
<span>Mueve el ratón por la caja azul.</span>
<span> </span>
</p>
<div id=”detectaRaton”></div>
...
En el fichero CSS:
#detectaRaton {
width: 400px;
M3. JQUERY
height: 400px;
margin: 10px 50px 10px 10px;
background: blue;
border: 2px groove;
En el jQuery tendríamos:
...
$(“#detectaRaton”).mousemove(function( event ) {
var pageCoords = “( “ + event.pageX + “, “ + event.pageY + “ )”;
var clientCoords = “( “ + event.clientX + “, “ + event.clientY + “ )”;
$( “span:first” ).text( “( event.pageX, event.pageY ) : “ + pageCoords );
$( “span:last” ).text( “( event.clientX, event.clientY ) : “ + clientCoords );

353
});
...
6.1.5. Ejemplo: .mouseup / .mousedown.
Otro evento que podemos capturar del usuario de nuestra web es cuando en un click ha
pulsado y soltado la tecla. Debemos pensar que cuando hacemos click en cualquier link real-
mente ocurren dos eventos:
Mousedown: Has presionado el botón del ratón sobre el elemento.
Mouseup: Has soltado el botón del ratón.

Aula Mentor
En el fichero html tendríamos:
...
<br><hr><br>
<p>EVENTO: mouseup vs mousedown</p>
<br><hr><br>
<p class=”textoMouseUpDown”>Haz click sobre este cuadrado y comprueba en qué momento esta el “click”
del ratón</p>
<div id=”controlClick”></div>
...
En el CSS solo le hemos dado un ancho, alto y color de fondo:
#controlClick{
width: 200px;
height: 200px;
354
En el fichero js donde tenemos nuestro código jQuery tendremos:
...
$( “#controlClick” ).mousedown(function( event ) {
$( “.textoMouseUpDown” ).text(“Mouse Down. Has pulsado sin soltar el botón”);
});
$( “#controlClick” ).mouseup(function( event ) {
$( “.textoMouseUpDown” ).text(“Mouse Up. Has soltado el botón”);
});
...
M3. JQUERY
6.2. Eventos del teclado.
Evento .focusout()
“focusOut” de JavaScript. Este evento se dis-
para cuando el elemento pierde el foco, por
ejemplo en un formulario cuando estamos en
un campo y le damos al tabulador para pasar
al siguiente campo, éste llamaría al evento .fo-
cusout.
Ejemplo $(“miseleccion”). focusout(function() {
//Mis acciones
})
Evento .keydown()
“keydown” de JavaScript, parecido al evento
.mousedown pero esta vez en el teclado.
Ejemplo $(“miseleccion”). keydown(function() {
//Mis acciones
355
})
Evento . keyup()
Descripción Enlaza un controlador de eventos al even-
to “keyup” de JavaScript, parecido al evento
.mouseup pero esta vez en el teclado.
Ejemplo $(“miseleccion”). keyup(function() {
//Mis acciones
})
Evento . keypress()
“keypress” de JavaScript. Este evento se acti-
vará cuando ocurra el keyup y keydown en el
mismo evento, por ejemplo, si pulsamos una
tecla en un campo de un formulario y nos va-
mos a otro campo con el ratón (sin soltar la
tecla y si no repite la tecla en tiempo) no se
llamará a este evento.
Aula Mentor
Ejemplo $(“miseleccion”). keypress(function() {
//Mis acciones
})
Veamos varios ejemplos:
Ejemplo .focusout()
356
Puedes visitar el ejemplo6-eventos-teclado/
Tendríamos en el html:
...
<div class=”unaCaja”>
<h3>.focusout()</h3>
<h5>Ve pasando de un a otro campo ya sea con el TAB o con el ratón y captura el evento
.focusout()</h5>
<label>Nombre</label>
<input type=”text” name=”nombre” value=”” class=”misInput”>
<label>Apellidos</label>
<input type=”text” name=”Apellidos” value=”” class=”misInput”>

M3. JQUERY
<label>Teléfono</label>
<input type=”text” name=”” value=”” class=”misInput”>
<p id=”textoSalida1”>focusout activado: 0 veces</p>
</div>
...
En el CSS:
.unaCaja{
width: 250px;
height: 250px;
border-width: 1px;
border-color: blue; 357
text-align: right;
h3, h5{
text-align: center;
En nuestro archivo jQuery:
var focus = 0;
$( “.misInput” )
.focusout(function() {
focus++;
$( “#textoSalida1” ).text( “focusout activado: “ + focus + “ veces” );

Aula Mentor
});
Ejemplo .keydown, .keypress y .keyup
Vamos a ver un ejemplo muy interesante en el que sacaremos muchas conclusiones y

además comprobaremos que podemos capturar que está haciendo el usuario en cada momento,
además, el orden que el navegador ha detectado en cada momento, no siempre sera el mismo,
por ejemplo, si pulsas una tecla y no la sueltas, se escribirán muchas letras, pero no se activará
el keyup:
Puedes visitar el ejemplo6-eventos-teclado
En la parte de html podríamos tener el siguiente código:

358
...
<h3>.keypress(),.keyup(),.keydown()</h3>
<h5>Escribe una letra o varias, pero observa el Orden y el número de veces que se
activa.</h5>
<p id=”textoSalida2”>(ORDEN: <span></span>)keydown activado: 0 veces</p>
<p id=”textoSalida3”>(ORDEN: <span></span>)keypress activado: 0 veces</p>

M3. JQUERY
<p id=”textoSalida4”>(ORDEN: <span></span>)keyup activado: 0 veces</p>
</div>
...
Y en la parte de jQuery tendríamos:
var keypress = 0;
var keydown = 0;
var keyup = 0;
var posicion = 0;
.keydown(function() {
posicion++;
keydown++;
359
$( “#textoSalida2” ).text( “(ORDEN: “+posicion+”)keydown activado: “ + keydown + “ veces” );
})
.keypress(function() {
posicion++;
keypress++;
$( “#textoSalida3” ).text( “(ORDEN: “+posicion+”)keypress activado: “ + keypress + “ veces” );
})
.keyup(function() {
posicion++;
keyup++;
$( “#textoSalida4” ).text( “(ORDEN: “+posicion+”)keyup activado: “ + keyup + “ veces” );

Aula Mentor
});//¡OJO! EL “;” Indica al navegador cuando dejamos de escuchar eventos de $( “.misInput” )
Debes fijarte que podemos “escuchar” diferentes eventos sobre el mismo selector, en este
caso, para ahorrar código se puede usar seguidos uno detrás del otro, y finalizaremos cuando
pongamos el punto y coma. Es un fallo típico poner el “;” antes y no se ejecutarán las capturas de
eventos que hayamos declarado a continuación, deberemos declarar nuevamente el selector $(
“seleccion” ).evento en el mejor de los casos, pero lo normal es que nos dé un error de Script
y no funcionará nada de ese bloque.
Te aconsejo que hagas la siguiente prueba, cambia el “;” que hay al final del evento .ke-
yup e insertalo en el evento anterior key.
.keypress(function() {
posicion++;
keypress++;
$( “#textoSalida3” ).text( “(ORDEN: “+posicion+”)keypress activado: “ + keypress + “ veces” );
}); // <-- Pon aquí el punto y coma
360 .keyup(function() {
posicion++;
keyup++;
$( “#textoSalida4” ).text( “(ORDEN: “+posicion+”)keyup activado: “ + keyup + “ veces” );
})// <-- Quita de aquí el punto y coma
Si ejecutamos nuestro script, no funcionará nada, y si usamos el modo depurador del

navegador y nos vamos a la pestaña console nos indicará en Google Chrome el error que nos
dá:
Incluso nos dice más, a la derecha nos dirá el nombre del archivo y la línea donde ha co-
menzado a tener el error o ha detectado un error de patrón, en este caso, ha detectado el token
. que para el navegador es que ha terminado de leer los eventos y no entiende a qué elemento
le estamos escuchando el evento, ya que no corresponde con la sintaxis correcta $( “seleccion”
).evento.
Podemos saber cuándo ha pulsado o escrito un carácter el usuario, y también podemos saber el
número de caracteres que tiene un campo, podremos pasar al siguiente campo cuando se haya
rellenado, por ejemplo el dni o número de teléfono tiene un número fijo de caracteres, cuando
M3. JQUERY
lleguemos a su tope, podemos pasar al siguiente campo, ahorrando al usuario incluso que tenga
que pulsar el tabulador TAB.
6.3. Eventos de formularios.
Otro de los eventos que nos son muy útiles en nuestras páginas web es el control sobre
los formularios, es decir, escuchar y detectar los estados diferentes del formulario y poder inte-
ractuar con ellos una vez que el usuario los ha lanzado.
A continuación vamos a ver los difirentes eventos que podemos detectar.
Evento .blur()
“blur” de JavaScript, El evento blur se dispa-
ra cuando pierde el foco de control. Indica-
do para los formularios: text, textarea, button,
checkbox, fileupload, password, radio, reset y
submit.
Ejemplo $(“miseleccion”). blur(function() {
//Mis acciones
})
361
Evento .change()
“change” de JavaScript, Con este envento po-
dremos detectar entre otras cosas cuando el
usario ha cambiado el estado de alguna selec-
ción multiple.
Ejemplo $(“miseleccion”). change(function() {
//Mis acciones
})
Evento .focus()
“focus” de JavaScript, detectando cuándo el
elemento en cuestión tiene el foco del nave-
gador.
Ejemplo $(“miseleccion”). focus(function() {
//Mis acciones
})
Aula Mentor
Evento .focusin()
Descripción Detectaría cuándo el elemento ha cogido el
foco del navegador.
Ejemplo $(“miseleccion”). focusin(function() {
//Mis acciones
})
Evento .select()
“select” de JavaScript, detectando si el usuario
ha realizado alguna selección en el formulario
Ejemplo $(“miseleccion”). select(function() {
//Mis acciones
})
Evento .submit()
“submit” de JavaScript, detectando cuándo el
362 usuario ha realizado submit en un formulario.
Este evento es muy utilizado para confirmar
y detectar si el usuario ha rellenado correcta-
mente los datos de un formulario, por ejemplo,
no lo dejaremos pasar hasta que haya escrito
el texto, Entiendo y acepto las condiciones.
Ejemplo $(“miseleccion”). submit(function() {
//Mis acciones
})
Vemos algunos ejemplos:
.focusout vs .blur vs .focus vs .focusin
Debido a las similitudes de algunos métodos, vamos a realizar un ejemplo, donde los
vamos a enfrentar y ver, qué elemento se coge antes y en qué momento correcto se activaría.
FocusIn se activa justo al inicio de coger el foco del elemento cuando estamos en un
campo de texto, pero si se trata de un elemento dentro de otro, el elemento padre, tomará el
focusIn, pero nunca cogerá el focus, lo hará el elemento hijo. Para ello, fíjate en el ejemplo
que hay dos partes, una donde se muestra los eventos que hay cuando nos movemos dentro
de nuestro formulario, y otra donde mostramos los valores respecto del div. Es muy importante
tener claro ésto porque podemos detectar que dependiendo del caso, nunca se llega a ejecutar
el evento que deseamos sobre el elemento.
M3. JQUERY
Puedes visitar el ejemplo7-eventos-form/
Respecto al html tendríamos lo siguiente:
...
<p>Respecto a nuestra caja o div</p>
<p id=”textoSalida5”>(ORDEN: )Focus activado: 0 veces. Color -> Rojo</p>

363
<p id=”textoSalida6”>(ORDEN: )FocusOut activado: 0 veces. Color -> Verde</p>
<p id=”textoSalida7”>(ORDEN: )FocusIn activado: 0 veces. Color -> Vainilla</p>
<p id=”textoSalida8”>(ORDEN: )Blur activado: 0 veces. Color -> Azul</p>
<h3>.focusout() vs .blur</h3>
<h5>Ve pasando de un a otro campo ya sea con el TAB o con el ratón y capta el evento
.focusout()</h5>

Aula Mentor
<p id=”textoSalida1”>(ORDEN: )Focus activado: 0 veces</p>
<p id=”textoSalida2”>(ORDEN: )FocusOut activado: 0 veces</p>
<p id=”textoSalida3”>(ORDEN: )FocusIn activado: 0 veces</p>
<p id=”textoSalida4”>(ORDEN: )Blur activado: 0 veces</p>
</div>
...
Respecto al jQuery
//Variables para dentro de la caja
364 var focus = 0;
var focusout = 0;
var focusin = 0;
var blur = 0;
//Variables para la caja
var midivfocus = 0;
var midivfocusout = 0;
var midivfocusin = 0;
var midivblur = 0;
M3. JQUERY
//Contadores para ver el orden de llamada
var midivposicion = 0;
var posicion = 0;
.focus(function(){
$(this).css(“background-color”,”lime”);
posicion++;
focus++;
$( “#textoSalida1” ).text( “(ORDEN: “+posicion+”)Focus activado: “ + focus + “ veces” );
})
.focusout(function(){
$(this).css(“background-color”,”#ffffff”);
posicion++; 365
focusout++;
$( “#textoSalida2” ).text( “(ORDEN: “+posicion+”)FocusOut activado: “ + focusout + “ veces” );
})
.focusin(function(){
posicion++;
focusin++;
$( “#textoSalida3” ).text( “(ORDEN: “+posicion+”)FocusIn activado: “ + focusin + “ veces” );
})
Aula Mentor
midivfocusout++;
$( “#textoSalida6” ).text( “(ORDEN: “+posicion+”)FocusOut activado: “ + midivfocusout + “ veces.

Color -> Verde” );
})
$(this).css(“background-color”,”#FFFFCC”);
midivposicion++;
midivfocusin++;
$( “#textoSalida7” ).text( “(ORDEN: “+posicion+”)FocusIn activado: “ + midivfocusin + “ veces.

Color -> Vainilla” );
})
.blur(function(){
$(this).css(“background-color”,”blue”);
366 midivposicion++;
midivblur++;
$( “#textoSalida8” ).text( “(ORDEN: “+posicion+”)Blur activado: “ + midivblur + “ veces. Color ->

Azul” );
});
Y como CSS:
M3. JQUERY
.unaCaja{
width: 270px;
height: 360px;
border-width: 1px;
border-color: blue;
text-align: right;
margin-top: 30px;
h3, h5{
text-align: center;
Experimenta con el archivo y comprueba cuando se activa cada evento. 367
Ejemplo .change(), .submit() y .select()
Vamos a ver un ejemplo usando los tres eventos, change, submit y select, ambos muy
usuales en los formularios, como son un select con varias opciones, donde mostraremos si ha
existido algún cambio de la selección original, además tendremos un textarea donde obligare-
mos al usuario a que escriba un texto concreto “He leido y acepto las condiciones” muy útil para
los formularios que requieran confirmar que el usuario ha leído y acepta las condiciones. Por
último comprobaremos que todo está correcto y si es así, enviaremos el formulario, en nuestro
caso, mostraremos un alert indicando al usuario que se va a enviar el formulario.
Puedes visitar el ejemplo8-eventos-form2/
En el archivo html tendríamos:

Aula Mentor
<form action=”javascript:alert( ‘SE ENVIARÁ EL FORMULARIO!’ );”>
<input id=”txtNombre” type=”text” name=”nombre” value=””>
<br>
<label>¿Qué sabes para hacer aplicaciones web?</label>
<br>
<select name=”web” multiple=”multiple”>
<option>HMLT5</option>
<option selected=”selected”>CSS3</option>
<option>JQUERY</option>
<option selected=”selected”>JQUERY MOBILE</option>
368 </select>
<label>Seleccionado en tiempo real .change()</label>
<p id=”textoSalida1”></p>
<textarea id=”condiciones” rows=”5” cols=”30” placeholder=”Debes escribir [ He

leído y acepto las condiciones ] para poder enviar el formulario”></textarea>
<br>
<input type=”submit” name=”enviar” valor=”Enviar Formulario”>
</form>
<p id=”textoSalida2”>Debes escribir que aceptas las condiciones para continuar y escribir tu
nombre</p>
</div>
En el CSS tendríamos:
M3. JQUERY
.unaCaja{
width: 270px;
height: 400px;
border-width: 1px;
border-color: blue;
text-align: right;
margin-top: 30px;
select{
width: 250px;
369
h3, h5{
text-align: center;
Y en el jQuery:
//----------------------------------------------------------------------
// Para ayudar al usuario a saber en que seccion esta escribiendo
$(“div”)
.focusout(function(){
$(this).css(“background-color”,”white”);
})
Aula Mentor
$(this).css(“background-color”,”#FFFFCC”);
});
//----------------------------------------------------------------------
// Controlamos cuando realizamos algún cambio en el select
$( “select” )
.change(function () {
var str = “”;
$( “select option:selected” ).each(function() {
str += $( this ).text() + “ | “;
});
370 $( “#textoSalida1” ).text( str ).css(“color”,”blue”);
});
//----------------------------------------------------------------------
//Controlamos que el usuario haya aceptado las condiciones
$( “form” ).submit(function( event ) {
if ( $( “#condiciones” ).val() === “He leido y acepto las condiciones” && ($( “#txtNombre” ).val().
length > 0)) {
$( “#textoSalida2” ).text( “Has aceptado las condiciones, se enviará el formulario” ).show();
return;
}
M3. JQUERY
$( “#textoSalida2” ).text( “Repito: Debes escribir ‘He leído y acepto las condiciones’ para continuar
y escribir tu nombre” );
event.preventDefault();
});
});//fin de la lectura del document
En este caso hemos usado varias cosas nuevas, una muy importante y que se va a usar
mucho cuando tengamos varias opciones, o mejor dicho un conjunto de datos devuelto, como
es el caso de la selección múltiple es la función .each, donde iterará con cada uno de los ele-
mentos devueltos. Ésto se suele usar mucho para iterar cuando se realiza una selección amplia
de elementos en jQuery y queremos iterar por ellos.
Otro elemento nuevo usado es event.preventDefault() que veremos más adelante pero
adelantamos que lo podemos usar cuando deseamos cancelar o evitar el comportamiento por
defecto del navegador frente a un determinado evento, como en este caso para el formulario.
6.4. Eventos de documento.
También tenemos un evento que nos informa que se ha leído correctamente el docu-
mento y a partir de ese momento podremos hacer nuestros acciones con jQuery. Realmente ya 371
lo hemos usado anteriormente, sería el evento:
.ready()
Vemos un sencillo ejemplo, y así nos sirve de repaso. En el ejemplo3-selectores/
Mostrábamos una alerta indicando al usuario que ya se había leído el documento y po-
díamos trabajar con él, en esta ocasión vamos a mostrar un texto para ser menos intrusivos y
hacer una navegación más fluida. Sólo tendremos que hacer lo siguiente:
$( document ).ready(function() {
$( “p” ).text( “El DOM ha sido cargado y ahora podemos trabajar con él.” );
});
Y el fichero HTML tendría que tener un aspecto como éste:
..
<body>
<p>Todavía no está disponible el DOM, por favor espera</p>

Aula Mentor
</body>
..
Es posible que veas por internet otros métodos asociados al documento .load y .unload, estos
métodos han sido decrapted a partir de las versión 1.8, por lo que no debes usarlo y aún menos
si usas la versión 2.x.
El método .ready da problemas de incompatibilidades cuando se usa <body onlad=”…”> por lo

que debes evitar usar este último y hacerlo todo desde el método .ready de jQuery.
6.5. Eventos del navegador.
El propio navegador o Browser nos da información sobre si el usuario ha interactuado

con él, cambiando el tamaño de la ventana o actuando sobre el scroll. Tendríamos por tanto dos
eventos:
Evento .resize()
“resize” de JavaScript, detectando cuando el
usuario ha realizado un cambio de tamaño de
la ventana del navegador
Ejemplo $(“miseleccion”). resize(function() {
372
//Mis acciones
})
Evento .scroll()
“scroll” de JavaScript, detectando cuando el
usuario ha interactuado con el scroll
Ejemplo $(“miseleccion”). scroll(function() {
//Mis acciones
})
Ejemplo .resize()
Supongamos que necesitamos saber el tamaño actual que tiene el navegador del usuario
o si ha redimensionado el tamaño del mismo, podríamos usar el evento .resize() para tal acción:
M3. JQUERY
Puedes visitar el ejemplo9-eventos-navegador/
En el fichero html tendríamos:
<p> Cambia el tamaño de la ventana del navegador y te mostrare sus dimensiones.</p>
<p id=”tam”><p>
373
Y en el archivo jQuery:
$( window ).resize(function() {
$( “#tam” ).text($( window ).width() + “(ancho) x “ + $( window ).height() + “(alto)”);
});
Ejemplo .scroll()
Vamos hacer un pequeño script para detectar cuando el usuario ha usado el scroll, para
ello vamos a escribir varios párrafos y vamos a cambiar el tamaño de la ventana, para forzar que
aparezca el scroll por la cantidad. Una vez que se active, cuando movamos éste, pondremos un
detector.
Puedes visitar el ejemplo9-eventos-navegador/

Aula Mentor
En el archivo html tendríamos:
...
<p id=”miscroll”>SENSOR: <span>Detectado Movimiento Scroll</span><p>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
...
En el CSS:
374 span {
color: red;
display: none;
font-size: 18px;
Y el script en jQuery sería:
$( window ).scroll(function() {
$( “span” ).css( “display”, “inline” ).fadeOut( “slow” );
});
6.6. El objeto Event.
El objeto Event es pasado a todos los eventos que se lanzan, y como era de esperar, al
igual que en los otros eventos podemos usar algunos atributos que nos van a venir muy bien
para nuestras aplicaciones web.
M3. JQUERY
Atributo .event.currentTarget
Descripción Devuelve el elemento actual sobre el que se
ha lanzado el evento. Muy parecido al this en
la Programación Orientada a Objetos.
Ejemplo $( “p” ).click(function( event ) {
alert( event.currentTarget === this ); // true
});
Ejemplo10-event/index.html#event.cu-
rrentTarget
Resumen En este ejemplo, seleccionaríamos el párrafo y
cuando hagan click sobre el, comprobamos si
el atributo event.currentTarget es igual al ob-
jeto this, el cual nos da true, por lo que pode-
mos referirnos a él de ambas formas.
375
Atributo .event.data
Descripción Devuelve los datos que hayamos podido pasar
al evento cuando se asocia con .bind. (En el
siguiente apartado vemos el evento .bind)
Aula Mentor
Ejemplo …..
…..
$(“.misParrafos”).each(function(i){
$(this).on(“click”,{x:i},function(event){
alert(“El indice del DOM es: “ + $(this).

index() + “. y este párrafo tiene el siguiente
dato: “ + event.data.x);
});
});
…..
…..
<p class=”eventData”>Párrafo 1</p>
376 <p class=”eventData”>Párrafo 3</p>
Ejemplo10-event/index.html#event.data
M3. JQUERY
Explicación En este caso hemos usado varias funciones

que no habíamos visto, como es
.on( events [, selector ] [, data ], handler )
En vez de detectar el evento de la forma: se-

leccion.click(… ) se pueden pasar el evento
.click y todos los demás eventos de la forma
expuesta anteriormente. Donde events es el
evento que va a buscar, data el conjunto de
datos, y handler el controlador o lo que va-
mos hacer nosotros con ese evento.
En este ejemplo hemos cogido el evento click,

los datos x e i, y en la función usamos una
función en la cual mostraremos los datos que
deseemos. En este caso, vamos a usar un nue-
vo método que nos devuelve el índice de un
elemento dentro de la selección, en este caso,
sería del elemento $(this).index(), pero en el
siguiente ejemplo se entenderá más fácilmen-
te:
<ul>
<li>Elemento 1</li> 377
<li>Elemento 2</li>
<li>Elemento 3</li>
<li>Elemento 4</li>
</ul>
(Recuerda que las listas siempre empiezan en

0 no en 1) Podríamos hacer:
$(document).ready(function() {
$(‘ul li’).click(function() {
var i = $(this).index();
Aula Mentor
alert(‘Has seleccionado el elemento

número: ‘+i);
});
});
Atributo .event.preventDefault()
Descripción Como hemos usado en varias situaciones (for-
mularios, ondragover…) si llamamos a este
método dentro de un evento, la acción pre-
determinada que se ejecutaría será cancelada.
Ejemplo ….
….
$( “#mipreventDefault” ).click(function( event

){
378
$( “<div>” )
.append( “Evento: “ + event.type + “ cance-

lado. Muestro un texto” )
.appendTo( “#log” );
});
….
….
<a id=”mipreventDefault” href=”http://www.

google.es”>La acción por defecto es abrir una
ventana</a>
<div id=”log”></div>
….
….
Ejemplo10-event/index.html#event.preven-
tDefault
M3. JQUERY
Resumen En este ejemplo tenemos un enlace a una pá-

gina web, y el uso normal de los enlaces o
link, es cuando se pulsa sobre ellos, llama-
mos al evento click y posteriormente cogemos
los datos y mandamos una orden al navega-
dor que abra esa ventana. ¿Cómo podemos
cambiar o modificar ésto? Podemos detener
su acción por defecto y hacer otras acciones,
en este caso, usamos un método para aña-
dir elementos HTML, como puede ser texto
.append y conforme vamos haciendo click, se
van añadiendo elementos.
Atributo .event.isDefaultPrevented()
Descripción Devuelve true o false si ha sido lanzado el
método preventDefault() o no.
Ejemplo ….
….
$( “#esMipreventDefault” ).click(function(
event ) {
379
alert( “No he abierto el enlace sino una venta-
na: El valor de isDefaultPrevented es: “ event.
isDefaultPrevented() ); // true
});
….
….
<a id=”esMipreventDefault” href=”http://www.

google.es”>Haz click y te mostraré cuando he
cancelado el evento</a>
Ejemplo10-event/#event.isDefaultPrevented
Aula Mentor
Resumen En este ejemplo tenemos un enlace a una pá-

gina web, y el uso normal de los enlaces o
link, es cuando se pulsa sobre ellos, llamas
al evento click y posteriormente cogemos los
datos y mandamos una orden al navegador
que abra esa ventana. ¿Cómo podemos cam-
biar o modificar ésto? Podemos detener su ac-
ción por defecto y hacer otras acciones, en
este caso, usamos un método para añadir tex-
to .append y conforme vamos haciendo click,
se van añadiendo elementos.
Atributo .event.stopPropagation()
Descripción Previene que se ejecute cualquier evento que
pudiera estar asociado a los padres del ele-
mento dentro del árbol DOM. Muy útil para
evitar las propagaciones jerárquicas entre ele-
mentos del evento en cuestión.
380
M3. JQUERY
Ejemplo ….
….
<a name=”event.stopPropagation”></a>
<h3><a href=”#event.stopPropagation”>event.
stopPropagation (Activado en el div)</a></
h3>
<div id=”midiv”>
Elemento div, mi caja.
<p id=”mip”>Esto es un elemento p, den-

tro de un div. <br><span id=”mispan”>Esto
es un elemento span dentro de un párrafo.</
span>
</p>
</div>
….
381
….
$(“#mispan”).click(function(event){
event.stopPropagation();
alert(“El elemento span ha sido clic-

keado.”);
});
$(“#mip”).click(function(event){
alert(“El elemento p ha sido clickea-

do.”);
});
Aula Mentor
$(“#midiv”).click(function(){
alert(“El elemento div ha sido clic-

keado..”);
});
Ejemplo10-event/#event.stopPropagation
Resumen En este ejemplo vamos a detener la propaga-

ción del elemento click por los componentes
jerárquicos. Tenemos un <div> que contie-
ne un párrafo <p> que a su vez contine un
<span>. Si hacemos click en el <div> nos mos-
trará un mensaje indicado que ha sido clickea-
do, si lo hacemos en el párrafo, nos aparece-
rá dos alerta, el del <p> más el de su padre
<div>. Para evitar que se propague los eventos
jerárquicamente a los elementos ascendentes,
usamos event.stopPropagation(); en este caso
si lo ponemos en el elemento más interno,
el <span> vemos que se ejecuta el evento
.click() pero que no se propaga a sus padres,
abuelos, etc.
382
Atributo .event.isPropagationStopped()
Descripción Devuelve si el método anterior stopPropaga-
tion() ha sido llamado.
M3. JQUERY
Ejemplo ….
….
<button id=”mibutton”>Púlsame</button>
<div id=”midiv3”></div>
….
….
function estaParadaLaPropagacion(
event ) {
var msj = “¿Está para la propa-

gación?”;
$( “#midiv3” ).append( “<div>”

+ msj + “</div>” );
if ( event.isPropagationStop-
ped() ) {
msj = “Si lo está.”; 383
} else {
msj = “No lo está.”;

+ msj + “</div>” );
$( “#mibutton” ).click(function(event) {
estaParadaLaPropagacion( event );
Aula Mentor
$( “#midiv3” ).append( “<div>” + msj + “</

div>” );
$( “#mibutton” ).click(function(event) {
$( “#midiv3” ).append( “<div>” +

“Paramos la propagación con el método
<i>stopPropagation()</i>” + “</div>” );
});
Puedes visitar el ejemplo10-event/#event.is-

PropagationStopped
En este ejemplo nos creamos un botón me-
diante <button>, entonces lanzamos el evento
Resumen .click. Además, nos hemos creado un función
384 para ayudarnos a saber cuál es el estado actual
del evento, estaParadaLaPropagacion( event ),
éste sólo hace lo siguiente:
- 1) Muestra mensaje “¿Está para la propaga-

ción?”
- 2) Compruebo si ha sido llamado stopPropa-

gation().
- 3) Muestro mensaje indicando el resultado.
Posteriormente llamo al evento stopPropaga-

tion() y vuelvo a llamar a mi función estaPara-
daLaPropagacion para comprobar su estado.
Atributo .event.pageX , .event.pageY

Estos dos métodos los vimos en el ejemplo del
método .resize(), y se pueden utilizar juntos o
Descripción por separados, se han unificado debido a la si-
milud y relación. Con event.pageX tendríamos
la posición relativa del ratón del lado o es-
quina izquierda del documento, y con event.
pageY tendríamos la posición relativa del ra-
tón respecto al lado o esquina superior del
documento.
M3. JQUERY
Ejemplo ….
http://localhost/MOD3.JQUERY/U6/Ejem-
plo5-eventos-mouse/
….
Resumen Ejemplo visto anteriormente, donde obtene-
mos las coordenadas del ratón dentro de un
rectángulo azul.
Atributo event.stopImmediatePropagation()
Descripción Previene que se ejecuten otras acciones que
estén asociadas al evento.
Ejemplo ….
<div id=”midiv4”><p>Soy un texto dentro de

un div, pero tengo el evento .click, ¡Púlsame y
lee los mensajes!</p></div>
<p id=”mip4”>Soy otro texto, pero tengo el

evento .click, ¡Púlsame y lee los mensajes!</
p></div>
…. 385
….
$(“#midiv4”).click(function(event){
alert(“Evento 1 ejecutado antes de llamar a

stopImmediatePropagation(), solo me ejecuta-
ré yo”);
event.stopImmediatePropagation();
});
alert(“Evento 2 ejecutado, No podrás verlo

porque he llamado antes a stopImmediatePro-
pagation, si comentas la llamada, me mostra-
ré”);
….
});
Aula Mentor
alert(“Evento 3 ejecutado, No podrás verlo

porque he llamado antes a stopImmediatePro-
pagation, si comentas la llamada, me mostra-
ré”);});
$(“#mip4”).click(function(event){
alert(“Otro ejemplo donde si funciona y voy

a parar”);
});
$(“#mip4”).click(function(event){
alert(“Este mensaje si podrás verlo porque

este código está por debajo del primer .click y
no tiene ninguna llamada más al evento click
por debajo de él. “);
});
Resumen En este ejemplo vamos a usar dos veces el
evento en situaciones diferentes para com-
386 prender mejor su funcionamiento. Vamos a
tener un identificador midiv4 que vamos a
llamar varias veces con el evento .click, vere-
mos que si tenemos comentada la llamada al
evento event.stopImmediatePropagation(); se
ejecutarán los tres eventos seguidos uno de-
trás de otro y en ese orden. Si en el prime-
ro realizo event.stopImmediatePropagation();
solo se ejecutará el primer click. Si lo pongo
en el siguiente click se ejecutará hasta ahí.
Vamos a usar nuevamente el evento event.sto-

pImmediatePropagation(); pero esta vez en la
última llamada del evento click, y como vere-
mos no tiene ningún efecto y se ejecutarían
todas las llamadas anteriores al evento.
Atributo .event.isImmediatePropagationStopped()
Descripción Devuelve si el método anterior stopImmedia-
tePropagation() ha sido llamado.
M3. JQUERY
Ejemplo ….
….
<button id=”mibutton5”>Púlsame</button>
….
….
function estaParadaLaPropagacionIn-
mediata( event ) {
var msj = “¿Está parada la pro-

pagación inmediata?”;

+ msj + “</div>” );
if ( event.isImmediatePropaga-
tionStopped() ) {
msj = “Si lo está.”; 387
} else {
msj = “No lo está.”;

+ msj + “</div>” );
$( “#mibutton5” ).click(function(event)
{
estaParadaLaPropagacionInmediata( event );
Aula Mentor
$( “#midiv5” ).append( “<div>” + “Pa-

ramos la propagación inmediata con el méto-
do <i>stopImmediatePropagation()</i>” + “</
div>” );
estaParadaLaPropagacionInmediata(
event );
});
Puedes visitar el ejemplo10-event/#event.isIm-

mediatePropagationStopped
Resumen Al igual que comprobamos con el evento is-
PropagationStopped(), realizamos varias prue-
bas y mostramos al usuario si está parada o no
la propagación inmediatamente.
Atributo .event.target
Descripción Se refiera al elemento DOM que inició el
evento
388
M3. JQUERY
Ejemplo ….
….
<div id=”midiv6”>
Soy una etiqueta div
<p id=”mip6”>
Soy una etiqueta p
<strong id=”mistrong6”>Soy una

etiqueta Strong
<span id=”mispan6”>Soy
una etiqueta un span
</span>
</strong>
</p>
</div> 389
….
….
$( “#midiv6” ).click(function( event ) {
alert( “El elemento sobre el que has

hecho click ha sido: “ + event.target.nodeNa-
me );
});
Puedes visitar el ejemplo10-event/#event.tar-

get
Resumen En este ejemplo tenemos varios elementos
unos dentro de otros, le activamos el evento
.click y usamos el el .target.nodeName para
saber que elemento es el que ha disparado el
evento.
Aula Mentor
Atributo .event.timeStamp
Descripción Número en milisegundos desde el 1 de ene-
ro de 1970, desde que el evento fue lanzado.
Muy útil para comprobar tiempos de ejecu-
ción de nuestros script.
Ejemplo …
<div id=”midiv7”>
<button id=”mibutton7”>Haz click

para iniciar contador.</button>
<button id=”mibuttonReset7”>Resetear
temporizador y
vueltas.</button>
</div>…
var tiempo, diferencia, vuelta = 0;

390
var iniciadoTemporizador = false;
$( “#mibutton7” ).click(function( event ) {
if ( tiempo ) {
diferencia = event.timeStamp - tiempo;
$( “#midiv7” ).append( “<p

class=’cuentaVueltas’>Vuelta: “ + vuelta +
“ Diferencia:” + diferencia + “</p>” );
} else {
$( “#midiv7” ).append( “<br>Iniciado

temporizador!!.<br>” );
vuelta++;
if(!iniciadoTemporizador){
M3. JQUERY
alert(“INICIADO TEMPORIZA-
DOR”);
tiempo = event.timeStamp;
$( “#mibutton7”).text(“Pulsa
aquí para contar vuelta”);
iniciadoTemporizador = true;
});
// Si el usuario hace click en el botón de la

pantalla reiniciamos el contador y el número
de vueltas
$( “#mibuttonReset7”).click(function(event){
tiempo = event.timeStamp;
vuelta = 0;
$( “.cuentaVueltas”).remove(); 391
});
/* Con .remove() eliminamos las etiquetas

html que tenga el selector */
Puedes visitar el ejemplo10-event/#event.ti-

meStamp
Aula Mentor
Resumen En este ejemplo usamos el evento .timeStamp

para crearnos un pequeño temporizador y
contador de vueltas. Para ello tenemos va-
rias variables, donde almacenaremos el tiem-
po actual, la diferencia, si hemos lanzado el
temporizador por primera vez y el número de
vueltas.
Cuando lanzamos el evento .click sobre el

boton mibutton7 lo que hacemos es iniciar
el temporizador, informar al usuario con una
ventana de alerta y cambiar el texto del botón
al Pulsa aquí para contar vuelta y a partír de
ahí cada vez que entre porque el usuario lan-
ce de nuevo el evento click mostraremos el
tiempo que lleva y el número de vueltas.
Cuando el usuario haga click sobre el botón de

reset, lanzará su evento .click y realizaremos
varias acciones, poner el número de vueltas a
0, eliminar todos los textos que hemos escrito
anteriormente y tomar de nuevo el tiempo.
Debes entender este ejercicio completamen-

te, ya que es un ejemplo completo de todo
392 lo que se puede hacer con jQuery. Si tuvie-
ras dudas, saca el diagrama de flujo del pro-
grama e intenta ver la secuencia y toma de
decisiones que tiene en cada proceso. Pen-
semos que cada inicio de algoritmo lo lanza
el evento y a partir de ahí, se mete en el
flujo de nuestro script. Cualquier duda que
tengas al respecto coméntaselo a tu tutor.
Atributo .event.which
Descripción Cuando estamos usando evento de entrada
(teclado o ratón), con event.which podemos
detectar qué botón ha sido pulsado, si es del
ratón, el botón derecho, el izquierdo o el có-
digo de la tecla del teclado.
M3. JQUERY
Ejemplo …
<label>Introduce una letra y te devolveré su

código</label>
<input id=”miinput8” value=””

placeholder=”Introduce una letra” maxleng-
th=”1”>
<div id=”milog8”></div>
<label>Pulsa los botones de tu ratón

por encima del recuadro
</label>
//Detecto el botón pulsado del ratón 393
if(event.which == 1)
$(“#midiv8”).append(“<br>Has pre-
sionado el botón izquierdo: “ +
event.which);
else if (event.which == 2)
sionado el botón
central/ruedaderecho: “ +
event.which);
else if (event.which == 3)
sionado el botón derecho: “ +
Aula Mentor
event.which);
else
sionado otro botón de tu
raton: “ + event.which);
//Detecto la tecla pulsada del teclado
$( “#miinput8” ).on( “keydown”, function(

event ) {
$( “#milog8” ).append(“<br>” + event.

type + “: “ + event.which );
});
394
Puedes visitar el ejemplo10-event/#event.
which
Resumen En este ejercicio nos creamos un input de
máximo un carácter para ver que código es el
que corresponde. Debemos recordar que cada
tecla corresponde a un código y este código
es el que indicará al sistema operativo qué
tecla ha pulsado. Usamos para ello el even-
to .keydown en la forma .on(“keydown”….
Como vimos en otras ocasiones y añadimos el
mensaje a un div que me he creado para mos-
trar el resultado, podíamos usar otra etiqueta
y otra forma.
Con el ratón me he creado una zona de ejem-

plo donde voy a detectar qué botón ha pulsa-
do del ratón, y dependiendo del valor que me
devuelva event.which, indico al usuario qué
botón ha presionado.
Podía haber usado este evento no

sólo para midiv8, sino para toda la
pantalla sólo con usar $(“body”).
mousedown(function(event)… en vez de
$(“#midiv8”).mousedown(function(event)…
M3. JQUERY
6.7. Gestor de eventos.
Además de tener los eventos anteriormente comentados, para controlar el documento,

controlar las entradas del usuario (teclado/ratón), eventos de formularios, etc. tenemos unos
métodos para poder controlar los eventos, y aunque ya hemos usado algunos en alguna ocasión,
entre los más destacados tendríamos los siguientes:
.bind()
Este método es uno de las más importantes de jQuery, ya que podemos asociar fun-
ciones a eventos de elementos tanto del DOM como del navegador, en principio puede dar la
sensación de hacer lo mismo y en parte tiene el mismo resultado, lo bueno que nos facilita una
opción que de la otra forma no podíamos usar, y es asociar eventos simultáneamente, pasar
parámetros a eventos o lanzar nuestros propios eventos.
Veamos un ejemplo, para asociar el evento .onclick a un elemento HTML podíamos usar:
$(“miseleccion”).click(function(event){
//Mis acciones
});
Por ejemplo:
395
alert(“Has hecho click sobre el elemento.”);
});
Si queremos que cuando el usuario pase el ratón por encima del elemento, al hacer click
o doble click, realice unas acciones; en este caso mostrar una ventana, podemos usar la lista de
eventos como primer parámetro seguido de espacio y todos ellos entre comillas:
$(“#midiv9”).bind(“click dblclick mouseover”, function(event){
alert(“Has pasado el ratón por el elemento, click o doble click sobre él.”);
});
Puedes visitar el ejemplo10-event/#.bind
Dado el ejemplo mostrado, para poder realizar click o doble click, debemos cerrar la
ventana con el teclado y no con el ratón, sino no podremos detectar el evento click o doble click
al salirnos del área del elemento y activar nuevamente el evento mouseover.
.unbind()
Aula Mentor
Con este método podemos desenlazar un evento del elemento que deseemos. Por ejem-
plo, si queremos dejar de ejecutar cierto evento en algunas circunstancias podemos hacerlo.
Puede ser muy útil cuando queramos evitar que el usuario realice algunas acciones sobre nues-
tros elementos HTML y tener el control de cuándo se puede o no se puede lanzar un evento.
Vamos a ver el siguiente ejemplo, donde vamos a tener tres botones, un botón que mos-
trará una ventana miButton y otros dos para activar/desactivar el evento click del primer botón,
en el HTML tendríamos:
...
<label>Cuando actives el evento Click y pulses sobre el botón, aparecerá una ventana</label>
<br>
<button id=”miButton”>Desactivado evento .click</button>
<button id=”activaClick”>Activa evento Click</button>
<button id=”desactivaClick”>Desactiva Click</button>
...
En el CSS:
396
#activaClick{
#desactivaClick{
background-color: orange;
Y en el jQuery :
M3. JQUERY
function funcionClick() {
alert(“Has podido hacer click sobre el botón.”)
$( “#activaClick” ).click(function() {
$( “#miButton” )
.bind( “click”, funcionClick )
.text( “Puedes hacer Click sobre mí” );
});
$( “#desactivaClick” ).click(function() {
$( “#miButton” )
.unbind( “click”, funcionClick ) 397
.text( “Desactivado evento .click” );
});
Puedes visitar el ejemplo10-event/#.unbind
.on( events [, selector ] [, data ], handler )
Como vimos anteriormente en un ejemplo, podemos usar esta definición para manejar
los eventos de nuestros elementos, en vez de dotar al elemento HTML del evento de la forma:
seleccion.click(… ). Se pueden pasar varios eventos de la forma anteriormente comentada.
Siguiendo con la definición de .on tendríamos:
Events: son los eventos que se buscan asociar al conjunto de elementos selecciona-
dos. Se pueden pasar una lista de eventos.
Selector: especifica los descendientes de los elementos seleccionados que d ispararán

el evento. Se trata de un parámetro opcional.
Data: indica cualquier tipo de datos que se necesite pasar al manejador cuando s e
dispara el evento. Es también un parámetro opcional y, por lo general, se corresponde con
un objeto jQuery.
Aula Mentor
Handler: se corresponde con el callback o acción a realizar después de que el

evento se dispare.
De esta forma podemos usar en el HTML:
<p id=”mip10”>Soy un párrafo, pero tengo el evento .click</p>
Y en el jQuery tendríamos lo siguiente:
function miaccion() {
alert(“Has podido hecho click sobre el párrafo.”);
$( “#mip10” ).on( “click”, miaccion );
Y funcionará igual que si lo hubieramos realizado de está forma:
$( “#mip10” ).click(function( event ) {
});
398
Una ventaja de usar el método .on() entre otras cosas es que podemos agregar varios
eventos de una vez, especificándolos de una vez:
$( “#mip10” ).on( “click dblclick”, miaccion );
Y también al igual que pasaba con otros métodos, es una buena práctica separarlos y si
hubiera que hacer acciones diferentes poder hacerlo separando los eventos por llaves y comas,
si por ejemplo tuvieramos el evento click y el evento dblclick, de una selección específica #miI-
dentificador y .miclase tendríamos:
$(‘#miIdentificador .miclase’).on({
click: function() {
},
dblclick: function() {
}
M3. JQUERY
});
Puedes visitar el ejemplo10-event/#.on
.off( events [, selector ] [, handler ] )
Al igual que con .on podemos agregar eventos, podemos usar este nuevo evento para
eliminar los eventos que tenga nuestro elemento html.
Podemos pasar también una lista de eventos al igual que pasaba con el anterior, un ejem-
plo puede ser agregar un botón auxiliar donde eliminemos los eventos que antes le hayamos
proporcionado:
<label>Presta atención en el siguiente párrafo</label>
<br>
<p id=”mip11”>Tengo activado el evento .mouseover y el evento .click</p>
<label>Si ahora pulsas sobre el botón eliminaré los eventos</label>
<br>
<button id=”miButton11”>Púlsame para eliminar los eventos .mouseover y .click del parrafo anterior.</
button> 399
En el jQuery podríamos tener:
$(‘#mip11’).on({
mouseover: function() {
$(this).css(“background-color”, “lime”);
},
click: function() {
});
//Ahora preparamos todo para que al pulsar el botón eliminemos los eventos
$(‘#miButton11’).click(function() {
$(‘#mip11’).off(“click mouseover”);
Aula Mentor
$(‘#mip11’).css(“background-color”, “#F3E2A9”);
});
Puedes visitar el ejemplo10-event/#.off
.one( events [, data ], handler )
Con este evento podemos controlar la ejecución de nuestro script una sola vez, y aunque
el usuario o el navegador intentara volver a ejecutarlo, no tendría ningún efecto. Veamos un
ejemplo sencillo donde al pulsar un botón mostramos mensaje; aunque el usuario pulse poste-
riormente el mismo botón no tendrá ningún efecto.
En el HTML podemos tener:
<button id=”miButton12”>Púlsame las veces que quieras, yo solo me ejecutaré una vez.</button>
Y en el jQuery:
$(‘#miButton11’).one(“click”,function(){
alert(“Has podido abrir una ventana, ya no podrás ejecutar más este evento en el elemento “);
});
400
Ahora veremos un ejemplo un poco más complejo pero más divertido, muchas veces
podemos “jugar” con los eventos para crear al usuario algo divertido y crear un juego, aunque
debemos pensar también en las aplicaciones que podrían tener para nuestras aplicaciones web.
Debes estar muy atento a este ejemplo, ya que tocamos muchos aspectos, CSS, HTML,
selectores, eventos, jQuery, etc y uniéndolo todo podemos crear una aplicación mucho más
compleja. Supongamos que queremos crear el siguiente juego.
Vamos a usar algunas funciones especiales que nos ofrece JavaScript, como es la gene-
ración de números aleatorios con el método Math.random(), este método nos genera un nú-
mero aleatorio, en nuestro ejemplo, vamos a crear un tablero donde aleatoriamente aparecerán
elementos con mina o sin mina. Tengo que adaptar un poco el método random() ya que me
genera un número decimal comprendido entre 0 y 1, por ejemplo si usamos la siguiente función
obtendremos un valor booleano (verdadero/falso o true/false) aleatorio, que es exáctamente lo
que queremos. Otro punto importante que vamos a usar en este ejemplo es la visualización,
seguimiento o depuración de nuestro programa, para ello nos vamos a ayudar de mensajes por
consola. Para ello, usamos dentro de nuestro código console.log(“texto”), y así podemos ir
realizando una traza y comprobar que con que datos o variables está funcionando nuestro script:
//función para devolver aleatoriamente SI o NO para poner minas aleatorias
function aleatorioBoleano(){
var valor = Math.random()*100;

M3. JQUERY
if(valor <= 50){
//Para ver que número está generando por consola
console.log(“NUMERO GENERADO : “+valor+” -> TRUE”);
return true;
}else{
console.log(“NUMERO GENERADO : “+valor+” -> FALSE”);
return false;
Ejemplos si lanzamos varias veces seguidas esta función:
401
Ahora debemos crearnos un tablero, para ello vamos a usar en este ejemplo <div></div>
con una sintaxis concreta, dos tipos de cajas, unas ConMina y otras SinMina para ello vamos a
tener los siguientes elementos:
<div class=’midiv13-mini-Sin’></div> <div class=’midiv13-mini-Con’></div>
También tendremos que tener unas variables para controlar el número de errores, en
principio se ha puesto un número fijo de 7, pero se podría pedir por un <input type=”text”, etc.
Para generar el tablero hemos decidido crear un sitio donde indicar al usuario el número
de errores actuaesl, y nos tendremos que crear un tablero de 6x6, es decir 36 elementos posible
donde podrá hacer click el usuario:
Aula Mentor
En el HTML5 tendríamos solamente el siguiente código:
...
<label>Algunas valdosas tienen una mina, haz click y si salen de color verde no te preocupes puedes
continuar</label>
402
<p id=”mensaje13”>ERRORES ACUMULADOS: </p>
<div id=”tablero”></div>
...
En el CSS3 tendríamos por tanto:

M3. JQUERY
#tablero{ color: white;
border:1px solid black; float: left;
background-color: orange; margin: 2px;
width:600px; }
height:600px; .midiv13-mini-Sin {
color: white; border:1px solid black;
} background-color: #F3E5A9;
.midiv13-mini-Con { width:94px;
border:1px solid black; height:94px;
background-color: #F3E5A9; color: white;
width:94px; float: left;
height:94px; margin: 2px;
} 403
Una de las ventajas de usar jQuery es crear elementos dinámicamente en tiempo de eje-
cución, por lo que no es necesario crear 36 <div> uno a uno escribiendolo en el código, pode-
mos crearnos una función que genere un número aleatorio, y devuelva verdadero o falso (true/
false) en cada interacción y crear en ese momento nuestro elemento que va a ser una mina o
sin mina. Para ello usamos como hemos usado en otras ocasiones el método .append que nos
añade HTML desde jQuery y en vez de crearlo manualmente, que sería lo mismo que insertar el
código en el HTML, llamamos mejor a una función que nos creará el código automáticamente
en cuestión de milisegundos:
function creaJuego() {
for (var i = 0; i < 36; i++) {
if(aleatorioBoleano())
$(this).append(“<div class=’midiv13-mini-Sin’></div>”);
else
$(this).append(“<div class=’midiv13-mini-Con’></div>”);
};
}
Aula Mentor
$(‘#tablero’).append(creaJuego);
Simplemente hemos creado un bucle for, donde creará 36 elementos, en cada interac-
ción llamo a la función que nos devolvía un valor aleatorio aleatorioBoleano() y dependiendo
de si es verdadero o falso, creo un elemento <div> de una forma u de otra. Hemos usado <div>
pero debemos saber a estas alturas, que podríamos agregar las etiquetas que creamos conve-
nientes, o usar <article>, <section>, etc.
Ya tenemos los elementos y el tablero creado, ahora debemos darle la interacción con
el usuario (eventos), para ello, nos vamos a crear el evento .click por ejemplo, se podría usar
.mouseover para hacerlo más dinámico o rápido, o cualquier otro que deseemos. Lo importante
de este ejemplo es que queremos usar el evento .click sólo una vez, por lo que debemos usar
el evento .one() y así nos aseguramos que el usuario sólo puede pulsar una vez sobre nuestro
elemento. Para ello, buscamos los elementos para su clase y los dotamos de los eventos .click
y dependiendo de si el elemento “tiene Mina” o no, lo ponemos de un color u otro. Para ello,
vamos a modificar los elementos CSS desde jQuery, aunque más adelante veremos más cosas, a
modo introductorio sería modificar las propiedades descritas de elemento HTML dinámicamente,
tendríamos por tanto:
$(‘.midiv13-mini-Sin’).one(“click”,function(){
});
404 $(‘.midiv13-mini-Con’).one(“click”,function(){
$(this).css(“background-color”, “red”);
errorUsuario();
});
Hemos usado .one y cambiamos el color para indicar al usuario si ha acertado (lima-
lime) o no (rojo-red). En caso que haya hecho click debemos ir contando los errores que va
cometiendo el usuario con la función errorUsuario(), para ello, nos hemos creado unas variables
con un límite de errores y con los errores acumulados. Por tanto tendríamos:
var errores_acumulados = 0;
var limite_errores = 7;
function errorUsuario(){
errores_acumulados++;
$(“#erroresAcumulados”).text(“ERRORES ACUMULADOS: “+errores_acumulados);
if(errores_acumulados >= limite_errores){

M3. JQUERY
alert(“GAME OVER, no te puedes equivocar más de siete veces”);
reiniciaJuego();
En esta función sólo vamos aumentando el valor de la variable erroresAcumulados y

cambiamos el texto del elemento que tenga el id #erroresAcumulados que sinos fijamos en el
HTML es el párrafo que hay justo antes del tablero.
Además, vamos comprobando constantemente, en cada error que cometa el usuario si el

número de errores_acumulados es mayor o igual (>=) limite_errores y cuando se cumpla esta
condición, hacemos varias cosas:
- Informamos al usuario mediante un alert.
- Llamamos a una función para reiniciar el juego reiniciaJuego().
La función reiniciaJuego() realiza varias acciones muy interesantes, que aunque ya he-
mos visto anteriormente, aquí podemos ver un ejemplo más en una aplicación real.
function reiniciaJuego(){
405
//Ponemos a cero los errores acumulados
errores_acumulados = 0;
//Modificamos el texto donde informamos al usuario
$(“#erroresAcumulados”).text(“ERRORES ACUMULADOS: “+errores_acumulados);
//Borramos todos los elementos de la clase correspondiente
$(“.midiv13-mini-Sin”).remove();
$(“.midiv13-mini-Con”).remove();
//Creamos de nuevo las etiquetas dinámicamente
//Volvemos a crear los eventos sobre los nuevas etiquetas
});
Aula Mentor
$(‘.midiv13-mini-Con’).one(“click”,function(){
errorUsuario();
});
Hemos decidido borrar todos los elementos con el método .remove(), poner el contador
de errores a 0, modificar el mensaje que mostraba los errores a 0 y volvemos a crear todo de
nuevo, lo debemos hacer porque si no añadimos esto:
No nos crea las valdosas o elementos <div>. Y si añadimos lo anterior pero no añadimos:
});
406 $(‘.midiv13-mini-Con’).one(“click”,function(){
errorUsuario();
});
Crea las valdosas o elementos <div> de forma aleatoria y todo, pero no escuchamos el
evento .click de cada elemento, por lo que no podríamos interactuar con los elementos que
hemos creado nuevo. Debemos pensar que hemos empezado desde 0 con el juego y tenemos
que asegurarnos de poner las variables y los elementos como al principio.
Tienes el ejemplo completo en:
Puedes visitar el ejemplo10-event/#.one
Repasa todos los conceptos y elementos y asegúrate de entender todo antes de conti-
nuar, ya que es un ejemplo muy completo de todas las cosas que podemos hacer con los mó-
dulos vistos hasta ahora HTML5, CSS3 y jQuery.
7. Atributos.
Como hemos visto hasta ahora, con jQuery podemos seleccionar de forma masiva o de
forma concreta los elementos de nuestra aplicación web. Ahora una forma de darle más dinanis-
mo es el uso de atributos, modificando, añadiendo o eliminando según nos interese. Es decir,
M3. JQUERY
podemos modificar los elementos y los atributos de estos, eliminar o añadir nuevas clases o
permutarlas.
7.1. Operaciones sobre Clases.
7.1.1. Añadir Clases.
Podemos añadir nuestras clases a los elementos en tiempo real, por ejemplo imaginemos
que tenemos nuestro archivo CSS3 donde tenemos una clase que se llama colorPreferido y, en
ella, tenemos un color de fondo que se usará cuando el usuario haga mouseover sobre el ele-
mento. Para ello usamos:
.addClass(función(índice, clase actual))
Función Especifica una función que devuelve uno o varios nombre de clases que
se desea añadir.
Índice (Opcional) es la posición del índice del elemento seleccionado.
Clase Actual (Opcional) es el nombre de la clase actualmente presente.
Veamos un ejemplo, en el HTML vamos a tener:
<p id=”addMiClase”>Pasa el ratón sobre mí y cambiaré mi fondo</p>

407
En el CSS tendremos nuestra clase:
.miColorPreferido{
Y en jQuery tendríamos:
$(‘#addMiClase’).mouseover(function(){
$(this).addClass(‘miColorPreferido’);
});
Bueno, aunque a simple vista pensarás, ¡vaya! Pero si esto lo sé hacer, he de decirte que
llevas en parte razón. El efecto para el usuario puede ser igual que haber utilizado directamente
desde CSS el evento hover, o tantas otras formas. Debemos entender lo siguiente, en tiempo de
ejecución de nuestra aplicación web he añadido una clase a la selección de los elementos de mi
documento. Inicialmente esa clase no existe en el documento CSS, y esto me da mucho más
Aula Mentor
dinamismo ya que puedo hacer cambios mientras se ejecuta la aplicación web.
7.1.2. Eliminar Clases.
Al igual que hemos realizado anteriormente, podemos eliminar una clase a un elemento
en tiempo de ejecución de la aplicación.
.removeClass
Siguiendo con el ejemplo anterior, podríamos eliminar la clase una vez que el usuario
realice el mouseout del elemento HTML. Tendríamos por tanto el mismo código en el HTML y en
el CSS, pues si estamos trabajando de forma estructurada la mayoría de las veces sólo debemos
cambiar el jQuery.
$(‘#addMiClase’)
.mouseover(function(){
$(this).addClass(‘miColorPreferido’);
})
408 .mouseout(function(){
$(this).removeClass(‘miColorPreferido’);
});
Para apreciar realmente qué está haciendo el navegador debemos usar el modo depura-
dor (F12), buscar el elemento y ver los estados que pasan sobre él:
Inicialmente sin añadir la clase:
Al pasar el ratón por encima y lanzar el evento .mouseover de la selección en este caso,
con id=”addMiClase” me cambia al siguiente código HTML:
M3. JQUERY
Hemos decidido en nuestro script jQuery, eliminar la clase cuando se active el evento
mouseout, el cual me elimina la clase asignada y vuelve a tener los valores que tuviera por de-
fecto el elemento HTML:
Vamos a recordar nuevamente el uso de las propiedad this en jQuery, refiriendose al

elemento concreto que lanza el evento. Si por ejemplo tenemos varios párrafos, si usamos el 409
elemento this o no lo utilizamos, supongamos el siguiente ejemplo usando el mismo archivo CSS
y teniendo más ambigüedad en el HTML:
<p>1.Pasa el ratón sobre mí y cambiaré mi fondo</p>
Y si tenemos en el script lo siguiente:
...
$(‘p’)
.mouseover(function(){
$(‘p’).addClass(‘miColorPreferido’);
})
.mouseout(function(){
Aula Mentor
$(‘p’).removeClass(‘miColorPreferido’);
});
...
El efecto al pasar el ratón será sobre todos los elementos que contengan el elemento:
Si en vez de usar directamente ‘p’ usamos this se activará sólo en el elemento que esté
llamando al evento en cada momento:
410
7.1.3. Permuta de Clases.
En algunas situaciones varios métodos permitirán desencadenar unas acciones u otras,

podríamos decir que existirán unas permutación de las clases. Este efecto de permutación se
llama toggle y nos permitirá además de ahorrar código, hacer efectos. Tenemos varias formas de
usar permutaciones de clase:
toggleClass(clase)
Añadimos la clase especificada si no existe, o la elimina si no está presente.
Un Ejemplo puede ser:
$(p).toggleClass(“clase1): Aplica la clase “clase1” a los párrafos, si no existe. Si

existe la elimina.
toggleClass(función(índice, clase actual), [conmutador])
Se puede hacer este efecto pasando unos parámetros:
Función: Especifica una función que devuelve el nombre de la clase que se tiene
que permutar.
Índice: (opcional) es la posición del índice del elemento seleccionado.

M3. JQUERY
Clase actual: (opcional) nombre de la clase actual.
Conmutador: Valor booleano (true/false) que determina si la clase se tiene que añadir o
elminar.
Ejemplo de toggleClass
En el fichero html tendremos:
...
<p class=”txtBlue”>Click para permutar</p>
<p class=”txtBlue bkgOrange”>Texto azul y fondo naranja</p>
...
En el CSS vamos a poner el fondo naranja y el texto azul:
.txtBlue{
color: blue;
}
411
.bkgOrange{
background: orange;
En jQuery tendríamos:
...
$( “p” ).click(function() {
$( this ).toggleClass( “bkgOrange” );
});
...
Inicialmente tenemos un estado en cada elemento y, posteriormente, vamos permutando

la clase bkgOrange cambiando el background del elemento si no está activo y activando en caso
contrario.
Aula Mentor
7.2. Leer.
Ahora debemos pensar que con la lectura de atributos de las etiquetas HTML podemos
acceder al valor usando la siguente sintaxis:
$(“selección”).attr(“atributo_a_leer”)
Un ejemplo podría ser el campo de un formulario:
...
<input type=”text” id=”nombreUsuario” value=”miValor”>
<button id=”dimeValor”>Dime valor del atributo</button>
<div id=”resultado”></div>
...
Y en el fichero jQuery podríamos acceder de forma dinámica al valor del campo de la

siguiente forma:
412
...
$( “#dimeValor” ).click(function() {
var valorCampoUsuario = $( “#nombreUsuario” ).attr(“value”);
$(“#resultado”).append(“<br>Valor texto : “+valorCampoUsuario);
});
...
Y a partir de cada pulsación en el botón Dime valor del atributo siempre nos dará el mis-
mo resultado, independientemente del texto que haya escrito en el <input> del formulario, este
punto es el que debemos entender, estamos accediendo a los atributos que hay en la etiqueta.
En el caso de que la selección sea múltiple, ya sea porque estemos seleccionando un

elemento de tipo .class o existan varios elementos, jQuery nos devolverá un objeto con los
elementos seleccionados. Para recorrer estos elementos debemos usar la función .each() como
pasaba en los formularios con las selecciones múltiples.
Supongamos el siguiente ejemplo:

M3. JQUERY
...
<br><a class=”miEnlace” href=”#add_remove_Class” title=”add_remove_Class” >Ir a .addClass() y .remo-

veClass()</a>
<br><a class=”miEnlace” href=”#toggleClass” title=”toggleClass” >Ir a .toggleClass</a>
<br><a class=”miEnlace” href=”#leerAtributos” title=”leerAtributos” >Ir a .leerAtributos</a>
<div id=”resultado2”></div>...
Si leyésemos el atributo seleccionando el elemento por id=”miEnlace”:
$(‘.miEnlace’).each(function(i){
var misTitulos = $(this).attr(“title”);
$(“#resultado2”).append(“<br>Valor “+i+” del atributo title : “+misTitulos);
});
Nos mostraría todos los título de la selección creada:
413
Puedes visitar el ejemplo11-atributos/#leerAtributos
7.3. Editar.
Además de poder leer los atributos, podemos editarlos, consiguiendo así interaccionar
con los elementos más todavía, para realizarlo debemos usar una función que sobreescribe el
método .attr en este caso con dos parámetros:
$(‘miSeleccion’).attr(“atributo”, “valor”);
...
<a class=”modificaAtributos” href=”http://www.aulamentor.es” target=”_blank” >Enlace 1 a página web...</

a><br>

a><br>
Aula Mentor

a><br>

a><br>

a><br>...

Tenemos una aplicación web donde tenemos muchos link a una página, pero en este
momento nos han comunicado que por problemas en el servidor no va a estar operativa, y claro,
queda muy mal tener una web con los enlaces “rotos”, por lo que vamos a coger en todos los
sitios donde tenemos enlace a esa web, y sustituirla por otra, sin tener que ir link por link. Con
jQuery podemos hacerlo sin tocar el código HTML y todo de golpe:
$(“.modificaAtributos”).attr(“href”,”http://www.mentoremprende.es”);
Si ejecutas la aplicación, verás que has modificado todos los enlaces a páginas web por
el nuevo, sin tener que saber ni siquiera cuantos hay y donde están. Como puedes ver jQuery es
una herramienta muy potente, por ejemplo si quisieramos cambiar de una vez todos los enlaces
para que en vez de abrirse en una pestaña nueva con el atributo target=”_blank” se abriera en
la misma página, con usar:
$(“.modificaAtributos”).attr(“href”,”http://www.mentoremprende.es”);
414
$(“.modificaAtributos”).attr(“target”,”_top”);
Se pueden modificar los atributos de forma seguida como acabamos de realizar, pero
jQuery nos proporciona una forma más limpia para este caso y es pasar parejas de atributos/
valor separados por comas y con el siguiente formato:
$(‘miSeleccion’).attr( { “atributo1” : “valor1”, “atributo2” : “valor2”});
Se pueden pasar muchas parejas de atributo/valor, en este caso sólo hemos pasado dos,
pero se podrían pasar muchos más. Quedando el ejemplo que estamos realizando de la siguien-
te forma:
$(“.modificaAtributos”).attr({“href”:”http://www.mentoremprende.es”, “target”:”_top”});
Puedes visitar el ejemplo11-atributos/#modificarAtributos
7.4. Añadir.
Hemos comprobado que con jQuery podemos leer los atributos de los elementos HTML,
modificarlos, pero existirán casos que debamos añadir atributos, y claro está podemos hacerlo
simplificando mucho el código, para ello podemos usar el método .attr pero esta vez pasándoles
dos parámetros, el primero con el nombre del atributo que queremos añadir y como segundo
parámetro la función que debe devolver el valor a asignar dicho atributo.
M3. JQUERY
$(“miseleccion”).attr(“atributo”, function(indiceArray){ })
Imaginemos que tenemos nuestros formularios y tenemos varias clases creadas, por
ejemplo para los campos que son de texto, queremos agregarle el atributo placeholder y un
texto orientativo, por ejemplo, introduce un texto. Además tenemos otros campos de tipo fecha,
el cual vamos a rellenar con la fecha actual para facilitar al usuario rellenar el campo, para ello,
vamos a añadirle el atributo value con la fecha actual. Como veremos, no tenemos que saber
donde está en el código, ni a cuantos elementos va a afectar, ya que como he estructurado muy
bien la web puedo hacer todo este tipo de acciones de un vez.
<br><label>Introduce tu nombre</label>
<input type=”text” name=”Nombre” class=”campoTexto”>
<br><label>Introduce tu primer apellido</label>
<input type=”text” name=”Apellido1” class=”campoTexto”>
415
<br><label>Introduce tu segundo apellido</label>
<input type=”text” name=”Apellido2” class=”campoTexto”>
<br><label>Introduce la fecha de inscripción</label>
<input type=”text” name=”FechaHoy” class=”campoFecha”>
Ahora vamos a añadir los atributos placeholder y value a nuestros elementos, para ello
podemos realizar el siguiente código:
$(“.campoFecha”).attr(“value”, function(indiceArray){
//indiceArray va a contener el índice del elemento en el objeto jQuery
var miFecha = new Date();
return miFecha.getDate()+”/”+ (miFecha.getMonth()+ 1) + “/” + miFecha.getFullYear();
});
$(“.campoTexto”).attr(“placeholder”, function(indiceArray){
Aula Mentor
//indiceArray va a contener el índice del elemento en el objeto jQuery
var miTexto = “Rellena este campo”;
return miTexto;
});
El resultado sería el que esperábamos:
Hemos usado los métodos siguientes para obtener el día, mes y año respectivamente:
.getDate, .getMonth() y .getFullYear() los cuales los hemos asociado a una fecha variable de tipo
Date() y hemos tenido que crear un objeto nuevo, por ello hemos usado new Date().
Puedes visitar el ejemplo11-atributos/#addAtributos
7.5. Eliminar.
Para eliminar atributos podemos usar el método siguiente:

416
$(“miSeleccion”).removeAttr(“atributo”)
Imaginemos ahora que hemos agregado una sugerencia de texto indicando al usuario
qué campos de un formulario son obligatorios, y por algún motivo debemos eliminarlos direc-
tamente:
<br><label>Introduce tu nombre</label>
<input type=”text” name=”Nombre” placeholder=”Obligatorio” class=”miFormulario”>
<br><label>Introduce tu primer apellido </label>
<input type=”text” name=”Apellido1” placeholder=”Obligatorio” class=”miFormulario”>
<br><label>Introduce tu segundo apellido</label>
<input type=”text” name=”Apellido2” placeholder=”Obligatorio” class=”miFormulario”>
<br><label>Introduce la fecha de inscripción</label>
<input type=”text” name=”FechaHoy” placeholder=”Obligatorio” class=”miFormulario”>

M3. JQUERY
Podemos hacer lo siguiente y eliminaremos el atributo de todos los sitios de mi selec-

ción:
$(“.miFormulario”).removeAttr(“placeholder”);
Puedes visitar el ejemplo11-atributos/#removeAtributos
El resultado sería que nos ha eliminado en una sola línea todos los atributos placeholder
del documento, quedando de la siguiente forma.
Desde jQuery elimino el atributo placeholder
$(“.miFormulario”).removeAttr(“placeholder”);
417
8. Resumen.
- jQuery es una biblioteca de JavaScript, creada inicialmente por John Resig, que permite sim-
plificar la manera de interactuar con los documentos HTML, manipular el árbol DOM, mane-
jar eventos, desarrollar animaciones y agregar interacción con la técnica AJAX a páginas web.
- JavaScript (abreviado comúnmente “JS”) es un lenguaje de programación interpretado (no

es necesario compilar el código). Se define como orientado a objetos, basado en prototipos,
imperativo, débilmente tipado y dinámico. Como cualquier lenguaje, se pueden definir va-
riables, funciones, operadores básicos y lógicos, bucles, arrays y objetos.
- Con jQuery tenemos también un conjunto de selectores y filtros para elegir a qué elementos
del documento van a afectar nuestras acciones. Tendremos por tanto los selectores de eti-
queta o elemento, identificador y clase, entre otros muchos más de tipo parental y de posición
respecto a otras etiquetas.
- Para interactuar con el usuario jQuery proporciona “eventos” que serán disparados o detec-
tados por diferentes circunstancias. Podemos capturar eventos de los siguientes elementos:
del ratón, del teclado, de los formularios, del documento o del propio navegador.
Aula Mentor
El objeto .event es aquel que tendrán todos los elementos que han sido lanzados. Éste además
de poder capturar sus propiedades y datos, podremos modificar el evento definido por defecto
con .event.preventDefault().
Para gestionar los eventos, tenemos los siguientes métodos.
.bind(): Asociamos funciones a eventos de elementos.
.unbind(): Desasociamos eventos de los elementos.
.on(): Asociamos varios eventos a la vez.
.off(): Desasociamos varios eventos a la vez.
.one(): Forzamos que el evento se ejecute sólo una vez.
Otra funcionalidad que podemos hacer con jQuery en tiempo de ejecución es añadir, eliminar
o permutar clases y atributos, para ello tenemos:
.addClass: Añade una clase.
.removeClass: Elimina una clase.
toggleClass( ): Permuta una clase o función.

418
Y respecto a los atributos, también podemos leer, editar, añadir o eliminar:
.attr(“atributo_a_leer”) Lee un atributo.
.attr(“atributo”, “valor”) Modifica el valor del atributo.
.attr(“atributo”, function(indiceArray){ }) Añade al atributo la funcion a

devolver declarada en el segundo parámetro.
.removeAttr(“atributo”) Elimina el atributo dado.

Unidad 7. Formularios, CSS3, Ajax y efectos
En el módulo anterior hemos visto que con jQuery podemos seleccionar los elementos del do-
cumento HTML según nos interese, detectar los eventos que el usuario ha realizado y añadir,
modificar y eliminar nuevas propiedades y atributos a los elementos ya existentes. En esta uni-
dad vamos a ver ver cómo podemos interaccionar con los formularios que rellenen los usuarios
en nuestras aplicaciones Web con jQuery, y además seguir viendo más posibilidades de CSS3,
añadir más efectos y el uso de Ajax, Asynchronous JavaScript And XML ( JavaScript asíncrono y
XML).
1. Formularios. 419
Aunque en HTML5 tenemos muchas formas para poder revisar y controlar el contenido
que el usuario nos introduce en los formularios, tenemos que tener presente que con jQuery
podemos usar muchas más restricciones personalizadas y ayudas para evitar que introduzcan
datos erróneos o de carácter mal intencionados, pero éstas no eximen por parte del servidor
realizar las comprobaciones pertinentes. Podríamos decir que con jQuery vamos a ayudar
al usuario a rellenar el formulario con datos correctos en una primera instancia y le podemos
aconsejar, revisar y comprobar si cumplen alguna característica (por ejemplo si la letra del DNI
es correcta, ha introducido número o letras, etc).
Pero si no hicieramos ninguna comprobación posterior en el servidor, ¿qué pasaría si

un usuario tiene desactivado JavaScript, o no soporta HTML5?. Se saltaría todas las normas que
hemos intentado solventar, ¿qué solucion hay?. Inicialmente sería comprobar si tiene activado
HTML5 y JavaScript como vimos en capítulos anteriores, y dependiendo del carácter del formu-
lario, incluso obligar a que el usuario active o use un navegador con la configuración correcta.
1.1. Selección de elementos.
En unidades anteriores vimos cómo podemos acceder a nuestras propias clases o iden-
tificadores:
$(“#identificador”).xxx, $(“.miclase”) , $(“mielementoHTML”)…etc.
Debemos pensar que con los selectores de jQuery podemos elegir con qué elementos
del documento HTML vamos a trabajar, y en el caso de los formularios, siempre podemos selec-
cionar qué tipo de elementos, por tanto tenemos además unas etiquetas que realizan un filtro
Aula Mentor
más adaptado a los formularios:
Seleccionamos los elementos que tengan relación

con los formularios, aquellos que empiecen por
<input…, <select…, <textarea... o <button… por
ejemplo si queremos seleccionar todos los elemen-
tos del formulario, usaríamos:
:input $( “:input” ).
Y habríamos elegido todos los elementos del si-

guiente formulario:
<form>
<input type=”button” value=”Mi botón “>
<input type=”checkbox”>
<input type=”file”>
<input type=”hidden”>
<input type=”image”>
420
<input type=”password”>
<input type=”radio”>
<input type=”reset”>
<input type=”submit”>
<input type=”text”>
<select>
<option>Opcion 1</option>
<option>Opcion 2</option>
</select>
<textarea></textarea>
<button>Button</button>
M3. JQUERY
</form>
:submit Seleccionamos los elementos del formulario que

sean del tipo submit, por ejemplo aquellos ele-
mentos que sean declarados de la siguiente forma:
input[type=”submit”], button[type=”submit”].
:text Seleccionamos los elementos del formulario que
sean del tipo text, por ejemplo <input type=”text”>.
:password Seleccionamos los elementos del formulario que
sean del tipo password, por ejemplo aquellos ele-
<input type=”password”>
:radio Seleccionamos los elementos del formulario que
sean del tipo radio, por ejemplo aquellos elemen-
tos que sean declarados de la siguiente forma: <in-
put type=”radio”>
:checkbox Seleccionamos los elementos del formulario que
sean del tipo checkbox, por ejemplo aquellos ele-
<input type=”checkbox”>
:checked Seleccionamos los elementos del formulario que
sean del tipo checked, por ejemplo aquellos ele- 421
<input type=”checked”>
Aula Mentor
:selected Seleccionamos los elementos del formulario que

sean del tipo selected, por ejemplo aquellos ele-
<select name=”tuscolores” multiple=”multiple”>
<option>Amarillo</option>
<option selected=”selected”>Azul</option>
<option>Verde</option>
<option selected=”selected”>Naranja</op-
tion>
<option>Gris</option>
<option>Blanco</option>
</select>
Con $( “select option:selected” ) nos estaríamos re-

firiendo a los elementos:
422 <option selected=”selected”>Azul</option>
<option selected=”selected”>Naranja</op-
tion>
:disabled Seleccionamos los elementos del formulario que
sean del tipo disabled, por ejemplo aquellos ele-
<input name=”nombre” disabled=”disabled”>
Apto para los siguientes elementos: <button>, <in-

put>, <optgroup>, <option>, <select>, and <texta-
rea>
:enabled Seleccionamos los elementos del formulario que
sean del tipo enabled, por ejemplo aquellos ele-
<input name=”nombre” > o no disabled
Apto para los siguientes elementos: <button>, <in-

put>, <optgroup>, <option>, <select>, and <texta-
rea>
:button Seleccionamos los elementos del formulario que
sean del tipo button, por ejemplo aquellos ele-
“button, input[type=’button’].
M3. JQUERY
:image Seleccionamos los elementos del formulario que

sean del tipo image, por ejemplo aquellos elemen-
tos que sean declarados de la siguiente forma: <in-
put type=”image”>
:focus Seleccionamos el elemento del formulario que
tiene el foco del navegador en ése momento, un
ejemplo usual, es cambiar el fondo y fuente de
texto del elemento que tiene el foco en cada mo-
mento para ayudar al usuario a saber cuál es el
elemento actual a rellenar.
:file Seleccionamos los elementos del formulario que
sean del tipo file, por ejemplo aquellos elemen-
tos que sean declarados de la siguiente forma:
input[type=’file’].
:reset Seleccionamos los elementos del formulario que
sean del tipo reset, por ejemplo aquellos elemen-
tos que sean declarados de la siguiente forma:
input[type=’reset’].
1.2. Validación de formularios.
En otras ocasiones del curso hemos comprobado que podemos acceder al valor de los
elementos de un formulario y realizar determinadas comprobaciones, por ejemplo: comprobar
si ha rellenado los campos antes de poder enviar el formulario. Si no queremos usar HTML5, y
preferimos usar jQuery (con la versión que da soporte a versiones antiguas de Internet Explorer 423
IE6, IE7 o IE8) tendremos que realizar nuestras propias validaciones con script propios. Siempre
tenemos esa opción “bajo la manga” pero muchas veces, se emplea demasiado tiempo en la
validación de datos que al fin y al cabo son tareas comunes en la mayoría de las web del tipo:
comprueba que el campo sea numérico, que no este vacío, si es un correo electrónico válido
(letras@letras.3letras), etc.
Con jQuery podemos usar un plugin que nos trae jQuery para la validación, que en de-
finitiva es un archivo de tipo js ( JavaScript) donde están creadas las validaciones:
http://plugins.jquery.com/validation/1.11.1/
Aula Mentor
Como podremos observar existe ya una nueva versión de validación 1.13.1. Cada dos
meses aproximadamente hay una nueva versión de jQuery ya que hay muchos desarrolladores
detrás haciendo mejoras. En la documentación de la web tenemos los requerimientos para poder
usar el plugin, en concreto para ésta hay que tener jQuery, y ha sido probado en las versiones
1.6.4, 1.7.2, 1.8.3, 1.9.1, 1.11.1 siendo ésta última la que estamos realizando en el curso.
Este tipo de archivo al igual que pasaba con el jQuery es una buena práctica tenerlo en
local o en un servidor que tenga mucha velocidad, ya que sino relantizaremos la comprobación
del formulario y el usuario podría pensar que es por problemas de la página. En nuestro caso,
nos vamos a descargar la versión y vamos alojar en nuestro servidor en la carpeta js/ donde te-
nemos los demás script.
Voy a explicar los pasos intermedios, porque es importante de donde ha salido la fuente
de todo y cómo hemos ido navegando hasta encontrar nuestro archivo, tal y como avanzan y
cambian las web, es mejor tener claro el proceso seguido, a dejar el link directo y pasados unos
meses y éste ya no funcione. De todas formas, en los recursos del curso, obtendrás los archivos
con los que se ha desarrollado el mismo, sino lo encontraras, pregunta a tu tutor.
Después de pinchar en Download now, nos aparecerá otra página web http://jqueryva-
lidation.org/ donde tendremos que seleccionar nuevamente Download y se nos descargará un
archivo con ejemplos, demos y los códigos fuentes. Y también nos podremos descargar exclusi-
vamente los archivos de validación.
Existen varios archivos de validación que nos podemos descargar:
424 Archivo jquery.validate que usaremos para validar los formularios cuando estemos reali-
zando el desarrollo de la aplicación web:
http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/jquery.validate.js
Idem anterior pero en su versión mínima, sin espacios, tabuladores, comentarios etc,
para usar cuando tengamos la aplicación definitiva:
http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/jquery.validate.min.js
Métodos adicionales donde podremos comprobar y validar más datos, por ejemplo, que
el número del banco sea correcto, que el código de IBAN que ha introducido el cliente corres-
ponde a un número correcto, formato de código postal, número de telefóno, etc. Esta versión
viene con comentarios, tabulaciones y saltos de página, por lo que es la que debemos usar
cuando estemos en la fase de desarrollo.
http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/additional-methods.js
Idem anterior pero en su versión mínima, sin espacios, tabuladores, comentarios etc,
para usar cuando tengamos la aplicación definitiva:
http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/additional-methods.min.js
Para usar este plugins de validación de formularios tendremos que hacer lo que hemos
realizado en varias ocasiones, linkarlo o enlazarlo desde nuestro documento, a la ruta donde
esté el archivo, en nuestro caso nos creamos una carpeta js, donde teníamos todos los script
almacenados. Debemos usarlo después de haber enlazado el fichero jQuery, en nuestro caso
M3. JQUERY
tendremos que tener:

<script type=”text/javascript” src=”http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/jquery.va-

lidate.min.js”></script>

<script type=”text/javascript” src=”js/jquery.validate.js”></script>
Y si queremos usar los métodos adicionales deberémos añadir:
<script type=”text/javascript” src=”http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/additional-

methods.min.js”></script>
O de forma local:
<script type=”text/javascript” src=”js/additional-methods.js”></script>
Existen diferentes métodos que podemos usar para validar nuestros formularios, entre 425
los que destacamos:
email: Devuelve true si el campo es un email válido.
url: Devuelve true si el campo tiene una url válida.
date: Devuelve true si el valor es una fecha válida. Para comprobar si la

fecha es válida, sólo el formato debe ser válido, no si corresponde con
la fecha actual.
dateISO: Devuelve true si el valor del campo es una fecha ISO válida, recordemos
que la fecha ISO corresponde al siguiente formato: AAAA/MM/DD. Don-

de AAAA es el año, MM el mes y DD el día.
number: Devuelve true si el valor contiene un número decimal válido.

Aula Mentor
digits: Devuelve true si el valor contiene sólo dígitos.
creditcard: Devuelve true si el valor es un número de tarjeta de crédito válida.
Nota: El algoritmo utilizado no puede comprobar la validez del número;

es sólo una comprobación de integridad. Al igual que con cualquier otra
validación del lado del cliente, hay que realizar la comprobacion perti-
nente en el lado del servidor.
minlength: Devuelve false si el elemento es:
- Entrada de texto y su valor es demasiado corto.
- Un conjunto de casillas de verificación que no tiene suficientes

casillas marcadas.
- Una selección de elementos y no tiene suficientes opciones

seleccionadas.
426
maxlength: Devuelve false si el elemento es:
- Entrada de texto y su valor es demasiado largo.
- Un conjunto de casillas de verificación tiene demasiadas casillas

marcadas.
- Una selección de elementos y tiene demasiadas opciones seleccionadas.
rangelength: Devuelve false si el elemento es:
- Entrada de texto y su longitud es demasiado corto o demasiado larga.
- Un conjunto de casillas de verificación que no tiene lo suficiente, o tiene

demasiados casillas marcadas.
- Una selección que no tiene suficientes, o tiene demasiadas opciones

seleccionadas.
min: Número mínimo de caracteres requeridos.

M3. JQUERY
max: Número máximo de caracteres requeridos.
range: Número mínimo y máximo de caracteres requeridos.
equalTo: Requiere el elemento sea igual a otro.
remote: Solicita un recurso externo para comprobar el elemento de validez.
Y cuando usemos los métodos adicionales, tenemos otros tantos métodos, en los que
vamos a destacar:
alphanumeric: Requiere que sea alfanumérico.
427
bankaccountNL: Valida un número de banco con el formato:
123456789 or 12 34 56 789
bic: Valida el código Bank Identifier Code.
cifES: Valida Cif de España, con el formato
nieES: Valida si es un Nie (identificador válido para extranjeros).
creditcardtypes: Valida el tipo de tarjeta de crédito.
iban: Nuevo código bancario internacional International Bank Account
Number, valida que sea un número correcto:

Aula Mentor
ip4: Valida si es una dirección ip4 correcta.
ip6: Valida si es una dirección ip6 correcta.
Existen muchas comprobaciones y validaciones más indicadas para otros paises, (núme-
ro de teléfono de US, de UK, códigos postales, etc) y cada vez más se van realizando nuevas
incorporaciones, pero lo importante es saber que la mayoría de los datos que nos introduzca
el usuario podemos usar el plugin de jQuery-validate o usar sólo la parte necesaria en nuestra
aplicación web. Así, nos ahorramos programar algo que ya está programado y sobre todo com-
probado para no entrar en conflicto con otras partes de jQuery.
Ahora veamos un ejemplo de formulario y cómo usar algunas validaciones que nos pro-
porciona el pluging de jQuery: jquery-validate.js
Supongamos que queremos usar un formulario para que el usuario nos introduzcan sus
datos, por ejemplo el siguiente:
428
Deberíamos usar entonces un documento HTML5 (omitiendo las comprobaciones pro-

pias que usa HTML5 como vimos en el módulo 1) parecido al siguiente:
...
...
<div id=”miformulario”>
<form action=’’>
<div>
<label for=”name”>Nombre:</label>
<input type=”text” name=”nombre” id=”nombreId”>
</div>
<div>
M3. JQUERY
<label for=”surname”>Apellidos:</label>
<input type=”text” name=”apellidos” id=”apellidosId”>
</div>
<div>
<label for=”email”>Email:</label>
<input type=”text” name=”email” id=”emailId”>
</div>
<div>
<label for=”banco”>Cuenta bancaria (IBAN):</label>
<input type=”text” name=”banco” id=”bancoId”>
</div>
<div>
<label for=”web”>Página Web:</label> 429
<input type=”text” name=”web” id=”webId”>
</div>
<div>
<label for=”password”>Contraseña:</label>
<input type=”text” name=”password” id=”passwordId”>
</div>
<div>
<label for=”observaciones”>Comentarios:</label>
<textarea name=”observaciones” id=”observacionesId”></textarea>

Aula Mentor
</div>
<div>
<input type=”submit” value=”Enviar”>
</div>
</form>
</div>
...
...
Para poder usar el plugin de validación debemos llamar al método validate después de
realizar la selección, y posteriormente la opción que vayamos a comprobar, (email, url, etc).
También debemos decirle las reglas (“rules”) utilizadas para validar los datos introducidos por el
usuario.
$(‘miseleccion’).validate( {
430
rules:{
nombre1:{
//opciones
},
. . .
. . .
nombreN:{
//opciones
},
messages:{
nombre1:{
M3. JQUERY
//opciones y mensajes
},
. . .
. . .
nombreN:{
//opciones y mensajes
},
success:{
//Acciones si esta validad correctamente
});
Existen más opciones que se pueden usar con validate y al igual que messages y success 431
son opcionales, la más importante sería rules ya que define nuestras reglas sobre los elementos.
Estos han de estar definidos con el atributo name para poder referirnos a él posteriormente, si
nos fijamos hemos distinguido a modo de ejemplo el nombre del campo del nombre de identi-
ficador para no confundir qué elemento va a llamar y usar el método validate.
Vamos a empezar con el primer campo a validar:
<input type=”text” name=”nombre” id=”nombreId”>
Si queremos que este campo sea requerido y el usuario lo rellene para poder enviar el
formulario deberíamos de hacer:
$(‘#miformulario form’).validate({
rules:{
nombre:{
required: true,
}
Aula Mentor
});
Debemos ser muy meticulosos, ya que el 90% de los errores cuando no funcionan las
validaciones es por uso incorrecto de la sintaxis o el uso de la selección de los elementos. Con
este ejemplo, se selecciona aquel documento HTML que tenga un identificador “miformulario” y
sea formulario “form”. Una vez que tengas esos elementos, vamos a validarlo .validate para com-
probar las siguientes reglas rules: comprueba el siguiente nombre de entrada de texto nombre
y ahora quiero que este campo nunca este vacío, lo que es lo mismo, sea requerido para poder
enviar el formulario. Si pulsamos el botón enviar sin escribir nada en el campo de nombre nos
aparecerá un mensaje global como podemos ver en la siguiente imagen:
Este mensaje “This field is required” nos indica que el campo en cuestión es requerido,
432 pero podemos elegir nosotros nuestros propios mensajes, para ello debemos añadir más cosas
a nuestro archivo jQuery, por ejemplo si queremos decir en Español “*Introduce tu nombre, este
campo es obligatorio” debemos usar:
rules:{
nombre:{
required: true,
},
messages:{
nombre:{
required: ‘*Introduce tu nombre, este campo es obligatorio’,
}
M3. JQUERY
});
Y si ahora le damos al botón enviar y el formulario de validación nos devuelve false nos
aparecerá el siguiente mensaje:
Y como ya sabemos CSS3, puede añadirle un poco de estilo, para hacer más llamativo el
mensaje al usuario. Para ello, podríamos usar el siguiente código:
. . .
required: ‘<span class=”mierror”>*Introduce tu nombre, este campo es obligatorio</span>’
. . .
Y en mi archivo CSS:
.mierror{
color: red;
433
Y ahora cada vez que mostremos un error, al usuario le aparecerá el texto de color rojo,
como se puede ver a continuación:
Sigamos con las validaciones de nuestro formulario, por ejemplo para el campo Apellidos
vamos a obligar que también sea obligatorio, pero que tenga al menos 3 caracteres. Se puede
concatenar validaciones poniéndolas dentro de las validación del elemento:
rules:{
nombre:{
required: true,
},
apellidos:{
minlength: 3,
required: true
Aula Mentor
},
messages:{
nombre:{
required: ‘<span class=”mierror”>*Introduce tu nombre, este campo es

obligatorio</span>’,
},
apellidos:{
required: ‘<span class=”mierror”>*Introduce tus apellidos, este campo es

obligatorio</span>’,
minlength: ‘<span class=”mierror”>*Debe ocupar al menos 3

caracteres</span>’
}
434
});
Debemos tener en cuenta que hemos añadido una coma a continuación para poder se-
guir llamando elementos del formulario, y para añadir más validaciones que también las hemos
separado por comas. En este ejemplo, en el campo apellidos estamos realizando dos validacio-
nes: una que sea required en el campo y sea rellenado obligatoriamente y otra que tenga un
mínimo de 3 caracteres minlength. Por tanto tenemos la posibilidad de mostrar dos mensajes,
uno para cada validación.
A partir de ahora me voy a centrar sólo en las validaciones del elemento en cuestión y
no mostraré las demás para facilitar el aprendizaje y no repetir código pues tienes el ejemplo
completo y resuelto en los recursos del curso, sólo debemos aprender a usar las validaciones
ya que es recomendable que intentes realizar desde cero la validación de un ejemplo similar al
propuesto sin usar el código resuelto, y posteriormente si tuvieras dudas, usar el código como
apoyo.
Para el campo email:
<div>
<label for=”email”>Email:</label>
<input type=”text” name=”email” id=”emailId”>
</div>
M3. JQUERY
Si queremos comprobar que sea un email, tendremos que usar:
rules:{
email:{
email: true,
},
messages:{
email:{
email: ‘<span class=”mierror”>*Introduce un email válido</span>’,
});
Para validar el número de iban que nos ha introducido, debemos usar: 435
rules:{
banco:{
iban: true,
},
messages:{
banco:{
iban: ‘<span class=”mierror”>*Introduce un IBAN válido</span>’,
});
Aula Mentor
Para validar una página web, que comience por http://.... o ftp://...podríamos usar:
rules:{
web:{
url: true,
},
messages:{
web:{
url: ‘<span class=”mierror”>*Introduce una URL válido</span>’,
436 });
Para validar una contraseña con un número máximo y mínimo:
rules:{
password:{
rangelength: [6,12],
required: true,
},
messages:{
password:{
rangelength: ‘<span class=”mierror”>Debe contener entre 6 y 12

caracteres</span>’,
required: ‘<span class=”mierror”>*Este campo es obligatorio</span>’,

M3. JQUERY
});
Y por ejemplo si tenemos un textarea donde hemos limitado el número de caracteres

a 140 y queremos indicar al usuario cuántos caracteres restantes le quedan, y cuando llegue
al límite cambiar el color del texto a rojo; podemos usar varias formas para resolverlo, en este
caso no vamos a usar el método validate de jQuery, sino que vamos hacer un script por nuestra
cuenta para comprobar que se pueden usar ambos métodos conjuntamente.
En el documento HTML podríamos tener:
. . .
<textarea name=”observaciones” id=”observacionesId”></textarea>
<span id=”caracteresRestantes”>140 Caracteres restantes</span>
. . .
Y en el jQuery:
var caracteresOcupados = 0; 437
var valorMaximo = 140;
function actualizaCaracteres(valorMaximo, caracteresOcupados){
caracteresRestantes = valorMaximo - caracteresOcupados;
if(caracteresRestantes <= 0){
$(‘#caracteresRestantes’).text(caracteresRestantes + “ Caracteres
restantes”).css(“color”, “red”);
}else{
$(‘#caracteresRestantes’).text(caracteresRestantes + “ Caracteres restantes”);

Aula Mentor
console.log(valorMaximo - caracteresOcupados + “ Caracteres restantes”);
$(‘#observacionesId’).keydown(function(e){
caracteresOcupados = $(‘#observacionesId’).val().length;
actualizaCaracteres(valorMaximo, caracteresOcupados);
});
Es una forma aproximada para indicar al usuario cuántos caracteres le queda, si nos
fijamos, sólo hemos usado el evento .keydown del textarea para detectar que ha presionado la
tecla, y en cada pulsación, calculamos la longitud, para ello usamos $(‘#observacionesId’).val().
length y llamamos a otra función que nos hemos creado que se llama actualizaCaracteres(val
438 orMaximo, caracteresOcupados) y en ella, actualizamos el número de caracteres restantes que
nos quedan y comprobamos si el valor es positivo o negativo, y dependiendo de él ponemos el
texto de color rojo.
Puedes visitar el ejemplo 01-formularios/
2. CSS3.
El uso de CSS3 y jQuery en las aplicaciones web, nos permite modificar, añadir y eli-
minar propiedades de estilo y tener un control no sólo del documento HTML como tal, sino
también de diseño del mismo. Algunas propiedades las hemos visto en apartados anteriores,
para facilitar y enriquecer los ejercicios; ahora veremos como acceder a las propiedades y qué
métodos son los más usuales para trabajar jQuery y CSS.
2.1. Acceder a las propiedades.
Para acceder a las propiedades de CSS se usa la siguiente estructura,
$(‘miseleccion’).css(‘propiedad’)
M3. JQUERY
De esta forma si tenemos un archivo CSS con nuestras propiedades definidas, podemos
acceder a todas ellas desde jQuery. Imaginemos que tenemos una hoja de estilo con las siguien-
tes definiciones de propiedades:
.mitexto{
color: blue;
background-color: white;
Un archivo html con el siguiente contenido:
<div class=”mitexto”>
<p id=”mitexto”>Este es un texto con unas propiedades definidas en CSS3. ¿Cuáles?</p>
</div>
Si en nuestro script jQuery quisiéramos acceder a alguna de ellas, podemos hacerlo de

la siguiente forma:
. . .
439
var mipropiedad1_CSS = $(“.mitexto”).css(‘color’);
var mipropiedad2_CSS = $(“.mitexto”).css(‘background-color’);
//Mostramos los datos que hemos leido al usuario
$(‘#mitexto’).append(“<br>color: “+mipropiedad1_CSS+”<br> background-color: “+ mipropiedad2_CSS);
. . .
Y el resultado sería el siguiente:
Si nos damos cuenta no nos ha devuelto la palabra que esperábamos blue, pero si nos
ha devuelto el mismo significado con otra notación, recuerda que en módulos anteriores tenía-
mos varias formas de indicar al navegador los colores. Hay en internet diversas formas y script
realizados para transformar de unas notaciones a otras, lo importante es que hemos accedido a
las propiedades de nuestra hoja de estilo desde jQuery.
Hemos seleccionado el elemento del documento y posteriormente la propiedad, y nos

ha devuelto el valor que usa el navegador según la propiedad dada.
Aula Mentor
2.2. Modificar las propiedades.
En el curso hemos modificado en determinadas ocasiones las propiedades CSS, te re-

cuerdo que para hacerlo solamente había que usar la siguiente notación:
$(‘miseleccion’).css(‘propiedad’, ‘valor’)
Siguiendo con el ejemplo anterior, vamos a cambiar las propiedades, en concreto; vamos
a cambiar el color azul, por naranja y el color de fondo blanco, por gris. Como la forma de traba-
jar que estamos adquiriendo, no tenemos que modificar ni el archivo HTML, ni el CSS, sólo con
modificar nuestro script se hará todo automáticamente, estaríamos accediendo a las propiedades
CSS, y al documento HTML directamente para interactuar con él según necesitemos.
//Modifico el valor original de las propiedades
$(“.mitexto”).css(‘color’,’orange’);
$(“.mitexto”).css(‘background-color’,’gray’);
//Muestro los valores leidos nuevamente, ¡OJO! No modifica el valor del archivo CSS, solo del //navegador
$(‘#mitexto’).append(“<br>VALORES NUEVOS<br>color: “+$(“.mitexto”).css(‘color’)+”<br> background-co-

lor: “+ $(“.mitexto”).css(‘background-color’));
440 2.3. Dimensiones y posicionamiento.
En ocasiones necesitamos saber el tamaño de los objetos y las posicion dentro de una
página. Pensemos que tenemos una caja o capa (<div>) y queremos saber el tamaño que tiene,
tanto interno como externo (contando padding y bordes) para poder modificarla accediendo a
sus propiedades en CSS y saber dónde está situada respecto a la página, existen varios métodos
que nos ayudarán, estos son:
innerWidth(): Develve las dimensiones internas (anchura) del primer elemento que
haya en dicho objeto jQuery. Contando el padding pero no el borde.
innerHeight(): Devuelve las dimensiones internas (altura) del primer elemento

que haya en dicho objeto jQuery. Contando el padding pero no el borde.
outerWidth(): Devuelve las dimensiones externas (anchura) del primer elemento

que haya en dicho objeto jQuery. Contando el padding y el borde.
outerHeight(): Devuelve las dimensiones externas (altura) del primer elemento

que haya en dicho objeto jQuery. Contando el padding y el borde.
M3. JQUERY
offset(): El método establece o devuelve las coordenadas de desplazamiento de

los elementos seleccionados, en relación con el documento.
position(): El método establece o devuelve las coordenadas de desplazamiento de

los elementos seleccionados, en relación con el elemento padre.
- La posición siempre nos la devuelve con dos atributos “top” y “left” respecto de la esquina
superior izquierda.
Vamos a ver un ejemplo donde obtengamos todas esas medidas de un elemento, para
ello, tendremos dos elementos html, para facilitar el aprendizaje vamos a usar dos cajas una
dentro de la otra, definida de la siguiente forma:
<h3>Tamaño y posicionamiento de elementos HTML</h3>
<hr>
<div id=”cajaPadre”>
<div id=”cajaHija”>
</div>
441
</div>
<p id=”valoresCajas”><p>
Y en nuestro archivo CSS tenemos definidas los siguientes identificadores, una para la
caja Padre y otro para la caja Hija:
#cajaPadre{
width: 400px;
height: 400px;
Aula Mentor
background-color: #EBEC99;
position: relative;
#cajaHija{
width: 200px;
height: 200px;
background-color: #DF9449;
position: absolute;
top: 50%;
left: 50%;
442 height: 30%;
width: 50%;
margin: -15% 0 0 -25%;
Y ahora vamos sacar todos los datos de nuestros elementos HTML, en este caso nuestro
<div> cajaPadre y cajaHija. Para ello, vamos a usar el siguiente código en jQuery:
. . .
. . .
var anchoCajaPadre = $(“#cajaPadre”).innerWidth();
var altoCajaPadre = $(“#cajaPadre”).innerHeight();
var anchoCajaHija = $(“#cajaHija”).innerWidth();
var altoCajaHija = $(“#cajaHija”).innerHeight();

M3. JQUERY
var anchoTCajaPadre = $(“#cajaPadre”).outerWidth();
var altoTCajaPadre = $(“#cajaPadre”).outerHeight();
var anchoTCajaHija = $(“#cajaHija”).outerWidth();
var altoTCajaHija = $(“#cajaHija”).outerHeight();
var posicionOffsetCajaPadre = $(“#cajaPadre”).offset();
var posicionPositionCajaPadre = $(“#cajaPadre”).position();
var posicionOffsetCajaHija = $(“#cajaHija”).offset();
var posicionPositionCajaHija = $(“#cajaHija”).position();
$(‘#valoresCajas’)
443
.append(“RESULTADOS”)
.append(“<hr>”)
.append(“<br>CAJA PADRE”)
.append(“<br>innerWidth: “+anchoCajaPadre)
.append(“<br>innerHeight: “+altoCajaPadre)
.append(“<br>outerWidth: “+anchoTCajaPadre)
.append(“<br>outerHeight: “+altoTCajaPadre)
.append(“<br>offset (top): “+posicionOffsetCajaPadre.top)
.append(“<br>offset (left): “+posicionOffsetCajaPadre.left)

Aula Mentor
.append(“<br>position (top): “+posicionPositionCajaPadre.top)
.append(“<br>position (left): “+posicionPositionCajaPadre.left)
.append(“<hr>”)
.append(“<br>CAJA HIJA”)
.append(“<br>innerWidth: “+anchoCajaHija)
.append(“<br>innerHeight: “+altoCajaHija)
.append(“<br>outerWidth: “+anchoTCajaHija)
.append(“<br>outerHeight: “+altoTCajaHija)
.append(“<br>offset (top): “+posicionOffsetCajaHija.top)
.append(“<br>offset (left): “+posicionOffsetCajaHija.left)
.append(“<br>position (top): “+posicionPositionCajaHija.top)
.append(“<br>position (left): “+posicionPositionCajaHija.left)
444 . . .
. . .
Realmente en este ejemplo no sería necesario crear las variables para luego mostrarlas,
pero es una buena práctica que nos acostumbremos a usar variables en nuestros script, aquellas
veces que tengamos que usarlas varias veces o quede más claro el código, y facilite el posterior
mantenimiento/modificación del mismo por una tercera persona.
Puedes visitar el ejemplo 02-css/
El resultado que obtenemos suponiendo que el elemento cajaPadre está dentro del
documento sería el que muestra la siguiente imagen. Debemos observar sobre todo los valores
respecto del documento, respecto del padre y las posiciones con y sin borde:
M3. JQUERY
Cuando tenemos un elemento scroll también podemos obtener la posición de los ele-
mentos respecto a este scroll, para ello disponemos de los siguientes métodos:
scrollTop() Método que obtiene o establece la posición vertical de la barra de
desplazamiento para el elemento de destino.
scollLeft() Método que obtiene o establece la posición horizontal de la barra de

desplazamiento para el elemento de destino.
Al igual que en otros métodos, si le pasamos un parámetro, en vez de obtener el valor,

creamos el scroll con ese valor dado:
Veamos un ejemplo:
<h3>Posicionamiento en un Scroll</h3>
<hr>
<p>Mueve el scrollbar y obtén la posición del scroll vertical y horizontal en cada momento.</p>
<p id=”valoresScroll”>Posición ScrollHorizontal: 0, ScrollVertical: 0<p>
445
<div id=”miScroll”>
<img src=”img/jquery_logo.png”>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div><br>
En el CSS, tendríamos:
Aula Mentor
#miScroll{
border:1px solid black;
width:250px;
height:250px;
overflow:auto;
Y en el jQuery tendríamos:
$(“#miScroll”).scroll(function() {
var scrollVertical = $(“#miScroll”).scrollTop();
var scrollHorizontal = $(“#miScroll”).scrollLeft();
$(“#valoresScroll”).text(“Posición ScrollHorizontal: “+scrollHorizontal +”,

ScrollVertical: “+scrollVertical);
});
446
El resultado sería el siguiente, nótese que hemos agregado una imagen con un tamaño
superior al ancho del scroll para poder ver el scroll horizontal:
3. AJAX.
Una de las innovaciones que ocurrió en el desarrollo de aplicaciones web fue la apari-
ción de AJAX, aunque realmente es una forma de desarrollar aplicaciones con una técnica con-
creta y que existía hace mucho tiempo antes, usando el método XMLHttpRequest de JavaScript
para realizar peticiones asíncronas al servidor. Últimamente ha habido un gran aumento y uso
de la misma, ya que la tecnología en sí lleva mucho tiempo usándose por desarrolladores web.
Ajax requiere un gran estudio del mismo y en este curso no vamos a poder profundizar debido
a la extensión y complejidad del mismo. Eso sí, vamos a ver una introducción del mismo, usar
algunas características con jQuery comprendiendo que también podemos interactuar con él y
coger una base por si queremos profundizar en otro momento mediante AJAX.
M3. JQUERY
3.1. Introducción.
A pesar de que el término «Ajax» (Asynchronous JavaScript And XML) fue creado en
2005 por Jesse James Garrett, en la historia de las tecnologías se remonta varios años antes con la
iniciativa de Microsoft en el desarrollo de Scripting Remoto (tecnología que permite a los scripts
que se ejecutan dentro de un navegador web intercambiar información con el servidor).
Las aplicaciones se ejecutan en el cliente, es decir, en el navegador de los usuarios mien-

tras se mantiene la comunicación asíncrona con el servidor en segundo plano. De esta forma es
posible realizar cambios sobre las páginas sin necesidad de recargarlas, mejorando la interacti-
vidad, velocidad y usabilidad en las aplicaciones.
Ajax es una tecnología asíncrona, en el sentido de que los datos adicionales se solicitan
al servidor y se cargan en segundo plano sin interferir con la visualización ni el comportamiento
de la página. JavaScript es el lenguaje interpretado (scripting language) en el que normalmente
se efectúan las funciones de llamada de Ajax mientras que el acceso a los datos se realiza me-
diante XMLHttpRequest, objeto disponible en los navegadores actuales. En cualquier caso, no es
necesario que el contenido asíncrono esté formateado en XML.
Ajax es una técnica válida para múltiples plataformas y utilizable en muchos sistemas
operativos y navegadores dado que está basado en estándares abiertos como JavaScript y Docu-
ment Object Model (DOM). JQuery usaba de por sí varios métodos AJAX, uno que podemos ver
es el método .load(url, parámetros, callback), facilitando la tarea de enviar y recoger peticiones
asíncronas al servidor.
Supongamos un caso práctico, el navegador del cliente carga una página de mucho 447
“peso”, es decir, tiene muchas imágenes y contenidos que ralentizan la carga del mismo, una
vez que ha conseguido cargarla en el navegador, supongamos que queremos hacerle una con-
sulta de nuevo al servidor, pensemos que nuestra web está compuesta por muchas secciones,
artículos y queremos sólo actualizar una sección, o una caja, o sólo una parte. ¿Tendríamos que
recargar nuevamente toda la página con el coste en tiempo y peticiones web al servidor y el
tráfico que generaría nuevamente al usuario?. Es una de las opciones que nos resuelve AJAX,
imaginemos el siguiente esquema web:
Aula Mentor
En un formulario, cuando pulsamos ACTUALIZAR, si usámos los formularios tal y como

los hemos estado usando anteriormente mandaríamos el formulario al servidor y con las opcio-
nes o variables que tengan. El servidor procesaria las variables de entrada y nos devolvería de
nuevo toda la información, deberá cargar todas las secciones de la página y las correspondientes
imágenes, texto, etc, en definitiva mucho tiempo y más tráfico (MegaBytes).
Si por ejemplo queremos mandar una variable al servidor para actualizar una sección,
pero sin tener que tocar nada de lo demás, tendremos que usar otros métodos y emplear AJAX
para resolverlo.
448
Navegador del cliente
1. El servidor del cliente ha realizado una petición, en este caso el cliente quiere actualizar la
sección de las redes sociales.
2. El servidor procesa la información que le ha venido del cliente, (actualizar las redes sociales)
y depende de la acción puede necesitar hacer: consultar a bases de datos, a otros servidores,
páginas web, o resolver por si misma la petición porque tenga todos los datos para realizarlo.
3. El servidor finalmente manda los datos actualizados de esa sección al navegador del cliente,
pero no se han modificado, ni actualizado las demás secciones.
Una vez que tenemos claro qué es AJAX, podemos seguir con las tecnologías implicadas
para una aplicación con AJAX, estas serían:
1. JavaScript, para capturar las interacciones con el usuario o los eventos que deseemos aplicar,
ya sea el navegador, el ratón, etc. todos los eventos que podemos capturar del usuario.
M3. JQUERY
2. El objeto XMLHttpRequest, para permitir que las peticiones se realicen al servidor sin inte-
rrumplir otras tareas del navegador.
3. Archivos XML en el servidor u otros formatos de datos. Normalmente se suele usar HTML,
JSON, etc.
4. Nuevamente JavaScript, para recibir los datos que nos ha mandado el Servidor Web y mos-
trarlos correctamente en nuestra página.
jQuery proporciona soporte para Ajax, permitiendo abstraer las diferencias que pueden
existir entre navegadores, para ello tenemos los siguientes métodos: $.get(), $.getScript(), $getJ-
SON(), $.post() y $().load().
3.2. Preámbulo.
Debemos tener muy claros los siguientes conceptos para entender correctamente el uso
de los métodos anteriores:
3.2.1. Métodos GET y POST.
En el módulo de HTML en la sección de formulario, vimos que podíamos usar formula-

rios y usar los métodos GET y POST para enviarle la información al servidor:
Con GET, lo podemos usar cuando estemos obteniendo datos del servidor, pero no
estamos interactuando con él, son peticiones del tipo “Dame o coge”, Dame este dato, Dame lo 449
que encuentres de esta página, etc. Las solicitudes GET pueden ser almacenadas en la caché del
navegador, pudiendo conducir a un comportamiento impredecible si no se tiene en cuenta.
Con POST, se puede usar cuando estemos interactuando con el servidor, y ésta pueda
requerir agregar o modificar datos. Son peticiones del tipo “Recibe” estos datos, y dependiendo
del caso si por ejemplo es un alta de un usuario, los daremos de alta en nuestro servidor (inte-
ractuando con la Base de Datos, registros log, etc).
3.2.2. Tipos de datos.
Podemos usar muchos tipos de archivos de datos diferentes, entre los que se encuentran:
- Texto. Para el envío de las cadenas de caracteres. Si recordamos cuando en los formularios
mandábamos varias variables, estas se enviaban en formato de texto plano.
- Html. Para transportar los trozos de código HTML que serán insertados/ubicados en la pá-
gina.
- Script. Fichero con código JavaScrip, por ejemplo añadir script nuevo o funciones nuevas
a nuestra página.
- Json. Para transportar información en formato JSON, incluyendo más información (cadenas
de caracteres, array y objetos). JSON, es un formato muy estándar y usado para el intercam-
bio de información, tanto de aplicaciones web, como de aplicaciones de dispositívos móvi-
les. http://es.wikipedia.org/wiki/JSON
Aula Mentor
- Jsonp. Para transportar información JSON de un dominio a otro.
- XML. Para transportar información en formato XML. Junto con JSON, son dos formatos muy
extendidos, usados a nivel web y de intercambio de información. Por ejemplo entre un ERP
(Enterprise Resource Planning) o incluso la tendencia en los bancos para comunicarnos con
ellos es usar archivos XML, como son los cuadernos que envían las empresas, como puede
ser la SEPA:
http://docs.oracle.com/cd/E39564_01/doc.91/e39169/fields_sepa_pay_file_appx.
htm#EOAEL00518
3.2.3. Sincronismo/Asincronismo.
Hemos hablado de solicitudes asíncronas, y vamos hacer un poco hincapié en resolver

este concepto, ya que es importante entender a qué se refiere AJAX con asíncrono.
Si tenemos varias llamadas de Ajax de modo asíncrono podemos tener varias peticiones
al servidor de manera paralela por lo que nos puede ayudar a cargar la información más rápida,
o podemos estar interactuando con varios elementos y cada elemento tardará el tiempo que
necesite en dar su respuesta o resultado.
En caso de que el llamado al Ajax estuviera en modo síncrono entonces la petición al

servidor se realizaría de uno en uno y se tardaría más en cargar información. La parte que más
nos interesa es usarla de forma asíncrona por lo que aunque no lo usemos en este manual es
bueno que sepas que se puede usar.
450
3.2.4. Métodos AJAX en jQuery.
3.2.4.1. $.get()
La sintaxis que podemos usar con jQuery para hacer consultas es la siguiente:
$.get(url[, datos][,función][,tipo])
Para ello utiliza la consulta HTTP GET siendo los parámetros siguientes:
url: Una cadena de caracteres que contiene la URL del archivo que se
quiere cargar.
datos: (opcional). Lista expresada en pares en forma de clave/valor que

se enviarán como datos al servidor.
función: (opcional). La función que se debe ejecutar si la consulta trascurre

correctamente.
tipo: (opcional). Cadena de caracteres que especifica el tipo de datos

que se van a transmitir: xml, script, json, jsonp, text o html.
El metodo nos devuelve un objeto XMLHttpRequest.

M3. JQUERY
3.2.4.2. $.post()
La sintaxis que podemos usar con jQuery para hacer consultas es la siguiente:
$.post(url[, datos][,función][,tipo])
Para ello utiliza la consulta HTTP POST siendo los parámetros siguientes:
url: Una cadena de caracteres que contiene la URL del archivo que se
quiere cargar.
datos: (opcional). Lista expresada en pares en forma de clave/valor que

se enviarán como datos al servidor.

correctamente.
tipo: (opcional). Cadena de caracters que especifica el tipo de datos

que se van a transmitir: xml, script, json, jsonp, text o html.
3.2.4.3. $getScript()
La sintaxis que podemos usar para cargar un script usando el método HTTP GET y eje- 451
cutarlo sería el siguiente:
$.getScript(url[,función])
Donde:
url: Sería una cadena de caracteres que contiene la URL del script que
se quiere cargar.

correctamente. Aunque la mayoría de las veces no es necesaria ya que
el script se ejecutaría si todo va bien y ahí meteríamos nuestras
acciones, pero si queremos independizar la ejecución del script de la
llamada al método, podemos usarla.
3.2.4.4. $.ajax()
De los métodos existentes en jQuery para trabajar con AJAX, este es el que comprende
los demás métodos por lo que es una buena práctica el uso del método $.ajax en lugar de los
otros ya que ofrece más características y está al igual que las demás funciones jQuery para un
uso más comprensible.
Para configurar el método $.ajax lo haremos a través de un objeto, el cual contiene todas
las instrucciones que necesita jQuery para completar la petición. Se pueden especificar acciones
Aula Mentor
en caso que la petición haya tenido éxito o no, además, al estar configurado como un objeto, es
posible definir sus propiedades de forma separada, haciendo un código más legible, reutiliza-
ción de código y un mantenimiento más optimo.
La lista de opciones de configuración completa siempre la podemos consultar desde la

documentación oficial:
http://api.jquery.com/jQuery.ajax
Entre las opciones de configuración más importantes tendríamos las siguientes:
async De forma predeterminada el valor es true, y establece si la petición

se va a realizar de forma asíncrona o no. Si recordamos es un punto
muy importante y si usamos la opción a false la petición bloqueará
la ejecución de otros códigos hasta que dicha petición haya finalizado.
cache Establece si la petición será guardada en la caché del navegador,

de forma predeterminada es true para los dataType excepto para script
y jsonp. Cuando posee el valor false, se agrega un cadena de
caracteres anti-caché al final de la URL de la petición.
complete Establece una función de devolución de llamada que se ejecuta

cuando la petición está completa/finalizada, aunque haya fallado o no.
La función recibe como argumentos el objeto de la petición en crudo y
el código de estado de la misma petición.
452
context Establece el alcance en que la/s función/es de devolución de llamada se
ejecutarán. De manera predeterminada será this, haciendo referencia al
objeto originalmente pasado al método $.ajax.
data Establece la información que se enviará al servidor. Puede ser objeto o

cadena de caracteres.
dataType Establece el tipo de información que se espera recibir como respuesta

del servidor, en caso de no especificarse ningún valor, se revisa el MIME
que posee la respuesta.
error Establece una función de devolución de llamada a ejecutar en caso de

que exista algún error en la petición. Dicha función recibe como argu
mentos el objeto de la petición y el código de estado de la misma.
jsonp Establece el nombre de la función de devolución de llamada a

enviar cuando se realiza una petición JSONP. De forma predeterminada
es “callback”.
success Establece una función a ejecutar si la petición ha sido satisfactoria.

Dicha función recibe como argumentos la información de la petición, el
estado de la misma y el objeto de la petición.
timeout Establece un tiempo máximo de ejecución para considerar una petición

como fallida o errónea. Expresada en milisegundos.
M3. JQUERY
traditional Establece si se usa el estilo de serialización de datos, su valor por

defecto es true.
type Establece el tipo de petición, por defecto su valor es GET, pero se

puede usar otros tipos como PUT y DELETE. Debemos tener en cuenta
que este parámetro no está soportado por la mayoría de los navegadores.
url Establece la URL donde se realiza la petición. Es obligatoria para poder

usar el método $.ajax.
Por último comentar que existen muchos más métodos como ajaxSetup(parámetros)
o serialize() que nos ayuda en las consultas y en la serialización de datos. La serialización de
datos es muy importante para transformar todos los campos y parámetros de un formulario de
forma contínua en una cadena de caracteres. Por ejemplo en el siguiente caso, se enviaría al
servidor la siguiente cadena:
single=Single&multiple=Multiple&multiple=Multiple3&check=check2&radio=radio1
AJAX y jQuery como vemos están integrados para poder funcionar conjuntamente en
nuestras aplicaciones web, no te preocupes si este apartado no lo has comprendido totalmente,
ya que solamente es una pequeña introducción y si nunca has usado AJAX, debes pensar que
son métodos nuevos y necesitaríamos más tiempo para poder comprenderlos. Si has usado antes 453
AJAX puedes profundizar en la documentación oficial y sacarle aún más provecho a tu manejo
de jQuery, si es la primera vez quédate con la idea principal y cuando dispongas de tiempo
siempre puedes retomarlo.
3.2.5. Posicionamiento (SEO) con AJAX.
No debemos olvidar que el posionamiento de una página es hoy en día uno de los fac-
tores más importantes de cualquier aplicación web, ya que al existir muchas y crecer día a día
en número, es vital salir por delante en las búsquedas de las web competidoras, así los usuarios
eligirán antes la web que salga en los primeros resultados.
Pensemos que mucha información con AJAX sea cargada de forma asíncrona, cuando los
robots de los buscadores, por ejemplo de google pasaban a leer la información, no estan leyen-
do directamente el fichero como tal, ya que existen una cantidad de peticiones y respuestas para
completar la web en paralelo. Antiguamente no se indexaban correctamente y las web realizadas
en AJAX siempre salían detrás de las web no realizadas con AJAX.
Por todo esto, es muy importante pararnos y tener en cuenta este punto sobre AJAX,
puesto que tenemos que estudiar muy bien los casos en los que sería necesario, y en el caso
de usar AJAX, seguir unos métodos y pautas que existen para que no afecten a la indexación y
posicionamiento en los buscadores. Ya que si no los tenemos en cuenta, tendrémos una página
muy dinámica y rápida pero muy mal posicionada.
Aula Mentor
4. Efectos.
Un punto muy importante que no debemos olvidar al usar jQuery es el uso de efectos y
animaciones en nuestras aplicaciones web. Antíguamente cuando se veía una página web con
animaciones siempre se asociaba a Macromedia Flash Player, debido a que permitían un gran
abanico de efectos, animaciones y posibilidades. Hoy en día con jQuery podemos usar las ani-
maciones y efectos más típicos usados en las webs sin tener que obligar al usuario tener instala-
do la última versión de Adobe Flash Player. Este punto que a priori puede no tener importancia,
cuando estamos hablando de dispositivos móviles, sobre todo los Iphone a no ser que se instalen
aplicaciones externas no pueden ver las páginas web con Flash, con la consecuente pérdida de
usuarios que usan estos dispositivos.
4.1. Ocultar/mostrar elementos.
Con estos métodos de jQuery .show() y hide(), podemos hacer aparecer y desaparecer
elementos HTML, pudiendo crear efectos ante el usuario muy interesantes. La sintaxis sería la
siguiente:
$(selección).show( velocidad, función a la que llama)
Muestra el/los elemento/s seleccionados en caso de estar ocultos.
$(selección).hide( velocidad, función a la que llama)
454 Oculta el/los elemento/s seleccionados en caso de estar ocultos
La velocidad expresa la velocidad en aplicar el efecto, es un parámetro opcional y pue-

de ser slow, normal o fast, aunque también se puede expresar en milisegundos.
La función a la que llama (callback) es la función que se va a ejecutar cuando termine

el efecto y este parámetro también es opcional.
Ejemplos:
$(‘p’).show()
$(‘.claseMostrar’).show()
$(‘.claseMostrar’).show(’normal’)
$(‘.claseMostrar’).show(’slow’)
$(‘.claseMostrar’).show(’fast’, function(){ alert(“He terminado el efecto”);})
$(‘p’).hide()
$(‘.claseOcultar’).hide()
$(‘.claseOcultar’).hide(’normal’)
M3. JQUERY
$(‘.claseOcultar’).hide(’slow’)
$(‘.claseOcultar’).hide(’fast’, function(){ alert(“He terminado el efecto”);})
Si por ejemplo tenemos el siguiente código HTML,
. . .
<p>A continuación, bloque con la clase OCULTAR</p>
<hr>
<div class=”ocultar”>
<p class=”mostrar”> Texto1 de la clase mostrar </p>
<p class=”ocultar”> Texto3 de la clase ocultar </p>
<p class=”ocultar”> Texto6 de la clase ocultar </p> 455
</div>
<hr>
<p>A continuación, bloque con la clase MOSTRAR</p>
<hr>
<div class=”mostrar”>
Aula Mentor
</div>
<hr>
<button id=”btnMostrar”>Mostrar</button><button id=”btnOcultar”>Ocultar</button>
456 . . .
Si en el script de jQuery tenemos:
. . .
var contador = 0;
$(‘#btnMostrar’).click(function(){
//Mis acciones
contador = 0;
$(‘.ocultar’).show(‘fast’, function(){contador++;console.log(“Mostrando “+contador+”

elemento.”);});
});
$(‘#btnOcultar’).click(function(){
//Mis acciones
M3. JQUERY
contador = 0;
$(‘.ocultar’).hide(‘slow’, function(){contador++;console.log(“Ocultado “+contador+”

elemento.”);});
});
. . .
Y en el CSS:
.ocultar{
background-color: #F3E5A9;
.mostrar{
background-color: #F3E5A9;
El efecto será que dependiendo del botón que pulsemos, Mostrar u Ocultar, realizará una
acción u otra. Si nos fijamos la clase .mostrar no hace realmente nada en este script, ya que sólo 457
ponemos oculto/visible los elementos HTML que pertenezcan a la clase .ocultar. Es una buena
práctica aprovechar y utilizar los nombres cuando realmente tengan un sentido semántico, por-
que en un futuro, si necesitamos en vez de mostrar los elementos con la clase .ocultar queremos
ocultar los elementos que pertenezcan a la clase .mostrar tenemos la opción de hacerlo, porque
ya hemos dotado el código con la posibilidad de algún cambio.
Si este código estuviera en una gran aplicación web, y no lo hubieramos declarado

inicialmente, no tendríamos una forma de seleccionar exactamente esos elementos que no son
.ocultar, en tal caso, tendríamos que buscar dentro del código del archivo todas las etiquetas a
las que le queremos añadir la clase .mostrar. En resumen se podría decir que hay que intentar
asignar correctamente los nombres a los elementos que son susceptibles de posibles cambios
futuros como ya vimos en otras unidades.
Un ejemplo muy usado en las web con estos dos efectos, es el típico botón de leer más,
en el que al pulsar sobre él, muestra el contenido completo del párrafo. Para ello se puede
hacer de varias formas, por ejemplo si cogemos los datos de una base de datos agregamos dos
párrafos, por ejemplo, el primer párrafo con las primeras 50 palabras, o 100 caracteres, y el se-
gundo párrafo que estará oculto con el resto. Centrándonos en la parte de ocultar/mostrar texto
podríamos hacer los siguiente en el fichero HTML:
. . .
<a name=”leer_mas”></a>
<h3><a href=”#leer_mas”>EFECTOS con jQuery: .hide() y .show(). Leer más</a></h3>

Aula Mentor
<p class=”encabezadoArticulo”>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eius-
modtempor incididunt ut labore et dolore magna aliqua.
<br>
<button class=”leerMas”>Leer mas...</button>
</p>
<p class=”restoArticulo”>Ut enim ad minim veniam,
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br>
<button class=”leerMenos”>Leer menos...</button>

458
</p>
. . .
En el CSS ocultamos inicialmente el resto del artículo:
.restoArticulo{
display: none;
Y en el script hacemos lo siguiente:
. . .
$(‘.leerMas’).click(function(){
//Mis acciones
contador = 0;
$(‘.restoArticulo’).show();
M3. JQUERY
//Ocultamos el botón para que de la sensación de continuidad
$(‘.leerMas’).hide();
});
$(‘.leerMenos’).click(function(){
//Mis acciones
contador = 0;
$(‘.restoArticulo’).hide();
//Mostramos el botón para que el usuario pueda extender el artículo
$(‘.leerMas’).show();
});
. . .
Puedes visitar el ejemplo 03-efectos/#leer_mas 459
Debemos tener en cuenta que en determinadas ocasiones tendremos que usar efectos
combinados, como por ejemplo en el ejemplo anterior que cuando mostramos el texto, oculta-
mos el botón de leerMas.
4.2. Fundidos.
Hacer fundidos de los elementos con jQuery es posible gracias a los métodos de fading
que disponemos. Este método interacciona sobre los elementos HTML a través del cambio de la
propiedad opacity de CSS.
Recordando que con Opacity podemos variar el fundido con valores entre 0 (totalmente
transparente) y 1 (totalmente opaco). Existen los siguientes métodos para trabajar con los fundi-
dos:
fadeOut() Con este método conseguimos que el elemento que lo recibe desaparezca de la
página a través del cambio de su opacidad, haciendo una transición suavizada
con tendencia al valor de opacity cero.
fadeIn() Con este método conseguimos que el elemento que lo reciba aparezca en la
página a través del cambio de su opacidad, haciendo una transición suavizada
con tendencia al valor de opacity 1. Para poder apreciar este método el
elemento sobre el que estamos trabajando, debe estar con un valor inferior a 1,
es decir, que esté parcial o totalmente transparente.
Aula Mentor
fadeTo() Permite hacer cualquier cambio de opacidad, desde cualquier valor y a

cualquier valor. Este método recibe la duración deseada, el valor de la opacidad
al que queremos llegar y una posible función callback.
Veamos un ejemplo donde pongamos en práctica estos métodos:
. . .
<button id=”desapareceT”>FadeOut-Desaparece</button>
<button id=”apareceT”>FadeIn-Aparece</button>
<button id=”aumentaFade”>Desvanecimiento (+0.1)</button>
<button id=”disminuyeFade”>Desvanecimiento (-0.1)</button>
<div id=”miCaja”><img src=”img/jquery_logo.png” alt=”milogo” id=”miImagen”>
. . .
En el script jQuery tendríamos lo siguiente:
460 . . .
$(‘#desapareceT’).click(function(){
$(‘#miImagen’).fadeOut();
});
$(‘#apareceT’).click(function(){
$(‘#miImagen’).fadeIn();
});
var opacidadActual = 1;
var incrementoOpacidad = 0.10;
$(‘#aumentaFade’).click(function(){
if(opacidadActual >= 1){

M3. JQUERY
alert(“Ya no puedes aumentar más porque el valor es el máximo”);
}else{
opacidadActual=(parseFloat(opacidadActual)+parseFloat(incrementoOpacidad)).
toFixed(2);
$(‘#miImagen’).fadeTo( “fast”, opacidadActual);
});
$(‘#disminuyeFade’).click(function(){
if(opacidadActual <= 0){
alert(“Ya no puedes disminuar más porque el valor es el mínimo”);

461
}else{
opacidadActual=(opacidadActual-incrementoOpacidad).toFixed(2);
$(‘#miImagen’).fadeTo( “fast”, opacidadActual);
});
. . .
Y debemos ver en el navegador algo parecido a esto:
Si hemos llegado al valor inferior en el desvanecimiento y posteriormente pulsamos en

el botón FadeIn-Aparece no se debe mostrar la imagen con su máximo valor. Al estar definido
como transparente previamente, lo está mostrando, pero con un fundido transparente. Es decir,
con FadeOut hacemos que desaparezca el objeto, y con FadeIn aparece, pero con el valor previo
que tenga definido con FadeTo.
Aula Mentor
Hemos usado parseFloat(número) para indicar a JavaScript que no queremos que conca-
tene los valores número 1 y número 2, ya que si recordamos en JavaScript teníamos el operador
+, y dependiendo del caso debemos asegurarnos que estamos trabajando con números sino
tendremos resultados inesperados. Existen muchos métodos que nos ayudarán para asegurarnos
que estamos trabajando o queremos convertir al tipo que deseemos, entre los más importantes:
eval(), isFinite(), isNaN(), Number(), parseFloat(), parseInt(), String().
También hemos usado el método toFixed(2) que reduce el número de decimales a dos,
porque en este caso no necesitamos más decimales. Es recomendable usar siempre mensajes
en la consola para ayudarnos en la depuración del programa, del tipo console.log(“Mensaje :
“+variable). Te recomiendo que modifiques la línea del script:
opacidadActual=(parseFloat(opacidadActual)+parseFloat(incrementoOpacidad)).toFixed(2);
Por esta:
opacidadActual=opacidadActual+incrementoOpacidad;
Observa en la consola que es lo que pasa cuando vamos interactuando con los botones. ¿Y si
además quitamos el método toFixed(2)?
Puedes visitar el ejemplo 03-efectos/#fundido
4.3. Desplazamientos.
462
Existen unos métodos que van a ayudarnos a crear efectos de desplazamiento sobre
nuestra página, realmente lo que hacen es modificar dinámicamente la altura de un elemento,
normalmente se aplica a una capa/caja de tipo <div></div>.
slideDown( velocidad, función a la que se llama) Desplaza hacia abajo (down)
slideUp( velocidad, función a la que se llama) Desplaza hacia arriba (up)
El parámetro velocidad es opcional y se puede expresar en milisegundos o con las

palabras reservadas “normal”, “slow” o “fast”.
La función a la que se llama también es opcional e indicaríamos con el parámetro la

función que se tiene que ejecutar cuando termine el efecto.
Veamos un ejemplo donde usemos ambos métodos:
<div>
<button id=”desplazamiento”>Pulsa para desplazar</button>
</div>
<div id=”midesplazamiento”></div>
M3. JQUERY
#midesplazamiento{
height: 100px;
width: 100px;
background-color: #A0A0A0;
Y en el script de jQuery tendríamos:
$(‘#desplazamiento’).click(function(){
//slideDown pone la propieda display: none
//Comprobamos si está oculto el elemento para mostrarlo
if($(“#midesplazamiento”).is(“:hidden”)){ 463
$(“#midesplazamiento”).slideDown(“slow”);
}else{
$(“#midesplazamiento”).slideUp(“slow”);
});
El resultado lo puedes ver en el ejemplo de los recursos del curso:
Puedes visitar el ejemplo 03-efectos/#desplazamiento

Aula Mentor
4.4. Animaciones.
En jQuery podemos usar el método animate() y aplicar las propiedades necesarias en

CSS para crear la animación. Con este tipo de animaciones podemos modificar las propiedades
y crear efectos. La sintaxis sería la siguiente:
.animate( Propiedades, [ Duración], [ Función de animación ], [ Callback ] )
Propiedades: Este es el único parámetro que se debe indicar obligatoriamente y sirve

para indicar qué atributos CSS queremos actualizar, con los nuevos
valores que adoptará el objeto. Se tiene que indicar en notación de
objeto, de manera similar a como se puede indicar en el método css()
de jQuery y sólo permite el cambio de propiedades CSS que tengan
valores numéricos.
Duración: Sirve para indicar la duración de la animación, en un valor numérico en

milisegundos, o palabras clave normal, slow o fast.
Función de animación: Esta función sirve para indicar cómo se realizará la animación, si
más suave al principio y rápida al final, o igual de rápida todo el
tiempo. Es decir, la velocidad con la que se realizará el cambio de
valores en diferentes puntos dentro de la animación. En principio, los
dos posibles valores son “swing” (por defecto) y “linear”.
Callback: Ofrece la posibilidad de indicar una función a ejecutarse cuando se ha

464 terminado totalmente de producir el efecto. Es decir, una función que se
invoca cuando se ha llegado al valor final de los atributos CSS que se
solicitaron cambiar.
Veamos un simple efecto donde vamos a cambiar el tamaño de letra de un texto:
. . .
<p class=”miAnimacion”>Este texto será animado cambiando sus propiedades al pulsar el botón</p>
<div>
<button id=”creaAnimacion”>Anima el elemento</button>
<button id=”restableceAnimacion”>Restablece valores iniciales CSS</button>
</div>
. . .
En nuestro CSS podríamos tener:

M3. JQUERY
.miAnimacion{
color: blue;
font-size: 12pt;
Debes entender que no todas las propiedades pueden ser animadas, por ejemplo, colo-
res y aquellas que no tengan un valor que pueda ir creciendo o disminuyendo. Con este método
podemos modificar las propiedades de CSS, controlar el tiempo que va a tardar en aparecer la
animación y todo ello de una forma sencilla. En este ejemplo hemos usado solo el tamaño de
fuente, si quieres ver más ejemplos de animación en el siguiente enlace http://api.jquery.com/
animate/.
4.5. Cola de efectos.
Cuando tenemos varios efectos en nuestro documento, estos se van introduciendo en

una cola de efectos predeterminado llamado “fx”. Cada elemento de la página tiene su propia
cola de efectos predeterminado y funciona de manera automática. Al invocar los efectos se van
metiendo ellos mismos en la cola y se van ejecutando automáticamente, uno detrás de otro, con
el orden en el que fueron invocados.
Un ejemplo de cola de efectos puede ser:

465
. . .
<p id=”colaEfectos”>TEXTO</p>
<div>
<button id=”iniciaCola”>Inicia Cola de Efectos</button>
</div>
. . .
En el script de jQuery tendríamos:
. . .
$(‘#iniciaCola’).click(function(){
var micapa = $(‘#colaEfectos’);
micapa.animate({“font-size”: “27pt”}, 2500);
micapa.hide(2000);
Aula Mentor
micapa.show(2000);
micapa.animate({“margin-left”: “450px”, “marging-top”: “70px”}, 2000);
});
. . .
Y en el CSS, para destacar un poco el texto lo pondremos naranja y un poco más grande
de lo habitual:
.miAnimacion{
color: blue;
font-size: 12pt;
}
466
Ejecuta el código, haz click sobre el botón Inicia Cola de Efectos y verás como realiza
una detrás de otra y de forma ordenada la cola de efectos que le hemos agregado.
Puedes visitar el ejemplo 03-efectos/#colaEfectos
4.6. Método queue.
El método queue está íntimamente relacionado con la cola de efetos “fx” mencionado en
el apartado anterior. Usando este método podemos ver la lista de eventos encolados, o encolar
incluso otras acciones que no son efectos como tal.
elemento.queue() o también elemento.queue(“fx”)
Por ejemplo con:
Con este método obtendremos la lista de eventos encolados:
. . .
<p id=”colaEfectos”>TEXTO</p>
<div>
<button id=”iniciaCola”>Inicia Cola de Efectos</button>

M3. JQUERY
</div>
<p id=”listaEfectos”></p>
. . .
En el script tendríamos:
var micapa = $(‘#colaEfectos’);
var areaNotificaciones = $(‘#listaEfectos’);
function notificaListaEfectos(efectoActual, indice){
//Si comentamos la siguiente línea parecerá que no se ejecuta
alert(“Me han llamado”);
areaNotificaciones.text(“Elementos en la cola de efectos: “+ micapa.queue().length)
areaNotificaciones.append(“<br>Efecto Actual [“+indice+”]: “ + efectoActual);
} 467
$(‘#iniciaCola’).click(function(){
notificaListaEfectos(String(‘.animate({“font-size”: “27pt”}, 2500);’), 1);
micapa.hide(2000);
notificaListaEfectos(String(‘hide(2000)’),2);
micapa.show(2000);
notificaListaEfectos(String(‘show(2000)’),3);
micapa.animate({“margin-left”: “450px”, “marging-top”: “70px”}, 2000);
notificaListaEfectos(String(‘”margin-left”: “450px”, “marging-top”: “70px”’),4);
notificaListaEfectos(String(‘”font-size”: “5pt”’),5);

Aula Mentor
notificaListaEfectos(String(‘”font-size”: “27pt”’),6);
});
Si ejecutamos este código observaremos que por un lado se ejecutan los efectos y por
otro las notificaciones. Esto es porque el navegador agrega los efectos a su cola y los muestra
todos seguidos y sin interacción con el código, ya que hasta que no tiene todos los efectos no
tenemos la cola, por eso hemos agregado un alert(“Me han llamado”) para detener el código y
realmente ver qué está pasando.
En cada iteracción estoy agregando un valor más a la cola de propiedades del elemento,
y si comentamos esa línea nos dará la sensación de que ha calculado bien el número de efectos
(6) pero no nos va cambiando como esperábamos el texto en la página.
Supongo que estarás pensando en lo siguiente, si por un lado tenemos la cola de efectos
y el navegador ejecuta por otro lado el otro código, si quiero agregar otras funciones que no
sean animaciones como tal, ¿cómo se haría?
Para ello podemos usar el método .queue pero agregándole otros parámetros:
.queue([nombreCola], callback(continua))
Donde nombreCola sería opcional e indica el nombre de la cola donde encolar una
función. Si no se indica nada, se encolará a la cola predeterminada “fx”, se encola esa función en
la cola por defecto que gestiona jQuery por nosotros, ejecutando uno detrás de otro los efectos
468 del elemento. Si se indica un nombre, se encolará por nuestra cola y ésta la debemos gestionar
nosotros.
El otro parámetro callback(continua) sería la función que se desea encolar. Al encolarla

se coloca como última de las funciones a ejecutar de la cola, por tanto se tendrán que ejecutar
todas las funciones anteriores antes de llegar a ésta.
Para ayudarnos en todo el proceso, tenemos el método dequeue(), que puede recibir
un parámetro que es el nombre de la cola que se debe continuar ejecutándose. Si no indicamos
ninguna cola o indicamos el valor “fx”, la cola que seguirá procesándose por defecto.
Veamos un ejemplo donde vamos a intercalar animaciones con otras acciones:
. . .
<h4>Ejemplo 1: </h4><hr>
<p id=”colaEfectosQueue”>TEXTO</p>
<div>
<button id=”iniciaColaQueue”>Inicia Cola de Efectos</button>
</div>
. . .
M3. JQUERY
En el CSS:
#colaEfectosQueue {
color: orange;
font-size: 20pt;
Y en el script tendríamos:
. . .
var micapaQueue = $(‘#colaEfectosQueue’);
var areaNotificacionesQueue = $(‘#listaEfectosQueue’);
function notificaListaEfectosQueue(efectoActual, indice){
//Si comentamos la siguiente línea parecerá que no se ejecuta 469
//alert(“Me han llamado”);
areaNotificacionesQueue.text(“Elementos en la cola de efectos: “+ micapaQueue.queue().length)
areaNotificacionesQueue.append(“<br>Notificación Actual [“+indice+”]: “ + efectoActual);
notificaListaEfectosQueue(‘Inicio’, 0);
$(‘#iniciaColaQueue’).click(function(){
//-------------CSS y OTROS-----------------------------
micapaQueue.queue(function(){
//Podemos intercarlar cambios de propiedades CSS
$(this).css({
Aula Mentor
“border”: “5px solid blue”,
});
notificaListaEfectosQueue(‘font-size”: “27pt y “border”: “5px solid blue”’, 1);
$(this).dequeue();
});
//-------------ANIMACION-------------------------------
micapaQueue.animate({“font-size”: “27pt”}, 2500);
//-------------OTROS-----------------------------
notificaListaEfectosQueue(‘hide(2000)’, 2);
$(this).dequeue();
});
470 //-------------ANIMACION-------------------------------
micapaQueue.hide(2000);
//-------------OTROS-----------------------------
notificaListaEfectosQueue(‘show(2000)’, 3);
$(this).dequeue();
});
//-------------ANIMACION-------------------------------
micapaQueue.show(2000);
//-------------OTROS-----------------------------
M3. JQUERY
notificaListaEfectosQueue(‘margin-left”: “450px”, “marging-top”: “70px”’, 4);
$(this).dequeue();
});
//-------------ANIMACION-------------------------------
micapaQueue.animate({“margin-left”: “450px”, “marging-top”: “70px”}, 2000);
//-------------OTROS-----------------------------
notificaListaEfectosQueue(‘margin-left”: “450px”, “marging-top”: “70px”’, 5);
$(this).dequeue();
});
//-------------ANIMACION-------------------------------
micapaQueue.animate({“font-size”: “5pt”}, 2500); 471
//-------------OTROS-----------------------------
notificaListaEfectosQueue(‘”font-size”: “27pt”’, 6);
$(this).dequeue();
});
//-------------ANIMACION-------------------------------
micapaQueue.animate({“font-size”: “27pt”}, 2500);
//-------------OTROS----------------------------
Aula Mentor
notificaListaEfectosQueue(‘”font-size”: “27pt”’, 7);
$(this).dequeue();
});
. . .
Puedes ver este ejemplo en 03-efectos/#colaEfectosQueue1
4.7. Detener efectos.
Cuando estamos realizando una animación con el método .stop() podemos parar la eje-
cución de la misma. Tiene la siguiente sintaxis:
.stop([limpiarCola],[irAlFinal])
Donde el parámetro limpiarCola sirve para eliminar todas las funciones que pudiera ha-
ber en la cola de efectos todavía por ejecutar, ya que si ejecutamos .stop() sin ningún parámetro
detendríamos sólo el efecto actual. Este parámetro es booleano indicando true detendrá toda la
cola, indicando false (u omitiendo el parámetro) detendremos sólo la animación actual.
El siguiente parámetro irAlFinal sirve para que se detenga el efecto de animación ac-
tual, pero que se coloque directamente en el valor final al que tendría ese efecto. Es un pará-
472 metro booleano, si se indica false, indica que la animación se para y se queda donde se había
detenido. Si indicamos true en este parámetro, aunque no se haya terminado el efecto, saltaría
al siguiente efecto, es decir se iría al final de la animación.
Veamos un ejemplo:
. . .
<button id=”start”>Iniciar</button>
<button id=”stop”>Parar</button>
<button id=”stop2”>Parar todo</button>
<button id=”stop3”>Parar e ir al final</button>
<div id=”detenerEfectos”>jQUERY</div>
. . .
M3. JQUERY
#detenerEfectos{
background:lime;
height:80px;
width:210px;
position:absolute;
Y en el script de jQuery tendríamos:
$(“#start”).click(function(){
$(“#detenerEfectos”).animate({left:’100px’},4500);
$(“#detenerEfectos”).animate({fontSize:’3em’},4500);
});
473
$(“#stop”).click(function(){
$(“#detenerEfectos”).stop();
});
$(“#stop2”).click(function(){
$(“#detenerEfectos”).stop(true);
});
$(“#stop3”).click(function(){
$(“#detenerEfectos”).stop(true,true);
});
Aula Mentor
Puedes ver el resultado en 03-efectos/#pararEfectos
5. Resumen.
- Todas las aplicaciones web suelen tener de una u otra forma algún formulario donde el
usuario nos introducirá los datos. jQuery nos proporciona muchos métodos para acceder
a ellos de forma concreta seleccionando qué tipo de campo o tipo de elemento es, y ten-
dríamos: :input, :submit, :text, :password, :radio, :checkbox, :checked, :selected, :disabled,
:enabled, :button, :image, :focus, :file, :reset.
- Para evitar sobrecarga de tráfico entre el servidor y los clientes, es conveniente hacer valida-
ciones de los datos que nos introduce el usuario en el formulario. Además éstas le ayudarán
para indicarles cómo es la forma correcta de rellenar los formularios. Existirían dos formas
de realizar estas validaciones, por nosotros mismos accediendo a los métodos y creando
las reglas pertinentes o de forma externa usando los métodos que nos proporciona jQuery
Validate. Existiendo ya predifinidas la mayoría de las funciones para comprobar datos del
formulario.
- jQuery puede interactuar también con las hojas de estilo CSS, accediendo y modificando las
propiedades definidas en el propio fichero .css. Tendríamos por tanto:
$(‘miseleccion’).css(‘propiedad’) Acceder o lee la propiedad de la selección.
$(‘miseleccion’).css(‘propiedad’, ‘valor’) Modifica la propieda con el valor indicado.

474
- Al igual que podemos acceder a las propiedades de los elementos de la hoja de estilo, po-
demos acceder a los valores de posicionamiento y dimensión de las capas o cajas creadas
por elementos de bloque, del tipo <div>. Estas serían: innerWidth(), innerHeight(), ou-
terWidth(), outerHeight(), offset(), position().
- Podemos emplear el uso de AJAX con jQuery a través de los métodos $.get(), $.post(), $get-
Script() y sobre todo del $.ajax(), pudiendo interactuar al igual que se hacía con JavaScript
pero de una forma más simplificada.
- Una forma de hacer aplicaciones web dinámicas, llamativas y que se diferencien del resto es
el uso de los efectos. Se pueden hacer los siguientes:
• Ocultar o mostrar elementos: .show(v) y .hide(v)
• Realizar fundidos: .fadeIn(v), .fadeOut(v) y .fadeTo(v)
• Desplazamientos: .slideDown( v, f) y .slideUp(v, f)
• Animaciones: .animate(Propiedades,[v],[Funcióndeanimación],[Callback])
• Crear colas de efectos: Usando animaciones una detras de otra
• Ver la cola de efectos: .queue([nombreCola], callback(continua))
• Detener los efectos: .stop([limpiarCola],[irAlFinal])

Unidad 8. jQuery UI y Plugins
1. jQuery UI.
Con el contenido de las unidades anteriores podemos desarrollar todo tipo de apli-
caciones web, ya que tenemos conocimientos sobre la página web con HTML5, el diseño o
maquetación con CSS3 y podemos interactuar enriquecidamente mediante jQuery. A partir de
esta unidad, vamos a ver otras formas de realizar aplicaciones web o detalles externos a tener
en cuenta en el desarrollo de nuestra aplicaciones.
jQuery fue un proyecto inicial donde se encontraban bibliotecas en JavaScript para fa-
475
cilitar la manipulación del DOM del documento, eventos y simplificar algunas acciones que ya
hacía JavaScript. Este proyecto fue creciendo y fueron añadiendo más bibliotecas, sobre todo
orientadas para que los diseñadores a la hora de implementar componentes de la web tuvieran
su tarea de una forma más sencilla.
Surgió entonces jQuery UI, que es una biblioteca de componentes para el framework
jQuery que le añade un conjunto de plug-ins, widgets y efectos visuales para la creación de
aplicaciones web. Cada componente o módulo se desarrolla de acuerdo a la filosofía de jQuery
(find something, manipulate it: encuentra algo, manipúlalo).
1.1. Instalación y uso en nuestra aplicación.
Para usar jQuery UI necesitamos al igual que cuando usábamos jQuery descargar un
archivo, éste contendrá las librerías que vamos a usar. Depende de la aplicación o el documento
en el que estemos trabajando, es posible que no necesitemos todas las librerías, sino sólo parte
de ellas que contendrán los elementos que vamos a usar nosotros.
Para descargarnos las librerias tenemos que irnos a la página de descargas oficial:
http://jqueryui.com/download/
Nos aparecerán una página con unos checkbox donde elegiremos qué opciones son las
que vamos a usar; para descargarnos exclusivamente aquellos componentes que vamos a usar,
en nuestro caso vamos a descargarnos la versión completa y dependiendo de la unidad tendre-
mos aquellas partes para no cargar mucho el documento o página web.
Aula Mentor
En el desarrollo de este manual está la versión jQueryUI 1.11.0, es muy probable que
cuando estés realizando el curso exista otra versión, ya que cada mes o mes y medio salen nue-
vas actualizaciones o mejoras, hay muchos programadores detrás de este proyecto y cada vez
van aportando nuevos códigos. De todas formas, en los recursos del curso hay una carpeta don-
de podrás descargarte todos los archivos que están en relación exacta con el curso y además, lo
más probable es que no tengas muchos problemas para usar la última versión existente, ya que
en muchos casos son totalmente compatibles con otras versiones, por lo que hay que revisar la
documentación.
En la página podemos seleccionar varias opciones y a modo de resumen podemos verlas

en el siguiente esquema:
476
Versión: Cada versión de jQuery UI está preparada para funcionar con una
versión de framework jQuery.
Componentes: Podemos seleccionar de forma masiva todos los componentes o elegir

cuál son los que vamos a usar, en tal caso, nos creará un archivo con
aquellas bibliotecas que vamos a usar.
Temas: Existen algunos estilos predefinidos que podemos descargar con el

menú desplegable. O también diseñar y seleccionar nuestro estilo, con
nuestros colores, fuentes de texto, etc. Todo esto lo veremos más
adelante, te adelanto una página donde puedes ver los diferentes temas
existentes para elegir el que más te guste:
http://jqueryui.com/themeroller/
¿ Que estructura tiene la descarga?
El archivo que nos hemos descargado tiene formato .zip

M3. JQUERY
jquery-ui-1.11.0.custom.zip
Y si hemos elegido todas las opciones posibles habremos observado que tiene un tama-
ño de casi 2MB, por lo que es un tamaño grande y no recomendable en la mayoría de los casos.
Sería necesario ver qué apartados realmente vamos a necesitar y sino vamos a insertar algún
componente no seleccionarlo ya que sólo ralentizaremos la web en dispositivos con menos re-
cursos.
Anteriormente nos descargaba tres carpetas: css, js y development-bundle. Y ahí te-

níamos todo el contenido. El contenido de la carpeta css sería donde están las hojas de estilo
e imágenes para el diseño. La carpeta js donde tendreíamos los scripts javascript de jQuery y
jQuery UI para que todos los componentes funciones. Y la última carpeta devolopment-bundle
donde existen un manual y material útil para los desarrolladores.
En esta versión parece que la tendencia según las últimas versiones es descargar los ar-
chivos css, js, quedando una estructura como ésta:
Tenemos que tener en cuenta que esta descarga nos proporciona todo lo necesario para
funcionar independientemente, de ahí que trae todo, incluso el archivo jQuery para funcionar. 477
external: Carpeta donde tendremos fichero externos al jQueryUI, en este caso el fichero
jQuery JavaScript Library v1.10.2
images: Carpeta donde se alojarán las imágenes necesarias del tema descargado, fondos
e iconos.
index.html: Si ejecutamos este archivo tendremos un manual de uso y podremos ver el

estilo que aplicará a nuestras web. Si has copiado la carpeta con todos los
recursos y tienes ejecutando el Servidor Web en tu ordenador podrás verlo en:
Puedes visitar el ejemplo jQueryUI/jquery-ui-1.11.0.custom/
Luego tendremos dos archivos que son realmente los que vamos a necesitar para poder
usar jQueryUI con este tema, como ya estamos acostumbrados en el framework de jquery, siem-
pre nos proporcionarán la versión mínima (nombre-archivo.min.extensión) para usarla cuando
esté en fase de producción.
Recordemos que usualmente mientras estamos creando nuestra aplicación web, estamos
en fase de desarrollo y es posible que necesitemos ver el código fuente original, ver cómo está
implementado y la documentación al respecto. Cuando ya hemos probado la web y queremos
lanzarla a Internet o a nuestra Intranet de empresa, tendríamos que pasarla a fase de produc-
ción, donde se optimiza el archivo eliminando comentarios, tabuladores y saltos de líneas inne-
cesarios ya que el navegador no los utiliza.
Aula Mentor
Los archivos obligatorios que debemos agregar a nuestros proyectos son:
<link href=”jquery-ui.css” rel=”stylesheet”>
<script src=”jquery-ui.js”></script>
<script src=”jquery.js”></script>
Por ello vamos a partir de nuestra estructura de directorios que hemos estado usando
todo el curso:
Vamos a tener todas las carpetas vacías menos la carpeta js donde vamos a mantener
el archivo jquery-1.11.1.min.js y jquery-1.11.1.js. Tenemos que asegurarnos muy bien donde
tenemos los archivos CSS y los JS, ya que la mayoría de las veces, el error está en nuestro script
y es por no haber llamado correctamente el nombre o ruta del archivo.
1.2. Acordeón.
478
Un efecto que ya hemos usado anteriormente de forma manual pero que el plugins de
jQueryUI nos trae de una forma muy llamativa es el efecto acordeón, donde conforme se va ha-
ciendo click en el componente va desplegándose y cerrándose con sus correspodientes efectos:
Para ello tendríamos que tener la estructura anterior descrita (con los correspondientes
archivos css y js) y el siguiente contenido en nuestro archivo HTML5, por ser la primera vez voy
a agregar todo el código completo, aunque también puedes verlo en los recursos del curso.
Puedes visitar el ejemplo 01-Ejemplo1-Acordeon/
<!DOCTYPE html>
<head>
M3. JQUERY
<title>Módulo jQueryUI</title>

<script type=”text/javascript” src=”js/jquery-ui.js”></script>

<link rel=”stylesheet” type=”text/css” href=”css/jquery-ui.css”>
479

<script type=”text/javascript” src=”js/miarchivojquery.js”></script>
</head>
<body>
<section>
<article>
<h3> Acordeón </h3>
<div id=”miAcordeon”>
Aula Mentor
<h3>Elemento 1</h3>
<div>Contenido elemento 1.</div>
<h3>Elemento 2</h3>
<h3>Elemento 3</h3>
<h3>Elemento 4</h3>
</div>
</article>
480 </section>
</body>
</html>
Lo único que hemos tenido que declarar es una capa de tipo miAcordeon para poder
seleccionarla/buscarla en mi script jQuery (como hemos estado realizando todo el curso) y a
continuación tenemos que usar el método:
.accordion();
En nuestro caso tendríamos en nuestro archivo jQuery o en nuestro script dentro de la

misma página declarado en el <head> lo siguiente:
$( “#miAcordeon” ).accordion();
Ten en cuenta que no hemos declarado ningún archivo propio CSS ya que estamos
usando los que usa por defecto el plugins. Además si nos fijamos, este efecto está usando va-
rios elementos (efectos, propiedades y estilos) que, aunque ya sabemos nosotros crearlos desde
cero, nos facilitan mucho ya que estaría todo creado previamente.
M3. JQUERY
¿Cómo interactúa el usuario con el teclado?
Cuando el foco está en el header del elemento podemos usar los siguientes elementos:
UP/LEFT: Mueve el foco al anterior elemento. Si está en el primero lo mueve al

último elemento.
DOWN/RIGHT: Mueve el foco al siguiente elemento. Si está en el último lo mueve al

primer elemento.
HOME: Mueve el foco al primer elemento. (tecla INICIO).
END: Mueve el foco al último elemento. (tecla FIN).
ESPACIO/ENTER: Activa el panel asociado al elemento cabecera que está en ese momento.
¿Qué temas estarían realacionados?
Al fin y al cabo, no dejan de ser unos archivos con hojas de estilo predefinidas, el widget
acordeon de jQuery UI CSS especifica unas reglas concretas, pero si necesitas saber a que estilos
se está refiriendo siempre los puedes ver en la documentación oficial, en este caso verás que
puedes usar:
481
ui-accordion: El contenedor del acordeón.
ui-accordion-header: Las cabeceras del acordeon. Adicionalmente podemos usar

iconos, para ello tenemos ui-accordion-icons.
ui-accordion-content: El contenido de los paneles interiores de cada elemento.
¿De qué depende este método?
UI Core Núcleo de UI
Widget Factory Widget
Effects Core Efectos(Opcional para usar las opciones animadas)
Existen muchos parámetros y funciones que puedes modificar y configurar, en caso que
necesites más información puedes recurrir a la documentación oficial:
http://api.jqueryui.com/accordion/
Aula Mentor
1.3. Autocompletar.
Uno de los efectos y elementos que es muy interesante para el usuario es ayudarle en
la escritura y simplificación en la elección de los elementos. Para ello, jQuery UI nos facilita un
elemento que se llama autocomplete, en el que conforme va escribiendo el usuario, van saliendo
las opciones más similares a su búsqueda.
Se usa el método creado en jQueryUI llamado:
.autocomplete()
A este método se le ha de pasar al menos una lista de nombres, para ello usamos la sin-
taxis:
$(miSeleccion ).autocomplete({
source: Lista
});
Imaginemos que tenemos la siguiente lista:
Jesús, José , Antonio, Andrés, Luis, Mario, Miguel Ángel, Francisco, Juan, Javier, María, Guada-
lupe, Raquel, Rosa, Alicia, Dolores.
482
Queremos que cuando el usuario empiece a escribir su nombre, si éste está en la lista le
vaya ayudando en la decisión agilizando todo el proceso.
Si nos fijamos, hemos introducido en el Autocomplete una “A” y él automáticamente nos

ha mostrado los nombres de la lista que contiene “a” o “A” en alguna parte, por lo que ha omiti-
do mayúsculas y minúsculas, y los nombres que no tienen la letra a, como han sido: Jesús, José,
Luis, Dolores.
Para poder usarlo, sólo tenemos que tener en el documento HTML:
. . .
<div>
<input id=”miAutocomplete” title=”Nombres” name=”Nombre”>

M3. JQUERY
</div>
. . .
Sin tener en cuenta el CSS y centrándonos en el jQuery, tendríamos:
var listaNombres = [
“Jesús”,
“José” ,
“Antonio”,
“Andrés”,
“Luis”,
“Mario”,
“Miguel Ángel”, 483
“Francisco”,
“Juan”,
“Javier”,
“María”,
“Guadalupe”,
“Raquel”,
“Rosa”,
“Alicia”,
“Dolores”
];
$( “#miAutocomplete” ).autocomplete({
source: listaNombres
Aula Mentor
});
Debemos pensar que estos nombres en algunos casos serán siempre los mismos, por
ejemplo si estamos en un formulario donde preguntamos al usuario sobre la provincia donde
nació, estás son estáticas y siempre serán las mismas y podíamos usarlo de esta forma. Pero en
otros casos esta lista será dinámica, cogida de una Base de Datos, de otra web o servidor. Para
facilitar los posibles cambios es una buena práctica cargar la lista de nombres o bien con una
variable independiente, o con una función. Al realizarlo así, tenemos algo parecido a esto:
$( “#miAutocomplete” ).autocomplete({
source: dameNombres()
});
Así estamos llamando a una función que se llama dameNombres() y realmente nos daría
igual de que forma obtenemos los nombres, hoy puede ser de forma estática y en un futuro,
podemos usar otros métodos, pero si hemos trabajado así, el mantenimiento del código será
siempre más sencillo:
484 function dameNombres(){
var listaNombres = [
“Jesús”,
“José” ,
“Antonio”,
“Andrés”,
“Luis”,
“Mario”,
“Miguel Ángel”,
“Francisco”,
“Juan”,
“Javier”,
M3. JQUERY
“María”,
“Guadalupe”,
“Raquel”,
“Rosa”,
“Alicia”,
“Dolores”
];
return listaNombres;
Puedes visitar el ejemplo 02-Ejemplo2-Autocomplete/
Existen muchos parámetros y funciones que puedes modificar y configurar, en caso que necesi- 485
tes más información puedes recurrir a la documentación oficial:
http://api.jqueryui.com/autocomplete/
1.4. Botones.
Otro elemento que no puede faltar en cualquier aplicación web son botones, y claro
está, jQueryUI nos facilita también varias formas de declararlos. Para ello tenemos el método
para crear, o dar formato de botones siguiente:
.button()
Y obtener botones de esta forma usando el método anterior es muy sencillo:
Imaginemos que tenemos un documento html con las siguientes declaraciones:
. . .
<button>Botón tipo button</button>

Aula Mentor
<input type=”submit” value=”Botón tipo submit”>
<a href=”#”>Botón tipo enlace</a>
. . .
Y en el jQuery tendríamos que seleccionar nuestros elementos y decirle a todos ellos que
les aplique el método .button() de jQueryUI.
$( “input[type=submit], a, button” )
.button()
//Eliminamos la acción por defecto del evento .click para este ejemplo.
//Así cuando hagamos click sobre ellos el navegador no hará nada.

486
.click(function( event ) {
});
Puedes visitar el ejemplo 03-Ejemplo3-Button
Aunque podemos pensar que este método no es nada útil, ya que hemos visto muchas
formas en el curso de crear botones, sólo con apenas tres líneas hemos creado los botones con
ese estilo, que de hacerlo de forma manual tendríamos que definir: un fondo concreto, una
fuente de texto y color agradable y en sintonía con los demás, además de tener que controlar
todos los eventos cuando pase por encima de cada botón, crear nuevos fondos, color de borde,
color de texto, etc. Realmente estamos totalmente capacitados para realizar un botón con una
apariencia igual o mejor que ésta, lo único que jQueryUI nos ofrece muchos temas, colores y
demás estilos predefinidos, y en muchas situaciones cuando tengamos que desarrollar una apli-
cación de forma rápida.
M3. JQUERY
http://api.jqueryui.com/button/
1.5. Calendario.
Muchas veces cuando estamos realizando un formulario, necesitamos que el usuario nos
introduzca una fecha, por ejemplo, la fecha de nacimiento, la fecha de una cita, etc; en definitva
un campo en el que el usuario necesita introducir un dato de tipo fecha y tenemos que asegu-
rarnos que el formato de fecha es correcto y sea una forma agradable y fácil para él.
Para usar el calendario de jQueryUI debemos usar el método:
.datepicker()
Con él nos ahorraremos mucho tiempo de programación ya que nos da todo realizado,
los días de cada mes, y una forma de ir interactuando entre ellos (pasar de mes). Como ya sa-
bemos existen muchos temas, y cada tema tiene su estilo correspondiente y todos los elementos
estarían en concordancia con los demás componentes, por eso, lo ideal es escoger un tema
apropiado o crearnos uno por nuestra cuenta, como veremos en temas posteriores.
Si nos vamos a la web http://jqueryui.com/themeroller/ y posteriormente pulsamos en

el menú que nos ofrece los temas, en Gallery podemos ver los diferentes calendarios y su tema
relacionado:
487
Ejemplos de calendarios en los diferentes temas:
Para usar el calendario, no tenemos que usar mucho código, debemos asociarlo a un
campo del formulario en el HTML y posteriormente llamar al calendario desde jQuery UI. En el
documento HTML tendríamos que crearnos un campo de tipo texto y asociarle un id para poder
llamarlo desde el script de jQuery:
. . .
<p>Fecha: <input type=”text” id=”miCalendario” name=”miFecha”></p>
. . .
Aula Mentor
En el jQuery tendríamos que tener:
$( “#miCalendario” ).datepicker();
});//fin de la lectura del document
Y realmente con apenas dos líneas de código, hemos creado un calendario muy vistoso
y útil. Cuando pulsemos en la fecha, directamente nos parecerá la fecha en formato MM/DD/
AAAA:
488
http://api.jqueryui.com/datepicker/
1.6. Diálogos.
Cuando necesitemos usar diálogos, podemos recurrir también a jQueryUI, así mostramos
diálogos más personalizados a los que tiene por defecto el navegador. Es muy interesante para
aquellos casos que queramos dar más personalización a nuestra página y destacar sobre otras,
ya que son diferentes y más agradables.
Para usar los diálogos con jQueryUI tenemos que usar el método:
.dialog()
Para insertar nuestros diálogos, podríamos tener en el hmtl:
. . .
<div id=”miDialogo” title=”Mi primer diálogo”>
<p>Este texto será el que aparecerá en el diálogo. Esta ventana la puede mover o cerrar el usuario.</
p>
M3. JQUERY
</div>
. . .
Y en el script de jQuery tendríamos
$( “#miDialogo” ).dialog();
El resultado sería un diálogo en sintonía con la página, todo esto por usar el mismo tema
de diseño:
Existen muchos parámetros y funciones que puedes modificar y configurar, en caso de

que necesites más información puedes recurrir a la documentación oficial:
http://api.jqueryui.com/dialog/
489
1.7. Menús.
Toda aplicación o página web debe tener un menú o forma de interactuar entre las
diferentes secciones de la página. En el módulo de CSS3 vimos muchos métodos y menús dife-
rentes, sabemos cómo se hacen y en qué están basados la mayoría. Para ayudarnos en esta tarea
tan común, jQueryUI también nos proporciona una forma de crear nuestros menús, y de igual
forma, se suele usar listas para crear los nombres de los menús, hoy en día es casi impensable
usar imágenes; se hace más hincapié en el CSS3 y así se agiliza la página.
Para usar el método menú de jQueryUI, sólo tenemos que usar el siguiente método:
.menu()
Vamos a coger literalmente el texto del ejemplo del ejercicio 6.2.2 para demostrar que si
realizamos una buena semántica en el documento HTML, poder hacer cambios posteriormente
es muy sencillo. El código HTML que teníamos para el menú lo hicimos con lista y tenía la si-
guiente estructura:
<ul id=”menu”>
<li>INICIO</li>
<li>Sección 1
Aula Mentor
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
<li>Elemento 4</li>
</ul>
</li>
<li>Sección 2
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
<li>Elemento 4</li>
490 </ul>
</li>
<li>Seccion 3
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
<li>Elemento 4</li>
</ul>
</li>
M3. JQUERY
<li>Seccion 4
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
<li>Elemento 4</li>
</ul>
</li>
</ul>
Y en el CSS sólo necesitamos delimitar el ancho del menú, ya bien dentro del fichero CSS
o si lo hacemos dentro del head:
<style>
.ui-menu { width: 150px; }

491
</style>
Y en el script de jQuery sólo tendríamos que usar el método .menu().
$( “#menu” ).menu();
Nuevamente con muy pocas líneas hemos realizado un menú desplegable y además,
tenemos muchos temas para poder usarlos. El ejemplo, quedaría de la siguiente forma, debes
fijarte que ha contado muchas opciones y cambios de colores, bordes, sombreado, etc que ten-
dríamos que hacer con CSS nosotros mismos:
Puedes visitar el ejemplo 06-Ejemplo6-Menu/

Aula Mentor
http://api.jqueryui.com/menu/
1.8. Barra de progreso.
Cuando estamos usando una barra de progreso, jQuery UI nos ofrece una forma muy
sencilla y con muy buen aspecto gráfico. Para ello, podemos usar la sintaxis siguiente:
.progressbar({
value: 00
});
Donde value nos indica el valor en el que estaría la barra de progreso en ese momento,
siendo 0 el menor y 100 el mayor o la barra completa. Para usarlo, sólo debemos de agregar al
documento HTML el siguiente código:
. . .
<div style=”width: 450px;”>
492 <div id=”miBarraProgreso”></div>
</div>
. . .
Sólo hemos declarado un contenedor para almacenar la barra, no es obligatorio, pero es

aconsejable, en este caso, sólo lo hemos limitado a un ancho de 450px.
En el jQuery tendríamos:
$( “#miBarraProgreso” ).progressbar({
value: 56
});
Y nos mostraría una barra de progreso en el valor 56% completado:

M3. JQUERY
Veamos un ejemplo que sea más automático, es decir que veamos como va aumentando
la barra de progreso según unos parámetros, estos parámetros, ahora van a ser simulados, pero
ayudarán a entender mejor este método:
Agregamos este código al html:
. . .
<div id=”miBarraProgreso2”>
<div class=”progress-label”>inciando simulación...</div>
</div>
</div>
. . .
Y este al jQuery:
var miProgressbar = $( “#miBarraProgreso2” ),
progressLabel = $( “.progress-label” ); 493
miProgressbar.progressbar({
value: false,
change: function() {
progressLabel.text( miProgressbar.progressbar( “value” ) + “%” );
},
complete: function() {
progressLabel.text( “¡Simulación completa!” );
});
function progreso() {
var val = miProgressbar.progressbar( “value” ) || 0;

Aula Mentor
miProgressbar.progressbar( “value”, val + 2 );
if ( val < 99 ) {
setTimeout( progreso, 120 );
Lo que va realizando este código es hacer aumentar automáticamente el valor con (val
+2) y vamos a su vez insertando temporizaciones, tanto para iniciar el script como para los in-
tervalos en cada cuenta.
Hemos usado dos parámetros de la función, change para la acción que vayamos hacer
mientras haya un cambio, en este caso mostrar el valor del %. Y otra función cuando termine,
complete, que en este caso, muestra un texto “¡Simulación completa!”
494 También debemos prestar atención a un método que hemos usado que es:
setTimeout( función, tiempo en milisegundos );
Con esta función lo que hacemos es simular tiempos de espera, ya que se ejecutará la
función indicada en el primer parámetro, pasado el tiempo expresado en milisegundos del se-
gundo parámetro.
Por eso, hay dos tiempos en el ejemplo anterior:
Indicando que va a ejectuar la función progreso en 3,5 segundos.
Indicando que ejecute la función progreso en 0.12 segundos, creando el efecto de carga
simulada de un archivo, de una web, etc.
Todo este ejemplo viene descrito por una simulación, y de paso hemos aprovechado
para aprender la función setTimeout, pero en una aplicación real tendremos que calcular ese
tiempo con datos reales, por ejemplo en la subida de un archivo, si éste ocupa 10.000MB, y
lleva 1.000MB tendrá un 10% subido y en cada actualización podemos incluso indicar cuántos
MegaBytes se han subido.
M3. JQUERY
Puedes ver el ejercicio comentado en los recursos del curso, recuerda que sería impor-
tante que intentaras crearlos tú desde cero para coger una soltura real con todos los módulos
que estamos trabajando:
Puedes visitar el ejemplo 07-Ejemplo7-BarraProgreso/
Existen muchos parámetros y funciones que puedes modificar y configurar, en caso de

que necesites más información puedes recurrir a la documentación oficial:
http://api.jqueryui.com/progressbar/
1.9. Menús de selección.
Para mostrar al usuario varias opciones, en HTML5 teníamos la etiqueta de selección

<select>…</select> dando al usuario un menú con las diferentes opciones que podía elegir. Aquí
podemos usarla igualmente y aprovecharnos de los diseños predefinidos de jQueryUI. El méto-
do que corresponde a la selección en jQueryUI sería:
.selectmenu();
Vamos a ver un ejemplo con varios ejemplo de menus, uno simple, otro con varios gru-
pos, y otro con muchos elementos para ver cómo los presenta el plugins.
Podemos convertir esto:

495
Con unas pocas líneas de jQueryUI en esto:
Sólo con agregar en el CSS:
select {
width: 200px;
Y en el script de jQuery:
$( “#idioma” ).selectmenu();
Aula Mentor
$( “#nivelIdioma” ).selectmenu();
$( “#edad” )
.selectmenu()
.selectmenu( “menuWidget” );
Puedes visitar el ejemplo 08-Ejemplo8-Seleccion/
Hemos usado la opción menuWidget del la opción .selectmenu() existen muchas opcio-
nes donde puedes ir probando y practicando, para ello, siempre disponemos de la documenta-
ción oficial con todos sus parámetros.
http://api.jqueryui.com/selectmenu/
1.10. Slider.
Últimamente la mayoría de los usuarios utilizan smartphones, tablets o incluso portátiles

con la pantalla táctil para navegar por internet. Existe un componente que se llama slider que
496 realiza a través de un desplazamiento lateral el valor seleccionado por el usuario.
Para ello jQueryUI nos facilita el siguiente método:
.slider()
Queremos obtener un componente parecido a éste:
Desplazando hacia la izquierda o derecha, aumenta o disminuye el valor del input
Para poder usarlo en nuestras aplicaciones web, tenemos que usar muy poco código,
veamos un ejemplo sencillo. En el HTML tendríamos que tener:
<div id=”miSlider”></div>
Y en el jQuery llamamos al método:

M3. JQUERY
$(“#miSlider”).slider();
Con este ejemplo hemos creado un slider, podemos mover y desplazarlo a la derecha
o izquierda, pero realmente, no nos sería muy práctico en nuestros formularios. Uno entre los
tantos ejemplos que podemos usar, sería que ese desplazamiento estuviera relacionado con las
opciones de un componente <select></select>:
Supongamos este formulario:
<form id=”formulario”>
<label for=”habitaciones”>Introduce el número de habitaciones</label>
<select name=”misHabitaciones” id=”misHabitaciones”>
<option>1</option>
<option>2</option>
<option>3</option>
497
<option>4</option>
<option>5</option>
<option>6</option>
</select>
</form>
Y en nuestro script jQuery tendríamos:
var select = $( “#misHabitaciones” );
var slider = $( “<div id=’slider’></div>” ).insertAfter( select ).slider({
min: 1,
max: 6,
range: “min”,
value: select[ 0 ].selectedIndex + 1,

Aula Mentor
slide: function( event, ui ) {
select[ 0 ].selectedIndex = ui.value - 1;
});
$( “#misHabitaciones” ).change(function() {
slider.slider( “value”, this.selectedIndex + 1 );
});
Con este script vamos actualizando el valor del <select> cada vez que hay algún cambio
(change). Vamos modificando el valor del select dentro de sus valores, que pueden ser numéri-
cos o alfanuméricos:
Existen muchas formas interesantes resueltas sobre los slider, simulando ecualizadores,
mezcladores de colores y todos los que se te ocurran. Te recomiendo que una vez entendidos
estos ejemplos, si tienes tiempo puedas ampliar información sobre ellos en la documentación
oficial http://api.jqueryui.com/slider/ y verás cómo agregar efectos y elementos de una forma
sencilla.
498
Puedes visitar el ejemplo 09-Ejemplo9-Slider/
1.11. Spinner.
Cuando tengamos que usar valores numéricos, otro componente muy utilizado es el uso
de spinner, teniendo la opción de aumentar y disminuir el valor del campo para poder rescatar-
lo.
Para hacerlo más didáctico vamos a insertar varios botones para poder ver cómo interac-
túa el componente con el usuario:
M3. JQUERY
Vamos a tener nuestro spinner donde si pulsamos en la parte superior incrementa o si

pulsamos en la parte inferior decrementa. Además vamos a poder ponerlo modificable o no con
el botón Conmuta desactiva/activa, y podremos destruir o construir el Widget del Spinner con
el botón Conmuta/Destruye Widget. Con el botón Dame valor obtendremos el valor actual
seleccionado, y con el botón Inserta el valor 5 insertará el valor en el spinner.
Supongamos el siguiente código en el documento HTML:
<p>
<label for=”miSpinner”>Selecciona un valor:</label>
<input id=”miSpinner” name=”value”>
</p>
<p>
<button id=”desactiva”>Conmuta desactiva/activa</button>
<button id=”destruyeWidget”>Conmuta/Destruye Widget</button>
</p>
<p>
499
<button id=”dameValor”>Dame valor</button>
<button id=”insertaValor”>Inserta el valor 5</button>
</p>
Realmente hemos definido un <input> con un identificador y unos botones. Todo lo

vamos a crear desde nuestro script de jQueryUI:
var miSpinner = $( “#miSpinner” ).spinner();
/*-------------------------------------------------
Cuando hace click sobre el botón desactiva
activamos o desactivamos el valor usando
los parámetros del método option -> disabled
-------------------------------------------------*/
$( “#desactiva” ).click(function() {
Aula Mentor
if ( miSpinner.spinner( “option”, “disabled” ) ) {
miSpinner.spinner( “enable” );
} else {
miSpinner.spinner( “disable” );
});
/*-------------------------------------------------
Cuando hace click sobre el botón destruyeWidget
le pasamos un parámetro al método: instance
para instanciarlo o destruyendo la funcionalidad
-------------------------------------------------*/
500 $( “#destruyeWidget” ).click(function() {
if ( miSpinner.spinner( “instance” ) ) {
miSpinner.spinner( “destroy” );
} else {
miSpinner.spinner();
});
/*-------------------------------------------------
Cuando hace click sobre el botón captura
el valor del spinner

M3. JQUERY
-------------------------------------------------*/
$( “#dameValor” ).click(function() {
alert( miSpinner.spinner( “value” ) );
});
/*-------------------------------------------------
Cuando hace click sobre el botón inserta
el valor 5 en el spinner
-------------------------------------------------*/
$( “#insertaValor” ).click(function() {
miSpinner.spinner( “value”, 5 );
});
501
/*-------------------------------------------------
Usamos el estilo y diseño de jQueryUI
del tipo button
-------------------------------------------------*/
$( “button” ).button();
Tienes el ejercicio resuelto en:
Puedes ver el ejemplo en 10-Ejemplo10-spinner/
1.12. Tabs.
Una forma de organizar las páginas web y mostrar al usuario diferentes opciones son las
tabs o pestañas también llamadas tab-bar. Seguro que las has visto sobre todo en aplicaciones
para Smartphone u otros dispositivos. Para crear unas pestañas debemos usar el método:
Aula Mentor
.tabs()
Por ejemplo si queremos representar en una web algo parecido a esto:
Tendremos que tener una estructura en el HTML parecida a esta:
. . .
<div id=”misTabs”>
<ul>
<li><a href=”#tabs-1”>Pestaña 1</a></li>
502
</ul>
<div id=”tabs-1”>
<p>Contenido de la pestaña 1.......</p>
</div>
</div>
</div>
</div>
. . .
M3. JQUERY
Si nos fijamos tendríamos tres partes bien diferenciadas; el contenedor que contendrá
todo el conjunto (div id=”misTabs”), otra donde tenemos las opciones superiores de las pesta-
ñas que declaramos como una lista <ul> <li>…</li></ul> y otra donde declaramos el contenido
interior de cada pestaña <div id=”tabs-n”>.
Ahora en el script jQuery sólo tenemos que definir las siguientes líneas:
$( “#misTabs” ).tabs();
Puedes ver el ejemplo completo en los recurso del curso en:
Puedes visitar el ejemplo 11-Ejemplo11-tabs/
1.13. Tooltip.
Por último vamos a ver los elementos tooltip, indispensable para ayudar al usuario cuan-
do está navegando por nuestra web o rellenando nuestros formularios. Este tipo de ayuda se
presenta normalmente al pasar el ratón por encima, al coger el elemento o el foco. Esta infor-
mación puede ser texto o incluir más cosas, imágenes u otros componentes, para ello existe el
método:
503
.tooltip()
Veamos un ejemplo sencillo donde ayudamos a un usuario a rellenar un formulario web:
<p><a href=”#” title=”Aquí pondría la información que quiera para el usuario”>Tooltips</a>
puede estar unido a cualquier elemento. Al pasar el ratón por el elemento, el atributo title se muestra
en una pequeña caja al lado del elemento</p>
<p>
<label for=”nombre”>Tu nombre:</label>
<input id=”nombre” title=”Introduce tu nombre con la primera letra en mayúscula”>
</p>
<label for=”dni”>DNI:</label>
Aula Mentor
<input id=”dni” title=”Introduce tu dni con la letra seguida (sin caracteres ni espacios) y en mayús-
cula”></p>
</div>
Y en el jQuery tendreíamos que usar:
$(this).tooltip();
Como podemos darnos cuenta, directamente todo lo que pongamos como title será
detectado por el método y le agregará la información. En este caso y como queremos que se
aplique a todo el documento hemos dicho que todo el $(document) cuando sea leído, use el
elemento con él mismo (this). Se podría haber realizado una selección más exahustiva, pero para
el ejemplo viene bien ya que deseamos que se active para todos los componentes susceptibles
de tener tooltip.
El resultado sería parecido al siguiente y
504
Puedes visitar el ejemplo 12-Ejemplo11-tooltip/
2. Uso y desarrollo de plugins.

Como hemos podido comprobar en el apartado anterior, podemos usar plugins que con
pocas líneas de códigos nos facilitan muchas acciones comunes y con unos diseños bonitos y
acordes. Existen muchos programadores que se han dedicado a realizar y crear plugins, entre
los que podemos destacar:
http://plugins.jquery.com
http://jquery-plugins.net
Existen muchos diseñadores, programadores y empresas que se han dedicado también

a crear plugins. Para utilizar dichos plugins traen un manual de integración para que podamos
incorporarlos a nuestra web, que normalmente será agregar los link de CSS y de jQuery o JavaS-
cript en la cabecera de nuestro documento y usar la sintaxis que nos diga el desarrollador para
llamarlo dentro de la documentación.
M3. JQUERY
Podemos por tanto, desarrollar nuestros propios plugins, para que terceras personas
aprovechen el código desarrollado. Existen varias formas de realizar plugins, algunas simple-
mente ponen disponibles nuevas funciones globales a nuestro jQuery.
Las funciones globales son en realidad métodos del objeto jQuery, pero en un sentido
práctico, son funciones dentro de un espacio de nombres jQuery. Un ejemplo de ello sería la
función $.ajax(), en ella todo lo que $.ajax() realiza se podría conseguir con una función global
denominada $.ajax(), pero este enfoque nos dejaría abiertos a conflictos de nombres de función.
Al situar la función dentro del espacio de nombre jQuery, solamente nos tenemos que preocupar
por conflictos con otros métodos jQuery.
2.1. Añadir funciones globales.
Para añadir una nueva función al espacio de nombre jQuery, podemos simplemente
asignar la nueva función como una propiedad del objeto jQuery:
jQuery.globalFunction = function(){
//Mi código
console.log(‘Esto es una prueba de una función’);
Ahora cuando queramos utilizar este plug-in podemos escribir: 505
jQuery.globalFunction();
O también podíamos en su formato corto:
$.globalFunction();
Así podríamos usar nuestra llamada a la función de forma básica y en este ejemplo mos-
trará por consola el texto indicado.
Se pueden añadir varias funciones declarandolas independientemente:
jQuery.functionOne = function(){
console.log(‘Soy la función número 1’);
jQuery.functionTwo = function(){
}
Aula Mentor
jQuery.functionThree = function(miVariable){
console.log(‘Soy la función número 3 y me han pasado la variable’+miVariable);
Y cuando deseemos utilizar estas funciones sólo teníamos que hacer:
$.functionOne();
$.functionTwo();
$.functionThree(‘Hola’);
Se puede utilizar otra sintaxis para definir nuestras funciones, que es usar $.extend(),
pero tenemos que tener cuidado al utilizar el mismo espacio de nombres de jQuery, podríamos
tener conflictos con nombres de función definidos en otros plugins jQuery.
jQuery.extend({
jQuery.functionOne : function(){
506 },
jQuery.functionTwo : function(){
},
jQuery.functionThree : function(miVariable){
});
Para evitar conflictos muchas veces es mejor encapsular todas las funciones globales
para un plugin concreto en un objeto de la siguiente forma:
jQuery.miPlugin = {
jQuery.functionOne : function(){

M3. JQUERY
};
jQuery.functionTwo : function(){
};
jQuery.functionThree : function(miVariable){
};
};
Esta forma de trabajar crea realmente otro espacio de nombres para nuestras funciones
globales, denominado jQuery.miPlugin. Ahora las funciones que hay declaradas, realmente
serían métodos del objeto jQuery.miPlugin, una propiedad del objeto global jQuery. Por tanto
para poder usar estas funciones debemos anteponer el nombre miPlugin antes de llamar a los
otros métodos así no tendrá conflictos.
$.miPlugin.functionOne();
$.miPlugin.functionTwo(); 507
$.miPlugin.functionThree(‘Hola’);
Así evitamos colisiones con otros espacios de nombres y plugins, es la forma de asegu-
rarnos de estar totalmente protegidos ante errores externos a nuestro pluging.
2.2. Añadir métodos de objeto jQuery.
La mayoría de la funcionalidad de jQuery viene a través del uso de sus métodos de ob-
jeto, y aquí es donde los plugins también destacan. Siempre que escribimos una función que
actúa sobre parte del DOM, es apropidado crear un método “.” de objeto.
Para añadir métodos de instancia, ampliamos el objeto jQuery.fn:
jQuery.fn.miMetodo = function(){
//Mi código
console.log(‘Soy un método’);
jQuery.fn es un alias de jQuery .prototype, proporcionado por concisión. Podemos in-

vocar luego este nuevo método desde nuestro código después de utilizar cualquier expresión
selector:
Aula Mentor
$(miSeleccion).miMetodo();
Nuestro método se invocará sobre el elemento de selección que haya declarado, po-
dríamos haber declarado una función global, sin embargo, puesto que no hemos utilizado los
nodos DOM coincidentes en ningún sentido. Una implementación de método razonable actuará
siempre sobre su contexto.
2.3. Compartir un Plugin.
Una vez hemos realizado todo nuestro código, creando funciones, métodos, etc pode-
mos publicarlo de modo que otros puedan utilizarlo y benificiarse de él, como tú, en otras oca-
siones te has podido benificiar de otros códigos, puedes hacer esto en el repositorio de plugins
oficial de jQuery http://plugins.jquery.com. Aquí debemos registrarnos, seguir las instrucciones
para describir el plugin y subir el archivo con el código comprimido en .zip.
Por supuesto antes de subir ningún plugins debemos asegurarnos que el plugin está co-
rrecto para el público, existen una reglas a seguir cuando se escriben plugins para que funcione
bien con otros códigos:
Uso del alias $
Los plugins jQuery pueden no asumir que el alias $ se encuentra disponible, en su lugar
debe escribir el nombre jQuery completo cada vez, que en el caso de usar script muy extenso
puede ocasionar lentitud y dificultar la lectura.
508
Interfaces del método
Todos los métodos jQuery se invocan dentro del contexto de un objeto jQuery, de modo
que this, hace referencia a un objeto que puede hacer referencia a uno o más elementos DOM.
Todos los métodos deben comportarse correctamente con independencia del número de ele-
mento coincidentes.
Estilo de documentación
Se debe anexar delante de cada definición de función o método la documentación, usan-

do entre comentarios y dependiendo de cada caso el valor que corresponda:
/**
* Descripción del método
*@alias
*@author
*@classDescription
*@constructor
*@deprecated
M3. JQUERY
*@example
*@exception
*@id
*@inherits
*@internal
*@memberOf
*@method
*@namespace
*@param
*@private
*@projectDescription
*@property
*@return 509
*@see
*@since
*@type
*@version
**/
Por supuesto no es obligatorio rellenar todos para cada función, hay que pensar que la
documentación está pensada para facilitar y ayudar a otras personas que no han desarrollado el
código a que puedan usarlo y entenderlo correctamente.
Usualmente en la definición del fichero se agregan los datos de versión, autor, copyrigth
y otros, para saber de forma global qué va a contener el fichero. Por ejemplo, si abrimos un
archivo de jquery, veremos que inicialmente nos dá información, en concreto para la versión
jquery-1.11.1.js nos da la siguiente información:
/*!
* jQuery JavaScript Library v1.11.1
* http://jquery.com/
Aula Mentor
* Includes Sizzle.js
* http://sizzlejs.com/
* Copyright 2005, 2014 jQuery Foundation, Inc. and other contributors
* Released under the MIT license
* http://jquery.org/license
* Date: 2014-05-01T17:42Z
*/
Existen programas y proyectos que se han ocupado que posteriormente toda esa docu-
mentación podamos verla de una forma más agradable y vistosa, para Java, C++ existe Doxigen
y para JavaScript hay un proyecto nuevo llamado JSDuck.
510
3. Resumen.
- jQuery UI, es una biblioteca de componentes para el framework jQuery que le añade un
conjunto de plug-ins, widgets y efectos visuales para la creación de aplicaciones web. Cada
componente o módulo se desarrolla de acuerdo a la filosofía de jQuery (find something,
manipulate it: encuentra algo, manipúlalo).
- Para la instalación de jQuery UI, nos tendremos que descargar unos archivos dependiendo
de la versión de jQuery que estemos trabajando. Una vez descargados agregamos sus temas,
funciones y podremos utilizar muchos elementos de forma automática:
Acordeón: .accordion()
Autocomplete: .autocomplete()
Botón: .button()
Calendario: .datepicker()
Diálogos: .dialog()
Menús: .menu()
Barras de progreso: .progressbar({ value: 00 });
Menús de selección: .selectmenu();

M3. JQUERY
Barras de desplazamiento: .slider()
Spinner: .spinner()
Tabs: .tabs()
Tooltip: .tooltip()
- Podemos desarrollar nuestros propios plugins para que otros desarrolladores web puedan
utilizar nuestro código. Éste lo tenemos que hacer siguiendo unas reglas para no interceder
con otros métodos de jQuery, si no podríamos crear conflictos entre el propio código y no
funcionaría. Para ello, tenemos varias opciones:
• Añadir funciones globales con jQuery.nombreFuncion(){ … }
• Añadir métodos de objeto jQuery con jQuery.fn.miMetodo = function(){ … }
• Compartir el plugin a través del repositorio de plugins oficial de jQuery http://plugins.

jquery.com
511
Módulo 4. Aplicaciones
Web Multiplataforma
Unidad 9. JQUERY mobile.

Unidad 10. Introducción al desarrollo de aplicaciones
multiplataforma.
Unidad 9. jQuery Mobile
1. Introducción.
En los módulos anteriores hemos aprendido a realizar web usando HTML5, CSS3 y
JQUERY, realmente todas las páginas web que hemos desarrollado en el curso van a ser visibles
por los navegadores de SmartPhone, Tablets, Pc e incluso SmartTv. Con lo que ya sabemos po-
dríamos realizar cualquier web para todos los dispositivos pero hay que reconocer que las di-
mensiones de cada dispositivo van a ser diferentes y eso va a ocasionar en el usuario que tenga
que estar ampliando/reduciendo la pantalla para poder disfrutar del contenido del mismo.
514
Últimamente se ha optado por desarrollar dos páginas web, una adaptada para pocos
dispositivos con pantallas grandes y otra para cuando el usuario está accediendo a través de un
Smartphone o Tablets. Claro está, esta última suele ser una versión más reducida y centrada en
la parte de interacción con el usuario, por ejemplo la mayoría de los bancos, no tienen la misma
interfaz cuando accedes desde un Smartphone o Tablets a cuando accedes con un ordenador
personal, en el ordenador personal aprovechan y meten más gráficos, imágenes, publicidad y
realizan en definitiva una web más pesada.
Al igual que nos pasó con jQueryUI en la unidad 8, jQuery en su empeño de estar en
contacto con los desarrolladores creó jQuery Mobile para ayudar a los diseñadores y desarro-
lladores, a proporcionar Webs para móviles con un alto nivel de usabilidad, multiplataforma,
personalizables y fáciles de usar.
Por tanto la definición más oficial de jQuery Mobile sería:
“Es un sistema unificado de interfaces de usuario para todas las plataformas populares
de dispositivos móviles, creado sobre los sólidos fundamentos de jQuery y jQueryUI. Su ligero có-
digo se desarrolla usando la mejora progresiva, y posee un diseño flexible al que es fácil aplicar
temas”.
Una vez leída la definición, nos haremos la pregunta, ¿para que navegadores es compa-
tible jQuery Mobile?
iOS: Safari para iPhone, iPod Touch, e iPad desde iOS 3.2
Android OS: El navegador de Android para teléfonos y tablets.

M4. Aplicaciones Web Multiplataforma
BlackBerry OS: El navegador de BlackBerry a partir de la versión 5.0.
Symbian: El navegador del Nokia para dispositivos táctiles.
webOS: El navegador webOS para dispositivos táctiles.
Bada: El navegador de Bada.
MeeGo: Micro Browser y el navegador de nokia (incluida N9).
Windows Phone: Windows Phone/Mobile 6.5 y Windows Phone 7.0
Kindle: Navegador desde kindle 3.
Realmente la lista es mayor y al existir tantos navegadores diferentes se pueden obtener

resultados diferentes dependiendo del navegador. La tendencia de todos los navegadores es
soportar jQuery Mobile, sobre todo los navegadores basados en WebKit que es el más usado en
los dispositivos móviles, Smartphone y Tablets. JQuery Mobile emplea una lista para indicar la
compatibilidad de todos los dispositivos con esta biblioteca, la cual puede consultar en:
http://jquerymobile.com/gbs
Ahora bien, en tema de compatibilidad es algo orientativo, siempre hablando de tenden-

cias y uso en un % mayor, ya que la compatibilidad no se puede asegurar que es 100% porque
aparezca en la lista. Hay otras formas de saber si una funcionalidad en concreto va a estar en un
dispositivo o no: GBS (Graded Browser Support) o soporte gradual de navegadores divide los 515
navegadores en tres categorías:
A-grade: Navegador con la capacidad de consulta de medios que requiere CSS3. Se

desactivarán algunas funcionalidades automáticamente si el dispositivo no las
soporta. Proporciona una interfaz muy completa, con animaciones basadas en
AJAX.
B-grade: El navegador posee una interfaz mejorada, pero sin funcionalidades AJAX en la
navegación.
C-grade: El navegador es incompatible con jQuery Mobile.
2. Preparando el entorno de desarrollo.

En el Módulo 1 preparamos todo el entorno de desarrollo necesario para usar jQuery
Mobile, aunque vamos a realizar un pequeño resumen para ponernos en situación y tendremos
que agregar algunos conceptos, necesitamos por tanto:
1) Editor de textos. Podemos seguir usando Sublime Text 2.
2) Servidor web. Podemos seguir usando el que instalamos, Wamp, Lamp o Mamp.
3) Navegador o emulador. Ahora debemos tener en cuenta que vamos a hacer páginas
desde el punto de vista de un Smartphone o Tablets, por lo que necesitaremos un
emulador o navegador real. Comentar que existen en el mercado un gran número de
Aula Mentor
emuladores, desde marcas interesadas que los programadores programan aplicaciones en su

plataforma: Apple, Samsung, Android, Windows Phone hasta empresas que ofrecen laborato-
rios donde poder usar estos de forma remota a través de aplicaciones web. Vamos a usar en el
curso un emulador que instalamos en el módulo de HTML5, Ripple Emulator Beta, donde po-
dremos emular desde el navegador Google Chrome que estamos conectando desde un iPhone,
un dispositivo con Android o una Tablets, etc. Otra opción puede ser que si tienes una Tablet,
Smartphone o SmartTv conectada a la red de tu casa y tiene configurado el Servidor Web para
aceptar peticiones externas puedes probar directamente lo que estás desarrollando, esto no lo
recomiendo en el desarrollo porque es más lento, pero sí creo que es bueno ver de vez en cuan-
do el resultado en un dispositivo real.
Ya que tendríamos instalado todo en nuestro equipo para poder seguir trabajando con
jQuery Mobile, vamos a repasar cómo podemos conmutar entre web emulada desde dispositivo
móvil o web desde navegador de pc.
Para ello nos vamos al navegador Google Chrome, pulsamos en la parte superior dere-
cha donde está el icono de color verde
Al hacer click nos aparecerá un menú preguntándonos si queremos activar o no el emu-

516 lador:
Al pulsar Enable nos aparece un menú con diferentes opciones, estas opciones día a día
van añadiendo dispositivos y nuevas funcionalidades, y pueden ser diferentes, en definitiva son
diferentes dispostivos o emuladores de dispositivos:
No te preocupes en qué versión eliges ahora porque posteriormente siempre podemos

ir cambiando entre una y otra. Por ejemplo podemos usar Mobile Web que es la opción por
defecto y posteriormente podremos cambiarla en el menú que nos aparece a la derecha.
DEVICES: Podemos seleccionar el dispositivo que va-

mos a emular, y la orientación del mismo
PLATAFORMS: Podemos cambiar entre la plataforma

que vamos a emular (Mobile Web, BlackBerry, Apache
Cordova, etc) y la versión del mismo.
INFORMATION: Podemos ver la información del dis-

positivo, densidad ppi, sistema operativo y el User Agent
(que será la versión que identifica al navegador), muy
importante para poder redirigir automáticamente la web
a la versión mobile o la normal.
ACCELEROMETER: Podemos ver la información y

emular que estamos moviendo el dispositivo para poder
capturar los valores. Para ello debemos pulsar sobre la
imagen y sin soltar desplazar y rotar el mismo.
Si pulsas el botón Shake después de hacer los cambios

observaras que se traslada esos movimientos al disposi-
tivo. 517
Útil cuando nuestra aplicación lee o necesita esos datos.
También este emulador nos ofrece las siguientes opciones en el menú de la derecha:
Settings: Configuración del entorno, temas, tooltips activados o no y uso

de Proxy.
Device & NetworkSettings: Configuración de red y del dispositvo.
Geo Location: Muy útil cuando queramos simular coordenadas y probar que
nuestra aplicación la está utilizando correctamente.
Aula Mentor
Config: Nos indicaría con diferentes colores si existe error o no

en la lectura del fichero XML.
Events: Podemos disparar ciertos eventos en el emulador, por ejemplo

el botón detrás, resume, etc.
Snippet para jQuery Mobile
Si recordamos en el primer módulo podíamos crearnos nuestros Snippet con Sublime

Text2, con él podíamos crearnos nuestros trozos de código reutilizable y tener muchas funciones
predefinidas.
Un punto muy importante de usar este editor es que podemos instalar ayudas/Snippet
ya creados para trabajar con jQuery Mobile, por lo que tendremos muchas acciones de forma
automática disponibles para usar en nuestros documentos.
Nos tenemos que ir a la siguiente dirección:
https://sublime.wbond.net/installation#st2
En él aparece un código que debemos copiar, lo pego aquí de todas formas, aunque
siempre es bueno copiarlo de ahí por si hay alguna modificación:
import urllib2,os,hashlib; h = ‘7183a2d3e96f11eeadd761d777e62404’ + ‘e330c659d4bb41d3bdf022e94cab-

3cd0’; pf = ‘Package Control.sublime-package’; ipp = sublime.installed_packages_path(); os.makedirs(
518 ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.
ProxyHandler()) ); by = urllib2.urlopen( ‘http://sublime.wbond.net/’ + pf.replace(‘ ‘, ‘%20’)).read();
dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), ‘wb’ ).write(by) if dh == h else
None; print(‘Error validating download (got %s instead of %s), please try manual install’ % (dh, h) if
dh != h else ‘Please restart Sublime Text to finish installation’)
Ahora nos vamos a nuestro programa Sublime Text2 y creamos un fichero nuevo, en File
- New File, y posteriormente nos vamos a View - Show console (Ctr +)
Nos aparecerá en la parte inferior una consola donde debemos pegar el texto que tenía-
mos copiado en el portapapeles en la consola y pulsamos enter:
Debemos cerrar Sublime Text2 y volverlo abrir para que se agreguen los paquetes de
ayuda. Una vez reiniciado nos vamos de nuevo a Sublime Text2 y pulsamos las teclas Ctrl +
Shift + P o en MAC Shift + P y nos aparecerá una ventana de ayuda de los Snippet .
Escribimos en esta ventana Install Package, aunque con el autocomplete que proporcio-
na no será necesario, debemos seleccionar la opción Package Control: Install Package
Nos abrirá una nueva ventana y vamos a buscar el paquete jQuery Mobile Snippet y
seleccionamos la versión para Sublime Text2
Una vez seleccionado se instalarán todos los Snippets de jQuery Mobile. Debemos cerrar
nuevamente Sublime Text 2 y volverlo abrir.
Si todo ha ido correcto, podemos crear un nuevo fichero, seleccionamos la sintaxis de

HTML:
519
Y ahora si nos vamos al documento nuevo, y empezamos a escribir jqm y pulsamos Ctrl
+ Barra Espaciadora nos saldrán todos los snippets de jQuery Mobile:
Si seleccionamos la primera opción donde pone Basic semantic page veremos que nos
ha escrito la estructura básica para usar jQuery Mobile a nivel de página y secciones:
Aula Mentor
No te preocupes si ves atributos que nunca habías visto que empiezan por data-role ya
que lo veremos en el siguiente apartado. También podemos buscar los elementos con Ctrl +
Shift + P y seleccionar lo que vayamos a necesitar, de una forma automatizada:
Si seleccionamos por ejemplo un ListView, nos aparecerá automáticamente el código, sin

errores en nuestro documento HTML:
<ul data-role=”listview”>
<li><a href=”#”>item1</a></li>
520
</ul>
En el siguiente punto vamos a profundizar más sobre la estructura que tiene una página
con jQuery Mobile, ahora debes entender que tenemos un editor de texto con la mayoría de
los snippets creados para jQuery Mobile, además con parámetros para directamente cambiar los
nombres y entonces agregar sólo el contenido.
Todos estos detalles van a ser los que te van a diferenciar de un programador que no
utilice este tipo de programas. Además como ya aprendimos en el módulo 1 más funciones de
Sublime Text 2 para agregar nuestros propios Snippet, poco a poco tendrás una buena biblioteca
y desarrollarás páginas muy rápidamente.
3. Estructura básica.
Para usar una página web con jQuery Mobile, sólo tendremos que saber HTML5 y agre-
gar los siguientes enlaces:
- El archivo JavaScript principal de jQuery.
- El archivo JavaScript principal de jQuery Mobile.
- El archivo CSS principal de jQuery Mobile
Es posible que en algunos casos el tema usado utilice imágenes para la parte de la inter-
faz gráfica, en este caso tenemos que tenerlo en cuenta.
Al igual que nos ha pasado durante todo el curso, debemos tomar la decisión de ¿dón-
de vamos a alojar estos archivos? De forma local o remota, o a través por ejemplo de un CDN
(Content Delivery Network) Red de entrega de contenidos. Cada uno tiene sus ventajas y sus
inconvenientes como ya hemos comentado anteriormente. En este caso, y sobre todo para no
tener que depender de internet para realizar el curso, vamos a usarlo de forma local, además
si en un futuro se quiere empaquetar la aplicación como nativa, nunca debes usar CDN como
medio para cargar los archivos de JQuery Mobile.
En caso que sea una aplicación web para instalarla en un dominio, si queremos usarlo
de forma externa sólo tendremos que tener un <head> parecido a éste:
<head>
<meta charset=”utf-8”/>
<meta name=”viewport” content=”width=device-width, minimum-scale=1, maximum-scale=1” />

<link rel=”stylesheet” href=”http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css”/>
521


<script type=”text/javascript” src=”http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.

js”></script>
</head>
Si lo vamos a usar de forma local, debemos descargarnos todo el material desde la sec-
ción recursos o desde la web oficial y posteriormente hacer los <link… > correctos:
http://jquerymobile.com/download/
Y la documentación también nos la proporciona la misma web en la seccion:
http://api.jquerymobile.com/
Aula Mentor
Una vez nos decargarmos el fichero comprimido, a día de hoy la versión es la jquery.
mobile-1.4.3.zip, casi con toda seguridad hay una versión más actual cuando estés leyendo es-
tas páginas, pero no te preocupes porque lo más probable es que sea totalmente compatible,
y además puedes descargar esta versión en los recursos del curso. Hay muchos desarrolladores
trabajando detrás y cada muy pocas semanas hay una versión más actual, te aconsejo, para evitar
problemas externos que no estén contenidos en el manual, usar esta versión que tienes en la
sección de recursos.
Una vez descomprimimos el archivo tenemos la siguiente estructura:
Partiendo de un documento HTML5 y siguiendo la misma estructura de directorios del

curso, carpeta CSS para las hojas de estilo, JS para los archivos o script JavaScript o jQuery, car-
522 peta IMG para las imágenes, etc. Vamos a copiar sólo los archivos necesarios ya que hay una
carpeta que se llama demos donde viene muchos ejemplos con esta versión. En principio esa
carpeta la usaremos en caso de consulta, la que nos interesan son los archivos correspondientes
a jQuery Mobile (js y css) y las imágenes que contienen los iconos. Debemos tenerla al menos en
nuestro proyecto, ya que hemos decidido en esta situación hacerlo de forma local, y no vamos a
usar ninguna CDN ya que vamos a usar todos los archivos de forma local, para no necesitar in-
ternet durante la realización del curso, o si estamos desarrollando una aplicación en una intranet
local para una empresa, o una aplicación para smartphone debemos garantizar que funcione.
Debemos recordar que existen dos versiones de los archivos importantes, la versión mí-
nima y la versión de desarrollo. Nosotros como estamos en desarrollo, vamos a usar ambas por
si en algún momento necesitamos ver que está realizando el script, pero debemos recordar que
cuando saquemos la versión a producción o en modo definitiva, siempre es aconsejable usar las
versiones mínimas, sin comentarios, tabuladores ni saltos de línea, siempre será más eficiente.
Otra opción válida sería enlazar siempre con los archivos en su versión minima (archivos que
acaban en: .min.extensión) y tener los archivos de apoyo como consulta, así cuando saquemos
el código a producción no tenemos que cambiar absolutamente nada.
Y cuando pasemos a producción podemos eliminar los archivos no usados y comprimi-

dos, quedando la siguiente estructura:
Una vez tenemos clara la estructura mínima para desarrollar aplicaciones web con jQuery
Mobile, debemos declarar una metaetiqueta para la ventana de visualización con el fin de evitar
problemas de visualización en el dispositivo. La ventana de visualización es el área a la que
se adapta la página. Al ser aplicaciones para Smartphone o Tablet, y al realizarla de forma más
clara y simple, no sería necesario ampliar o reducir la pantalla con los dedos, por lo que la escala
sería 1, y se puede forzar a que el usuario no pueda cambiar esta escala mediante gestos con los
dedos o con los botones.
La etiqueta que debemos añadir en el <head></head> de nuestro documento es la si-

guiente:
<meta name=”viewport” content=”width=device-width,minimum-scale=1, maximum-scale=1” />
O de otra forma:
<meta name=”viewport” content=”width=device-width, initial-scale=1, user-scalable=no” />
Por tanto el documento básico HTML5 desde el que partiríamos realizando nuestras apli-
caciones puede tener la siguiente estructura: 523
<!DOCTYPE html>
<head>
<title>Módulo jQuery Mobile</title>

<script type=”text/javascript” src=”js/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”js/jquery.mobile-1.4.3.min.js”></script>
<link rel=”stylesheet” type=”text/css” href=”css/jquery.mobile-1.4.3.min.css”>
<meta name=”viewport” content=”width=device-width, initial-scale=1, user-scalable=no”>
</head>
<body>
Aula Mentor
</body>
</html>
El formato presentado sería sin ningún contenido en el <body></body>, cosa que no tie-
ne mucho sentido, pero a partir de él se iran construyendo las nuevas páginas. Sí, has escuchado
bien, dentro del mismo body, podemos tener varias páginas. Esto es una característica que se
puede usar de forma optativa, aunque es muy recomendable para hacer cargas de páginas más
efectivas, ya que están cargadas previamente.
Tendríamos muchas páginas visuales dentro del mismo documento, esta forma de traba-
jar se usa desde hace tiempo y se llama WML (Wireless Markup Language, Lenguaje de Marcas
Inhalámbrico), donde a cada página visual se le llama “carta” y a cada documento WML se llama
“baraja”. Para definir cada parte visual se suele usar la etiqueta <div> con un rol específico.
En la siguiente página vamos a ver un ejemplo sencillo para que vayas entendiendo
cómo vamos a crear nuestras páginas web con jQuery Mobile. Una vez entendido, es sólo ir
agregando componentes: botones, listas, etc.
La estructura puede ser algo parecida a ésta:
524
3.1. Roles.
Cada carta o página visual contenida puede adquirir un rol, mejor dicho cualquier <div>
puede obtener un rol distinto. Estos roles son la forma de comunicar al navegador qué va ser
cada trozo de código, en algunas situaciones será una página como tal, un encabezado, pié de
página, etc.
Existen varios roles definidos en jQuery Mobile que podemos usar:
ROL Descripción
page Define una página visual, en la que jQuery
mostrará contenido.
header Define el encabezado de la página.
content Define el contenido de la página.
footer Define el pie de página
navbar Define una barra de navegación.
button Dibuja un botón.
controlgroup Dibuja un componente
collapsible Panel desplegable de contenido dentro de una
página
collapsible-set Grupo de paneles plegables (acordeón)
fieldcontain Contenedor para campos de formulario
listview Contenedor para elementos en formato de lis- 525
ta
dialog Define un cuadro de diálogo
slider Define un deslizador visual para valores boo-
leanos
nojs Elemento que se ocultará en los navegadores
compatibles con jQuery Mobile
En HTML5 el uso de atributos personalizados de la forma data-(algo) o data-* es admi-

tida y nos permiten definir el atributo que deseemos añadir a una etiqueta siendo totalmente
válido el documento HTML5. Este tipo de atributos o metadatos personalizados sin invalidar las
marcas es lo que suele usar jQuery Mobile para su desarrollo. Por tanto no debemos confundir
data-role como un atributo nuevo de HTML5, es una forma que se ha adaptado entre el entorno
de desarrollo y nosotros.
Los roles y atributos personalizados son los que hacen posible que haya diferentes pági-
nas visuales en el mismo. Se puede usar la semántica de secciones <section> asociadas a páginas
o directamente usar <div> asociadas a páginas:
<div data-role=”page”> o <section data-role=”page”>
. . .
<body>

<section id=”pagina1” data-role=”page”>
</section>

<section id=”pagina2” data-role=”page”>
526

<section id=”paginaN” data-role=”page”>

</body>
. . .
3.2. Temas.
Al igual que nos pasaba con jQueryUI, con jQuery Mobile tenemos también unos te-
mas predefinidos para usarlo en nuestros diseños web. Posteriormente veremos cómo agregar
nuestros temas personalizados con nuestros colores, fuentes, formatos..etc, pero ahora debemos
saber que jQuery Mobile nos ofrece 5 niveles de muestras de color, descritos por letras:
a. Priodad máxima a la parte visual (opción por defecto) – (color global: negro)
b. Nivel secundario de prioridad visual – (color global: azul)
c. Nivel base –(color global: plata)
d. Nivel secundario alternativo – (color global: gris)

527
e. Énfasis – (color global: amarillo)
Para cambiar las muestras de color sólo tendremos que cambiar la letra cuando defina-
mos el data-theme. Por tanto con cambiar de letra data-theme=”e” a data-theme=”b” tendremos
una apariencia visual totalmente diferente.
3.3. Página, encabezado, contenido y pie.
Debemos tener en cuenta que cada página (refiriendonos de aquí en adelante a página
visual y no documento HTML) que vayamos a tener, debe tener su propio encabezado, conteni-
do y pie de página, porque será lo que se visualice en cada página del dispositivo. Cada página
debería ser declarada así:
Aula Mentor
Para obtener ese código podríamos empezar a escribir:
. . .
<div data-role=”page”>
<div data-role=”header”>
<h1>CABECERA</h1>
</div>
<div data-role=”content”>
<p>CONTENIDO DE LA PÁGINA<p>
</div>
<div data-role=”footer”>
<h1>PIE DE PÁGINA</h1>
</div>
528 </div>
. . .
O usando secciones y artículos, más propia de la semántica de HTML5:
<section id=”page” data-role=”page”>
<header data-role=”header”>
<h1>CABECERA</h1>
</header>
<article data-role=”content”>
</article>
<footer data-role=”footer”>
<h1>PIE DE PÁGINA</h1>
</footer>
</section>
3.4. Navegación entre páginas.
Para navegar entre las diferentes páginas, ya sea dentro de la página cuando sea multi-
páginas, a enlaces externos de la página u otros enlaces que necesitemos vamos a disponer de
la etiqueta que ya conocemos:
<a href=”urlPagina”..….>
Cuando queramos ir de una página a otra tendremos que usar <a href=”#nombrePagina”>.
Otro detalle muy importante que nos proporciona jQuery es la animaciones entre transiciones
de páginas, esto es, efectos que realiza para crear aplicaciones llamativas para el usuario. Más
adelante veremos este tipo de transiciones.
Como sabemos los dispositivos de Android y BlackBerry suelen traer un botón de re-
troceso que si lo pulsamos, automáticamente pasará a la página anterior, ahora bien en caso de
no traer este botón, podemos añadir el botón de retroceso para que independientemente del
dispositivo pueda navegar e ir hacia atrás. Para ello, podemos usar un atributo específico:
data-add-back-btn=”true”
Añadir o no este atributo, dependerá de si vamos hacer una página pensada para nave- 529
gador o si vamos a usarla sin el marco instalada, hay que dotar nuestra página de él porque sino
podríamos dejar al usuario sin poder ir a la página anterior.
Vamos a crear una estructura que vamos a ir completando durante todo el curso y poco
a poco le iremos añadiendo elementos. Vamos a suponer que queremos realizar un documento
HTML con varias páginas, estas páginas compondrán tu currículum para las demás personas y
una forma de demostrar que sabes realizar aplicaciones web con jQuery Mobile:
INICIO Donde pondremos alguna imagen y texto sobre ti, tus inquietudes, y
además vamos a incluir la fecha actual, el nombre y apellidos, email y
contacto de redes sociales y web.
FORMACIÓN Tu formación académica y complementaria.
EXPERIENCIA Tu experiencia laboral.
OTROS DATOS Donde vamos a agregar idiomas, hobbies y otros datos de interés.
CONTACTAR Donde vamos a agregar la posibilidad que un usuario se ponga en

contacto con vosotros.
Por tanto tendremos como mínimo 5 páginas que podíamos definir de la siguiente forma,
como estamos acostumbrados en HTML, CSS y jQuery vamos a crearnos una lista de elementos
que van a contener cada ítem el nombre de cada página. Ésta la vamos a insertar en un elemento
que tenga el rol de barra de navegación:
Aula Mentor
<nav data-role=”navbar”>
<ul>
<li><a href=”#inicio” >Inicio</a></li>
<li><a href=”#formacion” >Formación</a></li>
<li><a href=”#experiencia”>Experiencia</a></li>
<li><a href=”#otrosdatos”>Otros datos</a></li>
<li><a href=”#contactar”>Contactar</a></li>
</ul>
</nav>
Normalmente los menús de navegación suelen estar en la parte inferior, por lo que ten-
dremos que usar algun truco para que siempre aparezcan ahí. Para poner un pie persistente
usando data-position=”fixed”, necesitaremos una forma de distinguir el elemento que está activo
o no, para que el usuario distinga si esta en Inicio, en formación, etc. Para ello, vamos a usar dos
clases ui-btn-active y ui-statepersist.
530 Por tanto nuestro menú sería de la siguiente forma, si estamos en la página de inicio,
debemos añadir cosas al footer por lo que ampliaremos el código a:
<footer data-role=”footer” data-id=”menuInferior” position=”fixed”>
<ul>
<li><a href=”#inicio”
class=”ui-btn-active ui-state-persist”>Inicio</a></li>
<li><a href=”#formacion” >Formación</a></li>
<li><a href=”#experiencia”>Trabajos</a></li>
<li><a href=”#otros”>Otros</a></li>
<li><a href=”#contactar”>Contactar</a></li>
</ul>
</nav>
</footer>
Si agregamos este código tendríamos algo parecido a esto:
Se asemeja a lo que queremos obtener pero la parte inferior podría ser mejorable aña-
diendo un icono a cada opción, aunque sería totalmente voluntario. Para ello jQuery Mobile
dispone de muchos iconos, y una forma muy sencilla de usarlos. Debemos de agregar el atributo
data-icon=”nombre” y con eso obtendremos el icono que trae por defecto jQuery Mobile.
A continuación podemos ver la lista de iconos disponibles y la forma de llamarlos para 531
usarlos en nuestro documento:
Por ejemplo unos apropiados pueden ser: para inicio el icono “home”, para formación el
icono “grid”, para la sección de trabajos podíamos usar “star”, para otros el icono “info” y por
último para contactar el icono de “mail”. Quedando nuestra página:
Aula Mentor
<!DOCTYPE html>
<head>
<meta charset=”utf-8” /> <title>Módulo jQuery Mobile</title>

<script type=”text/javascript” src=”js/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”js/jquery.mobile-1.4.3.min.js”></script>
<link rel=”stylesheet” type=”text/css” href=”css/jquery.mobile-1.4.3.min.css”>
<meta name=”viewport” content=”width=device-width, initial-scale=1, user-scalable=no”>
</head>
<body>
<section id=”inicio” data-role=”page”>
532 <header data-role=”header”>
<h1>CABECERA</h1>
</header>
</article>
<footer data-role=”footer” data-id=”menuInferior” data-position=”fixed” data-theme=”a”>
<ul>
<li><a href=”#inicio” class=”ui-btn-active ui-state-persist”

data-icon=”home”>Inicio</a></li>
<li><a href=”#formacion” data-icon=”grid”>Formación</a></li>
<li><a href=”#experiencia” data-icon=”star”>Trabajos</a></li>
<li><a href=”#otros” data-icon=”info”>Otros</a></li>
<li><a href=”#contactar” data-icon=”mail”>Contactar</a></li>
</ul>
</nav>
</footer>
</section>
</body>
</html>

Y el resultado que deberíamos tener hasta ahora sería el siguiente. Si nos fijamos sólo
tengo realizada una página, la de inicio por eso he agregado la clase class=”ui-btn-active ui-sta-
te-persist sólo a este elemento de la lista (elemento activo actualmente), posteriormente tendré
que cambiar esa clase a cada página que esté realizando para que el usuario cuando haga click 533
en ella se vaya cambiando la página activa. Ésta es una forma, otra puede ser informándolo en
la cabecera:
Nexus 4. Orientación Horizontal
Nexus 4. Orientación Vertical

Aula Mentor
iPhone5. Orientación Horizontal
534
BlackBerry Curve 9300 iPad3. Orientación Horizontal
Puedes visitar el ejemplo 02-BarraNavegacion/
Bueno, hasta ahora con muy poco código, y un código realmente conocido por nosotros
al 80% ya que la mayoría ha sido HTML5; tenemos un resultado bastante aceptable para dispo-
sitivos móviles de diferentes marcas, posteriormente vamos a ver cómo agregarle más elementos
a nuestra aplicación.
4. Botones.
Cuando vayamos a realizar un enlace, podemos usar botones, ya que no deja de ser
código HTML. Sobre todo en los dispositivos móviles tenemos que tener en cuenta la visión del
usuario y debemos hacer una interfaz agradable y fácil de usar, ya que al hacer una aplicación
web específica para dispositivos móviles, debemos evitar en la medida de lo posible usar link o
enlaces como tal:
Acceder Y usar mejor botones

Se pueden crear botones de diferentes formas al igual que pasa con HTML5.
- Usando el elemento <button>: <button>Acceder</button>
- Usando el elemento <input >:
<button >Acceder</button>
<input type=”submit” value=”Acceder”>
<input type=”button” value=”Acceder”>
<input type=”reset” value=”Acceder”>
Recuerda que para poder capturar el nombre del botón debes agregarle el atributo:
<input type=”submit” name=”bntAcceder” value=”Acceder”>
- Y como última forma y novedad respecto a lo que ya sabíamos, es usar el rol de tipo button,
agregando el elemento <a> con el atributo data-role=”button”
<a href=”#” data-role=”button”>Acceder</a>
Y el resultado sería como podemos ver visualmente el mismo en todas las formas: 535
Puedes visitar el ejemplo 03-botones/
Por defecto cada botón que se declare va a crear un salto de línea y cada botón va a
ocupar toda la pantalla, existe una forma de agregar botones en línea, es decir, uno a continua-
ción del otro. Para ello tenemos el atributo data-inline=”true” que indicaría al equipo que sería
en línea. Por ejemplo, en el caso anterior si queremos que dos botones ocupen toda la línea y
los tres siguientes ocupen solo una línea tendríamos que añadirle el atributo data-inline=”true”
a esto tres.
Aula Mentor
Si nos fijamos cuando ponemos los componentes inline tenemos que tener cuidado y
ser precabidos porque al igual que pasa en cualquier página web, si el elemento que esta en
línea no coge, se bajará a la siguiente línea. Como podemos ver, dependiendo de la pantalla
del dispositivo pasará una cosa u otra, de ahí que cuando vayamos desarrollando siempre es
conveniente ir probando en varios dispositivos con el emulador para comprobar el resultado y
siempre podamos agregar.
536
Podemos usar botones agrupados, sobre todo cuando tenga sentido en la propia aplica-
ción o nos interese visualmente. En este caso, debemos eliminar el atributo de data-inline=”true”
para aquellos botones que lo tuviera para no crear conflictos en su alineación y posteriormente
usar el data-role=”controlgroup”. En otros casos cuando queramos hacer un controlgroup pero
de botones inline debemos agregar este atributo a los botones y controgroup a su contenedor.
. . .

<p> Botones con ControlGroup </p>
<div data-role=”controlgroup”>
<button >BOTÓN 1</button>
</div>
. . .
Si queremos que la agrupación la haga de forma horizontal deberemos agregar al conte-

nedor el atributo data-type=”horizontal”:
. . .
<p> Botones con ControlGroup - Horizontal</p>
<div data-role=”controlgroup” data-type=”horizontal”>
<button data-inline=”true”>BOTÓN 1</button>
</div>
. . .
En el caso de que nos pase como en ejercicios anteriores que en algunos dispositivos
realice un efecto que no deseemos por el tamaño de pantalla y baje a otra línea, siempre pode-
mos reducir el tamaño de letra como otra propiedad más de CSS:
<button data-inline=”true” style=”font-size: 10px;”>BOTÓN 1</button>
537
El resultado de ambos controlgroup sería el siguiente:
Todos los botones por defecto tiene un efecto de sombra y esquinas redondeadas, estas
opciones las podemos modificar con los atributos booleanos (true/false) data-corners y data-
shadow.
Aula Mentor
Un elemento que puedes asociar también a los botones son los iconos, pudiendo agregar
diferentes iconos creando botones más llamativos y parecidos a los que el usuario está acostum-
brado a usar en sus aplicaciones. Para ello tenemos el atributo data-icon como vimos anterior-
mente y funcionarían exactamente igual que las que usamos para el menú de navegación, aquí
algunos ejemplos más usados:
. . .
<button data-icon=”arrow-l”>Flecha izquierda</button>
<button data-icon=”arrow-r”>Flecha derecha</button>
<button data-icon=”arrow-u”>Flecha hacia arriba</button>
<button data-icon=”arrow-d”>Flecha hacia abajo</button>
<button data-icon=”delete”>Eliminar</button>
538 <button data-icon=”check”>Validar</button>
<button data-icon=”search”>Buscar</button>
. . .
Puedes ver la lista completa en http://demos.jquerymobile.com/1.4.3/icons/, y en el

ejemplo actual podemos ver cómo se verían en un iPhone5:
Como es de esperar en la pantalla de forma horizontal tenemos menos espacio y nos

faltaría para respresentar todos los botones, aunque no se ha dicho, este tipo de páginas crece-
ría igual que cualquier página, hacia abajo, por lo que si ocupa más espacio que el que hay en
pantalla, podemos desplazarnos hacia arriba o hacia abajo con la pantalla táctil.
Otro detalle que queremos puntualizar, es que se ha ajustado horizontalmente el tamaño

del botón, como el menú inferior al espacio de la pantalla. Todo esto es porque siempre estamos
usando un diseño Responsive RWD: el diseño web adaptable o adaptativo, conocido por las
siglas (RWD del inglés, Responsive Web Design) es una filosofía de diseño y desarrollo cuyo
objetivo es adaptar la apariencia de las páginas web al dispositivo que se esté utilizando para
visualizarla.
Respecto a iconos, comentar que se podemos usar iconos personalizados para crear una
web más auténtica y diferenciada de las demás, aunque también no debemos olvidar que han
de ser muy intuitivos y el usuario suele estar acostumbrado a los que nos ofrece directamente
jQueryMobile.
Puedes visitar el ejemplo 03-botones/#boton
5. Iconos personalizados.
Para crear iconos personalizados debemos de:
- Definir nuestro propio nombre en el atributo data-icon. Éste no debe entrar en conflicto
con los ya definidos, así que es una buena práctica crearlo de la siguiente forma <nom-
bre-aplicación>-<nombre-icono> o usar la notación Reverse Domain Name <Reverse-DNS>- 539
<nombre-icono>. Por ejemplo si tengo un dominio que se llama midominio.com sería:
com-midominio-miaplicacion-nombre-icono
- Crear una clase llamada ui-icon-<nombre> y especificar en ella la imagen de fondo.
Para reducir problemas en la interfaz por problemas de tamaño y transparencias, el icono

debe tener un formato PNG de 18x18 con transparencia alfa. Para dispositivos de alta resolu-
ción como puede ser Iphone u otros de última generación. ¿Cómo hacemos en caso de tener
dos diseños, uno de 18x18 y otro de 36x36?. Tenemos que emplear dos definiciones diferentes
empleando las consultas de medio de CSS3. La primera se aplicará a todas las resoluciones y la
otra se aplicará a los dispositivos que tenga una alta resolución. Veamos un ejemplo:
Nos vamos a crear cuatro imágenes, dos para tamaño 18x18 y otras dos 36x36. Primero
he creado la de mayor resolución posteriormente le he dado a reducir tamaño a 18x18. Unas van
a indicar una sonrisa y otras todo lo contrario.
El diseño ha sido totalmente manual para ver que podemos personalizar todo lo que
queramos. No tienen ningún borde y tiene transparencia alfa. Los vamos a ubicar en una ruta,
en nuestro caso dentro de la carpeta images, y crearemos dos carpetas, una para los iconos nor-
males y otros para los de alta resolución.
Aula Mentor
Por orden de izquierda a derecha:
img/icons-hd/cara-ok-amarillo-36x36.png
img/icons-hd/cara-nok-amarillo-36x36.png
img/icons/cara-nok-amarillo-18x18.png
img/icons/cara-ok-amarillo-18x18.png
Ahora nos vamos a crear dos nombres para los iconos, que tendremos que llamar en el
data-icon de la siguiente forma:
data-icon=” proyectoCurso-cara-ok”
data-icon=” proyectoCurso-cara-nok”
Y el código correspondiente podría ser:
<button data-icon=”proyectoCurso-cara-ok”>Cara sonriente</button>
<button data-icon=”proyectoCurso-cara-nok”>Cara enfadado</button>
Si ejecutamos ahora mismo la aplicación podremos observar que no nos aparece ningún
540 icono, pero si aparece el sitio redondeado y de color gris donde se ubicaría:
Si nos fijamos el icono es de forma redondeada, de radio 18x18 o 36x36, debemos tener
en cuenta que el icono creado encaje perfectamente dentro de su ubicación, por lo que es po-
sible que necesitemos crear una canvas o tamaño de icono inferior.
Tenemos que definir ahora nuestro CSS para asociar nuestras imágenes, ya sea en un
archivo aparte, como hemos estado haciendo todo el curso dentro de la carpeta css o en el pro-
pio <head> del documento. Para evitar accesos y debido a la simplicidad del código esta vez lo
haremos en el <head>:

<style type=”text/css”>
.ui-icon-proyectoCurso-cara-ok:after {
background-image: url(“img/icons/cara-ok-amarillo-18x18.png”);
background-size: 18px 18px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
.ui-icon-proyectoCurso-cara-ok:after {
background-image: url(“img/icons-hd/cara-ok-amarillo-36x36.png”);
.ui-icon-proyectoCurso-cara-nok:after {
background-image: url(“img/icons/cara-nok-amarillo-18x18.png”);
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
.ui-icon-proyectoCurso-cara-nok:after { 541
background-image: url(“img/icons-hd/cara-nok-amarillo-36x36.png”);
</style>
Como podemos ver, es sencillo crear nuestros iconos y usarlos tanto en botones como
en los menús de navegación. Comentar, que hay que realizar iconos y usar colores siempre
acordes con la página, en este ejemplo hubiera sido mejor usar iconos en sintonía con el tema,
que según hemos visto el color era blanco.
Otro efecto que podemos usar es cambiar la ubicación de los iconos, es decir, la
ubicación respecto del texto. Para ello podemos usar el atributo data-iconpos y puede tomar los
siguientes valores:
Aula Mentor
right En la parte derecha.
left En la parte izquierda (valor por defecto).
bottom En la parte inferior (La altura del botón aumenta).
top En la parte superior (La altura del botón aumenta).
Tendríamos el siguiente código asociado:
. . .
<button data-icon=”proyectoCurso-cara-ok” data-iconpos=”right”>Cara sonriente – Derecha
</button>
542 <button data-icon=”proyectoCurso-cara-ok” data-iconpos=”left”>Cara sonriente – Izquierda
</button>
<button data-icon=”proyectoCurso-cara-ok” data-iconpos=”bottom”>Cara sonriente – Inferior
</button>
<button data-icon=”proyectoCurso-cara-ok” data-iconpos=”top”>Cara sonriente – Superior
</button>
. . .
También podemos declarar botones sin texto con el atributo data-iconpos=”notext” o

que los iconos no tengan efecto de sombra, para ello usamos data-iconshadow=”false”.
. . .
<button data-icon=”proyectoCurso-cara-ok” data-iconpos=”notext”>Este texto no se visible
</button>
<button data-icon=”proyectoCurso-cara-ok” data-iconpos=”notext” data-iconshadow=”false”>Este texto no

se visible</button>
. . .
6. Columnas.
En determinadas circunstancias es posible que necesitemos organizar la aplicación en
columnas, podríamos decir que en vez de utilizar la etiqueta table podemos organizar los ele-
mentos y tener nuestras columnas, filas que necesitemos, siempre teniendo en cuenta el tamaño
que disponemos dentro del dispositivo. Debemos pensar que vamos hacer una rejilla o grid de
elementos en la pantalla.
Para crear una cuadrícula o rejilla hay que crear un contenedor de bloque, ya sea
<div>,<section>, etc. Y agregarle la clase según el número de columnas:
ui-grid-a para dos columnas.
ui-grid-b para tres columnas. 543
ui-grid-c para cuatro columnas.
ui-grid-d para cinco columnas.
Todas las celdas deben ser a su vez un contenedor de bloque que utilice ui-block-<letra
a hasta la d> . Vamos a ver un ejemplo:
Y el código correspondiente sería:
. . .
<section class=”ui-grid-c”>

<div class=”ui-block-a”>Celda 1.1</div>
<div class=”ui-block-b”>Celda 1.2</div>

Aula Mentor
<div class=”ui-block-c”>Celda 1.3</div>
<div class=”ui-block-d”>Celda 1.4</div>


544 </section>
. . .
Puedes visitar el ejemplo 03-botones/#boton
7. Listas.
7.1. Lista básica.
En las aplicaciones web multiplataforma, un elemento muy extendido son las listas, ya
que organizan de una forma amena y ordenada el contenido. Podemos usar las listas como he-
mos realizado hasta ahora <ol> (ordenadas) <ul> (desordenadas) y los ítems llamarlos con <li>
. En el caso de que queramos sacar la parte visual y adaptada a diferentes dispositivos podemos
usar los roles de JQuery Mobile.
Para usar una lista sólo tenemos que usar el siguiente atributo o rol:
data-role = “listview”
Vamos aprovechar y crear todo el apartado de Listas en una nueva página visual, para
ello vamos a crearnos nuestra página a continuación de la que ya teníamos con jQuery Mobi-
le como vimos anteriormente, copiamos la lista o menú de navegación y cambiamos la clase
class=”ui-btn-active ui-state-persist” del primer botón al segundo, quedando esta nueva página
como se muestra a continuación.
<section id=”listas” data-role=”page”>
<h1>CABECERA</h1>
</header>

</article>
<ul>
<li><a href=”#boton” data-icon=”home”>Botón</a></li>
<li><a href=”#listas” class=”ui-btn-active ui-state-persist” data- 545

icon=”grid”>Lista</a></li>
<li><a href=”#tab-bar” data-icon=”star”>Tab</a></li>
<li><a href=”#form” data-icon=”info”>Form</a></li>
<li><a href=”#mail” data-icon=”mail”>Mail</a></li>
</ul>
</nav>
</footer>
Veamos un ejemplo sencillo de lista:
. . .
<p> ( Lista ul )</p>
<ul data-role=”listview”>
Aula Mentor
<li>HTML5</li>
<li>CSS3</li>
<li>JQUERY</li>
<li>JQUERY MOBILE</li>
</ul>
<p> ( Lista ol )</p>
<ol data-role=”listview”>
<li>HTML5</li>
<li>CSS3</li>
<li>JQUERY</li>
</ol>
546
</article>
. . .
(por defecto) data-inset=”true”

No debemos dejar escapar que en las lista <ol> automáticamente jQuery Mobile nos ha
insertado un número indicándonos el orden que ocupa en la lista. Como podemos apreciar, no
existen inicialmente diferencias entre ambas listas en el dispositivo de la izquierda, pero hemos
de apreciar en él que cada elemento de la lista ocupa toda la pantalla y en determinadas oca-
siones podemos querer que se vea la lista como una lista interior. Para ello, podemos usar el
atributo data-inset=”true” a los elementos <ul> u <ol>.
. . .
<p> ( Lista ul ) con data-inset=”true”</p>
<ul data-role=”listview” data-inset=”true”>
<li>HTML5</li>
<li>CSS3</li>
<li>JQUERY</li>
</ul>
<hr>
547
<p> ( Lista ol ) con data-inset=”true”</p>
<ol data-role=”listview” data-inset=”true”>
<li>HTML5</li>
<li>CSS3</li>
<li>JQUERY</li>
</ol>
. . .
HTML5 no emplea la sintaxis de XML, lo que significa que algunas etiquetas, como pue-
de ser <li> no es necesario cerrarla, pero creo que es mejor independientemente de que tenga-
mos la opción seguir usando la notación usual <li></li>, al menos inicialmente.
En las listas a menudo es posible que tengamos que usar algún método para separar o
distinguir unos elementos de otros, para ello tenemos el siguiente atributo, tenemos que tener
en cuenta que es sólo un rol que se le aplica al ítem de la lista:
li:data-role=”list-divider”
Aula Mentor
Para ello podemos pensar el siguiente ejemplo:
<li data-role=”list-divider”>LENGUAJES IMPLICADOS</li>
548
<li>HTML5</li>
<li>CSS3</li>
<li>JQUERY</li>
<li data-role=”list-divider”>REQUERIMIENTOS</li>
<li>TIEMPO</li>
<li>GANAS DE APRENDER</li>
<li>REALIZAR LOS EJERCICIOS</li>
<li>FLEXIBILIDAD Y PACIENTES</li>
<li>APTITUD POSITIVA</li>
</ul>
7.2. Lista con enlaces.
Muchas veces necesitamos además de listar un conjunto de elementos, dar la posibilidad

al usuario de que al pulsar en cualquier ítem de la lista realice alguna acción o nos lleve a otro
sitio de la página. Para realizar esto, sólo debemos de agregar el elemento creado en HTML5
para ello tenemos la etiqueta <a>. Cuando creamos un enlace en un elemento de la lista, auto-
máticamente jQuery Mobile le agrega el icono con la flecha de la derecha. Esto no es nada más
que asignar automáticamente un data-icon=”arrow-r”, en el caso de que quisieramos usar otro,
ya vimos que se puede modifcar e incluso crear los nuestros personalizados, con agregar data-
icon=”miicono”.
Ademas de agregarnos unos iconos personalizados, nos agregará efectos cuando pulse-
mos o interactuemos con el ítem en cuestión. Por ejemplo podemos crear una lista interactiva
sólo con agregarle los enlaces <a>. Y en caso de que no queramos que tenga visible ningún
icono, podemos usar data-icon=”false”. Veamos un ejemplo:
549
Dispositivo emulado Captura pantalla dispositivo real

Aula Mentor
. . .
<p> ( Lista interactivas (enlaces) )</p>
<li><a href=”#”>HTML5</a></li>
<li><a href=”#”>CSS3</a></li>
<li><a href=”#”>JQUERY</a></li>
<li><a href=”#”>JQUERY MOBILE</a></li>
<li data-icon=”info”><a href=”#”>MÁS INFORMACION</a></li>
<li data-icon=”false”><a href=”#”>ENLACE SIN ICONO</a></li>
</ul>
. . .
550
7.3. Listas divididas.
En determinadas ocasiones es posible que necesitemos que la lista esté compuesta por
dos elementos, por ejemplo uno para seleccionar el ítem de la lista y otro para editarlo, borrarlo
o cualquier otra acción que necesitemos.
Automáticamente jQuery Mobile cuando detecta dos enlaces en el mismo ítem los trata
de esa forma. La primera etiqueta definida <a …. > será la que ocupe mayor espacio y la segun-
da será la que no debería tener texto, y más bien la acción concreta, editar, borrar, añadir, etc.
Para ello sólo tendremos que definir el ítem de la lista de la siguiente forma:
<li><a href=”#url”>NOMBRE 1</a><a href=”#accion” data-icon=”edit”></a></li>

Podemos modificar también la importancia de cada fila solo agregando títulos a cada
ítem de la lista. Si recordamos en HTML teníamos <h1><h2>…etc para enumerar el nivel e im-
portancia de la información que contiene.
7.4. Filtrado en listas. 551
Cuando tenemos una lista demasiado amplia, es conveniente ayudar al usuario en en-
contrar el elemento que esta buscando. Para ello, jQuery Mobile nos facilita esta acción añadien-
do otro atributo más a la lista: data-filter=”true”, con eso, automáticamente se encarga de agre-
gar al usuario un campo de entrada, y realiza un filtrado del contenido de la lista y muestra los
elementos coincidentes. Si agregamos el atributo al ejemplo anterior obtendríamos lo siguiente:
Aula Mentor
Cuando hemos escrito la letra “a” nos muestra sólo los ítem de la lista coincidentes.
7.5. Listas compuestas.
También podemos usar listas más complejas, agregando más elementos a la lista enri-
queciéndose y dandole la mayor información posible al usuario. Podemos agregar imágenes,
información adicional o descripciones y contadores.
7.5.1. Título y descripción.
Tenemos que recordar que con jQuery Mobile y con HTML5 se le da mucha importancia
a las etiquetas que incluyas, la semántica que escribas en HTML va a ser muy importante para
posteriormente hacer determinadas acciones y si por ejemplo en una etiqueta escribimos:
<li>
<a href=”#”><h3>España</h3>
<p>Persona que hayan nacido en España</p></a>
</li>
Nos aparecerá de la siguiente forma en nuestro elemento de la lista:

552
7.5.2. Agregar Imagen.
Para agregar imágenes a nuestros ítems de la lista podemos usar la etiqueta que ya
conocíamos <img src=”rutaImagen”>. Podemos distinguir entre iconos y miniaturas/thumnails,
realmente se usa la misma sintaxis pero de forma usual, los iconos tiene un tamaño de 16x16 y
las minuaturas 80x80 (o 160x160 hd). No debemos confundir estas imágenes con los data-icon
que agregamos a cada lista, ya que es información que se agrega a la fila y se ha de insertar en
cada ítem. Lo que hacemos es decirle al sistema que la imagen va a ser de la clase class=”ui-li-
icon” , por tanto tendremos que recordar lo que vimos respecto al tamaño de los iconos.
Para agregar una imagen (tipo icono) debemos agregar el siguiente código:
. . .
<ul data-role=”listview” data-inset=”true” data-filter=”true”>
<li data-role=”list-divider”>Paises</li>
<li><a href=”#”><img class=”ui-li-icon ui-corner-none” alt=”Inglés”

src=”img/icons/es.png”>España</a></li>
<li><a href=”#”><img class=”ui-li-icon ui-corner-none” alt=”EEUU”

src=”img/icons/us.png”>E.E.U.U</a></li>
<li><a href=”#”><img class=”ui-li-icon ui-corner-none” alt=”Francia”

src=”img/icons/gf.png”>Francia</a></li>
<li><a href=”#”><img class=”ui-li-icon ui-corner-none” alt=”Inglaterra”

src=”img/icons/gb.png”>Inglaterra</a></li>
. . .
Y para agregar las miniaturas o thumnails debemos escribr este código:
<li><a href=”#”>
<img src=”img/logos/html5-logo.png”>
<h3>HTML5</h3>
<p>Lenguaje HTML</p></a>
553
</li>
<img src=”img/logos/css3-logo.png”>
<h3>CSS3</h3>
<p>Hojas de estiloL</p></a>
</li>
<img src=”img/logos/jquery-logo.png”>
<h3>JQUERY</h3>
<p>Framework jQuery</p></a>
</li>
<img src=”img/logos/jquery-mobile-logo.png”>
Aula Mentor
<h3>JQUERY MOBILE</h3>
<p>Framework jQuery Mobile</p></a>
</li>
</ul>
7.5.3. Columna adicional.
Muchas veces, además de agregar un título, descripción e imagen, es posible que nece-
sitemos otro dato más para agregar información adicional sobre esa fila. Si por ejemplo cada fila
554 corresponde al nombre de una persona, podríamos poner la edad, teléfono o link con su email.
Si nuestra aplicación es de una tienda de artículos puede ser el precio, o si es una lista de paises
por ejemplo podíamos indicar su moneda, prefijo telefónico, etc.
Para poder usar esto, usamos la etiqueta <span> o <div> junto con una clase:
class=”ui-li-aside”
<ul data-role=”listview” data-inset=”true” >
<li data-role=”list-divider”>Países</li>
<img class=”ui-li-icon ui-corner-none” alt=”España” src=”img/icons/es.png”>
España</a>
<span class=”ui-li-aside”><b>€ (+34)</b></span>
</li>
<img class=”ui-li-icon ui-corner-none” alt=”EEUU” src=”img/icons/us.png”>
E.E.U.U</a>
<span class=”ui-li-aside”><b>$ (+1)</b></span>
</li>
<img class=”ui-li-icon ui-corner-none” alt=”Francia” src=”img/icons/gf.png”>
Francia</a>
<span class=”ui-li-aside”><b>€ (+33)</b></span>
</li>
<img class=”ui-li-icon ui-corner-none” alt=”Inglaterra” src=”img/icons/gb.png”>
Inglaterra</a>
<span class=”ui-li-aside”><b>£ (+44)</b></span> 555
</li>
</ul>
Y se vería en los dispositivos:
7.5.4. Contadores.
Muchas veces la información adicional que queremos agregar respecto al elemento de la

lista es un valor numérico y existe un elemento muy gráfico y sencillo para mostrar al usuario
contadores. Para ello usamos en este caso la siguiente clase:
class=”ui-li-count”
Aula Mentor
Si tenemos el siguiente código:
<ul data-role=”listview” data-inset=”true” >
<li data-role=”list-divider”>Paises</li>
<img class=”ui-li-icon ui-corner-none” alt=”España” src=”img/icons/es.png”>
España</a>
<span class=”ui-li-count”>600</span>
</li>
<img class=”ui-li-icon ui-corner-none” alt=”EEUU” src=”img/icons/us.png”>
E.E.U.U</a>
556 <span class=”ui-li-count”>920</span>
</li>
<img class=”ui-li-icon ui-corner-none” alt=”Francia” src=”img/icons/gf.png”>
Francia</a>
</li>
<img class=”ui-li-icon ui-corner-none” alt=”Inglaterra” src=”img/icons/gb.png”>
Inglaterra</a>
</li>
</ul>
No te preocupes si no gusta el estilo o el tema que estas viendo, sólo con agregar unas
líneas puede cambiar el aspecto visual totalmente, declara la lista de la siguiente forma:
<ul data-role=”listview” data-inset=”true” data-theme=”b” data-divider-theme=”a” data-count-theme=”a”>
Puedes ver todo estos ejemplos en los recursos del curso, recuerda que es muy recomen-
dable que empieces un archivo desde el inicio y vayas probando sobre él todos los elementos y
en caso de duda revises la solución:
557
Puedes visitar el ejemplo 04-listas/#listas
8. Tab.
Como pasaba con jQueryUI tenemos un elemento muy útil para organizar el contenido
dentro de nuestras aplicaciones. Está muy extendido en las aplicaciones y es recomendable su
uso siempre que la aplicación lo requiera.
Vamos aprovechar y crear una nueva página al igual que pasó en el anterior apartado.
No debemos olvidar que ahora debemos agregar class=”ui-btn-active al elemento actual de la
lista:
<section id=”tab-bar” data-role=”page”>
<header data-role=”header”><h1>CABECERA</h1></header>
//AQUÍ VA MI CONTENIDO DE ÉSTA PÁGINA
</article>

Aula Mentor
<ul>
<li><a href=”#listas” data-icon=”grid”>Lista</a></li>
<li><a href=”#tab-bar” class=”ui-btn-active ui-state-persist”

data-icon=”star”>Tab</a></li>
</ul>
</nav>
Para usar tab podemos partir del mismo ejemplo que trabajamos en el módulo anterior
558 y voy a cambiar el color del texto que debemos añadir:
<div id=”misTabs” data-role=”tabs” >
<div data-role=”navbar”>
<ul>
<li><a href=”#tabs-1” data-ajax=”false”>Pestaña 1</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
data-ajax=”false” puedes eliminarlo y en la mayoría de los dispositvos no tendrás pro-

blemas, pero en la documentación oficial viene agregado. Ahora cada vez que hagamos click en
una pestaña podemos cargar un contenido diferente:
559
Una opción muy importante que podemos usar cuando vamos a ir rellenando cada pes-
taña es usar un documento html, php, js, etc para llamarlo en el momento que el usuario haga
click sobre él. Imaginemos en el caso anterior que creamos una pestaña más, pestaña miTwit-
ter. Y ahí vamos a llamar a un fichero, llamado mitwitter.html y quiero que se cargue en esta
pestaña:
Para ello necesitamos tener un documento creado mitwitter.html con las etiquetas que
queramos insertar ahí, por ejemplo:
<div><p>Este texto se ha cargado de un fichero llamado desde la pestaña. Podía haber sido un fichero PHP
que lea el twitter del usuario, o realice cualquier otra opción que se nos ocurra.</p></div>
Aula Mentor
Y en nuestro fichero, dentro de nuestra página tab-bar:
<div data-role=”navbar”>
<ul>
<li><a href=”mitwitter.html” data-ajax=”false”>Pestaña 3</a></li>
</ul>
</div>
</div>
560 <div id=”tabs-2”>
</div>
</div>
1º
Enlazo con el fichero mitwitter.html
2º
<div><p>Este texto se ha cargado de un fichero llama-
do desde la pestaña. Podía haber sido un fichero PHP
que lea el twitter del usuario, o realice cualquier
otra opción que se nos ocurra.</p></div>
También se pueden usar tab de forma vertical, y que las pestañas se vayan mostrando en
la parte derecha. Esta forma se ha de usar en dispositivos que tengan una pantalla grande, por
ejemplo Tablet, SmartpTv, etc.
Puedes visitar el ejemplo 05-tab/#tab-bar
data-inset=”true” iPhone5 (Pantalla en horizontal) data-inset=”false”
561
iPhone5- Pantalla Vertical Tablet. Nexus 7 Vertical
El código correspondiente sería éste:
. . .
<ul data-role=”listview” data-inset=”true” class=”tablist-left”>
<li><a href=”#tabs-1” data-ajax=”false”>Uno</a></li>
<li><a href=”#tabs-2” data-ajax=”false”>Dos</a></li>

Aula Mentor
<li><a href=”mitwitter.html” data-ajax=”false” >Tres</a></li>
</ul>
<div id=”tabs-1” class=”ui-body-d tablist-content”>
</div>
<div id=”tabs-2” class=”tablist-content”>
</div>
</div>
. . .
9. Formularios.
Uno de los aspectos que nos podría interesar más en las aplicaciones web multiplata-
forma sería la realización de formularios para interactuar con datos con el usuario. Al igual que
562
pasaba antes, la mayoría del código es conocido por nosotros, ya que al fin y al cabo van a ser
input, textarea, select, etc. El formulario también recibirá su action donde podremos recibir una
URL donde mandaremos el fichero, el funcionamiento es el mismo al que ya estamos acostum-
brados, con su método get o post. Lo único que en este caso, podemos emplear el atributo data-
ajax=”true” en el elemento form; siendo muy útil cuando la acción está haciendo una petición
a un dominio que no está en el mismo dominio. Cuando el usuario rellene su formulario, vamos
a enviarlo por correo electrónico a una dirección de email, pero este último punto lo veremos
en el siguiente apartado.
Podríamos resumir los elementos del formulario en los siguientes:
- Etiquetas del formulario (label).
- Botones (como vimos anteriormente button, input, etc).
- Entrada de texto (input y textarea).
- Casillas de verificación y otros elementos inputs.
- Las opciones de menú (select y option).
- Deslizadores empleando el control input type=”range”.
Debemos recordar que todos los elementos están renderizados para un mejor uso, y con
el uso de AJAX todas las páginas comparten el mismo DOM, incluyendo los controles de formu-
lario Web. Para evitar problemas debemos utilizar un ID único en nuestros elementos para todo
el sitio, sino tendrás problemas, acciones no deseadas y te costará detectar dónde esta el error.
Vamos a seguir ampliando nuestra aplicación, realizaremos una nueva página y pondre-
mos como activa el siguiente elemento del menú de navegación, en este caso form. Como he-
mos realizado hasta ahora, a continuación de las otras páginas y en el mismo documento index.
html:

<section id=”form” data-role=”page”>
<h1>CABECERA</h1>
</header>

</article>
563
<ul>
<li><a href=”#form” class=”ui-btn-active ui-state-persist” data-

icon=”info”>Form</a></li>
</ul>
</nav>

Aula Mentor
9.1. Etiquetas.
Un elemento al que debemos acostumbrarnos a trabajar con él, serían las etiquetas
sobre los campos del formulario. Éstas apuntan al control correcto empleando el atributo
for=”idCampo” después de su definición de la etiqueta <label>.
Las etiquetas deberían usarse en todos los formularios HTML5, aunque en este módulo
no se hizo hincapié para facilitar y no mezclar conceptos al aparecer datos del formulario ya que
no habíamos dado todavía CSS3 ni identificadores (id). En este módulo no podemos dejar pasar
por alto, y con más motivo en los dispositivos móviles ya que cuando el usuario haga click en
la etiqueta el control del formulario pasará a estar activo.
Como vimos en el módulo HTML5:
<label for=”miIdCampo”>Texto etiqueta</label>
<input type=”text” id=”miIdCampo”>
El resultado del código anterior sería éste:
9.2. Contenedores.
564
Para usar los contenedores de campo, podemos usar la clase: class ui-field-contain.
Es posible si lees por internet que se usa también el rol data-role=”fieldcontain”, éste ha
sido cambiado por esta nueva clase en la versión 1.5. Debemos tener cuidado y siempre usar los
métodos correspondientes a la versión que tengas, por eso siempre tenemos que tener abiertos
la documentación para consultar dudas de este tipo, o en el caso de habernos bajado todo el
API, como ha sido nuestro caso, hay unos ejemplos donde te explican el componente que vas
hacer y la forma correcta de realizarlo. Si tienes la misma estructura que en el curso, ésta la en-
contrarás en:
www\MOD4.JQUERYMOBILE\jquery.mobile-1.4.3\demos
Para usarlo podemos usar un contenedor o capa <div>:
<div class ui-field-contain >
<!—Mis elementos del formulario -->
</div>
Por ejemplo:
<div class=”ui-field-contain”>
<label>CONTENEDORES</label>
<label for=”idNombre”>Nombre</label>
<input type=”text” id=”idNombre” name=”nombre”>
<label for=”idPass”>Pass</label>
<input type=”text” id=”idPass” name=”pass”>
</div>
9.3. Agrupar elementos.
También podemos agrupar elementos como vimos en las listas con controlgroup, un
ejemplo muy usado en los formularios puede ser agrupar botones u otros elementos. Realmente
todo esto ya lo hemos visto, sólo era para poner de manifiesto que se pueden usar exactamente
igual en los formularios.
Para agrupaciones de forma vertical:
565
<fieldset data-role=”controlgroup”>
<legend>AGRUPACIÓN VERTICAL, BOTONES:</legend>
<button>BOTÓN 1</button>
<input type=”button” value=”BOTÓN 2”>
<a href=”#” class=”ui-shadow ui-btn”>BOTÓN 3</a>
</fieldset>
</div>
Y para agrupar de forma horizontal tendríamos:
<fieldset data-role=”controlgroup” data-type=”horizontal”>
<legend>AGRUPACIÓN HORIZONTAL, BOTONES:</legend>
<button>BOTÓN 1</button>
Aula Mentor
<input type=”button” data-iconpos=”right” value=”BOTÓN 2”>
<a href=”#” class=”ui-btn”>BOTÓN 3</a>
</fieldset>
</div>
9.4. Botones y campos de texto.
Respecto a los botones, los podemos usar exactamente igual que en anteriores secciones
y con los campos de texto pasa lo mismo. Vamos a realizar algunos ejemplos pero recuerda que
todo esto ya lo sabemos, sólo lo estamos repasando y aplicándolo a un formulario. A modo de
resumen y recordando que podemos usar la mayoría de las opciones que vimos en los formula-
rios de HTML5 (name, placeholder, required, pattern, etc):
Crear botones:
<button>button</button>
566
<input type=”button” value=”type-button”>
<input type=”reset” value=”type-reset”>
<a href=”#” class=”ui-btn”>a class-”ui-btn”</a>
Crear campos de texto:
<legend>CAMPOS DE TEXTO:</legend>
<input type=”text” placeholder=”type=text”>
<input type=”password”
placeholder=”type=password”>
<input type=”email” placeholder=”type=email”>
<input type=”tel” placeholder=”type=tel”>
<input type=”url” placeholder=”type=url”>
<input type=”search” placeholder=”type=search”>

<input type=”number” placeholder=”type=number”>
<textarea placeholder=”type=text”></textarea>
9.5. Conmutadores.
Otro elemento que debemos usar en nuestros formularios ya que el usuario está acos-
tumbrado a usar en sus aplicaciones y simplifican mucho la interfaz del usuario, son los elemen-
tos conmutadores o switch. Estos pueden tomar un valor u otro, verdadero o falso. Para ello se
basan en los checkbox, sólo que se aplica el rol data-role=”flipswitch”.
Conmutador básico ON/OFF:
<label for=”conmutador”>Opcion</label>
<input type=”checkbox” data-role=”flipswitch” id=”conmutador”>
Conmutador con valor personalizado:
<label for=”opcion”>Opcion</label>
<input type=”checkbox” data-role=”flipswitch” id=”opcion” data-on-text=”SI” data-off-text=”NO”>

567
Otra forma de crear un conmutador booleano en nuestros formularios es a través de un
elemento select y el rol data-role=”slider”. Por tanto podríamos usar los siguiente ejemplos:
Conmutador personalizado con select:
<label for=”miSelect”>Opcion</label>
<select id=”miSelect” name=”miSelect” data-role=”slider”>
<option value=”NO”>NO</option>
<option value=”SI”>SI</option>
</select>
9.6. Deslizadores/Slider.
Cuando un campo pueda tomar un rango de elementos predefinido, pero mayor de dos,
(sino usaríamos un conmutador tipo filpswitch), podemos usar el componente deslizador <input
type=”range”>, el cual puede tomar valores min (mínimo), max(máximo) y step (intervalo en
cada paso).
Aula Mentor
<legend>Deslizador básico valor de 18~35</legend>
<label for=”deslizador”>deslizador</label>
<input type=”range” id=”deslizador” min=”18” max=”35” value=”18”>
Podemos personalizar un poco estos elementos que nos da jQuery Mobile, por ejemplo
añadiendole valor en cada paso, es decir ¿cómo va a incrementar cuando se realice un despla-
zamiento? Podríamos decir que se incremente en valores de 2 en 2, o de 1 en 1 (por defecto), o
incluso valores decimales, 0.5.
<label for=”deslizador”>deslizador</label>
<input type=”range” id=”deslizador” min=”0” max=”10” value=”1” step=”0.5”>
9.7. Campos tipo fecha.
Como vimos con jQueryUI teníamos un componente muy util para que el usuario pueda
introducir las fechas, no se puede usar tal cual aquí pero si nos proporciona otra forma de intro-
ducir fechas. Este componente es más aconsejado por el tipo de pantallas que tiene el usuario y
lo ideal, en la medida de lo posible es que el usuario introduzca manualmente los menos cam-
568 pos posibles (sobre todo para evitar errores de mecanización), ya que ralentiza la interacción
con la aplicación; sobre todo en elementos conocidos, fecha, si/no, lista de opciones, etc.
Para usar fechas sólo debemos indicar al <input que va a ser del tipo type= “date”:
Puedo aumentar/disminuir
cada campo dd o mm o aaaa
Sólo tenemos que escribir en nuestro formulario:
<label for=”miFecha”>Fecha</label>
<input type=”date” name=”miFecha” id=”miFecha” value=”” placeholder=”dd/mm/aaaa”>
¡Importante!. Este componente es realmente nuevo y puede ser que no funcione en

todos los dispositivos. A fecha de hoy se ha comprobado en varios dispositivos y no aparecen
los controladores del calendario ni el mapa (sólo el campo de entrada de texto). En estos casos
se ha comprobado que el componente de jQueryUI datepicker ha sido correcto, por lo que es
posible usar éste o crear otra forma por nosotros mismos para realizarlo mediante JavaScript o
jQuery.
9.8. Menús de selección.
Para usar menús de selección no es necesario agregar ningún elemento clase o rol, y
podemos realizar elección sencilla o múltiple:
<label for=”menuSeleccion”>deslizador</label>
<select name=”menuSeleccion” id=”menuSeleccion”>
<option value=”1”>Opción 1</option>
</select>
El efecto que se verá va a depender del navegador del dispositivo, algunas veces lo
mostrará en la misma pantalla desplazando el componente hacia abajo, o creará un elemento
emergente, cada sistema operativo usará su propio método:
569
Emulado: Nexus4.2.x Real: LenovoA660.(4.04) Real.WindowsPhone 520
Para evitar estas diferencias, que bueno, dependiendo de cada aplicación puede ser o
no conveniente, podemos desactivar el menú nativo y aparecería igual en todos los dispositivos,
usando data-native-menu=”false” como atributo del select.
Cuando hablamos de selecciones, es posible que en algunos casos esta selección sea
de tipo múltiple, es decir, que el usuario pueda elegir varios elementos de los dados, para ello
podemos usar el siguiente código que sólo hemos añadido multiple=”multiple” data-native-
menu=”false” al menú select:
Aula Mentor
<label for=”menuSeleccion”>Menú Selección</label>
<select name=”menuSeleccion” id=”menuSeleccion” multiple=”multiple” data-native-menu=”false”>
</select>
570
Emulado: Nexus4.2.x Real: LenovoA660.(4.04) Real.WindowsPhone 520
Cuando estamos hablando de opciones, muchas veces necesitamos organizar las op-
ciones de alguna forma, ya sea categoría, importancia, etc. Para agrupar estos elementos nos
podemos de optgroup:
<label for=”optgroupV1”>Agrupación de selecciones</label>
<select name=”optgroupV1” id=”optgroupV1” data-native-menu=”false”>
<option>Elige...</option>
<optgroup label=”Mi grupo 1”>

</optgroup>
<optgroup label=”Mi grupo 2”>
</optgroup>
</select>
Podemos usar elementos de agrupación de tipo visual (vertical u horizontal), para ello
sólo debemos crear varios select y agruparlos con un rol de data-role=”controlgroup”
<fieldset data-role=”controlgroup”>
571
<legend>Agrupación de selecciones (vertical)</legend>
<label for=”miGrupo1”>Mi grupo 1</label>
<select name=”miGrupo1” id=”miGrupo1” data-native-menu=”false”>
<option value=”1”>Naturaleza</option>
<option value=”2”>Pesca</option>
<option value=”3”>Deporte</option>
<option value=”4”>Escalar</option>
</select>
<option value=”5”>Arroz</option>
<option value=”6”>Macarrones</option>
Aula Mentor
<option value=”7”>Pollo Asado</option>
<option value=”8”>Lentejas</option>
</select>
<option value=”9”>Blanco</option>
<option value=”10”>Amarillo</option>
</select>
</fieldset>
Como veremos en las imágenes siguientes, se crea unos elementos muy agradables para
el usuario sin cambiar mucho la estructura usual de creación de elementos. Se puede realizar
muchos más efectos y combinaciones con los elementos de selección, entre las que destacamos:
Tamaño pequeño: Atributo data-mini=”true”
572 Posición del icono: Atributo data-iconpos=”left”, rigth…etc.
Elemento seleccionado: Añadimos al ítem selected.
Grupos Horizontales: Añadimos data-type=”horizontal” al controlgroup
Ayuda en la elección: Añadimos al primer option: data-placeholder=”true”

Debemos recordar que para que todos los elementos del formulario se envíen co-
rrectamente, debemos asignar un nombre. Por ejemplo:
<button name=”btnEnviar”….
573
<select name=”miSeleccion”…
<input type=…. name=”miCampo”….
<textarea name=”miTextarea”….
Puedes visitar el ejemplo 07-correo/#form
10. Correo electrónico.

Como hemos podido ver en nuestra aplicación hemos usado un menú de navegación
para algunos apartados, y vamos a crear uno nuevo para la sección de correo electrónico o mail.
Para ello, debemos crear una nueva página, asegurándonos que el id se llama igual que el en-
lace del menú, en este caso mail y pondremos como activo esta opción:

<section id=”mail” data-role=”page”>
<h1>CABECERA</h1>
Aula Mentor
</header>

</article>
<ul>
<li><a href=”#mail” class=”ui-btn-active ui-state-persist” data-

icon=”mail”>Mail</a></li>
574
</ul>
</nav>
Para mandar correos electrónicos desde nuestra aplicación, podemos verlo desde dos
puntos de vista:
- Hacer una llamada al sistema de correo del cliente.
- Enviar un correo autónomamente, por ejemplo el resultado de un formulario.
Enviar correo electrónico desde el sistema de correo del cliente:
Para ello podemos usar el atributo mailto:direccion. Un ejemplo sencillo sería agregar
al contenido de nuestra página el siguiente código:
<p>Para ponerse en contacto con nosotros pulse <a href=”mailto:ejemplo@ejemplo.com “>aquí</a> o en con
nuestro departamento</p>
<address>
Departamento de ventas<br>
<a href=”mailto:info@example.com”>Correo electrónico</a><br>
Dirección del departamento<br>
Localidad y C.P. 000000<br>
Provincia (País) <br>
Telefono<br>
</address>
Y el resultado sería el siguiente en nuestro dispositivo:
Al pulsar en el enlace abre el siste-

ma de correo del cliente y agrega la
dirección: ejemplo@ejemplo.com
575
Al pulsar en el enlace abre el sistema

de correo del cliente y agrega la di-
rección: info@ejemplo.com
Si en vez de tener un dispositivo móvil usáramos un PC, como es nuestro caso con el
emulador del navegador, tendrás que tener instalado algún cliente de correo para poder ver que
se ejecuta correctamente. En caso de no tener ningún cliente de correo, puedes usar Thunder-
bird, es gratuito y te lo puedes descargar desde aquí: https://www.mozilla.org/es-ES/thunder-
bird/ .
Ahora bien, no nos deberíamos de preocupar mucho por esta parte ya que realmente
las aplicaciones web que vamos a desarrollar con jQuery Mobile en su mayoría van a ser para
dispositivos móviles con Android, BlackBerry, iPhone, Windows Phone, etc.
Sería más interesante si dispones de un dispositivo móvil que esté conectado a tu red
local, y con el servidor web encendido, poner la dirección del servidor y pruebes por ti mismo
el resultado. Podrás comprobar que llama en cada caso al cliente de correo de tu dispositivo
móvil.
Aula Mentor
De todas formas, el resultado sería en ambos casos si tenemos un dispositivo con An-
droid, parecido a esté, observa que si hay instalado más de un cliente de correo, solicita por cuál
deseamos mandar el email:
Arriba podemos ver el resultado ejecutado en un dispositivo real, un Smartphone Lenovo

A660 y abajo podemos ver en otro dispositivo real, un Windows Phone 520.
576
Enviar correo autónomamente desde el servidor.
Seguro que has entrado alguna vez a una página web y te has encontrado un formulario
para contactar o realizar algunas consultas y un botón para enviar el formulario. En determina-
das ocasiones, este “enviar” puede hacer acciones más complejas (agregar datos a base de datos,
log, consultas, estado actual pendiente, crear un ticket para hacer un seguimiento, etc). Pero en
la mayoría de los casos este tipo de formularios cuando pulsamos sobre el botón “enviar”, real-
mente lo que hace es mandar un correo electrónico con los datos del formulario a una dirección
dada.
Para poder hacer esto, el servidor tiene que tener la función mail para poder enviar co-
rreos directamente. La mayoría de los usuarios de Linux que estén usando su servidor Apache,
Mysql y PHP, no tendrán problemas ya que la función mail está integrada, y se puede usar de la
siguiente forma:
mail($para, $asunto, $mensaje, $cabeceras);
En el caso que no tengamos el servidor en linux o no tengamos configurado correcta-

mente el servidor para enviar correos electrónicos, podemos hacer que funcione usando otras
funciones externas.
Vamos a explicar la estructura que vamos a tener a nivel de archivos:
.. . . . . . . .
.. . . . . . . .
.. . . . . . . .
.. . . . . . . .
<form name=”formulario” action=”enviar.php” method=”post”>

//Recojo datos del formulario
.. . . . . . . .
.. . . . . . . . 577
.. . . . . . . .
.. . . . . . . .
.. . . . . . . .
.. . . . . . . .
</form>
//Mando el email con los datos recibidos
.. . . . . . . .
//Usando algún método de los que hay
.. . . . . . . .
.. . . . . . . .
.. . . . . . . .
.. . . . . . . .
Archivo index.html Archivo enviar.php
Cuando pulsemos para enviar el formulario, vamos a activar el action del formulario, en
este caso vamos a llamar al archivo enviar.php. Dentro del formulario tendremos los elementos
que deseemos (<input…, <textarea.., <select…etc). No debemos olvidar que para recoger los
datos del formulario debemos usar nombres adecuados en los elementos del formulario y evitar
caracteres especiales o acentos.
En el fichero index.html vamos a pedir en este ejemplo: nombre, apellidos, email y un

campo textarea para que escriba sus comentarios. Para ello, dentro del artículo vamos a agregar
el siguiente código:
Aula Mentor
. . .
<form method=”post” name=”formularioContactar” action=”enviar.php” id=”formularioContactar” >
<label for=”nombreContactar”>Introduce tu nombre</label>
<input type=”text” name=”nombreContactar” id=”nombreContactar” placeholder=”Introduce tu

nombre” required>
<label for=”apellidosContactar”>Introduce tus apellidos</label>
<input type=”text” name=”apellidosContactar” id=”apellidosContactar”

placeholder=”Introduce tus apellidos” required>
<label for=”mailContactar”>Introduce tu email</label>
<input type=”email” name=”mailContactar” id=”mailContactar” placeholder=”Introduce tu

email” required>
578
<label for=”comentariosContactar”>Comentarios</label>
<textarea cols=”40” rows=”10” name=”comentariosContactar” id=”comentariosContactar”

placeholder=”Comentarios” required></textarea>
<input type=”submit” name=”btnEnviar” id=”btnEnviar” value=”ENVIAR FORMULARIO”>
<input type=”reset” name=”btnreset” value=”Restaurar valores por defecto”/>
</form>. . .
Una vez realizado la apariencia debe ser parecida a ésta, como verás es una apariencia
adaptada al móvil y la verdad que el usuario puede manejar toda la información desde la misma
pantalla:

Como habíamos exigido que los campos estuvieran rellenos (añadiendo required al final
de cada campo), si pulsamos el botón del submit con los datos vacíos, nos irá apareciendo un
mensaje informándonos “Completa este campo”.
Cuando el usuario rellene todos los campos y pulse en botón Enviar Formulario, llama- 579
remos al fichero enviar.php que en este caso lo que hará será mostrar un documento HTML5, un
artículo con los datos que hemos recibido y hará una acciones para enviar un email. Para ello,
vamos a usar el código fuente de la librería que nos facilita PHPMailer, tienes la documentación
en https://github.com/PHPMailer/PHPMailer, pero de forma resumida lo que tendremos que
hacer es copiar unos archivos a nuestro proyecto. Desde el código PHP vamos a llamar a esos
archivos (con la funcion require de PHP) y posteriormente podremos usar la función mail en
nuestro proyecto con nuestra cuenta de correo. Esta función nos proporciona muchas opciones
y utilidades, pero en nuestro caso sólo al usarlo para enviar un correo con unos datos, vamos a
ver sólo la parte envío.
Tendremos que tener una cuenta de correo asociada de tipo POP3, SMTP para usar esta
clase, para hacer pruebas vamos a usar la siguiente:
Cuenta de correo: pruebas@aplicacioneswebmultiplataforma.es
Servidor POP3 : pop3.aplicacioneswebmultiplataforma.es
Servidor SMTP : smtp.aplicacioneswebmultiplataforma.es
Nombre de usuario : pruebas@aplicacioneswebmultiplataforma.es
Contraseña: usuariosaula
Para organizar un poco nuestro proyecto nos podemos crear una carpeta para este tipo
de utilidades, llamada correo y debemos agregar al inicio del fichero enviar.php, quedando de
la siguiente forma:
Aula Mentor
<?php
// Agregamos los requerimientos para mandar email
require (‘utilidades\correo\PHPMailer-completo\PHPMailerAutoload.php’);
….
….
Ya podemos usar nuestra clase, y sólo tenemos que ir rellenando los campos que necesi-
tamos para enviar el correo, que son: el email destinatario, el remitente, el asunto, el contenido,
archivos si fuera necesario, etc. El código correspondiente sería:
. . .
//Mostramos al usuario los datos que hemos recogido
echo ‘<h4>Datos enviados:</h4>
<h5>Nombre : ‘.$campoNombre.’.</h5>
<h5>Apellidos: ‘.$campoApellidos.’.</h5>
580 <h5>Mail: ‘.$campoMail.’.</h5>
<h5>Comentarios: ‘.$campoComentarios.’.</h5>’;
echo ‘<p>Vamos a proceder a enviar el email con tu consulta</p>’;
$mail = new PHPMailer;

$mail->isSMTP();
$mail->Host = ‘smtp.aplicacioneswebmultiplataforma.es’;
$mail->SMTPAuth = true;
$mail->Username = ‘pruebas@aplicacioneswebmultiplataforma.es’;
$mail->Password = ‘usuariosaula’;
$mail->From = ‘pruebas@aplicacioneswebmultiplataforma.es’;
$mail->FromName = ‘WEB: Aplicaciones Web Multiplataforma’;
$mail->addAddress(‘info@aplicacioneswebmultiplataforma.es’, ‘Contactar’);
$mail->AddReplyTo(‘pruebas@aplicacioneswebmultiplataforma.es’,’Usuario Web’);
$mail->WordWrap = 50;
$mail->isHTML(true);
$mail->Subject = ‘Escribe aqui el asunto’;
$mail->Body = ‘
<h4>Tienes un contacto desde la web AplicacionesWebMultiplataforma</h4>
<h5>Nombre: <i>’.$campoNombre.’</i></h5>
<h5>Apellidos: <i>’.$campoApellidos.’</i></h5>
<h5>Mail del usuario: <i>’.$campoMail.’</i></h5>
<h5>comentarios <i>’.$campoComentarios.’</i></h5>’;
$mail->AltBody = ‘Este es el cuerpo en texto plano para cliente que no soportan email con HTML:
Tienes un contacto desde la web AplicacionesWebMultiplataforma.\n
Nombre: ‘.$campoNombre.’\n
Apellidos: ‘.$campoApellidos.’\n 581
Mail del usuario: ‘.$campoMail.’\n
comentarios: ‘.$campoComentarios.’\n’;
if(!$mail->send()) {
echo ‘¡Atención! El mensaje no se ha podido enviar.’;
echo ‘Mailer Error: ‘ . $mail->ErrorInfo;
} else {
echo ‘Información recibida correctamente. Gracias por contactar con nosotros, le responde-
remos lo antes posible al email indicado.’;
. . .

Y en el dispositivo podemos rellenar el formulario y al darle ENVIAR FORMULARIO,

recibiremos el email en las direcciones indicadas e informará al usuario. En caso de ocurrir un
error también lo indicará:
Aula Mentor
Hemos usado una cuenta de destinatario para usar el correo electrónico info@aplica-
cioneswebmultiplataforma.es, en la cuenta que hayamos dado de alta recibiríamos el siguiente
mensaje:
582
Existen otras formas de enviar los formularios, muy usadas para dispositivos móviles,
sobre todo cuando las integramos en el propio dispositivo. Puedes usar archivos JSON para los
formularios enviar el formulario json_encode($datos) y posteriormente leer los datos.
Puedes ver el ejemplo completo en 07-correo/#mail
11. Transiciones.
JQuery Mobile nos ofrece unos efectos muy llamativos para hacer las aplicaciones cuan-
do cambiamos entre páginas. Estas transiciones utilizan CSS3 y están aceleradas por hardware
en la mayoría de los dispositivos. Como siempre, nos podemos encontrar dispositivos que no
funcionen correctamente o mejor dicho, no funcione con fluidez esperada o no se represente el
efecto directamente.
Depende de la aplicación y la página en concreto es conveniente usar, pero no abusar

de los efectos en ellas. Existen seis tipos diferentes de transiciones de páginas:
- Slide: Animación de derecha a izquierda.
- SlideUp: Animación de abajo arriba.
- SlideDown: Animación de arriba abajo.
- Pop: Animación crecerá desde un punto central hasta completar toda la

página.
- Fade: Realiza un fundido cruzado de la página antigua a la nueva.
- Flip: Realiza un efecto de rotación sobre la página. En algunos dispositivos

esta rotación será 3D, en otros será bidimensional.
Para usar las transiciones tenemos que usar el siguiente atributo:
data-transition: valor
Así para agregar un efecto de transición de una página llamada “pagina1” a otra página
llamada “pagina2” tendremos que usar:
<a href=”#pagina2” data-transition=”slide”>Página 2</a>
En el ejemplo que hemos usado en el curso, podemos agregar también efectos, debemos
recordar que debemos hacerlo en cada navegación de cada página. Por lo que el ejemplo base
583
podría ser:
. . .
<ul>
<li><a href=”#boton” data-icon=”home” data-

transition=”slide”>Botón</a></li>
<li><a href=”#listas” data-icon=”grid” data-

transition=”slideUp”>Lista</a></li>
<li><a href=”#tab-bar” data-icon=”star” data-

transition=”pop”>Tab</a></li>
<li><a href=”#form” data-icon=”info” data-

transition=”fade”>Form</a></li>
<li><a href=”#mail” data-icon=”mail” data-

transition=”slideUp”>Mail</a></li>
Aula Mentor
</ul>
</nav>
</footer>
. . .
Debemos recordar que dependiendo de la página que esté activa debemos usar: class=”ui-
btn-active ui-state-persist” en el elemento actual de la página para mostrar al usuario la página
activa actual.
Hay que intentar usar una consistencia en el uso de las transiciones, intentando no “ma-
rear” al usuario, y abusar de los efectos (no gana quien más efectos agregue). Intentad hacer
efectos elegantes y lógicos según la aplicación. En el ejemplo se han usado varios para que
puedas ver cómo se efectuarían, sólo eso.
En el caso de necesitar la transición inversa podemos usar:
data-direction=”reverse”
Por ejemplo si se usa un efecto para ir a otra página, si se dota de navegación a la página
anterior, ese enlace es el idóneo para invertir el efecto.
584 12. Temas personalizados.

Muchas veces queremos usar en nuestra aplicación unos colores y formas personalizadas
para diferenciar o relacionar el diseño con el contenido de la página. Para crear temas, jQuery
Mobile nos ofrece una herramienta gratuita y online para crear nuestros propios temas persona-
lizados.
Para empezar a diseñar nuestro propios esquemas debemos irnos a la página oficial:
http://jquerymobile.com/themeroller
Lo primero que debemos usar y diseñar el tema para nuestra versión de jQuery Mobile,
en nuestro caso hemos estado usando la versión 1.4.3, pero en caso de que estés usando otra la
puedes cambiar en la siguiente pestaña y elegir la deseada:
Y en la parte de la derecha podemos seleccionar las siguientes opciones:
Familia de fuentes.
El radio de las esquinas para los grupos de controles y

botones.
Las propiedades de los iconos.
Creación y ajuste de sombras.
Si nos fijamos en la parte superior nos aparecen diferentes letras: A, B, C, etc. Estas son
las opciones diferentes que podemos realizar para cada letra.
585
También podemos usar y aplicar colores muy rápidamente gracias al uso de Adobe Kuler
(http://kuler.adobe.com) donde con arrastrar el color elegido al elemento deseado, aplicará el
efecto.
1º Seleccionamos y 2º arrastramos a donde

queramos aplicar el color
Una vez seleccionado el color veremos cómo se aplica a ese tema:

Aula Mentor
Una vez terminemos de elegir y adaptar nuestro tema, sólo tenemos que:
- 1º Exportar el tema, seleccionando en la parte superior Download.
- Agregamos un nombre a nuestro tema (sin caracteres especiales).
- Seleccionamos y descargamos el zip.
586
En la ventana nos indica cómo usarlo, sólo debemos copiar el código correspondiente y
agregarlo a nuestra página y ya se aplicará a nuestra web.
Vamos a suponer que una empresa que se dedica a la venta de pollos de crianza nos
propone crear una web, claro está el color ideal para la mayoría del tema sería el amarillo. Si
adaptamos los elementos y temas para nuestra página web, observaremos que sin tener que
cambiar nada en nuestra aplicación tenemos un aspecto totalmente diferente. Nuestro <head></
head> respecto a definicion y lincado de archivos ha quedado de la siguiente forma:
. . .
<link rel=”stylesheet” href=”css/themes/mi-tema-amarillo.min.css” />
<link rel=”stylesheet” href=”css/themes/jquery.mobile.icons.min.css” />
<link rel=”stylesheet” href=”http://code.jquery.com/mobile/1.4.3/jquery.mobile.structure-1.4.3.min.

css” />
. . .
Debemos recordar que al fin y al cabo el tema serán unos archivos .css, con una confi-
guración y unos iconos en el caso de que hayamos decidido usarlo:
587
Tema por defecto Tema personalizado: mi-tema-amarillo
Como podrás observar, con pocos cambios y algunos detalles más podemos cambiar to-
talmente la apariencia de una aplicación y dar la sensación de más formal, informal o adaptada
al contenido de la aplicación.
Los temas que exportemos debemos guardarlos y no perder el archivo exportado, ya que
si queremos modificar en otro momento el tema y hemos modificado la estructura del archivo,
podemos volver a la misma página, importar el tema y seguir diseñando lo que creamos conve-
niente.
Al igual que pasaba en CSS3, debemos usar los temas y diseños personalizados sólo para
la apariencia y diseño, no para el posicionamiento de los elementos. Esto lo realizamos con la
semántica de nuestra aplicación.
Aula Mentor
13. Conmutar entre Web Normal/Multiplataforma.

Cuando estamos desarrollando un proyecto, tendremos dos páginas web, una página
web orientada para ordenadores personales, y otra para dispositivos con pantalla especial:
smartphone, smartTv, Tablet, etc.
Te estarás preguntado, pero bueno, si accedes a un página desde un PC o desde una

tablet, ¿cómo sabe mi aplicación web si estoy usando un dispositivo u otro? ¿y si quiero usar la
versión de PC desde mi tablet, porque me gusta más o suele estar más completa?
Bien, debemos siempre dar solución a estas preguntas. Normalmente tendremos un

dominio donde tendremos alojada nuestra página, al cual le añadiremos un subdominio o una
carpeta donde almacenaremos la web para dispositivos móviles.
www.midominio.com www.midominio.com
ARCHIVOS Y CONTENIDO ARCHIVOS Y CONTENIDO
DE LA PÁGINA WEB DE LA PÁGINA WEB
(HTML5, CSS3, JQUERY) JQUERY MOBILE

588
(Versión por defecto) (Versión por móvil)
Si nos fijamos podemos crear un subdominio llamado:
m.midominio.com
mobile.midominio.com
mobi.midominio.com
xxxxx.midomino.com
O crearnos una carpeta dentro del propio dominio, donde alojaremos la página:
www.midominio.com/m
www.midominio.com/mobile
www.midominio.com/mobi
www.midominio.com/xxxx
También se lanzó las extensiones específicas para dispositivos móviles, por lo que po-
dríamos contratar nuestro mismo dominio con la extensión .mobi, dejando para los dispositivos
móviles la siguiente dirección:
www.midominio.mobi
Realmente estas son formas de llamar o de cómo enlazar con nuestra web creada para
dispositivos móviles, lo que nos interesa realmente es saber que tendremos que tener en nuestro
servidor dos carpetas: una para la versión web estándar y otra para la móvil, posteriormente,
podremos acceder a ella de muchas formas (subdominio, carpeta o extensión del dominio).
Veamos que tenemos que hacer cuando entra una petición a nuestro servidor web de
un navegador solicitando información (acceder al index.html) de nuestro dominio principal, su-
pongamos que hemos decidido que vamos a crear una carpeta dentro de nuestro directorio de
nombre mobile, y ahí tendremos el proyecto que hemos creado:
589
Es recomendable dar la opción al usuario que ha entrado en la parte móvil, usar la pági-
na estándar, ya que normalmente las web móviles tienen menos contenidos, imágenes e incluso
acciones que las otras. Para ello, tendríamos que grabar de alguna forma una variable que nos
indique si va a ser móvil o web, un ejemplo podría ser el almacenamiento con localstorage o
sessionStorage. Otra forma sería usar variables de sesión en el navegador mediante PHP.
Para detectar si es un dispositivo móvil o no vamos a usar la variable User Agent en con-
creto sería: HTTP_USER_AGENT. Una vez hemos detectado qué sistema operativo es, podemos
hacer una redirección, mediante htaccess o mediante el lenguaje de programación PHP, con él
podemos capturar el navegador y la versión concreta que está accediendo.
Posteriormente tendríamos que comparar el resultado de esa variable con alguna lista,
base de datos o array donde tengamos aquellos navegadores que son candidatos a ser mostrados
como dispositivo móvil. Para ello, podemos usar la web:
http://www.aplicacioneswebmultiplataforma.es/
En la sección de utilidades nos podremos descargar una lista de alrededor 200 navega-
dores distintos, muchos son de ordenadores personales, otros son de smartphone, SmartTv, otras
de Tablets, etc.
Aula Mentor
Algunos ejemplos de captura de navegadores usando la variable HTTP_USER_AGENT

del navegador son los siguientes:
SmartTv
Mozilla/5.0 (SMART-TV; X11; Linux i686) AppleWebKit/535.20+ (KHTML, like Gecko) Version/5.0
Safari/535.20+
Smartphone
Mozilla/5.0 (Linux; U; Android 4.0.4; en-gb; Lenovo A660 Build/IMM76D) AppleWebKit/534.30

(KHTML, like Gecko) Version/4.0 Mobile Safari/534.30
Tablet
Mozilla/5.0 (iPad; CPU OS 7_1_2 like Mac OS X) AppleWebKit/537.51.2 (KHTML, like Gecko)
Version/7.0 Mobile/11D257 Safari/9537.53
PC (windows 7+Chrome)
Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chro-

me/37.0.2062.94 Safari/537.36
Si nos fijamos en la cadena de texto que nos devuelve muchos datos, y casi podemos
intuir el dispositivo del que se trata, fijemonos en la SmartTv, pone directamente el nombre.
590
Para mostrar y comprobar el navegador en el curso, entre las diferentes formas, vamos a
usar la opción de tener un fichero PHP por su simplicidad; usaremos para ello un fichero XML
(eXtensible Markup Language -lenguaje de marcas extensible-), que contendrá el listado de pa-
reja NAVEGADOR – VISTA.
Estarás pensando lo siguiente ¿y si el navegador es más moderno o no está en la lista?

aquí tenemos que tomar una decisión, en principio nosotros vamos a optar (debido a la temáti-
ca del curso) a usar siempre por defecto la versión mobile en caso de no estar indentificado el
navegador.
Sin profundizar mucho en los ficheros XML, vamos a resumir de forma informal que
los ficheros XML van a ser unos ficheros de texto plano que tiene una estructura concreta. Esta
estructura se puede trasladar a bases de datos, tablas, ficheros o comunicación entre programas.
Usa al igual que HTML etiquetas, unas serán de apertura y otras de cierre, y contienen una jerar-
quía, la cual corresponde a cada campo o nodo. A diferencia del HTML debes tener en cuenta
que XML sí va a distinguir entre mayúsculas y minúsculas (case sensitive) en las etiquetas, por
lo que debes tener cuidado para evitar errores.
Por ejemplo un XML sencillo podría ser:
<?xml version=”1.0” encoding=”UTF-8”?>

<personas>
<nombre>Antonio</nombre>
<dni>12345678</dni>
<nombre>Luis</nombre>
<dni>87654321</dni>
<personas>
Eso se podría corresponder a los siguientes datos, ya sea de un fichero, base de datos o
texto plano:
Tabla personas
nombre dni
Antonio 12345678
Luis 87654321
En nuestro caso vamos a almacenar dos campos:
useragent: donde vamos a almacenar la cadena completa que nos da el navegador. Es 591
importante comprobar que en muchos casos nos indica el dispositivo e incluso el modelo con-
creto. Por lo que tendremos un amplio abanico de opciones.
vista: donde vamos a indicar si para ese dispositivo vamos hacer la vista multiplatafor-
ma, que hemos adaptado para otros dispositivos (jQuery Mobile) o la (estándar/normal).
useragent vista
Mozilla/5.0 (Linux; U; Android 4.0.4; en-gb; multiplataforma
Lenovo A660 Build/IMM76D) AppleWeb-
Kit/534.30 (KHTML, like Gecko) Version/4.0
Mobile Safari/534.30
Mozilla/5.0 (Windows NT 6.1; WOW64) normal
AppleWebKit/537.36 (KHTML, like Gecko)
Chrome/37.0.2062.94 Safari/537.36
Mozilla/5.0 (iPad; CPU OS 7_1_2 like Mac OS multiplataforma
X) AppleWebKit/537.51.2 (KHTML, like Gec-
ko) Version/7.0 Mobile/11D257 Safari/9537.53
Mozilla/5.0 (SMART-TV; X11; Linux i686) multiplataforma
AppleWebKit/535.20+ (KHTML, like Gecko)
Version/5.0 Safari/535.20+
Mozilla/5.0 (Windows NT 5.1) AppleWe- normal
bKit/537.36 (KHTML, like Gecko) Chro-
me/36.0.1985.143 Safari/537.36
Aula Mentor
Mozilla/5.0 (Windows NT 5.1) AppleWe- desconocido

bKit/537.36 (KHTML, like Gecko) Chro-
me/33.0.1750.117 Safari/537.36
... ...
... ...
El fichero se llamará navegadores.xml y será una lista muy extensa con la siguiente es-
tructura:
<?xml version=”1.0” encoding=”utf-8”?>

<navegadores name=”navegadoresweb”>
<dispositivo name=”nav”>
<column name=”useragent”> </column>

592
<column name=”vista”> </column>
</dispositivo>
</navegadores>
Y para usarlo vamos a utilizar un archivo en lenguaje PHP. No es objetivo del curso el
conocimiento de este lenguaje, y no te has de preocupar si no entiendes totalmente el lenguaje,
ya que debes comprender que si no lo has visto nunca, es un lenguaje nuevo con sus peculia-
ridades. Este punto no se evaluará ni se tendrá encuenta en la nota, pero es preferible tener el
código para realizar la comutación de alguna forma. Se han agregado los comentarios al archivo
para comprender que se realiza en cada acción, de todas formas, debemos quedarnos con el
concepto global,es decir, vamos a usar un archivo, el cual va a leer el navegador actual, lo va a
comparar con un archivo XML y dependiendo de lo que nos devuelva este archivo, mostraremos
una página u otra.
No debemos olvidar que PHP es un lenguaje del lado del servidor, por lo que realmente
muestra al navegador lo que el servidor desee. Puede tener trozos de código HTML5 entremez-
clados con trozos de código de PHP. Para poder intercalar entre código PHP con código HTML5
tenemos que iniciar las siguientes etiquetas:
<?php
//Mi código PHP
?>
Y para escribir desde PHP código HTML5 tenemos dos opciones, cerrar la etiqueta con
?> o usar echo, que imprime o muestra el código al navegador.
Nosotros vamos a usar una función para que lea el navegador y la almacenaremos en
una variable del lado del servidor y además la grabaremos en la sesion del navegador. Le pon-
dremos de nombre modoNavegador y así en el caso que necesitemos preguntar o modificar de
nuevo, tendremos una variable creada. Si entramos en modo depurador del navegador podre-
mos comprobar que se ha creado correctamente, para ello, sólo hemos imprimido desde PHP el
código siguiente:
echo ‘
<script>
sessionStorage.setItem(“modoNavegador”,”’.$vistaDevuelta[‘vista’].’”);
</script>’;
Donde $vistaDevuelta[‘vista’] es la variable de tipo PHP que almacena el resultado de- 593
vuelto de leer el fichero XML, y lo guardaremos por si en un futuro lo necesitamos.
El codigo completo del fichero que realiza la conmutación de un modo a otro sería el
siguiente:
<?php
//Recogemos el valor de la variable HTTP_USER_AGENT donde está almacenado el valor del navegador
$infoAgent=$_SERVER[‘HTTP_USER_AGENT’];
/* Función que busca dentro del fichero XML y devuelve el modo de vista.
Valores posibles: normal, multiplataforma o desconocido

Aula Mentor
Nombre del fichero: navegador.xml en la misma carpeta que este fichero
*/
function dame_vista_dispositivo($variableNavegador){
//Valor por defecto en caso de no encontrar el valor en el fichero
$vistaDevuelta = array(‘vista’ => ‘desconocido’, ‘encontrado’ => false);
/* Se puede cargar el fichero de varias formas usando:
- new SimpleXMLElement
- simplexml_load_file(fichero)
*/
//$navegadores = new SimpleXMLElement(‘navegador.xml’, NULL, TRUE);
$navegadoresXML = simplexml_load_file(‘navegadores.xml’);
594 $encontrado=false;
// Recorremos el arbol del fichero XML
foreach($navegadoresXML->children() as $nodo){
/*
$nodo->useragent: Valor del navegador
$nodo->vista: Valor de la vista
*/
if($variableNavegador == $nodo->useragent){
$vistaDevuelta[‘vista’] = $nodo->vista;
$vistaDevuelta[‘encontrado’] = true;
//Creamos una variable de sesion por defecto almacenaremos si es versión móvil o normal.
//lo haremos a nivel de sesión con sessionStorage
//Puedes ver que se ha creado debes entrar en modo desarrollo en el navegador
echo ‘
<script>
sessionStorage.setItem(“modoNavegador”,”’.$vistaDevuelta[‘vista’].’”);
</script>’;
return $vistaDevuelta;
?> 595
Y a partir de ahora como hemos cerrado la etiqueta de PHP, podemos escribir directa-
mente el código HTML5.
<!DOCTYPE html>
<head>
<title>Módulo jQueryUI</title>

<script type=”text/javascript” src=”js/jquery-ui.js”></script>

Aula Mentor
<link rel=”stylesheet” type=”text/css” href=”css/jquery-ui.css”>

<script type=”text/javascript” src=”js/miarchivojquery.js”></script>
</head>
<body>
<section>
<article>
<h4> Estamos comprobando tu dispositivo, serás redireccionado automáticamente en unos

segundos. </h4>
<h4> De todas formas si quieres acceder manualmente puedes usar la versión que desees.
Versión PC o Multiplataforma</h4>
<h3>Tu dispositivo es: </h3>
<p> <?php echo $infoAgent; ?> </p>
596 <h4>Buscando navegación por defecto de tu dispositivo</h5>
<h3>La navegación de tu dispositivo es: <i>
Y como vamos a usar datos y código PHP, volvemos a escribir código:
<?php
$valorDevuelto = dame_vista_dispositivo($infoAgent);
if($valorDevuelto[‘encontrado’] == true){
echo “<h3>Hemos encontrado tu dispositivo en nuestra base de datos, la

navegación será <b>”.strtoupper($valorDevuelto[‘vista’]).”</b></h3>”;
if($valorDevuelto[‘vista’] == ‘normal’){
//Es un PC, lo redirigimos a la versión normal pasados 10 segundos
echo ‘<meta http-equiv=”refresh” content=”10;URL=pc.html” />’;
}else{
//Es un dispositivo móvil o desconocido, lo redirigimos a la versión mobile pasados 10s
echo ‘<meta http-equiv=”refresh” content=”10;URL=mobile/index.html” />’;

}else{
echo “<h3>NO hemos encontrado tu dispositivo en nuestra base de datos, la navegación por
defecto será <b>MULTIPLATAFORMA</b></h3>”;
echo ‘<p id=”contadorAtras”>10</p>’;
?>
Y ya podemos continuar con nuestro código en HTML5:
</h3>
<br>
<h3>ELIGE LA VERSIÓN QUE DESEAS MANUALMENTE</h3>

597
<a href=”pc.html”>VERSIÓN PC</a><a href=”mobile/index.html”>MULTIPLATAFORMA</a>
</article>
</section>
</body>
</html>
También hemos usado un contador hacia atrás, de forma opcional para informar al usua-
rio, pero como nosotros ya sabemos que con jQuery podemos hacer una cuenta atrás modifi-
cando el valor del texto que se muestra al inicio:
echo ‘<p id=”contadorAtras”>10</p>’;
Si recordamos en jQuery podemos seleccionar el identificador y hacer lo que deseemos,

por ejemplo si usamos la función setTimeOut que vimos en módulos anteriores, podemos llamar
a una función pasada un tiempo.
Además hemos usado también unos botones para dar la opción al usuario de elegir qué
versión quiere ver NORMAL o MULTIPLATAFORMA, en nuestro caso hemos usado jQueryUI, y
para ello hemos usado el método .button(), quedando el código de mi archivo con los script
jQuery miarchivojquery.js de la siguiente forma:
Aula Mentor
//Usamos jqueryUI, llamando al método button para que
//los elementos tomen apariencia de botón
$( “input[type=submit], a, button” ).button()
var i = 9;
var tiempo=1000;
//LLamamos a la función actualizaContador2() pasado el tiempo “tiempo”
//así cambiamos la primera iteracción con la función.
setTimeout(function() {actualizaContador2()}, tiempo);
598 //Esta función va a restar una unidad y esperar un intervalo
function sigueRestando(){
j= i;
i--;
console.log(“Sigo restando, Intervalo=”+tiempo+”, Entrada=”+j+”, Salida=”+i);
setTimeout(function() {actualizaContador2()}, tiempo);
//Esta función actualiza el valor del texto con el valor dado
//en la variable i
function actualizaContador2(){
$(“#contadorAtras”).text(i);
console.log(‘Actualizo valor del contador: ‘+i);
if(i!=1){
sigueRestando();
}else{
console.log(‘Contador ha llegado al final -> Realizo acción’);
Hemos mostrado por consola varios mensajes para ayudar a la compresión de las fun-
ciones y métodos que hemos usado para realizar la cuenta atrás, recuerda que para verlos debes
entrar y usar el modo depurador del navegador.
Puedes ver el ejemplo en 09-switch/ 599
14. Resumen.
- Al igual que con jQuery UI teníamos unos métodos y temas predefinidos orientados para las
páginas web, con jQuery Mobile tendríamos lo mismo pero orientado para dispositivos mó-
viles. Podríamos decir que jQuery Mobile “es un sistema unificado de interfaces de usuario
para todas las plataformas populares de dispositivos móviles, creado sobre los sólidos funda-
mentos de jQuery y jQueryUI. Su ligero código se desarrolla usando la mejora progresiva, y
posee un diseño flexible al que es fácil aplicar temas”.
Aula Mentor
- La estructura básica de jQuery Mobile se basa en roles de los elementos, temas y al igual
que pasaba con HTML5 tendríamos una zona de navegación, donde en un mismo archivo
podemos contener varias páginas gracias al método data-role=”page”.
- Podemos crear botones usando data-role=”button”, iconos prefabricados con data-icon y

personalizados gracias a la clase ui-icon.
- Para las listas tenemos muchas opciones, desde la lista básica a divididas, filtrar texto de la
lista o listas compuestas. Todas éstas se pueden usar gracias al data-role = “listview” y junto
con data-icon=”edit”, data-filter=”true o la clase class=”ui-li-icon” respectivamente.
- Para crear nuestras pestañas o tabs, tenemos que usar data-role=”tabs” y para navegar po-
dríamos usar <div data-role=”navbar”>.
- Respecto a los formularios se podría tratar de forma muy similar a como hemos usado en
HTML5. En concreto si el formulario consiste en enviar un correo electrónico, hay que revi-
sar qué sistema operativo tiene el servidor y configurar que éste mande correos electrónicos.
Para esta función podremos ayudarnos de PHP y de la librería PHPMailer.
- Para la transición entre páginas usaremos data-transition: podemos usar diferentes efectos:
Slide: Animación de derecha a izquierda. SlideUp: animación de abajo arriba. SlideDown:
animación de arriba abajo. Pop: animación crecerá desde un punto central hasta completar
toda la página. Fade: realiza un fundido cruzado de la página antigua a la nueva. Flip: ro-
tación sobre la página, efecto 3D.
600 - Cuando dispongamos de dos páginas web, una para dispositivos con pantalla grande o
estándar y otra para móviles o multiplataforma, tendremos que tener un método para que
nuestra aplicación automáticamente se dirija hacia una u otra página, ya sea un subdominio,
subcarpeta o dirección concreta. También tendremos que dar la opción en el caso de usar
multiplataforma usar la web estándar.
Unidad 10. Introducción al desarrollo de
aplicaciones multiplataforma
1. Introducción.
Existen muchas marcas de dispositivos, y cada una con su propio sistema operativo, éstas
además tienen aplicaciones para dar más servicios a sus usuarios. El problema viene del lado
del desarrollador, ya que cada sistema operativo ha apostado por un lenguaje y por una forma
de programar:
Sistema operativo Lenguaje

Android Java 601
http://developer.android.com/index.html
iOS/OSX (Iphone, Ipad…etc) Objective-C inicialmente y desde junio 2014
Apple ha sacado un nuevo lenguaje para pro-
gramar en iOS/OSX llamado swift.
https://developer.apple.com/swift/
Blackberry Blackberry OS, mezcla de varios lenguajes
QML, ,Javascript, HTML5…etc.
http://developer.blackberry.com/html5/
Windows Phone C# y Visual Studio, puedes descargarte todas
las herramientas de éste blog
http://blogs.msdn.com/b/ricardoj/archi-
ve/2012/07/12/desarrollo-de-aplicaciones-pa-
ra-windows-phone-herramientas.aspx
Symbian OS C++ con el Framework Qt o J2ME.
Aunque podemos pensar que este sistema

operativo está olvidado, para ciertas aplicacio-
nes y sobre todo al existir en el mercado to-
davía muchos dispositivos con Symbian, PDA
y dispositivos con Windows Mobile sigue te-
niendo sus desarrolladores.
Aula Mentor
HTML5, JavaScript y CSS3.
WebOS Sistema desarrollado por Palm Inc, y orienta-

do para los dispositivos móviles, televisiones
inteligentes (smartTv) y tabletas Touch Pach
de HP.
http://enyojs.com/
Como podemos ver, para hacer aplicaciones para los diferentes lenguajes tenemos que
dominar diferentes lenguajes, y eso sólo para la realización de las aplicaciones en los dispo-
sitivos. Si somos trabajadores de una empresa y ésta tiene página web, y además quiere tener
aplicación web para dispositivos móviles, más su aplicación para los dispositivos, tendremos que
saber, aún más lenguajes de programación.
Lo bueno que con todo lo que hemos visto en el curso tenemos un % muy alto para
desarrollar su aplicación web, la aplicación web para dispositivos móviles y tenemos una buena
base para la programación de aplicaciones en los dispositivos multiplataforma, aquellos dispo-
sitivos que se basen en HTML5, CSS3, Javascript o jQuery.
Además, existen diferentes Framework que intentan unificar la mayoría de las aplicacio-
nes partiendo de un lenguaje común y la tendencia debido a la tendencia de unificar el progra-
mador web con el programador de aplicaciones, es usar un lenguaje adaptado a él, siendo el
más extendido el que hemos aprendido en el curso.
602
2. Visión general de los Framework Existentes.
Como hemos comentado anteriormente, por el bien de los desarrolladores, existen di-
ferentes Framework llamados multiplataforma, ya que ofrecen la posibilidad de exportar a dife-
rentes sistemas (Android, App Store, etc) partiendo de un solo proyecto.
Vamos a ver las de todas éstas, las que están más orientadas según el perfil que hemos
recibido en el curso:
PhoneGap es un framework para el desarrollo de aplicaciones móviles producido por

Nitobi, y comprado posteriormente por Adobe Systems. Principalmente, PhoneGap permite a
los programadores desarrollar aplicaciones para dispositivos móviles utilizando herramientas
genéricas tales como JavaScript, HTML5 y CSS3. Las aplicaciones resultantes son híbridas, es
decir que no son realmente aplicaciones nativas al dispositivo (ya que el renderizado se realiza
mediante vistas web a través del navegador del dispositivo y no con interfaces gráficas especí-
ficas de cada sistema), pero no se tratan tampoco de aplicaciones web (teniendo en cuenta que
son aplicaciones que son empaquetadas para poder ser desplegadas en el dispositivo incluso
trabajando con el API del sistema nativo).
En la tercera versión de PhoneGap se incorpora el uso de una interfaz de comandos a

través de consola, una nueva arquitectura de complementos descentralizados y la posibilidad de
utilizar un código web unificado para crear múltiples proyectos.
Puedes encontrar todo el material de desarrollo en su página web: http://phonegap.

com/ . Este framework es el más indicado inicialmente según nuestro conocimientos adquiridos,
ya que la mayoría se basa en aplicaciones web, y de eso, ya tenemos los conocimientos.
Titanium Studio es otro framework, es un producto de Appcelerator Inc. y por tanto

un entorno de desarrollo de código libre para codificación de aplicaciones multiplataforma para
dispositivos móviles, y junto con la Plataforma Appcelerator, una suite de software y librerías en
la que se basa el desarrollo, testeo, análisis, depuración y despliegue de tales aplicaciones. 603
Las aplicaciones desarrolladas con esta tecnología se basan en el lenguaje Javascript,
lenguaje que hemos visto en el curso y tenemos un conocimiento extenso. Con el uso de una
API propia de la plataforma, la interpretación del código, se basa en el motor V8 Javascript en-
gine de Google. Los componentes usados en la interfaz de usuario coinciden con los nativos de
cada dispositivo, es decir, no se basan en la aplicación web del dispositivo, sino que pasan a ser
nativas del dispositivo.
Toda la documentación y software necesario lo podemos obtener de su página web:

http://www.appcelerator.com/ Comentar que para desarrollar aplicaciones con este framework
para Iphone es necesario tener instalado OSX 10.8 como mínimo, ya que usa Xcode. No podrás
ejecutar ni emular, a día de la escritura de este manual, aplicaciones Iphone desde Windows.
Como hemos visto en el curso, con jQuery UI y jQuery mobile podemos desarrollar apli-
caciones web, ver cómo quedan en el dispositivo y luego junto con PhoneGap poder exportarla
a la plataforma que deseemos:
http://demos.jquerymobile.com/1.1.0/docs/pages/phonegap.html
Aula Mentor
También podemos usar otras plataformas como Sencha Touch 2, que están basadas al
igual que PhoneGap en HTML5.
Es otro Framework basado en HTML5. Sencha Touch es una interfaz de usuario (UI)
de la biblioteca JavaScript, construido específicamente para la Web Móvil. Puede ser utilizado
por desarrolladores web para desarrollar interfaces de usuario para aplicaciones web móviles
para que se vean y se asemejen a aplicaciones nativas en dispositivos móviles compatibles. Está
basado completamente en estándares web como HTML5, CSS3 y JavaScript. Sencha Touch tiene
como objetivo permitir a los desarrolladores el crear rápida y fácilmente aplicaciones móviles
basadas en HTML5 que funcionan en los dispositivos Android, iOS, Windows Tizen y BlackBe-
rry, y producir una experiencia nativa-app-como dentro de un navegador.
Este Framework también es muy recomendado según el perfil que hemos adquirido en
el curso, ya que tenemos todos los conocimientos importantes para desarrollar aplicaciones ba-
sadas en aplicaciones web.
3. Introducción para el empaquetado multiplataforma.

604 Siempre que hablamos de aplicaciones para dispositivos móviles, solemos asociar éstas a
una tienda en concreto, por ejemplo seguro que al menos conoces Google Play Store (Android)
y App Store (Apple).
Una vez que hemos desarrollado nuestra aplicación web, podemos distribuir ésta en las
distintas tiendas, pero para ello, antes de hacerlo, debemos empaquetar nuestra aplicación, es
decir, copiar nuestros archivos (HTML, JavaScript, CSS y jQuery Mobile) en proyectos diferentes
y crear estructuras concretas para cada plataforma.
Comentar que desde el W3C (World Wide Web Consortium es una comunidad interna-
cional que desarrolla estándares que aseguran el crecimiento de la Web a largo plazo) están
trabajando en un estándar para empaquetar aplicaciones Web para su distribución. El grupo es
Native Web apps y puedes obtener más información en:
http://www.w3.org/community/native-web-apps/
Cuando empaquetamos una aplicación Web como una aplicación nativa, tenemos la ca-
pacidad de acceder a algunas API nueva que no suelen estar en HTML5, como son acceder a la
lista de contactos, tomar una foto y guardarla en la galería y otros sensores de última generación
(detectar mirada para iniciar/parar la ejecución de un vídeo, capturar huella dactilar, aceleróme-
tro, etc).
Para empaquetar la aplicación Web tenemos varias opciones:
* Crear un proyecto nativo para cada plataforma, añadir los archivos de nuestra aplicación web
como recursos locales y utilizar un componente Web View para asociarlo a nuestro contenido
HTML. Por ejemplo, crearíamos un proyecto para Android con Eclipse, le agregamos los archivos
correspondientes (HTML, CSS, JS, etc) y creamos un componente Web View, copiamos index.
html en la carpeta assets/www y se cargaría como una aplicación como tal. Este tipo de aplica-
ciones se llaman aplicaciones híbridas, porque existe una parte nativa y otra en modo apli-
cación web. Por ello debemos conocer el SDK (software development kit) de cada plataforma
(iOS, Android, etc) y agregarle los archivos que hemos creado, como es de suponer esta opción
requiere mucho conocimiento, y en determinadas ocasiones, un dispositivo Mac para poder
exportar a Iphone.
* Utilizar directamente una plataforma oficial de aplicaciones Web, y directamente desde ahí nos
ofrece la posibilidad de exportar nuestros proyectos a un archivo .zip (tipo PhoneGap). Empa-
quetandolo correctamente.
* Utilizar un entorno nativo, creando por tanto aplicaciones nativas, que nos permita compilar
nuestra aplicación para varias plataformas (tipo Titanium Studio).
Una vez hemos decidido cómo lo vamos a realizar, debemos conocer la distribución en
las distintas tiendas:
Tienda Dueño Plataforma Formato Coste URL

Google Play Google Android apk Pago único http://play.goo-
20$ gle.com/apps/
publish
AppStore Apple IOS (Iphone, Ipa 99$ anual http://develo-
iPod, iPad) per.apple.com/
programs/ios
605
AppWorld RIM Blackbe- Smartphone / cod/bar Gratis http://
rry PlayBook appworld.black-
berry.com/isv-
portal
Amazon Amazon Android / apk 99$ anual http://develo-
AppStore Kindle Fire p e r. a m a z o n .
com
Nokia Store Nokia Symbian/N9 Wgz/deb/bar 1€ http://info.pu-
blish.nokia.com
Marketplace Microsoft Windows 99$ anual http://create.
Phone msdn.com
Existen otras tiendas donde podemos distribuir nuestra aplicaciones, aunque no son
muy conocidas, (ya que la mayoría de los usuarios usan la tienda que le trae cada dispositivo),
aunque el mercado de éstas van creciendo, y podemos destacar entre otras: AndroidPit, SlideMe,
GetJar (la primera que lanzó el Angry Birds), apps.opera.com, etc.
También tendremos que tener en cuenta que nuestra aplicación debe tener:
- Un icono en alta resolución para que se agregue a las apps del dispositivos.
- Un texto con la descripción.
- Clasificación de la categoría de la aplicación.

Aula Mentor
- Idioma que permite la aplicación, mínimo (Inglés, Castellano).
- Compatibilidad con los dispositivos.
- Capturas de pantalla de cada plataforma.
- Los banners publicitarios en caso de existir.
4. Monetización de las aplicaciones. Consejos.

Se ha incluido este apartado porque como hemos observado en el punto 3 sobre el
empaquetado de las aplicaciones, necesitamos pagar para varias tiendas, además, emplear un
tiempo considerable en la creación del proyecto (análisis, diseño, implementación, depuración,
pruebas y mantenimiento a posteriori).
Es necesario por tanto obtener de alguna forma, una repercusión monetaria de todo ese
esfuerzo, y debemos volver hacer un análisis del estado actual y las tendencias.
¿En qué plataforma de empleo hay más esfuerzo y tiempo?
Debemos ser fríos y calculadores, pensando para qué mercado voy a desarrollar y cuánto
tiempo me va emplear la adaptación, o en que tiendas voy a empezar a trabajar. En optimiza-
ción, calidad y cuando tenemos dudas sobre qué decidir, existe un teorema que es el “teorema
de Pareto”. Consiste en la relación 80-20 o 20-80. Es decir, tenemos que abordar el 80% del
606 problema (¿Qué tienda o plataforma?) con el 20% del esfuerzo. Por lo que mi recomendación,
tanto para el desarrollo de aplicaciones como para otras dudas respecto a decisiones, siempre
es abordar el máximo de aplicaciones que abarque el 80% de las tiendas o dispositivos.
Es posible que otra gente piense, ¿no es mejor apostar por un sitio donde no haya tantas
aplicaciones y opciones? Efectivamente, podíamos emplear el 80% del esfuerzo en el 20% de
las tiendas o dispositivos. El problema viene cuando te pagan por cada descarga (si haces una
app de pago) o por publicidad, ¿dónde tendríamos más posibilidad de tener más descargas? Eso
no quita, que si disponemos de tiempo, primero nos centremos en las que ocupen un % mayor
(Android e iOs) y posteriormente las adaptemos para las demás plataformas.
También debemos preguntarnos, ¿vamos hacer nuestra aplicación de pago, gratuita con
publicidad, o subvencionada a través de otros medios? ¿parte gratuita (demo) y aplicación com-
pleta de pago? ¿incialmente gratuita y pasado un tiempo de pago? Sería cuestión de analizar
todas estas preguntas y finalmente decidir la mejor estrategia dependiendo de la plataforma a
desarrollar.
En internet podemos encontrar muchas comparativas y estadísticas donde nos podemos

hacer una idea de qué camino coger. Algunas pueden ser:
Varios artículos con comparativas y número de aplicaciones, descargas, etc.
http://appleinsider.com/
Estadísticas sobre aplicaciones de Android y sus dispositivos.
http://www.appbrain.com/stats/stats-index
También Google nos ofrece otra plataforma donde nos recomienda cómo monetizar
nuestras aplicaciones:
http://www.google.es/ads/admob/monetize.html
Web que nos ofrece desde estadísticas hasta monetización:
http://www.inmobi.com/monetize/
Otra forma de monetizar las aplicaciones puede ser diferente, no tan directa, pero sí
puede ser un proyecto a medio o largo plazo. Serían las siguientes:
- Desarrollar aplicaciones para empresas. Debido al perfil adquirido en el curso, pode-

mos realizar paquetes integrales a empresas, ya que no todo el mundo sabe realizar una web
estándar, una web para dispositivos móviles y además tu aplicación para Android, Iphone,
etc.
- Desarrollar aplicaciones para promoción interna. Es decir, muchas veces en vez de

tener una repercusión económica directa, sí puede ser una forma de entrar en el mercado,
promocion profesional propia y puede ser que alguna empresa le guste tu aplicación y como
trabajas. Por tanto, puede ser la “llave” para un cambio profesional importante. Está demos-
trado que “una imagen vale más que mil palabras”, de cara a una entrevista, un aumento de
sueldo o promoción interna en la empresa privada, siempre va a tener más valor si enseñas
lo que eres capaz de hacer, que si “cuentas lo que eres capaz hacer”.
Por tanto, independientemente de la opción que elijas, te aconsejo que desarrolles un 607
buen proyecto final en este curso y éste sea útil, tanto personalmente como profesionalmente.
Realiza una buena página personal, con su parte móvil o incluso una aplicación. Tanto si deseas
recibir dinero por ellas, como si quieres demostrar lo que eres capaz hacer, tienes que tener algo
tangible que mostrar. Así que, ¡ánimo y a por tu proyecto!
¿Qué aplicación he de realizar?
Bueno, toda aplicación es válida mientras que sea buena y útil para el usuario. Debes
ser innovador y también debes intentar hacer aplicaciones para el usuario, a no ser que sea ese
el objetivo no hacer aplicaciones para uno mismo. Con esto me refiero que debes ver cómo se
usan la mayoría de la aplicaciones y siempre aclarar, no hacer retos al usuario en la navegabili-
dad.
Como caso real, comentar el de unos desarrolladores que realizaron una web tan inno-
vadora que el 80% de los usuarios no sabían manejarla, no encontraban el menú de navegación,
básicamente porque no se sabían cómo iniciar la navegación, y con la rapidez que hoy en día
lleva el usuario casi todos la desestimaron, pensaron que estaba en obras o de mantenimiento.
Ser innovador, es crear cosas nuevas, mejores a las que hay, no peores. Este grupo de desarro-
lladores hicieron una web para ellos, y no pensarón en el perfil de sus usuarios, posteriormente
tuvieron que modificar la estructura.
Te debes preguntar: ¿Qué perfil van a tener mis usuarios?
Debes tener en cuenta el perfil de tus usuarios y adaptarte a ellos, por ejemplo si es una
aplicación para personas mayores, por ejemplo, tendrás que estudiar su perfil, tener en cuenta
poner las opciones grandes, con grandes botones y que se vean sobre todo bien, obviando más
Aula Mentor
los efectos y más la efectividad y claridad.
También debes pensar que no sólo las personas de habla hispana van a poder acceder
a tu aplicación, piensa que si tienes una página web, o realizas una aplicación existe un gran
número de usuarios potenciales que pueden ser de habla inglesa, y si tienes la posibilidad de
hacer la traducción, puede tener mayor repercusión, cambiando solo el texto base.
¿Qué tengo que tener en cuenta cuando realice mi aplicación web?
Si realizas tu aplicación no debes olvidar que en algunos dispositivos, como por ejemplo
el iPhone, no tiene botón atrás, y como en algún punto olvides esto, puedes dejar al usuario en
un “punto muerto” sin poder avanzar ni retroceder.
Debes intentar hacer tu diseño basado en % lo máximo posible, porque así se adaptará
tanto a un dispositivo de pantalla grande, como a uno de pantalla pequeña, recuerda lo que
comentamos sobre Responsive Web Design.
Cuando estés desarrollando aplicaciones móviles, debes evitar abrir páginas externas
desde tu aplicación, ya que perderás el control de la misma y tendrás problemas para ello, ya
que si la estas desarrollando con el webview, usando archivos locales cargados en tu dispositivo,
no podrás acceder a ellos, y en el caso de que pudieras, si estás con un Iphone, a lo mejor esa
web externa no tiene la opción de vuelta atrás, y si la tiene, no va a ser nunca a tu archivo local.
¿Puedo crear juegos con este tipo de aplicaciones web?
608 Puedes crear juegos que no requieran de mucho procesamiento gráfico, memoria o cpu,
ya que es posible que no vaya igual de fluida que una aplicación nativa, pero ¡ojo! puedes hacer
infinidad de juegos del tipo: tres en raya, trivial o cualquier aplicación de preguntas y respuestas,
ahorcados, apalabrados, busca minas, dale al topo, puzzle, brain training, etc. Como podemos
trabajar con gráficos 2D y código HTML5, básicamente podemos hacer cualquier aplicación que
se nos ocurra, crear botones personalizados y tendrá éxito mientras que sea divertida para el
usuario y disfrute de la aplicación.
¿Quieres saber más sobre los juegos?
Una de las formas más usuales de llamar a los usuarios es crear juegos, y como cada
vez los usuarios empiezan con una edad más temprana, existe una gran demanda de esta cate-
goría de aplicaciones, tanto web como para móviles como para tablets. Existe un gran mercado
de Framework, la mayoría de pago para crear tus propios juegos incluso con HTML5. Están en
constante evolución, pero podríamos mencionar los siguientes:
- GameSalad Creator http://gamesalad.com/
- Isogenic Engine http://www.isogenicengine.com/
- Akihabara http://www.kesiev.com/akihabara/
- Game Closure http://gameclosure.com/
- Cloud Mach (3D Gaming Cloud PLatform) http://cloudmach.com/
- LimeJS http://www.limejs.com/
- Construct 2 http://www.scirra.com/construct2
- Game Maker HTML5 http://www.yoyogames.com/make
- ImpactJS http://impactjs.com
- Box2d JS http://box2d-js.sourceforge.net/
¿Empiezo ya a programar?
Rotundamente NO. En general no se debe empezar ningún proyecto sin haber realiza-
do un gran análisis de todo. Tristemente, la mayoría de las veces cuando se habla de crear un
proyecto web, lo primero que hace la mayoría de la gente, es abrir el block de notas y empezar
<html><head>….etc . Es un error muy importante y cometido muy a menudo, en vez de pasar
directamente a la implementación, es necesario realizar un gran análisis previo, coger un papel
y un lapiz (porque te puedes equivocar y siempre se puede rectificar) o cualquier otro sistema y
hacer un diseño junto con un estudio previo. Mínimo debes responderte las siguientes pregun-
tas: ¿qué quiero hacer? ¿cómo lo quiero hacer? ¿cómo lo voy a desarrollar? ¿qué tiempo le voy
a emplear? ¿cuál es el perfil de los usuarios? ¿en qué navegadores o dispositivos me voy a cen-
trar? Conforme empieces a desarrollar tu historyboard, verás que te surgirán más preguntas, y
pensarás, si hago esto así me ahorro parte de código y además, puedo ampliarla si en un futuro
fuera necesario.
¿Aplicación individual o proyecto colectivo?
Depende de la envergadura del proyecto, de tu tiempo libre y de las ganas que tengas 609
de formar un proyecto colaborativo, tendrás que responderte a esta pregunta.
Por ejemplo, en una aplicación pueden existir muchas secciones que son muy importan-
tes, divisibles y que a simple vista puede no tener importancia. Imaginemos que vamos hacer
una aplicación para niños entre 2 y 5 años. Sería muy interesante a nivel pedagógico tener una
persona experta en el desarrollo evolutivo del niño, comprender la evolución y cómo puede ser
realmente atractiva, beneficiosa y constructiva. También, necesitarás de una persona encargada
del diseño, la combinación de colores, la usabilidad, y el formato que se le va a dar, otra de
la parte propia de la implementación, y dependen de la necesidad es posible necesitar incluso
gente experta en servidores, seguridad, bases de datos, etc.
He visto a personas de forma individual crear proyectos propios muy interesantes y gra-
cias a que han tenido la posibilidad de dedicarle muchas horas, han realizado un trabajo mag-
nífico. Pero no debes desechar de primera instancia pertenecer a algún proyecto colaborativo
algún día, independientemente que por ti mismo estés creando otro. Seguro que éste te aportará
mucho beneficio y si no estás acostumbrado a trabajar en equipo, descubriras sus beneficios y
sus resultados.
5. Limitaciones y tendencias.
Es necesario comentar que existe diferencia entre las aplicaciones nativas y las aplica-
ciones web creadas por los medios que estamos comentando. Debes saber que los dispositivos
tienen un hardware (parte física del dispositivo, cpu, memoria, etc) y un sistema operativo que
interactúa con el hardware. Las aplicaciones nativas, se integran dentro del sistema operativo
y pueden interactuar con él, por ejemplo: usar los sensores internos, detectores luminosidad,
batería, estado de cpu o memoría libre, etc.
Aula Mentor
Todas estas acciones no las podremos hacer sin ayuda de algún Framework intermedio,
pero si es verdad que la tendencia es que se vaya abriendo más la posibilidad de unificar todo y
finalmente se pueda programar con estos lenguajes a un nivel más bajo. Para ello, los framework
multiplataforma realizarán un trabajo mayor y convertirán en nativas o híbridas, lo que tan sen-
cillamente hemos realizado nosotros con HTML5, CSS3, JavaScript o Jquery Mobile. Tendrán una
forma de acceder al código nativo, que el framework automáticamente convertirá en código
nativo.
Pero a no ser que necesites usar el hardware del propio dispositivo a un nivel muy extre-
mo o alguna funcionalidad nativa del dispositivo, podrás desarrollar una gran cantidad de apli-
caciones multiplataforma, de una forma muy rápida, con un lenguaje en su mayoría conocido
y si eres cuidadoso en el diseño, es posible que la mayoría de los usuarios no distingan en una
aplicación web o una aplicación nativa.
610

Desarrollo de Aplicaciones Web Multiplat

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Desarrollo de Aplicaciones Web Multiplat

Cargado por

Copyright:

Formatos disponibles

Desarrollo de Ministerio

Edición y maquetación de contenidos

Diseño gráfico e imagen

2. Estructura del curso..........................................................................................................21

1.1. Esquema y elementos necesarios de la web........................................................28

1.2. Estructura de directorios en el servidor web........................................................32

2. Diferencias entre HTML5 y versiones anteriores...........................................................34

3. Preparando el entorno de desarrollo..............................................................................35

3.1. Editor de textos.......................................................................................................35

3.1.1. Instalación de Sublime Text 2 para Windows..............................................36

3.1.2. Instalación de Sublime Text 2 para MAC.....................................................39

3.1.3. Instalación de Sublime Text 2 para Linux....................................................39

3.1.5. Más utilidades de Snippet.........................................................................43

3.2. Servidor de aplicaciones web............................................................................48

3.2.1. Instalación de Wamp (Windows 7)..........................................................48

3.2.2. Instalación de Lamp (Linux Ubuntu).......................................................55

3.2.3. Instalación de Mamp (MAC).....................................................................58

3.3. Navegador y emulador de dispositivos............................................................61

Unidad 2: Webs con HTML5..............................................................................65

1.1. Cabeceras, navegación, pie de página y Anexos.............................................65

1.6. Formateado de textos........................................................................................85

1.7. Saltos de línea.....................................................................................................86

1.8. Elementos separadores......................................................................................87

1.9. Sección y artículos..............................................................................................88

1.10. Enlaces e hipervínculos....................................................................................91

1.10.1. Enlaces a una página local......................................................................91

1.10.3. Enlaces al interior de la página.....................................................................95

1.10.4. Enlaces a una dirección de correo electrónico............................................98

1.10.5. Enlaces a un archivo....................................................................................100

1.10.6. Enlaces a elementos de bloque...................................................................101

2.1. Insertar imágenes...................................................................................................102

2.2. Insertar audio y vídeo............................................................................................106

2.2.1. Insertar Audio.................................................................................................106

2.2.2. Insertar Vídeo.................................................................................................108

3.2.1. Campos de texto.............................................................................................119

3.2.2. Campos de texto para contraseñas................................................................122

3.2.3. Áreas de texto.................................................................................................122

3.2.4. Listas desplegables..........................................................................................124

3.2.5. Botones de selección única............................................................................127

3.2.6. Botones de selección múltiple.......................................................................128

3.2.7. Botón de envío...............................................................................................129

3.2.8. Botón de reset.................................................................................................130

3.2.10. Campos ocultos.......................................................................................132

Unidad 3. Elementos avanzados con HTML5....................................................136

1.1. Script y NoScript...............................................................................................136

1.2. Drag and Drop..................................................................................................142

1.3. Diseño 2D. Canvas............................................................................................147

1.3.1. Trazar una línea.........................................................................................148

1.3.2. Trazar un rectángulo.................................................................................155

1.3.3. Trazar formas geométricas........................................................................158

1.3.4. Agregar texto.............................................................................................162

1.3.5. Agregar sombreados.................................................................................164

1.3.6. Agregar imágenes......................................................................................167

1.4.2. Protección de la privacidad......................................................................178

1.4.4. Localización en un mapa..........................................................................183

1.4.5. Seguimiento de los desplazamientos.......................................................189

1.5.1. Temporal o de sesión.....................................................................................191

2. Estructura de una web con CSS3 y modelo de cajas......................................................205

3.2. Internos. ..................................................................................................................209

5. Reglas de estilo y selectores.............................................................................................215

5.1. Selector de elemento..............................................................................................215

5.2. Selector de ID.........................................................................................................216

5.3. Selector de Clase.....................................................................................................219

5.4. Jerarquía entre selectores.......................................................................................222