GOING BEYOND THE MINIMUM Going from good

GOING BEYOND THE MINIMUM

Going from good to great on the client • Useful APIs to add functionality • Accessibility to ensure a big audience • Aesthetics to make it a pleasant experience

Persistence • Data stored on the client side – Provides a means for user-customization – Eliminates the need to retrieve the data off server – Facilitates off-line mode for web sites • Options available to you – Cookies; short strings, automatically copied to server – Local storage: short strings, not automatically copied – Database: structured data, not automatically copied

Persistence with cookies • You can set a string and then retrieve it again later on (e. g. , when user reloads the page) – You can control when the cookie expires. • The strings will also automatically be included in messages to servers in a specified domain – That way, your server programs (e. g. , PHP) also have access to this data, automatically. – Just as some browsers disallow AJAX calls to a file system, browsers may "forget" cookies that are set by HTML pages served from the file system.

Cookie example <!DOCTYPE html> <head> <script src="jquery-1. 8. 2. min. js"></script> <script src="jquery. cookie. js"></script> <script> $(document). ready(function() { var current. Count = $. cookie("countx"); var count. As. Number = parse. Float(current. Count); count. As. Number = is. Na. N(count. As. Number) ? 1 : count. As. Number+1; $. cookie("countx", count. As. Number, {expires: 365}); $("#counter"). text(count. As. Number); }); </script> </head> <body> <div id="counter"></div> </body> </html>

Persistence with local data • You can store data on the user's hard drive, then retrieve it later on. • Such data is not automatically sent to servers – Which can be very nice from a security standpoint – But note: As with cookies and client databases, all local data is stored unencrypted.

local. Storage example <!DOCTYPE html> <head> <script src="jquery-1. 8. 2. min. js"></script> <script> $(document). ready(function() { if (!window["local. Storage"]) { alert("No local storage. Should use cookie instead. "); } else { var current. Count = local. Storage["count"]; var count. As. Number = parse. Float(current. Count); count. As. Number = is. Na. N(count. As. Number) ? 1 : count. As. Number+1; local. Storage["count"] = count. As. Number; $("#counter"). text(count. As. Number); } }); </script> </head> <body> <div id="counter"></div> </body> </html>

Persistence with local database • For a while it looked like we were going to get standardized support for SQL on the client – And some versions of some browsers even had an implementation of this idea ("Web SQL") – But all of their implementations used the same library ("sqlite") – everybody liked it. – But the World Wide Web Consortium (W 3 C) requires at least 2 differing implementations (i. e. , not ok if everybody likes same implementation? !) – So now we are left without any standard that is widely implemented

Local database, example? • Haven't run across any examples yet that follow standards and work properly in multiple browsers, even from file system • So: – Stay tuned for the "indexed. DB" standard

APIs to get your creative juices flowing • There are literally thousands of Java. Script libraries (some standardized, some not) • Examples Geolocation Canvas Binary download Video Audio Animation Encryption Compression Drag and Drop String formatting Typography (as in fonts) XML manipulation Charting Threads ("web workers") File I/O Types (as in JS with types)

Geolocation <!DOCTYPE html><head> <script src="jquery-1. 8. 2. min. js"></script> <script> $(document). ready(function() { if (navigator. geolocation) { navigator. geolocation. get. Current. Position(callback. Function); } else { alert("Not supported"); } }); function callback. Function(pos) { $("#latlong"). text("lat: "+pos. coords. latitude+"; long: "+pos. coords. longitude); } </script> </head> <body><div id="latlong"></div></body> </html>

