Difference between revisions of "Courses/Design & Technique-Essential Web Design/Q1"

From Publication Station
 
(23 intermediate revisions by the same user not shown)
Line 1: Line 1:
=Part 2: Exploring technique=
In the context of the online obsession with tutorials - you have tutorials on nearly how to do everything - you will be invited to create a website where you explore and communicate a printing technique, technology, or practitioner present in the publication station.
However you, as a graphic design student and the curious person which you are have another challenge: to make your the website far more appealing/challenging/unconventional than most online tutorials.
'' '''Create a website, where you explore and communicating a printing technique or technology of your choice.
''' ''
==The website can take the form of a:==
* a tutorial: explaining how to work with a certain technique or achieve a certain result
* a detailed description: of how a certain machine or technique works
* a collecting of interviews with practitioners, that extensive explore a given technique or technology
==Requirements for the website:==
* use your own images
* use '''at least one''' of the following media in your website:
** original audio,
** video,
** illustration
==Examples: the stories behind the technique==
* [http://additivism.org/cookbook The 3D Additivist Cookbook]
* [https://www.youtube.com/watch?v=0iJ0bNWRZH0 T-Shirt printed from a Manhole Cover] video
* [http://jasperotto.com/camouflaged-books.html Camouflaged Books]: [[File:camouflaging_books_an_instruction_manual.pdf|manual PDF|thumb|right]]
* [http://textileartscenter.com/blog/work-in-progress-digital-wax-print/ Work in Progress: Digital Wax Print] artists' portrait
* [http://www.knustpress.nl/wp-content/uploads/sites/2/Print-Overview-Anne-Vagt.jpg Kunst Press] print overview map
* [https://www.youtube.com/watch?v=E94iSzeXw68 The making of a Rainwork] video
==Examples: how to use the web to tell a story==
==Classes==
* class 1 [[Courses/Design_%26_Technique-Essential_Web_Design/Q2/01 | Vector Graphics on the web]]
* class 2 [[Courses/Design_%26_Technique-Essential_Web_Design/Q2/06 | audio and video]]
==extras==
* [[Courses/Design_%26_Technique-Essential_Web_Design/Q2/03 | JavaScript + jQuery]]
* [[Courses/Design_%26_Technique-Essential_Web_Design/Q2/02 | JavaScript]]
* [[Webcam_html | using the Webcam in the browser]] , [https://mywdka.nl/16VGWPNV12GV/#post-221 groups and intervention], [http://codepen.io/PublicationStation/pen/zoELXw jquery]
* [[Panorama on web pages]]
* [[Browser_motion]]
* [http://localhost/D_T/story/ collective story]
* Building a [[Chrome extension]]
-------
=Part 1: (in the web) I am what I want=
[[File:Dog_meme.jpg|400px]]


=Common Ground: I am what I want=
==Description==
==Description==
[[File:Oneteraby-cat.png|500px|left|from http://oneterabyteofkilobyteage.tumblr.com]]
These and many other personal websites were a common sight in the World Wide Web of the 90s and early 2000s. Before the arrival of the templated designs of Wordpress, Facebook, Twitter, Tumble and Instagram, where profiles pages look similar from user to user, it was common to build and design your own website. Your website was you 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.  


[[File:Oneteraby-belgian.png|500px|middle|from http://oneterabyteofkilobyteage.tumblr.com ]]
Since this digital environment of the Web you can design who you are online and how the world sees you.  
You can pretend to be someone else by coming up with a fictional character or you can inform the world on every move you make and each photo you take, or anything between these two extremes.


These and many other personal websites were a common sight in the World Wide Web of the 90s and early 2000s. Before the arrival of the templated designs of Wordpress, Facebook, Twitter, Tumble and Instagram, where profiles pages 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.
In order to achieve this goal in Design & Technique you will learn how to design web-pages from scratch. We will be focusing 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.
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.
 
http://68.media.tumblr.com/9276661ce34c3130ffc967dac641d089/tumblr_ovrkyeIYk61rlkewbo1_1280.png


[[File:Dog_meme.jpg]]
http://68.media.tumblr.com/fd21fa1ef3f4839c474a33eb432a3be2/tumblr_ovsj7qWuW81rlkewbo1_1280.png


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.


==Instruction==
==Instruction==
Line 20: Line 73:
Examples of web-based works that explore identity, fictional characters and stories will be presented and discussed.
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.
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.
During students and outside classes are expected to work on the deliverable by apply to their deliverable the subjects explored in classes.


==Deliverable==
==Deliverable==
From the very beginning of this course you will be asked to start constructing a we''blog'' or timeline that follows you (or whom you choose to be) and present who you are to the world.
From the very beginning of this course you will be asked to start, in groups, '''constructing a we''blog'' that registers your group's activities, or the activities of who it chooses to be, and present them 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
You are what you ... think, eat, buy, walk, write, read, browse, listen to, collect... or pretend to do - remember ''on the Internet anyone can be dog''.


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.
Shopping lists, receipts, emails, chats, browser history, maps of your location, selfies, are some of the traces of these activities. You can use these traces to build your weblog, 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 .'''


==References==
You have to make decisions on how these traces are communicated visually. '''You have to explore the design of weblog so that it helps you present yourself in away that you wish.'''
* [http://oneterabyteofkilobyteage.tumblr.com/  One Terabyte of Kilobyte Age]
 
* [http://mouchette.org/ Mouchetter]
==Web art works dealing with identity==
* Martine Neddam [http://mouchette.org/ Mouchette]
* Hassan Elahi [http://elahi.umd.edu/track/ Track Transience] ([http://www.ted.com/talks/hasan_elahi ted talk], [http://www.wired.com/2007/05/ps-transparency/ Wired article])
* Hassan Elahi [http://elahi.umd.edu/track/ Track Transience] ([http://www.ted.com/talks/hasan_elahi ted talk], [http://www.wired.com/2007/05/ps-transparency/ Wired article])


==Archives of Early Web sites==
* [http://oneterabyteofkilobyteage.tumblr.com/  One Terabyte of Kilobyte Age]
* [https://web.archive.org/ Wayback machine ]
* [http://archiveteam.org/index.php?title=Main_Page Archive Team ]
* Documentary [https://www.youtube.com/watch?v=krg3lrxHX2k Digital Amnesia]


----
==software necessary==
==Tools==
* Up-to-date version of web-browser:
* [[Courses/Design_%26_Technique-Essential_Web_Design Publication Station wiki]] - where classes notes are stored, which you can contribute to
** [https://www.mozilla.org/en-US/firefox/ Firefox] or
* '''HRO File storage system''' -- try
** [https://www.google.com/chrome/browser/desktop/ Chrome]
* [http://www.sublimetext.com/ Sublime text] editor - '''install in your computers'''
* A plain-text editor (coder's best friend)
* [http://www.getfirefox.com/ Firefox] (latest version) - '''install in your computers'''
** [http://sublimetext.com/ Sublime Text] (but any other editor will do)
* [https://www.google.com/chrome/ Chrome] - '''install in your computers'''
* For sharing the code of webpages and working in groups
 
** [https://codepen.io/ codepen]
 
** [https://thimble.mozilla.org/ Thimble]




Line 52: Line 111:
[[Courses/Design & Technique-Essential Web Design/01]]
[[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?
* 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)
* 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
** Many services that existed independent of the Web, on the Internet are migrating to the Web: email, chat, word processors.
* (Brief) History of the Web - a wold-wide documentation system build for scientists
* (Brief) History of the Web - a wold-wide documentation system build for scientists
 
* Personal websites before Web 2.0
=== Films ===
* Tools:
Degoutin, Stéphane, and Gwenola Wagon. World Brain Stéphane Degoutin & Gwenola Wagon, 2012. http://worldbrain.arte.tv.
** [[Main_Page|Publication Station wiki]]
 
** HRO File storage system
=== Optional Reading ===
** [http://www.sublimetext.com/ text editor]
Stephenson, Neal. “Mother Earth Mother Board.” Wired, http://archive.wired.com/wired/archive/4.12/ffglass_pr.html.
** [http://www.getfirefox.com/ Firefox]




Line 70: Line 128:
* What is a Web page?
* What is a Web page?
* What happens when I save a web-page? What files do I save?
* What happens when I save a web-page? What files do I save?
* The Browser: the interpreter
* HTML: the language
 
** tags  
* HTML
** tags: are ways of saying this <nowiki>=</nowiki> a image, that <nowiki>=</nowiki> a paragraph 
** Essential HTML page structure
** Essential HTML page structure
** Basic content tags: p, b, i, img ...
** Basic content tags: p, b, i, img ...
** hyper-links
** hyper-links
* The Browser: the interpreter


* Prototype: scribbling a simple webpage
* Exercise: create the structure of your weblog and initial content about yourself - who you are, who you want, etc...
 
* Homework: Continue adding contet to your weblog
* Homework: save any website you want and change it into something else.


 
==week 3 - CSS style of HTML ==
==week 3 - CSS style or the clothes of HTML ==
[[Courses/Design & Technique-Essential Web Design/03]]
[[Courses/Design & Technique-Essential Web Design/03]]


* CSS as a way to visually present the content
* (HTML creates content and structure) CSS gives it visual style
* CSS style-sheet
* CSS style-sheet
* Id and Classes identifiers
* CSS rules and properties
* CSS colors: RGB and hex triplets  
* CSS colors: RGB and hex triplets  
* Inspector for CSS
* IDs and Classes
* Inspector for CSS and in-browse CSS editor


* Homework: save any website, keep its content and structure as it is, but by simply styling its CSS, make it into something different.
* Exercise: save any website, keep its HTML content and structure as it is, but by simply styling its CSS, make it into something different.
* Homework: start styling your weblog using CSS


==week 4 - CSS for typography ==
http://publicationstation.wdka.hro.nl/go/kickoff/imgs/css.gif
 
==week 4 - understanding CSS  ==
[[Courses/Design & Technique-Essential Web Design/04]]
[[Courses/Design & Technique-Essential Web Design/04]]
* box-model: display property
* position: absolute, relative, fixed
* super-impositions : z-index
* Homework: Give a different "space" to each post in your weblog. For each entry create a different design
==week 5 - CSS for typography  ==
[[Courses/Design & Technique-Essential Web Design/05]]
* CSS for web typography
* CSS for web typography
* Web Fonts
* Web Fonts
Line 102: Line 169:
** Open Fonts Licenses
** Open Fonts Licenses


==week 5 - Web to print ==
* Homework: apply custom fonts to different parts of the your weblog.
[[Courses/Design & Technique-Essential Web Design/05]]


==week 6 - screen-page dialogues ==
==week 6 - screen-page dialogues ==
Line 114: Line 180:




==week 7 - uploading webpages to server==
==week 7 - tutorials==
[[Courses/Design & Technique-Essential Web Design/07]]
[[Courses/Design & Technique-Essential Web Design/07]]
==List of deliverables==
# Create a webpage that is a minimalist painting.
# 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.
#  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 )
#  Transform the type-set text (from previous week) into a a ready to
print PDF and print it.
# (re)present a part of your fanzine to your web project;




==CSS for print==
publicationstation.wdka.hro.nl/wiki/index.php/Courses/Design_%26_Technique-Essential_Web_Design/CSS4print


----
----
Line 137: Line 193:


[[Courses/Design & Technique-Essential_Web_Design/brainstorm]]
[[Courses/Design & Technique-Essential_Web_Design/brainstorm]]
</noinclude>

Latest revision as of 15:36, 25 March 2018

Part 2: Exploring technique

In the context of the online obsession with tutorials - you have tutorials on nearly how to do everything - you will be invited to create a website where you explore and communicate a printing technique, technology, or practitioner present in the publication station.

However you, as a graphic design student and the curious person which you are have another challenge: to make your the website far more appealing/challenging/unconventional than most online tutorials.

'Create a website, where you explore and communicating a printing technique or technology of your choice. '

The website can take the form of a:

  • a tutorial: explaining how to work with a certain technique or achieve a certain result
  • a detailed description: of how a certain machine or technique works
  • a collecting of interviews with practitioners, that extensive explore a given technique or technology

Requirements for the website:

  • use your own images
  • use at least one of the following media in your website:
    • original audio,
    • video,
    • illustration


Examples: the stories behind the technique

Examples: how to use the web to tell a story

Classes

extras


Part 1: (in the web) I am what I want

Dog meme.jpg

Description

These and many other personal websites were a common sight in the World Wide Web of the 90s and early 2000s. Before the arrival of the templated designs of Wordpress, Facebook, Twitter, Tumble and Instagram, where profiles pages look similar from user to user, it was common to build and design your own website. Your website was you 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 of the Web you can design who you are online and how the world sees you. You can pretend to be someone else by coming up with a fictional character or you can inform the world on every move you make and each photo you take, or anything between these two extremes.


In order to achieve this goal in Design & Technique you will learn how to design web-pages from scratch. We will be focusing 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.


http://68.media.tumblr.com/9276661ce34c3130ffc967dac641d089/tumblr_ovrkyeIYk61rlkewbo1_1280.png

http://68.media.tumblr.com/fd21fa1ef3f4839c474a33eb432a3be2/tumblr_ovsj7qWuW81rlkewbo1_1280.png


Instruction

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. During students and outside classes are expected to work on the deliverable by apply to their deliverable the subjects explored in classes.

Deliverable

From the very beginning of this course you will be asked to start, in groups, constructing a weblog that registers your group's activities, or the activities of who it chooses to be, and present them world.

You are what you ... think, eat, buy, walk, write, read, browse, listen to, collect... or pretend to do - remember on the Internet anyone can be dog.

Shopping lists, receipts, emails, chats, browser history, maps of your location, selfies, are some of the traces of these activities. You can use these traces to build your weblog, 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 .

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

Web art works dealing with identity

Archives of Early Web sites

software necessary

  • Up-to-date version of web-browser:
  • A plain-text editor (coder's best friend)
  • For sharing the code of webpages and working in groups


Classes

week 1 - The Internet and the Web

Courses/Design & Technique-Essential Web Design/01

  • 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).
    • Many services that existed independent of the Web, on the Internet are migrating to the Web: email, chat, word processors.
  • (Brief) History of the Web - a wold-wide documentation system build for scientists
  • Personal websites before Web 2.0
  • Tools:


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?
  • HTML: the language
    • tags
    • Essential HTML page structure
    • Basic content tags: p, b, i, img ...
    • hyper-links
  • The Browser: the interpreter
  • Exercise: create the structure of your weblog and initial content about yourself - who you are, who you want, etc...
  • Homework: Continue adding contet to your weblog

week 3 - CSS style of HTML

Courses/Design & Technique-Essential Web Design/03

  • (HTML creates content and structure) CSS gives it visual style
  • CSS style-sheet
  • CSS rules and properties
  • CSS colors: RGB and hex triplets
  • IDs and Classes
  • Inspector for CSS and in-browse CSS editor
  • Exercise: save any website, keep its HTML content and structure as it is, but by simply styling its CSS, make it into something different.
  • Homework: start styling your weblog using CSS

http://publicationstation.wdka.hro.nl/go/kickoff/imgs/css.gif

week 4 - understanding CSS

Courses/Design & Technique-Essential Web Design/04

  • box-model: display property
  • position: absolute, relative, fixed
  • super-impositions : z-index
  • Homework: Give a different "space" to each post in your weblog. For each entry create a different design

week 5 - CSS for typography

Courses/Design & Technique-Essential Web Design/05

  • CSS for web typography
  • Web Fonts
    • Default fonts
    • Embedded Fonts
    • Open Fonts Licenses
  • Homework: apply custom fonts to different parts of the your weblog.

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 - tutorials

Courses/Design & Technique-Essential Web Design/07


CSS for print

publicationstation.wdka.hro.nl/wiki/index.php/Courses/Design_%26_Technique-Essential_Web_Design/CSS4print

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


Courses/Design & Technique-Essential_Web_Design/brainstorm


Retrieved from ‘https://ps.wdka.nl/wiki/index.php?title=Courses/Design_%26_Technique-Essential_Web_Design/Q1&oldid=7009’