¿En cada página debo agregar un archivo multimedia?.

Si, estamos probando archivos multimedia en la web con HTML5. Para ello debemos usar la etiqueta "audio" y "video" y por supuesto agregar algún archivo de cada tipo. Debes tener en cuenta que en conjunto, una vez comprimida la carpeta para realizar la entrega de la actividad, no ocupe más de 20MB, sino tendrás que realizar la entrega por otros medios (wetransfer, drive, dropbox...etc).

Se un poco de CSS, ¿puedo usarlo para que quede más bonita la actividad?.

Si, si quieres puedes hacerlo, aunque en principio la idea es ir progresivo y no se exige ningún adorno ni hoja de estilo.

Puedo ver mi página desde otro sitio que no sea mi ordenador.

Si, puedes arrancar el servidor web en tu pc, configurar el acceso remoto y poder probar tu aplicación web desde el móvil, otro PC, o incluso un smart TV. El problema suele estar en saber darle los permisos al servidor para que acceda.

No me entero muy bien de usar la forma absoluta o relativa para las imágenes, archivos..etc.

Usar los directorios y trabajar de forma relativa o absoluta es vital, tener dudas aquí no es malo, pero avanzar si es un problema. Esas dudas no son triviales y luego tienes problemas en los servidores por no entender las cosas bien.

Te adelanto que la forma absoluta se explica porque se debe explicar, pero no es lo más correcto y lo vas a entender, funciona en tu ordenador, pero si eso lo subes a un servidor real fallara el 80%, ¿por qué?

Mira esta es mi ruta por ejemplo de los ejemplos:

D:/wampServer/www/EJEMPLOS/MOD1.HTML5/U02/Ejemplo2/index.html

es decir mi servidor mirará a partir del www, que es lo que significa poner la /.

Imagina que me vas a entregar la actividad 1, y has estado trabajando directamente en www, pues tendrás:

www/actividad1_1/index.html

Y yo reviso las actividades en una carpeta específica, concretamente:

www/alumnos/revision/

Y si copio tu actividad1_1 a mi carpeta...será algo así

www/alumnos/revision/actividad1_1/index.html

Bien, y si tu por ejemplo has puesto un enlace a otro archivo o imagen a partir de /www/actividad1_1/img/logo.jpg, en mi ordenador o si lo cambias de sitio fallará porque en mi servidor no tengo esa estructura y dirá...¿Dónde está esa imagen?.

Si das MAC, Linux o simplemente has organizado tu servidor y carpetas de otra forma, se va todo al garete, es decir todas los enlaces imágenes...etc cuando yo vaya a revisarlas van a fallar.

Por tanto de la forma absoluta la vamos a conocer pero nos vamos a olvidar. Siguiendo el ejemplo anterior y usando forma relativa no va a fallar porque es relativa a ese archivo (el que lo llama) en este caso el index.html y sus imágenes, es decir, en el index, si la carpeta img está en su mismo nivel tendré que poner en la ruta o src:

forma absoluta que falla /actividad1_1/img/logo.jpg

forma relativa que funciona independientemente y es hasta más corto.

<img src="img/logo.jpg" ...

Bien, ahora vamos a imaginar que mañana te dice tu jefe que vamos a poner la web en español e inglés, y tu habías realizado todo de forma absoluta...ahora todo tiene que ser del estilo:

www.tudominio.es/es para español y www.tudominio.es/en para inglés, de forma absoluta tendrás que cambiar todas las rutas de TODOS los archivos, imágenes, archivos js...etc.

Vamos a ver otro ejemplo más al respecto. Vamos a suponer que tenemos el ejemplo anterior de los idiomas, y queremos optimizar aún más los archivos, y no copiar dos veces todo, sino reutilizar la misma imagen para español (es) y para inglés (en).

www.tudominio.es/img/ estarán las imágenes y luego www.tudominio.es/es/index.html y www.tudominio.es/en/index.html para inglés, recuerda que cuando trabajamos en nuestro ordenador, la carpeta www, sería lo que subimos a nuestro dominio web en la nube, es decir, www es www.tudominio.es por eso en todas las actividades se obliga a poner esa estructura.

Para retroceder si estoy en index.html en español o inglés tendré que poner de forma relativa al padre ../, porque desde index.html, tendré que retroceder una vez:

www.tudominio.es/es/index.html para acceder a www.tudominio.es/img/logo.jpg tengo que dar un paso atrás, para seleccionar la imagen, tendré que poner:

<img src="../img/logo.jpg"....

Vamos a poner un ejemplo para situarnos, en la carpeta principal o www tenemos varias carpetas:

/img
/audio
/video
/js
/css
/utilidades
/accesocliente/index.html
/index.html

eso son carpetas en ese nivel, y ahora tenemos un archivo index.html que muestra la página principal, pero podemos tener otro index en otro nivel, por ejemplo, si quiero acceder desde /index.html al logo, sería directamente img/logo.jpg

