DATT 1939
Making Interactive New Media Art 2017
Resources

 

Practical/Technical Resource Notes - by Week:

  • Week 1 - Intro: Macs and the server, Intro. to Image Creation for the Web (Image Basics, Basic PhotoShop Tips), HTML container tags.

  • Week 2 - Reading Tips, BBEdit, HTML5, non-breaking space, <pre>, Starting CSS, HTML Editors and Resources, Syntax Checking, Background Images versus Image Tags, Transparent gifs, etc.

  • Week 3 - See a Page's HTML/CSS, More Simple CSS, CSS Selectors and Cascade, Text-decoration (link underlines), CSS Placement and Browser Scrolling Effects, CSS Transparency, Site/Monitor Resolution issues, URL Anatomy and Your Work on the DM Server, Link to Files and Images From Folders (relative paths), Posting HTML Pages Online in Your Sites Folder on the DM server.

  • Week 4 - CATCH UP WEEK - USEFUL TOPICS: z-index, CSS overflow, div borders, changing cursors, individual link effects, CSS display and visibility, nested div examples.

  • Week 5 - A1 Learning Critique Tips, Fixing Permissions Problems



  • Week 6 - A2 Work Preparation, Intro. to JavaScript, Randomness with JavaScript 1, JavaScript Comments, JavaScript If Statements, JS Operators

  • Week 7 - Linking between folders; Sharing files with Public Folder and Dropbox; JavaScript Strings, Numbers, and Concatenation; Quotation Marks in JS; Intro. to Variables; Alert and Prompt; Random Text and Random Image; Change page in current window

  • Week 8 - JS Loops, JS Keypresses, JS Div Interactions

  • Week 9 - Basic JavaScript Cookies

  • Week 10 - JavaScript MouseEvents (Clicks, Rollovers), Sound Size, Basic HTML5 Sound Embedding

  • Week 11 - Basic JS Date/Time, Timing User Actions, Basic JavaScript setTimeout

  • Week 12 - A2 Learning Critique Preparation, Fixing Permissions Problems




Week 1
- Intro: Macs and the server, Intro. to Image Creation for the Web (Image Basics, Basic PhotoShop Tips), HTML container tags.

W1 Quick Reference Notes:

W1 Explanatory Notes:


up to top


Week 2
- Reading Tips, BBEdit, HTML5, non-breaking space, <pre>, Starting CSS, HTML Editors and Resources, Syntax Checking, Background Images versus Image Tags, Transparent gifs, etc.

W2 Quick Reference Notes:

W2 Explanatory Notes:

up to top


Week 3
- See a Page's HTML/CSS, More Simple CSS, CSS Selectors and Cascade, Text-decoration (link underlines), CSS Placement and Browser Scrolling Effects, CSS Transparency, Site/Monitor Resolution issues, URL Anatomy and Your Work on the DM Server, Link to Files and Images From Folders (relative paths), Posting HTML Pages Online in Your Sites Folder on the DM server.

W3 Quick Reference Notes:

  • Minimum code/skills for week 3 - make sure you have practiced more than the content in grey on this link before your week 4 tutorial.

  • Quick Reference: Selectors and Link Colors

  • Quick Reference - dm.ampd.yorku.ca student URLs:
    http://dm.ampd.yorku.ca/web/astudent/page.html   (page.html is in Sites folder)
    http://dm.ampd.yorku.ca/web/astudent/datt1939   (datt1939 folder is in Sites folder)
    http://dm.ampd.yorku.ca/web/astudent/datt1939/a1   (a1 folder is in datt1939 folder)
    http://dm.ampd.yorku.ca/web/astudent/datt1939/a1/index.html  (index.html is in a1)

W3 Explanatory Notes:

up to top


Week 4
- CATCH UP WEEK, USEFUL TOPICS: z-index, CSS overflow, div borders, changing cursors, individual link effects, CSS display and visibility, nested div examples.

W4 Quick Reference Notes:

W4 Explanatory Notes:




up to top


