Making a Poetic Web(site)

A workshop for Developh by Chia
this class page is constantly updated, stay tuned!

Notes

If you questions at any point, feel free to raise them in the chat or speak up~

While the class won't be recorded, this page will constantly be updated—nearly every prompt is on this page. It is designed for you to be able to follow along.

Because I have nothing else useful to say here, you can use this area as your personal notetaking space. Change the "Notes" title to your name, try it! This text is editable! It will disappear when you refresh the page, though. So don't put anything too important. The web is ephemeral.





Links

If you have resources, readings, or sample sites on a 'poetic web' to share with everyone... add them to this Google Doc!

Open Google Doc in another tab

Are.na

Manifestos for the Web

Interesting (& Sometimes, Relatively Simple) Websites

Resources & more



Support Developh

If you are using this workshop website after the sessions and found it helpful, the suggested donation is $4. Donations go towards Developh programming and the workshop host.




The web is what we make it. ...I believe the common prevailing metaphor—the internet as cloud—is problematic. The internet is not one all-encompassing, mysterious, and untouchable thing. (In early patent drawings depicting the internet, it appears as related shapes: a blob, brain, or explosion.) These metaphors obfuscate the reality that the internet is made up of individual nodes: individual computers talking to other individual computers.
My website is a shifting house next to a river of knowledge. What could yours be?, by Laurel Schwulst



chiaski.github.io/poeticweb

Everything is contained in the class site above. You're encouraged to scroll at a pace you'd like, dwell anywhere you need, and go back and forth.

Don't be pressured to rush through. Ask questions. Below you'll find the exercises and samples that we're going through, along with additional resources and materials. We want to share an abundance of links and rabbitholes that can help you. Don't be pressured to zoom through each exercise — feel free to continue dwelling on any work that has touched you most.


~ ~ ~

00. Welcome

Logistics

This is targeted towards non-developers. If you are experienced with HTML/CSS/JS, it will be more interesting conceptually rather than technically.

You will not be learning best practices. I want to think about poetry that is plundered and part of all that had come before it. This is applied to websites. We will be ripping things apart, I will be directing you to Google (because the most crucial learning is "how to think" and "how to write queries and prompts that get me to where I want to be quickly" more than anything else)... this is focused on expression, first and foremost.

The goal is to start creating. To think conceptually. To realize that you don't need to 'learn everything' to begin making websites, and that you can learn as you go.

If you ever have questions or need any help, please don't hesitate to ask! Everything is contained in this website so you can look at things at your own pace. Feel free to dwell more into an activity that spoke to you, etc.

Exercise A. Please introduce yourself in the Google Docs below. Feel free to comment on other people's messages! You can write your name & where you're from and/or based, your website (if any), and your favorite website. If you'd like to speak up and share, you're encouraged to do so!

Who are you?

Open Cryptpad in another tab

Next, another icebreaker wall!

If you haven't gotten enough, here are more prompts that you can answer.

Drag around and type. Please don't erase anyone else's words!


