Curso: Desarrollo en HTML5, CSS y Javascript de Apps Web, Android, IOS... (5.ª ed.)

Primer Ejercicio P2P Opcional: Sobre el archivo facilitado al estudiante llamado "mi_primera_pagina_con imagen.html", añadir estilos css para modificar el color del fondo, de la fuente, la familia tipográfica y el tamaño.

Segundo Ejercicio P2P Opcional: Realiza un esquema sencillo de este documento HTML a su estructura tipo árbol, que resuma brevemente las relaciones directas entre elementos de la página, clarificando la jerarquía del árbol.

Tercer Ejercicio P2P Opcional: Realizar en el siguiente HTML 5 declaraciones de estilo CSS que afecten al mismo elemento, el titular h1, con diferentes puntuaciones de prioridad, e indicar su puntuación como un comentario en el propio HTML.

Entrega Obligatoria: Construir una página HTML titulada: Secciones y líneas generales de un documento HTML5.

Primer Ejercicio P2P Opcional Mod.2: Realizar en el siguiente HTML 5 declaraciones de estilo CSS que afecten al mismo elemento, el titular h1, con diferentes puntuaciones de prioridad, e indicar su puntuación como un comentario en el propio HTML.

Segundo Ejercicio P2P Opcional Mod.2: Realiza una página que contenga un párrafo con fuentes vinculadas, con la fuente ‘Fira’ del Sistema Operativo de Firefox FiraOpenType

Tercer Ejercicio P2P Opcional Mod.2: Realiza una página que utilice imágenes responsive con la etiqueta picture, que contenga un vídeo de YouTube y archivos de imagen vectorial SVG.

Entrega Obligatoria Modulo 2: Crear una página web personal simulada, que incluya al menos: Uso de colores para texto y fondo, incluyendo al menos colores degradados en alguna de sus cajas,tipografías externas de Google Fonts, Adobe Edge Web Fonts o un servicio similar on line, Distintos encabezados,Uso de caracteres especiales, imágenes de tipo bitmap y vectorial, algún vídeo. Incluir bordes redondeados en alguna de sus cajas. La página debe comenzar con el siguiente encabezamiento: “Página personal de <Leonardo Rojas Arias>.

Entrega Obligatoria Modulo 3: Ampliar la aplicación Web que muestra la fecha y la hora, adicionando los siguientes elementos:

1) El nombre de la persona que hace la entrega debajo del titulo <h1>

2) Un bloque <div> debajo de la fecha y la hora y las instrucciones JavaScript necesarias para que muestre en dicho bloque el contenido de las siguientes propiedades DOM en líneas separadas, que comiencen por el nombre de la propiedad(es) mostrada(s):
a) Contenido de innerHTML de elemento identificado por id="h2"
b) Contenido de outerHTML de elemento identificado por id="h1"
c) Contenido de de la propiedad global: location.href
d) Contenido de de la propiedad global: location
e) Contenido de de las propiedades globales: screen.width y screen.heigth

Entrega Obligatoria Modulo 4: Añadir a la calculadora el siguiente título: “Buenos días, bienvenido a la calculadora de <nombre y apellido de la persona>
Integrar además en una sola calculadora los siguientes botones de operaciones matemáticas:

1) Operaciones unitarias (con un solo operando):
1.1) x^2 (número elevado al cuadrado)
1.2) 1/x (inverso del número)
1.3) sqrt(x) (raiz cuadrada del número)
1.4) parte_entera(x) (parte entera de x: si x es positivo devuelve Math.floor(x) y si es negativo devuelve -Math.ceil(x))

Entrega Obligatoria Modulo 5: Modificar la calculadora del ejemplo anterior para que realice todos sus accesos a elementos DOM y toda la gestión de eventos con las funciones de la librería jQuery.

1) Operaciones unitarias (con un solo operando):
1.1) x^2 (número elevado al cuadrado)
1.2) 1/x (inverso del número)
1.3) sqrt(x) (raiz cuadrada del número)
1.4) parte_entera(x) (parte entera de x: si x es positivo devuelve Math.floor(x) y si es negativo devuelve -Math.ceil(x))
1.5) 2^n (potencia n del número 2)
1.6) n! (factorial del número n: n*(n-1)*(n-2)*...*3*2*1)

2) Operaciones binarias (con dos operandos):
2.1) +. -. *, / (suma, resta, multiplicación y división)
2.2) x^y (x elevado a y)

3) Operaciones con n operandos introducidos en formato CSV:
3.1) sumatorio(x) (sumatorio de n números)
3.2) producto(x) (producto de n números)

Entrega Opcional Modulo 6: Realizar un menú plegable (collapse) con una de sus opciones 'Music' desplegable (dropdown ) con bootstrap, para las siguientes opciones: Welcome, Featured, People, Music, Mixes, Videos, Radio.

Entrega Obligatoria Modulo 6: Integrar en el ejemplo del carrusel realizado con Bootstrap en la última actividad la calculadora desarrollada como entrega P2P final del modulo 5 que utiliza jQuery e incluye todas las teclas de operaciones unitarias, binarias y n-arias. La calculadora integrada debe estar accesible desde todos los enlaces del carrusel:
- Barra de navegación superior
- Foto de la calculadora en el carrusel
- Botonera inferior

La calculadora integrada debe incluir una barra de navegación adaptable a pantallas estrechas y anchas, similar a la que se incluyo en la integración del puzzle. Subir el carrusel completo basado en bootstrap con el puzzle y la calculadora integrados a la cuenta de neocities.org

