• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Scottish Web Folk: Three (5-minute) ways to improve your Website
 

Scottish Web Folk: Three (5-minute) ways to improve your Website

on

  • 3,529 views

Slides for presentation at the Scottish Web Folk meeting 12 September 2008 at the University of Glasgow.

Slides for presentation at the Scottish Web Folk meeting 12 September 2008 at the University of Glasgow.

Statistics

Views

Total Views
3,529
Views on SlideShare
3,108
Embed Views
421

Actions

Likes
2
Downloads
17
Comments
0

5 Embeds 421

http://scottishwebfolk.wordpress.com 365
http://blog.garethjmsaunders.co.uk 53
url_unknown 1
https://www.linkedin.com 1
https://scottishwebfolk.wordpress.com 1

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

    Scottish Web Folk: Three (5-minute) ways to improve your Website Scottish Web Folk: Three (5-minute) ways to improve your Website Presentation Transcript

    • Scottish Web Folk 3/10-ish five-minute ways to improve your website Gareth J M Saunders University of St Andrews www.st-andrews.ac.uk
    • This brief slideshow shows three of the "ten -ish five-minute ways to improve your website", based on a presentation by Mike Nolan at IWMW 2008 in Aberdeen. Mike's original slides can be viewed at: http://www.slideshare.net/mikenolan/10ish-fiveminute-ways-to-improve-your-website/ These slides were presented at the Scottish Web Folk meeting on Friday 12 September 2008 in Glasgow. About
    • 1. Microformats
    • Microformats are … an approach to adding richer semantics to HTML-based mark-up “
    • HTML is structured and semantic … <h1> Heading 1 <ul> Unordered List <address> Address
    • … but HTML is limited <address> <p>University of St Andrews<br /> College Gate<br /> North Street<br /> St Andrews<br /> Fife<br /> KY16 9AJ<br /> UK</p> <p>+44 (0)1334 476161</p> </address>
    • Microformats: principles
      • Solve a specific problem
      • Start as simply as possible
      • Designed for humans first , machines second
      • Reuse building blocks from widely adopted standards
      • Embeddable and modular
      • Enable decentralized development
    • Microformats: Solving problems Solution to hAtom Syndicated content hResume CV hReview Reviews geo & adr Location XFN Relationships hCalendar Events hCard Contact information
    • hCard
    • hCard: The problem it addresses Bob Colleagues Contact details
    • hCard: The problem it addresses Bob Text Colleagues
    • hCard: The problem it addresses Bob vCard format Colleagues
    • vCard: an industry standard BEGIN:VCARD VERSION:3.0 N:;;;; ORG :University of St Andrews TEL ;type=MAIN;type=pref:+441334476161 item1. ADR ;type= WORK ;type=pref:;; College Gate;North Street;St Andrews;Fife;KY16 9AJ;UK … END:VCARD
    • Creating an hCard <address> <p>University of St Andrews<br /> College Gate<br /> North Street<br /> St Andrews<br /> Fife<br /> KY16 9AJ<br /> UK</p> <p>+44 (0)1334 476161</p> </address>
    • hCard: add class=&quot;vcard&quot; <address class=&quot;vcard&quot; > <p>University of St Andrews<br /> College Gate<br /> North Street<br /> St Andrews<br /> Fife<br /> KY16 9AJ<br /> UK</p> <p>+44 (0)1334 476161</p> </address>
    • hCard: add class=&quot;fn org&quot; <address class=&quot;vcard&quot; > <p><span class=&quot;fn org&quot; >University of St Andrews</span><br /> College Gate<br /> North Street<br /> St Andrews<br /> Fife<br /> KY16 9AJ<br /> UK</p> <p>+44 (0)1334 476161</p> </address>
    • hCard: complete <address class=&quot; vcard &quot;> <p><span class=&quot; fn org &quot;>University of St Andrews</span><br /> <span class=&quot; adr &quot;> <span class=&quot; extended-address &quot;>College Gate</span><br /> <span class=&quot; street-address &quot;>North Street</span><br /> <span class=&quot; locality &quot;>St Andrews</span><br /> <span class=&quot; region &quot;>Fife</span><br /> <span class=&quot; postal-code &quot;>KY16 9AJ</span> <span class=&quot; country-name &quot;>UK</span></p> </span> <p class=&quot; tel &quot;><span class=&quot; type &quot;>work</span><span class=&quot; value &quot;>+44 (0)1334 476161</span></p> </address>
    • Microformats: Example
    • Operator add-on for Firefox
    • Operator add-on for Firefox
    • hCalendar
    • hCalendar: The problem it addresses Bob Colleagues Event details
    • hCard: The problem it addresses Bob iCalendar format Colleagues
    • hCalendar: based on iCalendar BEGIN:VCALENDAR VERSION:2.0 BEGIN:VEVENT DTSTAMP:22080910T105900Z SUMMARY :Scottish Web Folk LOCATION :University of Glasgow ORGANIZER:MAILTO:d.gibson@admin.gla.ac.uk DTSTART :20080912T130000Z DTEND :20080912T160000Z END:VEVENT END:VCALENDAR
    • hCalendar: complete <div class=&quot;vevent&quot;> <h3 class=&quot; summary &quot;><a href=&quot;/events/swf/glasgow/&quot;> Scottish Web Folk, September 2008</a></h3> <abbr class=&quot; dtstart &quot; title=&quot;20080912T1300&quot;> Friday 12 September 2008, 14:00</abbr> - <abbr class=&quot; dtend &quot; title=&quot;20080912T1600&quot;> 16:00</abbr> <p class=&quot; location &quot;>Univeristy of Glasgow</p> <p class=&quot;description&quot;>Meeting of the Scottish Web Folk looking at 10-ish five-minute ways to improve your website.</p> </div>
    • Microformat resources http://microformats.org Source of all things Microformat http://microformats.org/wiki.cheatsheets Microformat cheat sheet
    • Microformat tools hCard Creator http://microformats/code/hcard/creator Dreamweaver Extension http://www.webstandards.org/action/dwtf/microformats Operator add-on for Firefox http://addons.mozilla.org/.../4106
    • Microformat publications Using Microformats (PDF) $9.99 O'Reilly Short Cuts (2006) by Brian Suda http://oreilly.com/catalog/9780596528218/ Microformats: Empowering Your Markup for Web 2.0 Friends of Ed (2007) John Allsopp ISBN 0-59059-814-8
    •  
    • Scottish Web Folk presentation on Microformats by Gareth J M Saunders is licensed under a Creative Commons Attribution-Share Alike 2.5 UK: Scotland License . Credits Icons www.iconlook.com Next photo www.sxc.hu
    • 6. OpenSearch
    • Allows users to search from the browser
    • Custom searches in Firefox and IE7
    • www.opensearch.org
    • www.a9.com
    • How to create an OpenSearch plugin 1. Create XML file 2. Link to HTML document
    • Create XML file framework <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; ?> <OpenSearchDescription xmlns=&quot; http://a9.com/-/spec/opensearch/1.1&quot;> </OpenSearchDescription>
    • Add required elements <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; ?> <OpenSearchDescription xmlns=&quot; http://a9.com/-/spec/opensearch/1.1&quot;> <ShortName> University of St Andrews</ShortName> <Description> Search the University of St Andrews website</Description> <Url> </Url> </OpenSearchDescription>
    • Create a TEST search 1. Type TEST into your search box, and hit Search 2. Select and copy the generated search query
    • Change TEST to {SearchTerms} http://www.st-andrews.ac.uk/search?q= TEST &btnG=Search&site=StAndrews_ITS&output=xml_no_dtd&client=StAndrews_ITS&proxystylesheet=StAndrews_ITS http://www.st-andrews.ac.uk/search?q= {SearchTerms} &btnG=Search&site=StAndrews_ITS&output=xml_no_dtd&client=StAndrews_ITS&proxystylesheet=StAndrews_ITS
    • Escape ampersands <Url>http://www.st-andrews.ac.uk/search?q= {SearchTerms}&amp; btnG=Search &amp; site=StAndrews_ITS &amp; output=xml_no_dtd &amp; client=StAndrews_ITS &amp; proxystylesheet=StAndrews_ITS</Url>
    • Completed XML file (pt.1) <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; ?> <OpenSearchDescription xmlns=&quot; http://a9.com/-/spec/opensearch/1.1&quot;> <ShortName> University of St Andrews</ShortName> <Description> Search the University of St Andrews website</Description> <Url> http://www.st-andrews.ac.uk/search?q= {SearchTerms}&amp; btnG=Search &amp; site= StAndrews_ITS &amp; output=xml_no_dtd &amp; client=StAndrews_ITS &amp; proxystylesheet= StAndrews_ITS</Url> </OpenSearchDescription>
    • Optional tags <AdultContent> <Attribution> <Contact> <Developer> <Image> <InputEncoding> <Language> <LongName> <OutputEncoding> <Query> <SearchForm> <SyndicationRight> <Tags>
    • Optional tags <AdultContent> <Attribution> <Contact> <Developer> <Image> <InputEncoding> <Language> <LongName> <OutputEncoding> <Query> <SearchForm> <SyndicationRight> <Tags>
    • <Image>: Two options <Image height=&quot;16&quot; width=&quot;16&quot; type=&quot;image/x-icon&quot;> http://www.st-andrews.ac.uk/favicon.ico </Image> 1. URL pointing to an icon 2. Base-64 MIME encoded <Image height=&quot;16&quot; width=&quot;16&quot; type=&quot;image/x-icon&quot;> data:image/x-icon;base64,AAABAAEAEBAAAAEACABoBQAAFgAAACgAAAAQAAAAIAAAAAEACAAAAAAAAAAAAAAAAAAAAAAAAAEAAAAAAACbUgAAnFQEAJxVBQCdVQUAo2AVAKNhFwCkYRcAr3U0AK92NQCwdzcAsHc4ALF4OQCxeToAtoFGALaCSAC3g0kAwpdnAMOZagDDmWsAxJttAMaecgDGn3IAaE%2ByADQe3AA0HeIAMxrpADYd6wAvJecALSrmADAj5wAwJOcARjLWAFE%2B3QBCK%...AAA%3D </Image>
    • Completed XML file (pt.2) <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; ?> <OpenSearchDescription xmlns=&quot; http://a9.com/-/spec/opensearch/1.1&quot;> <ShortName> University of St Andrews</ShortName> <Description> Search the University of St Andrews website</Description> <Url> http://www.st-andrews.ac.uk/search?q= {SearchTerms}&amp;btnG=Search&amp;site= StAndrews_ITS&amp;output=xml_no_dtd&amp; client=StAndrews_ITS&amp;proxystylesheet= StAndrews_ITS</Url> <Image> http://www.st-andrews.ac.uk/favicon.ico</Image> </OpenSearchDescription>
    • How to create an OpenSearch plugin 1. Create XML file 2. Link to HTML document
    • Link to the XML file <link href=&quot; opensearch.xml &quot; type=&quot;application/opensearchdescription+xml&quot; title=&quot;University of St Andrews Search&quot; rel=&quot;search&quot; />
    • Specify the application type <link href=&quot;opensearch.xml&quot; type=&quot; application/opensearchdescription+xml &quot; title=&quot;University of St Andrews Search&quot; rel=&quot;search&quot; />
    • Give a meaningful title <link href=&quot;opensearch.xml&quot; type=&quot;application/opensearchdescription+xml&quot; title=&quot; University of St Andrews Search &quot; rel=&quot;search&quot; />
    • Relationship = search <link href=&quot;opensearch.xml&quot; type=&quot;application/opensearchdescription+xml&quot; title=&quot;University of St Andrews Search&quot; rel=&quot; search &quot; />
    • Test in Firefox
    • If it doesn't work … !
    • Resources www.opensearch.org The specification document from A9. OpenSearch Cheat Sheet Downloadable from www.scribd.com and the Scottish Web Folk blog: scottishwebfolk.wordpress.com
    • Scottish Web Folk presentation on OpenSearch by Gareth J M Saunders is licensed under a Creative Commons Attribution-Share Alike 2.5 UK: Scotland License . Credits Icons www.iconlook.com
    • 6. Search hint text (using jQuery)
    • Search what?
    • Hint text would be useful
    • http://jquery.com/ Step 1: Download jQuery core
    • http://plugins.jquery.com/project/hint Step 2: Download &quot;Input Hints&quot; plugin
    • http://plugins.jquery.com/project/hint Step 2: What &quot;Input Hints&quot; plugin does
      • Uses the title attribute of the input element to hint as to what the input field is for.
      • When in focus , it's removed
      • If left blank it will replace the hint
      • If left blank when submitted it will remove the text from the form
    • Step 3: Take your form <form id=&quot;googlesearch&quot; action=&quot;search.php&quot; method=&quot;get&quot;> <div> <input id=&quot;q&quot; name=&quot;q&quot; type=&quot;text&quot; /> <input id=&quot;btnG&quot; name=&quot;btnG&quot; type=&quot;submit&quot; value=&quot;Search&quot; /> </div> </form>
    • Step 4: Add a title attribute <form id=&quot;googlesearch&quot; action=&quot;search.php&quot; method=&quot;get&quot;> <div> <input id=&quot;q&quot; name=&quot;q&quot; title=&quot;Enter search keywords&quot; type=&quot;text&quot; /> <input id=&quot;btnG&quot; name=&quot;btnG&quot; type=&quot;submit&quot; value=&quot;Search&quot; /> </div> </form>
    • http://developer.yahoo.com/performance/rules.html#js_bottom Step 5: Link to jQuery library and plugin <script src=&quot; jquery-core-1.2.6.js &quot; type=&quot;text/javascript&quot;></script> <script src=&quot; jquery-plugin-hints.js &quot; type=&quot;text/javascript&quot;></script> </body> </html>
    • Step 6: Create custom jQuery code <script type=&quot;text/javascript&quot;> $(document).ready(function(){ $('input:text[id=&quot;q&quot;]').hint(); }); </script> < input id=&quot;q&quot; name=&quot;q&quot; title=&quot;Enter search keywords&quot; type=&quot;text&quot; />
    • … er, that's it! Step 7: Finished
    • Resources jQuery http://jquery.com http://plugins.jquery.com/project/hint jQuery in Action Manning (2008) Bear Bibeault & Yehuda Katz ISBN 1-9333988-35-5
    • Scottish Web Folk presentation on jQuery by Gareth J M Saunders is licensed under a Creative Commons Attribution-Share Alike 2.5 UK: Scotland License . Credits Icons www.iconlook.com Parchment image www.sxc.hu