Courses/Design & Technique-Essential Web Design/Q1 - Revision history

Andre at 15:36, 25 March 2018

2018-03-25T15:36:13Z

← Older revision		Revision as of 15:36, 25 March 2018
Line 34:		Line 34:
	* class 1 [[Courses/Design_%26_Technique-Essential_Web_Design/Q2/01 \| Vector Graphics on the web]]		* 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]]		* class 2 [[Courses/Design_%26_Technique-Essential_Web_Design/Q2/06 \| audio and video]]
	* class 3 [[Courses/Design_%26_Technique-Essential_Web_Design/Q2/03 \| JavaScript + jQuery]]

			==extras==

			* [[Courses/Design_%26_Technique-Essential_Web_Design/Q2/03 \| JavaScript + jQuery]]
	* [[Courses/Design_%26_Technique-Essential_Web_Design/Q2/02 \| JavaScript]]		* [[Courses/Design_%26_Technique-Essential_Web_Design/Q2/02 \| JavaScript]]

	~~==extras==~~
	* [[Webcam_html \| using the Webcam in the browser]] , [https://mywdka.nl/16VGWPNV12GV/#post-221 groups and intervention], [http://codepen.io/PublicationStation/pen/zoELXw jquery]		* [[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]]		* [[Panorama on web pages]]

Andre: /* Classes */

2017-11-27T06:45:50Z

Classes

← Older revision		Revision as of 06:45, 27 November 2017
Line 34:		Line 34:
	* class 1 [[Courses/Design_%26_Technique-Essential_Web_Design/Q2/01 \| Vector Graphics on the web]]		* 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]]		* class 2 [[Courses/Design_%26_Technique-Essential_Web_Design/Q2/06 \| audio and video]]
	* class 3 [[Courses/Design_%26_Technique-Essential_Web_Design/Q2/02 \| JavaScript]]		* class 3 [[Courses/Design_%26_Technique-Essential_Web_Design/Q2/03 \| JavaScript + jQuery]]
	* ~~class 4~~ [[Courses/Design_%26_Technique-Essential_Web_Design/Q2/03 \| ~~jQuery~~]]
			* [[Courses/Design_%26_Technique-Essential_Web_Design/Q2/02 \| JavaScript]]

	==extras==		==extras==

Andre: /* Examples: the stories behind the technique */

2017-11-27T06:29:32Z

Examples: the stories behind the technique

