Publication Station - User contributions [en-gb]

User:Noemiino

2016-06-19T23:28:19Z

Noemiino:

Step 3: Upload your website[edit]
- In the top of your FileZilla window, enter ftp.student.wdka.nl as the host

- Enter your student number as the username

- 9g0nhb4p

◄ http://file.allitebooks.com/20150723/If%20Hemingway%20Wrote%20JavaScript.pdf ► humorous little writing

◄ http://paprika.com/ ► video background //// constantly changing, nice bounce animation -- when you hover on the image as the mouse changes it`s position the gallery of pictures behind the thumbnail shows itself

◄ http://bouncejs.com/ ►

◄ http://swissincss.com/konstruktive-grafik.html ► animated posters /// more here: http://www.creativebloq.com/css3/animated-typography-posters-swiss-style-design-11618614

== Awesome inspire ==

http://jindo.dev.naver.com/collie/ ---> animation/js/dogs/you can pick elements

https://codegeekz.com/15-best-javascript-animation-libraries-for-developers/ ...a whole library with nice animation libraries

https://futureself.orange.com/index.html ///

http://sonsofgallipoli.com/?l=en#!/map/54e7bf62af73edoc170873041 just some great interactivity

== Source stuff ==
http://designshack.net/articles/html/how-to-link-to-specific-points-in-a-page-and-animate-the-scroll/

https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/

https://tylercipriani.com/2014/07/12/crossbrowser-javascript-scrollbar-detection.html

http://manos.malihu.gr/jquery-image-panning/ --> portrait image in smaller frame, moves with mouse hovering

http://codepen.io/robooneus/pen/Aclqr ==> arrow stuffy getting you to the next page with a smooth scroll

https://css-tricks.com/examples/WebKitScrollbars/ --> have yourself a very very scrollbar

User:Noemiino

2016-02-06T20:53:56Z

Noemiino:

◄ http://file.allitebooks.com/20150723/If%20Hemingway%20Wrote%20JavaScript.pdf ► humorous little writing

◄ http://paprika.com/ ► video background //// constantly changing, nice bounce animation -- when you hover on the image as the mouse changes it`s position the gallery of pictures behind the thumbnail shows itself

◄ http://bouncejs.com/ ►

◄ http://swissincss.com/konstruktive-grafik.html ► animated posters /// more here: http://www.creativebloq.com/css3/animated-typography-posters-swiss-style-design-11618614

== Awesome inspire ==

http://jindo.dev.naver.com/collie/ ---> animation/js/dogs/you can pick elements

https://codegeekz.com/15-best-javascript-animation-libraries-for-developers/ ...a whole library with nice animation libraries

https://futureself.orange.com/index.html ///

http://sonsofgallipoli.com/?l=en#!/map/54e7bf62af73edoc170873041 just some great interactivity

== Source stuff ==
http://designshack.net/articles/html/how-to-link-to-specific-points-in-a-page-and-animate-the-scroll/

https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/

https://tylercipriani.com/2014/07/12/crossbrowser-javascript-scrollbar-detection.html

http://manos.malihu.gr/jquery-image-panning/ --> portrait image in smaller frame, moves with mouse hovering

http://codepen.io/robooneus/pen/Aclqr ==> arrow stuffy getting you to the next page with a smooth scroll

https://css-tricks.com/examples/WebKitScrollbars/ --> have yourself a very very scrollbar

User:Noemiino

2016-01-21T22:57:33Z

Noemiino:

◄ http://file.allitebooks.com/20150723/If%20Hemingway%20Wrote%20JavaScript.pdf ► humorous little writing

◄ http://paprika.com/ ► video background //// constantly changing, nice bounce animation -- when you hover on the image as the mouse changes it`s position the gallery of pictures behind the thumbnail shows itself

◄ http://bouncejs.com/ ►

◄ http://swissincss.com/konstruktive-grafik.html ► animated posters /// more here: http://www.creativebloq.com/css3/animated-typography-posters-swiss-style-design-11618614

== Awesome inspire ==

http://jindo.dev.naver.com/collie/ ---> animation/js/dogs/you can pick elements

https://codegeekz.com/15-best-javascript-animation-libraries-for-developers/ ...a whole library with nice animation libraries

https://futureself.orange.com/index.html ///

== Source stuff ==
http://designshack.net/articles/html/how-to-link-to-specific-points-in-a-page-and-animate-the-scroll/

https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/

https://tylercipriani.com/2014/07/12/crossbrowser-javascript-scrollbar-detection.html

http://manos.malihu.gr/jquery-image-panning/ --> portrait image in smaller frame, moves with mouse hovering

