Índice de Prácticas de "Desarrollo en HTML5, CSS y Javascript de Apps Web, Android, IOS... (5.ª ed.)"
Módulo 1: Introducción a los elementos básicos de HTML, CSS
-
Entrega Obligatoria Módulo 1: Construir una página HTML titulada: Secciones y líneas generales de un documento HTML5.
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: 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 <Fernando Loras>."
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, 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
Módulo 4: Booleano, 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):
2) Operaciones binarias (con dos operandos):
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.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: 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: jQuery UI. Interacción con usuario. Bootstrap. Diseño adaptativo
-
Entrega Obligatoria Módulo 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
Módulo 7: Profundización en arrays, objetos, propiedades, métodos, tipos
-
Entrega Obligatoria 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
-
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.
Subir la nueva aplicación de citas a la cuenta de neocities.org
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.
Subir dicha aplicación a la cuenta de neocities.org