← Older revision		Revision as of 06:29, 27 November 2017
Line 23:		Line 23:
	* [http://additivism.org/cookbook The 3D Additivist Cookbook]		* [http://additivism.org/cookbook The 3D Additivist Cookbook]
	* [https://www.youtube.com/watch?v=0iJ0bNWRZH0 T-Shirt printed from a Manhole Cover] video		* [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]]		* [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://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		* [http://www.knustpress.nl/wp-content/uploads/sites/2/Print-Overview-Anne-Vagt.jpg Kunst Press] print overview map

Andre: /* Examples: the stories behind the technique */

2017-11-13T18:08:57Z

Examples: the stories behind the technique

← Older revision		Revision as of 18:08, 13 November 2017
Line 27:		Line 27:
	* [http://www.knustpress.nl/wp-content/uploads/sites/2/Print-Overview-Anne-Vagt.jpg Kunst Press] print overview map		* [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		* [https://www.youtube.com/watch?v=E94iSzeXw68 The making of a Rainwork] video
	* [https://medium.com/@magalhini/the-fascinating-story-of-the-chinese-typewriter-29d32ff09790 The fascinating story of the Chinese Typewriter]
	* [https://www.theatlantic.com/technology/archive/2014/01/the-lost-ancestors-of-ascii-art/283445/ The Chinese Typewriter]

	==Examples: how to use the web to tell a story==		==Examples: how to use the web to tell a story==

Andre: /* Part 2: Exploring technique */

2017-10-27T14:25:34Z

Part 2: Exploring technique

← Older revision		Revision as of 14:25, 27 October 2017
Line 1:		Line 1:
	=Part 2: Exploring technique=		=Part 2: Exploring technique=
	~~Since~~ the ~~Design and Technique takes place within~~ the ~~Publication Station,~~ and ~~it like the analogue~~ printing ~~techniques available~~ in the station, ~~websites are~~ a ~~way to use textual~~ and ~~visual means~~ to make ~~things public, I'd like you to:~~		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.		'' '''Create a website, where you explore and communicating a printing technique or technology of your choice.
Line 12:		Line 14:
	==Requirements for the website:==		==Requirements for the website:==
	* use your own images		* use your own images
	* use '''at least one''' of the following media in your website: original audio, video, or illustration		* use '''at least one''' of the following media in your website:
			** original audio,
			** video,
			** illustration


Line 20:		Line 25:
	* [http://jasperotto.com/camouflaged-books.html Camouflaged Books]: [[File:camouflaging_books_an_instruction_manual.pdf\|manual PDF]]		* [http://jasperotto.com/camouflaged-books.html Camouflaged Books]: [[File:camouflaging_books_an_instruction_manual.pdf\|manual PDF]]
	* [http://textileartscenter.com/blog/work-in-progress-digital-wax-print/ Work in Progress: Digital Wax Print] artists' portrait		* [http://textileartscenter.com/blog/work-in-progress-digital-wax-print/ Work in Progress: Digital Wax Print] artists' portrait
	* [http://textileartscenter.com/blog/bento-bag-tutorial/ bento bag tutorial]
	* [http://www.knustpress.nl/wp-content/uploads/sites/2/Print-Overview-Anne-Vagt.jpg Kunst Press] print overview map		* [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		* [https://www.youtube.com/watch?v=E94iSzeXw68 The making of a Rainwork] video
Line 45:		Line 49:

	-------		-------


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

Andre: /* Examples */

2017-10-24T11:20:11Z

Examples

← Older revision		Revision as of 11:20, 24 October 2017
Line 15:		Line 15:


	==Examples==		==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]]
			* [http://textileartscenter.com/blog/work-in-progress-digital-wax-print/ Work in Progress: Digital Wax Print] artists' portrait
			* [http://textileartscenter.com/blog/bento-bag-tutorial/ bento bag tutorial]
			* [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
			* [https://medium.com/@magalhini/the-fascinating-story-of-the-chinese-typewriter-29d32ff09790 The fascinating story of the Chinese Typewriter]
			* [https://www.theatlantic.com/technology/archive/2014/01/the-lost-ancestors-of-ascii-art/283445/ The Chinese Typewriter]

			==Examples: how to use the web to tell a story==

	==Classes==		==Classes==

Andre at 09:41, 24 October 2017

2017-10-24T09:41:35Z

← Older revision		Revision as of 09:41, 24 October 2017
Line 14:		Line 14:
	* use '''at least one''' of the following media in your website: original audio, video, or illustration		* use '''at least one''' of the following media in your website: original audio, video, or illustration


	~~Now, my question is whether you know interesting examples, not~~
	~~necessarily in website form, they can be a video, a book, where similar~~
	~~approaches to a technique/technology are communicated in a informal,~~
	~~fun, but informative way.~~

	==Examples==		==Examples==
			*
			*

	==Classes==		==Classes==

Andre at 09:33, 24 October 2017

2017-10-24T09:33:18Z

← Older revision		Revision as of 09:33, 24 October 2017
Line 1:		Line 1:
			=Part 2: Exploring technique=
			Since the Design and Technique takes place within the Publication Station, and it like the analogue printing techniques available in the station, websites are a way to use textual and visual means to make things public, I'd like you to:

	=~~Common Ground~~: I am what I want=		'' '''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, or illustration


			Now, my question is whether you know interesting examples, not
			necessarily in website form, they can be a video, a book, where similar
			approaches to a technique/technology are communicated in a informal,
			fun, but informative way.

			==Examples==



			==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]]
			* class 3 [[Courses/Design_%26_Technique-Essential_Web_Design/Q2/02 \| JavaScript]]
			* class 4 [[Courses/Design_%26_Technique-Essential_Web_Design/Q2/03 \| jQuery]]

			==extras==
			* [[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]]		[[File:Dog_meme.jpg\|400px]]

Andre: /* software necessary */

2017-09-05T06:03:18Z

software necessary

← Older revision		Revision as of 06:03, 5 September 2017
Line 51:		Line 51:
	* A plain-text editor (coder's best friend)		* A plain-text editor (coder's best friend)
	** [http://sublimetext.com/ Sublime Text] (but any other editor will do)		** [http://sublimetext.com/ Sublime Text] (but any other editor will do)
			* For sharing the code of webpages and working in groups
			** [https://codepen.io/ codepen]
			** [https://thimble.mozilla.org/ Thimble]

Andre at 05:51, 5 September 2017

2017-09-05T05:51:43Z

← Older revision		Revision as of 05:51, 5 September 2017
Line 1:		Line 1:

	=Common Ground: I am what I want=		=Common Ground: I am what I want=
			[[File:Dog_meme.jpg\|400px]]

	==Description==		==Description==
	~~[[File:Oneteraby-cat.png\|500px\|left\|from http://oneterabyteofkilobyteage.tumblr.com]]~~

	~~[[File:Oneteraby-belgian.png\|500px\|middle\|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.		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.

Line 13:		Line 11:
	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.		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.

	~~[[File:Dog_meme.jpg]]~~

	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.		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==		==Instruction==
Line 40:		Line 43:
	* [https://web.archive.org/ Wayback machine ]		* [https://web.archive.org/ Wayback machine ]
	* [http://archiveteam.org/index.php?title=Main_Page Archive Team ]		* [http://archiveteam.org/index.php?title=Main_Page Archive Team ]
			* Documentary [https://www.youtube.com/watch?v=krg3lrxHX2k Digital Amnesia]

	==~~Assignment~~==		==software necessary==
	* ~~Install software necessary on your laptops~~		* Up-to-date version of web-browser:
	* ~~bring to class a interesting~~/~~funny~~/~~awkward website, at least 10years old~~		** [https://www.mozilla.org/en-US/firefox/ Firefox] or
			** [https://www.google.com/chrome/browser/desktop/ Chrome]
			* A plain-text editor (coder's best friend)
			** [http://sublimetext.com/ Sublime Text] (but any other editor will do)

	~~==Relating video ==~~
	* Digital Amensia https://www.youtube.com/watch?v=krg3lrxHX2k

	~~==Tools==~~
	* [[Courses/Design_%26_Technique-Essential_Web_Design\|Publication Station wiki]] - where classes notes are stored, which you can contribute to
	* '''HRO File storage system''' -- try
	* [http://www.sublimetext.com/ Sublime text] editor - '''install in your computers'''
	* [http://www.getfirefox.com/ Firefox] (latest version) - '''install in your computers'''
	* [https://www.google.com/chrome/ Chrome] - '''install in your computers'''

			------



	~~------~~
	~~<noinclude>~~
	=Classes=		=Classes=
	==week 1 - The Internet and the Web ==		==week 1 - The Internet and the Web ==

← Older revision		Revision as of 15:36, 25 March 2018
Line 34:		Line 34:
	* class 1 [[Courses/Design_%26_Technique-Essential_Web_Design/Q2/01 \| Vector Graphics on the web]]		* 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]]		* class 2 [[Courses/Design_%26_Technique-Essential_Web_Design/Q2/06 \| audio and video]]
	* class 3 [[Courses/Design_%26_Technique-Essential_Web_Design/Q2/03 \| JavaScript + jQuery]]

			==extras==

			* [[Courses/Design_%26_Technique-Essential_Web_Design/Q2/03 \| JavaScript + jQuery]]
	* [[Courses/Design_%26_Technique-Essential_Web_Design/Q2/02 \| JavaScript]]		* [[Courses/Design_%26_Technique-Essential_Web_Design/Q2/02 \| JavaScript]]

	~~==extras==~~
	* [[Webcam_html \| using the Webcam in the browser]] , [https://mywdka.nl/16VGWPNV12GV/#post-221 groups and intervention], [http://codepen.io/PublicationStation/pen/zoELXw jquery]		* [[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]]		* [[Panorama on web pages]]

← Older revision		Revision as of 06:45, 27 November 2017
Line 34:		Line 34:
	* class 1 [[Courses/Design_%26_Technique-Essential_Web_Design/Q2/01 \| Vector Graphics on the web]]		* 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]]		* class 2 [[Courses/Design_%26_Technique-Essential_Web_Design/Q2/06 \| audio and video]]
	* class 3 [[Courses/Design_%26_Technique-Essential_Web_Design/Q2/02 \| JavaScript]]		* class 3 [[Courses/Design_%26_Technique-Essential_Web_Design/Q2/03 \| JavaScript + jQuery]]
	* ~~class 4~~ [[Courses/Design_%26_Technique-Essential_Web_Design/Q2/03 \| ~~jQuery~~]]
			* [[Courses/Design_%26_Technique-Essential_Web_Design/Q2/02 \| JavaScript]]

	==extras==		==extras==