CCFest August 2021
~Homepage Builders~

(c) IBM
Workshop on August 22th, 2021 at CCFest by Flor de Fuego and Naoto Hieda.
🌐html + css
🌎🌍🌏
html: lenguaje de etiquetas
css: lenguaje de estilos
html: tag language css: style language
🧬+💅
html nos da la estructura de nuestra web, mientras que css nos proporciona el estilo
html gives us the structure of our web, while css gives us the styling

Tendremos un archivo, en principio que sera nuestra pagina principal en este caso con el formato de archivo “.html”
We will have a file which basically is our main page in this case with the file format ".html".
por ejemplo: “index.html” 🖐
for example: “index.html” 🖐
Hay varias maneras de conectar el css con el html, creo que la más “prolija” es generar una carpeta con formato css. Ej: style.css
There are several ways to connect the css with the html. I think the "cleanest" way is to generate a file with css format. Ex: style.css
(esto igual depende de cuanto queramos intervenir en nuestro look😎💅 )
(this still depends on how much we want to intervene in our look😎💅 )
🔥(optional) Hydra web
Me permite generar un elemento <canvas> en el que voy a poder poner gráficos construidos en Hydra dentro de una web, donde puedo combinar elementos html, css y javascript; para poder realizar diversas propuestas experimentales.
It allows us to generate a <canvas> element in which we will be able to put graphics built in Hydra inside a web, where we can combine html, css and javascript elements; to be able to make several experiments.
Ejemplo de Olivia Jack para remixar
Example by Olivia Jack for remixing
Ejemplo para remixar que les hice <3
Example for remixing that Flor made <3
🏰Why homepage?
🎡Collection
A collection of experimental websites made by Flor and Naoto.
-
Glitch Me
Hydra📸 -
Beyond Sloth
p5.jsHydra -
De Noche
p5.jsHydra🔊 -
Platinum Typical Twist
p5.jsHydraTone.js🔊 -
Beyond Noise
p5.jsHydraTone.js🔊 -
Tone Squares
p5.jsTone.js🔊 -
hydraglitchyp5
p5.jsHydra -
color p5 background
p5.jsHydra -
DOM Party
Hydra -
p5imagearray
p5.js📸 -
Glitter Nails
Hydra🔊
🐾Let's start!
Open p5.js web Editor⤴ (registration not required... but recommended for saving later)
Press > and choose index.html. Press ▶ to preview!
(alternatively) sign up on glitch.com⤴ and publish your website!
🔜Scrolling Text
👷Under Construction
Choose your favorite GIF from textfiles.com⤴

🌟(optional) p5.js Background
📞Contacts
🦥Flor de Fuego
🐧Naoto Hieda