Building Web Interfaces

3,716 views

Published on

Presentation for the East London University Hack Day explaining the technologies used to build web interfaces.

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,716
On SlideShare
0
From Embeds
0
Number of Embeds
29
Actions
Shares
0
Downloads
108
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Building Web Interfaces

  1. 1. Building Web Interfaces Christian Heilmann UEL Hack Day London, UK, October 2007
  2. 2. <ul><li>Building web interfaces is a fun task. </li></ul>
  3. 3. <ul><li>The technologies involved are easy to learn. </li></ul>
  4. 4. <ul><li>Text + Images + Multimedia </li></ul><ul><li>= </li></ul><ul><li>Content </li></ul><ul><li>“ What is it about” </li></ul>
  5. 5. <ul><li>HTML </li></ul><ul><li>= </li></ul><ul><li>Structure </li></ul><ul><li>“ What is what” </li></ul>
  6. 6. <ul><li>CSS + Background images </li></ul><ul><li>= </li></ul><ul><li>Look and Feel </li></ul><ul><li>“ How should it be displayed” </li></ul>
  7. 7. <ul><li>Scripting and Extensions </li></ul><ul><li>= </li></ul><ul><li>Behaviour </li></ul><ul><li>“ How should it behave and react?” </li></ul>
  8. 8. <ul><li>Playing each of these to their respective strengths = </li></ul><ul><li>great web products. </li></ul>
  9. 9. <ul><li>There is one thing to consider though. </li></ul>
  10. 10. <ul><li>Browser </li></ul><ul><li>Operating System </li></ul><ul><li>Screen Size </li></ul><ul><li>Screen Resolution </li></ul><ul><li>Browser Size </li></ul><ul><li>Plugins and configurations </li></ul><ul><li>Input Device </li></ul><ul><li>Reading Level </li></ul><ul><li>Vision </li></ul><ul><li>Level of Understanding </li></ul><ul><li>Motor accuracy </li></ul>
  11. 11. <ul><li>Browser </li></ul><ul><li>Operating System </li></ul><ul><li>Screen Size </li></ul><ul><li>Screen Resolution </li></ul><ul><li>Browser Size </li></ul><ul><li>Plugins and configurations </li></ul><ul><li>Input Device </li></ul><ul><li>Reading Level </li></ul><ul><li>Vision </li></ul><ul><li>Level of Understanding </li></ul><ul><li>Motor accuracy </li></ul>UNKNOWN
  12. 12. <ul><li>Keeping this in mind makes you a true developer for the web. </li></ul>
  13. 13. <ul><li>Be paranoid. </li></ul><ul><li>Expect the failure. </li></ul>
  14. 14. <ul><li>Yahoo! has to do that day-in day-out. </li></ul>
  15. 15. <ul><li>People trust us with their data and use our products to connect with other people. </li></ul>
  16. 16. <ul><li>This is why we hire great developers. </li></ul>
  17. 17. <ul><li>This is also why we use their knowledge to make things easier for all. </li></ul>
  18. 18. <ul><li>Instead of constantly re-inventing we spy good solutions and learn from mistakes. </li></ul>
  19. 19. <ul><li>The outcome of this research is available to you! </li></ul>
  20. 20. http://developer.yahoo.com
  21. 21. <ul><li>Learn about: </li></ul><ul><li>Design Patterns </li></ul><ul><li>Performance </li></ul><ul><li>Security </li></ul>
  22. 22. <ul><li>Tap into the collective wisdom: </li></ul>
  23. 24. <ul><li>Get friggin famous!!!! </li></ul>
  24. 25. <ul><li>The Yahoo! User Interface Library </li></ul>
  25. 26. <ul><li>CSS Framework </li></ul><ul><li>JavaScript Library </li></ul><ul><li>Widget Framework </li></ul><ul><li>Debugging Utility </li></ul>
  26. 27. <ul><li>CSS Components: </li></ul><ul><ul><li>CSS Reset </li></ul></ul><ul><ul><li>CSS Fonts </li></ul></ul><ul><ul><li>CSS Grids </li></ul></ul><ul><ul><li>Making CSS layouts predictable and working across browsers and operating systems </li></ul></ul>=
  27. 28. <ul><li>JavaScript Components: </li></ul><ul><ul><li>DOM </li></ul></ul><ul><ul><li>Event </li></ul></ul><ul><ul><li>Connection </li></ul></ul><ul><ul><li>Animation </li></ul></ul><ul><ul><li>Making JavaScript development less random across browsers and easier to concentrate on the architecture of your scripts. </li></ul></ul>=
  28. 29. <ul><li>Widgets: </li></ul><ul><ul><li>Panel Dialog Autocomplete DataTable Slider Menu Calendar Colorpicker Tabview </li></ul></ul><ul><ul><li>Rich Text Editor </li></ul></ul><ul><ul><li>Creating HTML/CSS/JS based RIAs with tested and fully skinnable components. </li></ul></ul>=
  29. 30. <ul><li>Debugging </li></ul><ul><ul><li>YUI Logger is a cross-browser, cross-platform debugging console. </li></ul></ul><ul><ul><li>YUITest is a unit and component testing framework in JavaScript </li></ul></ul>
  30. 31. <ul><li>Industrial Strength </li></ul><ul><li>for everyday solutions </li></ul>
  31. 32. <ul><li>Comes with full documentation, examples, cheatsheets and quick start guides. </li></ul><ul><li>http://developer.yahoo.com/yui/docs </li></ul>
  32. 33. <ul><li>http://tech.groups.yahoo.com/group/ydn-javascript/ </li></ul>
  33. 34. <ul><li>Or at Sourceforge: </li></ul><ul><li>http://sourceforge.net/projects/yui </li></ul>
  34. 35. <ul><li>Others already benefit: </li></ul>
  35. 36. http://tech.groups.yahoo.com/group/ydn-javascript/links/YUI_Implementations_001149002597/
  36. 37. http://tech.groups.yahoo.com/group/ydn-javascript/links/YUI_Implementations_001149002597/ Newsvine, Opera, O’Reilly, Dow Jones Index, Paypal, Slashdot, Digg, SugarCRM, VersionTracker,iFilm, vBulletin, ebay
  37. 38. <ul><li>We also like to tell people about cool YUI stuff. </li></ul>
  38. 39. http://yuiblog.com
  39. 40. <ul><li>Now go + check the YUI: </li></ul><ul><li>http://developer.yahoo.com/yui/ </li></ul>
  40. 41. <ul><li>Play with our APIs and Feeds. </li></ul>
  41. 42. <ul><li>Answers Local Mail Maps Search Shopping Travel del.icio.us Flickr™ MyBlogLog Pipes Upcoming Webjay Finance HotJobs Traffic Weather </li></ul>
  42. 43. <ul><li>Get SDKs to play with our applications: </li></ul><ul><li>Messenger </li></ul><ul><li>Music </li></ul><ul><li>Search </li></ul><ul><li>Widgets </li></ul>
  43. 44. <ul><li>Christian Heilmann </li></ul><ul><li>http://wait-till-i.com </li></ul><ul><li>http://icant.co.uk </li></ul>Thank you! http://creativecommons.org/licenses/by-sa/3.0/

×