1. Title Computer Science 767W Fall 2007 Interactive Data Visualization Lecture #03 12-Sep-2007 Colin Ware Kurt Schwehr

2. Last class The Google Earth User Interface Creating a basic Placemark/Thumbtack

3. Class #03 Clouds KML in Google Maps HTML/KML detail Color/Style Lines

4. Course time change? Can we move the class to 1:00-2:20?

5. How many people have used Google Earth before this class?

6. Course Web Pages Google Earth: –http://vislab-ccom.unh.edu/~schwehr/Classes/2007VisCourse –kurt@ccom.unh.edu Human Perception for Information Display: –http://ccom.unh.edu/vislab/VisCourse/

7. Jing

8. Camstudio

9. Cloud Demo http://www.barnabu.co.uk/files/kmz/ clouds-monthly-sequences-nl.kml

10. KML on Google Maps

11. Last time in Google Earth…

12. If we create the proper URL, KML can appear in google maps http://maps.google.com/?q=URL http://maps.google.com/?q=http://vislab- ccom.unh.edu/~schwehr/Classes/2007 VisCourse/lectures/02/sunrise.kmlhttp://maps.google.com/?q=http://vislab- ccom.unh.edu/~schwehr/Classes/2007 VisCourse/lectures/02/sunrise.kml

13. The picture does not work Sunrise over the Chase Ocean Engineering parking lot.

14. Only have to keep track of one file with a kmz

15. Google Earth KML is XML

16. XML Header - “XML Declaration” – –XML character encoding –UTF-8 for English characters

17. Comments Anything within Comments do not nest

18. xmllint can tell us that something is wrong http://xmlsoft.org/

19. XML Tags Must be balanced –Start: –End: <--- “/” marks the end –Can contain other tags, text, mixed some text text1 text2 text3 Can not mix tags –Wrong:

20. XML documents must have a single “root” node Oops…

21. Empty tags have a shorthand These are equivalent: –

22. Capitalization matters for XML

23. Tags can have Attributes Attributes are quoted text - termed “value” Empty tags can also have attributes –

24. Basic XHMTL - Root node for the document - Contains the contents of the document Headers,, and Links Tables

25. HTML versus XHTML HyperText Markup Language HTML is SMGL ( Much more complicated than XML) –capitalization does not matter –tags may be unbalanced XHTML is XML http://en.wikipedia.org/wiki/Xhtml

26. For Google Earth Focus on what would be in the body of XHTML

27. XHTML Text Module http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_textmodule

28. Paragraphs Each paragraph of text is wrapped in a tag HTML ignores new lines. Blank lines do not give you a new paragraph.

29. Headers … provide headers that are progressively smaller

30. and Marking sections of text

31. Links Text or Image

32. Images

33. Image with a link

34. Tables The most complicated XHTML that you will do in this class

35. A table

36. Table Tags - defines a table - table header - contains one row - one table cell within a row

37. Table Attributes border=“1” - gives the lines bgcolor=“orange”

38. HTML Special Character Codes There are numeric and text codes for characters Allows for characters not on the keyboard or things that interfere with HTML or XML. e.g. “>” can be written “>” or “>” http://www.ascii.cl/htmlcodes.htm

39. Character codes http://www.ascii.cl/htmlcodes.htm

40. This leaves out many HTML features! CSS - Cascading Style Sheets Javascript/DHTML Embedded objects (movies and others) AJAX All kinds of server side fun –Servlets –Mod-python/mod-perl –And many, many more

41. Walk through basic KML tags

42. What is the entry for Document?

43. Placemark

44. Point

45. coordinates

46. CDATA to wrap HTML Does this look like fun?

47. Passing HTML straight through to Google Earth causes trouble!

48. With CDATA, HTML can stay HTML

49. Making a table in HTML

50. Putting that table into KML

51. Color/Style

52. Color

53. View Tag

54. Using a web browser to display XML/KML

55. Lines

56. Another Demo (if time permits) http://www.barnabu.co.uk/ferris-wheel-animation-in-google-earth

57. Additional Notes on Grading of Assignment #01 HTML content must be valid XML –If the text is wrapped in your text, then it passes xmllint –Do not worry about the KML formatting this time. It is okay to use the Google Earth dialog to create your placemarks. –Your KMZ must work on any computer without internet. Double check that your images are in the kmz

58. Next Class Review Color and Style. More details Photo overlays Polygons