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

Respuesta desde 173.194.34.215: bytes=32 tiempo=67ms TTL=56

Respuesta desde 173.194.34.215: bytes=32 tiempo=66ms TTL=56

Respuesta desde 173.194.34.215: bytes=32 tiempo=66ms 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>

<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->

<tabTrigger>resultados</tabTrigger>

<!-- Optional: Set a scope to limit where the snippet will trigger -->

<!-- <scope>source.python</scope> -->

</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>

<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
 Aula Mentor

<tabTrigger>contrato</tabTrigger>

<!-- Optional: Set a scope to limit where the snippet will trigger -->

<!-- <scope>source.python</scope> -->

</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 insta-
lació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>

<!-- Abrimos la etiqueta de la página -->

<html lang="es">

<!-- Definimos el head -->

<head>

<title> Título de la página </title>

<meta charset="utf-8" />

</head>

<!-- Definimos el body -->

<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:

<!-- Abrimos la etiqueta de la página -->

Este tipo de etiquetas <!--TEXTO --> 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

<!-- Definimos el head -->

<head>

<meta charset="utf-8" />

</head>

<!-- Definimos el body -->

<body>

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

</body>

</html>
 Aula Mentor

<html lang="es">

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:

<meta charset="utf-8" />

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&oacute;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:

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

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>

<!-- Abrimos la etiqueta de la página -->

<html lang="es">

<!-- Definimos el head -->

<head>

<meta charset="utf-8" />

</head>

<body>

<header>

<!-- Añadimos un título de nivel 1 -->

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

74
</header>

<nav><!-- Añadimos una lista de elementos -->

<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>

<h2>Título de nivel 2</h2>

<h3>Título de nivel 3</h3>

<h4>Título de nivel 4</h4>

<h5>Título de nivel 5</h5>

<h6>Título de nivel 6</h6>

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>

<li>Elemento 2.</li>
79
<li>Elemento 3.</li>

</ol>

<li>Unidad 2</li>

<ol type="a" start="4">

<li>Elemento 1.</li>

<li>Elemento 2.</li>

<li>Elemento 3.</li>

</ol>

<li>Unidad 3</li>

<ol type="I">

<li>Elemento 1.</li>

<li>Elemento 2.</li>
 Aula Mentor

<li>Elemento 3.</li>

</ol>

<li>Unidad 4</li>

<ol type="i" reversed>

<li>Elemento 1.</li>

<li>Elemento 2.</li>

<li>Elemento 3.</li>

</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>

Practica intentando imitar el resultado sin usar el código del archivo.

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>

<dd>Descripción 2</dd>

<dt>Término 3</dt>
83
<dd>Descripción 3</dd>

</dl>

<dl>

<dt>h1</dt>

<dd>Títulos de nivel 1</dd>

<dt>h2</dt>

<dd>Títulos de nivel 2</dd>

<dt>h3</dt>

<dd>Títulos de nivel 3</dd>

<dt>h4</dt>

<dd>Títulos de nivel 4</dd>

<dt>h5</dt>

<dd>Títulos de nivel 5</dd>

 Aula Mentor

<dt>h6</dt>

<dd>Títulos de nivel 6</dd>

</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>

Practica intentando imitar el resultado sin usar el código del archivo en el ejemplo 1.

Debe parecerse a la siguiente captura de pantalla, dependiendo del navegador:

 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>

Practica intentando imitar el resultado sin usar el código del archivo en el ejemplo 1.

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>

Practica intentando imitar el resultado sin usar el código del archivo en el ejemplo 1.

Debe parecerse a la siguiente captura de pantalla, dependiendo del navegador:

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>

<html lang="es">

<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>

Practica intentando imitar el resultado sin usar el código del archivo.

Debe parecerse a la siguiente captura de pantalla, dependiendo del navegador:

 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:

<!-- Enlace nos lleva al hacer clic a la página web externa, en este caso la de Google -->

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

