Introducción

En este módulo vamos a introducirnos en todo lo referente a HTML5, consta de 3 unidades. Te recomiendo que no te saltes ningún apartado o lo des por sabido, muchas veces nos encontramos con problemas por pensar que siempre se hace igual, y a veces se hace parecido o diferente.

Unidad 1. Introducción e instalación del entorno del trabajo

Aquí lo que debemos de tener en cuenta que existen muchas versiones y con lo rápido que avanza la tecnología, es posible que la versión del curso no corresponda exactamente igual a la que haya para descargar. Recomiendo encarecidamente, que mientras se pueda usar las del curso es mejor, ya que tanto las capturas de pantalla como los ejemplos están realizados para los del manual. De todas formas, se adjuntas las preguntas más usuales

No me arranca el servidor web (wamp, xamp, lamp...etc), no se pone en "verde" o "activo".

El problema puede pasar por varios motivos, prueba lo siguiente:

  • Prueba a salirte de Skype o cualquier otro programa que use la red. No es lo mismo cerrar que salir de Skype, asegurate que te has salido, prueba de nuevo y si fuera no te preocupes, es muy usual, por eso está escrito aquí. La solución está en el siguiente punto.
  • La mayoría de los problemas que pasan es porque el puerto 80 entra en conflicto con el servidor web y otro programa, la solución pasa por cambiar el puerto en la configuración. Si buscas en internet podrás ver cual es la forma más rápida para tu servidor web
  • Si te funcionaba y luego ha dejado de funcionar, puede ser que hayas cambiado alguna configuración que entre en conflicto, vuelve a la versión anterior o prueba a descargarte la versión correcta.

Unidad 2. Webs con HTML5

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

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 olivides 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 hayais 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 echo, las entregas de todas las actividades se obliga para que toméis conciencia de eso mismo.

Unidad 3. Elementos avanzados con HTML5

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>

Esta web utiliza cookies, puedes ver nuestra la política de cookies, aquí Si continuas navegando estás aceptándola. Pulsa para quitar este mensaje
Política de cookies +