La piscina discovery web se trata de una semana de inmersión en el mundo de la programación web.
Se estructura en 5 unidades principales (cellules):
- Cellule0: Iniciación a shell y bash.
- Cellule1: Iniciación a HTML y CSS.
- Cellule2: Profundizando en HTML y CSS.
- Cellule3: Iniciación a JavaScript.
- Cellule4: RUSH.
Además, he incluído al final unas capturas con unos apuntes que tomé para entender mejor el funcionamiento de justify-content y align-items con display-flex, donde incluí algunos dibujos realizados en excalidraw que quizás te puedan ayudar si también tienes problemas para entender esto.
Creación de una carpeta mediante comando en shell
Creación de un fichero que muestre "Z" Al realizar cat sobre este.
Creación de un fichero que contenga el comando para listar el contenido de un directorio separado por comas.
Creación de un script que cuente los elementos presentes dentro del directorio sobre el que se ejecute.
Script que imprimie por pantalla hasta un máximo de 3 argumentos proporcionados en la ejecución de este.
Script que genera directorios llamados "ex" + el nombre proporcionado como argumento. Sin límite de argumentos.
Como su nombre indica, consiste en crear una web que muestre el texto "Hello World" como párrafo.
Crear una web que contenga el título "Piscine Web" centrado
Sobre el ejercicio anterior añadir dos imágenes una al lado de la otra y centradas en relación al título.
Volvemos a partir del ejercicio anterior, en este caso una de las imágenes actuará como un link.
Empezamos a tocar CSS a un nivel más extenso. Creamos una web que contenga un título en blanco con algún caracter especial. Fondo rosa, dos imágenes una al lado de la otra con un link debajo. Una división de la web y un texto con nuestro nombre de usuario.
Tip
Para este ejercicio (y los siguientes) recomiendo encarecidamente buscar información sobre display: flex;, un display para la colocación de los elementos en la página que aunque algo complejo de entender, es muy sencillo de manejar y ofrece muy buenos resultados.
Dejo un link para ver las capturas que he adjuntado al final explicando dos conceptos básicos de este display (justify-content y align-items) de los que hice algunos dibujos en excalidraw para comprenderlos mejor: - Apuntes sobre display=flex;
Consiste en la creación de una web que contiene una tabla centrada con dos columnas y una única línea, es decir, dos celdas.
Partimos del código anterior pero en este caso las dos celdas deben ocupar el 100% de la pantalla, es decir, tenemos que jugar a dar el tamaño de los elementos en %.
Cogemos el código del último ejercicio y en vez de introducir todo el código en un único archivo html gracias a las etiquetas <style> </style> de head, introducimos el código css en un archivo propio y referenciaremos este en el html con
Debemos realizar un pequeño menú desplegable empleando la etiqueta .
Realizaremos una web que aplique el efecto parallax o de paralaje. Cuanto más cercano se encuentra un objeto a nosotros, más movimiento detectamos, y cuanto más lejos, menos. La idea de este proyecto es crear esta sensación de profundidad espacial en un espacio bisimensional, con la intención de mejorar la experiencia de usuario. Este ejercicio es más complicado de lo que parece a simple vista si se quiere realizar correctamente. La primera vez que lo realicé no investigué adecuadamente sobre el efecto parallax. La segunda vez, vi este video que me ayudó bastante a entender la base de cómo realizar el código y luego adaptarlo a mis necesidades.
El último ejercicio de esta unidad consiste en realizar una tarjeta de estudiante a partir de las estructuras de las tablas. Vemos cómo css cambia totalmente el aspecto de una página.
Finalmente empezamos con JavaScript. En este primer ejercicio debemos crear un código donde al presionar un botón se cambie el color de fondo, por lo que tendremos que trabajar con manejadores de eventos, manipular el DOM, crear nuestro generador de números pseudorandomizados...
Crearemos un globo de 200px mínimo y 420px de máximo que se hinchará (y modificará su color) cuando presionemos sobre él, y se desinflará al alejar el ratón de él.
Este ejercicio consiste en hacer una pequeña calculadora sencilla. Aunque no hay requerimientos en cuanto a la parte estética, sí se establece en el subject qué elementos deben componerla por lo que el resultado final debería seguir una estructura algo similar a esta:
Además incluye eventos de tiempo ya que cada 30 segundos debe aparecer una alerta.
Deberemos crear una lista de tareas en un elemento de tipo lista que reciba input del usuario a través de un prompt, y que pueda eliminar las tareas haciendo click sobre ellas. Manejo del DOM y eventos a tope.
Lo realmente novedoso e interesante de este proyecto se encuentra en una tarea adicional del subject, la cual pide que los elementos dentro de la lista se mantenga al recargar la página o al salir de esta. Piden emplear cookies pero finalmente opté por usar localStorage ya que en general es recomendable usarlo frente a las cookies salvo que se necesite enviar algo a un servidor, además de proporcionar una manipulación más cómoda y evitar problemas con los navegadores. El resultado es el siguiente:
El local storage se compone, al igual que las cookies, de una "clave" y de su contenido. Gracias a la clave podemos acceder al contenido que hemos almacenado. En este caso para poder acceder facilmente a los elementos, he trabajado como si de un array se tratara: las claves serán números consecutivos empezando por el 1 como si de posiciones se tratara (la posición 0 está ocupada almacenando "n", una información vital para el correcto funcionamiento de este planteamiento).
Cuando se recarga la página se activa un evento que va recorriendo de 1 a "n" el posible contenido de localStorage, y si no es nulo, lo coloca en la lista tal como hizo el usuario. "n" es el número correspondiente a la clave del último elemento almacenado, y lo almacenamos en la posición 0 de localStorage, es decir, la clave "0". Según se van borrando elementos, las claves dejan de ser números consetivos, pero lo importante es conocer cual es el último de estos números para asegurarnos que no se sobreescriba ningún elemento.
Si se detecta que ya no quedan elementos en la lista, n se resetea a 0.