<img src="img/logo.jpg.... (no ponemos la barra, ya que si poner la barra partiría desde el inicio y ya sabemos el problema de acceder si cambiamos de ruta o simplemente ponemos en el futuro algo de idioma. El problema es que en tu casa o servidor te va a funcionar de las dos formas:

<img src="img/logo.jpg".... y <img src="/img/logo.jpg" son el mismo archivo, y te va a funcionar independientemente.

¿cómo puedo detectar que lo he realizado bien? muy fácil, dentro de carpeta pruebas, una vez hayas terminado la actividad, copia esa carpeta tal cual ahí, si todo te funciona igual, está bien (porque has puesto todo de forma relativa) si cuando compruebas que

www/pruebas/actividad1_1 te falla, ya sabes que te has equivocado, ¿Dónde?, pulsa F12, pestaña consola y verás los link que te fallan.

Bueno, siguiente con el ejemplo de la ruta de directorios, para acceder al logo desde el archivo index.html principal sería:

<img src="img/logo.jpg....

y desde /accesocliente/index.html tengo que subir al escalón del padre, por lo que subo una vez con ..

<img src="../img/logo.jpg....

Si lo pones de forma absoluta sería <img src="/img/logo.jpg.... pero cuando copies el ejemplo a la carpeta pruebas, te fallará porque la ruta ahora es <img src="/pruebas/img/logo.jpg....

Esto paso no solo con las imágenes, sino también con los archivos de cualquier tipo, por lo que debes tener mucho cuidado con este tipo de cosas.

Por ejemplo para acceder a un archivo en js sería similar a lo del logo...pero como prueba de fuego es esa, crearte una carpeta distinta dentro de su servidor, copiar todo lo que estás haciendo ahí y ver que te funciona, si te falla a tí, me fallará a mí o si lo subes a un servidor.

Debes recordar que en el manual hay ejemplo de archivos de audio y video. Puedes usarlo como base e incluso usar los mismos archivos de ejemplos que se dan. Aunque también se hacen amenas las entregas con vuestras aportaciones.

En el envío del formulario no olvides lo que se ha comentado anteriormente, lo repito porque suele ser el error más común:

• Hay dos ficheros, donde está el formulario con el nombre del fichero que haya en el action, debe coincidir con el fichero destino, en este caso el "recogidadedatos.php" o el nombre que hayáis decidido (no cambiéis el interior del mismo)
• Debes alojar tu proyecto dentro de la carpeta www o httpdocs, dependiendo del servidor que hayas instalado
• Debes tener activo y lanzado el servidor web, esto es: que se ejecute sin problemas
• Debes acceder por el navegador escribiendo localhost, ¡nunca pinchando directamente sobre el archivo desde el explorador de archivos! A veces te funcionará, pero cuando haya algo de PHP fallará. Por eso es bueno acostumbrarse a trabajar siempre en la carpeta www, de hecho, las entregas de todas las actividades se obliga para que toméis conciencia de eso mismo.

Se descolocan los elementos del tren conforme los voy colocando, no se vé como en la actividad.

No te preocupes, esto es porque los elementos se distribuyen según su espacio, y al cambiarlo pierde ese espacio. No es importante, y cuando lleguemos al módulo de CSS3 entenderás porqué pasaba eso, así que nada, si solo te ha faltado eso, puedes entregar la actividad.

No funciona bien cuando pinto los elementos en el canvas.

Existe un orden para hacer las cosas, a veces se nos pueden ocurrir otras formas de agregar las cosas, pero normalmente hay que entender el modo en el que funciona cada elemento y luego reproducirlo. Para esto, es bueno coger y entender los ejemplos del curso.

No me agrega las imágenes en el canvas.

Recuerda que debes tener agregada la imágenes dentro del body y luego relacionarlas. Es decir, primero las agregamos dentro del body:

<body>

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

Aquí le hemos puesto "hidden" para que no se vea, pero el navegador ya la tiene cargada. Luego ya dentro del script la podemos referenciar

var img = new Image();

Ya podemos enlazamos nuestra variable con la ruta donde está la imagen para pintarla en nuestro canvas

img.src = 'images/logo_html5.png'

Puedo ver mi página desde otro sitio que no sea mi ordenador.

Si, puedes arrancar el servidor web en tu pc, configurar el acceso remoto y poder probar tu aplicación web desde el móvil, otro PC, o incluso un smart TV. El problema suele estar en saber darle los permisos al servidor para que acceda.

---

Sección drag & drop

---

Coloca dentro del <body> de forma ordenada lo siguiente:

<div class="via" id="hueco1" ondrop="soltar(event)" ondragover="soltando(event)"> </div>

<div class="via" id="hueco2" ondrop="soltar(event)" ondragover="soltando(event)"> </div>

Y así con todos los huecos, luego hay que preparar los elementos imagen

<img class="tren" id="v1" src="img/vagon1.jpg" draggable="true" ondragstart="arrastra(event)">

<img class="tren" id="v2" src="img/vagon2.jpg" draggable="true" ondragstart="arrastra(event)">

Y luego dentro del head, tenemos que controlar los elementos

<script>

function soltando(ev){ev.preventDefault();}

function arrastra(ev){ev.dataTransfer.setData("Text",ev.target.id);}

function soltar(ev)

{

ev.preventDefault();

var data=ev.dataTransfer.getData("Text");

ev.target.appendChild(document.getElementById(data));

}

</script>

---

Sección mapas

---

Las cosas han cambiado y ahora google usa un modo de desarrollador, te voy a explicar como sería, pero siempre puedes usar o insertar un mapa de google como un iframe. Esta segunda opción a veces es la más recomendable y rápida, te dejo un link o enlace donde se explica (PULSA AQUÍ), de todas formas, según hemos visto en el curso tendríamos que hacer esto:

En el encabezado, head de la página

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

  // Intentar 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 real: longitud '+position.coords.longitude+' y latitud '+position.coords.latitude
      });

      map.setCenter(pos);
    }, function() {
      handleNoGeolocation(true);
    });
  } else {
    // Navegador no soporta la geolocalización
    handleNoGeolocation(false);
  }
}

//manejar los errores
function handleNoGeolocation(errorFlag) {
  if (errorFlag) {
    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(position.coords.longitude, position.coords.latitude),
    content: content
  };

  var infowindow = new google.maps.InfoWindow(options);
  map.setCenter(options.position);
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>

Dentro del body iría algo parecido a esto

<div id="map-canvas"></div>

---

Sección almacenamiento

---

Dentro del head tendríamos que hacer algo parecido a esto

<script>

// Definimos las variables
	var clave = "";
	var valor = "";
	var cuantos = 0;

// Esta función mostrará los registros que se vayan almacenando
	function cuantosReg()
	{
		cuantos = localStorage.length;
		document.getElementById("numRegistros").innerHTML='
Registros almacenados: '+cuantos+'
';
	}

// Función para añadir un nuevo item Nombre/Teléfono
// Las variables clave y valor reciben los datos del formulario
	function nuevoItem()
	{
		var clave=document.getElementById('nombre').value;
		var valor=document.getElementById('telefono').value;
// Almacenamos
		localStorage.setItem(clave,valor);
// Ejecutamos la función para actualizar el número de registros
		cuantosReg();
// Informamos al usuario de que hemos añadido un nuevo registro y los datos del mismo
		alert("Se ha introducido el siguiente registro:\n\rNombre: "+clave+"\n\rTeléfono: "+valor);
	}

// Función para rescatar los datos
	function dameItem()
	{
		var clave=document.getElementById('nombre').value;
// Cargamos el contenido del teléfono
		var valor=localStorage.getItem(clave);
// Si el nombre no existiese la variable "valor" correspondiente al teléfono sería null, comprobamos este punto para dar una respuesta u otra
		if (valor)
		{
			document.getElementById("tomaTef").innerHTML='
Teléfono: '+valor+'
';
		}
		else
		{
			document.getElementById("tomaTef").innerHTML='
El usuario solicitado no existe
';
		}
		
	}

// Función para borrar un registro
	function borraItem()
	{
		var clave=document.getElementById('nombre').value;
// Antes de borrar almacenamos el valor del número de teléfono en esta variable para poder dar un aviso al usuario
		var tefborrado=localStorage.getItem(clave);
// Además nos sirve para comprobar si es null o no, es decir, si el registro que pretendemos borrar existe o no, y damos una respuesta según sea.
		if (tefborrado)
		{
// Si el teléfono existe borramos el registro e informamos al usuario
			var valor=localStorage.removeItem(clave);
			cuantosReg();
			alert("El siguiente registro ha sido eliminado:\n\rNombre: "+clave+"\n\rTeléfono: "+tefborrado);
		}
// En caso contrario avisamos al usuario de que el registro no existe
		else
		{
			document.getElementById("borraTef").innerHTML='
El usuario solicitado no existe
';
		}
	}

// Formulario que se carga mediante el botón de "Introducir Datos"
	function formNuevoTef()
	{
		document.getElementById("contenedor").innerHTML='
Introduce Nombre y Teléfono
Nombre:
Teléfono:
';
	}

// Formulario que se carga mediante el botón de "Consultar Datos"
// En mitad del mismo hemos metido un "div" que recogerá los avisos se las funciones
	function formDameTef()
	{
		document.getElementById("contenedor").innerHTML='
Introduce Nombre para saber el teléfono
Nombre:
';
	}

// Formulario que se carga mediante el botón de "Borrar Datos"
// Igual que en el anterior, hemos intercalado un "div" para recoger eventuales avisos
	function formBorraTef()
	{
		document.getElementById("contenedor").innerHTML='
Introduce Nombre para eliminar
Nombre:
';
	}

// La siguiente línea es para que se cargue al inicio de la carga de la página y así, cuando se cargue aparecerán los registros que había cargados.
window.onload=cuantosReg();
</script>

Dentro del body tendríamos que hacer algo parecido a esto