Abstract image of a woman sitting on books and studying on a laptop

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

Download as PPT, PDF
Gareth Saunders, profile picture
Gareth Saunders

The document presents three of the 'ten-ish five-minute ways to improve your website' based on a presentation by Mike Nolan at a Scottish web folk meeting, discussing the use of microformats, OpenSearch, and jQuery for enhancing website functionality. It highlights the importance of embedding richer semantics in HTML using microformats to enhance human and machine readability, as well as providing guidance on creating OpenSearch plugins for customized searches. The document also suggests the usage of jQuery plugins for improved user input experiences on web forms.

TechnologyTravel
1 of 68
Downloaded 18 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
64
65
66
67
68
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

More Related Content

PPT
Site Manager rocks!
Gareth Saunders
 
PPT
Using a CSS Framework
Gareth Saunders
 
PPTX
SharePoint Intranet Governance Sample Outline - www.sharepointpmp.com
Rich Blank
 
PPT
SharePoint - Intranet CMS?
Gareth Saunders
 
PPTX
Trello - University of St Andrews web team
Gareth Saunders
 
PPT
Struts2 course chapter 2: installation and configuration
JavaEE Trainers
 
PPT
RESTFul IDEAS
Joel Amoussou
 
PPT
Grddl In A Nutshell V1
Fabien Gandon
 
Site Manager rocks!
Gareth Saunders
 
Using a CSS Framework
Gareth Saunders
 
SharePoint Intranet Governance Sample Outline - www.sharepointpmp.com
Rich Blank
 
SharePoint - Intranet CMS?
Gareth Saunders
 
Trello - University of St Andrews web team
Gareth Saunders
 
Struts2 course chapter 2: installation and configuration
JavaEE Trainers
 
RESTFul IDEAS
Joel Amoussou
 
Grddl In A Nutshell V1
Fabien Gandon
 

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

PDF
Monitoring your electricity usage
Dale Lane
 
ODP
Alfresco Tech Talk - CMIS
Shane Johnson
 
ZIP
GTAC: AtomPub, testing your server implementation
David Calavera
 
PPS
Local seo
luckyboost
 
PPT
Local seo
tens
 
PDF
Lca2009 Video A11y
guesta3d158
 
PPT
HTML5 Overview
reybango
 
PPT
CurrentCost
Dale Lane
 
PDF
Developing for iPhone
Tim Lucas
 
ODP
HTML5: 5 Quick Wins
Jeff Leombruno
 
PPT
Ajax ons2
Chad Davis
 
PPT
Rss Godort2008
jajacobs
 
PPTX
Using Forms in Share
Alfresco Software
 
KEY
HTML5 - techMaine Presentation 5/18/09
pemaquid
 
PPT
Data Portability - Fronteers Meetup
Andreas - Creten
 
PPT
Lecture1 B Frames&Forms
Sur College of Applied Sciences
 
PPTX
Social Media Release Xml
Ecordia
 
PPS
Quick Referance to WML
Nitin Saswade
 
DOCX
Doctype htmlcodigioooooo
ANDERSON FABIAN
 
PPTX
DevDays09 Internet Explorer 8
Konstantinos Pantos
 
Monitoring your electricity usage
Dale Lane
 
Alfresco Tech Talk - CMIS
Shane Johnson
 
GTAC: AtomPub, testing your server implementation
David Calavera
 
Local seo
luckyboost
 
Local seo
tens
 
Lca2009 Video A11y
guesta3d158
 
HTML5 Overview
reybango
 
CurrentCost
Dale Lane
 
Developing for iPhone
Tim Lucas
 
HTML5: 5 Quick Wins
Jeff Leombruno
 
Ajax ons2
Chad Davis
 
Rss Godort2008
jajacobs
 
Using Forms in Share
Alfresco Software
 
HTML5 - techMaine Presentation 5/18/09
pemaquid
 
Data Portability - Fronteers Meetup
Andreas - Creten
 
Lecture1 B Frames&Forms
Sur College of Applied Sciences
 
Social Media Release Xml
Ecordia
 
Quick Referance to WML
Nitin Saswade
 
Doctype htmlcodigioooooo
ANDERSON FABIAN
 
DevDays09 Internet Explorer 8
Konstantinos Pantos
 
Ad

Recently uploaded (20)

PDF
Assigned Numbers - 2025 - Bluetooth® Document
Bloombase
 
PDF
A contest of sentiment analysis: k-nearest neighbor versus neural network
IAESIJAI
 
PDF
Video forgery: An extensive analysis of inter-and intra-frame manipulation al...
IAESIJAI
 
PDF
ENT215_Completing-a-large-scale-migration-and-modernization-with-AWS.pdf
ssuser28425f
 
PDF
Univ-Connecticut-ChatGPT-Presentaion.pdf
ry7r52mzb4
 
PPTX
O2C Customer Invoices to Receipt V15A.pptx
ssuserbfa915
 
PDF
NewMind AI Weekly Chronicles – August ’25 Week III
NewMind AI
 
PPTX
observCloud-Native Containerability and monitoring.pptx
anupsingh76937
 
PDF
Transform Your ITIL® 4 & ITSM Strategy with AI in 2025.pdf
PDCA Consulting
 
PDF
DASA ADMISSION 2024_FirstRound_FirstRank_LastRank.pdf
rameswartudu05
 
PDF
WOOl fibre morphology and structure.pdf for textiles
Rajendrakumar868651
 
PDF
Getting Started with Data Integration: FME Form 101
Safe Software
 
PDF
Hybrid horned lizard optimization algorithm-aquila optimizer for DC motor
IAESIJAI
 