Week 5
- A1 Learning Critique Tips, Fixing Permissions Problems

  • A few learning critique tips:

    When showing your in-process work:

    1. Be prepared, have work open in browser/Photoshop/etc. and ready to show
    2. Speak clearly and to the point
    3. Narrate what you are doing (clicking, scrolling) as you briefly show the parts of the work
    4. Try to relax. Your classmates are all in the same situation with you...
    5. What expected things are you hearing in the comments? What unexpected things are you hearing?

    When perceiving and commenting on others' work:

    1. Remember that you will be/have been in this same situation.
    2. Speak clearly and to the point.
    3. Say something positive about the idea, visuals, text, CSS, approach, or specific theme of the piece
    4. Consider what might help more fully express or embody the stated idea/theme/approach.
    5. Before you speak about anything that could perhaps be improved, make sure you have done #3.

    After the learning critique:

    1. How might you adjust some things about your A1 to respond to things you heard as feedback during the critique? (adjusting the A1 is not mandatory, but instructor comments are often a guide to improvement)

  • Fixing Permissions Problems

    If you have viewed your A1 through the web using the URL/student work page, and everything works, then good.

    However, if you get a Forbidden message, or if some images (for example) are not loading (and you have triple-checked that you have uploaded them correctly and linked/loaded them correctly in HTML), you may have permissions problems.

    How to fix permissions problems:
    Fixing Permissions Problems in your dm server account



    Frank, the ATLL technician also says:
    "If any student continues to have issues, it helps if they take screenshots of the issues to help us troubleshoot future issues. If your students require help with this, tell them to come see me In Person, not to email me, and I can help them solve this issue."

    Frank is usually in the ATLL (ACW 102) or in ACW 103 from 8:30 - 4:30pm, Mon. - Fri.

    Thanks goes to Joe for finding this workaround!



up to top


Week 6
- A2 Work Preparation, Intro. to JavaScript, Randomness with JavaScript 1, JavaScript Comments, JavaScript If Statements, JS Operators

W6 Quick Reference:

  • Minimum code/skills for week 6 - make sure you have practiced this by your week 7 tutorial.

  • When you are trying to figure out how a page with Javascript runs:
     - find all the pieces of javascript
     - identify functions and note their names
     - find where each function is being triggered

W6 Explanatory Notes:

  • Group Work Preparation


  • Intro. to JavaScript:

  • Randomness with Javascript -1:

    Learn to edit and experiment with these examples:

  • JavaScript Comments: between /* and */ in the <script> tag
    <script type="text/javascript" language="javascript">
    
     function randInt(low,high) {
      return Math.floor(Math.random()*(high-low+1)+low);
     }
     
    /*  Here is a JavaScript multi-line comment...
    where I might talk about how a js function works, 
    or note important variables in the js,
    or give credit to coders and/or website where this js originated */
    	
    </script>
    

  • Some examples of JavaScript If Statements - a text file only
    (refer to JavaScript Operators, below, when needed)


  •   JavaScript Operators

    Operator Operation Performed Example
    + addition (with numbers only) x + y = z
    + string concatenation "big" + "day" = "bigday"
    + ALSO string concatenation "nice" + 2 = "nice2"
    - subtraction x - y = w
    * multiplication x * y = v
    / division x / y = z
    > greater than x > y
    >= greater than or equal to x >= w
    < less than x < y
    <= less than or equal to x <= v
    == equal to x == y
    != inequal (not equal to) x != y
    && logical AND (this AND that) (x == y) && (v==w)
    || logical OR (this OR that) (x == y) || (v==w)
    = assignment (sets it to...) x = z
    ++ increment (count up) by 1 x++
    double-minus decrement (count down) by 1 x--
    % modulus x % y = z


  • These JavaScript examples are not guaranteed to work in Internet Explorer (which does not work on a Mac). Remember, all projects in this course are marked on Mac computers! The examples tend to have the best results in Firefox or Safari.

up to top


Week 7
- Linking between folders; Sharing files with Public Folder and Dropbox; Strings, Numbers, and Concatenation; Intro. to Variables; Alert and Prompt; Quotation Marks in JS; Random Text and Random Image; Change Page in current Window

W7 Quick Reference:

