Advanced
Scripting, course # IM325.01
Rouvelle/Spring_09
Thursday/4-10/BR206
Office
hours by appointment
Contact:
jrouvelle@mica.edu
***Final Class May
7, there will not be a final exam during exam week***
Course Description: Advanced scripting will teach students AJAX (Asynchronous Javascript And Xml) in concert with various APIs (ex: Google Maps, Flickr, Twitter, etc) and specific Web 2.0 methodologies enabling realtime interaction and datasharing between websites and mobile devices. Prior knowledge and experience with Javascript, PHP, MySql, HTML and CSS is required.
Evaluation: Grades
in this course will be based on regular class attendance, the quality of your
work, class participation, and progress.
Tardiness and excessive absences will adversely affect your grade. Participation in discussions and
critiques is mandatory.
Projects &
Grading: You will be asked to do assignments throughout the semester. Most of the assignments will be
presented in class and will be designed to stimulate group conversation and
interaction.
Students will be graded by letter, A-F, on all evaluated work. Work must be completed on time and in full satisfaction of each project goal. Late work (assignments handed in or posted after the start of in-class critique sessions) will be automatically downgraded by one letter grade. In addition to in class exercises, you will complete four projects.
|
Letter |
Description |
|
A |
Well above the expectations
of the course. Outstanding
participation, attendance, and exceptional progress. |
|
B |
Above average assignments
and participation. No more than one absence. |
|
C |
Average assignments and
participation. No more than two absences. |
|
D |
Below average execution of
assignments, incomplete assignments, poor participation, and no more than
four absences. |
|
E |
Well below average: work,
attendance (more than absences), projects, and participation. |
|
F |
Unsatisfactory: work,
attendance (more than four absences), projects, and participation |
Attendance: Two
or more unexcused absences from class may result in failure. Two unexcused late arrivals, or early
departures will be marked as the equivalent of one absence. Absence from a class is not an excuse
for skipping a tutorial, reading assignment, or posting an assignment. You are fully responsible for
completing work.
*** If you have any problems or concerns with our class PLEASE CONTACT ME. I am always willing to work with you to improve our experience.
ADA Compliance
Statement
The LRC recommends the following statement for use on course syllabi:
Any student who feels s/he may need an accommodation based on the impact of a disability should contact me (jrouvelle@mica.edu) privately to discuss specific needs. Please contact the Learning Resource Center at 410-225-2416, in Bunting 458, to establish eligibility and coordinate reasonable accommodations. For additional information please refer to: http://www.mica.edu/learningresourcecenter/
Health and Safety
Compliance
From the Office of Environmental Health and Safety (EHS)
The Office works to provide EHS support for all members of the MICA community. The primary goal of the Office is to be proactive in establishing a culture of safety in which each member of the community shares ownership responsibility that allows each person to be involved in maintaining a healthy work and studying environment. EHS uses several methods to achieve this objective.
First, the EHS office looks at the totality of the EHS requirements by combining campus needs with state and federal requirements and clearly communicating the shared policies and procedures. Second, EHS identifies training needs and develops guidelines for the use of equipment, material and procedures. Third, we ensure compliance with policies through evaluations, inspections, and committees.
It is the responsibility of faculty and students to understand health and safety policies relevant to their individual activities and to review MICA's Emergency Action Plan, as well as to participate in training, drills, etc. It is also each faculty member's responsibility to coordinate with the EHS Office to ensure that all risks associated with their class activities are identified and to assure that their respective classroom procedures mirror the EHS and Academic Department guidelines. Each of the Academic Department's also publish EHS procedures and policies such as a dress code, the use of personal protective equipment, fire safety, training, and how to properly dispose of chemical waste. Each of these policies and procedures must be followed by all students and faculty. Most importantly, it is the responsibility of the faculty to review, test, and assess each student's awareness of basic safety procedures, such as evacuation routes, use of chemicals, fire prevention, and all other guidelines posted by the Environmental Health and Safety Office, (e.g., smoking policy, independent studio policies, pet policy, disposing of hazardous and chemical waste, etc).
We will
study Asynchronous Javascript
And Xml aka Ajax
Our
first two weeks will focus on skill building with Ajax, and, then Geotagging, uploading, and mapping photos from cell phones/iPhones, etc.
We will
put all of our skills together on a website we will design and launch that will
be called threeblueherons
threeblueherons will be a real world
application of the skills we will learn in this class.
threeblueherons is a combination of geocaching,
social media, and environmentalism.
The
concept is simple:
Let’s
do some AJAX!
This is
the best, most succinct intro to Ajax I know: w3Schools ajax tutorials,
We’re
going to go through the Basic section now.
Assignment:
***
<script type="text/javascript">
var currenttime = '<? print date("F d, Y H:i:s", time())?>' //PHP method of getting server date
var montharray=new Array("January","February","March","April","May","June","July","August","September","October","November","December")
var serverdate=new Date(currenttime)
function padlength(what){
var output=(what.toString().length==1)? "0"+what : what
return output
}function displaytime(){
serverdate.setSeconds(serverdate.getSeconds()+1)
var datestring=montharray[serverdate.getMonth()]+" "+padlength(serverdate.getDate())+", "+serverdate.getFullYear()
var timestring=padlength(serverdate.getHours())+":"+padlength(serverdate.getMinutes())+":"+padlength(serverdate.getSeconds())
document.getElementById("servertime").innerHTML=datestring+" "+timestring
}window.onload=function(){
setInterval("displaytime()", 1000)
}</script>
<p><b>Current Server Time:</b> <span id="servertime"></span></p>
***
__________________________________
The plan:
Create a google map using the google map API, and the Google Maps API – center it on one of the geographic regions you’ve chosen for one of your pages for last week’s assignment.
Using the Google Ajax Feed API create a feed from relevant sites on the front page of you project.
.
We will all do this in class tonight.
Assignment:
Create three more google maps centered around the remaining locations you’ve chosen for the pages that you created for today.
The future:
We will add photos to our google markers, including photos submitted by users. How to create custom markers
We will write a script that will enable users to email geo-tagged photos to our account and those photos, with their LAT/LONG coordinates will be placed in our database and will become the images on our maps.
We will add a comment section for each photo so that visitors to the sites can leave messages regarding the state of the site (ie, if the work is complete, etc.)
We will add an info page where videos about the specific issues we are documenting and working on. This info will be linked from our google map markers.
Week 3
AJAX/ Google Maps Mashup Project 1: .
How to create custom markers, parsing email in Python.
Our goal is to embed images, whose location (URL) is stored in a databasee into custom tags on a google map centered around a specific geographic region.
Please create three different markers (different colors, different shapes) to indicate three different environmental conditions. For now, use:
Invasive species of concern, Maryland
-and-
For information and images.
Pick three species of non-native invasives and include an image of them, along with a custom icon, and some brief information about them plus a link to more information.
Place three appropriate non-invasives for each of your locations.
i.e., English ivy
Garlic mustard
Vines, etc…
More information on local efforts>>
Removal of invasive, non-native plant species, Marc Imlay, Sierra Club
I have begun the Python scripts to Parse emails for various content and attachments, including images.
***I will provide you with the Python scripts – to use them, please be sure that Python is installed on your computer.
***Today I will give you the scripts for parsing emails, next week we will write the scripts for extracting GPS data from the EXIF data in the header of jpegs created with digital cameras/phones.
We may decide to do a Flickr Google mashup. We’ll discuss the pros and cons.
Week 4
AJAX/ Google Maps Mashup Project 1
****Reference for developing for google maps
Download and Unzip
Explanation: Static XML is useful, but when you have a database of locations that is being updated regularly, and when the new data is essential for your users, it just will not do. A good solution is to have a back-end script such as PHP generate the XML file as required. The example above doesn't really need AJAX, as it only gets the points once, but it serves as a framework upon which to build.
In order to use the above scripts you’ll need to create a simple database, described in the documentation.
TODO:
1. change the location of the above map to match one of your maps/cernterpoints, and change the content of the DB so that it places markers around the new centerpoint.
**
Download and Unzip:
TODO:
1. Run the scripts as written. REMEMBER TO USE YOUR OWN GOOGLE MAP API KEY
2. Make three other versions to match your three geographic locations
3. create four sets of markers, one each for winter, spring, summer, fall
3. Using your season variable, have the season determined when the page is loaded, and the appropriate markers placed.
4. Have the buttons post data to a PHP script (like this) that will load marker info.
**
Using AJAX (xmlhttprequest) with settimeout:
Download and Unzip:
TODO:
1. Study how xmlhttprequest is called automatically by setTimeout("get()", 4000);, and how window.onload=init; (bottom of script) is used.
**
loading data from a DB with PHP and Javascript.
à GXmlHttp is google maps version of xmlhttprequestß
TODO:
1. Revisit these scripts: AJAX with PHP and MySQL
2.
Automate the Gxmlrequest
with settimout, as in the scripts above
3.
Connect
the php script to your own databases/custom markers,
etc.
4.
The
point is to prepare your scripts to receive updates automatically from user
data.
Assignment:
1. Our goal is to have each of you loading custom
markers/info/images from a DB automatically via PHP and Javascript
by the end of next week.
Week 5
AJAX/ Google Maps Mashup Project 1 + Flickr API Flickr API key,
We’re out of the python/POP3 business, here’s why:
Multiple incompatibilities between our script and what my host has installed.
The scripts all compile fine, but they are living in an unstable environment that I can’t really control.
The moral is to use our own server for the project. If someone picks it up that is the first thing they’ll do.
The fix is to setup a
Flickr group, and sent the GPS tagged images to
Google Maps via Shozu. We’re going to do that tonight.
First we’ll need a GPS enabled phone - an N95 or iPhone, for example.
Then we’ll need ShoZu, (with the GPS tagging switched to ‘on’).
·
ShoZu needs to be
configured properly on the phone in order for this to work
Once we’ve got those two sorted we’ll need to setup a Flickr group account and enable the two following options:
1. Import EXIF
Location Data - http://flickr.com/account/geo/exif/?from=privacy
2. Import Geotagged Photos - http://flickr.com/account/geo/import
3. We’re going to
limit the uploads to those that have GPS data. Video, too!
4. Each of us will
have admin privileges for the group.
Now let’s take a few photos and upload them.
Then go to the Flickr group page.
Scroll to the bottom and you should see some feeds - you want the geoFeed.
Right click on that and then ‘copy link location’.
Once you’ve done that – go to Google maps and right click, paste into the search box and ‘search maps’.
A couple of things that may help.
Make sure that you have the "Import EXIF location data" option turned on in Flickr first (it's off by default).
· http://www.flickr.com/account/geo/exif/?from=privacy
Second, the &georss=1 option gives you your RSS feed and if any of the photos have geo data in that'll get added to the RSS feed.
Use this instead>>
· http://api.flickr.com/services/feeds/geo/?id=35468159852@N01&format=rss_200
· (using your ID that you get from the RSS feed instead).
· ...That gets you your 20 most recent geotagged photos, and just the geotagged ones.
You can also use...
· http://api.flickr.com/services/feeds/geo/?id=35468159852@N01&format=kml_nl
· ...to load them into Google Earth.
TODO:
· Get the Rss feed to update Google maps asynchronously:
o Pull
the RSS feed for geotags – Look Here –but only
in Safari for now…
o Import those tags into our DB
that contains our markers
·
Start to design the site.
Week 6
AJAX/ Google Maps Mashup Project 1 + Flickr API Flickr API key,
Part II
Week 7
Testing MICA’s
new site:
We’ll spend the first hour of
class tonight testing/discussing certain areas of MICA’s
new website.
Each of you should spend about
20 mins on the site, answering the questions below
individually, and sending your answers to Gregory Rago:
grago@mica.edu
Then we’ll discuss the site as a
class:
>>http://webprod.mica.edu/
1. Take ten minutes to explore
the site. What did you want to
explore first? Were your
expectations met when exploring the sections of your choosing?
2. Without using the Search
function (this is not enabled till the actual site launch on the 9th), try to
find an area of MICA's website that you previously
visited regularly. Were you able to find it easily? Were you able to pinpoint a
location immediately or did you need to explore? Was the information on the new
site in a place you weren't expecting?
Is it missing entirely?
3. Is the new website missing
any functionality you used on the previous site?
4. Does the site as a whole meet
your needs and expectations for the school's web presence?
5. During your visitation of the
new site did you encounter any links that did not work or pages that rendered
incorrectly in the browser? If so,
please include a url
referencing the error as well as what platform (PC or MAC) and browser
(Internet Explorer 6 or7, Firefox 2 or 3, Safari) you were using.
Then, we’ll
look at how well the smartphone, flickr,
shozu, google maps scripts are working.
Then AJAX chat app! >>
This script requires one piece
of additional work, the addition of a login script – when you setup the
database and run it you’ll see.
This is your assignment for next
week!
Once you figure that out:
·
Put a chat on each of your threeblueheron pages.
And, finally, if we have time
tonight, Mashups>>
1.
Multiple
Twitter feeds on one html page.
2.
Yahoo Pipes
3.
Displaying pipes on HTML pages
Week 8
A Few Good Games:
1.
video
·
four
minutes and thirty three seconds of uniqueness
1.
Raycasting and HTML5 Canvas
Data Mining:
HTML
DOM and easy screen scraping in PHP
Term Extracting:
o YUI-based script using the Yahoo
Term Extractor (you’ll need a developer key to use it!)
o Yahoo User Interface (YUI) library
…the
act of measuring changes a situation
·
moodlog
·
moodjam
·
Plodt – chart your
life through twitter
Parse Yahoo Pipe’s JSON output?
______________________________________
Week 9
Continue to develop three blue
herons
Browser History Hacks:
·
CSS History Hacks without Javascript
·
Checking Browser History with Javascript
·
A start on reading one’s
entire history
The
<canvas> element is not implemented in IE…
Javascript
(using jQuery/gameQuery) Game tutorial:
Project Study:
·
Spacius
For sound it uses:
·
SoundManager 2
wraps and extends the Flash Sound API, and exposes it to Javascript.
(The flash portion is hidden, transparent to both developers and end users.)
Switch
audio converter for Mac
How
to make animated
8-bit style graphics in AI
*use file->export to export your graphic as a .png, .gif, etc.
Assignment:
Follow
the tutorial above a make a simple game, including sound, graphics, etc.
Week 10
·
Digital Collaborators,
1.
have
the most tech assets (PDAs, cell phones, laptops, MP3
players, etc.) out of the five groups, and use those assets to both work and
share their creations with others
·
Ambivalent
Networkers,
1.
are
distinct in that Pew says they have folded mobile devices into every aspect of
their social lives.
2.
don’t
actually "like" this level of availability as much as everyone else.
3.
they
use it the most and like it the least…
·
Media
Movers,
1.
are
more likely to create "information nuggets," like digital photos, and
pass them on right away.
·
Roving
Nodes,
1.
get
the most out of basic applications, like e-mail and texting, and "find
them great for arranging the logistics of their lives."
·
Mobile
Newbies
·
Collage is now the language of teenagers…
·
Ex: polyvore
Moistproductions,
Jason Freeny
Games:
·
Irritating
Stick – the worst video game of all time?
·
Offworld (boing boing’s gaming blog)
·
Increpare
– let’s try something out.
·
Chiptunes, an
academic treatment
·
Disabilities no barrier to gaming
·
javascript game tutorial (simple)
Martin Wattenberg, datavisualization
Javascript -
popping up and dropping down:
·
Window
open/close via setTimeout
·
Getting
a random element from an array
drop down ads – roll your own.
“filtering is the next
great challenge in social media.”
Let’s add a shoutbox and a
custom AJAX feed mashup to three_blue_herons.
Shoutbox Ajax, jQuery tutorial
Yahoo Pipes for three_blue_herons
·
Twitter’s unexpected growth is being driven by unexpected
uses
o
12 Seconds… should we use it?
o Inbound links
= link:http://URL
·
http://gdata.youtube.com/feeds/api/videos?orderby=updated&vq=YOUR_SEARCH_TERM_HERE
o http://feeds.delicious.com/rss/tag/YOUR_SEARCH_TERM_HERE
1.
Setup a Yahoo Pipes account.
4.
Sort items by date/descending
Get the URL for the JSON from your pipe.
·
Plug it in to this PHP script. (open
up pipes.php)
·
All you need to do is plug in the JSON url for your pipe.
Remember Google Ajax Feed API ?
·
Try it. (view
Page Source and copy it)
Don’t look back – game of the week.
Javascript maze with moving parts, excellent ray
casting tutorial w/ working scripts
Generate an RSS feed with PHP and MySQL, send a Tweet via PHP, simple data entry to MySQL via PHP
Scripts for today's class are here.
You'll find:
TIP: try: echo nl2br($row['notes']);
to display data from MySQL
like
this
see
?
RSS feeds must be valid in order to run. to check on the validity of your feed, enter the URL of the PHP script to generate RSS you've written here.
You'll need an RSS button to allow people to click and subscribe.
use the scripts in today's script download folder: rss_button_autodetect
You'll also need an rss.jpg, download here.
error handling in javascript:
non-sequitors:
So, what to do?
in class:
Your options:
To append (add to) and/or concatenate (add) in php (this will be useful if building charts with the google chart api above, for example):
$url="mydomain.c0m/folder/file
?name=$name
&query=$query
&page=$page
"; // supposed to be on one line...
In the example above, the PHP interpreter will replace all $whatever inside the double quotes with the respective variable's value and then assign it to the variable $url.
Alternatively, this will also work:
$url = "mydomain.c0m/folder/file";
$url.= "?name=" . $name;
$url.= "&query=" . $query;
$url.= "&page=" . $page;
The .= is string append operator. The plain . is string concatenation operator.
i.e. concatenation:
$one= "ABC";
$two="DEF";
$onetwo=$one . $two
so $onetwo now contains "ABCDEF";
see?
In class:
Assignment:
_________________________________________
beagle is search tool for Linux that let's you search your own personal information space.
Swine Flu n u:
Scripts:
?: