Core 1 Interaction

September 5, 2023

Let's share some links to wake up.

Discussion: Black Gooey Universe

For those of you who, made something visual as a response, let's collect them on are.na.

Show and Tell: Your Theme

Let's talk about your three ideas for your Harmonic Collection

L2: HTML

A first dip into HyperTextMarkupLanguage

Let's go online

We’re going to dive right in and make our first web pages, no big deal! We’ll do this all together.

  1. You’ll need to download Visual Studio Code if you haven't already.

    Think of this as a fancy text editor with coding-specific features, like syntax highlighting and tabs. There are many of them! VS Code is probably the most popular, right now. It is made by Microsoft.

  2. Also download GitHub Desktop, (iF yOu HaVeN't aLrEaDy) which we’ll use to manage our code. Sign in there with your GitHub account.

    If you have already started the What is Code? reading you might also remember Ford mentioning Git, a version control software, which tracks changes and helps developers work together. GitHub is a widely-used, web-based host for Git projects—known as repositories. You can do this all via the command line (and even right from VS Code), but I think we’ll use their Desktop app for now. (This is now also owned by Microsoft.)

  3. Create a repository for your Harmonic Collection entries. Think of this as your project folder—you will use one repo for the entire semester. For consistency, let’s name them all harmonic-collection.

  4. In VS Code, make an index.html file in the directory of the repository. You can start with this HTML:

 <!DOCTYPE html>
 <html>
   <head>
     <title>Hello, world!</title>
   </head>
   <body>
     <h1>Hello, world!</h1>
     <p>This is my first web page.</p>
   </body>
 </html>

  1. Then commit this file and push your changes up to GitHub. Think of Git’s commits as tracked, commented, and reversible saves.

  2. Go to your repository on github.com.

  3. Change the visibility of your repository to public. (Your repository will most likely be set to private, which will prevent you from publishing it.)

    • You will have to scroll all the way down into the Danger Zone and set it to public there.

  4. Now that your repository is public you should be able to activate Pages, if it isn’t already.

  5. You should be able to see your page (after a couple minutes) live on github.io:

 https://yourusername.github.io/harmonic-collection/index.html

This is just an example link. Your url might vary depending on how you chose to organize your repository.

Homework

  1. Read the HTML lecture. Study it and use it as a reference, going forward.

  2. Code the first entry for your Harmonic Collection.

    • include 200 words about your theme as a HTML comment in your first entry
    • Use at least 10 different HTML elements, 5 of those elements should be elements we haven't discussed in class

    Submission

    • Upload to Canvas (Entry 1) by making a zip of your harmonic-collection folder
    • Make sure to commit your changes to GitHub with Github Desktop and double-check if they are live on your github.io page.
    • Your harmonic collection folder should have one index.html file in it:
        └── harmonic-collection/
	└── index.html

    Refine your theme

    Before you start coding your first entry, refine and sharpen your theme conceptually. Often, it helps to move from vaguer or general themes to more concise and specific ones. Here are some strategies you might find helpful:

    • Mind Mapping: Create a visual mind map of your theme. Branch out with related concepts, keywords, and ideas. This can help you identify the core elements of your theme.
    • Word Association: List keywords or phrases related to your theme, then freely associate and brainstorm ideas based on those words. Look for connections and patterns.
    • Comparative Analysis: Compare your theme to something else—a feeling, an object, a place. How does this comparison help you understand your theme differently?
    • Narrative Exploration: Imagine your theme as a story or a journey. How does this narrative perspective reveal new aspects of your theme?
    • Specific Ideas and Objects: If your theme is too broad, identify specific ideas, objects, or aspects related to it that intrigue you. Think about your personal experiences or anecdotes related to your theme. How can your theme be grounded in your own life? Your personal perspective can add depth.
    • Consider Opposites: Think about the opposite of your theme. How can exploring its antithesis shed light on its essence? For 'isolation,' consider 'connection' or 'community.'
    • Talk to a Friend: Explain your theme to a friend and discuss it. Their questions or associations might help you refine your ideas.

    Distill your ideas into 200 words that outline your refined theme conceptually. Describe what specific ideas, objects, or angles your theme now encompasses and why they intrigue you. Explain how you envision exploring this more focused theme formally through your Harmonic Collection. I am looking for your personal voice here, not an academic paper. This paragraph will serve as the foundation for your first entry, guiding your design and coding choices. Include the paragraph as a comment in your HTML sketch.

    HTML and Text Only

    For your first entry in the Harmonic Collection, we're going to make the most of your basic HTML skills. Using HTML only, create the first entry that responds to your collection. Explore the concept only through typographic or interface supporting HTML elements (no images, videos, or sounds for this entry).

    Think about your basic HTML toolkit—tags like <br>, <p>, <ul>, <li>, <h1>, <table>, <details> etc. How can you arrange and nest these fundamental elements to convey your theme and its nuances? Take a good look at all the elements that are out there, even the more obscure ones. I’m looking for you to explore and experiment. We can't write CSS just yet, but all of these elements will come with default properties that determine their behavior and appearance. Embrace these limitations as a chance to unpack and sharpen your theme through those structuring elements and the words inside of them.

    Hierarchy

    Think through the hierarchy of your entry. What is the most important piece of information? How will you define that—with spacing, alignment, scale? Is everything of equal hierarchy? Be prepared to explain how hierarchy impacted your design decisions.

    Poetry

    A lot can be done with just words on a page. And it doesn't have to be dry either. Take a look at some examples of concrete poetry. Don't be fooled by the highbrow appearance of that word. Poetry can really be anything. The same goes for just HTML elements. The html review is a place for html poetry. There is lots to explore on are.na and in the examples I gave last week.