SlideShare a Scribd company logo
Build resources well—SCAMORE 3/8
  for lots of good reasons...




photo: ©GM 2010
Priority issues
 Session 3/8
Poor websites cost UK councils around £11m a
month
Janine Milne, 8 January 2010
     ‣ Shoddy websites could be costing UK councils £11m a month, according to the
         Society of IT Managers (Socitim).
     ‣   Faced with badly designed or poorly constructed sites, people are choosing to either
         call their council or visit a council contact centre, both far more costly channels.
     ‣   Only 21% of the 7.3m unique visitors to the 120 council websites found part of the
         information they were looking for.
     ‣   On average, a fifth of site visitors couldn't find the information they needed. That
         equates to 4.4 million failures in dealing with online enquiries across all local
         authorities. As each call to a council is estimated to cost roughly £2.50 to handle,
         local authorities could be haemorrhaging up to £11m each month.
     ‣   Despite these serious misgivings about the web, it was the most popular way for
         citizens to contact their local authority, preferred by 70% of the customers. But it
         was also exposed to be the least satisfactory channel, with 42% of visitors rating its
         service as poor, compared to 21% of face-to-face meetings and 2% of phone calls.




 http://www.cbronline.com/news/poor_websites_cost_uk_councils_11m_a_month_281009
Knowing your audience




Establishing desirable target audience
Determine your audience profile
    ‣ Demographics—age, gender, location, income
    ‣ What particular interests, influences, beliefs
    ‣ What media will they be using (desktop, mobile, home, work)
How many are there
    ‣ Any relevant behavioural trends
    ‣ Clarify how to deliver value to your audience
    ‣ What do you want to achieve when users visit
    ‣ What is your goal or "conversion" metric
    ‣ How will you measure this
Practical exercise—identifying and understanding audiences




This exercise should be done as individuals, not in a group

Identify your web site audiences
     ‣ how many do you have?

Prioritise each in terms of how important it is
to communicate with them
     ‣ the time and energy you commit to each should be influenced by their relative
        importance—is this the case?

What is purpose of communication to each
     ‣ is it to raise awareness, influence visitors, or something else?

Compare your audiences and purposes
     ‣ are your priorities and purposes the same for each audience?
Practical exercise—identifying and understanding audiences



Audience          Priority                 Purpose
Practical exercise—identifying and understanding audiences




Select one of your audiences and consider the
following
   ‣   what sort of people make up this audience?
   ‣   what is their understanding of the service you provide?
   ‣   what does their working day consist of?
   ‣   how much detail do they need from your web site?
   ‣   what do they care about most?
   ‣   what language style would be most suitable for them?
Practical exercise—understanding a single audience



           Audience


 The sort of people
    making up this
          audience

   This audience’s
  understanding of
      your service

Typical working day
   for this audience


 Detail required by
     this audience


      This audience
           priorities


       Most suitable
     language style
structure is so important




photo: ©GM 2010
Structure




Structure underpins everything
Define specific parts of a web page using HTML
     ‣ content is structured with HTML
     ‣ HTML “tags” define parts of a web page
     ‣ <h1>heading</h1> <h2>subheading</h2> <p>paragraph</p>
     ‣ indicates relationship between parts of a web page and relative importances
     ‣ enables search engines to better assess content in a web page
     ‣ therefore a better match of content to search queries
     ‣ and content more likely to reach intended audience
Associate presentation style with parts of web page using CSS
    ‣ web browser displays web page using associated styles
    ‣ easy maintenance of look and feel
    ‣ dynamic change of look and feel possible (depending on user details, mode of
         access etc.)

Introduce functionality using Javascript
     ‣ leave structure intact
     ‣ to enhance UX
Structure—the power of stylesheets (CSS)




        http://www.csszengarden.com/
Structure—better standards




HTML5
  ‣ HTML5 introduces new elements and attributes for semantic replacements of
      generic <div> and <span> elements, e.g. <nav> (navigation block) and <footer>.
  ‣   Other elements bring convenience with a standardised interface for rich content,
      e.g. <audio> and <video>.
  ‣   Some elements from HTML 4 have been dropped, including presentational elements
      such as <font> and <center>, where effects are achieved with CSS. There is also a
      renewed emphasis on the importance of DOM scripting.

CSS3
  ‣ 2D and 3D transformations and transitions etc.




      http://www.w3.org/TR/html5/   http://www.w3.org/Style/CSS/current-work
Structure—implementation of standards




HTML5 and CSS3
 Eric Meyer, "A more tangled web", Belfast Build conference, November
 2009 (summary by Charlie Neely, FRONT)
      ‣ The web's relative simplicity has made it so successful. Basic web tools, HTML, CSS
           and Javascript, have all found their way into many products and services we use
           today.
       ‣   However HTML5 wont be fully implemented until an estimated 2022 and CSS3 is
           likely to be in development far beyond that.
       ‣   But this doesn't stop us from using elements of it already. Developers are
           ingeniously using Javascript to emulate methods and functions of HTML5 and CSS3,
           for example, Alexis Deveria created a jQuery plug-in which provides support for
           CSS3 Template Layout Module.




http://vimeo.com/7863592    http://a.deveria.com/?p=236   http://en.wikipedia.org/wiki/JQuery
Using new technologies with Internet Explorer




Google Chrome Frame
  ‣ an open source plug-in that seamlessly brings Google Chrome's open web
      technologies and speedy JavaScript engine to Internet Explorer
  ‣   start using open web technologies right away, even technologies that aren't yet
      supported in Internet Explorer 6, 7, or 8
  ‣   take advantage of JavaScript performance improvements to make your apps faster
      and more responsive
  ‣   add a single tag to your pages and detect whether your users have installed Google
      Chrome Frame
  ‣   if not installed, you can direct your users to an installation page
  ‣   if installed, it detects the tag you added and works automatically




                   http://code.google.com/chrome/chromeframe/
Structure—standards, video and audio with HTML5 on all browsers




HTML5 video and audio for everyone
Google, March 2010

HTML5 video and audio tags make embedding media into documents as easy as embedding
an image. All it takes is a single <video> or <audio> tag. Unfortunately, not all browsers
natively support these HTML5 tags.
To enable HTML5 video and audio tags in all major browsers, simply paste the following code
into the <head> of your document:
      <script src="http://html5media.googlecode.com/svn/trunk/src/
      html5media.min.js"></script>
This will allow you to embed video and audio into your document using the following easy
syntax:
      <video src="video.mp4" width="320" height="240" controls preload></video>
      <audio src="audio.mp3" controls preload></audio>




                           http://code.google.com/p/html5media/
HTML5 example


<!DOCTYPE html>
<html>
<head>
<title>Demo site for showcasing videos stored elsewhere</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="For demonstration purposes only, HTML5 video and audio and more...">
<meta name="keywords" content="demo, HTML5, CSS3, video tag, audio tag">
</head>

<body>
<section id="home">
<header>
<h1>A few sample videos and audio</h1>
<h2>Nothing too serious!</h2>
<nav>
<a href="#iphone-mp4">An mp4 file on the wonders of iPhone marked up just using &lt;video&gt; tag</a>
	      <a href="#sagan-utube">An embedded youtube video of scientific slant</a>
	      <a href="#meyer-vimeo">An embedded vimeo video of a conference talk by Eric Meyer</a>
	      <a href="#bmw-videojug">An embedded videojug video about the world's best motorcycles</a>
	      <a href="#walkonthewild-utube">Another embedded youtube video that I coundn't resist</a>
	      <a href="#drivebytruckers-mp3">Some good music marked up just using &lt;audio&gt; tag</a>
</nav>
</header>

<article id="iphone-mp4">
<p>A few of the not so obvious reasons for having an iPhone</p>
<figure><video src="iphone-magic.mp4" width="478" height="270" controls></video></figure>
</article>

<article id="drivebytruckers-mp3">
<p>And some good old Drive-By Truckers music</p>
<figure><img src="truckers.jpg" alt="Drive-By Truckers group members" /><br />
<audio src="gravity.m4a" controls></audio></figure>
</article>

<footer>
<p>Copyright 2010 SCAMORE</p>
</footer>

</section>
</body>
</html>
HTML5 example

                                                                                                         HTML document

<!DOCTYPE html>
<html>
<head>
<title>Demo site for showcasing videos stored elsewhere</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="For demonstration purposes only, HTML5 video and audio and more...">
<meta name="keywords" content="demo, HTML5, CSS3, video tag, audio tag">
</head>

<body>
<section id="home">
<header>
<h1>A few sample videos and audio</h1>
<h2>Nothing too serious!</h2>
<nav>
<a href="#iphone-mp4">An mp4 file on the wonders of iPhone marked up just using &lt;video&gt; tag</a>
	      <a href="#sagan-utube">An embedded youtube video of scientific slant</a>
	      <a href="#meyer-vimeo">An embedded vimeo video of a conference talk by Eric Meyer</a>
	      <a href="#bmw-videojug">An embedded videojug video about the world's best motorcycles</a>
	      <a href="#walkonthewild-utube">Another embedded youtube video that I coundn't resist</a>
	      <a href="#drivebytruckers-mp3">Some good music marked up just using &lt;audio&gt; tag</a>
</nav>
</header>

<article id="iphone-mp4">
<p>A few of the not so obvious reasons for having an iPhone</p>
<figure><video src="iphone-magic.mp4" width="478" height="270" controls></video></figure>
</article>

<article id="drivebytruckers-mp3">
<p>And some good old Drive-By Truckers music</p>
<figure><img src="truckers.jpg" alt="Drive-By Truckers group members" /><br />
<audio src="gravity.m4a" controls></audio></figure>
</article>

<footer>
<p>Copyright 2010 SCAMORE</p>
</footer>

</section>
</body>
</html>
HTML5 example

                                                                                                         HTML document

<!DOCTYPE html>
<html>                                                                                                        document head
<head>
<title>Demo site for showcasing videos stored elsewhere</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="For demonstration purposes only, HTML5 video and audio and more...">
<meta name="keywords" content="demo, HTML5, CSS3, video tag, audio tag">
</head>
                                                                                                              document body