PDF
A Late Bloomer's Guide to GenAI: Ethics, Bias, and Effective Prompting - Boha...
Mindy Bohannon
 
PDF
Microsoft Solutions Partner Drive Digital Transformation with D365.pdf
Microsoft Dynamics
 
PDF
A comparative study of natural language inference in Swahili using monolingua...
IAESIJAI
 
PDF
A novel scalable deep ensemble learning framework for big data classification...
IAESIJAI
 
PDF
Hybrid model detection and classification of lung cancer
IAESIJAI
 
PDF
From MVP to Full-Scale Product A Startup’s Software Journey.pdf
KodekX
 
PDF
Getting started with AI Agents and Multi-Agent Systems
Maxim Salnikov
 
Assigned Numbers - 2025 - Bluetooth® Document
Bloombase
 
A contest of sentiment analysis: k-nearest neighbor versus neural network
IAESIJAI
 
Video forgery: An extensive analysis of inter-and intra-frame manipulation al...
IAESIJAI
 
ENT215_Completing-a-large-scale-migration-and-modernization-with-AWS.pdf
ssuser28425f
 
Univ-Connecticut-ChatGPT-Presentaion.pdf
ry7r52mzb4
 
O2C Customer Invoices to Receipt V15A.pptx
ssuserbfa915
 
NewMind AI Weekly Chronicles – August ’25 Week III
NewMind AI
 
observCloud-Native Containerability and monitoring.pptx
anupsingh76937
 
Transform Your ITIL® 4 & ITSM Strategy with AI in 2025.pdf
PDCA Consulting
 
DASA ADMISSION 2024_FirstRound_FirstRank_LastRank.pdf
rameswartudu05
 
WOOl fibre morphology and structure.pdf for textiles
Rajendrakumar868651
 
Getting Started with Data Integration: FME Form 101
Safe Software
 
Hybrid horned lizard optimization algorithm-aquila optimizer for DC motor
IAESIJAI
 
A Late Bloomer's Guide to GenAI: Ethics, Bias, and Effective Prompting - Boha...
Mindy Bohannon
 
Microsoft Solutions Partner Drive Digital Transformation with D365.pdf
Microsoft Dynamics
 
A comparative study of natural language inference in Swahili using monolingua...
IAESIJAI
 
A novel scalable deep ensemble learning framework for big data classification...
IAESIJAI
 
Hybrid model detection and classification of lung cancer
IAESIJAI
 
From MVP to Full-Scale Product A Startup’s Software Journey.pdf
KodekX
 
Getting started with AI Agents and Multi-Agent Systems
Maxim Salnikov
 
Ad

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

  • 1. 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
  • 2. This brief slideshow shows three of the &quot;ten -ish five-minute ways to improve your website&quot;, 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
  • 4. Microformats are … an approach to adding richer semantics to HTML-based mark-up “
  • 5. HTML is structured and semantic … <h1> Heading 1 <ul> Unordered List <address> Address
  • 6. … 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>
  • 7. 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
  • 8. Microformats: Solving problems Solution to hAtom Syndicated content hResume CV hReview Reviews geo & adr Location XFN Relationships hCalendar Events hCard Contact information
  • 10. hCard: The problem it addresses Bob Colleagues Contact details
  • 11. hCard: The problem it addresses Bob Text Colleagues
  • 12. hCard: The problem it addresses Bob vCard format Colleagues
  • 13. 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
  • 14. 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>
  • 15. 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>
  • 16. 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>
  • 17. 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>
  • 18. Microformats: Example
  • 19. Operator add-on for Firefox
  • 20. Operator add-on for Firefox
  • 22. hCalendar: The problem it addresses Bob Colleagues Event details
  • 23. hCard: The problem it addresses Bob iCalendar format Colleagues
  • 24. 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
  • 25. 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>
  • 26. Microformat resources http://microformats.org Source of all things Microformat http://microformats.org/wiki.cheatsheets Microformat cheat sheet
  • 27. 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
  • 28. 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
  • 29.  
  • 30. 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
  • 32. Allows users to search from the browser
  • 33. Custom searches in Firefox and IE7
  • 36. How to create an OpenSearch plugin 1. Create XML file 2. Link to HTML document
  • 37. 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>
  • 38. 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>
  • 39. Create a TEST search 1. Type TEST into your search box, and hit Search 2. Select and copy the generated search query
  • 40. 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
  • 41. 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>
  • 42. 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>
  • 43. Optional tags <AdultContent> <Attribution> <Contact> <Developer> <Image> <InputEncoding> <Language> <LongName> <OutputEncoding> <Query> <SearchForm> <SyndicationRight> <Tags>
  • 44. Optional tags <AdultContent> <Attribution> <Contact> <Developer> <Image> <InputEncoding> <Language> <LongName> <OutputEncoding> <Query> <SearchForm> <SyndicationRight> <Tags>
  • 45. <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>
  • 46. 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>
  • 47. How to create an OpenSearch plugin 1. Create XML file 2. Link to HTML document
  • 48. 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; />
  • 49. 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; />
  • 50. 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; />
  • 51. 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; />
  • 53. If it doesn't work … !
  • 54. 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
  • 55. 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
  • 56. 6. Search hint text (using jQuery)
  • 58. Hint text would be useful
  • 60. http://plugins.jquery.com/project/hint Step 2: Download &quot;Input Hints&quot; plugin
  • 61. 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
  • 62. 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>
  • 63. 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>
  • 64. 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>
  • 65. 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; />
  • 66. … er, that's it! Step 7: Finished
  • 67. 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
  • 68. 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