Página personal de Francesc Pineda Segarra para curso Miriada X

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

Esta página es en si misma una entrega de práctica, la cual se seguirá usando a modo de índice para poder acceder a todos los ejercicios P2P que se realicen durante el curso. Puede que la presentación sea cutre, pero de lo que se trata es de aplicar lo que se pide.

Módulo 1

  • Tema 1: mi_primera_pagina_con imagen.html. Tarea: 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.
  • Tema 5: estructura_tipo_arbol.html. Tarea: 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.
  • Tema 6: herencia_css.html. Tarea: 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.
  • Final: Modulo1_P2P_obligatoria.html. Tarea: Ejemplo con todo lo realizado en el módulo.

Módulo 2

  • Tema 2: estructura_tipo_arbol.html. Tarea: Realiza una página que contenga un párrafo con fuentes vinculadas, con la fuente "Fira" del Sistema Operativo de Firefox FiraOpenType o "Roboto" del Sistema Operativo Android.
  • Tema 3: picture_responsive.html. Tarea: 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.
  • Final: index.html. Tarea: Crear una página web personal simulada, que incluya lo explicado hasta ahora (Ya estás en ella, aunque se irá mejorando una vez se entregue).

Módulo 3

  • Final: Modulo_3_P2P_obligatoria.html. Tarea: Incluir 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

Módulo 4

  • Final: Modulo_4_P2P_obligatoria.html. Tarea: 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) x2 (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)) 2) Operaciones binarias (con dos operandos): 2.1) +. -. *, / (suma, resta, multiplicación y división) 2.2) x^y (x elevado a y).

Módulo 5

  • Final: Modulo_5_P2P_obligatoria.html. Tarea: 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.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).

Módulo 6

  • Tema 6: Modulo_6_Tema_6_P2P_opcional.html. Tarea: 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 y Radio.
  • Final: Modulo_6_P2P_obligatoria. Tarea: 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.

Módulo 7

  • Final: Modulo_7_P2P_obligatoria. Tarea: 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.

Módulo 8

  • Tema 1: Cronometro_localStorage.htm. Tarea: 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: sustituirá a arrancar/parar. Evento swipe: sustituira a inicializar. Utilizar la libreria touch.js para implementar los eventos tactiles.
  • Final: Modulo_8_P2P_obligatoria. Tarea: 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.

Módulo 9

  • Tema 2: Aparece cerrado. Tarea: No se sabe.
  • Final: Modulo_9_P2P_obligatoria. Tarea: 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.

Módulo 10

  • NADA QUE ENTREGAR!

Para aprender más HTML/CSS, visita W3Schools!