Jordi Serra - Desarrollo en HTML5, CSS y Javascript de Apps Web, Android, IOS... (7ª ed.)

Módulo 1 - Introducción a los elementos básicos de html y css

Entrega obligatoria módulo 1

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

Entrega obligatoria 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
  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”

Módulo 3 - Javascript: Sentencia, expresión, variable, función, objeto y DOM

Entrega obligatoria 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):
      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 - Jboleano, if/else, string, número, DOM, eventos e interacción

Entrega obligatoria módulo 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))
    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 - Bucles. Arrays. Funciones como objetos. Ámbitos. Cierres. JQuery

Entrega obligatoria módulo 5

    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))
    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 6 - j Query UI. Interacción cn usuario. Bootstrap. Diseño adaptativo

Entrega obligatoria módulo 6

    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))
    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 7 - Profundización en arrays, objetos, propiedades, métodos, tipos.

Entrega obligatoria módulo 7

    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))
    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 8 - LocalStorage, iFrames, Origin policy y JSON.

Entrega obligatoria módulo 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.

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

Entrega obligatoria módulo 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.