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

From Publication Station
Line 1: Line 1:


=Summary=
=Summary=
''Hello, welcome to my homepage. Hope you like it, if you like it feel free to send me an email.''
''Hello, welcome to my homepage. Hope you like it. If you do feel free to send me an email.''


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.   
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 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.   
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-work and interventions for the Web, as well as, services like Google Search or Facebook, in which identity plays a central.
 


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.


=Method=
=Method=
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.


Classes will take the form of an 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) will be the norm.
=Software Required=
 
To send to Wilco:
 
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 that fundamentals of web-design. Each class will combine both expository and hands-on development of prototypes where students are asked to bring into practice the taught material in inventive and meaningful ways.


=Software Required=
     XCode  
     XCode  
     Git - http://git-scm.com/download/mac
     Git - http://git-scm.com/download/mac
Line 35: Line 31:
==week 1 - The Internet and the Web ==
==week 1 - The Internet and the Web ==
* What do you I use the Internet for?  
* 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)
* Distinguish 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 Internet - a informatio highway build for the military
* (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


Line 51: Line 46:
* 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 intrepreter
* The Browser: the interpreter


* HTML  
* HTML  
** tags: ways of saying this <nowiki>=</nowiki> a image, that <nowiki>=</nowiki> a paragraph   
** 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


* Prototype: scrible a simple webpage  
* Prototype: scribbling a simple webpage  


* Homework: save any website and make into something different (the most drastic change receives a prize)
* Homework: save any website you want and change it into something else.


==week 3 - HTML: head, squares, styles ==
==week 3 - HTML: head, squares, styles ==
* HTMLhead: Adding infomation to web page
* HTML head: Adding information to web page
* Drawing shapes with div and span elements
* Drawing shapes with div and span elements
* Adding images: remote and local images with relative path
* Adding images: remote and local images with relative path
Line 71: Line 66:
==week 4 - CSS style or the clothes of HTML ==
==week 4 - CSS style or the clothes of HTML ==
* CSS as a way to visually present the content
* CSS as a way to visually present the content
* Stylesheet
* CSS style-sheet
* Id and Classes
* Id and Classes identifiers
* CSS colors: RGB and hex triplets  
* CSS colors: RGB and hex triplets  
* Inspector for CSS
* 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)
* Homework: save any website, keep its content and structure as it is, but by simply styling its CSS, make it into something different.


==week 5 - More from CSS ==
==week 5 - More from CSS ==
* Fonts
* Fonts
** Default fonts
** Default fonts
** Embed Fonts
** Embedded Fonts
** Fonts licenses
** Fonts licenses
* CSS animations
* CSS animations


Line 90: Line 86:
* embedding external content with iframes
* embedding external content with iframes
* drawing with canvas
* drawing with canvas
----
* 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
**

Revision as of 21:09, 27 August 2015

Summary

Hello, welcome to my homepage. Hope you like it. If you do feel free to send me an email.

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.

Method

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.

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/


Classes

week 1 - The Internet and the Web

  • 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

  • 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 = a image, that = 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 - HTML: head, squares, styles

  • HTML head: Adding information to web page
  • Drawing shapes with div and span elements
  • Adding images: remote and local images with relative path
  • Debugging and prototyping your website Inspector

week 4 - CSS style or the clothes of HTML

  • 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 5 - More from CSS

  • Fonts
    • Default fonts
    • Embedded Fonts
    • Fonts licenses
  • CSS animations

week 6 - HTML5 goodies

Enriching your webpage with HTML5 goodies:

  • displaying videos
  • embedding external content with iframes
  • drawing with canvas
Retrieved from ‘https://ps.wdka.nl/wiki/index.php?title=Courses/Design_%26_Technique-Essential_Web_Design&oldid=1788’