<body>
<section id="home">
<header>
<h1>A few sample videos and audio</h1>
<h2>Nothing too serious!</h2>
<nav>
<a href="#iphone-mp4">An mp4 file on the wonders of iPhone marked up just using &lt;video&gt; tag</a>
	      <a href="#sagan-utube">An embedded youtube video of scientific slant</a>
	      <a href="#meyer-vimeo">An embedded vimeo video of a conference talk by Eric Meyer</a>
	      <a href="#bmw-videojug">An embedded videojug video about the world's best motorcycles</a>
	      <a href="#walkonthewild-utube">Another embedded youtube video that I coundn't resist</a>
	      <a href="#drivebytruckers-mp3">Some good music marked up just using &lt;audio&gt; tag</a>
</nav>
</header>

<article id="iphone-mp4">
<p>A few of the not so obvious reasons for having an iPhone</p>
<figure><video src="iphone-magic.mp4" width="478" height="270" controls></video></figure>
</article>

<article id="drivebytruckers-mp3">
<p>And some good old Drive-By Truckers music</p>
<figure><img src="truckers.jpg" alt="Drive-By Truckers group members" /><br />
<audio src="gravity.m4a" controls></audio></figure>
</article>

<footer>
<p>Copyright 2010 SCAMORE</p>
</footer>

</section>
</body>
</html>
HTML5 example

                                                                                                         HTML document

<!DOCTYPE html>
<html>                                                                                                        document head
<head>
<title>Demo site for showcasing videos stored elsewhere</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="For demonstration purposes only, HTML5 video and audio and more...">
<meta name="keywords" content="demo, HTML5, CSS3, video tag, audio tag">
</head>
                                                                                                              document body
<body>
<section id="home">                                                                                               section
<header>
<h1>A few sample videos and audio</h1>
<h2>Nothing too serious!</h2>
<nav>
<a href="#iphone-mp4">An mp4 file on the wonders of iPhone marked up just using &lt;video&gt; tag</a>
	      <a href="#sagan-utube">An embedded youtube video of scientific slant</a>
	      <a href="#meyer-vimeo">An embedded vimeo video of a conference talk by Eric Meyer</a>
	      <a href="#bmw-videojug">An embedded videojug video about the world's best motorcycles</a>
	      <a href="#walkonthewild-utube">Another embedded youtube video that I coundn't resist</a>
	      <a href="#drivebytruckers-mp3">Some good music marked up just using &lt;audio&gt; tag</a>
</nav>
</header>

<article id="iphone-mp4">
<p>A few of the not so obvious reasons for having an iPhone</p>
<figure><video src="iphone-magic.mp4" width="478" height="270" controls></video></figure>
</article>

<article id="drivebytruckers-mp3">
<p>And some good old Drive-By Truckers music</p>
<figure><img src="truckers.jpg" alt="Drive-By Truckers group members" /><br />
<audio src="gravity.m4a" controls></audio></figure>
</article>

<footer>
<p>Copyright 2010 SCAMORE</p>
</footer>

</section>
</body>
</html>
HTML5 example

                                                                                                         HTML document

<!DOCTYPE html>
<html>                                                                                                        document head
<head>
<title>Demo site for showcasing videos stored elsewhere</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="For demonstration purposes only, HTML5 video and audio and more...">
<meta name="keywords" content="demo, HTML5, CSS3, video tag, audio tag">
</head>
                                                                                                              document body
<body>
<section id="home">                                                                                               section
<header>
<h1>A few sample videos and audio</h1>                                                                               header
<h2>Nothing too serious!</h2>
<nav>
<a href="#iphone-mp4">An mp4 file on the wonders of iPhone marked up just using &lt;video&gt; tag</a>
	      <a href="#sagan-utube">An embedded youtube video of scientific slant</a>
	      <a href="#meyer-vimeo">An embedded vimeo video of a conference talk by Eric Meyer</a>
	      <a href="#bmw-videojug">An embedded videojug video about the world's best motorcycles</a>
	      <a href="#walkonthewild-utube">Another embedded youtube video that I coundn't resist</a>
	      <a href="#drivebytruckers-mp3">Some good music marked up just using &lt;audio&gt; tag</a>
</nav>
</header>

<article id="iphone-mp4">
<p>A few of the not so obvious reasons for having an iPhone</p>
                                                                                                                     article
<figure><video src="iphone-magic.mp4" width="478" height="270" controls></video></figure>
</article>

<article id="drivebytruckers-mp3">
<p>And some good old Drive-By Truckers music</p>
<figure><img src="truckers.jpg" alt="Drive-By Truckers group members" /><br />
<audio src="gravity.m4a" controls></audio></figure>
</article>

<footer>
<p>Copyright 2010 SCAMORE</p>
</footer>                                                                                                            footer
</section>
</body>
</html>
HTML5 example

                                                                                                         HTML document

<!DOCTYPE html>
<html>                                                                                                        document head
<head>
<title>Demo site for showcasing videos stored elsewhere</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="For demonstration purposes only, HTML5 video and audio and more...">
<meta name="keywords" content="demo, HTML5, CSS3, video tag, audio tag">
</head>
                                                                                                              document body
<body>
<section id="home">                                                                                               section
<header>
<h1>A few sample videos and audio</h1>                                                                               header
<h2>Nothing too serious!</h2>
<nav>                                                                                                                    navigation block
<a href="#iphone-mp4">An mp4 file on the wonders of iPhone marked up just using &lt;video&gt; tag</a>
	      <a href="#sagan-utube">An embedded youtube video of scientific slant</a>
	      <a href="#meyer-vimeo">An embedded vimeo video of a conference talk by Eric Meyer</a>
	      <a href="#bmw-videojug">An embedded videojug video about the world's best motorcycles</a>
	      <a href="#walkonthewild-utube">Another embedded youtube video that I coundn't resist</a>
	      <a href="#drivebytruckers-mp3">Some good music marked up just using &lt;audio&gt; tag</a>
</nav>
</header>

<article id="iphone-mp4">
<p>A few of the not so obvious reasons for having an iPhone</p>
                                                                                                                     article
<figure><video src="iphone-magic.mp4" width="478" height="270" controls></video></figure>
</article>

<article id="drivebytruckers-mp3">
<p>And some good old Drive-By Truckers music</p>
<figure><img src="truckers.jpg" alt="Drive-By Truckers group members" /><br />
<audio src="gravity.m4a" controls></audio></figure>
</article>

<footer>
<p>Copyright 2010 SCAMORE</p>
</footer>                                                                                                            footer
</section>
</body>
</html>
HTML5 support




              HTML5 and web
              standards
              Apple web site

              Every new Apple mobile device and every
              new Mac—along with the latest version of
              Apple’s Safari web browser—supports web
              standards including HTML5, CSS3, and
              JavaScript. These web standards are open,
              reliable, highly secure, and efficient. They
              allow web designers and developers to create
              advanced graphics, typography, animations,
              and transitions. Standards aren’t add-ons to
              the web. They are the web. And you can start
              using them today.




http://www.apple.com/html5/
HTML5 apps




Making an iPad HTML5 app
and making it really fast
Thomas Fuchs, 4 June 2010

About a month ago or so, Amy and I release a little
(literally, it’s about 5k) HTML5 iPad App for looking up
time zones. I don’t mean select-box wasteland like all
other time zone sites (who likes select boxes
anyway?!), I mean a nicely polished, touch-enabled
UI that works offline, too.
The site uses no images, no JavaScript frameworks,
and no external CSS, and fits quite comfortably in a
few k’s of gzipped HTML.




      http://mir.aculo.us/2010/06/04/making-an-ipad-html5-app-making-it-really-fast/
HTML5 and Flash




Is HTML5 ready to take
over multimedia content on
the web?
Hanna Miettinen, New Media Monthly, 22 July 2010

“Flash is a multimedia production system; HTML5 is a
web authoring language”.
“Flash can produce impressive multimedia effects on
screen to impress (or perhaps entertain) the viewer;
HTML5 can produce well structured web documents that
can communicate well structured content and
associated metadata to the viewer and software
agents.”




                                   http://bit.ly/ds7c1Y
HTML5 and RDFa


HTML5 + RDFa = time to
get rid of that 20th
century furniture
Laura Scott, pingv.com, 23 August 2010

With new language comes new ways of thinking

By clarifying specifics — especially in error handling
— HTML5 stands to open the doors for much more
efficient and effective JavaScript, heralding a new era
for robust interactivity with dynamic interfaces and
rich user experiences that would be too heavy and
difficult, or impossible, to implement in xhtml or
HTML4...
Hopefully we'll also have learned the lessons taught
by the untold numbers of Flash website designers,
who gave us splash pages, annoying, gratuitous
motion effects (with obnoxious sound effects), and
user interfaces more focused on dazzling the user
with the creator's cleverness rather than on serving
the user with an interface that serves the user's
needs. Here's hoping that HTML5 does not bring us
into a new age of craptastic blinky poppy wooshy
buzzy design.


      http://pingv.com/blog/html5-rdfa-time-to-get-rid-of-that-20th-century-furniture
CSS3




Google goes bubbly—interactive logo on the
UK homepage
Christian Heilmann’s blog, 7 September 2010

This is another example how Google are happy to play with their brand to show off some cool
new browser technology. This is meant to show off what you can do with JavaScript and
HTML5 and how smooth it can look.
Uses CSS3 to create the round bubbles...




                                   http://bit.ly/cSioNW
Examples, tutorials, ideas




 http://www.html5rocks.com/
HTML5 reference




HTML5 W3C working draft
19 October 2010, editor Ian Hickson (Google Inc.)
    ‣ Common infrastructure
    ‣ Semantics, structure, and APIs of HTML documents
    ‣ The elements of HTML
    ‣ Loading Web pages
    ‣ Web application APIs
    ‣ User interaction
    ‣ The HTML syntax
    ‣ The XHTML syntax
    ‣ There are also some appendices, defining rendering rules for Web browsers and
         listing obsolete features and IANA considerations.

An extremely comprehensive document describing all aspects of the standard.




                               http://www.w3.org/TR/html5/
CSS3 reference




CSS3 is a series of modular
specifications
October 2010, over 50 separate areas of work...




                  http://www.w3.org/Style/CSS/current-work
Structure—setting up RSS feed


<?xml version="1.0" ?>
<rss version="0.91">
<channel>
   <title>Web Designer Help</title>
   <link>http://www.webdesignerhelp.co.uk</link>
   <description>Latest Tutorials/Articles</description>
   <language>en-us</language>
   <copyright>Copyright 2008-2009 WebDesignerHelp</copyright>
   <lastBuildDate>Tue, 6 Jan 2009</lastBuildDate>

