TP Vacaciones de invierno
El siguiente trabajo práctico para realizar durante las vacaciones de invierno consiste en desarrollar una página web o pequeña aplicación web y hostearla desde GitHub Pages.
La aplicación o página tiene que estar contenida en tres archivos: un index.html
, un style.css
y un archivo de JavaScript. Si hiciera falta se pueden usar imágenes o archivos de audio, pero los archivos de código tienen que ser tres, uno por cada lenguaje.
No se pueden usar frameworks o librerías, la aplicación debe estar hecha en HTML, CSS y JavaScript puros. Sí se puede usar la API de JavaScript para trabajar con el DOM (por ejemplo document.getElementById()
) o cualquier función que soporten los navegadores modernos.
Con frameworks o librerías me refiero a jQuery, lodash, Bootstrap, etc.
Que no se trabaje con frameworks CSS no quiere decir que tengan que escribir código de layout para cubrir todos los tamaños de pantalla posibles. Se espera que la aplicación se vea bien en un monitor promedio, no que sea responsive.
Si la aplicación almacena información no necesita conectarse a una base de datos o algún tipo de almacenamiento persistente. O está hardcodeada o bien se pierde al actualizar el navegador (F5). Eso es esperable con las herramientas que tienen.
El trabajo es individual y los temas se asignan a cada alumno en la tabla consignada abajo.
Todas las aplicaciones tienen que tener un pie de página o footer donde se lea el nombre y apellido del alumno, la división y un link o botón al repositorio donde está hosteado el código.
Pueden usar como punto de partida y ejemplo el repositorio del ejercicio del parque de diversiones: https://github.com/santiagotrini/parque-diversiones.
Entrega
La fecha de entrega límite es el miércoles 7 de agosto hasta las 18:00 hs. Debe enviarse un mail a santiago.trini@bue.edu.ar indicando en el asunto nombre, apellido y división. En el cuerpo del mail debe estar el link a la web (la URL).
El trabajo es individual y se espera que cada uno le aporte su estilo a su aplicación. Trabajos idénticos serán calificados con idéntica baja nota. El trabajo tiene nota numérica y se promedia con las pruebas para el segundo trimestre. También voy a revisar que los trabajos no estén plagiados de otro lado.
El repositorio de GitHub debe ser público. No se aceptarán trabajos enviados luego de la fecha límite.
Cualquier duda o consulta escriban al mail de arriba.
Temas
-
Conversor de monedas.
-
Conversor de temperaturas.
-
Conversor de sistemas de numeración.
-
Lista de tareas.
-
¿Cuánto falta para la primavera?
-
Trivia.
-
Abecedario de jardín.
-
Traductor de código Morse.
-
Generador de memes.
-
Test.
-
Traductor de Jeringoso.
-
Generador de citas.
Apellido | Curso | Tema |
---|---|---|
Abella |
4º1º |
1 |
Amigo |
4º1º |
2 |
Barrague |
4º1º |
3 |
Blanco |
4º1º |
4 |
Bordon |
4º1º |
5 |
Caputo |
4º1º |
6 |
Delfino |
4º1º |
7 |
Dumont |
4º1º |
8 |
Espindola |
4º1º |
9 |
Fernandez |
4º1º |
10 |
Forneron |
4º1º |
12 |
Gantus |
4º1º |
3 |
Garavagno |
4º1º |
9 |
Garcia |
4º1º |
12 |
Granata |
4º1º |
7 |
Hernandez |
4º1º |
6 |
Lusnich |
4º1º |
4 |
Magre |
4º1º |
1 |
Martinez Carol |
4º1º |
2 |
Miliani |
4º1º |
10 |
Pastor |
4º1º |
6 |
Perez |
4º1º |
2 |
Perree |
4º1º |
4 |
Rodriguez |
4º1º |
3 |
Safe |
4º1º |
12 |
Sampayo |
4º1º |
8 |
Sanchez Slater |
4º1º |
7 |
Sanchez Tonarelli |
4º1º |
9 |
Sauchella |
4º1º |
7 |
Serpa |
4º1º |
1 |
Thenon |
4º1º |
3 |
Trosero |
4º1º |
12 |
Vaca |
4º1º |
2 |
Vaccaro |
4º1º |
2 |
Abadi |
4º2º |
6 |
Alarcon |
4º2º |
3 |
Benitez |
4º2º |
7 |
Casimiro |
4º2º |
8 |
Cingolani |
4º2º |
9 |
Constenla |
4º2º |
1 |
D’Angelo |
4º2º |
7 |
De La Fuente |
4º2º |
5 |
Díaz |
4º2º |
4 |
Espinosa |
4º2º |
10 |
Estrada |
4º2º |
2 |
García |
4º2º |
6 |
Gerula |
4º2º |
1 |
Humano |
4º2º |
5 |
Iglesias |
4º2º |
9 |
Jimenez |
4º2º |
4 |
Kilberg |
4º2º |
3 |
Lesta |
4º2º |
2 |
Licciardi |
4º2º |
1 |
Marconi |
4º2º |
8 |
Mendoza |
4º2º |
4 |
Panzitta |
4º2º |
6 |
Petean |
4º2º |
10 |
Quisbert |
4º2º |
9 |
Romero |
4º2º |
3 |
Sosa |
4º2º |
4 |
Spano |
4º2º |
10 |
Staltari |
4º2º |
7 |
Toscano |
4º2º |
8 |
Valle |
4º2º |
5 |
Vázquez |
4º2º |
7 |
Velasco |
4º2º |
5 |
Williams |
4º2º |
11 |
Aguirre |
4º3º |
1 |
Albarez |
4º3º |
2 |
Arenas |
4º3º |
11 |
Barredo |
4º3º |
3 |
Castillo |
4º3º |
4 |
Cely Amaya |
4º3º |
5 |
Claudio Canaza |
4º3º |
6 |
Comesaña |
4º3º |
8 |
Díaz |
4º3º |
7 |
Doglio |
4º3º |
2 |
Faura |
4º3º |
9 |
Gayarre |
4º3º |
10 |
Grillo |
4º3º |
12 |
Inchausti |
4º3º |
1 |
Leon |
4º3º |
3 |
Mamani Laura |
4º3º |
2 |
Mamani Quispe |
4º3º |
9 |
Martinez Muller |
4º3º |
7 |
Meier |
4º3º |
6 |
Montiel |
4º3º |
4 |
Moyano |
4º3º |
10 |
Ortiz |
4º3º |
8 |
Piergallini |
4º3º |
3 |
Pozzi |
4º3º |
8 |
Rocha |
4º3º |
9 |
Salas |
4º3º |
10 |
Tapia |
4º3º |
6 |
Tudela |
4º3º |
4 |
Valenti |
4º3º |
1 |
Yana |
4º3º |
12 |
Conversor de monedas
Un conversor de monedas es una serie de entradas de texto y botones para pasar por ejemplo mil dólares a su equivalente en pesos o euros. El conversor tiene que manejar al menos cuatro monedas diferentes. Las cotizaciones estarán hardcodeadas en el script de JavaScript. Si se animan pueden hacer una consulta a una API externa para traer la cotización al momento de la consulta. Para realizar eso sin usar librerías tendrían que usar fetch()
en JavaScript, pero no es obligatorio.
Conversor de temperaturas
Similar al conversor de monedas en la interfaz. Se espera que trabajen con Kelvin, Celsius o Fahrenheit.
Conversor de sistemas de numeración
Similar al conversor de temperaturas, se espera que conviertan entre decimal, binario, octal y hexadecimal.
Lista de tareas
Este es un clásico del desarrollo web, hay cientos de ejemplos con distintos frameworks, arquitecturas y bases de datos para armar el famoso “TODO List”. Como todavía no manejamos bases de datos alcanza con armar una interfaz y presentar la lista de tareas tomada de un array o algo similar. Claro que al actualizar la página se pierden todas las tareas, pero es esperable. Las tareas tienen que poder tacharse y deben desaparecer de la lista.
¿Cuánto falta para la primavera?
La idea de este tema es implementar una página web que me reciba con una placa roja de Crónica que me diga “faltan tantos días para la primavera”. Cada vez que entro en la web un script es el encargado de comparar la fecha de hoy con la del 21 de septiembre de este año o del próximo según corresponda para mostrar el número correcto. El estilo de la web tiene que ser obligatoriamente el de una placa de Crónica.
Trivia
Hay que implementar una trivia con preguntas de opción múltiple, la opción más lógica es usar radio buttons. Al elegir una respuesta la aplicación me debe mostrar si acerté o si la respuesta es incorrecta. Como mínimo tiene que tener 10 preguntas que pueden limitarse a un tema específico o pueden ser de varios temas.
Abecedario de jardín
En un jardín de infantes suelen estar pegadas en la pared las letras del abecedario en imprenta mayúscula, miníscula y cursiva, con imágenes de palabras que empiecen con esa letra. Si ponemos eso en una web podemos hacer que al clickearlas se lea la letra y produzca el sonido de la cosa o animal que esté en el dibujo. Eso hay que hacer.
Traductor de código Morse
Sencillo, una entrada de texto lee una palabra ingresada por el usuario y con un botón traduce a código Morse. No se espera traducir de Morse a letras. Sólo de letras a Morse. Si se animan o están aburridos intenten traducir frases enteras y no sólo una palabra. No hace falta que salga sonido, solo mostrar los puntos y rayas.
Generador de memes
Esta aplicación tiene un banco de imágenes (entre 5 y 10 por ejemplo). Uno elige una imagen de una lista e ingresa una frase en una entrada de texto y se genera la imagen con el texto.
Test
En muchas revistas aparecen cada tanto “tests”, uno contesta 10 o 20 preguntas de opción múltiple, hace una cuenta y te dicen en qué barrio vas a vivir o si tus hijos van a ser ingenieros. El tema del test es libre, usen su imaginación. La interfaz es muy similar a la de la trivia.
Traductor de Jeringoso
Este es jodido, hay que usar expresiones regulares.
A ver, es difícil pensar la expresión regular que funcione con el español, si ya tenés la expresión (copiada de algún lado) es llamar String.match()
y String.split()
. Lo demás es fácil.
Generador de citas
Eligen un personaje, por ejemplo Maradona, y hacen una página que te recibe con una cita al azar del Diego y le ponen un poco de onda a la página como para homenajear al pensador que eligieron.
Las citas están directamente hardcodeadas en el script de JavaScript y eligen una al azar con Math.random()
.