|
|
| (59 intermediate revisions by 2 users not shown) |
| Line 1: |
Line 1: |
| [https://mywdka.nl/15kw1go/onderwijsenlesaanbod/theme_contents_assignments/dropping-me-world/ Course planning inside MyWdKA]
| |
|
| |
|
| | ==[[Courses/Design & Technique-Essential Web Design/Q1|''' Design & Technique - Part 1 ''']]== |
| | * [[Courses/Design & Technique-Essential Web Design/01|The Internet and the Web]] |
| | * [[Courses/Design & Technique-Essential Web Design/02|HTML: structure, tags]] |
| | * [[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]] |
|
| |
|
| | ==[[Courses/Design & Technique-Essential Web Design/Q2|Design & Technique - Part 2]]== |
|
| |
|
| =Summary=
| | * class 1 [[Courses/Design_%26_Technique-Essential_Web_Design/Q2/01 | Vector Graphics on the web]] |
| ''Hello, welcome to my homepage. Hope you like it. If you do feel free to send me an email.''
| | * 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]] |
|
| |
|
| This or similar messages were present in many of the personal website on the mid-90's. Before the templates and uniform layouts of Facebook, Twitter and Instagram, the way to present yourself to the world, on the nascent medium of the Internet, was to construct your own website - a homepage - your home on the Web.
| |
|
| |
| In this course we will revisit that past and learn how to publish content on Wold Wide Web, by design simple web-pages from scratch, using HTML and CSS. But since we live in 2015, we'll also explore the possibilities of current Wold Wide Web, where video, audio, maps, drawing canvas and typography open up the an exciting territory for artists or designers to work in.
| |
|
| |
|
| As a conductive threat that will run along these sessions, we'll take a critical look at how identities have been invented, confused, or reaffirmed in online environments. To help us think and design, we'll take a close look at art-works and interventions for the Web, as well as, services like Google-Search or Facebook, in which identity plays a central role.
| | 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 |
|
| |
|
| =Method= | | =Past courses= |
| Classes will take the form of an seminars where participants will explore examples, engage in discussion about issues of online identity, and for the most part learn the fundamentals of web-design. Each class will combine both expository and hands-on development of prototypes, where students will be asked to bring into practice the acquired knowledge in inventive and meaningful ways.
| | * [http://publicationstation.wdka.hro.nl/go-student/ Students' work - Quarter1 2015/2016] |
| | |
| | |
| | |
| =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 <nowiki>=</nowiki> a image, that <nowiki>=</nowiki> 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
| |
| | |
| | |
| ----
| |
| | |
| =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
| |
|
| |
|
| | [https://mywdka.nl/15kw1go/onderwijsenlesaanbod/theme_contents_assignments/dropping-me-world/ Course planning inside MyWdKA] |
|
| |
|
| [[Courses/Design & Technique-Essential_Web_Design/brainstorm]]
| | __NOTOC__ |
