This is a Google Doc that provides additional links and resources that add to the content for this class. Things like CSS color pickers, artists' and designers' websites, etc..
This lecture introduces you to the Net.art movement and art historical concepts that led to artists creating works for a networked platform.
CSS:
Floats & Positioning
This lecture introduces you to key concepts that you need in order to structure divs in HTML & CSS. These concepts are fundamental to creating all projects from the Albers project and later.
This lecture introduces you to ASCII Art with research from "The Lost Ancestors of ASCII Art"
By Alexis C. Madrigal and featuring artwork by A. Bill Miller
This lecture presents artists working with physical computing.
Follow
Along
In Class!
Demos
See Google Drive share folder for Demos after they are given in class.
Readings
Follow along with the course schedule for the reading dates, or read ahead. Note: Some of the readings below are supplemental (not required) and there may be additional readings found on the Course Schedule.
Visit "Curriculum" (link is in upper right of screen).
Locate the "Basic HTML and HTML5" course. Complete all of the free exercises in the course, 100%.
As you complete the exercises when they are due on the course schedule, show them to your professor so your points can be marked. Only completed freecodecamp courses will be accepted for points.
Note that freecodecamp exercises will not be accepted late.
Visit "Curriculum" (link is in upper right of screen).
Locate the "Basic CSS" course. Complete all of the free exercises in the course, 100%.
As you complete the exercises when they are due on the course schedule, show them to your professor so your points can be marked. Only completed freecodecamp courses will be accepted for points.
Note that freecodecamp exercises will not be accepted late.
Visit "Curriculum" (link is in upper right of screen).
Locate the "CSS Flexbox" course. Complete all of the free exercises in the course, 100%.
As you complete the exercises when they are due on the course schedule, show them to your professor so your points can be marked. Only completed freecodecamp courses will be accepted for points.
Note that freecodecamp exercises will not be accepted late.
Grading Criteria:
Completed as per the course calendar.
Introduce Yourself: Site Samples
Description:
For this project, you will create a 1-page .html document that will tell us a little about you. For many of you, this will be your first .html document while some of you may have made many before.
Submission Instructions(See Course Schedule for Dates):
Title your root folder “lastName_firstName_Introduce.”
Create a 1-page website using the html we have learned so far or using the template below.
Create a new document in a text editor (such as Brackets or Sublime text)
Save this document in a root folder with the “.html” file extension
Your site should contain a doctype declaration, a head (including a page title), and a body section.
In the body, create 3 paragraphs and tell us 3 things about yourself:
Suggested prompts:
Where are you from?
What is your favorite season and why?
What project did you like most in NM101?
What is your experience making websites or writing code (if any)?
Finally, select 2 websites... one that you "Like" and one that you "Don't Like".
Include a URL for these websites and discuss the sites from a critical perspective in paragraph form.
Please write in prose (full sentences that are grammatically correct).
Focus on design and interactivity when discussing these two sites.
Choose sites that are not the most "mainstream" (ie: avoid the big ones, Google, Facebook, Instagram, Twitter, Amazon).
Template:
<!DOCTYPE html>
<html>
<head>
<title>Page Title Here</title>
</head>
<body>
<p>Answer First Question</p>
<p>Answer Secton Question</p>
<p>Answer Third Question</p>
</body>
</html>
Definitions:
root folder: the folder that contains all of the files needed for your website. These must all be kept in one folder so that the files can reference one another.
doctype declaration: instruction to the web browser about what version of HTML the page is written in. (freecodecamp definition)
Choose Your Own: html + Typography
Possible Points: 725
Introduction:
For this project, you will create a web-based experience in the form of a 'choose your own adventure' story. You will create a series of linked html pages (no fewer than 25 and up to 50) that take a visitor through your narrative. There should be 3 or 4 possible endings to your story.
This project emphasises your creative portrayal of a narrative to a visitor through the use of first-person perspective. Are you taking us on a tour of a space? An emotional state? Are you taking us on a journey through an imagined otherworldly landscape? Are you taking us on a walk through the woods behind your childhood home? Can there be physical elements that accompany the website? Or another kind of story?
Your webpages should link to each other as a tree or a non-linear, multi-path navigation experience (think choose your own adventure books). Look at example “Twine” sites for inspiration twinery.org.
Instructions:
Code 25-50 linked webpages using the html we have learned so far.
Your site should be coded correctly and should function as a series of offline folders and files.
This project emphasises text and your design of type on a page. You may not use any images in your project, though you can use ASCII art.
Submit this project as a ZIP file on your Shared Google Drive folder, titled lastName_firstName_ChooseOwn
Include with your project submission 1 paragraph of text (approx 300 words) describing your idea and concept for the project. This should be an extra html page added to your site.
Suggestions for Implementation:
Write and edit your text-based narrative of 750-1000 words.
Start your designs on paper in your sketchbook for this class. These designs will allow you to work through what text from your narrative will be on each page, what the link structure of the site will be (ie: which pages will link to which other pages?), and how the pages will look.
Once you are happy with a design on paper, begin to work with the html to design your first page.
Continue creating and designing each of the pages for the site, adding links to the other pages (be sure no page is left out of the link structure).
Submit this project as a ZIP file on your Shared Google Drive folder, titled lastName_firstName_ChooseOwn.
Although it may feel 'limited' or look 'simple', navigable text on a page can be quite powerful. Use the limitations of this assignment to your creative advantage!
Grading Criteria:
145 points: Meets the criteria in the Instructions section.
145 points: Creativity and originality.
145 points: Use of typography and execution of the design.
145 points: Consideration of interactivity and user experience.
145 points: Planning and implementation: Spelling, grammar and punctuation are correct. Demonstrates an increased understanding of the use of html tags to markup text.
This will be an in-class hack experiment to create a physical computing prototype. Bring in your own recycled materials and craft materials that you have at home (ex: glue, tape, cardboard, scissors, markers, pens, glitter, etc).
Create an interactive interface using Makey Makey and some materials (paper/cardboard/hot glue, etc) to create a compelling button.
You will have a limited amount of time to work on this in class and design a creative interface. You may continue outside of class if you don't finish.
Instructions:
Create an image or gif that is 1000px x 600px.
Create your custom button (ie: two conductive objects that can both be touched to create a connection).
Create a sound (.mp3 or .wav) that pairs with your sound, button and image
Hook up your interface to the Makey Makey and Javascript we have in-class to display your image
Think about interesting ways to relate your button and image - humor or other emotive tropes are enouraged.
More information will be demonstrated in class.
Grading Criteria:
100 points: Experimentation and ingenuity.
100 points: Creative and/or ambitious.
100 points: Pairing of sound, image and physical environment.
100 points: Demonstrates an understanding of basic interactivity concepts.
Net.art: Website and Group Presentation
Possible Points: 500
Introduction:
Following the net.art in-class lecture, you will get into pairs/threes to create a website-as-research project about your assigned net.artist/artwork.
Instructions:
Research your assigned artist/artwork.
Design and code a single-page, long-scroll website that will be used to present your net.artist's work.
Your site should include images, links, and approximagely 500 words of text (that you write), including 4-5 citations of your research sources. Wikipedia may be only up to 1 of your sources.
Consider several of these questions when writing about your artist/artwork:
In what way were they using the web as a medium (considering the time/era they were working)?
In what way can this be considered art?
What is technically interesting about this project?
What was the artist trying to express? How are the techniques used helping/hindering this expression?
What kind of aesthetic choices are being made? What is deliberate or accidental?
What is the background/biography of the artist and what other works have they made?
Create this site, remembering that it will be used to present your artist and artwork to the rest of the class to teach them about the artist and artwork. Each presentation will be 5-7 minutes long. THINK: Can the design of your site reflect the aesthetic of the artwork you are researching?
Submit this project as a ZIP file on your Shared Google Drive folder, titled lastName_firstName_NetArt.
Grading Criteria:
100 points: Planning.
100 points: Research.
100 points: Collaboration.
100 points: Code and design of the site.
100 points: Final Presentation.
Albers: Homage to the Box Model
Possible Points: 200
“If one says 'Red' (the name of a color) and there are 50 people listening, it can be expected that there will be 50 reds in their minds. And one can be sure that all these reds will be very different.” Josef Albers: Interaction of Color
Introduction:
Josef Albers was a German artist/designer who taught at the Bauhaus before emigrating to the US during WWII. Here, he became highly influential to the understanding and teaching of color theory in the US as an instructor first at Black Mountain College (here in North Carolina) and later as head of the Design Department at Yale.
Beginning in 1949, Albers created hundreds of versions of 'Homage to the Square' in a variety of media. 'Homage to the Square' practically investigates the effects of colors upon one another when they are configured in a nested design.
This Assignment:
For this mini project, you will create HTML/CSS color studies inspired by Albers’ color theory exercises as a series of 3 linked webpages.
Your first 2 webpages will be based more or less directly on 2 of the Assignments in the 'Mini-Course in Color' reading. Your final page will be an experimental interpretation of the 'Mini-Course in Color' assingments that show complexity of color and shape in the browser.
You will use divs in HTML5 that are styled in CSS3, paying special attention to the size, placement, and color of elements on the page in relation to one another. Links embedded in the page will allow a user to navigate your experimental website.
Instructions:
For this project, you will develop your first 2 pages of styled divs using HTML and CSS, including floats. You will then develop your final page through an iterative design process.
Select 2 of the exercises that you would like to emulate or interpret for your first webpages (not the free study yet):
Hue as Value
Boundaries
Transparency
Color Manipulation
How Much to How Much
Color Climate
Visual Mixture
Color Interaction
Leaf Studies
Sketch some designs on paper or in Photoshop/Illustrator. Keep in mind the sizes of elements on webpages from your Wireframing assignment.
Start coding with HTML and CSS to layout the main divs/boxes on your first page (based on the in-class demos and your Duckett chapters about CSS).
Use your divs/boxes as spaces to create color studies, based (loosely) on 2 of the example exercises in the text.
Next, create 1 page that is an experimental interpretation of the 'Mini-Course in Color' assignments.
Creatively embed links into each of your 3 pages so that a viewer/user can navigate through the project and find all 3 pages via links.
Include with your project submission 1 paragraph of text (approx 300 words) describing your idea and concept for the project. This should be an extra html page added to your site.
Submit this project as a ZIP file on your Shared Google Drive folder, titled lastName_firstName_Albers.
Suggestions for Implementation:
Don't hesitate to be ambitious with your page layouts and designs --- work iteratively, build your divs and boxes until there are an extreme number of pages sections and divisions, work sparingly on one page or meticulously or obessively on another.
Start in your sketchbook by designing your box model and color studies on paper, or even with colored sheets of paper or with paint.
Try different sizes of divs/boxes along with colors to make the boxes come forward or recede in space.
Research Albers further online or acquire the text 'The Interaction of Color' to learn more about his philosophy of color theory. There are many books on Albers in our university library.
Working on the Albers project is a process of trial and error (especially when you first begin). At first, you may feel a bit like:
Keep at it!
Grading Criteria:
50 points: Meets the criteria in the Instructions section.
50 points: Initial 2 color studies based on 'Mini-Course in Color'.
50 points: Final page uses color in the browser as a creative tool.
50 points: Demonstrates an understanding of the html/css box model and coding concepts learned in class.
For this project, you will create an interactive graphic novel using self-created imagery, drawing, photography or collage.
Assignment:
Build a creative interactive project that consists of 4 (minimum) - 5 (maximum) linked webpages.
Use this project to practice, test and stretch your HTML and CSS skills -- laying out a page using divs and insetting 'content' into them. Pair text and images created for the web.
You will use divs in HTML that are styled in CSS, paying special attention to the size, placement, and color of elements on the page in relation to one another.
Links embedded in the page will allow a user to navigate your experimental website. Rollovers on the divs can make for an intersting effect.
Sketch some designs on paper or in Photoshop/Illustrator. Keep in mind the sizes of elements on your webpages.
Gather, scan or create imagery. You may not use photographic images from Google Image Search for this project, but you may use texture from Google Image Search. You may use your own photographs, but they should be taken for this project with the greater story in mind.
Use Brackets or another text editor to build your pages using divs/boxes. You may use Flexbox if you want to try it, or you can use floats and positioning properties we have already learned.
Creatively embed links into each of your pages so that a viewer/user can navigate through the project and find all 4-5 pages via links.
Include with your project submission 1 paragraph of text (approx 300 words) describing your idea and concept for the project. This should be an extra html page added to your site.
Submit this project as a ZIP file on your Shared Google Drive folder, titled lastName_firstName_GraphicNovel.
Suggestions for Implementation:
Start in your sketchbook by designing your box models and layouts on paper.
Try different sizes of divs/boxes to make the boxes come forward or recede in space.
Be ambitous with your drawings or illustrations. If you aren't a "draw-er", don't worry, use collage or photography with your phone to create images.
Focus on storytelling -- how can interactivity add to your story and make it more interesting?
Integrate the process of designing and coding your pages with creating your images.
Look at the previous students' same projects and remember that you can use "View > Developer > View Source" in Chrome to see the HTML and CSS they used for their layouts.
I am here to support and guide, please ask for help if you are stuck or discouraged.
Grading Criteria:
160 points: Meets the criteria in the Instructions section.
160 points: Planning and Execution: Well planned, ambitious and considered.
160 points: Story/Text.
160 points: Images/Illustrations.
160 points: Demonstrates an understanding html/css flexbox and coding concepts learned in class.
For this project, you will learn how to incorporate and use JavaScript with your html and CSS, and you will experiment with the use of sound in the browser.
Create an interactive page/toy/instrument that creates sound along with an interactive visual interface.
Instructions:
This is a one-page assignment. You only need to create one html page.
Use a minimum of 5 clicks, 5 images and 3 sounds in your piece.
Use Javascript but also draw on your now strong html and css knowledge to accomplish this!
Submit this project as a ZIP file on your Shared Google Drive folder, titled lastName_firstName_JavascriptExperiment.
For this project, you will use the HTML, CSS & [Javascript] that we have learned and practiced throughout this course to design and code a website of your choice.
This project gives you the opportunity to work with HTML, CSS & [Javascript] to build a more conventional site, or to continue working in an experimental way with divs and page layout. NOTE: Use of Javascript is completely optional.
Instructions:
Design your idea(s) on paper and/or in Photoshop. Create at least 3 designs of your idea(s).
Meet with your instructor to discuss your ideas and sketches.
Start working on the code and imagery for your project.
Test the layout and navigation throughout the design and build process.
Include with your project submission 1 paragraph of text (approx 300 words) describing your idea and concept for the project. This should be an extra html page added to your site.
Submit this project as a ZIP file on your Shared Google Drive folder, titled lastName_firstName_openProject_HTMLCSS.
Ideas for Inspiration:
You may not create a personal portfolio website - after you complete this course you will have the skills to do so.
A commercial web design project.
Narrative mapping of place (geography, city, interior space, exterior space).
Inclusion of drawings, video, audio, or photographic imagery (remember that all imagery must be original or non-copyright material).
Creative use of materials: scanned paper, fabrics, cut paper, leaves, textures.
Gif animations.
Hidden links.
An engaging interactive experience.
A website intended for performance or dance (may be performed in class).
Grading Criteria:
150 points: Planning and execution: Ambitious and considered.
150 points: Creativity in idea and presentation of concept.
150 points: Design, including use of color, font, layout.
150 points: Functionality and interactivity/viewer experience.
150 points: Demonstrates an increased understanding of the concepts learned throughout this semester.
For this project, you will use the HTML, CSS & Javascript that we have learned and practiced throughout this course in a parallax style.
This project gives you the opportunity to work with HTML, CSS & Javascript to build a more conventional site, or to continue working in an experimental way with divs and page layout, within a parallax framework.
Design your idea(s) on paper and/or in Photoshop. Create at least 3 designs of your idea(s).
Meet with your instructor to discuss your ideas and sketches.
Start working on the code and imagery for your project.
Test the layout and navigation throughout the design and build process.
Include with your project submission 1 paragraph of text (approx 300 words) describing your idea and concept for the project. This should be an extra html page added to your site.
Submit this project as a ZIP file on your Shared Google Drive folder, titled lastName_firstName_openProject_Parallax.
Ideas for Inspiration:
You may not create a personal portfolio website - after you complete this course you will have the skills to do so.
A commercial web design project.
Narrative mapping of place (geography, city, interior space, exterior space).
Inclusion of drawings, video, audio, or photographic imagery (remember that all imagery must be original or non-copyright material).
Creative use of materials: scanned paper, fabrics, cut paper, leaves, textures.
Gif animations.
Hidden links.
An engaging interactive experience.
A website intended for performance or dance (may be performed in class).
Grading Criteria:
150 points: Planning and execution: Ambitious and considered.
150 points: Creativity in idea and presentation of concept.
150 points: Design, including use of color, font, layout.
150 points: Functionality and interactivity/viewer experience.
150 points: Demonstrates an increased understanding of the concepts learned throughout this semester.
Open Project: Physical Computing
Possible Points: 750
Introduction:
For this project, you will experiment with physical computing using the Arduino microcontroller or Raspberry Pi.
Your professor has many physical computing supplies for you to borrow. Only choose this project if you have a strong interest in self-learning as physical computing will not be demonstrated in this intro course.
Instructions:
Research physical computing using Arduino/Raspberry Pi:
