WEEK SIX: THE DOM / by Maya Pruitt

Usually I use my blog posts to describe my homework sketches, but I also need to air out some grievances. I found working with the developer tools on the New York Times home page to be extremely frustrating. On one hand it’s very empowering to make changes to an existing site and see it displayed in real time, but with so much content on the NYT site, I found google’s display of the developer tools to be overwhelming. I had a hard time figuring out what parts were even adjustable.

To Mimi, can we do a quick re-review of this and its parts? And maybe discuss the applications of the developer tools, why do programmers use that? What is its true purpose?

Now back to the fun part - this week’s sketch:

Our assignment was to create our own webpage using HTML, CSS, and P5 javascript. This was fun for me, because I got to start to bring to life a design I had done in the past. In the Graphic Design/UX section of my portfolio, you can see my design for ZODIAPP: an app about the Chinese Zodiac. I had sketched out the look of the app and even animated the types of interactions it could have. While there are tools like InDesign, that allow UX designers to prototype these interactions for user testing, it is a whole new world being able to actually create the code behind them. This assignment allowed me to do just that!

Original design

Original design

Translating into HTML

Translating into HTML

We had a few parameters to meet:

  1. Pre-defined HTML Elements

  2. Pre-defined CSS Styles

  3. HTML Elements generated by your p5 sketch

  4. Some kind of mouse interaction with an HTML Element using a callback function you write.

1. I used a bunch of pre-defined HTML elements, such as <div> <h3> and <font>. These elements allowed me to create the navigation bar at the top and gave me quite a bit of control. I could change the font color to white, as well as type the actual text to display. H3 gave me a default size that I liked best. Fun fact: spaces won’t change the way text displays. If you want actual white space, say in between each phrase in a navigation bar, you can use the special characters “&nbsp”.

<img id="logo" src="zodiapp_logo.png" />
<div id="navbar">
  <h3> <font color="white"> Horoscope &nbsp &nbsp &nbsp Story of the Zodiac &nbsp &nbsp &nbsp Animal Gallery &nbsp &nbsp &nbsp 2018</font>
  </h3>
</div>

(lines 11-15 in index.html)

I also used the predefined <img> element to load my logo image.

2. CSS styles allowed me to give properties to the HTML elements I created. For example, this is where I could give the navigation bar its background color and center align the text. In addition, I could modify the logo image. I learned a cool trick that if you want to adjust the scale of an image, you can set one dimension to a specific value and then the other dimension to “auto”. This will maintain the original dimensions of the image and prevent any weird stretching. Lastly, I set the entire background color of my webpage here. 

html, body {
  margin: 0;
  padding: 0;
  background-color: #f9f4d9;
}

#logo{
  width:200px;
  height:auto; 
  /* auto keeps the dimensions of the original image*/
}

#navbar{
  background-color: gray;
  text-align: center;
}

(lines 1-16 in style.css)

3. It is also possible to create HTML elements within p5 itself, which allows for a whole different set of controls. It makes sense to generate HTML elements with p5 if you want to manipulate them in some way, so createButton() seemed perfect for this. In addition, I created the footer in p5. I thought this would give me more control for customizing the div element, but I couldn’t figure it out as easily as I did the HTML way. However, in the future if I wanted to create rollover (mouseOver() / mouseOut) events with the navigation bar and footer, say highlighting each word to a different color to indicate a link, maybe p5 would be the best place to create these elements.

  let button = createButton("SPIN");
  button.position(20,110);
  
  let footer = createDiv("About | Help | Contact Us");
  footer.position(275, 850);

(lines 12-16 in sketch.js)

4. Creating the mouse interaction was my favorite part because making a wheel of zodiac animals spin has been a part of my concept for this since day one. My goal was to have the wheel spin when the mouse clicked on the button. Here is where javascript ties it all together and puts an animated element on the webpage. I uploaded another image into the sketch.js file using the preload() function. I created a function called spin() which creates the spinning behavior. In order to get the button working correctly, I had to create a toggle switch, like we learned with the bouncing ball. This was stored in another function called spinOn(). The button can then use mousePressed to callback to the spinOn() switch function. Ideally I wanted this to look more like: wheel.spin() and button.mousePressed(spin), but I couldn't get it working like that. Would I need to create a wheel class? I’m pretty sure I could make a class for the wheel image and turn it into an object. It would be fun to expand on this in the future to make it more dynamic.

zodiapp_hw_html.gif
428px-DOM-model.svg.png

Oh, also to my non-ITP readers, in case you were wondering, DOM stands for The Document Object Model. It’s a kind of hierarchal way of organizing website programing/HTML . But to me “The DOM” sounds like a fancy ass queen, which is why it seemed like a sufficient title. k Yamz out.

Try dat spin button for yourself here.

Posted in