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

Webpages And Dynamic Content

on

  • 1,319 views

 

Statistics

Views

Total Views
1,319
Views on SlideShare
1,319
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 Webpages And Dynamic Content Presentation Transcript

    • May 18th, 2007 Eduardo Gonzalez WEB PAGES & DYNAMIC CONTENT
    • CONTENT
      • Fast HTML (XHTML) review
      • Light presentation of style sheets (css)
      • Adding dynamic content
        • Flash presentations ( SlideShare )
        • Video ( youtube )
        • Maps (google maps)
    • 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
    • CONTENT
      • Fast HTML (XHTML) review
      • Light presentation of style sheets (css)
      • Adding dynamic content
        • Flash presentations ( SlideShare )
        • Video ( youtube )
        • Maps ( google maps )
    • HTML (XHTML) review
      • Internet tutorials and references
      • www.htmldog.com
      • HTML = Hyper Text Markup Language
      • XHTML =eXtended HTML
    • HTML
      • Simple coding language
      • You can write webpages using for example windows notepad
      • Based on “tags”
      • The content is inside the “tags”
    • 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>
    • Tags
      • <!DOCTYPE >
      • <html> </html>
      • <head> </head>
      • <title> </title>
      • <body> </body>
      • <h1></h1>
      • <p></p>
    • 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
    • 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; />
    • 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>
    • 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)
    • CONTENT
      • Fast HTML (XHTML) review
      • Light presentation of style sheets (css)
      • Adding dynamic content
        • Flash presentations ( SlideShare )
        • Video ( youtube )
        • Maps ( google maps )
    • 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
    • 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; />
    • 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;
            • }
    • 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”
    • 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/
    • CONTENT
      • Fast HTML (XHTML) review
      • Light presentation of style sheets (css)
      • Adding dynamic content
        • Blackboard WebDAV
        • Flash presentations ( SlideShare )
        • Video ( youtube )
        • Maps ( google maps )
    • CONTENT
      • Fast HTML (XHTML) review
      • Light presentation of style sheets (css)
      • Adding dynamic content
        • Blackboard WebDAV
        • Flash presentations ( SlideShare )
        • Video ( youtube )
        • Maps ( google maps )
    • Blackboard WebDAV
      • Webdav in wikipedia
      • Use webdav to add networking functionality
    • 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
    • CONTENT
      • Fast HTML (XHTML) review
      • Light presentation of style sheets (css)
      • Adding dynamic content
        • Blackboard WebDAV
        • Flash presentations ( SlideShare )
        • Video ( youtube )
        • Maps ( google maps )
    • 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>
    • CONTENT
      • Fast HTML (XHTML) review
      • Light presentation of style sheets (css)
      • Adding dynamic content
        • Blackboard WebDAV
        • Flash presentations ( SlideShare )
        • Video ( youtube )
        • Maps ( google maps )
    • 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>
    • CONTENT
      • Fast HTML (XHTML) review
      • Light presentation of style sheets (css)
      • Adding dynamic content
        • Blackboard WebDAV
        • Flash presentations ( SlideShare )
        • Video ( youtube )
        • Maps ( google maps )
    • 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
    • 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>
    • 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());
    • 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;);
    • 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;/>