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

Utilizar el texto dado. Deben emplearse las marcas básicas de HTML y estilos según los contenidos del módulo 1 de este curso.

Crear una página web personal simulada, que incluya al menos:

1. Uso de colores para texto y fondo, incluyendo al menos colores degradados en alguna de sus cajas.
2. Inclusión de tipografías externas de Google Fonts, Adobe Edge Web Fonts o un servicio similar on line.
3. Distintos encabezados.
4. Uso de caracteres especiales.
5. Incluir, imágenes de tipo bitmap y vectorial.
6. Incluir algún vídeo.
7. Incluir bordes redondeados en alguna de sus cajas.
8. La página debe comenzar con el siguiente encabezamiento: “Página personal de <nombre y apellido del alumno>”.

Ampliar la aplicación Web del código dado (muestra la fecha y la hora), incluyendo 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):
1. Contenido de innerHTML de elemento identificado por id="h2".
2. Contenido de outerHTML de elemento identificado por id="h1".
3. Contenido de de la propiedad global: location.href.
4. Contenido de de la propiedad global: location.
5. Contenido de de las propiedades globales: screen.width y screen.heigth.

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. x² (número elevado al cuadrado).
   2. 1/x (inverso del número).
   3. sqrt(x) (raiz cuadrada del número).
   4. parte_entera(x) (parte entera de x: si x es positivo devuelve Math.floor(x) y si es negativo devuelve -Math.ceil(x)).
2. Operaciones binarias (con dos operandos):
   1. +. -. *, / (suma, resta, multiplicación y división).
   2. x^y (x elevado a y).

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.

La calculadora debe mostrar al principio el 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. x² (número elevado al cuadrado).
   2. 1/x (inverso del número).
   3. sqrt(x) (raiz cuadrada del número).
   4. parte_entera(x) (parte entera de x: si x es positivo devuelve Math.floor(x) y si es negativo devuelve -Math.ceil(x)).
   5. 2ⁿ (potencia n del número 2).
   6. n! (factorial del número n: n*(n-1)*(n-2)*...*3*2*1).
2. Operaciones binarias (con dos operandos):
   1. +. -. *, / (suma, resta, multiplicación y división).
   2. x^y (x elevado a y).
3. Operaciones con n operandos introducidos en formato CSV:
1. Sumatorio(x) (sumatorio de n números).
2. Producto(x) (producto de n números).

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.

Parte opcional de la entrega:Para 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/

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.

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.

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.

Este módulo no tiene práctica obligatoria.