Entrega Obligatoria Modulo 6 + Parte OpcionalPara practicar con el uso de jQuery UI, pueden añadir a la calculadora una memoria donde almacenar el valor del cajetín. El contenido de esta memoria deberá hacerse visible en la página Web, por ejemplo cerca del cajetín. Para mover el contenido de uno a otro se deben añadir 2 teclas a la calculadora:
- ToM: mueve el número del cajetín a la memoria
- FromM: mueve el número de la memoria al cajetín

El contenido del cajetín debe poder arrastrarse también con el ratón para depositar en la memoria, utilizando las interacciones draggable y droppable de jQuery UI. Un último paso más difícil es permitir arrastrar en sentido inverso. Algunas sugerencias para implementar el arrastre del cajetín a la memoria:
1) Usar bloque <div contentEditable=“true” …> en vez de <input type=“text” …> para introducir el número y delimitar el cajetin con los comandos CSS border, hight y width.
2) Usar un bloque <div> para la memoria donde guardar el número. Delimitar esta zona también con los comandos CSS border, hight y width.
3) Inicializar la función draggable al menos con las opciones {revert: "invalid", helper:"clone"} para que retorne si no llega al destino y para que no desplace el cajetín original.
4) Inicializar la función dropable al menos con las opciones {activeClass:"act", drop:function(event, ui){…}} para indicar con activeClass cual es el destino (memoria) y para definir con drop el manejador del ejvento que copia el contenido. El manejador tendrá un código similar al del botón ToM.

Pueden encontrar las instrucciones en:
http://www.desarrolloweb.com/manuales/manual-jqueryui.html
https://jqueryui.com/
http://api.jqueryui.com/

Entrega Obligatoria Modulo 7: Completar el ejemplo del carrusel de citas editable añadiendo los manejadores de los eventos de edición del contenido de una cita existente o de borrado de dicha cita.
Subir el carrusel de citas a la cuenta de neocities.org

Entrega Opcional Modulo 8: Modificar el ejemplo del cronómetro, quitando los 2 botones: arrancar/parar e inicializar. Añadir en su lugar los siguiente eventos tactiles sobre el body del cronómetro:
Evento tap: sustituira a arrancar/parar
Evento swipe: sustituira a inicializar
Utilizar la libreria touch.js para implementar los eventos tactiles, se debera validar en pantallas tactiles.

Entrega Opcional Modulo 8 Plus: Se adiciona en el ejemplo del cronómetro el registros de las paradas del cronometro.
Se utiliza la libreria touch.js para implementar los eventos tactiles tap y swipe

Entrega Obligatoria Modulo 8: Añadir a la aplicación, con el el carrusel de citas editable, la funcionalidad de guardar la base de datos serializada en JSON en localStorage, de forma que al cargar la aplicación en un navegador, está deberá detectar si existe una base de datos de citas almacenada en localStorage y si es así deberá presentar está en vez de las citas de la galería incluidas en el código de la aplicación.
De esta forma los cambios realizados a la base de datos inicial de citas (edición, añadir o borrado) quedarán guardados en localStorage y estarán disponibles cuando se vuelva a abrir la aplicación en ese mismo navegador.
Añadir además un botón que regenere las citas iniciales de la aplicación, eliminando los cambios introducidos. El botón debe pedir confirmación (con la funcion confirm("msj") o con un componente/widget dialogo de jQuery UI) y avisar en el mensaje ("msj") del pop-up de lo que va a hacer, para que el usuario sea consciente de que borra todos los cambios.
Este nuevo botón deberá colocarse en una posición que se relacione con la base de datos de citas y no con una cita en particular. Buscar un icono SVG adecuado en Internet.
Subir la nueva aplicación de citas a la cuenta de neocities.org

Entrega Opcional Modulo 9: Modificar la aplicación con geolocalización en Google Maps para que: Cuando se cierra la App, guardar la ruta en una variable de localStorage. Para que al volver a abrirla reproduzca la ruta anterior, en vez de cargar un mapa limpio, como hace ahora.
Además se debe incluir un boton de inicializar: Que cargue un mapa limpio centrado en nuestra posición, colocando un marcador en dicho punto.
Recomendación: guardar la ruta como un array de posiciones: Donde cada posición es un array de [lat, lng]
Ejemplo: [[-1.040, 11.029], [0.040, 10.029], [5.040, 12.030]] Guardar el array en localStorage serializado con JSON.stringify Recuperarlo de localStorage deserializando con JSON.parse

Entrega Obligatoria Modulo 9: Modificar la aplicación de calculo de rutas geolocalizada en Google Maps, añadiendo un botón de “compactar” las rutas mostradas. Al pulsar el boton se deben eliminar los puntos intermedios de la ruta.
La ruta se compactará volviendo a visualizar el mapa limpio y mostrando sobre él solo los puntos inicial y final, junto con la ruta directa que los une.
Recomendación: Crear una variable nueva que guarde en todo momento el punto inicial de la ruta. La variable se iniciará en el momento de cargar la aplicación y guardará el origen de la ruta para cuando haya que compactar.
Al pulsar "compactar" se visualizará el mapa limpio, se pondrán los marcadores inicial (variable nueva) y final (“lat”, “long”) y se mostrará la ruta entre ellos.
Subir dicha aplicación a la cuenta de neocities.org