http://codepen.io/robooneus/pen/Aclqr ==> arrow stuffy getting you to the next page with a smooth scroll

https://css-tricks.com/examples/WebKitScrollbars/ --> have yourself a very very scrollbar

User:Noemiino

2016-01-21T22:53:46Z

Noemiino:

◄ http://file.allitebooks.com/20150723/If%20Hemingway%20Wrote%20JavaScript.pdf ► humorous little writing

◄ http://paprika.com/ ► video background //// constantly changing, nice bounce animation -- when you hover on the image as the mouse changes it`s position the gallery of pictures behind the thumbnail shows itself

◄ http://bouncejs.com/ ►

◄ http://swissincss.com/konstruktive-grafik.html ► animated posters /// more here: http://www.creativebloq.com/css3/animated-typography-posters-swiss-style-design-11618614

== Awesome inspire ==

http://jindo.dev.naver.com/collie/ ---> animation/js/dogs/you can pick elements

https://codegeekz.com/15-best-javascript-animation-libraries-for-developers/ ...a whole library with nice animation libraries

https://futureself.orange.com/index.html ///

== Source stuff ==
http://designshack.net/articles/html/how-to-link-to-specific-points-in-a-page-and-animate-the-scroll/

https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/

https://tylercipriani.com/2014/07/12/crossbrowser-javascript-scrollbar-detection.html

http://manos.malihu.gr/jquery-image-panning/ --> portrait image in smaller frame, moves with mouse hovering

http://codepen.io/robooneus/pen/Aclqr ==> arrow stuffy getting you to the next page with a smooth scroll

User:Noemiino

2016-01-20T21:19:03Z

Noemiino: /* Awesome inspire */

◄ http://file.allitebooks.com/20150723/If%20Hemingway%20Wrote%20JavaScript.pdf ► humorous little writing

◄ http://paprika.com/ ► video background //// constantly changing, nice bounce animation -- when you hover on the image as the mouse changes it`s position the gallery of pictures behind the thumbnail shows itself

◄ http://bouncejs.com/ ►

◄ http://swissincss.com/konstruktive-grafik.html ► animated posters /// more here: http://www.creativebloq.com/css3/animated-typography-posters-swiss-style-design-11618614

== Awesome inspire ==

http://jindo.dev.naver.com/collie/ ---> animation/js/dogs/you can pick elements

https://codegeekz.com/15-best-javascript-animation-libraries-for-developers/ ...a whole library with nice animation libraries

https://futureself.orange.com/index.html ///

== Source stuff ==
http://designshack.net/articles/html/how-to-link-to-specific-points-in-a-page-and-animate-the-scroll/

https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/

https://tylercipriani.com/2014/07/12/crossbrowser-javascript-scrollbar-detection.html

http://manos.malihu.gr/jquery-image-panning/ --> portrait image in smaller frame, moves with mouse hovering

User:Noemiino

2016-01-20T16:58:05Z

Noemiino: /* Awesome inspire */

◄ http://file.allitebooks.com/20150723/If%20Hemingway%20Wrote%20JavaScript.pdf ► humorous little writing

◄ http://paprika.com/ ► video background //// constantly changing, nice bounce animation -- when you hover on the image as the mouse changes it`s position the gallery of pictures behind the thumbnail shows itself

◄ http://bouncejs.com/ ►

◄ http://swissincss.com/konstruktive-grafik.html ► animated posters /// more here: http://www.creativebloq.com/css3/animated-typography-posters-swiss-style-design-11618614

== Awesome inspire ==

http://jindo.dev.naver.com/collie/ ---> animation/js/dogs/you can pick elements

https://codegeekz.com/15-best-javascript-animation-libraries-for-developers/ ...a whole library with nice animation libraries

== Source stuff ==
http://designshack.net/articles/html/how-to-link-to-specific-points-in-a-page-and-animate-the-scroll/

https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/

https://tylercipriani.com/2014/07/12/crossbrowser-javascript-scrollbar-detection.html

http://manos.malihu.gr/jquery-image-panning/ --> portrait image in smaller frame, moves with mouse hovering

User:Noemiino

2016-01-20T15:33:37Z

Noemiino:

User:Noemiino

2016-01-12T16:28:16Z

Noemiino: /* Source stuff */

User:Noemiino

2016-01-12T16:26:45Z

Noemiino: /* Source stuff */

User:Noemiino

2016-01-12T16:25:06Z

Noemiino: /* Source stuff */

User:Noemiino

2016-01-11T00:35:43Z

Noemiino:

User:Noemiino

2016-01-11T00:34:58Z

Noemiino:

User:Noemiino

2016-01-11T00:21:43Z

