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

Ejercicio P2P Opcional

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.

Para acceder al ejercicio presiona aquí.

Ejercicio P2P Opcional

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.

Para acceder al ejercicio presiona aquí.

Ejercicio P2P Opcional

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.

Para acceder al ejercicio presiona aquí.

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

Ejercicio P2P Opcional

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.

Para acceder al ejercicio presiona aquí.

Ejercicio P2P Opcional

Realiza una página que contenga un párrafo con fuentes vinculadas, con la fuente ‘Fira’ del Sistema Operativo de Firefox FiraOpenType, que puedes descargar aquí:
https://www.mozilla.org/en-US/styleguide/products/firefox-os/typeface/
o la ‘Roboto’ del Sistema Operativo Android que puedes descargar aquí:
https://www.google.com/fonts#UsePlace:use/Collection:Roboto.

Para acceder al ejercicio presiona aquí.

Ejercicio P2P Opcional

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.

Para acceder al ejercicio presiona aquí.

Entrega P2P obligatoria

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>”.
Subir dicha aplicación a la cuenta de Neocities.org o de su elección.

Para acceder al ejercicio presiona aquí.

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

Entrega P2P obligatoria

Ampliar la siguiente aplicación Web (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

Para acceder al ejercicio presiona aquí.

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

Entrega P2P obligatoria

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)

Para acceder al ejercicio presiona aquí.

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

Entrega P2P obligatoria

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)

Para acceder al ejercicio presiona aquí.

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

Ejercicio p2p 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).

Para acceder al ejercicio presiona aquí.

Entrega P2P obligatoria

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.

Para acceder al ejercicio presiona aquí.

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

Entrega P2P obligatoria

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.

Para acceder al ejercicio presiona aquí.

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