W7 Explanatory Notes:

  • Link to files and load images from different folders:

  • Sharing files with the Public Folder and Dropbox

    In your server account, you not only have a Sites and a Documents folder, you have a Public folder. Inside the Public folder is a folder called Dropbox.

    The Public Folder and the Dropbox enable you to share files with anyone else who has a server account on dm.finearts.yorku.ca. This means you can share files with your group members!

    There are two possible methods for sharing files using the Public folder and/or Dropbox:

    1. Put files directly into your Public folder. Then other people can go into your Public folder (they have to know your username to know which account to go in) and copy them somewhere else.

    2. Use the Dropbox in someone's Public folder. Go to someone else's account and go into their Public folder. Inside the Public folder is a folder called Dropbox. Copy the files you want them to have into their Dropbox. You cannot go inside their Dropbox, but you can copy files into it.


  • Strings, Numbers, and Concatenation (All info. on one page, jump to the section you want)

    - From Mozilla Core JavaScript Reference - Strings:
    • Long literal strings
    • Escape notation: "Beside regular, printable characters, special characters can be encoded using escape notation" - possibly useful for creating a new line or a tab within certain JS commands, like prompt()?


  • Introduction to Variables in JavaScript


  •   JavaScript Alert and Prompt

    Simple Alert
    Intro. to JavaScript Prompt
        - Involved Prompt Example:prompttest.html
            - Story version of above: prompttest_story.html
              (read the top comment in JS code for clarification)


  •   Quotations marks within quotation marks in JavaScript:
    This is the explanation written on the random text example (below) page:

    When the content to be written on the page (both tags and text) is surrounded by quotation marks, you must not put any quotation marks inside the content (ie. as part of the content), or this will confuse the JavaScript.

    For example, don't do this:
    newContent = "I told her, "Because your friends don't dance, and if they don't dance then they ain't no friends of mine!"";
    (look at those quotation marks inside quotation marks - - yikes!)

    However, there are ways to tell the browser which quotations JavaScript should ignore, considering them just part of the content:
    One example is the JavaScript code on this page where t is 4 (and the following code will be written on to the page: <span class=\"bigorange\">PUMPKIN</span>) .

    Notice how there is a backslash before the quotation mark right before the class name bigorange? And another backslash before the quotation mark right after bigorange? These backslashes tell the browser that the quotation marks that immediately follow them are not part of the JavaScript code that it needs to pay attention to. These quotation marks are to be considered just part of the content inside the other quotation marks.

    So you could do this: newContent = "I told her, \"Because your friends don't dance, and if they don't dance then they ain't no friends of mine!\"";


  • Random Text and Random Image - with Javascript
    Creating part of document randomly:

  • Try incorporating user-entered text from a prompt into random text written on a page
    (ie. like ex_random_text_elementID.html mixed in some way with prompttest.html)

    If you try and try and get stuck, here is one possible solution: prompt_randomElementID.html



  • Change Page displayed in the Window with window.location.replace()

    - Uses window.location.replace() to change the location of the window based on what the audience entered in a prompt: promptchangewindow.html

    - Uses window.location.replace() and confirm() to change the location of the window to one of two URLs, based on whether the audience clicked OK or Cancel: confirmchangewindow.html

up to top


Week 8 - JS Loops, JS Keypresses, JS Div Interactions

W8 Quick Reference:

W8 Explanatory Notes:

up to top


Week 9 - JS Cookies

W9 Explanatory Notes:

  • Basic JavaScript Cookies:

    • JavaScript cookies allow the browser to remember information between visits to the same page, or when reloading a page.
    • JavaScript cookies also allow the browser to remember information between and across multiple pages.

    • You save the information in a cookie. You set a cookie using the function setCookie (examples further below) and by sending it 3 essential things:
      1. the name of the cookie (in quotation marks)
      2. the information to be saved (the information itself OR the information being held in a variable)
      3. how long until the cookie expires

      Like so:
      setCookie("theusersname", nameinfo, 30);
    • Get the saved information in order to check it or use it by calling the function getCookie, sending it the name of the cookie you want to get. Put the result of this action (which will be the information that was saved in the cookie) into a variable:
      var imagecookie = getCookie("whichimg"); //check cookie called "whichimg" 
      // the data in the cookie "whichimg" is now in the variable imagecookie, for checking/using

    • Use Firefox or Safari if you are going to work with cookies for A2!

      As Joe was testing the various cookie examples, he noticed that Chrome will not store cookies correctly from local files (meaning, from files that are on your own computer instead of being posted online).

    • For reference: w3schools basic JavaScript cookie explanation

    • For reference _only_ (DO NOT try this example without knowing more about renaming cookies) - Original w3schools basic JS cookie code this set of JS examples is based on

  • Very Basic Explanation of this first set of examples:

    This set of examples (based on the original code above) gets and remembers the user's name, in order to greet them when they return to the page.

    When the page loads it triggers function checkCookie(), which is the function you will do the most editing of.

    checkCookie() calls function getCookie() (do not edit getCookie()), to see if the cookie has already been set or not, or to see if the cookie is expired, which basically returns the same result as if the cookie is not already set.

    If the cookie has not already been set (or if it has expired) checkCookie() prompts the user for their name and then calls function setCookie() to save this name information.

    It saves this name/information in a cookie named (in the different examples) aname, anameMins, or anameSecs. The specific name is important to note when using the specific examples.

    If you are not trying to use the same cookie on purpose, pages with new cookies need to use different Cookie names than other pages do --or else information will be overwritten when you don't want it to be overwritten, or the script won't function, or the cookie will think it is already set and won't save new information, etc.

    When you try your own experiments, you should usually change the cookie name (make sure to do so in all appropriate sections of the script).

    Saving new or different information in a cookie just overwrites the old information in that cookie. If you want to overwrite old information in a given cookie, simply use the same cookie name when you call the setCookie function.

    Saving multiple pieces of information in a cookie usually requires the creation of new cookie names for each piece of information, and the sending of multiple commands for checking and getting the cookies, and saving the cookies.

    This first set of 3 examples only deals with one cookie, and how to check for the cookie when reloading/returning to the same page:

  • js_basiccookie_expireMins_hardc.html
    - A JS cookie that expires after 2 minutes (edited from w3schools reference code, above)

  • js_basiccookie_expireMins_var.html
    - A JS cookie friendly to project testing that expires after a number of minutes entered by you (edited from w3schools reference code, above)

  • js_basiccookie_expireSecs_var.html
    - A JS cookie friendly to project testing that expires after a number of seconds entered by you (edited from w3schools reference code, above).


  • One page, 1 cookie: These pages remember whether an image has been clicked when you return to the page (or reload):

    js_basiccookie_expS_click1img.html
    - A JS cookie friendly to project testing that expires in 20 seconds and can remember if you clicked an image. If you don't click, doesn't appear to do anything.

  • js_basiccookie_expS_click1imgRandAlert.html
    - Same as the above, but expires in 10 seconds, and has a random alert when you click the image.



  • Remember 1 cookie across 3 pages: Remember several pages later if you have clicked an image on the first page:

    Developed from the js_basiccookie_expS_click1img.html example above, you need to download all three pages and the image (the image goes into an images folder):

    js_cookie_expS_pgToPg1.html
    js_cookie_expS_pgToPg2.html
    js_cookie_expS_pgToPg3.html
    0
    Friendly to project testing, expires in 20 seconds and knows on pg 3 if you clicked an image on pg 1 (remembers what happened on page 1).


    Developed from the above example: New Version 1a (a simpler one)!

    Remembers 1 cookie across 3 pages: Remembers several pages later WHICH image or work link you clicked on the first page:

    Download all three pages and the image (the image goes into an images folder):

    js_cookie_expS_pgToPg1newV1a.html
    js_cookie_expS_pgToPg1newV1b.html
    js_cookie_expS_pgToPg1newV1c.html
    0

    Friendly to project testing, expires in 10 seconds and knows on pg 3 WHICH image or word link you clicked on pg 1 (remembers what happened on page 1).
    This example shows the _simplest_ (and full of redundancies) way to accomplish this.


    Developed from the above example: New Version 2a (the streamlined one)!

    Remembers 1 cookie across 3 pages: Remembers several pages later WHICH image or work link you clicked on the first page:

    Download all three pages and the image (the image goes into an images folder):

    js_cookie_expS_pgToPg1newV2a.html
    js_cookie_expS_pgToPg1newV2b.html
    js_cookie_expS_pgToPg1newV2c.html
    0

    Friendly to project testing, expires in 10 seconds and knows on pg 3 WHICH image or word link you clicked on pg 1 (remembers what happened on page 1).
    This example shows the streamlined and more sophisticated way to accomplish this.



  • Remember 2 cookies across 3 pages: Remember several pages later what username you entered and _which_ image you clicked on the first page:

    Developed from the above example, you need to download all three pages and the two images (images should go in an images folder):

    js_cookieExpS_pgToPg_ex2p1.html
    js_cookieExpS_pgToPg_ex2p2.html
    js_cookieExpS_pgToPg_ex2p3.html
    1 2
    Friendly to project testing, expires in 20-30 seconds, and knows on pg 3 the username and which image you clicked an image on pg 1 (remembers what happened on page 1).

up to top


Week 10 - JS Rollovers (usual and creative), Basic Sound Editing with Audacity, Sound Size, Basic HTML5 Sound Embedding

W10 Explanatory Notes:

  • JavaScript MouseEvents (Clicks, Rollovers):

    • a Simple Rollover: ex_simplerollover.html

    • Multiple Simple Rollovers on the same page: ex_multiplesimplerollover_explan.html
      - with Explanation written on the page


    • Mouse Events - Sequences:

      The order that mouse events occur can be conceived of as falling into two common sequences. You could even consider these the stages of a tiny image-based narrative:

      SEQUENCE 1:
      1. before rollover, img tag has already loaded an image
      2. onmouseover (rollover image)
      3. onmouseout (roll-off image)
      Simple rollovers (like examples above) basically use Sequence 1, but don't exploit the ability/potential to have a different image for 1 and 3.
      SEQUENCE 2:
      1. before rollover, img tag has already loaded an image
      2. onmouseover (rollover image)
      3. onmousedown (press of mouse image)
      4. onclick (release of mouse image)
      5. onmouseout (roll-off image)
      This rollover example uses Sequence 2: ex_mouseevents_4states.html
      - with Explanation written on the page

    • More Mouse Events for Rollovers and Links:

      Four Links all modify 1 Image and other ideas:
      mouseevents_4links1img.html

      Ideas for modifying simple rollovers and multiple mouse event rollovers: w8rolloverchangeideas.txt - text file only


    • Random Rollovers: - with Explanations written on the page

      ex_jsrandomrollover_onimage.html
      - a mouseover on the image triggers a random rollover

      ex_jsrandomrollover_onlink.html
      - a mouseover on link text triggers a random image rollover




  • Basic Sound Size Considerations:

    Factors determining how large a sound file will be:

    1. length
    2. number of tracks (usually mono vs. stereo)
    3. sample rate (and bit rate)
    4. sound format/compression

    A2 has a 1.5 MB limit per sound file. So consider the following:

    1. a few seconds takes up so much less memory than a few minutes - can you use a shorter sound and/or a looped sound instead of a long sound?

    2. mono takes up half the memory of stereo, so perhaps not all sounds need to be stereo?

    3. the lower the sample rate and/or bit rate, the less memory taken up by the sound - it may be that sounds don't all need to be at 44100 Hz (44.1 kHz), but would be fine at 32000 or 22100.

    4. Consider saving your sounds as .mp3s, which (due to the compression settings built into the format) are usually noticeably smaller than .wav files of the same length. For Audacity, you need to download an additional bit of software to enable it to actually save .mp3 sounds.


  • Basic HTML5 Sound Embedding:

    Currently, there are 3 supported file formats for the HTML5 <audio> tag: MP3, Wav, and Ogg.

    Here is an HTML5 tag that hides any sound controller, but automatically (with autoplay) plays and loops (with loop) a wav called sound_click.wav:

    <audio autoplay loop>
      <source src="sound_click.wav" type="audio/wav">
      Your browser does not support the audio element.
    </audio>
    

    If you don't want the sound to loop, remove the word loop.

    Here is another HTML5 tag that _has_ a sound controller, does not automatically play, but does loop sound_click.wav:

    <audio controls loop>
      <source src="sound_click.wav" type="audio/wav">
      Your browser does not support the audio element.
    </audio>
    

    See more about how you can use these and other attributes in the audio tag by following the reference links below.

    The examples above are not concerned about being compatible with Internet Explorer, which only supports .mp3s. For IE compatibility examples, see the links below:

    Relevant w3schools notes, for reference:



up to top


Week 11 - JS Date/Time, Timing User Actions, Basic JavaScript setTimeout

up to top


Week 12 - A2 learning critique, Fixing Permissions Problems

  • Prepare for showing work during A2 Learning Critique:

    There will be 10 minutes at the beginning of lab before the Learning Critique starts for you to prepare to show your in-progress work on A2.

    During this time, each group/individual will copy the A2 work they are going to show onto one or two LAB computers where they are sitting. Don't show work on your laptops, as the screens are usually much smaller and harder to see. (Sketches or diagrams on paper can also be shown, if needed).

    Each group/individual will have approximately 9 minutes (sometimes more, if there are fewer projects in that lab) to show and explain their work.

    When it is your turn to show work:

    First, show us things in progress, demonstrating what is working for A2. Read aloud the text and prompts, and narrate the actions you are taking (clicking, rolling over something, pressing a particular key, typing certain words, etc.).

    After showing us what you can, now further explain/comment on what you've shown.

    Designated Groups for A2 should plan ahead so that, during the explanation of your assignment, each person in the group has something to say and is given time (say, 2 minutes or so) to say it. Some people may greatly prefer showing/demonstrating the project rather than speaking, so perhaps they could explain less if they are showing the work.

    Each person in a group needs a chance to present something about their project to fulfill that particular part of Learning Critique participation.

    What could you say about your assignment? Here are some ideas to help groups plan ahead:
    • explain major theme/approach
    • decisions for Columns A-D, including where on spectrum of playful art / game you feel the project falls and why
    • clarify OR contextualize OR even ask questions about what happens in the project
    • javascript categories (kinds of javascript) used, and why chosen
    • how project works overall
    • any interesting javascript solutions
    • challenges you've had

    (Individuals are not expected to discuss as much information about their A2s as a group is)

    Final Note: If you are ill or delayed on A2 learning critique day, please communicate with your group (if applicable) as soon as possible to update them on the situation! If you will be late to lab, try to give your group your likely time of arrival. If you are ill, please email your lab leader.

    Absence from the A2 Learning Critique means a 0 unless there are reasonable and documentable circumstances. You would need to provide a copy of your documentation -- in person, in a high quality image, or dropped off for your lab leader's mail box to the Visual Arts and Digital Media Office counter (located on the 2nd floor of the Joan & Martin Goldfarb Centre for Fine Arts).

  • A few learning critique tips: (similar to A1)

    When showing your in-process work:

    1. Be prepared, have work open in the browser / Photoshop / etc. and ready to show
    2. Speak clearly and to the point
    3. Narrate what you are doing as you briefly show the parts of the work
    4. Try to relax. Your classmates are all in the same situation with you...
    5. What expected things are you hearing in the comments? What unexpected things are you hearing?
    6. How might you adjust some things about your A2 to respond to things that you did or did not expect as feedback?

    When perceiving and commenting on others' work:

    1. Remember that you will be/have been in this same situation.
    2. Speak clearly and to the point.
    3. Say something positive about the idea, visuals, text, sound, JavaScript, approach, or specific theme of the piece
    4. Consider what might help more fully express or embody the stated idea/theme/approach.
    5. Before you speak about anything that could perhaps be improved, make sure you have done #3.

  • Fixing Permissions Problems

    If you have viewed your A2 through the web using the URL/student work page, and everything works, then good.

    However, if you have any problems: While you are in the lab, you can fix permissions problems with any A2 files (.html pages, images, .css files) you've put onto the DM server. Do this by fixing the folder the files are in.

    Please note: there is no way to fix the permissions problems from home, you must come in to the lab and fix them there!

    See what permissions problems are, how they can show up, and how to fix them while in the ATLL by following the notes at the week 5 section of this page.



up to top





Updated Oct. 18, 2017.


FA/DATT 1939 3.0 Making Interactive New Media Art Fall 2017
is a course offered through:
The Department of Computational Arts
The School of the Arts, Media, Performance & Design (AMPD)
York University (Toronto ON, Canada)