Embed Size (px)
Citation preview
Programming games
Examples: Audio example. Google Maps api.Classwork: show more complex video.
Classwork/Homework: Find place (lat and long) for basic Google Maps API. Build more
complex maps project.
Basic audio example
• Demonstrate http://faculty.purchase.edu/jeanine.meyer/html5/playaudio.html
• Need to acquire audio. Use Miro Video Converter (or other tools) to produce mp3 and wav versions (assuming you didn't start with wav version. Do produce an mp3 version).
• You can modify the names to make them simpler.
• Write HTML5
– note: I added an image. You can add whatever you want.
playaudio.html
<!DOCTYPE html><html> <head> <title>Esther at the piano</title> </head><body><img src="esther.jpg"/><audio controls="controls" preload="auto"> <source src="EstherT.mp3" type="audio/mpeg"> <source src="EstherT.wav" type="audio/wav"> Your browser does not accept the audio tag.</audio></body></html>
Recap: Terminology
• HTML has elements. Element defined by opening and closing tags.
• Elements are within elements.
• The video element has a video tag, 3 source tags/elements, content to give message for non-compliant browsers, closing video tag.
• The video and the source tags contain attributes.
Note
If you understand general idea of
• elements being defined by tags
• Attributes (aka properties)
– Some attributes specific to the type of element and
– Some not: any element can have name or id
You can quickly get comfortable with new elements…
Next
• Google Maps API
– Basic example– Not so basic example
• Decide on your final project. May use video, and/or audio, and/or Google Maps API, or anything else.
Preparation for mapping• How to designate a location?• Latitude: degrees, parallels to equator, which is the zero
position. North pole 90, South pole -90
• longitude: degrees, measured from Greenwich meridian—this is an arbitrary decision made many years ago. Longitude lines called meridians.
How to get?
• How to get this?
– New Google maps: lat long pop up window (BE PATIENT.)
– Classic Google Maps: On lower left, click on Maps Labs and enable drop lat lng tool tip marker. Then, click and shift to get lat, long values. This requires Classic google maps.
– Look up various ways
http://www.worldatlas.com/aatlas/latitude_and_longitude_finder.htm (this goes to Google)
• Also geolocation and using Google Maps with addresses.
Google Maps Application Programming Interface
• An API provides ways to access functionality– Defines objects, which have methods (functions) and
attributes (properties)• For HTML and JavaScript,
– add an external script element– make use of methods and attributes
• Documentation is quite good.https://developers.google.com/maps/documentation/javascript/tutorial
– Note: we will skip getting a key.
To bring in a Google Map
• Note: this is dynamic: it isn't an image of a map, but something you can click on, pan, use controls.
• Need to set up a place to put the map.
• Need to specify options.
– This is done using an associative array: array with named elements, not numbers as indices.
Objects• An HTML document is described by the Document Object Model.
– Objects (code and data)• Attributes (aka properties) that are values• Methods that are functions to be invoked using the
properties of the objects
• Google Maps Application Programming Interface IS a set of objects—
• We create objects using constructor methods
• Access attributes and invoke [other] methods
• Including addEventListener
• Use a script element referencing external file
Remember• Very first html program used Date()
• Constructed a Date object
• To save the Date object, can use
• today = new Date();
• Used new Array() to create an Array object.
• To write something on document:document.write( … );
Map options
• center of map: given as a Google Maps API latlng object.
• type of map: given as a Google Maps API constant: TERRAIN, ROADMAP, SATELLITE
• zoom level: number
• more…
HTML document
in <head><script type="text/javascript" charset="UTF-8" src="http://maps.google.com/maps/api/js?sensor=false"></script>
in <body><div id="place" style="width:600px; height:400px"></div>
somewhere in the code
// Determine the base location: replace ??? mylat = ???;mylong = ???;
blatlng = new google.maps.LatLng(mylat, mylong);myOptions = {
zoom: 12,center: blatlng,mapTypeId: google.maps.MapTypeId.ROADMAP};
map = new google.maps.Map(document.getElementById("place"),myOptions);
basic example
http://faculty.purchase.edu/jeanine.meyer/html5/basicmap.html
<!DOCTYPE html><html> <head> <title>Basic map</title><script type="text/javascript" charset="UTF-8"
src="http://maps.google.com/maps/api/js?sensor=false"></script><script>function init() { blatlng = new google.maps.LatLng(41.04796,-73.70539); myOptions = {
zoom: 14, center: blatlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("place"),
myOptions);}</script> </head> <body onLoad="init();"><div id="place" style="width:600px; height:400px"></div></body> </html>
Assignments
• Basic Google Maps API
• Determine latitude and longitude value.
• Create your basic Google Maps API example.
• Produce second basic example with different location, zoom, type.
• Produce your own SOMEWHAT more complex Google Maps example.
• You can do more for your final project.
Teaser
• Will show example combining Google Maps API and video and audio
• Consult HTML5 and JavaScript Projects
• other…
Extra credit • Find discussion on the different video formats, including
patent issues. Read, summarize and put in working link as post on moodle.
Another extra credit opportunity
…and a good thing to do
• Determine the size and compare of your video files and audio files
– Original (probably MOV or AVI)– webm– mp4– ogg (ogv)– wav– mp3
Make a posting on the Introductions, etc. forum on moodle
Extra credit
Make posting on [old] controversies involving Google gathering video for Street View (in Europe).
Make posting on RECENT Net Neutrality rulings
![Programming Games [Show Google Maps project.] Demonstrate more examples. Classwork/Homework: Decide on final project. Post proposal to moodle](https://img.pdfslide.net/doc/110x75/56649f2b5503460f94c462a5/programming-games-show-google-maps-project-demonstrate-more-examples-classworkhomework.jpg)
