Courses/Design & Technique-Essential Web Design/Q1

From Publication Station

Common Ground: I am what I want

Hello, welcome to my homepage. Hope you like it. If you do feel free to send me an email.

from http://oneterabyteofkilobyteage.tumblr.com

from http://oneterabyteofkilobyteage.tumblr.com


These and many similar personal websites were common mid-90's. Before the arrival of the templated designs of Wordpress, Facebook, Twitter, Tumble and Instagram, where profiles and makes look similar from user to user, it was common to build and design your own website - your home on the Web - whether you were a student, a cat or the Belgian royal family.

Building your own website was the way to present yourself to the world in the nascent medium of the Web. Since this digital environment allows you to present yourself as you feel like, you can choose to design who you are online and how the world will see you. Online identities can be affirmed, confused, or invented. You can decide you want to present yourself to the world by inform it on every move you make and photo you take, or you can pretend to be someone else by coming up with a fictional character, or anything between these two extremes.

Dog meme.jpg

In order to achieve this goal in Design & Technique you will learn how to design web-pages from scratch. Will be focusing on the use of HTML and CSS, which are the essential tools for web design, but are also becoming more and more relevant for the creation of ebook, apps and even paper publication.


Classes

Weekly classes will take the form of an seminars where specific aspects of HTML and CSS be presented, explored and applied. Examples of web-based works that explore identity, fictional characters and stories will be presented and discussed. Each class will combine both expository and hands-on work. Between each classes, students are expected to experiment and apply to their deliverable the subjects explored in classes.

Deliverable

From the very beginning of this course you will be asked to start constructing a weblog or timeline that follows you (or whom you choose to be) and present who you are to the world.

You are what you ... think, eat, buy, walk, write, read, browse, listen to, collect... While do these activities you create or run across their traces in: shopping lists, receipts, emails, chats, browser history, maps of your location, selfies, etc. You'll be asked to assemble some of these traces and build your weblog with them, in order to give the world an idea of whom you are (or choose to be). Every week you'll add more traces and grow your weblog

In addition you'll have to make decisions on how these traces are communicated visually. You'll have to explore the design of weblog so that it helps you present yourself in away that you wish.





Classes

week 1 - The Internet and the Web

Courses/Design & Technique-Essential Web Design/01

  • What do you I use the Internet for?
  • Are the Internet and the Web the same? What is the difference between them?
  • Distinction between the Internet (the infrastructure, like a highway) and the Web (one of the vehicles of the highway)
  • (Brief) History of the Internet - a information highway build for the military
  • (Brief) History of the Web - a wold-wide documentation system build for scientists

Films

Degoutin, Stéphane, and Gwenola Wagon. World Brain Stéphane Degoutin & Gwenola Wagon, 2012. http://worldbrain.arte.tv.

Optional Reading

Stephenson, Neal. “Mother Earth Mother Board.” Wired, http://archive.wired.com/wired/archive/4.12/ffglass_pr.html.


week 2 - HTML: a language for browsers humans

Courses/Design & Technique-Essential Web Design/02

  • What is a Web page?
  • What happens when I save a web-page? What files do I save?
  • The Browser: the interpreter
  • HTML
    • tags: are ways of saying this = a image, that = a paragraph
    • Essential HTML page structure
    • Basic content tags: p, b, i, img ...
    • hyper-links
  • Prototype: scribbling a simple webpage
  • Homework: save any website you want and change it into something else.


week 3 - CSS style or the clothes of HTML

Courses/Design & Technique-Essential Web Design/03

  • CSS as a way to visually present the content
  • CSS style-sheet
  • Id and Classes identifiers
  • CSS colors: RGB and hex triplets
  • Inspector for CSS
  • Homework: save any website, keep its content and structure as it is, but by simply styling its CSS, make it into something different.

week 4 - CSS for typography

Courses/Design & Technique-Essential Web Design/04

  • CSS for web typography
  • Web Fonts
    • Default fonts
    • Embedded Fonts
    • Open Fonts Licenses

week 5 - Web to print

Courses/Design & Technique-Essential Web Design/05

week 6 - screen-page dialogues

Courses/Design & Technique-Essential Web Design/06

  • Post-digital moment - analog and digital reading coexisting
  • Examples of projects that embrace the 2 forms and establish a dialog between them
  • How can the work developed for the web exist also in physical?
  • How can the physical and analog publication make its way to the screen?
  • Discussion of work in development


week 7 - uploading webpages to server

Courses/Design & Technique-Essential Web Design/07

List of deliverables

  1. Create a webpage that is a minimalist painting.
  2. Build a short story using links. At each link the user learns more,

or gets more confused, about the story. It can simply be a labyrinth.

  1. Find a text that you consider interesting; place it on a webpage;

Type-set it with CSS, so that the style either illustrates, contradicts or is in dialog with the content ( use at least one custom font )

  1. Transform the type-set text (from previous week) into a a ready to

print PDF and print it.

  1. (re)present a part of your fanzine to your web project;




Software Required

To send to Wilco:

   XCode 
   Git - http://git-scm.com/download/mac
   Github - https://mac.github.com/
   Pandoc - http://github.com/jgm/pandoc/releases
   Sublime text - http://www.sublimetext.com/ 
   Firefox (latest version - 40) - http://www.getfirefox.com/
   Chrome - https://www.google.com/chrome/
   Filezilla https://filezilla-project.org/
   Inkscape - http://inkscape.org/en/ 
   Calibre - http://calibre-ebook.com/ 

http://www.w3.org/Talks/2012/0416-CSS-WWW2012/ CSS galore


Courses/Design & Technique-Essential_Web_Design/brainstorm