Open Your World of Text in another tab


   (\(\
   ( -.-)
   o_(")(")

~ 20 MINUTES ~

Why a poetic web?

Almost every website you browse today is maintained by large corporations, seeking to centralize our behavior. They are privately-controlled spaces that act as public ones. Go Google "Create a website" and a million 'site builders' promise you e-commerce solutions, ways to drive traffic, launch your business, build your brand or portfolio, showcase your art... Maybe you even want to do one of these things. We connect to websites but often feel disconected. Notice how many of these relate to attention, a performance, a gathering? (That's not the only takeaway, but a big one.)

What is the web today? What can the web be? What can a website be?

The web is only the way it is because people have built it to be this way. It is seemingly strange that today, we seemingly have more tools than ever — but it seems a 'rarer' act to go out and publish something... but this shouldn't be a surprise. Information is obscured and gated, places where we can express ourselves and connect are often monetized. This is why it is worth moving towards a more handmade web—one that we've shaped ourselves. After all, the web is only the way it is because people have built it to be this way.

Once you resist the current standard of what a 'website' in the 'web' looks like today, it is far easier to imagine what a website could be.

A website after all, is fundamentally a vessel. It doesn't even have to serve 'content'. It doesn't have to be shared out to the whole world; it can be a link that only your friends have, or you can keep it all to yourself. It can have pictures and text and other links across multiple pages and even custom interactions, or it can just be a Google Doc. You can gather at a website from anywhere in the world in a single click, and begin sharing different entrypoints to your website by sharing the URL. You can have multiple websites for specific purposes, it doesn't have to host everything. Publishing' your website doesn't have to mean that it's finished; you are free to make an edit and have it appear instantaneously a second later. Or you can never touch it again and let it die. You can remove anything at once. You design the environment.

A website is essentially a world you design. What will yours be?

A poetic web is one that I imagine to be about creativity, expression, and the handmade. A lot of these thoughts resist the current state of the web: incredibly centralized, capital-driven, attention-seeking—far from what we associate with art.


"The more proprietary, predatory, and puerile a place the web becomes, the more committed I am to using it in poetic and intransigent ways." — JR Carpenter, March 2015

~ ~ ~

Making a Poetic Web

I want to think about your existing relationship with the internet and your thoughts about websites. What can a website be, and what doesn't it have to be?

Let go of your existing notions of what the modern web looks like; return to more natural influences, for instance. A website can be anything. Compare it to something abstract, an animal, or another container with specific affordances. Think of qualities that you want in your website. Think of it as a piece of art, like a painting or a poem.

Contribute to the Google Doc below.


What can a website be?

Open Google Doc in another tab

~ ~ ~


How to explore these exercises

First, we imagine.

Take a look at the first two exercise prompts and 'remix' them on Glitch. Preview the code and begin by modifying one thing at a time. Try to understand what each thing changes.

Choose an exercise that you are most interested on building on.

Settle on a concept, or tweak one thing at a time until you want to lean into that modification as the centerpiece of your work.

If you add any other modifications, I suggest making a new page. Maybe each page builds on the code from the pages before it, or each page is a new tweak.

Imitate, copy, understand. Take things slowly. Focus on what you imagine. This workshop is not about best practices or doing things 'right', it's about getting you to do. Break down your concept into technical questions, search for them, and you will create your piece.

And then, we must make.

The biggest constraint to making is what we can imagine. HTML, CSS, and Javascript are tools you employ to make what you desire. This is why we first focus on concept.

Technology is a bridge; let it be a bridge and not a barrier.

Do not worry about what is below the code and let go of your fears in making. Think of something and let your website slowly get there.



Other challenges

  • Pair up with someone else in the class. A stranger or a friend. Work on your website together.
  • Force yourself to pick one of the concepts in the 'What can a website be?' list above and make it.
  • Copy a website that is not in one of the exercises below, tweak one fundamental aspect of it.
  • Turn something else you have made into a website.
  • Use Exercise 1 or 2. Make at least 10 different versions of them, each tweaking one thing. Do this by adding additional pages to your Glitch project.

How to use Glitch

Glitch is a collaborative code editor that we'll be using to remix and preview work. Click on each exercise's Glitch page to see a screen like below.

  • Remixing. We will remix the Glitch project so you can create your own copy of the file. You'll have your own project after a bit of a load — the URL you see is actually a live site!
  • Files. The left sidebar contains the files in your project. You can upload images to Glitch here and create new pages too. If you don't see it, it might be collapsed—find a ">>" icon to surface it.
  • Tools. You can revert edits and import/export your file here. I highly recommend downloading your project by hitting Tools > Import/Export > Download Project with the turtle; it gives you a .zip folder containing your entire project that you can now edit locally or later upload to Github. You can also sync your project to Github if you have one.
  • Preview. If you don't see a preview of your website, toggle it by hitting the 'Preview' button and opening a preview pane, or open it in a new window. This preview pane refreshes automatically and is super helpful for looking through code.
  • Project URL. If you are editing other files in your project that aren't index.html, you will have to navigate to that file in the preview pane to see it. For instance, if you're editing 'images.html' just type that in to see it!
  • Make sure to download your project or create a Glitch account so you can save your work! If you've made your exercise without an account, the project page gets deleted in 5 days.


~ ~ ~


EXERCISE ONE:
A Moving Poem

In the workshop's most literal sense: let's try creating a moving poem. Are you familiar with concrete poetry? Interactive fiction? What can the nature of a website's interactivity provide to words?

Let's investigate how the form of a poem might change and evolve on a website — that is, all its different possibilities.


Open Fifteen Words by Jess Mae in another tab

Your Own Moving Poem

With basic HTML, CSS, Javascript, and jQuery, we'll be manipulating a moving poem. The template is set up and we'll be manipulating values and learning as we go along.

Focus on changing one thing at a time and trying to understand what it's changing.

The magical thing about code is that we can change one thing and instantly see some sort of feedback. Coding a website is just like a dance in response to one another.


A Moving Poem

Exercise One: A Moving Poem Template (Glitch)
CLICK MEEE TO GET THE COOODE


Prompts...



More on the code

Below is further explanation about the code. You don't have to read it before starting the exercise.

There are three languages primarily used here to make the site.

HTML consists of elements that structure the page (so the other languages are interspersed between HTML) and also labels content.

We use tags enclosed in brackets < > to write an HTML element. The ending tag has a slash / before its name, marking the end of a tag. We write the 'content' within these tags.
HTML elements can contain words like <bold>this</bold>, or they might contain other HTML elements to provide structure. In the code example above, <html> begins the document.

You might notice that some HTML tags aren't as simple. HTML elements can contain attributes, where here title="rain comes"; the attribute 'title' with the value 'rain comes' gives some additional effects and properties to our HTML element.


CSS affects the 'styling' of the page, and begins within the HTML tags <style. As it's a different language, the syntax looks a bit different: but you may notice that the names of HTML elements are referenced before curly brackets {} enclose rules about HTML's appearance.

Here, the element 'body' is given a property 'text-align' with a value 'center'. We end each property with a semicolon ; so we can assign multiple properties to an element, evolving its appearance. Other properties you could try are 'color', 'font-size', or 'padding', for instance. Properties and the values they take aren't always intuitive, so you're encouraged to look things up. For instance, the property 'opacity' takes values from 0 to 1.


Javascript provides the movement of our exercise and is used for interactivity. We use external libraries, primarily jQuery and its accompanying jQuery UI that have prewritten functions to make our desired interactions easier to achieve. The HTML element <script> that takes in URLs is calling these external libraries. Note that this workshop doesn't focus on Javascript and in fact — normal Javascript without jQuery wouldn't look this way. The syntax with dollar signs $ is primarily associated with jQuery (but not exclusively).




~ 15 MINUTES ~

EXERCISE TWO:
I love it when you

make a website with me; take this love letter and riff off it.


View the full website

I love it when you...

Exercise Two: I Love it when you template (Glitch) or Exercise Two: I Love it when you template (Github)


Prompts...



~ THE REST OF YOUR TIME ~

EXERCISE THREE:
Rip it off

This prompt is far less directed. Think about your initial idea for a website—whether it was something grand, or now you just want to make a little personal site.

Build something from an idea you or someone else had. If it's a bit too much, try to scale it down. Take an existing template and tweak one small aspect of it —lean into that one modification.
If you wanted to build a world, start with a small room. Make a tour of your desk, for instance. Latch onto something you really like conceptually so that you have a finished output to share—whether you're ready to put it on the class sheet right during this meeting or you'll be working on it more throughout the day. The goal of this is to be able to present something.

Copy and paste ideas
Treat nothing as precious
Love your concept
Break things down incrementally
Start by modifying one small thing at a time
Break things down so you can Google pieces one by one and add them together


An Idea for a Website by Ian McDonald

Take a look at the above for inspiration. Play with the links in the left scrollbar to find additional inspiration. Radically rework the first two exercises.



Want more ideas? Take a look at our nifty idea generator.
You can even rip this off and make something from it. Take the code if you like!

You will constantly be searching for how to build fragments of your work, even when starting it out. Let's put that into practice.



...

Have something to share?

Put your exercises on this sheet. If you're still in the workshop and have time, we highly encourage you to screen share and have fun with calling out your ideas and progress so far!

Add it to the class sheet.

~~~

Snippets

Code bits you can use in your work. Select the textarea to copy the code to your clipboard.

Tags & elements

The <details> and <summary tags can be used to create collapsibles
like this Can you make an entire poem out of tihs?
Wheeeee
Wheeeeeeeeeeeee

Attributes

Hover over this block to see additional text
Make an element editable, like the 'Notes' section on the left. Try it on the whole <body>
add a spelchekc to yuor div tht will suquiggle typooes whne its editde (try to tyep in me)

Styling

Make rainbow text. Try to change this to affect the background color.
Make gradient text
Try out CSS counters (like what's used in this section)
Make something shake
Make effects transition
Make something spin around
Add a colorful scrollbar (make sure your page actually scrolls!)
Make text glow using <text-shadow>; add this to your element. You can combine multiple text-shadows by separating them with a ,

JavaScript

Be sure to enclose these in the appropriate <script type="text/javascript> tag!
Make an alert popup, like the one you'd get by clicking on me
Make a confirm popup, like the one you'd get by clicking on me – which changes depending on user selection
Add this to your Javascript: And have a button in your body with this:
Shuffle the position of the elements on the page

~~~

Publishing

How do you carve a space for yourself on the web? This is a completely inexhaustive list; feel free to share your own recommendations!

Option 1: Glitch

If you used Glitch from any of the templates, simply create an account so you can preserve your file. (Otherwise it gets deleted in 5 days.) Each project gets its own Glitch url that you can freely share!

Glitch

Option 2: Github

Another (slightly more difficult) standard is Github. Github is the industry standard for storing and tracking software projects in repositories. Github Pages is its service that allows you to turn your repositories into sites with ease. On Github, your projects are all served under your own subdomain (like this site!).

For each project, you would create a new repository and upload your files. Github Pagesneeds to be enabled in the settings of each repository; make sure your index.html file is in the root of your repository.
For managing files, I personally use Github Desktop to handle all the file transfers from my local computer — it makes things incredibly easy.

You can connect your Github and Glitch accounts to quickly import/export projects as repositories. Alternatively, you can download your Glitch project as a .zip, unzip it on your local computer, and drag & drop it onto Github's site.

Github & Github Pages Information

Option 3: Get your own web hosting or a server

A bit too much to explain briefly — but this would give you total control. Buy a domain and shared hosting + a server; you're set.

Popular options include Porkbun, Namecheap, Neocities (this is free), among others.


How about a domain?

You can buy a domain and connect it to Glitch or Github. You would need a domain for Option 3.