Bienvenido, a la página personal de Fernando Sancerni

Realización de los ejercicios del curso de HTML5, CSS y JS de Miriadax.net.

• Módulo 1: Introducción a los elementos básicos de HTML, CSS

  1. Ejercicio - mi primera página con imagen - Añadir estilos css para modificar el color del fondo, de la fuente, la familia tipográfica y el tamaño
     
  2. Ejercicio - esquemaHTML - Realiza un esquema sencillo de el documento HTML suministrado a su estructura tipo árbol, que resuma brevemente las relaciones directas entre elementos de la página, clarificando la jerarquía del árbol.
     
  3. Ejercicio - herencia - Realizar en el siguiente HTML 5 declaraciones de estilo CSS que afecten al mismo elemento, el titilar h1, con diferentes puntuaciones de prioridad, e indicar su puntuación como un comentario en el propio HTML.
     
  4. Ejercicio - obligatorio - Construir una página HTML titulada: Secciones y líneas generales de un documento HTML5.
     Utilizar el texto a continuación. Deben emplearse las marcas básicas de HTML y estilos según los contenidos del módulo 1 de este curso.
     

• Módulo 2: Estructura HTML5/CSS3 para multipantalla y objetos multimedia

  1. Ejercicio - Uso de font-face - Realiza una página que contenga un párrafo con fuentes vinculadas, con la fuente ‘Fira’ del Sistema Operativo de Firefox FiraOpenType
     o la ‘Roboto’ del Sistema Operativo Android.
     
  2. Ejercicio - Vídeo, audio, imagen - 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.
  3. Ejercicio - Final Módulo 2 - 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 como < ó π ó ∯ ó el mismo &
     5. Incluir, imágenes de tipo bitmap (La imagen background de ’body’) y vectorial (La imagen background de los ’article’ de la página).
     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>"

  Aquí está el vídeo:

• Módulo 3: JavaScript: sentencia, expresión, variable, función, objeto y DOM

  1. Ejercicio - Final Módulo 3 - Ampliar la aplicación Web que 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 la propiedad global: location.href
        4. Contenido de la propiedad global: location
        5. Contenido de las propiedades globales: screen.width y screen.heigth

• Módulo 4: Booleano, if/else, string, número, DOM, eventos e interacción

  1. Ejercicio - Final Módulo 4 - Ampliar la aplicación Web Calculadora:
     • 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^2 (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)

• Módulo 5: Bucles. Arrays. Funciones como objetos. Ámbitos. Cierres. jQuery

  1. Ejercicio - Final Módulo 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:
     • 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^2 (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^n (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)

• Módulo 6: jQuery UI. Interacción con usuario. Bootstrap. Diseño adaptativo

  1. Ejercicio - Opcional - 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
  2. Ejercicio - Obligatorio - 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:

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

• Módulo 7: Profundización en arrays, objetos, propiedades, métodos, tipos

  1. Ejercicio - Final Módulo 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

• Módulo 8: LocalStorage, iFrames, Origin policy y JSON

  1. Ejercicio - 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:

     1. Evento tap: sustituira a arrancar/parar
     2. Evento swipe: sustituira a inicializar
     Utilizar la libreria touch.js para implementar los eventos tactiles.
     
  2. Ejercicio - Final Módulo 8 - Añadir a la aplicación, con 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 el carrusel de citas a la cuenta de neocities.org

• Módulo 9: Introducción a gráficos y animaciones SVG. Geolocalización.

  1. Ejercicio - 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
     Publicar la App como aplicaciones hosted y packaged en el directorio público de Google Drive, y comprobar que se instala correctamente en el simulador de FirefoxOS