1 / 40

Going beyond the minimum

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

jsnodgrass
Download Presentation

Going beyond the minimum

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Going beyond the minimum

  2. 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

  3. 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

  4. 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.

  5. Cookie example <!DOCTYPE html> <head> <script src="jquery-1.8.2.min.js"></script> <script src="jquery.cookie.js"></script> <script> $(document).ready(function() { varcurrentCount = $.cookie("countx"); varcountAsNumber = parseFloat(currentCount); countAsNumber = isNaN(countAsNumber) ? 1 : countAsNumber+1; $.cookie("countx", countAsNumber, {expires: 365}); $("#counter").text(countAsNumber); }); </script> </head> <body> <div id="counter"></div> </body> </html>

  6. 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.

  7. localStorage example <!DOCTYPE html> <head> <script src="jquery-1.8.2.min.js"></script> <script> $(document).ready(function() { if (!window["localStorage"]) { alert("No local storage. Should use cookie instead."); } else { varcurrentCount = localStorage["count"]; varcountAsNumber = parseFloat(currentCount); countAsNumber = isNaN(countAsNumber) ? 1 : countAsNumber+1; localStorage["count"] = countAsNumber; $("#counter").text(countAsNumber); } }); </script> </head> <body> <div id="counter"></div> </body> </html>

  8. 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 (W3C) 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

  9. 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 "indexedDB" standard

  10. APIs to get your creative juices flowing • There are literally thousands of JavaScript 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)

  11. Geolocation <!DOCTYPE html><html><head> <script src="jquery-1.8.2.min.js"></script> <script> $(document).ready(function() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(callbackFunction); } else { alert("Not supported"); } }); function callbackFunction(pos) { $("#latlong").text("lat:"+pos.coords.latitude+";long:"+pos.coords.longitude); } </script> </head> <body><div id="latlong"></div></body> </html>

  12. Drawing pictures on canvas <!DOCTYPE html><html><head> <script src="jquery-1.8.2.min.js"></script> <script> $(function() { var myCanvas = $("#canvas1").get(0); var context = myCanvas.getContext("2d"); context.fillStyle = "#00ff00"; context.fillRect(10, 40, 100, 200); // x, y, width, height context.strokeStyle = "#ff0000"; context.moveTo(200, 300); // x, y context.lineTo(350, 350); // x, y context.stroke(); }); </script></head><body> <canvas id="canvas1" height="400" width="400" height="400"></canvas> </body></html>

  13. 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

  14. 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

  15. 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

  16. 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

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

  18. Example of a screen reader: JAWS • Search YouTube for JAWS Reader videos or check these out… • http://www.youtube.com/watch?v=RoM9jFF5b2k • http://www.youtube.com/watch?v=qiKWTTtGq7U • http://www.youtube.com/watch?v=C4SUIjggyN8 • Or download and try out JAWS • http://www.freedomscientific.com/products/fs/jaws-product-page.asp

  19. 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 imgelements • 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.w3.org/TR/WCAG20-TECHS/html.html for more...

  20. Using alt attributes on img elements <imgsrc="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 <imgsrc="prettybluebackground.gif" alt="">

  21. Using label elements to associate text labels with form controls <label for="txtName">Enter your name:</label> <input id="txtName" 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.

  22. Using caption elements to associate captions with data tables <table> <caption>Subscriber information</caption> <tr><thscope="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: #ff0000;}

  23. 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: #ff00cc;} </style>

  24. 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

  25. Shape • Shapes with roughly 1:1.6 shape are soothing • So are circles, curve, smooth edges • Shapes with sharpand odd cornerscan be a bitstressfulbut can be very useful for drawing attention.

  26. 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

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

  28. 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

  29. 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

  30. 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

  31. 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, then into thirds, etc • Each side should have approximately the same visual weight as the other side

  32. Examples of fairly well balanced pages

  33. 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 subordinatestuff beneath it. This or that?

  34. 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/

  35. 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 very sparingly) to highlight things that are very very important

  36. 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

  37. 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.

  38. 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

  39. 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

  40. 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!)

More Related