• Save
Webpages And Dynamic Content
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Webpages And Dynamic Content

on

  • 1,405 views

 

Statistics

Views

Total Views
1,405
Views on SlideShare
1,405
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Webpages And Dynamic Content Presentation Transcript

  • 1. May 18th, 2007 Eduardo Gonzalez WEB PAGES & DYNAMIC CONTENT
  • 2. CONTENT
    • Fast HTML (XHTML) review
    • Light presentation of style sheets (css)
    • Adding dynamic content
      • Flash presentations ( SlideShare )
      • Video ( youtube )
      • Maps (google maps)
  • 3. Short introduction
    • Webpages basically consist of:
      • Content
      • Presentation
    • For the sake of simplicity and functionality these two things can be separated:
      • Content is included in a HTML file
      • The presentation in a Cascading Style Sheet (css) file which is linked to the HTML file
  • 4. CONTENT
    • Fast HTML (XHTML) review
    • Light presentation of style sheets (css)
    • Adding dynamic content
      • Flash presentations ( SlideShare )
      • Video ( youtube )
      • Maps ( google maps )
  • 5. HTML (XHTML) review
    • Internet tutorials and references
    • www.htmldog.com
    • HTML = Hyper Text Markup Language
    • XHTML =eXtended HTML
  • 6. HTML
    • Simple coding language
    • You can write webpages using for example windows notepad
    • Based on “tags”
    • The content is inside the “tags”
  • 7. A webpage code
    • <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;>
    • <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xml:lang=&quot;en&quot; lang=&quot;en&quot;>
      • <head>
      • <title>This is a webpage</title>
      • </head>
      • <body>
      • <h1>This is a header</h1>
      • <p>Here you can write your contents</p>
      • </body>
    • </html>
  • 8. Tags
    • <!DOCTYPE >
    • <html> </html>
    • <head> </head>
    • <title> </title>
    • <body> </body>
    • <h1></h1>
    • <p></p>
  • 9. Other tags
    • <em></em> - for emphasis (italics)
    • <strong></strong> - for bold text
    • <br /> - for a line-break
    • Lists can be created using
      • <ul> </ul> - for an unordered list
      • <ol> </ol> - for an ordered list
        • <li> </li> - for every element inside the list
  • 10. Link and image tags
    • Links require a <a> </a> tag as in:
      • <a href=&quot;http://www.htmldog.com&quot;>HTML Dog</a>
    • Images are added withing the <img> </img> tags
      • <img src=&quot;http://www.htmldog.com/images/logo.gif&quot; width=&quot;157&quot; height=&quot;70&quot; alt=&quot;HTML Dog logo&quot; />
  • 11. Tables in HTML
    • Creating tables help you organize your page structure
    • It is not an easy task for complex tables
    • The table tags are:
      • <table> - opens a table
      • <tr> - opens a row
      • <td> Cell content</td> - gives content to a cell
      • </tr>
      • </table>
  • 12. The “div” tag
    • Groups a piece of HTML
    • Used together with Cascading Style Sheets (css) to give style to your pages
    • HTML and css are linked via tag attributes (e.g. “class” and “id” attributes)
  • 13. CONTENT
    • Fast HTML (XHTML) review
    • Light presentation of style sheets (css)
    • Adding dynamic content
      • Flash presentations ( SlideShare )
      • Video ( youtube )
      • Maps ( google maps )
  • 14. Style sheets
    • Add styles to your webpage
      • Colors, fonts, margins…
    • Allows you to reuse your styles
      • Keep the same style for all your pages
    • Easy and fast to change your pages look
      • Change the size of all the titles at once
    • Easy to add and manage your styles
      • Add new styles at any time
    • www.htmldog.com
  • 15. Adding style
    • In-line:
        • straight in you HTML code
          • <p style=&quot;color: red&quot;>text</p>
    • Internal:
        • using a <style></style> tag inside the “head” tag in your HTML code
    • External:
        • using a external file, i.e. a css file, and linking to it from the HTML file, for example:
          • <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;web.css&quot; />
  • 16. CSS code
    • In HTML “tags” – In css “selectors”
    • The “selector” names are the same as the HTML “tag’s” name
    • Inside the “selectors” you find “properties” within curly brackets
      • To give a style to e.g. the <body> tag:
          • body {
          • font-size: 0.8em;
          • color: navy;
          • }
  • 17. Advanced selectors
    • Besides HTML selectors you can use the “class” or “id” selectors:
      • You can define different styles for example for different <p> tags based on their “attributes”
        • “class”
        • “id”
  • 18. Example css
    • Very useful properties:
      • Margins
      • Positions
        • #navigation { position: absolute; top: 0; left: 0; width: 10em; }
    • You can use css to create your page layout instead of tables
    • http://www.htmldog.com/guides/cssadvanced/layout/
  • 19. CONTENT
    • Fast HTML (XHTML) review
    • Light presentation of style sheets (css)
    • Adding dynamic content
      • Blackboard WebDAV
      • Flash presentations ( SlideShare )
      • Video ( youtube )
      • Maps ( google maps )
  • 20. CONTENT
    • Fast HTML (XHTML) review
    • Light presentation of style sheets (css)
    • Adding dynamic content
      • Blackboard WebDAV
      • Flash presentations ( SlideShare )
      • Video ( youtube )
      • Maps ( google maps )
  • 21. Blackboard WebDAV
    • Webdav in wikipedia
    • Use webdav to add networking functionality
  • 22. Create a network drive
    • Click on “add a network place”
    • Click “Next” two times
    • Copy the webdav addres from Blackboard
    • And fill in the user and password as they are requested
    Now you can use your Blackboard network drive to manage your files
  • 23. CONTENT
    • Fast HTML (XHTML) review
    • Light presentation of style sheets (css)
    • Adding dynamic content
      • Blackboard WebDAV
      • Flash presentations ( SlideShare )
      • Video ( youtube )
      • Maps ( google maps )
  • 24. Slideshare code samples
    • Popular gis
      • <object type=&quot;application/x-shockwave-flash&quot; data=&quot;https://s3.amazonaws.com:443/slideshare/ssplayer.swf?id=35302&doc=popular-gis-1853&quot; width=&quot;425&quot; height=&quot;348&quot;><param name=&quot;movie&quot; value=&quot;https://s3.amazonaws.com:443/slideshare/ssplayer.swf?id=35302&doc=popular-gis-1853&quot; /></object>
    • Create Your KML File by KML Editor
      • <object type=&quot;application/x-shockwave-flash&quot; data=&quot;https://s3.amazonaws.com:443/slideshare/ssplayer.swf?id=37265&doc=create-your-kml-file-by-kml-editor-18517&quot; width=&quot;425&quot; height=&quot;348&quot;><param name=&quot;movie&quot; value=&quot;https://s3.amazonaws.com:443/slideshare/ssplayer.swf?id=37265&doc=create-your-kml-file-by-kml-editor-18517&quot; /></object>
  • 25. CONTENT
    • Fast HTML (XHTML) review
    • Light presentation of style sheets (css)
    • Adding dynamic content
      • Blackboard WebDAV
      • Flash presentations ( SlideShare )
      • Video ( youtube )
      • Maps ( google maps )
  • 26. Youtube and biofuel code samples
      • Finnish video (swedish)
        • <object width=&quot;425&quot; height=&quot;350&quot;><param name=&quot;movie&quot; value=&quot;http://www.youtube.com/v/9_sOtLSrZXI&quot;></param><param name=&quot;wmode&quot; value=&quot;transparent&quot;></param><embed src=&quot;http://www.youtube.com/v/9_sOtLSrZXI&quot; type=&quot;application/x-shockwave-flash&quot; wmode=&quot;transparent&quot; width=&quot;425&quot; height=&quot;350&quot;></embed></object>
      • American video (english)
        • <object width=&quot;425&quot; height=&quot;350&quot;><param name=&quot;movie&quot; value=&quot;http://www.youtube.com/v/FdymZ__oQ_s&quot;></param><param name=&quot;wmode&quot; value=&quot;transparent&quot;></param><embed src=&quot;http://www.youtube.com/v/FdymZ__oQ_s&quot; type=&quot;application/x-shockwave-flash&quot; wmode=&quot;transparent&quot; width=&quot;425&quot; height=&quot;350&quot;></embed></object>
      • The Future of Global Biofuels, Biodiesel and Ethanol (english)
        • <object width=&quot;425&quot; height=&quot;350&quot;><param name=&quot;movie&quot; value=&quot;http://www.youtube.com/v/VML-DqpueHE&quot;></param><param name=&quot;wmode&quot; value=&quot;transparent&quot;></param><embed src=&quot;http://www.youtube.com/v/VML-DqpueHE&quot; type=&quot;application/x-shockwave-flash&quot; wmode=&quot;transparent&quot; width=&quot;425&quot; height=&quot;350&quot;></embed></object>
      • Short new from Argentina (spanish)
        • <object width=&quot;425&quot; height=&quot;350&quot;><param name=&quot;movie&quot; value=&quot;http://www.youtube.com/v/4iIUvAwLZNY&quot;></param><param name=&quot;wmode&quot; value=&quot;transparent&quot;></param><embed src=&quot;http://www.youtube.com/v/4iIUvAwLZNY&quot; type=&quot;application/x-shockwave-flash&quot; wmode=&quot;transparent&quot; width=&quot;425&quot; height=&quot;350&quot;></embed></object>
      • Fungi for Biofuel (english)
        • <object width=&quot;425&quot; height=&quot;350&quot;><param name=&quot;movie&quot; value=&quot;http://www.youtube.com/v/OCR485SXet0&quot;></param><param name=&quot;wmode&quot; value=&quot;transparent&quot;></param><embed src=&quot;http://www.youtube.com/v/OCR485SXet0&quot; type=&quot;application/x-shockwave-flash&quot; wmode=&quot;transparent&quot; width=&quot;425&quot; height=&quot;350&quot;></embed></object>
      • Broad Based Wealth Using Mozmabique Bio Fuel In (english)
        • <object width=&quot;425&quot; height=&quot;350&quot;><param name=&quot;movie&quot; value=&quot;http://www.youtube.com/v/36fj8o-zmi8&quot;></param><param name=&quot;wmode&quot; value=&quot;transparent&quot;></param><embed src=&quot;http://www.youtube.com/v/36fj8o-zmi8&quot; type=&quot;application/x-shockwave-flash&quot; wmode=&quot;transparent&quot; width=&quot;425&quot; height=&quot;350&quot;></embed></object>
  • 27. CONTENT
    • Fast HTML (XHTML) review
    • Light presentation of style sheets (css)
    • Adding dynamic content
      • Blackboard WebDAV
      • Flash presentations ( SlideShare )
      • Video ( youtube )
      • Maps ( google maps )
  • 28. Google Maps
    • You can use google maps as part of your course content:
      • Linking to a google maps page:
          • http://maps.google.com/maps?f=q&hl=en&q=http://maycourse.kwikphp.com/stp.kml
      • Or by embedding a small google maps window into your own webpage:
          • http:// www.google.com/apis/maps/signup.html
  • 29. Basic google map script
    • Example using the address: http://maycourse.kwikphp.com
    • User: maycourse; password: check out in the Blackboard course area
      • Key:
        • ABQIAAAA8aYR3W7Ieu1ZmvGUitQz1xQaptPhWtDKrHju4WjhqD_bfDRX1RTXhoxdvXejYuYT6CjJpyPVRGRVZw
      • HTML basic example:
        • <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;> <head> <meta http-equiv=&quot;content-type&quot; content=&quot;text/html; charset=utf-8&quot;/> <title>Google Maps JavaScript API Example</title> <script src=&quot;http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA8aYR3W7Ieu1ZmvGUitQz1xQaptPhWtDKrHju4WjhqD_bfDRX1RTXhoxdvXejYuYT6CjJpyPVRGRVZw&quot; type=&quot;text/javascript&quot;></script> <script type=&quot;text/javascript&quot;> //<![CDATA[ function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById(&quot;map&quot;)); map.setCenter(new GLatLng(37.4419, -122.1419), 13); } } //]]> </script> </head> <body onload=&quot;load()&quot; onunload=&quot;GUnload()&quot;> <div id=&quot;map&quot; style=&quot;width: 500px; height: 300px&quot;></div> </body> </html>
  • 30. Adding controls
    • Visit the google maps documentation
        • You need to add this two lines to the basic script:
          • map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl());
  • 31. Adding a kml file
    • Visit the google maps documentation
        • You need to add this few more lines to the basic script:
        • var geoXml = new GGeoXml(&quot;http://maycourse.kwikphp.com/stp.kml&quot;);
  • 32. Adding extra control
    • Visit the google maps documentation
    • Turning on/of the kml file
    • You need now a bit more complex editing:
      • Script modifications
        • var toggleState = 1;
        • function toggleMyKml() {
          • if (toggleState == 1)
          • { map.removeOverlay(geoXml);
          • toggleState = 0; }
          • else {
          • map.addOverlay(geoXml); toggleState = 1; }
          • }
      • HTML addition
        • <input type=&quot;button&quot; value=&quot;Toggle Markers&quot; onClick=&quot;toggleMyKml();&quot;/>