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

From Publication Station
(Created page with " =Summary= * Consolidate the difference between the Web and the broader Internet. * familiarize you with the tools allow for the creation content for the Web, namely HTML and...")
 
 
(82 intermediate revisions by 2 users not shown)
Line 1: Line 1:


=Summary=
==[[Courses/Design & Technique-Essential Web Design/Q1|''' Design & Technique - Part 1 ''']]==
* Consolidate the difference between the Web and the broader Internet.
* [[Courses/Design & Technique-Essential Web Design/01|The Internet and the Web]]
* familiarize you with the tools allow for the creation content for the Web, namely HTML and CSS
* [[Courses/Design & Technique-Essential Web Design/02|HTML: structure, tags]]
* gain an understanding of the processes that involve a Web-page opening in your browser
* [[Courses/Design & Technique-Essential Web Design/03|CSS: rules]]
* [[Courses/Design & Technique-Essential Web Design/04|CSS selectors, position, and display]]
* [[Courses/Design & Technique-Essential Web Design/05|CSS: typography]]
* [http://codepen.io/PublicationStation/pens/public/ Publication Station @ Codepen]: examples
* [[Wdka_ftp|Upload files to WdKA FTP]]


As this kwartaal has as topic '''who are you''' in articulation with the tools and techniques you'll learn we'll explore how your identity can be created, confused, or turned into profit on the current Web.
==[[Courses/Design & Technique-Essential Web Design/Q2|Design & Technique - Part 2]]==


We'll do this exploration by observing and investigating works of art and interventions for the Web, as well as services like Google Search or Facebook, in which identity plays a central role.
* 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]]
* class 5 [[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]]


You'll be encourage to experiment with the design and expressive possibilities offered by the Web, but also simply by navigating and finding surprising and inspiring websites, which you are welcome to share with the whole class.


=Method=
http://publicationstation.wdka.hro.nl/go/kickoff/imgs/Construction.gif http://publicationstation.wdka.hro.nl/go/kickoff/imgs/Construction.gif http://publicationstation.wdka.hro.nl/go/kickoff/imgs/Construction.gif


Classes will take the form of an informal seminars, where observation of examples, critical thinking and hands-on prototyping (writing code, seeing the result, changing it, breaking it, fixing it, sharing with others.
=Past courses=
* [http://publicationstation.wdka.hro.nl/go-student/ Students' work - Quarter1 2015/2016]


''At each session participants will develop simple prototypes that put into practice the subject presented. And as a long term goal participants will be asked to create an experimental browser-based work, that can be anything but a typical webpage.
[https://mywdka.nl/15kw1go/onderwijsenlesaanbod/theme_contents_assignments/dropping-me-world/ Course planning inside MyWdKA]
''


= Aims =
__NOTOC__
This course has as its aims to:
 
* find online help for the problems you encounter
 
 
=Classes=
In total we'll have 10 classes
 
==week 1 - The Internet and the Web ==
* Introductions & presentations
* What do you I use the Internet for? Map uses in post it notes.
* Are the internet and the Web the same? What is the difference between them?
* 2 documentaries:
** On the Internet: The World Brain Episodes 2,3
** On the Web: ???? The Virtual Revolution ??
* Separate the uses marked on the post it notes that happen '''inside the Web''' and those that '''outside the Web''' in th Internet
* Distinguish the Internet (the infrastructure, like a highway) and the Web (one of the vehicles of the highway)
* (Briefly) Describe the history of the Web. A documentation
 
=== 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.
 
===Material===
* Post it notes
* Markers
* Masking tape
* AV
 
==week 2 - HTML: a language for browsers humans ==
* What is a Web page?
* What happens when I save a web-page? What files do I save?
* Open those files in a text editor
* Can you understand anything from is there? What can you read? Is this file for humans or for computers?
 
* HTML
** tags: ways of saying this <nowiki>=</nowiki> a image, that <nowiki>=</nowiki> a paragraph 
** Essential HTML page structure
** Basic content tags: p, b, i, img ...
 
Prototype: scrible a simple webpage
 
Homework: save any website and make into something different (the most drastic change receives a prize)
 
==week 3 - HTML: head, squares, styles ==
 
* Inspector
 
==week 4 - CSS: the clothes of HTML ==
 
 
* Inspector for CSS
 
Homework: save any website, keep its content and structure as it is, but simply by styling its CSS it make into something different (the most drastic change receives a prize)
 
==week 5 -  ==
 
==week 6 -  ==
 
==week 7 -  ==
 
==week 8 -  ==
 
==week 9 -  ==
 
==week 10 -  ==
 
 
* What happens when I navigate the web?
* Enact the process that take place from opening a web-browser to getting a webpage.
** (computer): Browser
** Type URL to browser
** URL: a request and address to that request
** Server: receives the request, gets content for the request and sends it back to the browser
** Browser gets the text content, "reads" it and displays it in a graphic form.

Latest revision as of 09:31, 24 October 2017

Design & Technique - Part 1

Design & Technique - Part 2


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

Past courses

Course planning inside MyWdKA


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