Drawing pictures on canvas <!DOCTYPE html><head> <script src="jquery-1. 8. 2. min. js"></script> <script> $(function() { var my. Canvas = $("#canvas 1"). get(0); var context = my. Canvas. get. Context("2 d"); context. fill. Style = "#00 ff 00"; context. fill. Rect(10, 40, 100, 200); // x, y, width, height context. stroke. Style = "#ff 0000"; context. move. To(200, 300); // x, y context. line. To(350, 350); // x, y context. stroke(); }); </script></head><body> <canvas id="canvas 1" height="400" width="400" height="400"></canvas> </body></html>

Definition of accessibility • Accessibility means that something can be used by the largest possible population • In the context of web sites, this word usually refers to making a web site usable by people who have disabilities of one sort or another

Examples of relevant disabilities • Difficulty seeing – E. g. , blindness, partial blindness, color blindness • Difficulty hearing – E. g. , deafness, hearing loss, perceptive loss • Difficulty with motor control (e. g. , clicking mouse) – E. g. , tremors from Parkinson's, etc, or just old age

In response to the "Who cares? " attitude • The USA and many other nations have officially defined access to information and communication technology, including the web, as a Basic Human Right – In other words, it's the in the same category as freedom of speech, freedom of religion, the right to safety, etc

In response to the "Who cares? " attitude • Enlarging the target user population (to include people with disabilities) also increases the value of the web site – Millions who have full or partial blindness – Millions who are fully or partially deaf – Tens of millions who are old enough to have some physical disability

How do people with disabilities cope? • • • Screen readers (audio) Screen magnifiers Color adjustment Braille readers Special kinds of keyboards and mice Video captioning

Example of a screen reader: JAWS • Search You. Tube for JAWS Reader videos or check these out… – http: //www. youtube. com/watch? v=Ro. M 9 j. FF 5 b 2 k – http: //www. youtube. com/watch? v=qi. KWTTt. Gq 7 U – http: //www. youtube. com/watch? v=C 4 SUIjggy. N 8 • Or download and try out JAWS – http: //www. freedomscientific. com/products/fs/ja ws-product-page. asp

Some simple accessibility techniques • Provide text for screen readers – – – Providing a title using the title element Supplementing link text with the title attribute Using alt attributes on img elements Using label elements to associate text labels with form controls Using caption elements to associate captions with data tables Combining adjacent image and text links for the same resource • Structure the page for screen readers – Creating a logical tab order through links, form controls, and objects – Using ol, ul and dl for lists or groups of links – Using semantic markup to mark emphasized or special text See http: //www. w 3. org/TR/WCAG 20 -TECHS/html for more. . .

Using alt attributes on img elements <img src="bighouse. gif" alt="Picture of house"> Screen readers will read the alt text of an image. The alt tag should describe any information that you want the user to understand about the image. For example, if the image means that there is an error, then the alt tag should say so. If an image does not convey any meaning (for example, it is purely decorative), then you should include an empty alt tag, as in <img src="prettybluebackground. gif" alt="">

Using label elements to associate text labels with form controls <label for="txt. Name">Enter your name: </label> <input id="txt. Name" type="text"> You can associate a label with just about any HTML element. The label is particularly useful form elements. Bonus: If a user clicks on a label element, then in some browsers, this will cause the browser to focus the text input cursor on that element. Double bonus: The bonus above is particularly handy for helping people who have poor motor control (e. g. , tremors) because you can create a BIG label that is easier for people to click on.

Using caption elements to associate captions with data tables <table> <caption>Subscriber information</caption> <tr><th scope="col">Name</th><th scope="col">Email</th></tr> <tr><td>Nancy</td><td>nancy@free. com</td></tr> <tr><td>Billy</td><td>billy@happy. com … Not only can you provide a caption for the table as a whole, but you can add a "summary" attribute for the table (not shown above) as well as headers for each of the columns (shown above). Bonus: You can associate different CSS on the header cells as in TH {font-weight: bold; color: #ff 0000; }

Using semantic markup to mark emphasized or special text <div>Your account has been <em>terminated</em>. To reactivate, you need to <strong>pay your outstanding balance</strong>. </div> Instead of using the <b> tag (as I showed long ago in an early lecture), use emphasis <em> or strong emphasis <strong>. A typical screen reader will emphasize these (e. g. , using volume, or by actually saying "emphasis"). Then, use CSS to control how these tags appear on the screen. Choose VERY different colors <style> em, strong { font-weight: bold; } strong {color: #ff 00 cc; } </style>

Aesthetics • Aesthetics is not directly about usability – Aesthetics is how “pretty” or “pleasing” it is – Usability is how well people can use it • But it is possible for apps to be so tragically ugly that their very ugliness hurts usability – See www. webpagesthatsuck. com for examples

Shape • Shapes with roughly 1: 1. 6 shape are soothing – So are circles, curve, smooth edges • Shapes with sharp and odd corners can be a bit stressful but can be very useful for drawing attention.

Space • Content is aesthetically pleasing if it – Comfortably fills the space – Avoids crowding the space – Is balanced within the space – And is separated by space from less-related content

Six possible page designs. Which one uses space most aesthetically?

Color • Color can be used – In harmony to create comfort • E. g. , what colors "go together" well – In a manner consistent with its context • E. g. , matching color meanings to content (GO OSU!) – In an unobtrusive fashion to fade into background • E. g. , black text on white background is "ordinary" – In disharmony to draw attention • E. g. , red text on white background can indicate an error

Principles for using design elements • • • Be minimal Present a visual balance Design with a focal point in mind Rely on harmonious colors Only emphasize what matters – Visual weight, color, typography, whitespace • Use motion and sound very sparingly • Elicit a reaction

Be minimal • Minimize the number of lines, size of shapes, amount of space consumed, and amount & intensity of color & texture • Benefits: – Improved aesthetics – Improved usability – Faster download – Lower bandwidth utilization

Present a visual balance • The page should not "feel" as if it's all on the left side, or all on the right side of the screen. – Visual weight = qualitative sum of lines, pointiness of shapes, size of shapes, amount of space consumed, intensity & amount of color & texture • "Rule of thirds" (using halves also sometimes looks good) – Divide your page into thirds, then into thirds, etc • Each side should have approximately the same visual weight as the other side

Examples of fairly well balanced pages

Design with a focal point in mind • What do you want users to focus on? – Both visually and mentally? I have a thing here (it's identified in the blue) and there's subordinate stuff beneath it. This or that?

Rely on harmonious colors • Three basic options for choosing mutually harmonious colors – Two colors opposite from one another on the color wheel (complementary colors) – Three or four colors spaced equally around the color wheel (triads and tetrads) – Three colors equally spaced but near each other (analogic) • Two helpful tools – http: //colorschemedesigner. com/ – https: //kuler. adobe. com/

Only emphasize what matters • Deviate from the rules above when you want to draw attention – Add visual weight by bolding, using color – Make headings more legible & striking by using sans-serif fonts (i. e. , fonts without curly-cues) – Use whitespace to set off things that matter – Use motion (very sparingly) to highlight things that are very important

FYI, fonts available on most browsers • • Arial Comic Sans MS Courier New Georgia Impact Times New Roman Trebuchet MS Verdana Your main sans-serif font Your main serif font

Elicit a reaction • Use images with colors and textures that elicit a reaction – To buy a product – To sympathize – To get angry – To take some action that you want You can get free images from Flickr (Creative Commons) – be sure to give credit where due.

Examples of great web sites • www. apple. com – Notice the… • • • Minimalism Visual balance Use of harmonious colors Visual emphasis on what matters most Lack of visual emphasis on what matters least The attempt to provoke a desire to be just as cool as Apple thinks its products are

Examples of great web sites • www. google. com – Notice the… • • • Minimalism Visual balance Use of harmonious colors Visual emphasis on what matters most Lack of visual emphasis on what matters least The attempt to make you think that using Google products is fun

Example of a good web site • www. oregonstate. edu – Notice the… • Absence of any sense of minimalism • The moderate level of visual balance • The use of many colors, some of which are harmonious and some of which clash for no obvious reason • Visual emphasis on a few key messages (top of screen) • Somewhat less visual emphasis on low priority content • The attempt to make you think OSU has got a TON of exciting, interesting stuff going on (and it does!)