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
- Manifesto
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
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
-
- Join Are.na – Submit one image to the class group for this week (next week will be six).
- Download Brackets to your home computer – this is free and open source, you do not have to be in the lab to do work for this course. Instructions for accessing your www files remotely are on art.rutgers.edu.
- Watch this tutorial on HTML from Laurel Schwulst, Artist + Rutgers Faculty
- Complete HTML Manifesto – See updated instructions above.
- Come to class with an html page that has links to 5 artist portfolio pages you like, and 5 you don’t
- Title this page
myprefs.html
- Title this page
- Read through the Portfolio Assignment
- Read Claire Evans, Broad Band chapters – A Computer Wanted + The Longest Game
- Read Lev Manovich, The Language of New Media (pp. 43–66)