<image>
   <title>Web Designer Help</title>
   <url>http://www.webdesignerhelp.co.uk/images/rss.gif</url>
   <link>http://www.webdesignerhelp.co.uk</link>
</image>

<item>
   <title>Setup an RSS Feed</title>
   <description>A basic tutorial on how to setup an RSS feed</description>
   <link>http://www.webdesignerhelp.co.uk/how-to-setup-an-rss-feed.html</link>
   <author>thomas@thomashardy.me.uk</author>
   <pubDate>Tue, 6 Jan 2009</pubDate>
</item>

</channel>
</rss>



     http://www.webdesignerhelp.co.uk/index.php/2009/01/how-to-setup-a-rss-feed/
Structure—setting up RSS feed


<?xml version="1.0" ?>
<rss version="0.91">
<channel>
   <title>Web Designer Help</title>
   <link>http://www.webdesignerhelp.co.uk</link>
   <description>Latest Tutorials/Articles</description>
   <language>en-us</language>
   <copyright>Copyright 2008-2009 WebDesignerHelp</copyright>
   <lastBuildDate>Tue, 6 Jan 2009</lastBuildDate>

<image>
   <title>Web Designer Help</title>
   <url>http://www.webdesignerhelp.co.uk/images/rss.gif</url>
   <link>http://www.webdesignerhelp.co.uk</link>
</image>

<item>
   <title>Setup an RSS Feed</title>
   <description>A basic tutorial on how to setup an RSS feed</description>
   <link>http://www.webdesignerhelp.co.uk/how-to-setup-an-rss-feed.html</link>
   <author>thomas@thomashardy.me.uk</author>
   <pubDate>Tue, 6 Jan 2009</pubDate>
</item>

</channel>
</rss>



     http://www.webdesignerhelp.co.uk/index.php/2009/01/how-to-setup-a-rss-feed/
Structure—RSS feeds




RSS feed aggregators are very useful for
keeping up with news from many sources
Google reader probably most popular
    ‣ content from lots of sites syndicated in one place
Lots of iPhone and other mobile apps serve same purpose
     ‣ very convenient to use