<!-- Enlace nos lleva al hacer clic a la página web local, en este caso a otra página llamada contac-
tos -->

<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

ctos

f="
.ht

co
"em
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 pode-
mos 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>

<li><a href="#capitulo2">Capitulo 2</a></li>

<li><a href="#capitulo3">Capitulo 3</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>

<a id="capitulo2"></a>

<h3> Capítulo 2</h3>

97
<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 índice de capítulos</a><hr>

</article>

<article>

<a id="capitulo3"></a>

<h3> Capítulo 3</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>
 Aula Mentor

<a href="#listado_capitulos">Ir al indice de capítulos</a><hr>

</article>

</section>

Comprueba el ejemplo 2/#listado_capitulos.

Debe parecerse a la siguiente captura de pantalla, dependiendo del navegador:

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:[email protected]">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-
[email protected] 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
[email protected]?subject=Email recibido desde mi página web&[email protected]">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>

<p> Para descargarte la información puedes pinchar

<a href="descargas/imagen_para_descargar.jpg">aquí</a></p>

<p> Para descargarte la información puedes pinchar

<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>

<meta charset="utf-8" />

<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:

FORMATO DESCRIPCIÓN
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

Celda 4 Celda 5 Celda 6
Celda 7 Celda 8 Celda 9

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>

<td>Celda 17</td><td>Celda 18</td><td>Celda 19</td><td>Celda 20</td>

</tr>

<tr>

<td>Celda 22</td><td>Celda 23</td><td>Celda 24</td><td>Celda 25</td>

</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.

Celda 1 Celda 2 Celda 3

Celda 4 Celda 5 Celda 6

Celda 7 Celda 8 Celda 9

Celda 1 Celda 2 Celda 3

<colgroup>

116 <col span="1" style="background-

color:#8db3e2">

<col style="background-color:green">

</colgroup>

Celda 4 Celda 5 Celda 6

Celda 7 Celda 8 Celda 9

Celda 1 Celda 2 Celda 3

Celda 4 Celda 5 Celda 6
Celda 7 Celda 8 Celda 9

<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

Celda 7 Celda 8 Celda 9 Celda 10 Celda 11 Celda 12

