SlideShare a Scribd company logo

Pimp My Web Page

Download as ODP, PDF
Gage Choat, profile picture
Gage Choat

This document provides a comprehensive guide on how to use various APIs including Twitter and YouTube with JavaScript to display content such as tweets and video thumbnails on a webpage. It includes sample code snippets for fetching data from these APIs and dynamically inserting the results into HTML elements. Additionally, it discusses the necessary settings and options for customizing the displayed content.

Self ImprovementTechnology
1 of 63
Downloaded 30 times
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
 
To understand this presentation (X)HTML CSS Javascript PHP AJAX Java .NET huh? expert I can do that
Topics Twitter tweets YouTube thumbnails Flickr thumbnails Yahoo! music player Google Maps Google Calendar Google Analytics Wordpress blog
Topics Twitter tweets YouTube thumbnails Flickr thumbnails Yahoo! music player Google Maps Google Calendar Google Analytics Wordpress blog
Notes Apps used in presentation: NeoOffice presentation slides Firefox browse pages Textwrangler edit pages Cyberduck SFTP Firebug (FF ext) inspect HTML and JS Code tested in: Firefox 3 (mac/pc) Safari 4 public beta (mac) Internet Explorer 6, 7 (pc)
Start and End Start: http://pimpstart.harmonicnw.com Finish: http://pimpend.harmonicnw.com Finish + blog: http://pimpedblog.harmonicnw.com
Accessing Twitter API using JavaScript (simple public API method) <script src=&quot;http://twitter.com/... [parameters] ...></script>
Accessing Twitter API using JavaScript (simple public API method) JSON object status text, status date, status link, user info, etc.
Accessing Twitter API using JavaScript (simple public API method) parse JSON object with JavaScript function
Accessing Twitter API using JavaScript (simple public API method) add new content with JavaScript function
Add Twitter Tweets Insert just above </body>: <script type=&quot;text/javascript&quot;> function showTweets(data) { ... } </script> <script type=&quot;text/javascript&quot; src=&quot;http://twitter.com/statuses/user_timeline/THE_REAL_SHAQ.json? callback=showTweets&amp;count=3&quot;></script> Insert in <body>: <div id=&quot;tweets&quot;></div>
Add Twitter Tweets Insert just above </body>: <script type=&quot;text/javascript&quot;> function showTweets(data) { ... } </script> <script type=&quot;text/javascript&quot; src=&quot;http://twitter.com/statuses/user_timeline/THE_REAL_SHAQ.json? callback=showTweets&amp;count=3&quot;></script> Insert in <body>: <div id=&quot;tweets&quot;></div> A whole bunch of JavaScript code
<script type=&quot;text/javascript&quot;> // <![CDATA[ function showTweets(data) { /** USER SETTINGS ***********/ var targetId=&quot;tweets&quot;; // Id of element where twitters will be inserted var showUsername = false; // Set to true to show username var showTime = true; // Set to true to show time var showFollowMe = true; // Set to true to show &quot;follow me on Twitter&quot; link /*****************************/ var tweets = data; var targetObj = document.getElementById(targetId); var newUl = document.createElement('ul'); newUl.className = &quot;tweetList&quot;; for (var i=0; i<tweets.length; i++) { var username = tweets[i]['user']['screen_name']; var text = tweets[i]['text']; var tweetId = tweets[i]['id']; var userUrl = &quot;http://www.twitter.com/&quot; + username + &quot;/&quot;; var tweetUrl = &quot;http://www.twitter.com/&quot; + username + &quot;/status/&quot; + tweetId; var time = &quot;&quot;; var createdAt = tweets[i]['created_at']; var B=createdAt.split(&quot; &quot;); var C=B[1]+&quot; &quot;+B[2]+&quot;, &quot;+B[5]+&quot; &quot;+B[3]; var A=Date.parse(C); var D=(arguments.length>1)?arguments[1]:new Date(); var E=parseInt((D.getTime()-A)/1000); E=E+(D.getTimezoneOffset()*60); if (E<60) {time = &quot;less than a minute ago&quot;;} else if (E<120) {time = &quot;about a minute ago&quot;;} else if (E<(60*60)) {time = (parseInt(E/60)).toString() + &quot; minutes ago&quot;;} else if (E<(120*60)) {time = &quot;about an hour ago&quot;;} else if (E<(24*60*60)) {time = &quot;about &quot; + (parseInt(E/3600)).toString() + &quot; hours ago&quot;;} else if (E<(48*60*60)) {time = &quot;1 day ago&quot;;} else {time = (parseInt(E/86400)).toString() +&quot; days ago&quot;;} var newLi = document.createElement('li'); if (showUsername) { var newStrong = document.createElement('strong'); var newTxtNd = document.createTextNode(username + &quot; &quot;); newStrong.appendChild(newTxtNd); newLi.appendChild(newStrong); } var newSpan = document.createElement('span'); var newTxtNd2 = document.createTextNode(text + &quot; &quot;); newSpan.appendChild(newTxtNd2); newLi.appendChild(newSpan); if (showTime) { var newSmall = document.createElement('small'); var newA = document.createElement('a'); newA.href = tweetUrl; newA.title = username + &quot; Twitter status &quot; + tweetId; var newTxtNd3 = document.createTextNode(time); newA.appendChild(newTxtNd3); newSmall.appendChild(newA); newLi.appendChild(newSmall); } newUl.appendChild(newLi); } targetObj.appendChild(newUl); if (showFollowMe) { var newA2 = document.createElement('a'); newA2.className = &quot;twitterLink&quot;; newA2.title = &quot;follow &quot; + username + &quot; on Twitter&quot;; newA2.href = userUrl; var newTxtNd4 = document.createTextNode(&quot;follow me on Twitter&quot;); newA2.appendChild(newTxtNd4); targetObj.appendChild(newA2); } } // ]]> </script> <script type=&quot;text/javascript&quot; src=&quot;http://twitter.com/statuses/user_timeline/THE_REAL_SHAQ.json?callback=showTweets&amp;count=3&quot;></script>
Add Twitter Tweets Insert just above </body>: <script type=&quot;text/javascript&quot;> function showTweets(data) { ... } </script> <script type=&quot;text/javascript&quot; src=&quot;http://twitter.com/statuses/user_timeline/ THE_REAL_SHAQ .json? callback= showTweets &amp;count= 3 &quot;></script> Function used to parse Twitter's API response (declared above) Parses Twitter API response and inserts Tweets into page (see next slide) Twitter user ID Number of tweets to show
Add Twitter Tweets New content inserted by showTweets() : <div id=&quot;tweets&quot;> <ul class=&quot;tweetList&quot;> <li> <strong>THE_REAL_SHAQ</strong> <span>Hey brett favre, dnt retire bro, retire when I retire in 4 yrs, and o yea I will sack u , keep playin You are legend</span> <small><a href=&quot;http://twitter.com/THE_REAL_SHAQ/status/1727888345&quot;>8:16 AM May 7th</a></small> </li> </ul> <a class=&quot;twitterLink&quot; title=&quot;follow THE_REAL_SHAQ on Twitter&quot; href=&quot;http://www.twitter.com/THE_REAL_SHAQ/&quot;>follow me on Twitter</a> </div>
Add Twitter Tweets <div id=&quot;tweets&quot;> <ul class=&quot;tweetList&quot;> <li> <strong> THE_REAL_SHAQ </strong> <span> Hey brett favre, dnt retire bro, retire when I retire in 4 yrs, and o yea I will sack u , keep playin You are legend </span> <small><a href=&quot;http://twitter.com/THE_REAL_SHAQ/status/1727888345&quot;> 8:16 AM May 7th </a></small> </li> </ul> <a class=&quot;twitterLink&quot; title=&quot;follow THE_REAL_SHAQ on Twitter&quot; href=&quot;http://www.twitter.com/THE_REAL_SHAQ/&quot;> follow me on Twitter </a> </div> User ID Status User ID Date (links to post)
Accessing YouTube API using JavaScript (simple public API method) <script src=&quot;http://gdata.youtube.com/... [parameters] ...></script>
Accessing YouTube API using JavaScript (simple public API method) JSON object video thumbnails, video urls, user info, etc.
Accessing YouTube API using JavaScript (simple public API method) parse JSON object with JavaScript function
Accessing YouTube API using JavaScript (simple public API method) add new content with JavaScript function
Add YouTube Thumbnails Insert just above </body>: Insert in <body>: <div id=&quot;videos&quot;></div> <script type=&quot;text/javascript&quot;> function showYouTubeThumbnails(data) { ... } </script> <script type=&quot;text/javascript&quot; src=&quot;http://gdata.youtube.com/feeds/users/TheFreeBoxShow/uploads?alt=json-in-script&amp;format=5&amp;callback=showYouTubeThumbnails&amp;max-results=5&quot;></script>
Add YouTube Thumbnails Insert just above </body>: <script type=&quot;text/javascript&quot;> function showYouTubeThumbnails(data) { ... } </script> <script type=&quot;text/javascript&quot; src=&quot;http://gdata.youtube.com/feeds/users/TheFreeBoxShow/uploads?alt=json-in-script&amp;format=5&amp;callback=showYouTubeThumbnails&amp;max-results=5&quot;></script> Insert in <body>: <div id=&quot;videos&quot;></div> A whole bunch of JavaScript code
<script type=&quot;text/javascript&quot;> // <![CDATA[ function showYouTubeThumbnails(data) { /** USER SETTINGS ***********/ var highResThumbnails = false; // set to false for normal (120px x 90px), set to true for high-resolution (320px x 240px) var targetId = &quot;videos&quot;; // Id of element where the thumbnails will be inserted /******************************/ var feed = data.feed; var entries = feed.entry || []; var targetObj = document.getElementById(targetId); for (var i = 0; i < entries.length; i++) { var entry = entries[i]; var link = entry['link'][0]['href']; var thumbnailUrl; var thumbnailWidth; var thumbnailHeight; var minimumHighResWidth = 320; // minimum width for a high-resolution thumbnail var thumbnailsObj = entry['media$group']['media$thumbnail']; for (var j = 0; j < thumbnailsObj.length; j++) { thumbnailUrl = thumbnailsObj[j]['url']; thumbnailWidth = thumbnailsObj[j]['width']; thumbnailHeight = thumbnailsObj[j]['height']; if (thumbnailsObj[j]['width'] >= minimumHighResWidth && highResThumbnails || thumbnailsObj[j]['width'] < minimumHighResWidth && !highResThumbnails) { break; } } var newA = document.createElement('a'); newA.href = link; newA.title = &quot;YouTube video&quot;; var newImg = document.createElement('img'); newImg.src = thumbnailUrl; newImg.width = thumbnailWidth; newImg.height = thumbnailHeight; newImg.alt = &quot;YouTube video thumbnail&quot;; newA.appendChild(newImg); targetObj.appendChild(newA); } } // ]]> </script> <script type=&quot;text/javascript&quot; src=&quot;http://gdata.youtube.com/feeds/users/TheFreeBoxShow/uploads?alt=json-in-script&amp;format=5&amp;callback=showYouTubeThumbnails&amp;max-results=5&quot;></script>
Add YouTube Thumbnails Insert just above </body>: <script type=&quot;text/javascript&quot;> function showYouTubeThumbnails(data) { ... } </script> <script type=&quot;text/javascript&quot; src=&quot;http://gdata.youtube.com/feeds/users/ TheFreeBoxShow /uploads?alt=json-in-script&amp;format=5&amp;callback= showYouTubeThumbnails &amp;max-results= 5 &quot;></script> Function used to parse YouTube's API response (declared above) Parses YouTube API response and inserts thumbnails into page (see next slide) YouTube username Number of thumbnails to show Other useful parameters: time : today , this_week , this_month , all_time orderby : relevance , published , viewCount , rating Example: ...&amp;time=this_month&amp;orderby=rating...
Add YouTube Thumbnails YouTube API returns 2 sizes of thumbnails: 120px by 90px - default 320px by 240px - high-resolution Determine which you want to use in callback function
Add YouTube Thumbnails Insert just above </body>: <div id=&quot;videos&quot;> <a href=&quot;http://www.youtube.com/watch?v=yTdW6g02Ar8&quot; title=&quot;YouTube video&quot;> <img width=&quot;120&quot; height=&quot;90&quot; src=&quot;http://i.ytimg.com/vi/yTdW6g02Ar8/2.jpg&quot; alt=&quot;YouTube video thumbnail&quot;/> </a> <a href=&quot;...&quot; title=&quot;YouTube video&quot;><img ... /></a> <a href=&quot;...&quot; title=&quot;YouTube video&quot;><img ... /></a> <!-- etc... --> </div>
Accessing Flickr API using JavaScript (simple badge API method) <script src=&quot;http://flickr.com/... [parameters] ...></script>
Accessing Flickr API using JavaScript (simple badge API method) write HTML
Add Flickr Thumbnails Insert in empty <div>: <script type=&quot;text/javascript&quot; src=&quot;http://www.flickr.com/badge_code_v2.gne?count=8&amp;display=random&amp;size=s&amp;source=user_set&amp;set=72157606336502682&quot;></script>
Add Flickr Thumbnails Insert in empty <div>: Number of thumbnails <script type=&quot;text/javascript&quot; src=&quot;http://www.flickr.com/badge_code_v2.gne?count= 8 &amp;display= random &amp;size= s &amp;source= user_set&amp;set=72157606336502682 &quot;></script> Order (random or latest) Size t longest side 100px s 75px x 75px m longest side 240 px Source, Source ID source can be: user, group, user_set source ID: user=... or group=... or set=... Examples: ...source=user&amp;user=24491718@N03... ...source=group&amp;group=79221983@N00... ...source=user_set&amp;set=72157606336502682...
Add Flickr Thumbnails Find source IDs User ID from URL: http://www.flickr.com/photos/ [email_address] / or submit photostream URL at idgettr.com Group ID submit group pool URL at idgettr.com Photo Set from URL: http://www.flickr.com/photos/80651083@N00/sets/ 72157606336502682 /
Add Flickr Thumbnails New content inserted below </script>: <script type=&quot;text/javascript&quot; src=&quot;http://www.flickr.com/badge_code_v2.gne?count=8&amp;display=random&amp;size=s&amp;source=user_set&amp;set=72157606336502682&quot;></script> <a href=&quot;http://www.flickr.com/photos/80651083@N00/2740661357/&quot;> <img width=&quot;75&quot; height=&quot;75&quot; title=&quot;Steel Bridge, Portland, Oregon&quot; alt=&quot;A photo on Flickr&quot; src=&quot;http://farm4.static.flickr.com/3248/2740661357_08c3a04671_s.jpg&quot;/> </a> <a ...><img ... /></a> <a ...><img ... /></a> <!-- etc... --> <span class=&quot;flickr_badge_beacon&quot; style=&quot;position: absolute; left: -999em; top: -999em; visibility: hidden;&quot;>
Add Yahoo! Music Player Insert in <head>: <script type=&quot;text/javascript&quot; src=&quot;http://mediaplayer.yahoo.com/js&quot;></script> Insert in <body>: <a title=&quot;Nearly&quot; href=&quot;media/nearly.mp3&quot;><img style=&quot;display:none&quot; src=&quot;images/myv1.jpg&quot; width=&quot;46&quot; height=&quot;46&quot; alt=&quot;Metaphorically Yours [vol 1] album cover&quot; />Play 'Nearly'</a>
Add Yahoo! Music Player Insert in <head>: <script type=&quot;text/javascript&quot; src=&quot;http://mediaplayer.yahoo.com/js&quot;></script> Insert in <body>: <a title=&quot; Nearly &quot; href=&quot; media/nearly.mp3 &quot;><img style=&quot;display:none&quot; src=&quot; images/myv1cover_46x46.jpg &quot; width=&quot;46&quot; height=&quot;46&quot; alt=&quot;Metaphorically Yours [vol 1] album cover&quot; /> Play 'Nearly' </a> Title displayed in player (optional) Url of mp3 Url of album art (46px by 46px in current version of player) Link text
Add a Google Map Find map a t maps.google.com Click Link (upper right) Click Customize and preview embedded map Customize and preview Copy code Paste into empty <div> Tip: enter exact address to remove pinpoints See Appendix A for details
Google Map Code <div> <iframe width=&quot;425&quot; height=&quot;350&quot; frameborder=&quot;0&quot; scrolling=&quot;no&quot; marginheight=&quot;0&quot; marginwidth=&quot;0&quot; src=&quot;http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=777+NE+ML+King+Blvd.,+Portland,+OR&amp;sll=45.528907,-122.661994&amp;sspn=0.00914,0.019526&amp;ie=UTF8&amp;ll=45.535994,-122.658491&amp;spn=0.021042,0.036478&amp;z=14&amp;output=embed&quot;></iframe><br /><small><a href=&quot;http://maps.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=777+NE+ML+King+Blvd.,+Portland,+OR&amp;sll=45.528907,-122.661994&amp;sspn=0.00914,0.019526&amp;ie=UTF8&amp;ll=45.535994,-122.658491&amp;spn=0.021042,0.036478&amp;z=14&quot; style=&quot;color:#0000FF;text-align:left&quot;>View Larger Map</a></small> </div>
Add a Google Calendar Sign in and find a calendar you want to add Click “ Calendar settings ” from calendar dropdown menu Click “ Customize the color, size, and other options ” Customize and preview Copy code Paste into empty <div> See Appendix B for details
Google Calendar Code <div> <iframe src=&quot;http://www.google.com/calendar/embed?showTitle=0&amp;showNav=0&amp;showPrint=0&amp;showTabs=0&amp;showCalendars=0&amp;showTz=0&amp;mode=AGENDA&amp;height=300&amp;wkst=1&amp;bgcolor=%23FFFFFF&amp;src=powellsbooks%40gmail.com&amp;color=%23AB8B00&amp;ctz=America%2FLos_Angeles&quot; style=&quot; border-width:0 &quot; width=&quot;185&quot; height=&quot;300&quot; frameborder=&quot;0&quot; scrolling=&quot;no&quot;></iframe> </div>
The Google Calendar Code <div> <iframe src=&quot;http://www.google.com/calendar/embed?showTitle=0&amp;showNav=0&amp;showPrint=0&amp;showTabs=0&amp;showCalendars=0&amp;showTz=0&amp;mode=AGENDA&amp;height= 300 &amp;wkst=1&amp;bgcolor=%23 FFFFFF &amp;src=powellsbooks%40gmail.com&amp;color=%23 AB8B00 &amp;ctz=America%2FLos_Angeles&quot; style=&quot; border-width:0 &quot; width=&quot; 185 &quot; height=&quot; 300 &quot; frameborder=&quot;0&quot; scrolling=&quot;no&quot;></iframe> </div> Height Text color (limited choices) Width Background color
Track Statistics with Google Analytics Create Google Analytics account (www.google.com/analytics) Complete signup process, copy the tracking code Paste code just above </body> Note: does not necessarily update data quickly See Appendix C for details
Track Statistics with Google Analytics Paste code just above </body>: <script type=&quot;text/javascript&quot;> var gaJsHost = ((&quot;https:&quot; == document.location.protocol) ? &quot;https://ssl.&quot; : &quot;http://www.&quot;); document.write(unescape(&quot;%3Cscript src='&quot; + gaJsHost + &quot;google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E&quot;)); </script> <script type=&quot;text/javascript&quot;> try { var pageTracker = _gat._getTracker(&quot; UA-8759933-1 &quot;); pageTracker._trackPageview(); } catch(err) {} </script> Account ID
Tips for W3C Compliance (XHTML 1.0 Strict) Surround JavaScripts with CDATA block In your URLs, make sure ampersands are encoded &amp; (not & ) <script> // <![CDATA[ ... // ]]> </script>
About JavaScript Placement Place scripts in order you want them to load and run. An unresponsive script can halt the loading of the rest of the scripts on the page.
WordPress Basics Free, flexible blogging framework Content stored in MySQL database Layout in PHP/HTML files Friendly browser-based user interface to edit content Change layout without affecting content using “themes”
WordPress Basics Some hosting companies that auto-install WordPress: Dreamhost Blue Host MediaTemple GoDaddy.com JustHost
link to slides at www.webvisionsevent.com more info on pimping your web page at www.harmonicnw.com [email_address]
Further Reading Twitter: http://apiwiki.twitter.com/Twitter-API-Documentation http://twitter.com/widgets/html_widget http://net.tutsplus.com/articles/10-awesome-ways-to-integrate-twitter-with-your-website/ http://meiert.com/en/blog/20071011/twittering/ YouTube: http://code.google.com/apis/youtube/2.0/developers_guide_protocol.html http://code.google.com/apis/youtube/2.0/reference.html http://code.google.com/apis/youtube/2.0/reference.html#Query_parameter_definitions http://gdata.ops.demo.googlepages.com/yt_json_codelab.html http://www.google.com/uds/solutions/wizards/videobar.html http://www.bernzilla.com/item.php?id=848 Flickr: http://www.flickr.com/services/api/ http://idgettr.com/ http://www.elliotswan.com/2006/08/06/custom-flickr-badge-api-documentation/ http://www.viget.com/inspire/using-the-flickr-api/ http://www.shapeshift.net/2008/05/flickr-thumbs/ http://veerle.duoh.com/blog/comments/fickr_badge_w3c_valid/ http://www.flickr.com/services/api/misc.urls.html http://www.flickr.com/badge.gne Yahoo! Media Player http://mediaplayer.yahoo.com/ http://yahoomediaplayer.wikia.com/wiki/How_to_link Google Maps http://code.google.com/apis/maps/ Google Calendar http://google.about.com/od/toolsfortheoffice/ss/embedCalendar.htm http://code.google.com/apis/calendar/docs/2.0/reference.html http://www.google.com/googlecalendar/event_publisher_guide.html http://code.google.com/apis/gdata/jsdoc/1.9/index.html http://code.google.com/apis/calendar/calendar_gadgets.html http://www.google.com/ig/directory?synd=open&cat=communication&url=http%3A%2F%2Fwww.google.com%2Fig%2Fmodules%2Fcalendar3.xml http://www.gmodules.com/ig/creator?synd=open&url=http%3A//www.google.com/ig/modules/calendar-for-your-site.xml&pt=%26context%3Dd%26synd%3Dig%26lang%3Den%26.lang%3Den%26country%3Dus%26.country%3Dus%26cat%3Dall%26num%3D1%26start%3D-1%26cols%3D1%26objs%3D6aZ&sn=6aZ&lang=en Google Analytics http://www.google.com/analytics/ WordPress http://codex.wordpress.org/Main_Page http://codex.wordpress.org/Function_Reference http://codex.wordpress.org/Theme_Development
Appendix A – Google Map 1. Find map a t maps.google.com 2. Click Link (upper right) 2 1
Appendix A – Google Map 3. Click Customize and preview embedded map 3
Appendix A – Google Map 4. Customize and preview 4
Appendix A – Google Map 5. Copy code 5
Appendix A – Google Map 6. Paste into empty <div> <div> <iframe width=&quot;425&quot; height=&quot;350&quot; frameborder=&quot;0&quot; scrolling=&quot;no&quot; marginheight=&quot;0&quot; marginwidth=&quot;0&quot; src=&quot;http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=777+NE+ML+King+Blvd.,+Portland,+OR&amp;sll=45.528907,-122.661994&amp;sspn=0.00914,0.019526&amp;ie=UTF8&amp;ll=45.535994,-122.658491&amp;spn=0.021042,0.036478&amp;z=14&amp;output=embed&quot;></iframe><br /><small><a href=&quot;http://maps.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=777+NE+ML+King+Blvd.,+Portland,+OR&amp;sll=45.528907,-122.661994&amp;sspn=0.00914,0.019526&amp;ie=UTF8&amp;ll=45.535994,-122.658491&amp;spn=0.021042,0.036478&amp;z=14&quot; style=&quot;color:#0000FF;text-align:left&quot;>View Larger Map</a></small> </div>
Appendix B – Google Calendar 1. Sign in and find a calendar you want to add 1
Appendix B – Google Calendar 2. Click “ Calendar settings ” from calendar dropdown menu 2
Appendix B – Google Calendar 3. Click “ Customize the color, size, and other options ” 3
Appendix B – Google Calendar 4. Customize and preview 4
Appendix B – Google Calendar 5. Copy code 5
Appendix B – Google Calendar 6. Paste into empty <div> <div> <iframe src=&quot;http://www.google.com/calendar/embed?showTitle=0&amp;showNav=0&amp;showPrint=0&amp;showTabs=0&amp;showCalendars=0&amp;showTz=0&amp;mode=AGENDA&amp;height=300&amp;wkst=1&amp;bgcolor=%23FFFFFF&amp;src=powellsbooks%40gmail.com&amp;color=%23AB8B00&amp;ctz=America%2FLos_Angeles&quot; style=&quot; border-width:0 &quot; width=&quot;185&quot; height=&quot;300&quot; frameborder=&quot;0&quot; scrolling=&quot;no&quot;></iframe> </div>
Appendix C – Google Analytics
Appendix C – Google Analytics
Appendix C – Google Analytics
Appendix C – Google Analytics
Appendix C – Google Analytics

More Related Content

PDF
Remote controlling Parrot AR drone with Vaadin & Spring Boot @ GWT.create
Peter Lehto
 
PDF
Blog
frforever
 
PPT
Fast Loading JavaScript
Aaron Peters
 
PPTX
計算機概論20161205
志宇 許
 
PPTX
How to use blogging for an allergist's practice
Nathaniel Hare
 
PPT
iGoogle Gadgets @ Your Library
Edward Metz
 
PDF
Basic Crud In Django
mcantelon
 
PPTX
API Design - 3rd Edition
Apigee | Google Cloud
 
Remote controlling Parrot AR drone with Vaadin & Spring Boot @ GWT.create
Peter Lehto
 
Blog
frforever
 
Fast Loading JavaScript
Aaron Peters
 
計算機概論20161205
志宇 許
 
How to use blogging for an allergist's practice
Nathaniel Hare
 
iGoogle Gadgets @ Your Library
Edward Metz
 
Basic Crud In Django
mcantelon
 
API Design - 3rd Edition
Apigee | Google Cloud
 

Similar to Pimp My Web Page (20)

PPT
External Data Access with jQuery
Doncho Minkov
 
KEY
Spiffy Applications With JavaScript
Mark Casias
 
PDF
TwitterLib.js
Remy Sharp
 
PPT
OpenSocial - GTUG Stockholm Meeting Oct 1 2009
Jacob Gyllenstierna
 
PPT
Introduction to Prototype JS Framework
Mohd Imran
 
PDF
SproutCore: Amber
Yehuda Katz
 
PPTX
Development of Twitter Application #5 - Users
Myungjin Lee
 
PPTX
Web technologies-course 10.pptx
Stefan Oprea
 
PPT
what is-twitter
aiesecjalandhar
 
PDF
WebApp / SPA @ AllFacebook Developer Conference
AllFacebook.de
 
PPTX
Twitter
Utpal Betai
 
PDF
Migrating from jQuery - Core Journey to Vanilla JS
Andreas Nedbal
 
PDF
DOM Scripting Toolkit - jQuery
Remy Sharp
 
PPTX
JSON
Yoga Raja
 
PPT
OpenSocial Intro
Pamela Fox
 
PPTX
Callbacks, Promises, and Coroutines (oh my!): Asynchronous Programming Patter...
Domenic Denicola
 
PPTX
Development of Twitter Application #2 - Twitter for Websites
Myungjin Lee
 
KEY
Building Great Stuff Using Web Technologies
Stephan Seidt
 
PPT
Ajax
Rathan Raj
 
PDF
JavaScript Library Overview (Ajax Exp West 2007)
jeresig
 
External Data Access with jQuery
Doncho Minkov
 
Spiffy Applications With JavaScript
Mark Casias
 
TwitterLib.js
Remy Sharp
 
OpenSocial - GTUG Stockholm Meeting Oct 1 2009
Jacob Gyllenstierna
 
Introduction to Prototype JS Framework
Mohd Imran
 
SproutCore: Amber
Yehuda Katz
 
Development of Twitter Application #5 - Users
Myungjin Lee
 
Web technologies-course 10.pptx
Stefan Oprea
 
what is-twitter
aiesecjalandhar
 
WebApp / SPA @ AllFacebook Developer Conference
AllFacebook.de
 
Twitter
Utpal Betai
 
Migrating from jQuery - Core Journey to Vanilla JS
Andreas Nedbal
 
DOM Scripting Toolkit - jQuery
Remy Sharp
 
JSON
Yoga Raja
 
OpenSocial Intro
Pamela Fox
 
Callbacks, Promises, and Coroutines (oh my!): Asynchronous Programming Patter...
Domenic Denicola
 
Development of Twitter Application #2 - Twitter for Websites
Myungjin Lee
 
Building Great Stuff Using Web Technologies
Stephan Seidt
 
Ajax
Rathan Raj
 
JavaScript Library Overview (Ajax Exp West 2007)
jeresig
 
Ad

Recently uploaded (20)

PDF
SEX-GENDER-AND-SEXUALITY-LESSON-1-M (2).pdf
jemmgomez09
 
PPTX
Commmunication in Todays world- Principles and Barriers
MandyBuchanan2
 
PDF
My 'novel' Account of Human Possibility pdf.pdf
BS Murthy
 
PPTX
THEORIES-PSYCH-3.pptx theory of Abraham Maslow
stodomingoconstructi
 
PDF
Elle Lalli on The Role of Emotional Intelligence in Entrepreneurship
Elle Lalli
 
PPTX
Identity Development in Adolescence.pptx
Sandhya Bhatt
 
DOCX
Boost your energy levels and Shred Weight
antonevensson0
 
PPTX
Presentation on interview preparation.pt
vaishnavinampally6
 
PPTX
Chapter-7-The-Spiritual-Self-.pptx-First
lazomarjorieestraves
 
PPTX
UNIVERSAL HUMAN VALUES for NEP student .pptx
Amuanpuia1
 
PDF
Top 10 Visionary Entrepreneurs to Watch in 2025
timeiconic007
 
PPTX
PERDEV-LESSON-3 DEVELOPMENTMENTAL STAGES.pptx
quartz353
 
PPTX
Learn how to prevent Workplace Incidents?
MushtaqHussain95
 
PPTX
Pradeep Kumar Roll no.30 Paper I.pptx....
PradeepMishra584662
 
PPTX
Learn how to use Portable Grinders Safely
MushtaqHussain95
 
PPTX
Travel mania in india needs to change the world
sharieff6330
 
PPTX
Personal Development - By Knowing Oneself?
PACITALESTOJAS
 
PDF
Red Light Wali Muskurahat – A Heart-touching Hindi Story
Mohd Salman
 
PPT
cypt-cht-healthy-relationships-part1-presentation-v1.1en.ppt
IRVINGACACIO3
 
PDF
⚡ Prepping for grid failure_ 6 Must-Haves to Survive Blackout!.pdf
BuySmart Advisor
 
SEX-GENDER-AND-SEXUALITY-LESSON-1-M (2).pdf
jemmgomez09
 
Commmunication in Todays world- Principles and Barriers
MandyBuchanan2
 
My 'novel' Account of Human Possibility pdf.pdf
BS Murthy
 
THEORIES-PSYCH-3.pptx theory of Abraham Maslow
stodomingoconstructi
 
Elle Lalli on The Role of Emotional Intelligence in Entrepreneurship
Elle Lalli
 
Identity Development in Adolescence.pptx
Sandhya Bhatt
 
Boost your energy levels and Shred Weight
antonevensson0
 
Presentation on interview preparation.pt
vaishnavinampally6
 
Chapter-7-The-Spiritual-Self-.pptx-First
lazomarjorieestraves
 
UNIVERSAL HUMAN VALUES for NEP student .pptx
Amuanpuia1
 
Top 10 Visionary Entrepreneurs to Watch in 2025
timeiconic007
 
PERDEV-LESSON-3 DEVELOPMENTMENTAL STAGES.pptx
quartz353
 
Learn how to prevent Workplace Incidents?
MushtaqHussain95
 
Pradeep Kumar Roll no.30 Paper I.pptx....
PradeepMishra584662
 
Learn how to use Portable Grinders Safely
MushtaqHussain95
 
Travel mania in india needs to change the world
sharieff6330
 
Personal Development - By Knowing Oneself?
PACITALESTOJAS
 
Red Light Wali Muskurahat – A Heart-touching Hindi Story
Mohd Salman
 
cypt-cht-healthy-relationships-part1-presentation-v1.1en.ppt
IRVINGACACIO3
 
⚡ Prepping for grid failure_ 6 Must-Haves to Survive Blackout!.pdf
BuySmart Advisor
 
Ad

Pimp My Web Page

  • 1.  
  • 2. To understand this presentation (X)HTML CSS Javascript PHP AJAX Java .NET huh? expert I can do that
  • 3. Topics Twitter tweets YouTube thumbnails Flickr thumbnails Yahoo! music player Google Maps Google Calendar Google Analytics Wordpress blog
  • 4. Topics Twitter tweets YouTube thumbnails Flickr thumbnails Yahoo! music player Google Maps Google Calendar Google Analytics Wordpress blog
  • 5. Notes Apps used in presentation: NeoOffice presentation slides Firefox browse pages Textwrangler edit pages Cyberduck SFTP Firebug (FF ext) inspect HTML and JS Code tested in: Firefox 3 (mac/pc) Safari 4 public beta (mac) Internet Explorer 6, 7 (pc)
  • 6. Start and End Start: http://pimpstart.harmonicnw.com Finish: http://pimpend.harmonicnw.com Finish + blog: http://pimpedblog.harmonicnw.com
  • 7. Accessing Twitter API using JavaScript (simple public API method) <script src=&quot;http://twitter.com/... [parameters] ...></script>
  • 8. Accessing Twitter API using JavaScript (simple public API method) JSON object status text, status date, status link, user info, etc.
  • 9. Accessing Twitter API using JavaScript (simple public API method) parse JSON object with JavaScript function
  • 10. Accessing Twitter API using JavaScript (simple public API method) add new content with JavaScript function
  • 11. Add Twitter Tweets Insert just above </body>: <script type=&quot;text/javascript&quot;> function showTweets(data) { ... } </script> <script type=&quot;text/javascript&quot; src=&quot;http://twitter.com/statuses/user_timeline/THE_REAL_SHAQ.json? callback=showTweets&amp;count=3&quot;></script> Insert in <body>: <div id=&quot;tweets&quot;></div>
  • 12. Add Twitter Tweets Insert just above </body>: <script type=&quot;text/javascript&quot;> function showTweets(data) { ... } </script> <script type=&quot;text/javascript&quot; src=&quot;http://twitter.com/statuses/user_timeline/THE_REAL_SHAQ.json? callback=showTweets&amp;count=3&quot;></script> Insert in <body>: <div id=&quot;tweets&quot;></div> A whole bunch of JavaScript code
  • 13. <script type=&quot;text/javascript&quot;> // <![CDATA[ function showTweets(data) { /** USER SETTINGS ***********/ var targetId=&quot;tweets&quot;; // Id of element where twitters will be inserted var showUsername = false; // Set to true to show username var showTime = true; // Set to true to show time var showFollowMe = true; // Set to true to show &quot;follow me on Twitter&quot; link /*****************************/ var tweets = data; var targetObj = document.getElementById(targetId); var newUl = document.createElement('ul'); newUl.className = &quot;tweetList&quot;; for (var i=0; i<tweets.length; i++) { var username = tweets[i]['user']['screen_name']; var text = tweets[i]['text']; var tweetId = tweets[i]['id']; var userUrl = &quot;http://www.twitter.com/&quot; + username + &quot;/&quot;; var tweetUrl = &quot;http://www.twitter.com/&quot; + username + &quot;/status/&quot; + tweetId; var time = &quot;&quot;; var createdAt = tweets[i]['created_at']; var B=createdAt.split(&quot; &quot;); var C=B[1]+&quot; &quot;+B[2]+&quot;, &quot;+B[5]+&quot; &quot;+B[3]; var A=Date.parse(C); var D=(arguments.length>1)?arguments[1]:new Date(); var E=parseInt((D.getTime()-A)/1000); E=E+(D.getTimezoneOffset()*60); if (E<60) {time = &quot;less than a minute ago&quot;;} else if (E<120) {time = &quot;about a minute ago&quot;;} else if (E<(60*60)) {time = (parseInt(E/60)).toString() + &quot; minutes ago&quot;;} else if (E<(120*60)) {time = &quot;about an hour ago&quot;;} else if (E<(24*60*60)) {time = &quot;about &quot; + (parseInt(E/3600)).toString() + &quot; hours ago&quot;;} else if (E<(48*60*60)) {time = &quot;1 day ago&quot;;} else {time = (parseInt(E/86400)).toString() +&quot; days ago&quot;;} var newLi = document.createElement('li'); if (showUsername) { var newStrong = document.createElement('strong'); var newTxtNd = document.createTextNode(username + &quot; &quot;); newStrong.appendChild(newTxtNd); newLi.appendChild(newStrong); } var newSpan = document.createElement('span'); var newTxtNd2 = document.createTextNode(text + &quot; &quot;); newSpan.appendChild(newTxtNd2); newLi.appendChild(newSpan); if (showTime) { var newSmall = document.createElement('small'); var newA = document.createElement('a'); newA.href = tweetUrl; newA.title = username + &quot; Twitter status &quot; + tweetId; var newTxtNd3 = document.createTextNode(time); newA.appendChild(newTxtNd3); newSmall.appendChild(newA); newLi.appendChild(newSmall); } newUl.appendChild(newLi); } targetObj.appendChild(newUl); if (showFollowMe) { var newA2 = document.createElement('a'); newA2.className = &quot;twitterLink&quot;; newA2.title = &quot;follow &quot; + username + &quot; on Twitter&quot;; newA2.href = userUrl; var newTxtNd4 = document.createTextNode(&quot;follow me on Twitter&quot;); newA2.appendChild(newTxtNd4); targetObj.appendChild(newA2); } } // ]]> </script> <script type=&quot;text/javascript&quot; src=&quot;http://twitter.com/statuses/user_timeline/THE_REAL_SHAQ.json?callback=showTweets&amp;count=3&quot;></script>
  • 14. Add Twitter Tweets Insert just above </body>: <script type=&quot;text/javascript&quot;> function showTweets(data) { ... } </script> <script type=&quot;text/javascript&quot; src=&quot;http://twitter.com/statuses/user_timeline/ THE_REAL_SHAQ .json? callback= showTweets &amp;count= 3 &quot;></script> Function used to parse Twitter's API response (declared above) Parses Twitter API response and inserts Tweets into page (see next slide) Twitter user ID Number of tweets to show
  • 15. Add Twitter Tweets New content inserted by showTweets() : <div id=&quot;tweets&quot;> <ul class=&quot;tweetList&quot;> <li> <strong>THE_REAL_SHAQ</strong> <span>Hey brett favre, dnt retire bro, retire when I retire in 4 yrs, and o yea I will sack u , keep playin You are legend</span> <small><a href=&quot;http://twitter.com/THE_REAL_SHAQ/status/1727888345&quot;>8:16 AM May 7th</a></small> </li> </ul> <a class=&quot;twitterLink&quot; title=&quot;follow THE_REAL_SHAQ on Twitter&quot; href=&quot;http://www.twitter.com/THE_REAL_SHAQ/&quot;>follow me on Twitter</a> </div>
  • 16. Add Twitter Tweets <div id=&quot;tweets&quot;> <ul class=&quot;tweetList&quot;> <li> <strong> THE_REAL_SHAQ </strong> <span> Hey brett favre, dnt retire bro, retire when I retire in 4 yrs, and o yea I will sack u , keep playin You are legend </span> <small><a href=&quot;http://twitter.com/THE_REAL_SHAQ/status/1727888345&quot;> 8:16 AM May 7th </a></small> </li> </ul> <a class=&quot;twitterLink&quot; title=&quot;follow THE_REAL_SHAQ on Twitter&quot; href=&quot;http://www.twitter.com/THE_REAL_SHAQ/&quot;> follow me on Twitter </a> </div> User ID Status User ID Date (links to post)
  • 17. Accessing YouTube API using JavaScript (simple public API method) <script src=&quot;http://gdata.youtube.com/... [parameters] ...></script>
  • 18. Accessing YouTube API using JavaScript (simple public API method) JSON object video thumbnails, video urls, user info, etc.
  • 19. Accessing YouTube API using JavaScript (simple public API method) parse JSON object with JavaScript function
  • 20. Accessing YouTube API using JavaScript (simple public API method) add new content with JavaScript function
  • 21. Add YouTube Thumbnails Insert just above </body>: Insert in <body>: <div id=&quot;videos&quot;></div> <script type=&quot;text/javascript&quot;> function showYouTubeThumbnails(data) { ... } </script> <script type=&quot;text/javascript&quot; src=&quot;http://gdata.youtube.com/feeds/users/TheFreeBoxShow/uploads?alt=json-in-script&amp;format=5&amp;callback=showYouTubeThumbnails&amp;max-results=5&quot;></script>
  • 22. Add YouTube Thumbnails Insert just above </body>: <script type=&quot;text/javascript&quot;> function showYouTubeThumbnails(data) { ... } </script> <script type=&quot;text/javascript&quot; src=&quot;http://gdata.youtube.com/feeds/users/TheFreeBoxShow/uploads?alt=json-in-script&amp;format=5&amp;callback=showYouTubeThumbnails&amp;max-results=5&quot;></script> Insert in <body>: <div id=&quot;videos&quot;></div> A whole bunch of JavaScript code
  • 23. <script type=&quot;text/javascript&quot;> // <![CDATA[ function showYouTubeThumbnails(data) { /** USER SETTINGS ***********/ var highResThumbnails = false; // set to false for normal (120px x 90px), set to true for high-resolution (320px x 240px) var targetId = &quot;videos&quot;; // Id of element where the thumbnails will be inserted /******************************/ var feed = data.feed; var entries = feed.entry || []; var targetObj = document.getElementById(targetId); for (var i = 0; i < entries.length; i++) { var entry = entries[i]; var link = entry['link'][0]['href']; var thumbnailUrl; var thumbnailWidth; var thumbnailHeight; var minimumHighResWidth = 320; // minimum width for a high-resolution thumbnail var thumbnailsObj = entry['media$group']['media$thumbnail']; for (var j = 0; j < thumbnailsObj.length; j++) { thumbnailUrl = thumbnailsObj[j]['url']; thumbnailWidth = thumbnailsObj[j]['width']; thumbnailHeight = thumbnailsObj[j]['height']; if (thumbnailsObj[j]['width'] >= minimumHighResWidth && highResThumbnails || thumbnailsObj[j]['width'] < minimumHighResWidth && !highResThumbnails) { break; } } var newA = document.createElement('a'); newA.href = link; newA.title = &quot;YouTube video&quot;; var newImg = document.createElement('img'); newImg.src = thumbnailUrl; newImg.width = thumbnailWidth; newImg.height = thumbnailHeight; newImg.alt = &quot;YouTube video thumbnail&quot;; newA.appendChild(newImg); targetObj.appendChild(newA); } } // ]]> </script> <script type=&quot;text/javascript&quot; src=&quot;http://gdata.youtube.com/feeds/users/TheFreeBoxShow/uploads?alt=json-in-script&amp;format=5&amp;callback=showYouTubeThumbnails&amp;max-results=5&quot;></script>
  • 24. Add YouTube Thumbnails Insert just above </body>: <script type=&quot;text/javascript&quot;> function showYouTubeThumbnails(data) { ... } </script> <script type=&quot;text/javascript&quot; src=&quot;http://gdata.youtube.com/feeds/users/ TheFreeBoxShow /uploads?alt=json-in-script&amp;format=5&amp;callback= showYouTubeThumbnails &amp;max-results= 5 &quot;></script> Function used to parse YouTube's API response (declared above) Parses YouTube API response and inserts thumbnails into page (see next slide) YouTube username Number of thumbnails to show Other useful parameters: time : today , this_week , this_month , all_time orderby : relevance , published , viewCount , rating Example: ...&amp;time=this_month&amp;orderby=rating...
  • 25. Add YouTube Thumbnails YouTube API returns 2 sizes of thumbnails: 120px by 90px - default 320px by 240px - high-resolution Determine which you want to use in callback function
  • 26. Add YouTube Thumbnails Insert just above </body>: <div id=&quot;videos&quot;> <a href=&quot;http://www.youtube.com/watch?v=yTdW6g02Ar8&quot; title=&quot;YouTube video&quot;> <img width=&quot;120&quot; height=&quot;90&quot; src=&quot;http://i.ytimg.com/vi/yTdW6g02Ar8/2.jpg&quot; alt=&quot;YouTube video thumbnail&quot;/> </a> <a href=&quot;...&quot; title=&quot;YouTube video&quot;><img ... /></a> <a href=&quot;...&quot; title=&quot;YouTube video&quot;><img ... /></a> <!-- etc... --> </div>
  • 27. Accessing Flickr API using JavaScript (simple badge API method) <script src=&quot;http://flickr.com/... [parameters] ...></script>
  • 28. Accessing Flickr API using JavaScript (simple badge API method) write HTML
  • 29. Add Flickr Thumbnails Insert in empty <div>: <script type=&quot;text/javascript&quot; src=&quot;http://www.flickr.com/badge_code_v2.gne?count=8&amp;display=random&amp;size=s&amp;source=user_set&amp;set=72157606336502682&quot;></script>
  • 30. Add Flickr Thumbnails Insert in empty <div>: Number of thumbnails <script type=&quot;text/javascript&quot; src=&quot;http://www.flickr.com/badge_code_v2.gne?count= 8 &amp;display= random &amp;size= s &amp;source= user_set&amp;set=72157606336502682 &quot;></script> Order (random or latest) Size t longest side 100px s 75px x 75px m longest side 240 px Source, Source ID source can be: user, group, user_set source ID: user=... or group=... or set=... Examples: ...source=user&amp;user=24491718@N03... ...source=group&amp;group=79221983@N00... ...source=user_set&amp;set=72157606336502682...
  • 31. Add Flickr Thumbnails Find source IDs User ID from URL: http://www.flickr.com/photos/ [email_address] / or submit photostream URL at idgettr.com Group ID submit group pool URL at idgettr.com Photo Set from URL: http://www.flickr.com/photos/80651083@N00/sets/ 72157606336502682 /
  • 32. Add Flickr Thumbnails New content inserted below </script>: <script type=&quot;text/javascript&quot; src=&quot;http://www.flickr.com/badge_code_v2.gne?count=8&amp;display=random&amp;size=s&amp;source=user_set&amp;set=72157606336502682&quot;></script> <a href=&quot;http://www.flickr.com/photos/80651083@N00/2740661357/&quot;> <img width=&quot;75&quot; height=&quot;75&quot; title=&quot;Steel Bridge, Portland, Oregon&quot; alt=&quot;A photo on Flickr&quot; src=&quot;http://farm4.static.flickr.com/3248/2740661357_08c3a04671_s.jpg&quot;/> </a> <a ...><img ... /></a> <a ...><img ... /></a> <!-- etc... --> <span class=&quot;flickr_badge_beacon&quot; style=&quot;position: absolute; left: -999em; top: -999em; visibility: hidden;&quot;>
  • 33. Add Yahoo! Music Player Insert in <head>: <script type=&quot;text/javascript&quot; src=&quot;http://mediaplayer.yahoo.com/js&quot;></script> Insert in <body>: <a title=&quot;Nearly&quot; href=&quot;media/nearly.mp3&quot;><img style=&quot;display:none&quot; src=&quot;images/myv1.jpg&quot; width=&quot;46&quot; height=&quot;46&quot; alt=&quot;Metaphorically Yours [vol 1] album cover&quot; />Play 'Nearly'</a>
  • 34. Add Yahoo! Music Player Insert in <head>: <script type=&quot;text/javascript&quot; src=&quot;http://mediaplayer.yahoo.com/js&quot;></script> Insert in <body>: <a title=&quot; Nearly &quot; href=&quot; media/nearly.mp3 &quot;><img style=&quot;display:none&quot; src=&quot; images/myv1cover_46x46.jpg &quot; width=&quot;46&quot; height=&quot;46&quot; alt=&quot;Metaphorically Yours [vol 1] album cover&quot; /> Play 'Nearly' </a> Title displayed in player (optional) Url of mp3 Url of album art (46px by 46px in current version of player) Link text
  • 35. Add a Google Map Find map a t maps.google.com Click Link (upper right) Click Customize and preview embedded map Customize and preview Copy code Paste into empty <div> Tip: enter exact address to remove pinpoints See Appendix A for details
  • 36. Google Map Code <div> <iframe width=&quot;425&quot; height=&quot;350&quot; frameborder=&quot;0&quot; scrolling=&quot;no&quot; marginheight=&quot;0&quot; marginwidth=&quot;0&quot; src=&quot;http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=777+NE+ML+King+Blvd.,+Portland,+OR&amp;sll=45.528907,-122.661994&amp;sspn=0.00914,0.019526&amp;ie=UTF8&amp;ll=45.535994,-122.658491&amp;spn=0.021042,0.036478&amp;z=14&amp;output=embed&quot;></iframe><br /><small><a href=&quot;http://maps.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=777+NE+ML+King+Blvd.,+Portland,+OR&amp;sll=45.528907,-122.661994&amp;sspn=0.00914,0.019526&amp;ie=UTF8&amp;ll=45.535994,-122.658491&amp;spn=0.021042,0.036478&amp;z=14&quot; style=&quot;color:#0000FF;text-align:left&quot;>View Larger Map</a></small> </div>
  • 37. Add a Google Calendar Sign in and find a calendar you want to add Click “ Calendar settings ” from calendar dropdown menu Click “ Customize the color, size, and other options ” Customize and preview Copy code Paste into empty <div> See Appendix B for details
  • 38. Google Calendar Code <div> <iframe src=&quot;http://www.google.com/calendar/embed?showTitle=0&amp;showNav=0&amp;showPrint=0&amp;showTabs=0&amp;showCalendars=0&amp;showTz=0&amp;mode=AGENDA&amp;height=300&amp;wkst=1&amp;bgcolor=%23FFFFFF&amp;src=powellsbooks%40gmail.com&amp;color=%23AB8B00&amp;ctz=America%2FLos_Angeles&quot; style=&quot; border-width:0 &quot; width=&quot;185&quot; height=&quot;300&quot; frameborder=&quot;0&quot; scrolling=&quot;no&quot;></iframe> </div>
  • 39. The Google Calendar Code <div> <iframe src=&quot;http://www.google.com/calendar/embed?showTitle=0&amp;showNav=0&amp;showPrint=0&amp;showTabs=0&amp;showCalendars=0&amp;showTz=0&amp;mode=AGENDA&amp;height= 300 &amp;wkst=1&amp;bgcolor=%23 FFFFFF &amp;src=powellsbooks%40gmail.com&amp;color=%23 AB8B00 &amp;ctz=America%2FLos_Angeles&quot; style=&quot; border-width:0 &quot; width=&quot; 185 &quot; height=&quot; 300 &quot; frameborder=&quot;0&quot; scrolling=&quot;no&quot;></iframe> </div> Height Text color (limited choices) Width Background color
  • 40. Track Statistics with Google Analytics Create Google Analytics account (www.google.com/analytics) Complete signup process, copy the tracking code Paste code just above </body> Note: does not necessarily update data quickly See Appendix C for details
  • 41. Track Statistics with Google Analytics Paste code just above </body>: <script type=&quot;text/javascript&quot;> var gaJsHost = ((&quot;https:&quot; == document.location.protocol) ? &quot;https://ssl.&quot; : &quot;http://www.&quot;); document.write(unescape(&quot;%3Cscript src='&quot; + gaJsHost + &quot;google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E&quot;)); </script> <script type=&quot;text/javascript&quot;> try { var pageTracker = _gat._getTracker(&quot; UA-8759933-1 &quot;); pageTracker._trackPageview(); } catch(err) {} </script> Account ID
  • 42. Tips for W3C Compliance (XHTML 1.0 Strict) Surround JavaScripts with CDATA block In your URLs, make sure ampersands are encoded &amp; (not & ) <script> // <![CDATA[ ... // ]]> </script>
  • 43. About JavaScript Placement Place scripts in order you want them to load and run. An unresponsive script can halt the loading of the rest of the scripts on the page.
  • 44. WordPress Basics Free, flexible blogging framework Content stored in MySQL database Layout in PHP/HTML files Friendly browser-based user interface to edit content Change layout without affecting content using “themes”
  • 45. WordPress Basics Some hosting companies that auto-install WordPress: Dreamhost Blue Host MediaTemple GoDaddy.com JustHost
  • 46. link to slides at www.webvisionsevent.com more info on pimping your web page at www.harmonicnw.com [email_address]
  • 47. Further Reading Twitter: http://apiwiki.twitter.com/Twitter-API-Documentation http://twitter.com/widgets/html_widget http://net.tutsplus.com/articles/10-awesome-ways-to-integrate-twitter-with-your-website/ http://meiert.com/en/blog/20071011/twittering/ YouTube: http://code.google.com/apis/youtube/2.0/developers_guide_protocol.html http://code.google.com/apis/youtube/2.0/reference.html http://code.google.com/apis/youtube/2.0/reference.html#Query_parameter_definitions http://gdata.ops.demo.googlepages.com/yt_json_codelab.html http://www.google.com/uds/solutions/wizards/videobar.html http://www.bernzilla.com/item.php?id=848 Flickr: http://www.flickr.com/services/api/ http://idgettr.com/ http://www.elliotswan.com/2006/08/06/custom-flickr-badge-api-documentation/ http://www.viget.com/inspire/using-the-flickr-api/ http://www.shapeshift.net/2008/05/flickr-thumbs/ http://veerle.duoh.com/blog/comments/fickr_badge_w3c_valid/ http://www.flickr.com/services/api/misc.urls.html http://www.flickr.com/badge.gne Yahoo! Media Player http://mediaplayer.yahoo.com/ http://yahoomediaplayer.wikia.com/wiki/How_to_link Google Maps http://code.google.com/apis/maps/ Google Calendar http://google.about.com/od/toolsfortheoffice/ss/embedCalendar.htm http://code.google.com/apis/calendar/docs/2.0/reference.html http://www.google.com/googlecalendar/event_publisher_guide.html http://code.google.com/apis/gdata/jsdoc/1.9/index.html http://code.google.com/apis/calendar/calendar_gadgets.html http://www.google.com/ig/directory?synd=open&cat=communication&url=http%3A%2F%2Fwww.google.com%2Fig%2Fmodules%2Fcalendar3.xml http://www.gmodules.com/ig/creator?synd=open&url=http%3A//www.google.com/ig/modules/calendar-for-your-site.xml&pt=%26context%3Dd%26synd%3Dig%26lang%3Den%26.lang%3Den%26country%3Dus%26.country%3Dus%26cat%3Dall%26num%3D1%26start%3D-1%26cols%3D1%26objs%3D6aZ&sn=6aZ&lang=en Google Analytics http://www.google.com/analytics/ WordPress http://codex.wordpress.org/Main_Page http://codex.wordpress.org/Function_Reference http://codex.wordpress.org/Theme_Development
  • 48. Appendix A – Google Map 1. Find map a t maps.google.com 2. Click Link (upper right) 2 1
  • 49. Appendix A – Google Map 3. Click Customize and preview embedded map 3
  • 50. Appendix A – Google Map 4. Customize and preview 4
  • 51. Appendix A – Google Map 5. Copy code 5
  • 52. Appendix A – Google Map 6. Paste into empty <div> <div> <iframe width=&quot;425&quot; height=&quot;350&quot; frameborder=&quot;0&quot; scrolling=&quot;no&quot; marginheight=&quot;0&quot; marginwidth=&quot;0&quot; src=&quot;http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=777+NE+ML+King+Blvd.,+Portland,+OR&amp;sll=45.528907,-122.661994&amp;sspn=0.00914,0.019526&amp;ie=UTF8&amp;ll=45.535994,-122.658491&amp;spn=0.021042,0.036478&amp;z=14&amp;output=embed&quot;></iframe><br /><small><a href=&quot;http://maps.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=777+NE+ML+King+Blvd.,+Portland,+OR&amp;sll=45.528907,-122.661994&amp;sspn=0.00914,0.019526&amp;ie=UTF8&amp;ll=45.535994,-122.658491&amp;spn=0.021042,0.036478&amp;z=14&quot; style=&quot;color:#0000FF;text-align:left&quot;>View Larger Map</a></small> </div>
  • 53. Appendix B – Google Calendar 1. Sign in and find a calendar you want to add 1
  • 54. Appendix B – Google Calendar 2. Click “ Calendar settings ” from calendar dropdown menu 2
  • 55. Appendix B – Google Calendar 3. Click “ Customize the color, size, and other options ” 3
  • 56. Appendix B – Google Calendar 4. Customize and preview 4
  • 57. Appendix B – Google Calendar 5. Copy code 5
  • 58. Appendix B – Google Calendar 6. Paste into empty <div> <div> <iframe src=&quot;http://www.google.com/calendar/embed?showTitle=0&amp;showNav=0&amp;showPrint=0&amp;showTabs=0&amp;showCalendars=0&amp;showTz=0&amp;mode=AGENDA&amp;height=300&amp;wkst=1&amp;bgcolor=%23FFFFFF&amp;src=powellsbooks%40gmail.com&amp;color=%23AB8B00&amp;ctz=America%2FLos_Angeles&quot; style=&quot; border-width:0 &quot; width=&quot;185&quot; height=&quot;300&quot; frameborder=&quot;0&quot; scrolling=&quot;no&quot;></iframe> </div>
  • 59. Appendix C – Google Analytics
  • 60. Appendix C – Google Analytics
  • 61. Appendix C – Google Analytics
  • 62. Appendix C – Google Analytics
  • 63. Appendix C – Google Analytics

Editor's Notes

  • #2: Introduction: Gage Choat Web developer/designer PDX ~6 yrs