Week 1: January 28: Introductions + HTML + CSS

Hi All! 

Welcome to the class page for Design2B Spring 2019! I’ll be updating these pages each week. We’ll use this site as a resource and a place to see your ongoing assignments.

1/28 Itinerary

Introductions / Syllabus
Student Surveys 
Draw the Internet 
Are.na 
Introduction to how the Internet Works
Newspaper Exercise
HTML Introduction 
Data Collection + First website 
Webring Exercise 
HTML/CSS Manifesto 
Project 1 – Portfolio Assigned 
Homework Assigned

Draw the Internet

Take 10 minutes and a piece of paper to sketch out what you think the internet looks like. This can be as abstract or as literal, as serious or as humorous, or as artistic or  as you choose it to be. 

Join Are.na!

Please post at least 6 images a week here to our class group. You can post anything from artists’ work you find interesting, designs you like (or hate), typefaces that excite you, tutorials you find helpful, or anything tangentially related to this course.

How the Internet Works

DNS – Domain Name System. An address system for the Internet, that allows packets to find their way to the correct socket/location.

TCP/IP – Protocols which ensure that data “packets” arrive at their destination.

HTTP – Hyper-Text Transfer Protocol. The foundation of the www. These are the rules for transfering web-based data.

HTML — Hyper-Text Markup Language. Rules for how to structure hypertext data — in this case a language is just another kind of protocol

Newspaper Exercise

10 minutes. I’ve given each of you a piece of the newspaper or a magazine. I want each of you to outline all of the elements of content within the paper using pen/marker/pencil. Invent labels for each section to describe what they are.

HTML and CSS Intro!

 

Class Exercises

Setting up Rutgers Server

home – This is the mountable portion of the server that contains all of your documents.

Drive – This folder is used for cloud-based files. These files an easily be moved around remotely and shared easily between other users.

<username> – This folder ( usually matches your last name) contains all of your standard computer storage including your Desktop files, Photos, Documents folder, etc

www – This folder is for personal web storage. Items in this folder can be made public through the URL : https://artfiles.rutgers.edu/~<username>@art.rutgers.edu . Older art.rutgers.edu/~<username> links will automatically be forwarded to the new link.

Please note. The “drive” and “www” folder are one level above your network directory. It would be helpful to add the “path” option to your finder window. This can be achieved by right-clicking on the top of the finder window and adding the “path” icon.

Structure

Everything will go inside your www folder. I would recommend making a Current-Work Folder (Notice the dash!), and for each new project you will make a folder inside there.

  • www
  • index.html 
  • styles.css
  •  Current-work
    •  Manifesto
      • Manifesto.html
      • Manifesto.css
    • Data-Survey
      • dataSurvey.html
      • dataSurvey.css

Data Survey

Directions: Each of you will come up with a question to ask each other person in the classroom about their art practice. It can be something about their habits, influences, earliest memory, things they hate. No more than a sentence per person – and think of something beyond ‘favorite color’ or ‘favorite artist‘. You will take this data and create website list featuring both your question and their responses. 
Include images to either accompany or replace each response.
Save your file as dataSurvey.html

Example File Skeleton

Webring

Directions: I will give each student a snippet of text and the names of one student. Style the text on a page and create a Next link to the fellow student’s site. Include at least two images.
Save your file as ringo.html
You will have to ask them what their username is and make sure that you use:

<a href="https://artfiles.rutgers.edu/~studentUsername@art.rutgers.edu/ringo.html">Next</a>

HTML Manifesto

Directions: What do you think are the best designs for the web?
Create a 20 line website where each line is a description of the CSS property and value.
Look through the CSS reference to discover new CSS properties and how to use them.
Import at least two Google Fonts.
You will use an external style sheet. 
Save your files as manifesto.html and manifestoStyle.css

I have updated a Manifesto Template below. You will follow the pattern shown with using id attributes to access each <p> tag in the manifesto. I did not get to talking about these in class, but feel confident that you can figure out how to do this on your own. 

Using ID tags embedded into each element is one method of accessing elements inside the HTML file to style them how you like.  An ID tag may only be used once per page, but you can have as many as you like. If you want to have CSS affect multiple elements, you would use a CLASS. 

To use an id tag in the HTML file, you have to use the format of id=”yourtexthere” inside your opening tag eg:

<p id="one">Please make this text purple</p>

In the CSS file you access an ID inside the file the CSS is linked to by placing a hashtag in front of the text you used. To access the line above in CSS you would write:

#one{color:purple;}

An additional online description and tutorial can be found here.

~~~~~Manifesto Template~~~~~

Homework