curriculum
curriculum copied to clipboard
Laboratoria
Nuevos proyectos como alternativa a Trivia
Idea para proyecto:
Libreta de contactos
Consiste en un sitio muy simple con botones que reflejan categorías de personas (contactos) que al ser presionados muestran o esconden en el DOM la sección de contactos que se esté presionando, además, cada categoría debería tener su propio color, de manera de pintar el div de la sección con ese color de fondo.
Las postulantes deberán crear un array de objetos del tipo contacto, tipo:
{ name: "mamá", tel: "344-3424-4343", tipo: "familiar"},
{ name: "fares", tel: "34534-34-785", tipo: "amigo"},
{ name: "veterinaria", tel: "8923-45-1343", tipo: "emergencia"},
Luego desplegarlos de esta manera en el DOM:
el diseño gráfico es mi pásión
Como OAs tentativos, serían los de:
- html/semantics
- css/selectors
- browser/dom/selectors
- browser/dom/events
- browser/dom/manipulation
- js/data-types/primitive
- js/data-types/strings
- js/data-types/arrays
- js/data-types/objects
- js/variables
- js/conditionals
- js/functions
- js/loops
- js/semantics
- user-centricity/centricity
- product-design/interactivity
Ojalá durante la semana tener un tiempito para enviar algo más concreto que esta idea.
Que bueno que este en la lista de amigues ;-)
Me gusta la idea. Me recuerdo un poco de este ejemplo de personajes con filtro. Podemos incluir data tambien, si queremos. Y OAs como flexbox.
Pero pienso que puede ser un nivel mas retador porque tiene OAs de objetos y arreglos.
Algunas preguntas - La alternativa deberia tocar los mismo OAs de trivia o puede ser diferente? O podemos ofrecer un camino con conceptos complejos, para lxs estudiantes que quieren algo mas retador? Ustedes vean esta opcion para lxs que han visto un poco de programacion antes o alcanzable para todxs?
Tambien vuelvo a la idea de un checklist o to-do que muestra el progreso en alguna manera y quiza un mesaje cuando cumple todo. Hacker edición puede ser que la informacion mantenga cuando vuelva a la pagina.
Hay este ejemplo https://neal.fun/life-checklist/ que no tiene progreso. No recuerdo el link de ejemplo @lupomontero nos comparto.
¡Gracias @unjust !
Con respecto a la primera pregunta, en mi opinión, creo que no necesariamente deberían compartir exactamente los mismos OAs del proyecto trivia pero sí compartir el "nivel de dificultad", y que sea una buena introducción al desarrollo web, es decir, que algo de manipulación del DOM tenga, y que sí conlleve algo de dinamismo en el sitio, y que el CSS juegue algún "rol", creo que es de las cosas que más les motiva durante la PA.
Pensándolo bien, creo que sí tienes razón en que mi propuesta pueda ser un poco más dificultosa ya que conlleva los OA's de js/data-types/arrays y js/data-types/objects, quizás en vez de pensarlo de la manera en la que el tipo es un atributo del objeto contacto podrían derechamente tener distintos arrays, tipo:
let amigues = [
{ name: "fares", tel: "34534-34-785", mail: "[email protected]"},
{ name: "ivy", tel: "68-1234-77", mail: "[email protected]"},
{ name: "lupo", tel: "234-672-7896", mail: "[email protected]"},
]
let familia = [
{ name: "javiera", tel: "35-724-546", mail: "[email protected]"},
{ name: "antonia", tel: "567-6753-47", mail: "[email protected]"},
{ name: "belén", tel: "3456-344-67", mail: "[email protected]"},
]
Etc...¿Y que luego cada uno se pinte en su propio div? me suena a que es un poquito menos complejo.
SI un poquito menos para no tiene que filtrar por un type de contacto.
Piensas que en el readme vamos a dar algunas pistas como ejemplos de data o solo los OAs de objetos y areglos?
Creo que sería buena idea incluir un par de ejemplos, e incluso algunas explicaciones, de manera de que puedan rápidamente notar la diferencia entre [ ] y { }