01. Em<body>ing the Browser

What will we be doing?

You will create two drawings:

one of the actual text of the HTML page you make
a drawing of the page as it should be rendered.

You will also make notes about the subject of the drawings I would like those captured as well.

Step #1, Who?

Think of someone you care about deeply. For the sake of this exercise, let's think of an actual human being, and not say, a cat (no hating on pets). Think about, and write down, elements of their personality, disposition, attitude or general self (that is to say, non-physical) and why they make you care about them. Take about 10 minutes to think of those qualities. We'll share a few randomly.

Step #2, http://who?

Take those qualities, add or edit them and then do the following (not in a code editor).

Write (by hand, big) the basic structure for an html page
Organize the qualities of that person into different categories within div tags. (no images, media, etc.)
Reflect on how much space you have, how big you write, how writing those qualities out makes you feel
We will then share a bunch of them.

<html>
    <head>
        <title> put the person's name here </title>
    </head>

    <body>
        <div> 
            <h2>endearing qualities of their personality</h2>
            <div>
                patient
            </div>

            <div>
                caring
            </div>    
            
            <div>
                funny
            </div>
        </div>

        <div>
            <h2> things that bother me sometimes </h2>

            <div> too quiet when they are upset </div>
            <div> too focused on the future at the expense of being present</div>
        </div>

    </body>
</html>

Step #3, open the page in your personal browser

Okay now we'll get a bit abstract. Take your HTML drawing, and "render" it. This is what the browser does. It takes the input of the text you provide and styles it accordingly. Do not rewrite the text in the HTML file. But start to create a drawing that shows that quality.

Consider:

How would you render one abstract concept or idea vs another? What does "patience" look like compared to "being quick to anger"
Where do you put them on the page?
How big? How small?
How do you represent the hierarchy?
How do you place the elements near or far from each other?
How do you arrange them compositionally?

Take 20 minutes and start sketching then we'll look at them. Make an effort to not make it a portrait. Think about the concepts and ideas you wrote down and why they are important to you.

For Homework

Create a more finalized version of two of the qualities you chose.
Create a more finalized version of your html page
(these are both physical drawings you will make in real life and bring to class, they should be at least 11in. by 17in.)
Take pictures of/scan your original notes
Upload pictures/scans to the class folder.

The rules/limitations are as follows:

It should not be digital (if you have specific thing you want to do run it by me)
It should not contain pre-rendered text (ie from Photoshop or Illustrator)

Grading Criteria

Craft → 20% →If it is a pencil drawing how carefully is it handled? If it was pen and ink, what is the quality of the brush work?
Relationship Between "html page" and "browser rendering" → 20% → How did handle this translation? Was it abstract? Was it literal? How did you think about the differences in how you rendered the person and how they appear to the viewer?
Quality and Care in Lettering → 20% → How did you write out the html page? How does this also reflect your relationship to the person?
Considerations of html page content → 20% → How much did you think about your relationship with this person? How deeply? How granularly?
Material / "textural" choices → 20% → Why did you use collage? Drawing? Markers? Pencils? Was the drawing on illustration board? Canvas? How does that reflect your relationship with the person?