Make sure visitors know if you have RSS feed
    ‣ include RSS icon in address bar (e.g. at http://bit.ly/9hf917)
    ‣ add single line in HTML document head
         <link rel="alternate" title="This news feed" href="address"
         type="application/rss+xml" />




                              http://www.google.com/reader/
Accessibility




UK Central Office of Information
Usability toolkit, January 2009
To help Web editors and Web content developers incorporate the basics of usability across all
public sector websites.
       ‣ Page Layout
       ‣ Navigation
       ‣ Writing Content
       ‣ Content Elements
       ‣ Forms
       ‣ Search
       ‣ QA & Standards
       ‣ Common Pages
Please note: If you are developing content for Directgov, Businesslink.gov.uk or NHS Choices
please refer to your internal guidelines in the first instance, they include the guidance in this
toolkit.




                                   http://usability.coi.gov.uk/
Accessibility




UK Central Office of Information
Browser testing guidelines, January 2009
The Government aims to provide a consistent high quality experience for users across all of
its online services. There are a large number of different browsers on the market and to test
your website with all of them would be impractical and inefficient. However, if you build your
website to comply fully with standards, this effort will be significantly reduced and you may
only need to test your website with a few browsers.
The objective of this guidance is to ensure that you website works on as many platforms and
devices as possible. An effective way to do this is to:
      ‣ code to standards
      ‣ test with browsers
This guidance is for public sector website managers, developers and testers.




                       http://www.coi.gov.uk/guidance.php?page=213
Integrity—“tools” of the trade




Google Analytics
    ‣ http://www.google.com/analytics/support.html
    ‣ http://www.google.com/support/conversionuniversity
Checking word maps
    ‣ http://www.wordle.net/
Identify suitable keywords and see popularity
     ‣ https://adwords.google.com/select/KeywordToolExternal
Compare keyword phrases and see trends over time and per country
   ‣ http://www.google.com/trends
Make sure all links are working
    ‣ http://validator.w3.org/checklink
Introduction to Google's web site optimiser
     ‣ http://www.google.com/websiteoptimizer/tour.html
Metadata




Metadata is key
   ‣ data about data
   ‣ many and varied versions of metadata
   ‣ add background information, put things in context, add value, make much more
       useful by showing relevance
   ‣   different levels of metadata—may need pointer to further information to fully
       explain a piece of metadata or describe how to interpret
   ‣   enable ways of classifying, connecting, rating, structuring, promoting, that wouldn't
       be possible otherwise—especially if a common "vocabulary" for the metadata terms
       is used
HTML5 and RDFa



HTML5 + RDFa = time to
get rid of that 20th
century furniture
Laura Scott, pingv.com, 23 August 2010

Robots speaking in complete sentences

That's the net effect of RDFa. You see, currently
hyperlinks, to robots, are analogous mystery meat
navigation. To the human reader, the nature and
location of a hyperlink may make total sense in
context — even the mouse-over reveal of the
hyperlink URL can yield meaning to us cerebral
bipeds. But all a plain hyperlink says to a robot is
"follow me." The robot doesn't know who made the
link (or the destination site), what the destination is,
why the link is there — just where the link is going,
and that only by its URL.
RDFa changes that by providing syntax, often
abbreviated and/or abetted by libraries such as
Dublin Core, to add meaning to the link...




       http://pingv.com/blog/html5-rdfa-time-to-get-rid-of-that-20th-century-furniture
Richer semantics—improved information discovery and retrieval




RDFa and SEO
webBackplane, Mark Birbeck on December 16 2009

Vertical search engines
RDFa will allow the search giants to offer partitioned search engines, aimed at particular
audiences.
There are many search engines already available, for specialist areas, but most of them tend
to be out of date, or missing information altogether.
The major search engines are often crawling these sites already, but page ranking algorithms
will hide them away in the 1000th page of search results. By adding targeted mark-up to
web-pages it becomes easier for search engines to differentiate the subject-matter of the
pages, and so offer specialised views on their data.




             http://webbackplane.com/mark-birbeck/blog/2009/12/rdfa-and-seo
Richer semantics—improved information discovery and retrieval




RDFa and SEO
webBackplane, Mark Birbeck on December 16 2009

Improved search accuracy
This is beneficial for the users of search engines, in that it can help them to find the
information they want, faster. But it's also significant for site creators and SEO practitioners,
because it means that sites are increasingly found in the right place.
An increasing part of SEO is writing relevant articles that relate to products and services.
Since search engines are increasingly clever enough to differentiate between a bunch of
keywords dumped into a page, and an article with real content, a virtuous circle is created,
rewarding 'proper' articles with improved rankings.
RDFa can help—it allows authors to make pages unambiguous.




             http://webbackplane.com/mark-birbeck/blog/2009/12/rdfa-and-seo
Richer semantics—improved information discovery and retrieval




RDFa and SEO
webBackplane, Mark Birbeck on December 16 2009

Improving display of results
This is the area that has probably seen most discussion recently, in the context of Yahoo!'s
enhanced results, and Google's rich snippets… Benefits to the search engine of doing this, are
that users can get more done, on their site, making them more likely to return. The benefits
for the companies are improved click-through.
For many, click-through is more important than ranking. Some SEO experts say that if adding
RDFa to a site gave an increase in click-through of only a couple of %, sites would see that as
worth it—yet as Peter Mika said in Year of the Monkey: Lessons from the first year of
SearchMonkey, adding RDFa or Microformats to a page gives significantly better click-through
than a mere few %.




             http://webbackplane.com/mark-birbeck/blog/2009/12/rdfa-and-seo
Social media—where do web site visitors really come from?


Search and Rescue: how to become findable
and shareable in social media
Brian Solis, Search Engine Watch, 1 April 2010




                          http://searchenginewatch.com/3639969
Social media




Business purposes of social networking sites
   ‣ Establish pointers to web site by attracting initial audience attention and developing
       a relationship.
   ‣   Create brand. Very important—web site visitors often only seeking confirmation
       after having made an initial decision to use a product or service following research
       on social networking sites.
   ‣   Peer reviews—very influential.
   ‣   Marketing!
Social media—online reputation




    Is online reputation management the new
    Search Engine Optimisation?
    Niall McKeown, Niall's Online Marketing Blog, 9 December 2009

    There is a strong argument that being #1 in the natural search engine results in Google for
    some industries is no longer what it used to be. I'm not arguing that search is irrelevant or
    that a site should not be built optimised for search engines, my argument is that the
    customer and how they purchase has little to do with being top of Google. Rather, it is how
    you are represented in terms of your online reputation. My argument is that online reputation
    management is fast becoming more important than search engine optimisation in service
    based industries. Better still, get your ORM right and the SEO takes care of itself.




http://blog.ionom.com/2009/12/is-online-reputation-management-the-new-search-engine-optimisation/
Making an impression




New internet revenue models
February 24th, 2010 by Niall McKeown

... In Lee’s spare time he has constructed a website called lookaly.com, a Northern Ireland
centric ‘rate your experience’ website. It’s similar to TripAdvisor but region specific, not
industry specific. The site facilitates user contributed content and allows customers of
businesses to rate their experience. The businesses that are lucky enough to be rated can use
the site to get honest and hard truths about their business and engage with customers that
were moved enough to post a comment.
At a recent conference Lee was asked, “How do you intend to monetise the site?”. Lee paused
for a moment and looked mildly puzzled, almost as if he didn’t understand the question. His
response was “I am not a business man, I built lookaly.com because I am passionate about
building great customer experiences online”. The crowd looked puzzled. Lee was then asked
by a different attendee “Lee if I wanted you to design stuff for me could you?”. Lee smiled
and said, “I’m really sorry, but I am so backed up with work it would be at least 6 months
before I could take on any new projects”.




               http://blog.ionom.com/2010/02/new-internet-revenue-models/
Most effective approach for audience engagement




What approach would be most appropriate for




                                                  ?
reaching each of the audiences you identified
earlier?
   ‣   conventional web site
   ‣   Twitter
   ‣   less frequent but more in depth blogs
   ‣   commenting on public blogs
   ‣   sharing bookmarks
   ‣   Facebook
   ‣   Linkedin
   ‣   Wikipedia pages
   ‣   RSS feeds
   ‣   something else...
Maximising Online Resource Effectiveness Workshop Session 3/8 Priority issues

More Related Content

What's hot

Linked Data Tutorial
Linked Data TutorialLinked Data Tutorial
Linked Data Tutorial
tomasknap
 
Participation reports webinar December 2020
Participation reports webinar December 2020Participation reports webinar December 2020
Participation reports webinar December 2020
Crossref
 
Introduction to the Semantic Web
Introduction to the Semantic WebIntroduction to the Semantic Web
Introduction to the Semantic Web
Tomek Pluskiewicz
 
Short guide to the Semantic Web
Short guide to the Semantic WebShort guide to the Semantic Web
Short guide to the Semantic Web
mdabrowski
 
Introduction to APIs and Linked Data
Introduction to APIs and Linked DataIntroduction to APIs and Linked Data
Introduction to APIs and Linked Data
Adrian Stevenson
 
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 ...
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 ...Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 ...
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 ...
Raj Lal
 
Realizing a Semantic Web Application - ICWE 2010 Tutorial
Realizing a Semantic Web Application - ICWE 2010 TutorialRealizing a Semantic Web Application - ICWE 2010 Tutorial
Realizing a Semantic Web Application - ICWE 2010 Tutorial
Emanuele Della Valle
 
Jarrar: RDFa
Jarrar: RDFaJarrar: RDFa
Jarrar: RDFa
Mustafa Jarrar
 
Linked Data MLA 2015
Linked Data MLA 2015Linked Data MLA 2015
Linked Data MLA 2015
Cason Snow
 
Linked data MLA 2015
Linked data MLA 2015Linked data MLA 2015
Linked data MLA 2015
Cason Snow
 
Building a semantic website
Building a semantic websiteBuilding a semantic website
Building a semantic website
CJ Jenkins
 
Webinar: Semantic web for developers
Webinar: Semantic web for developersWebinar: Semantic web for developers
Webinar: Semantic web for developers
Semantic Web Company
 
Rank | Analyse | Lead | Search
Rank | Analyse | Lead | SearchRank | Analyse | Lead | Search
Rank | Analyse | Lead | Search
sopekmir
 
LIBRIS - Linked Library Data
LIBRIS - Linked Library DataLIBRIS - Linked Library Data
LIBRIS - Linked Library Data
Anders Söderbäck
 
The Semantic Web
The Semantic WebThe Semantic Web
The Semantic Web
ostephens
 
Deep Web: Databases on the Web
Deep Web: Databases on the WebDeep Web: Databases on the Web
Deep Web: Databases on the Web
Denis Shestakov
 
Chapter 1 semantic web
Chapter 1 semantic webChapter 1 semantic web
Chapter 1 semantic web
R A Akerkar
 
Online Collections Crawlability for Libraries, Archives, and Museums
Online Collections Crawlability for Libraries, Archives, and MuseumsOnline Collections Crawlability for Libraries, Archives, and Museums
Online Collections Crawlability for Libraries, Archives, and Museums
mherbison
 
Web 3.0 / Semantic Web: What it means for academic users, libraries and publi...
Web 3.0 / Semantic Web: What it means for academic users, libraries and publi...Web 3.0 / Semantic Web: What it means for academic users, libraries and publi...
Web 3.0 / Semantic Web: What it means for academic users, libraries and publi...
Richard Wallis
 

What's hot (19)

Linked Data Tutorial
Linked Data TutorialLinked Data Tutorial
Linked Data Tutorial
 
Participation reports webinar December 2020
Participation reports webinar December 2020Participation reports webinar December 2020
Participation reports webinar December 2020
 
Introduction to the Semantic Web
Introduction to the Semantic WebIntroduction to the Semantic Web
Introduction to the Semantic Web
 
Short guide to the Semantic Web
Short guide to the Semantic WebShort guide to the Semantic Web
Short guide to the Semantic Web
 
Introduction to APIs and Linked Data
Introduction to APIs and Linked DataIntroduction to APIs and Linked Data
Introduction to APIs and Linked Data
 
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 ...
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 ...Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 ...
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 ...
 
Realizing a Semantic Web Application - ICWE 2010 Tutorial
Realizing a Semantic Web Application - ICWE 2010 TutorialRealizing a Semantic Web Application - ICWE 2010 Tutorial
Realizing a Semantic Web Application - ICWE 2010 Tutorial
 
Jarrar: RDFa
Jarrar: RDFaJarrar: RDFa
Jarrar: RDFa
 
Linked Data MLA 2015
Linked Data MLA 2015Linked Data MLA 2015
Linked Data MLA 2015
 
Linked data MLA 2015
Linked data MLA 2015Linked data MLA 2015
Linked data MLA 2015
 
Building a semantic website
Building a semantic websiteBuilding a semantic website
Building a semantic website
 
Webinar: Semantic web for developers
Webinar: Semantic web for developersWebinar: Semantic web for developers
Webinar: Semantic web for developers
 
Rank | Analyse | Lead | Search
Rank | Analyse | Lead | SearchRank | Analyse | Lead | Search
Rank | Analyse | Lead | Search
 
LIBRIS - Linked Library Data
LIBRIS - Linked Library DataLIBRIS - Linked Library Data
LIBRIS - Linked Library Data
 
The Semantic Web
The Semantic WebThe Semantic Web
The Semantic Web
 
Deep Web: Databases on the Web
Deep Web: Databases on the WebDeep Web: Databases on the Web
Deep Web: Databases on the Web
 
Chapter 1 semantic web
Chapter 1 semantic webChapter 1 semantic web
Chapter 1 semantic web
 
Online Collections Crawlability for Libraries, Archives, and Museums
Online Collections Crawlability for Libraries, Archives, and MuseumsOnline Collections Crawlability for Libraries, Archives, and Museums
Online Collections Crawlability for Libraries, Archives, and Museums
 
Web 3.0 / Semantic Web: What it means for academic users, libraries and publi...
Web 3.0 / Semantic Web: What it means for academic users, libraries and publi...Web 3.0 / Semantic Web: What it means for academic users, libraries and publi...
Web 3.0 / Semantic Web: What it means for academic users, libraries and publi...
 

Similar to Maximising Online Resource Effectiveness Workshop Session 3/8 Priority issues

Bruce Lawson Opera Indonesia
Bruce Lawson Opera IndonesiaBruce Lawson Opera Indonesia
Bruce Lawson Opera Indonesia
brucelawson
 
Improving frontend performance
Improving frontend performanceImproving frontend performance
Improving frontend performance
Sagar Desarda
 
How to create accessible websites - Web Accessibility Summit
How to create accessible websites - Web Accessibility SummitHow to create accessible websites - Web Accessibility Summit
How to create accessible websites - Web Accessibility Summit
Rachel Cherry
 
MobileStore.pptx
MobileStore.pptxMobileStore.pptx
MobileStore.pptx
AkashChourasiya13
 
Workshop HTML5+PhoneGap by Ivano Malavolta
Workshop HTML5+PhoneGap by Ivano Malavolta Workshop HTML5+PhoneGap by Ivano Malavolta
Workshop HTML5+PhoneGap by Ivano Malavolta
Commit University
 
Webinar "Using the Web to Maximize Your Regional Group's ...
Webinar "Using the Web to Maximize Your Regional Group's ...Webinar "Using the Web to Maximize Your Regional Group's ...
Webinar "Using the Web to Maximize Your Regional Group's ...
webhostingguy
 
student innovation 2014
student innovation 2014student innovation 2014
student innovation 2014
Freelancer
 
Demystifying The Web
Demystifying The WebDemystifying The Web
Demystifying The Web
Loft Creative
 
HTML5 and CSS3 refresher
HTML5 and CSS3 refresherHTML5 and CSS3 refresher
HTML5 and CSS3 refresher
Ivano Malavolta
 
Web development
Web developmentWeb development
Web development
Rishabh Gupta
 
HTML5: A brave new world of markup
HTML5: A brave new world of markupHTML5: A brave new world of markup
HTML5: A brave new world of markup
Chris Mills
 
Familiar Tools, New Possibilities: Leveraging the Power of the Adobe Web Pub...
Familiar Tools, New Possibilities:  Leveraging the Power of the Adobe Web Pub...Familiar Tools, New Possibilities:  Leveraging the Power of the Adobe Web Pub...
Familiar Tools, New Possibilities: Leveraging the Power of the Adobe Web Pub...
John Hartley
 
Flavours of SEO
Flavours of SEOFlavours of SEO
Flavours of SEO
The Reference
 
Enhancing SharePoint with Responsive Web Design
Enhancing SharePoint with Responsive Web DesignEnhancing SharePoint with Responsive Web Design
Enhancing SharePoint with Responsive Web Design
Eric Overfield
 
Access by Default
Access by DefaultAccess by Default
Access by Default
Kendra Skeene
 
“Building Mobile Optimized Websites,” Nick Bourgeois / Ray Villares
“Building Mobile Optimized Websites,” Nick Bourgeois / Ray Villares“Building Mobile Optimized Websites,” Nick Bourgeois / Ray Villares
“Building Mobile Optimized Websites,” Nick Bourgeois / Ray Villares
rayvillares
 
Building Mobile Optimized Websites
Building Mobile Optimized WebsitesBuilding Mobile Optimized Websites
Building Mobile Optimized Websites
haxorize
 
CSS Eye for the Programmer Guy
CSS Eye for the Programmer GuyCSS Eye for the Programmer Guy
CSS Eye for the Programmer Guy
Dennis Slade Jr.
 
Using Cool New Frameworks in (Mobile) Domino Apps
Using Cool New Frameworks in (Mobile) Domino AppsUsing Cool New Frameworks in (Mobile) Domino Apps
Using Cool New Frameworks in (Mobile) Domino Apps
Teamstudio
 
Let's get accessible!
Let's get accessible!Let's get accessible!
Let's get accessible!
Tady Walsh
 

Similar to Maximising Online Resource Effectiveness Workshop Session 3/8 Priority issues (20)

Bruce Lawson Opera Indonesia
Bruce Lawson Opera IndonesiaBruce Lawson Opera Indonesia
Bruce Lawson Opera Indonesia
 
Improving frontend performance
Improving frontend performanceImproving frontend performance
Improving frontend performance
 
How to create accessible websites - Web Accessibility Summit
How to create accessible websites - Web Accessibility SummitHow to create accessible websites - Web Accessibility Summit
How to create accessible websites - Web Accessibility Summit
 
MobileStore.pptx
MobileStore.pptxMobileStore.pptx
MobileStore.pptx
 
Workshop HTML5+PhoneGap by Ivano Malavolta
Workshop HTML5+PhoneGap by Ivano Malavolta Workshop HTML5+PhoneGap by Ivano Malavolta
Workshop HTML5+PhoneGap by Ivano Malavolta
 
Webinar "Using the Web to Maximize Your Regional Group's ...
Webinar "Using the Web to Maximize Your Regional Group's ...Webinar "Using the Web to Maximize Your Regional Group's ...
Webinar "Using the Web to Maximize Your Regional Group's ...
 
student innovation 2014
student innovation 2014student innovation 2014
student innovation 2014
 
Demystifying The Web
Demystifying The WebDemystifying The Web
Demystifying The Web
 
HTML5 and CSS3 refresher
HTML5 and CSS3 refresherHTML5 and CSS3 refresher
HTML5 and CSS3 refresher
 
Web development
Web developmentWeb development
Web development
 
HTML5: A brave new world of markup
HTML5: A brave new world of markupHTML5: A brave new world of markup
HTML5: A brave new world of markup
 
Familiar Tools, New Possibilities: Leveraging the Power of the Adobe Web Pub...
Familiar Tools, New Possibilities:  Leveraging the Power of the Adobe Web Pub...Familiar Tools, New Possibilities:  Leveraging the Power of the Adobe Web Pub...
Familiar Tools, New Possibilities: Leveraging the Power of the Adobe Web Pub...
 
Flavours of SEO
Flavours of SEOFlavours of SEO
Flavours of SEO
 
Enhancing SharePoint with Responsive Web Design
Enhancing SharePoint with Responsive Web DesignEnhancing SharePoint with Responsive Web Design
Enhancing SharePoint with Responsive Web Design
 
Access by Default
Access by DefaultAccess by Default
Access by Default
 
“Building Mobile Optimized Websites,” Nick Bourgeois / Ray Villares
“Building Mobile Optimized Websites,” Nick Bourgeois / Ray Villares“Building Mobile Optimized Websites,” Nick Bourgeois / Ray Villares
“Building Mobile Optimized Websites,” Nick Bourgeois / Ray Villares
 
Building Mobile Optimized Websites
Building Mobile Optimized WebsitesBuilding Mobile Optimized Websites
Building Mobile Optimized Websites
 
CSS Eye for the Programmer Guy
CSS Eye for the Programmer GuyCSS Eye for the Programmer Guy
CSS Eye for the Programmer Guy
 
Using Cool New Frameworks in (Mobile) Domino Apps
Using Cool New Frameworks in (Mobile) Domino AppsUsing Cool New Frameworks in (Mobile) Domino Apps
Using Cool New Frameworks in (Mobile) Domino Apps
 
Let's get accessible!
Let's get accessible!Let's get accessible!
Let's get accessible!
 

More from Platypus

Maximising Institutional Webmaster Impact
Maximising Institutional Webmaster ImpactMaximising Institutional Webmaster Impact
Maximising Institutional Webmaster Impact
Platypus
 
Maximising Online Resource Effectiveness Workshop Session 6/8 Promotional str...
Maximising Online Resource Effectiveness Workshop Session 6/8 Promotional str...Maximising Online Resource Effectiveness Workshop Session 6/8 Promotional str...
Maximising Online Resource Effectiveness Workshop Session 6/8 Promotional str...
Platypus
 
Maximising Online Resource Effectiveness Workshop Session 4/8 Using the socia...
Maximising Online Resource Effectiveness Workshop Session 4/8 Using the socia...Maximising Online Resource Effectiveness Workshop Session 4/8 Using the socia...
Maximising Online Resource Effectiveness Workshop Session 4/8 Using the socia...
Platypus
 
RDFa Introductory Course Session 1/4 What RDFa
RDFa Introductory Course Session 1/4 What RDFaRDFa Introductory Course Session 1/4 What RDFa
RDFa Introductory Course Session 1/4 What RDFa
Platypus
 
RDFa Introductory Course Session 4/4 When RDFa
RDFa Introductory Course Session 4/4 When RDFaRDFa Introductory Course Session 4/4 When RDFa
RDFa Introductory Course Session 4/4 When RDFa
Platypus
 
Maximising Online Resource Effectiveness Workshop Session 2/8 Conventional SE...
Maximising Online Resource Effectiveness Workshop Session 2/8 Conventional SE...Maximising Online Resource Effectiveness Workshop Session 2/8 Conventional SE...
Maximising Online Resource Effectiveness Workshop Session 2/8 Conventional SE...
Platypus
 
Maximising Online Resource Effectiveness Workshop Session 7/8 Development str...
Maximising Online Resource Effectiveness Workshop Session 7/8 Development str...Maximising Online Resource Effectiveness Workshop Session 7/8 Development str...
Maximising Online Resource Effectiveness Workshop Session 7/8 Development str...
Platypus
 
Maximising Online Resource Effectiveness Workshop Session 8/8 Workshop roundup
Maximising Online Resource Effectiveness Workshop Session 8/8 Workshop roundupMaximising Online Resource Effectiveness Workshop Session 8/8 Workshop roundup
Maximising Online Resource Effectiveness Workshop Session 8/8 Workshop roundup
Platypus
 
Maximising Online Resource Effectiveness Workshop Session 6/8 Promotional str...
Maximising Online Resource Effectiveness Workshop Session 6/8 Promotional str...Maximising Online Resource Effectiveness Workshop Session 6/8 Promotional str...
Maximising Online Resource Effectiveness Workshop Session 6/8 Promotional str...
Platypus
 
Maximising Online Resource Effectiveness Workshop Session 4/8 Using the socia...
Maximising Online Resource Effectiveness Workshop Session 4/8 Using the socia...Maximising Online Resource Effectiveness Workshop Session 4/8 Using the socia...
Maximising Online Resource Effectiveness Workshop Session 4/8 Using the socia...
Platypus
 
Maximising Online Resource Effectiveness Workshop Session 1/8 Introduction
Maximising Online Resource Effectiveness Workshop Session 1/8 IntroductionMaximising Online Resource Effectiveness Workshop Session 1/8 Introduction
Maximising Online Resource Effectiveness Workshop Session 1/8 Introduction
Platypus
 
2010 Primer
2010 Primer2010 Primer
2010 Primer
Platypus
 

More from Platypus (12)

Maximising Institutional Webmaster Impact
Maximising Institutional Webmaster ImpactMaximising Institutional Webmaster Impact
Maximising Institutional Webmaster Impact
 
Maximising Online Resource Effectiveness Workshop Session 6/8 Promotional str...
Maximising Online Resource Effectiveness Workshop Session 6/8 Promotional str...Maximising Online Resource Effectiveness Workshop Session 6/8 Promotional str...
Maximising Online Resource Effectiveness Workshop Session 6/8 Promotional str...
 
Maximising Online Resource Effectiveness Workshop Session 4/8 Using the socia...
Maximising Online Resource Effectiveness Workshop Session 4/8 Using the socia...Maximising Online Resource Effectiveness Workshop Session 4/8 Using the socia...
Maximising Online Resource Effectiveness Workshop Session 4/8 Using the socia...
 
RDFa Introductory Course Session 1/4 What RDFa
RDFa Introductory Course Session 1/4 What RDFaRDFa Introductory Course Session 1/4 What RDFa
RDFa Introductory Course Session 1/4 What RDFa
 
RDFa Introductory Course Session 4/4 When RDFa
RDFa Introductory Course Session 4/4 When RDFaRDFa Introductory Course Session 4/4 When RDFa
RDFa Introductory Course Session 4/4 When RDFa
 
Maximising Online Resource Effectiveness Workshop Session 2/8 Conventional SE...
Maximising Online Resource Effectiveness Workshop Session 2/8 Conventional SE...Maximising Online Resource Effectiveness Workshop Session 2/8 Conventional SE...
Maximising Online Resource Effectiveness Workshop Session 2/8 Conventional SE...
 
Maximising Online Resource Effectiveness Workshop Session 7/8 Development str...
Maximising Online Resource Effectiveness Workshop Session 7/8 Development str...Maximising Online Resource Effectiveness Workshop Session 7/8 Development str...
Maximising Online Resource Effectiveness Workshop Session 7/8 Development str...
 
Maximising Online Resource Effectiveness Workshop Session 8/8 Workshop roundup
Maximising Online Resource Effectiveness Workshop Session 8/8 Workshop roundupMaximising Online Resource Effectiveness Workshop Session 8/8 Workshop roundup
Maximising Online Resource Effectiveness Workshop Session 8/8 Workshop roundup
 
Maximising Online Resource Effectiveness Workshop Session 6/8 Promotional str...
Maximising Online Resource Effectiveness Workshop Session 6/8 Promotional str...Maximising Online Resource Effectiveness Workshop Session 6/8 Promotional str...
Maximising Online Resource Effectiveness Workshop Session 6/8 Promotional str...
 
Maximising Online Resource Effectiveness Workshop Session 4/8 Using the socia...
Maximising Online Resource Effectiveness Workshop Session 4/8 Using the socia...Maximising Online Resource Effectiveness Workshop Session 4/8 Using the socia...
Maximising Online Resource Effectiveness Workshop Session 4/8 Using the socia...
 
Maximising Online Resource Effectiveness Workshop Session 1/8 Introduction
Maximising Online Resource Effectiveness Workshop Session 1/8 IntroductionMaximising Online Resource Effectiveness Workshop Session 1/8 Introduction
Maximising Online Resource Effectiveness Workshop Session 1/8 Introduction
 
2010 Primer
2010 Primer2010 Primer
2010 Primer
 

Recently uploaded

Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectorsConnector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
DianaGray10
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
panagenda
 
Skybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoptionSkybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoption
Tatiana Kojar
 
Apps Break Data
Apps Break DataApps Break Data
Apps Break Data
Ivo Velitchkov
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
Antonios Katsarakis
 
“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...
“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...
“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...
Edge AI and Vision Alliance
 
Principle of conventional tomography-Bibash Shahi ppt..pptx
Principle of conventional tomography-Bibash Shahi ppt..pptxPrinciple of conventional tomography-Bibash Shahi ppt..pptx
Principle of conventional tomography-Bibash Shahi ppt..pptx
BibashShahi
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
Jakub Marek
 
AppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSFAppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSF
Ajin Abraham
 
Generating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and MilvusGenerating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and Milvus
Zilliz
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
panagenda
 
"Frontline Battles with DDoS: Best practices and Lessons Learned", Igor Ivaniuk
"Frontline Battles with DDoS: Best practices and Lessons Learned",  Igor Ivaniuk"Frontline Battles with DDoS: Best practices and Lessons Learned",  Igor Ivaniuk
"Frontline Battles with DDoS: Best practices and Lessons Learned", Igor Ivaniuk
Fwdays
 
What is an RPA CoE? Session 1 – CoE Vision
What is an RPA CoE?  Session 1 – CoE VisionWhat is an RPA CoE?  Session 1 – CoE Vision
What is an RPA CoE? Session 1 – CoE Vision
DianaGray10
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
Ivanti
 
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
saastr
 
Digital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Digital Banking in the Cloud: How Citizens Bank Unlocked Their MainframeDigital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Digital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Precisely
 
Leveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and StandardsLeveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and Standards
Neo4j
 
"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota
Fwdays
 
GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)
Javier Junquera
 
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
Edge AI and Vision Alliance
 