Celda 13 Celda 14 Celda 15 Celda 16 Celda 17 Celda 18

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
117
a 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 cuan-
do el usuario envíe el formulario, es-
tas acciones pueden ir desde enviar mail
(action="mailto:nombrecorreo@nombredo-
minio), de forma interna con (action=""), o si
tenemos un archivo ya sea local o en internet,
podríamos poner: (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:

Atributo Descripción
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>

Practica intentando imitar el resultado sin usar el código del archivo en el ejemplo 4.
 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íamos
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:

Atributo Descripción
name Nombre que va a distinguir unívocamente a
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>

<input type="submit" value="Enviar Datos">

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=" ".

Atributo Descripción
name Nombre que va a distinguir unívocamente a
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>

<input type="submit" value="Enviar Datos">

</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>

<form action="recogidadedatos.php" method="get">

<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>

<input type="submit" value="Enviar Datos">

</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>

<form action="recogidadedatos.php" method="get">

<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>

<input type="submit" value="Enviar Datos">

</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:

<form action="recogidadedatos.php" method="post">

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:

Atributo Descripción
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:

<form action="recogidadedatos.php" method="post">

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 <but-
ton 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 cosas 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:

<form action="recogidadedatos.php" method="post">

Nombre: <input type="text" name="nombre" value="" placeholder="Introduce tú nombre"><br>

DNI: <input type="text" name="dni" value="" placeholder="Introduce tú dni"><br>

<!-- AHORA LAS VARIABLES OCULTAS -->

<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:

<script type="text/javascript">

Le comunicamos a nuestro navegador que vamos a usar un script de tipo "text/javascript"

function muestraVentana() {

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>

<html lang="es">

<head>

<meta charset="utf-8" />

<title>Script en HTML5</title>

<script type="text/javascript">

function muestraVentana() {

alert('Soy una ventana!');

</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 type="text/javascript">

function muestraVentana() {

alert('Soy una ventana!');

</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

<!--[if IE 6]>

<SCRIPT LANGUAGE="JavaScript">

alert("Estas usando Internet Explorer 6, este navegador es del 27 de agosto de 2001….");

</SCRIPT>

<![endif]-->

<!--[if IE 7]>

<SCRIPT LANGUAGE="JavaScript">

alert("Estas usando Internet Explorer 7, este navegador es de 2006…..");

</SCRIPT>

<![endif]-->

<!--[if IE 8]>

<SCRIPT LANGUAGE="JavaScript">

142 alert("Estas usando Internet Explorer 8, este navegador es de 2009…...");

</SCRIPT>

<![endif]-->

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>

<html lang="es">

<head>

<meta charset="utf-8" />

<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>

<html lang="es">

<head>

<meta charset="utf-8" />

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 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>

<script type="text/javascript">

//Preparamos el lienzo y el contexto donde vamos a dibujar

var canvas = document.getElementById("milienzo");

var contexto = canvas.getContext("2d");

contexto.beginPath();
 Aula Mentor

//Seleccionamos donde va a partir nuestro gráfico

contexto.moveTo(0,0);

contexto.lineTo(175,175);

//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:

contexto.moveTo(0,350);

contexto.lineTo(150,150);

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 partir nuestro gráfico

contexto.moveTo(0,350);

//Seleccionamos donde va a finalizar nuestra línea

contexto.lineTo(150,150);

//Nos desplazamos al siguiente punto

contexto.lineTo(350,350);

//Agregamos la "tinta a nuestro dibujo

contexto.stroke();

Y el resultado sería:

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 id="milienzo" width="10px" height="10px" 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>

<script type="text/javascript">

//Preparamos el lienzo y el contexto donde vamos a dibujar

var canvas = document.getElementById("milienzo");

var contexto = canvas.getContext("2d");

contexto.beginPath();

//Seleccionamos donde va a partir nuestro gráfico

contexto.moveTo(3,8);

//Seleccionamos donde va a finalizar nuestra línea

contexto.lineTo(8,2);
152
//Agregamos la "tinta a nuestro dibujo

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.beginPath();

contexto.moveTo(100,100);

contexto.strokeStyle = "blue";

contexto.lineWidth= 30;

contexto.lineCap= "butt";

contexto.lineTo(300,100);
 Aula Mentor

contexto.stroke();

contexto.beginPath();

contexto.moveTo(100,200);

contexto.strokeStyle = "blue";

contexto.lineWidth= 30;

contexto.lineCap= "round";

contexto.lineTo(300,200);

contexto.stroke();

contexto.beginPath();

contexto.moveTo(100,300);

154 contexto.strokeStyle = "blue";

contexto.lineWidth= 30;

contexto.lineCap= "square";

contexto.lineTo(300,300);

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:

//Seleccionamos donde va a partir nuestro gráfico

contexto.moveTo(100,100);

//Nos vamos hacia la derecha, nos desplazamos por el eje x

contexto.lineTo(300,100);

//Nos vamos hacia abajo, nos desplazamos por el eje y

contexto.lineTo(300,300);

//Nos vamos hacia la izquierda, nos desplazamos por el eje x

contexto.lineTo(100,300);

//Nos vamos hacia arriba, nos desplazamos por el eje y

//encontrándonos con el valor que hemos definido anteriormente

contexto.lineTo(100,100);
 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).

//Preparamos el lienzo y el contexto donde vamos a dibujar

var canvas = document.getElementById("milienzo");

var contexto = canvas.getContext("2d");

//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.

var canvas = document.getElementById("milienzo");

var contexto = canvas.getContext("2d");

contexto.fillRect(100,50,200,120);

El resultado sería el siguiente:

 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:

//Preparamos el lienzo y el contexto donde vamos a dibujar

var canvas = document.getElementById("milienzo");

var contexto = canvas.getContext("2d");

//Definimos un tamaño para la línea

contexto.lineWidth = 2;

contexto.beginPath();
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:

//Preparamos el lienzo y el contexto donde vamos a dibujar

var canvas = document.getElementById("milienzo");

var contexto = canvas.getContext("2d");

//Definimos un tamaño para la línea

contexto.lineWidth = 2;

//Preparamos los estilos de la línea y relleno

 M1. HTML5

contexto.strokeStyle = "red";

contexto.fillStyle = "#aabbcc"

contexto.beginPath();

//Definimos nuestro círculo

contexto.arc(200,200,150,0,2*Math.PI, true);

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:

//Preparamos el lienzo y el contexto donde vamos a dibujar

var canvas = document.getElementById("milienzo");

var contexto = canvas.getContext("2d");

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

Propiedad Descripción
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 ();

contexto.lineWidth = 2;

//Preparamos los estilos de la línea y relleno

contexto.fillStyle = "#aabbcc"

contexto.beginPath();

//Definimos nuestro círculo

 M1. HTML5

contexto.arc(200,300,70,0,2*Math.PI, true);

//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>

<html lang="es">

<head>

<title>Canvas en HTML5</title>

<meta charset="utf-8" />

<script type="text/javascript">

function midiseño(){

// Asociamos el lienzo a la variable canvas

var canvas = document.getElementById("milienzo");

var contexto = canvas.getContext("2d");

//Nos declaramos una variable que contendrá la imagen para poder procesarla

168 var img = new Image();

//Enlazamos nuestra variable con la ruta donde está la imagen

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>

<!-- Cargamos en el onload (cuando se cargue la página) la función mi diseño -->

<body onload="midiseño()">

<canvas id="milienzo" width="400px" height="400px" 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>

<img src="images/logo_html5.png" style="visibility: hidden;">

</body>

</html>

Y el resultado sería:

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:

……..

<script type="text/javascript">

function midiseño(){

// Asociamos el lienzo a la variable canvas

171
var canvas = document.getElementById("milienzo");

var contexto = canvas.getContext("2d");

//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 = '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.beginPath();

//Definimos nuestro círculo

contexto.arc(198,155,5,0,2*Math.PI, true);

contexto.arc(217,155,5,0,2*Math.PI, true);

contexto.fill();

172 //dibujamos la nariz

contexto.beginPath();

contexto.strokeStyle = "white";

contexto.lineWidth= 5;

contexto.moveTo(207,160);

contexto.lineTo(207,168);

contexto.stroke();

//dibujamos la sonrisa

contexto.beginPath();
 M1. HTML5

contexto.fillStyle = "white"

contexto.arc(207,170,12,0,Math.PI, false);

contexto.fill();

} //fin de la función

</script>

</head>

<!-- Cargamos en el onload (cuando se cargue la página) la función mi diseño -->

<body onload="midiseño()">

<canvas id="milienzo" width="400px" height="400px" style="border:1px solid blue">

Hemos detectado que tu navegador no soporta la etiqueta canvas, le recomendamos que actualice la versión 173
de su navegador para disfrutar totalmente de esta web….

</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.drawImage(img,centroX,centroY);

contexto.rotate(15*Math.PI/180);

contexto.drawImage(img,centroX,centroY);

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

if (navigator.geolocation) {

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(){

if (navigator.geolocation) {

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.

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
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
 M1. HTML5

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
navegador continúe abierto, mientras que con sessionStorage estarán solo disponibles mientras
la ventana que los creó no es cerrada. 191

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>

<html lang="es">

<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(){

var clave=document.getElementById('clave').value;

var valor=document.getElementById('valorClave').value;

//Agregamos el ítem a nuestro sessionStorage

sessionStorage.setItem(clave,valor);

//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):

var clave=document.getElementById('clave').value;

var valor=document.getElementById('valorClave').value;

<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:

sessionStorage.setItem(clave,valor);

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.