|
|
| (73 intermediate revisions by 2 users not shown) |
| Line 1: |
Line 1: |
|
| |
|
| =Summary= | | ==[[Courses/Design & Technique-Essential Web Design/Q1|''' Design & Technique - Part 1 ''']]== |
| ''Hello, welcome to my homepage. Hope you like it, if you like it feel free to send me an email.'' | | * [[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]] |
|
| |
|
| 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 whole world on the nascent medium of the Internet was to construct your own website, or as they became know, homepage, you home on the Web.
| | ==[[Courses/Design & Technique-Essential Web Design/Q2|Design & Technique - Part 2]]== |
|
| |
| 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 are in 2015 we will 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-work and interventions for the Web, as well as, services like Google Search or Facebook, in which identity plays a central.
| | * 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]] |
|
| |
|
|
| |
|
| | 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= |
| | * [http://publicationstation.wdka.hro.nl/go-student/ Students' work - Quarter1 2015/2016] |
|
| |
|
| =Method=
| | [https://mywdka.nl/15kw1go/onderwijsenlesaanbod/theme_contents_assignments/dropping-me-world/ Course planning inside MyWdKA] |
|
| |
|
| 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.
| | __NOTOC__ |
| | |
| ''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.
| |
| ''
| |
| | |
| = Aims =
| |
| This course has as its aims to:
| |
| * ...
| |
| * find online help for the problems you encounter
| |
| * ...
| |
| | |
| = Previous courses =
| |
| * [[Courses/Essential_HTML]]
| |
| * [[Courses/Browser_as_Canvas]]
| |
| | |
| =Software Required=
| |
| 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/
| |
| | |
| =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 ...
| |
| ** hyper-links
| |
| | |
| 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
| |
| * images
| |
| * Local images (or other media): relative path
| |
| | |
| ==week 4 - CSS: the clothes of HTML ==
| |
| ''
| |
| [[Courses/Browser_as_Canvas]]''
| |
| | |
| * 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 - ==
| |
| | |
| | |
| ----
| |
| * 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.
| |
| ----
| |
| | |
| == topics ==
| |
| | |
| * Internet and Web:
| |
| ** History of the Internet:
| |
| Critical Art Ensemble "Flesh Machine: Cyborgs, Designer Babies, & New Eugenic Consciousness" - Appendix (p.140) offers an concise description of the motivations behind the creation of the Internet.
| |
| | |
| | |
| * Homepages
| |
| ** It was understood as the way you presented yourself on the Web world
| |
| ** Homepage used to be your home on the Web, now all very similar. my home on facebook is very similar to yours.
| |
| ** Geocities closure in 2009 - rescue of pages by [http://archiveteam.org/index.php?title=Main_Page Archive] Team and screenshots added everyday under http://oneterabyteofkilobyteage.tumblr.com/
| |
| | |
| | |
| * Identity
| |
| ** Malleable: No one knows youŕe a dog
| |
| *** [http://mouchette.org/ Mouchete]
| |
| ** Static and unique: One single identity
| |
| **
| |