Recently uploaded (20)

Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectorsConnector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
 
Skybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoptionSkybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoption
 
Apps Break Data
Apps Break DataApps Break Data
Apps Break Data
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
 
“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...
“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...
“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...
 
Principle of conventional tomography-Bibash Shahi ppt..pptx
Principle of conventional tomography-Bibash Shahi ppt..pptxPrinciple of conventional tomography-Bibash Shahi ppt..pptx
Principle of conventional tomography-Bibash Shahi ppt..pptx
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
 
AppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSFAppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSF
 
Generating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and MilvusGenerating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and Milvus
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
 
"Frontline Battles with DDoS: Best practices and Lessons Learned", Igor Ivaniuk
"Frontline Battles with DDoS: Best practices and Lessons Learned",  Igor Ivaniuk"Frontline Battles with DDoS: Best practices and Lessons Learned",  Igor Ivaniuk
"Frontline Battles with DDoS: Best practices and Lessons Learned", Igor Ivaniuk
 
What is an RPA CoE? Session 1 – CoE Vision
What is an RPA CoE?  Session 1 – CoE VisionWhat is an RPA CoE?  Session 1 – CoE Vision
What is an RPA CoE? Session 1 – CoE Vision
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
 
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
 
Digital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Digital Banking in the Cloud: How Citizens Bank Unlocked Their MainframeDigital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Digital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
 
Leveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and StandardsLeveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and Standards
 
"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota
 
GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)
 
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
 

Maximising Online Resource Effectiveness Workshop Session 3/8 Priority issues

  • 1. Build resources well—SCAMORE 3/8 for lots of good reasons... photo: ©GM 2010
  • 2.
  • 4. Poor websites cost UK councils around £11m a month Janine Milne, 8 January 2010 ‣ Shoddy websites could be costing UK councils £11m a month, according to the Society of IT Managers (Socitim). ‣ Faced with badly designed or poorly constructed sites, people are choosing to either call their council or visit a council contact centre, both far more costly channels. ‣ Only 21% of the 7.3m unique visitors to the 120 council websites found part of the information they were looking for. ‣ On average, a fifth of site visitors couldn't find the information they needed. That equates to 4.4 million failures in dealing with online enquiries across all local authorities. As each call to a council is estimated to cost roughly £2.50 to handle, local authorities could be haemorrhaging up to £11m each month. ‣ Despite these serious misgivings about the web, it was the most popular way for citizens to contact their local authority, preferred by 70% of the customers. But it was also exposed to be the least satisfactory channel, with 42% of visitors rating its service as poor, compared to 21% of face-to-face meetings and 2% of phone calls. http://www.cbronline.com/news/poor_websites_cost_uk_councils_11m_a_month_281009
  • 5. Knowing your audience Establishing desirable target audience Determine your audience profile ‣ Demographics—age, gender, location, income ‣ What particular interests, influences, beliefs ‣ What media will they be using (desktop, mobile, home, work) How many are there ‣ Any relevant behavioural trends ‣ Clarify how to deliver value to your audience ‣ What do you want to achieve when users visit ‣ What is your goal or "conversion" metric ‣ How will you measure this
  • 6. Practical exercise—identifying and understanding audiences This exercise should be done as individuals, not in a group Identify your web site audiences ‣ how many do you have? Prioritise each in terms of how important it is to communicate with them ‣ the time and energy you commit to each should be influenced by their relative importance—is this the case? What is purpose of communication to each ‣ is it to raise awareness, influence visitors, or something else? Compare your audiences and purposes ‣ are your priorities and purposes the same for each audience?
  • 7. Practical exercise—identifying and understanding audiences Audience Priority Purpose
  • 8. Practical exercise—identifying and understanding audiences Select one of your audiences and consider the following ‣ what sort of people make up this audience? ‣ what is their understanding of the service you provide? ‣ what does their working day consist of? ‣ how much detail do they need from your web site? ‣ what do they care about most? ‣ what language style would be most suitable for them?
  • 9. Practical exercise—understanding a single audience Audience The sort of people making up this audience This audience’s understanding of your service Typical working day for this audience Detail required by this audience This audience priorities Most suitable language style
  • 10. structure is so important photo: ©GM 2010
  • 11. Structure Structure underpins everything Define specific parts of a web page using HTML ‣ content is structured with HTML ‣ HTML “tags” define parts of a web page ‣ <h1>heading</h1> <h2>subheading</h2> <p>paragraph</p> ‣ indicates relationship between parts of a web page and relative importances ‣ enables search engines to better assess content in a web page ‣ therefore a better match of content to search queries ‣ and content more likely to reach intended audience Associate presentation style with parts of web page using CSS ‣ web browser displays web page using associated styles ‣ easy maintenance of look and feel ‣ dynamic change of look and feel possible (depending on user details, mode of access etc.) Introduce functionality using Javascript ‣ leave structure intact ‣ to enhance UX
  • 12. Structure—the power of stylesheets (CSS) http://www.csszengarden.com/
  • 13. Structure—better standards HTML5 ‣ HTML5 introduces new elements and attributes for semantic replacements of generic <div> and <span> elements, e.g. <nav> (navigation block) and <footer>. ‣ Other elements bring convenience with a standardised interface for rich content, e.g. <audio> and <video>. ‣ Some elements from HTML 4 have been dropped, including presentational elements such as <font> and <center>, where effects are achieved with CSS. There is also a renewed emphasis on the importance of DOM scripting. CSS3 ‣ 2D and 3D transformations and transitions etc. http://www.w3.org/TR/html5/ http://www.w3.org/Style/CSS/current-work
  • 14. Structure—implementation of standards HTML5 and CSS3 Eric Meyer, "A more tangled web", Belfast Build conference, November 2009 (summary by Charlie Neely, FRONT) ‣ The web's relative simplicity has made it so successful. Basic web tools, HTML, CSS and Javascript, have all found their way into many products and services we use today. ‣ However HTML5 wont be fully implemented until an estimated 2022 and CSS3 is likely to be in development far beyond that. ‣ But this doesn't stop us from using elements of it already. Developers are ingeniously using Javascript to emulate methods and functions of HTML5 and CSS3, for example, Alexis Deveria created a jQuery plug-in which provides support for CSS3 Template Layout Module. http://vimeo.com/7863592 http://a.deveria.com/?p=236 http://en.wikipedia.org/wiki/JQuery
  • 15. Using new technologies with Internet Explorer Google Chrome Frame ‣ an open source plug-in that seamlessly brings Google Chrome's open web technologies and speedy JavaScript engine to Internet Explorer ‣ start using open web technologies right away, even technologies that aren't yet supported in Internet Explorer 6, 7, or 8 ‣ take advantage of JavaScript performance improvements to make your apps faster and more responsive ‣ add a single tag to your pages and detect whether your users have installed Google Chrome Frame ‣ if not installed, you can direct your users to an installation page ‣ if installed, it detects the tag you added and works automatically http://code.google.com/chrome/chromeframe/
  • 16.
  • 17. Structure—standards, video and audio with HTML5 on all browsers HTML5 video and audio for everyone Google, March 2010 HTML5 video and audio tags make embedding media into documents as easy as embedding an image. All it takes is a single <video> or <audio> tag. Unfortunately, not all browsers natively support these HTML5 tags. To enable HTML5 video and audio tags in all major browsers, simply paste the following code into the <head> of your document: <script src="http://html5media.googlecode.com/svn/trunk/src/ html5media.min.js"></script> This will allow you to embed video and audio into your document using the following easy syntax: <video src="video.mp4" width="320" height="240" controls preload></video> <audio src="audio.mp3" controls preload></audio> http://code.google.com/p/html5media/
  • 18. HTML5 example <!DOCTYPE html> <html> <head> <title>Demo site for showcasing videos stored elsewhere</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="description" content="For demonstration purposes only, HTML5 video and audio and more..."> <meta name="keywords" content="demo, HTML5, CSS3, video tag, audio tag"> </head> <body> <section id="home"> <header> <h1>A few sample videos and audio</h1> <h2>Nothing too serious!</h2> <nav> <a href="#iphone-mp4">An mp4 file on the wonders of iPhone marked up just using &lt;video&gt; tag</a> <a href="#sagan-utube">An embedded youtube video of scientific slant</a> <a href="#meyer-vimeo">An embedded vimeo video of a conference talk by Eric Meyer</a> <a href="#bmw-videojug">An embedded videojug video about the world's best motorcycles</a> <a href="#walkonthewild-utube">Another embedded youtube video that I coundn't resist</a> <a href="#drivebytruckers-mp3">Some good music marked up just using &lt;audio&gt; tag</a> </nav> </header> <article id="iphone-mp4"> <p>A few of the not so obvious reasons for having an iPhone</p> <figure><video src="iphone-magic.mp4" width="478" height="270" controls></video></figure> </article> <article id="drivebytruckers-mp3"> <p>And some good old Drive-By Truckers music</p> <figure><img src="truckers.jpg" alt="Drive-By Truckers group members" /><br /> <audio src="gravity.m4a" controls></audio></figure> </article> <footer> <p>Copyright 2010 SCAMORE</p> </footer> </section> </body> </html>
  • 19. HTML5 example HTML document <!DOCTYPE html> <html> <head> <title>Demo site for showcasing videos stored elsewhere</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="description" content="For demonstration purposes only, HTML5 video and audio and more..."> <meta name="keywords" content="demo, HTML5, CSS3, video tag, audio tag"> </head> <body> <section id="home"> <header> <h1>A few sample videos and audio</h1> <h2>Nothing too serious!</h2> <nav> <a href="#iphone-mp4">An mp4 file on the wonders of iPhone marked up just using &lt;video&gt; tag</a> <a href="#sagan-utube">An embedded youtube video of scientific slant</a> <a href="#meyer-vimeo">An embedded vimeo video of a conference talk by Eric Meyer</a> <a href="#bmw-videojug">An embedded videojug video about the world's best motorcycles</a> <a href="#walkonthewild-utube">Another embedded youtube video that I coundn't resist</a> <a href="#drivebytruckers-mp3">Some good music marked up just using &lt;audio&gt; tag</a> </nav> </header> <article id="iphone-mp4"> <p>A few of the not so obvious reasons for having an iPhone</p> <figure><video src="iphone-magic.mp4" width="478" height="270" controls></video></figure> </article> <article id="drivebytruckers-mp3"> <p>And some good old Drive-By Truckers music</p> <figure><img src="truckers.jpg" alt="Drive-By Truckers group members" /><br /> <audio src="gravity.m4a" controls></audio></figure> </article> <footer> <p>Copyright 2010 SCAMORE</p> </footer> </section> </body> </html>
  • 20. HTML5 example HTML document <!DOCTYPE html> <html> document head <head> <title>Demo site for showcasing videos stored elsewhere</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="description" content="For demonstration purposes only, HTML5 video and audio and more..."> <meta name="keywords" content="demo, HTML5, CSS3, video tag, audio tag"> </head> document body <body> <section id="home"> <header> <h1>A few sample videos and audio</h1> <h2>Nothing too serious!</h2> <nav> <a href="#iphone-mp4">An mp4 file on the wonders of iPhone marked up just using &lt;video&gt; tag</a> <a href="#sagan-utube">An embedded youtube video of scientific slant</a> <a href="#meyer-vimeo">An embedded vimeo video of a conference talk by Eric Meyer</a> <a href="#bmw-videojug">An embedded videojug video about the world's best motorcycles</a> <a href="#walkonthewild-utube">Another embedded youtube video that I coundn't resist</a> <a href="#drivebytruckers-mp3">Some good music marked up just using &lt;audio&gt; tag</a> </nav> </header> <article id="iphone-mp4"> <p>A few of the not so obvious reasons for having an iPhone</p> <figure><video src="iphone-magic.mp4" width="478" height="270" controls></video></figure> </article> <article id="drivebytruckers-mp3"> <p>And some good old Drive-By Truckers music</p> <figure><img src="truckers.jpg" alt="Drive-By Truckers group members" /><br /> <audio src="gravity.m4a" controls></audio></figure> </article> <footer> <p>Copyright 2010 SCAMORE</p> </footer> </section> </body> </html>
  • 21. HTML5 example HTML document <!DOCTYPE html> <html> document head <head> <title>Demo site for showcasing videos stored elsewhere</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="description" content="For demonstration purposes only, HTML5 video and audio and more..."> <meta name="keywords" content="demo, HTML5, CSS3, video tag, audio tag"> </head> document body <body> <section id="home"> section <header> <h1>A few sample videos and audio</h1> <h2>Nothing too serious!</h2> <nav> <a href="#iphone-mp4">An mp4 file on the wonders of iPhone marked up just using &lt;video&gt; tag</a> <a href="#sagan-utube">An embedded youtube video of scientific slant</a> <a href="#meyer-vimeo">An embedded vimeo video of a conference talk by Eric Meyer</a> <a href="#bmw-videojug">An embedded videojug video about the world's best motorcycles</a> <a href="#walkonthewild-utube">Another embedded youtube video that I coundn't resist</a> <a href="#drivebytruckers-mp3">Some good music marked up just using &lt;audio&gt; tag</a> </nav> </header> <article id="iphone-mp4"> <p>A few of the not so obvious reasons for having an iPhone</p> <figure><video src="iphone-magic.mp4" width="478" height="270" controls></video></figure> </article> <article id="drivebytruckers-mp3"> <p>And some good old Drive-By Truckers music</p> <figure><img src="truckers.jpg" alt="Drive-By Truckers group members" /><br /> <audio src="gravity.m4a" controls></audio></figure> </article> <footer> <p>Copyright 2010 SCAMORE</p> </footer> </section> </body> </html>
  • 22. HTML5 example HTML document <!DOCTYPE html> <html> document head <head> <title>Demo site for showcasing videos stored elsewhere</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="description" content="For demonstration purposes only, HTML5 video and audio and more..."> <meta name="keywords" content="demo, HTML5, CSS3, video tag, audio tag"> </head> document body <body> <section id="home"> section <header> <h1>A few sample videos and audio</h1> header <h2>Nothing too serious!</h2> <nav> <a href="#iphone-mp4">An mp4 file on the wonders of iPhone marked up just using &lt;video&gt; tag</a> <a href="#sagan-utube">An embedded youtube video of scientific slant</a> <a href="#meyer-vimeo">An embedded vimeo video of a conference talk by Eric Meyer</a> <a href="#bmw-videojug">An embedded videojug video about the world's best motorcycles</a> <a href="#walkonthewild-utube">Another embedded youtube video that I coundn't resist</a> <a href="#drivebytruckers-mp3">Some good music marked up just using &lt;audio&gt; tag</a> </nav> </header> <article id="iphone-mp4"> <p>A few of the not so obvious reasons for having an iPhone</p> article <figure><video src="iphone-magic.mp4" width="478" height="270" controls></video></figure> </article> <article id="drivebytruckers-mp3"> <p>And some good old Drive-By Truckers music</p> <figure><img src="truckers.jpg" alt="Drive-By Truckers group members" /><br /> <audio src="gravity.m4a" controls></audio></figure> </article> <footer> <p>Copyright 2010 SCAMORE</p> </footer> footer </section> </body> </html>
  • 23. HTML5 example HTML document <!DOCTYPE html> <html> document head <head> <title>Demo site for showcasing videos stored elsewhere</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="description" content="For demonstration purposes only, HTML5 video and audio and more..."> <meta name="keywords" content="demo, HTML5, CSS3, video tag, audio tag"> </head> document body <body> <section id="home"> section <header> <h1>A few sample videos and audio</h1> header <h2>Nothing too serious!</h2> <nav> navigation block <a href="#iphone-mp4">An mp4 file on the wonders of iPhone marked up just using &lt;video&gt; tag</a> <a href="#sagan-utube">An embedded youtube video of scientific slant</a> <a href="#meyer-vimeo">An embedded vimeo video of a conference talk by Eric Meyer</a> <a href="#bmw-videojug">An embedded videojug video about the world's best motorcycles</a> <a href="#walkonthewild-utube">Another embedded youtube video that I coundn't resist</a> <a href="#drivebytruckers-mp3">Some good music marked up just using &lt;audio&gt; tag</a> </nav> </header> <article id="iphone-mp4"> <p>A few of the not so obvious reasons for having an iPhone</p> article <figure><video src="iphone-magic.mp4" width="478" height="270" controls></video></figure> </article> <article id="drivebytruckers-mp3"> <p>And some good old Drive-By Truckers music</p> <figure><img src="truckers.jpg" alt="Drive-By Truckers group members" /><br /> <audio src="gravity.m4a" controls></audio></figure> </article> <footer> <p>Copyright 2010 SCAMORE</p> </footer> footer </section> </body> </html>
  • 24.
  • 25. HTML5 support HTML5 and web standards Apple web site Every new Apple mobile device and every new Mac—along with the latest version of Apple’s Safari web browser—supports web standards including HTML5, CSS3, and JavaScript. These web standards are open, reliable, highly secure, and efficient. They allow web designers and developers to create advanced graphics, typography, animations, and transitions. Standards aren’t add-ons to the web. They are the web. And you can start using them today. http://www.apple.com/html5/
  • 26. HTML5 apps Making an iPad HTML5 app and making it really fast Thomas Fuchs, 4 June 2010 About a month ago or so, Amy and I release a little (literally, it’s about 5k) HTML5 iPad App for looking up time zones. I don’t mean select-box wasteland like all other time zone sites (who likes select boxes anyway?!), I mean a nicely polished, touch-enabled UI that works offline, too. The site uses no images, no JavaScript frameworks, and no external CSS, and fits quite comfortably in a few k’s of gzipped HTML. http://mir.aculo.us/2010/06/04/making-an-ipad-html5-app-making-it-really-fast/
  • 27. HTML5 and Flash Is HTML5 ready to take over multimedia content on the web? Hanna Miettinen, New Media Monthly, 22 July 2010 “Flash is a multimedia production system; HTML5 is a web authoring language”. “Flash can produce impressive multimedia effects on screen to impress (or perhaps entertain) the viewer; HTML5 can produce well structured web documents that can communicate well structured content and associated metadata to the viewer and software agents.” http://bit.ly/ds7c1Y
  • 28. HTML5 and RDFa HTML5 + RDFa = time to get rid of that 20th century furniture Laura Scott, pingv.com, 23 August 2010 With new language comes new ways of thinking By clarifying specifics — especially in error handling — HTML5 stands to open the doors for much more efficient and effective JavaScript, heralding a new era for robust interactivity with dynamic interfaces and rich user experiences that would be too heavy and difficult, or impossible, to implement in xhtml or HTML4... Hopefully we'll also have learned the lessons taught by the untold numbers of Flash website designers, who gave us splash pages, annoying, gratuitous motion effects (with obnoxious sound effects), and user interfaces more focused on dazzling the user with the creator's cleverness rather than on serving the user with an interface that serves the user's needs. Here's hoping that HTML5 does not bring us into a new age of craptastic blinky poppy wooshy buzzy design. http://pingv.com/blog/html5-rdfa-time-to-get-rid-of-that-20th-century-furniture
  • 29. CSS3 Google goes bubbly—interactive logo on the UK homepage Christian Heilmann’s blog, 7 September 2010 This is another example how Google are happy to play with their brand to show off some cool new browser technology. This is meant to show off what you can do with JavaScript and HTML5 and how smooth it can look. Uses CSS3 to create the round bubbles... http://bit.ly/cSioNW
  • 30. Examples, tutorials, ideas http://www.html5rocks.com/
  • 31. HTML5 reference HTML5 W3C working draft 19 October 2010, editor Ian Hickson (Google Inc.) ‣ Common infrastructure ‣ Semantics, structure, and APIs of HTML documents ‣ The elements of HTML ‣ Loading Web pages ‣ Web application APIs ‣ User interaction ‣ The HTML syntax ‣ The XHTML syntax ‣ There are also some appendices, defining rendering rules for Web browsers and listing obsolete features and IANA considerations. An extremely comprehensive document describing all aspects of the standard. http://www.w3.org/TR/html5/
  • 32. CSS3 reference CSS3 is a series of modular specifications October 2010, over 50 separate areas of work... http://www.w3.org/Style/CSS/current-work
  • 33. Structure—setting up RSS feed <?xml version="1.0" ?> <rss version="0.91"> <channel> <title>Web Designer Help</title> <link>http://www.webdesignerhelp.co.uk</link> <description>Latest Tutorials/Articles</description> <language>en-us</language> <copyright>Copyright 2008-2009 WebDesignerHelp</copyright> <lastBuildDate>Tue, 6 Jan 2009</lastBuildDate> <image> <title>Web Designer Help</title> <url>http://www.webdesignerhelp.co.uk/images/rss.gif</url> <link>http://www.webdesignerhelp.co.uk</link> </image> <item> <title>Setup an RSS Feed</title> <description>A basic tutorial on how to setup an RSS feed</description> <link>http://www.webdesignerhelp.co.uk/how-to-setup-an-rss-feed.html</link> <author>thomas@thomashardy.me.uk</author> <pubDate>Tue, 6 Jan 2009</pubDate> </item> </channel> </rss> http://www.webdesignerhelp.co.uk/index.php/2009/01/how-to-setup-a-rss-feed/
  • 34. Structure—setting up RSS feed <?xml version="1.0" ?> <rss version="0.91"> <channel> <title>Web Designer Help</title> <link>http://www.webdesignerhelp.co.uk</link> <description>Latest Tutorials/Articles</description> <language>en-us</language> <copyright>Copyright 2008-2009 WebDesignerHelp</copyright> <lastBuildDate>Tue, 6 Jan 2009</lastBuildDate> <image> <title>Web Designer Help</title> <url>http://www.webdesignerhelp.co.uk/images/rss.gif</url> <link>http://www.webdesignerhelp.co.uk</link> </image> <item> <title>Setup an RSS Feed</title> <description>A basic tutorial on how to setup an RSS feed</description> <link>http://www.webdesignerhelp.co.uk/how-to-setup-an-rss-feed.html</link> <author>thomas@thomashardy.me.uk</author> <pubDate>Tue, 6 Jan 2009</pubDate> </item> </channel> </rss> http://www.webdesignerhelp.co.uk/index.php/2009/01/how-to-setup-a-rss-feed/
  • 35. Structure—RSS feeds RSS feed aggregators are very useful for keeping up with news from many sources Google reader probably most popular ‣ content from lots of sites syndicated in one place Lots of iPhone and other mobile apps serve same purpose ‣ very convenient to use Make sure visitors know if you have RSS feed ‣ include RSS icon in address bar (e.g. at http://bit.ly/9hf917) ‣ add single line in HTML document head <link rel="alternate" title="This news feed" href="address" type="application/rss+xml" /> http://www.google.com/reader/
  • 36. Accessibility UK Central Office of Information Usability toolkit, January 2009 To help Web editors and Web content developers incorporate the basics of usability across all public sector websites. ‣ Page Layout ‣ Navigation ‣ Writing Content ‣ Content Elements ‣ Forms ‣ Search ‣ QA & Standards ‣ Common Pages Please note: If you are developing content for Directgov, Businesslink.gov.uk or NHS Choices please refer to your internal guidelines in the first instance, they include the guidance in this toolkit. http://usability.coi.gov.uk/
  • 37. Accessibility UK Central Office of Information Browser testing guidelines, January 2009 The Government aims to provide a consistent high quality experience for users across all of its online services. There are a large number of different browsers on the market and to test your website with all of them would be impractical and inefficient. However, if you build your website to comply fully with standards, this effort will be significantly reduced and you may only need to test your website with a few browsers. The objective of this guidance is to ensure that you website works on as many platforms and devices as possible. An effective way to do this is to: ‣ code to standards ‣ test with browsers This guidance is for public sector website managers, developers and testers. http://www.coi.gov.uk/guidance.php?page=213
  • 38. Integrity—“tools” of the trade Google Analytics ‣ http://www.google.com/analytics/support.html ‣ http://www.google.com/support/conversionuniversity Checking word maps ‣ http://www.wordle.net/ Identify suitable keywords and see popularity ‣ https://adwords.google.com/select/KeywordToolExternal Compare keyword phrases and see trends over time and per country ‣ http://www.google.com/trends Make sure all links are working ‣ http://validator.w3.org/checklink Introduction to Google's web site optimiser ‣ http://www.google.com/websiteoptimizer/tour.html
  • 39. Metadata Metadata is key ‣ data about data ‣ many and varied versions of metadata ‣ add background information, put things in context, add value, make much more useful by showing relevance ‣ different levels of metadata—may need pointer to further information to fully explain a piece of metadata or describe how to interpret ‣ enable ways of classifying, connecting, rating, structuring, promoting, that wouldn't be possible otherwise—especially if a common "vocabulary" for the metadata terms is used
  • 40. HTML5 and RDFa HTML5 + RDFa = time to get rid of that 20th century furniture Laura Scott, pingv.com, 23 August 2010 Robots speaking in complete sentences That's the net effect of RDFa. You see, currently hyperlinks, to robots, are analogous mystery meat navigation. To the human reader, the nature and location of a hyperlink may make total sense in context — even the mouse-over reveal of the hyperlink URL can yield meaning to us cerebral bipeds. But all a plain hyperlink says to a robot is "follow me." The robot doesn't know who made the link (or the destination site), what the destination is, why the link is there — just where the link is going, and that only by its URL. RDFa changes that by providing syntax, often abbreviated and/or abetted by libraries such as Dublin Core, to add meaning to the link... http://pingv.com/blog/html5-rdfa-time-to-get-rid-of-that-20th-century-furniture
  • 41. Richer semantics—improved information discovery and retrieval RDFa and SEO webBackplane, Mark Birbeck on December 16 2009 Vertical search engines RDFa will allow the search giants to offer partitioned search engines, aimed at particular audiences. There are many search engines already available, for specialist areas, but most of them tend to be out of date, or missing information altogether. The major search engines are often crawling these sites already, but page ranking algorithms will hide them away in the 1000th page of search results. By adding targeted mark-up to web-pages it becomes easier for search engines to differentiate the subject-matter of the pages, and so offer specialised views on their data. http://webbackplane.com/mark-birbeck/blog/2009/12/rdfa-and-seo
  • 42. Richer semantics—improved information discovery and retrieval RDFa and SEO webBackplane, Mark Birbeck on December 16 2009 Improved search accuracy This is beneficial for the users of search engines, in that it can help them to find the information they want, faster. But it's also significant for site creators and SEO practitioners, because it means that sites are increasingly found in the right place. An increasing part of SEO is writing relevant articles that relate to products and services. Since search engines are increasingly clever enough to differentiate between a bunch of keywords dumped into a page, and an article with real content, a virtuous circle is created, rewarding 'proper' articles with improved rankings. RDFa can help—it allows authors to make pages unambiguous. http://webbackplane.com/mark-birbeck/blog/2009/12/rdfa-and-seo
  • 43. Richer semantics—improved information discovery and retrieval RDFa and SEO webBackplane, Mark Birbeck on December 16 2009 Improving display of results This is the area that has probably seen most discussion recently, in the context of Yahoo!'s enhanced results, and Google's rich snippets… Benefits to the search engine of doing this, are that users can get more done, on their site, making them more likely to return. The benefits for the companies are improved click-through. For many, click-through is more important than ranking. Some SEO experts say that if adding RDFa to a site gave an increase in click-through of only a couple of %, sites would see that as worth it—yet as Peter Mika said in Year of the Monkey: Lessons from the first year of SearchMonkey, adding RDFa or Microformats to a page gives significantly better click-through than a mere few %. http://webbackplane.com/mark-birbeck/blog/2009/12/rdfa-and-seo
  • 44. Social media—where do web site visitors really come from? Search and Rescue: how to become findable and shareable in social media Brian Solis, Search Engine Watch, 1 April 2010 http://searchenginewatch.com/3639969
  • 45. Social media Business purposes of social networking sites ‣ Establish pointers to web site by attracting initial audience attention and developing a relationship. ‣ Create brand. Very important—web site visitors often only seeking confirmation after having made an initial decision to use a product or service following research on social networking sites. ‣ Peer reviews—very influential. ‣ Marketing!
  • 46. Social media—online reputation Is online reputation management the new Search Engine Optimisation? Niall McKeown, Niall's Online Marketing Blog, 9 December 2009 There is a strong argument that being #1 in the natural search engine results in Google for some industries is no longer what it used to be. I'm not arguing that search is irrelevant or that a site should not be built optimised for search engines, my argument is that the customer and how they purchase has little to do with being top of Google. Rather, it is how you are represented in terms of your online reputation. My argument is that online reputation management is fast becoming more important than search engine optimisation in service based industries. Better still, get your ORM right and the SEO takes care of itself. http://blog.ionom.com/2009/12/is-online-reputation-management-the-new-search-engine-optimisation/
  • 47. Making an impression New internet revenue models February 24th, 2010 by Niall McKeown ... In Lee’s spare time he has constructed a website called lookaly.com, a Northern Ireland centric ‘rate your experience’ website. It’s similar to TripAdvisor but region specific, not industry specific. The site facilitates user contributed content and allows customers of businesses to rate their experience. The businesses that are lucky enough to be rated can use the site to get honest and hard truths about their business and engage with customers that were moved enough to post a comment. At a recent conference Lee was asked, “How do you intend to monetise the site?”. Lee paused for a moment and looked mildly puzzled, almost as if he didn’t understand the question. His response was “I am not a business man, I built lookaly.com because I am passionate about building great customer experiences online”. The crowd looked puzzled. Lee was then asked by a different attendee “Lee if I wanted you to design stuff for me could you?”. Lee smiled and said, “I’m really sorry, but I am so backed up with work it would be at least 6 months before I could take on any new projects”. http://blog.ionom.com/2010/02/new-internet-revenue-models/
  • 48. Most effective approach for audience engagement What approach would be most appropriate for ? reaching each of the audiences you identified earlier? ‣ conventional web site ‣ Twitter ‣ less frequent but more in depth blogs ‣ commenting on public blogs ‣ sharing bookmarks ‣ Facebook ‣ Linkedin ‣ Wikipedia pages ‣ RSS feeds ‣ something else...

Editor's Notes