Ejer Cici Os

ABIERTO
Desarrollo en HTML5, CSS y

Javascript de Apps Web, Android
MODULO 3: JAVASCRIPT: SENTENCIA, EXPRESIÓN, VARIABLE, FUNCIÓN,

OBJETO Y DOM
Entrega P2P obligatoria

Entrega.
Ampliar la siguiente aplicación Web (muestra la fecha y la hora):
<!DOCTYPE html><html>
<head>
<title>Date</title>
<meta charset="UTF-8">
</head>
<body>
<h1 id="h1"></h1>
<h2 id="h2">La fecha y la hora son:</h2>
<div id="fecha"></div>
<script type="text/javascript">
var fecha = new Date();
var msj;
if (fecha.getHours() < 7) { msj = "Buenas noches";}

else if (fecha.getHours() < 12) { msj = "Buenos días";}
else if (fecha.getHours() < 21) { msj = "Buenas tardes";}
else { msj = "Buenas noches";}
document.getElementById("h1").innerHTML = msj;
document.getElementById("fecha").innerHTML = fecha;
</script>
</body>
</html>
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
Subir dicha aplicación a la cuenta de neocities.org

MÓDULO 4: BOOLEANO, IF/ELSE, STRING, NÚMERO, DOM, EVENTOS E
INTERACCIÓN

Entrega.
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 P2P Obligatoria

Entrega.
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.
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:
1) 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.
2) 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.
3) 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.
4) 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/
MODULO 7: PROFUNDIZACIÓN EN ARRAYS, OBJETOS, PROPIEDADES,
MÉTODOS, TIPOS

Entrega.
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
Instrucciones para la Entrega.

La entrega debe incluir el URL de la página Web (o app) publicada en Internet en
la descripción de la entrega con un texto como el siguiente:
"Mi entrega está accesible en:
http://juan-quemada.neocities.org/index.html
para su evaluación".
Además debe subirse el fichero con la página Web o app como un fichero adjunto la
entrega por seguridad.
OJO! Una vez enviada la entrega, esta no se puede cambiar. Comprueben que entregan todo
correctamente antes de enviarlo.
Instrucciones para la evaluación por pares.

Para aprobar la entrega, el evaluador debe comprobar que el script entregado funciona
correctamente y cumple los requisitos especificados, visualizando en el navegador, usando del URL
entregado, la publicación en Internet.
Dado que es un curso para principiantes, ante la duda les pedimos que sean benevolentes
con sus compañeros, porque muchos participantes están empezando con HTML5 y los
primeros pasos siempre son dificiles.
El objetivo de este curso es sacar el máximo provecho al trabajo que están dedicando, por lo que
les recomendamos que utilicen la evaluación para ayudar a sus compañeros enviando comentarios
sobre la corrección del código, su claridad, legibilidad, estructuración y documentación.
MÓDULO 8: LOCALSTORAGE, IFRAMES, ORIGIN POLICY Y JSON

Entrega.
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
Instrucciones para la Entrega.

La entrega debe incluir el URL de la página Web (o app) publicada en Internet en
la descripción de la entrega con un texto como el siguiente:
"Mi entrega está accesible en:
http://juan-quemada.neocities.org/index.html
para su evaluación".
Además debe subirse el fichero con la página Web o app como un fichero adjunto la
entrega por seguridad.
OJO! Una vez enviada la entrega, esta no se puede cambiar. Comprueben que entregan todo
correctamente antes de enviarlo.
MÓDULO 9: INTRODUCCIÓN A GRÁFICOS Y ANIMACIONES SVG.
GEOLOCALIZACIÓN.

Entrega.
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.

Ejer Cici Os

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Ejer Cici Os

Hochgeladen von

Copyright:

Verfügbare Formate

ABIERTO

Desarrollo en HTML5, CSS y

MODULO 3: JAVASCRIPT: SENTENCIA, EXPRESIÓN, VARIABLE, FUNCIÓN,

Entrega P2P obligatoria

if (fecha.getHours() < 7) { msj = "Buenas noches";}

1) El nombre de la persona que hace la entrega debajo del titulo <h1>

a) Contenido de innerHTML de elemento identificado por id="h2"

Subir dicha aplicación a la cuenta de neocities.org

Entrega P2P obligatoria

“Buenos días, bienvenido a la calculadora de <nombre y apellido de la persona>”

1) Operaciones unitarias (con un solo operando):

Entrega P2P Obligatoria

La calculadora debe mostrar al principio el título:

“Buenos días, bienvenido a la calculadora de <nombre y apellido de la persona>”

1) Operaciones unitarias (con un solo operando):

Entrega P2P obligatoria

- Barra de navegación superior

Subir el carrusel completo basado en bootstrap con el puzzle y la calculadora integrados a

Algunas sugerencias para implementar el arrastre del cajetín a la memoria:

Entrega P2P obligatoria

Subir el carrusel de citas a la cuenta de neocities.org

Instrucciones para la Entrega.

Instrucciones para la evaluación por pares.

Entrega P2P obligatoria

Subir la nueva aplicación de citas a la cuenta de neocities.org

Instrucciones para la Entrega.

Entrega P2P obligatoria

Subir dicha aplicación a la cuenta de neocities.org

Das könnte Ihnen auch gefallen