Noemiino:

User:Noemiino

2016-01-10T23:25:55Z

Noemiino:

User:Noemiino

2016-01-10T19:12:36Z

Noemiino:

User:Noemiino

2016-01-10T19:09:30Z

Noemiino:

User:Noemiino

2016-01-10T19:08:30Z

Noemiino:

User:Noemiino

2016-01-10T19:04:26Z

Noemiino:

User:Noemiino

2016-01-09T23:17:10Z

Noemiino:

◄ http://file.allitebooks.com/20150723/If%20Hemingway%20Wrote%20JavaScript.pdf ► humorous little writing

User:Noemiino

2016-01-09T23:15:44Z

Noemiino: Humorous little text

http://file.allitebooks.com/20150723/If%20Hemingway%20Wrote%20JavaScript.pdf

Courses/Design & Technique-Essential Web Design

2016-01-08T19:34:47Z

Noemiino: /* Examples */

[https://mywdka.nl/15kw1go/onderwijsenlesaanbod/theme_contents_assignments/dropping-me-world/ Course planning inside MyWdKA]

[[Courses/Design & Technique-Essential Web Design/Q1|Pages from ''' Design & Technique during Quarter 1 2015''']]

[http://publicationstation.wdka.hro.nl/go-student/ Students' work - Quarter1]

__NOTOC__

=Quarter 2 2015=
== Your city in the browser ==
In the second quarter of Design & Technique will be focus on presenting the '''''behind the scenes'' of your intervention and research on a square from the city of Rotterdam''', through the web, to the the world. In other words, you will ''record'' fragments of your intervention – the images, sounds, history, reactions, thoughts and dreams about this square – and explore ways to present them online, so that the user gains a sense of the place and of your intervention.

Building on the knowledge and experience acquired in quarter one, you will be encourage to create interactive works. Outcomes can take any form, from animated drawings, interactive maps, generative image, audio-visual works, or data visualizations.

== Classes==
* [[Courses/Design_%26_Technique-Essential_Web_Design/Q2/01]]
* [[Courses/Design_%26_Technique-Essential_Web_Design/Q2/02]] - JS
* [[Courses/Design_%26_Technique-Essential_Web_Design/Q2/03]] - jQuery
* [[Courses/Design_%26_Technique-Essential_Web_Design/Q2/04]] - exploring the city - choose your own adventure game
* [[Courses/Design_%26_Technique-Essential_Web_Design/Q2/05]] - review game; tutorials
* [[Courses/Design_%26_Technique-Essential_Web_Design/Q2/06]] - audio and video
* [[Courses/Design_%26_Technique-Essential_Web_Design/Q2/07]] - (D3 visualizations)
* [[Courses/Design_%26_Technique-Essential_Web_Design/Q2/08]]

* '''[[Courses/Design_%26_Technique-Essential_Web_Design/Q2/Squares and groups|Squares and groups]]
'''

==Examples==
* [[Courses/Design_%26_Technique-Essential_Web_Design/Q2/Example/Business-card]] - constantly change image
* [[Courses/Design_%26_Technique-Essential_Web_Design/Q2/Example/Form]] - user text input

* [https://www.smashingmagazine.com/2011/09/the-guide-to-css-animation-principles-and-examples/ complex animations]
* [[Courses/Design_%26_Technique-Essential_Web_Design/Q2/Example/Play_pause_video|Play_pause_video]]
* http://species-in-pieces.com/ --> very awesome
* http://jviewz.com/ --> something worth seeing and hearing

== Web-based works that explore city spaces ==
* [http://www.exhaustingacrowd.com/ Exhausting a Crowd by Ky McDonald]
* [http://lust.nl/#projects-3478 Urban Echo] by LUSTlab
* [http://aporee.org/maps/ Radio Aporee]
* [[Courses/Design_%26_Technique-Essential_Web_Design/works/Collective Waiting Portrait|Collective Waiting Portrait]]
* '''Janet Cardiff'''

{{youtube|Tgef5gel4sk}} ''Ghost Machine''

{{youtube|sOkQE7m31Pw}} ''Alter Bahnhof Video Walk''

=== Subjects ===
Subjects explored include:
* Scalable Vector Graphics (SVG) – for the creation of interactive and animated vector images in the browser, also in conjunction with vector drawing software, such as Illustrator and Inkscape.
* JavaScript and jQuery - to provide the interactive and dynamic elements to web pages to pages
* [http://snapsvg.io Snap.svg] Javascript libraries - for ''SVG manipulation''.
* [http://d3js.org/ D3] Javascript library - for the ''creation of visualizations''
* HTML audio-video and canvas

=== Work load ===
The work load for the quarter will be divided into:
* '''weekly classes''',
* '''simple weekly deliverables''' – small exercises that consolidate the techniques and concepts approached in classes, as well as allow you to find expressive and personal ways of employing them.
* '''one main deliverable project -''' that will congregate the knowledge acquired from classes and deliverables onto a project where you create the ''behind the scenes'' of your intervention.

[[File:js-woody-buzz.jpg]]

Courses/Design & Technique-Essential Web Design

2016-01-07T15:56:51Z

Noemiino: /* Examples */

[https://mywdka.nl/15kw1go/onderwijsenlesaanbod/theme_contents_assignments/dropping-me-world/ Course planning inside MyWdKA]

[[Courses/Design & Technique-Essential Web Design/Q1|Pages from ''' Design & Technique during Quarter 1 2015''']]

[http://publicationstation.wdka.hro.nl/go-student/ Students' work - Quarter1]

__NOTOC__

=Quarter 2 2015=
== Your city in the browser ==
In the second quarter of Design & Technique will be focus on presenting the '''''behind the scenes'' of your intervention and research on a square from the city of Rotterdam''', through the web, to the the world. In other words, you will ''record'' fragments of your intervention – the images, sounds, history, reactions, thoughts and dreams about this square – and explore ways to present them online, so that the user gains a sense of the place and of your intervention.

Building on the knowledge and experience acquired in quarter one, you will be encourage to create interactive works. Outcomes can take any form, from animated drawings, interactive maps, generative image, audio-visual works, or data visualizations.

== Classes==
* [[Courses/Design_%26_Technique-Essential_Web_Design/Q2/01]]
* [[Courses/Design_%26_Technique-Essential_Web_Design/Q2/02]] - JS
* [[Courses/Design_%26_Technique-Essential_Web_Design/Q2/03]] - jQuery
* [[Courses/Design_%26_Technique-Essential_Web_Design/Q2/04]] - exploring the city - choose your own adventure game
* [[Courses/Design_%26_Technique-Essential_Web_Design/Q2/05]] - review game; tutorials
* [[Courses/Design_%26_Technique-Essential_Web_Design/Q2/06]] - audio and video
* [[Courses/Design_%26_Technique-Essential_Web_Design/Q2/07]] - (D3 visualizations)
* [[Courses/Design_%26_Technique-Essential_Web_Design/Q2/08]]

* '''[[Courses/Design_%26_Technique-Essential_Web_Design/Q2/Squares and groups|Squares and groups]]
'''

==Examples==
* [[Courses/Design_%26_Technique-Essential_Web_Design/Q2/Example/Business-card]] - constantly change image
* [[Courses/Design_%26_Technique-Essential_Web_Design/Q2/Example/Form]] - user text input

* [https://www.smashingmagazine.com/2011/09/the-guide-to-css-animation-principles-and-examples/ complex animations]
* [[Courses/Design_%26_Technique-Essential_Web_Design/Q2/Example/Play_pause_video|Play_pause_video]]
* http://species-in-pieces.com/ --> very awesome

== Web-based works that explore city spaces ==
* [http://www.exhaustingacrowd.com/ Exhausting a Crowd by Ky McDonald]
* [http://lust.nl/#projects-3478 Urban Echo] by LUSTlab
* [http://aporee.org/maps/ Radio Aporee]
* [[Courses/Design_%26_Technique-Essential_Web_Design/works/Collective Waiting Portrait|Collective Waiting Portrait]]
* '''Janet Cardiff'''

{{youtube|Tgef5gel4sk}} ''Ghost Machine''

{{youtube|sOkQE7m31Pw}} ''Alter Bahnhof Video Walk''

=== Subjects ===
Subjects explored include:
* Scalable Vector Graphics (SVG) – for the creation of interactive and animated vector images in the browser, also in conjunction with vector drawing software, such as Illustrator and Inkscape.
* JavaScript and jQuery - to provide the interactive and dynamic elements to web pages to pages
* [http://snapsvg.io Snap.svg] Javascript libraries - for ''SVG manipulation''.
* [http://d3js.org/ D3] Javascript library - for the ''creation of visualizations''
* HTML audio-video and canvas

=== Work load ===
The work load for the quarter will be divided into:
* '''weekly classes''',
* '''simple weekly deliverables''' – small exercises that consolidate the techniques and concepts approached in classes, as well as allow you to find expressive and personal ways of employing them.
* '''one main deliverable project -''' that will congregate the knowledge acquired from classes and deliverables onto a project where you create the ''behind the scenes'' of your intervention.

[[File:js-woody-buzz.jpg]]