Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Decoding the Web


Published on


Published in: Technology
  • Be the first to comment

Decoding the Web

  1. 1. Decoding the Web: A Technical Perspective The Web Design Conference October 18, 2007
  2. 2. Agenda <ul><li>Big Picture </li></ul><ul><li>Server Side Technologies </li></ul><ul><li>Client Side Technologies </li></ul><ul><li>CSS </li></ul><ul><li>CMS </li></ul><ul><li>Web 2.0 </li></ul>
  3. 3. Big Picture Browser Web Server Internet HTTP Requests HTTP Requests HTML page HTML page
  4. 4. Browsers <ul><li>Browsers are software applications </li></ul><ul><li>Market share for August, 2007 * </li></ul><ul><ul><li>Internet Explorer - 78.68% </li></ul></ul><ul><ul><li>Firefox - 14.56% </li></ul></ul><ul><ul><li>Safari - 4.68% </li></ul></ul><ul><ul><li>Opera - 0.88% </li></ul></ul><ul><li>What does this mean for web designers? </li></ul><ul><ul><li>Cross-browser compliance </li></ul></ul>* Source:
  5. 5. HTML and HTTP <ul><li>HTML – H yper t ext M arkup L anguage </li></ul><ul><li>HTTP – H yper t ext T ransfer P rotocol </li></ul>
  6. 6. Requesting a Web Page <ul><li>URL - U niform R esource L ocator </li></ul><ul><ul><li>URL uniquely identifies ONE web page. </li></ul></ul><ul><ul><li>Domain Name </li></ul></ul><ul><ul><li>IP ( I nternet P rotocol) Address </li></ul></ul><ul><ul><li>DNS ( D omain N ame S erver) </li></ul></ul>DNS
  7. 7. Server Side Technologies <ul><li>Web Server </li></ul><ul><li>Apache - IIS - AOL Server - … </li></ul>Server Side Technologies - Cold Fusion - PHP - JSP - ASP - … <ul><li>Database </li></ul><ul><li>Oracle - SQL Server - MySQL - Postgres - … </li></ul>Connect to DB and requests data Data retrieved and “plugged” into HTML internet HTTP Requests HTML Web Pages
  8. 8. Client Side Technologies <ul><li>Client side technologies run on the client browser </li></ul>
  9. 9. JavaScript <ul><li>Most popular scripting language running on the client browser </li></ul><ul><li>JavaScript can be used on all prominent browsers </li></ul><ul><li>JavaScript can be also used on the server-side (SSJS) </li></ul><ul><li>C ommonly used to interact with HTML elements </li></ul><ul><ul><li>Validate text fields </li></ul></ul><ul><ul><li>Disable buttons </li></ul></ul><ul><ul><li>Redirect to another page </li></ul></ul><ul><ul><li>Change the look of a web page </li></ul></ul><ul><ul><li> </li></ul></ul>
  10. 10. DOM <ul><li>D ocument O bject M odel </li></ul><ul><ul><ul><li>document </li></ul></ul></ul><ul><ul><ul><li>window . location =&quot;; </li></ul></ul></ul><ul><ul><ul><li>window.history.go(-1) </li></ul></ul></ul>
  11. 11. CSS – C ascading S tyle S heet <ul><li>CSS makes it possible to separate a web page’s content from its presentation </li></ul>
  12. 12. Thinking Outside the “Table”
  13. 13. More Than Just Color and Layout <ul><li>.img-wrapper { </li></ul><ul><li>background: url(images/shadow.gif) no-repeat bottom right; </li></ul><ul><li>float: left; </li></ul><ul><li>line-height: 0; </li></ul><ul><li>} </li></ul><ul><li>.img-wrapper img { </li></ul><ul><li>background: #fff; </li></ul><ul><li>padding: 4px; </li></ul><ul><li>border: 1px solid #aaa; </li></ul><ul><li>position: relative; </li></ul><ul><li>left: -5px; </li></ul><ul><li>top: -5px; </li></ul><ul><li>} </li></ul><div class=&quot;img-wrapper&quot;> <img src=“ alex .jpg&quot; width=&quot;120&quot; height=&quot;120&quot; /> </div> CSS Techniques Example: Drop Shadow HTML
  14. 14. Round-cornered or Edged Boxes * Boxes can stretch along with the content inside.
  15. 15. Tool Tips Overall Recruiting Efficiency <a class=&quot;info&quot; href=&quot;#&quot;>[?] <span>Recruiting efficiency is calcuated by subtrating RCR from 100%. A recruiting efficiency of under 85% indicates significant potential for cost reduction.</span> </a> HTML
  16. 16. Sliding-window Tabs <div id=&quot;slidetabsmenu&quot;> <ul> <li id=current><a href=&quot;/admin/&quot; title=&quot;Admin Home&quot;><span>Admin Home</span></a></li> <li ><a href=&quot;/admin/orders/&quot; title=&quot;Orders&quot;><span>Orders</span></a></li> …… </ul> </div>
  17. 17. Print CSS <ul><li>Use CSS to build printable version of your web pages </li></ul><ul><li>Syntax: <link href=&quot;/css/print.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/ media=&quot;print&quot;> </li></ul><ul><li>Sample ideas: </li></ul><ul><ul><ul><li>Hide graphical heavy and other navigation and side display for print </li></ul></ul></ul><ul><ul><ul><li>Adjust width of page for print </li></ul></ul></ul>Navigation menu and graphics are removed Put company info in a prominent position for branding Darkened header font color
  18. 18. CMS – C ontent M anagement S ystem <ul><li>Scope: </li></ul><ul><ul><li>Entire site </li></ul></ul><ul><ul><li>Part of site </li></ul></ul>
  19. 19. CMS – C ontent M anagement S ystem <ul><li>Custom build vs. package + customization </li></ul><ul><ul><li>Time and budget </li></ul></ul><ul><ul><li>Staff members technical level </li></ul></ul><ul><ul><li>Client flexibility to work around the limitations of the chosen packages </li></ul></ul><ul><ul><li>Matching the right package to client requirements </li></ul></ul>
  20. 20. <ul><li>Open Source PHP/MySQL based CMS Joomla! Pligg </li></ul><ul><ul><li>Drupal PHPNuke </li></ul></ul><ul><ul><li>WordPress MediaWiKi </li></ul></ul><ul><li>Other Packages </li></ul><ul><ul><li>OpenACS Eribium (RoR) </li></ul></ul><ul><ul><li>Geego cms Radiant (RoR) </li></ul></ul>CMS Packages
  21. 21. Web 2.0 <ul><li>Web 2.0 characteristics </li></ul><ul><ul><li>An architecture of participation that encourages users to add value to the application as they use it </li></ul></ul><ul><ul><ul><li>Some s ocial networking aspects </li></ul></ul></ul><ul><ul><ul><li>User-generated content </li></ul></ul></ul><ul><ul><li>A rich, interactive, user-friendly interface based on Ajax </li></ul></ul>
  22. 22. Sites with Social Networking Aspects <ul><li>Common Features </li></ul><ul><ul><li>User profiles </li></ul></ul><ul><ul><li>Find and add friends to one’s profile </li></ul></ul><ul><ul><li>Groups that users can create or join </li></ul></ul><ul><ul><li>Messaging feature </li></ul></ul><ul><ul><li>Other online communication/interactive features </li></ul></ul>
  23. 23. History of Social Networking/Blogging S ource: from Pete Cashmore at Mashable
  24. 24. Monthly Unique Visitors
  25. 25. E xpansion of S ocial N etworking Total US Population: 302 Millions, Internet Users: 213 Million (Aug 07 data) Total World Population: 6575 Millions, Internet Users: 1173 Millions
  26. 26. Ajax <ul><li>Goals </li></ul><ul><ul><li>Smooth, un-interrupted User Experience </li></ul></ul><ul><li>Features </li></ul><ul><ul><li>Partial Refresh </li></ul></ul><ul><ul><li>Visual Effects </li></ul></ul>
  27. 27. Ajax Example: Be Responsive <ul><li>Ajax Pattern </li></ul><ul><ul><li>Asynchronized call & Partial refresh </li></ul></ul><ul><ul><li>“ Pop-up” div </li></ul></ul><ul><ul><li>Dynamic insert </li></ul></ul><ul><ul><ul><li>Add a row </li></ul></ul></ul><ul><li>Example </li></ul><ul><ul><li>Basecamp – to-do list </li></ul></ul><ul><ul><li>Basecamp – file upload </li></ul></ul><ul><ul><li> </li></ul></ul><ul><ul><li>Flickr </li></ul></ul>
  28. 28. Ajax Example: Page Customization <ul><li>Applications </li></ul><ul><ul><li>Portals </li></ul></ul><ul><ul><li>Social networks </li></ul></ul><ul><li>Ajax Pattern </li></ul><ul><ul><li>Drag and Drop </li></ul></ul><ul><ul><ul><li>Cursor Invitation </li></ul></ul></ul><ul><ul><ul><li>Drop sites (visual cues showing where an object can be dropped) </li></ul></ul></ul><ul><ul><li>Collapse/Open transitions </li></ul></ul><ul><ul><ul><li>Convention is your friend </li></ul></ul></ul><ul><ul><ul><li>Cursor invitation </li></ul></ul></ul><ul><li>Example </li></ul><ul><ul><li>iG oogle </li></ul></ul>
  29. 29. Keep content fresh <ul><li>Applications </li></ul><ul><ul><li>News, weather, s tocks, time, and new widgets all enabling disaggregated media experiences </li></ul></ul><ul><li>Ajax Pattern </li></ul><ul><ul><li>Periodic refresh </li></ul></ul><ul><li>Example </li></ul><ul><ul><li>Gmail </li></ul></ul>
  30. 30. Design Challenge: Call attention to new or changed information <ul><li>Applications: </li></ul><ul><ul><li>Post new message </li></ul></ul><ul><ul><li>Make something visible based on user’s input </li></ul></ul><ul><li>Ajax Pattern </li></ul><ul><ul><li>Spotlight </li></ul></ul><ul><li>Example </li></ul><ul><ul><li>Basecamp post a message </li></ul></ul>
  31. 31. Cue the user that an object is interactive <ul><li>Applications: </li></ul><ul><ul><li>Any interactive webpage </li></ul></ul><ul><li>Ajax Pattern </li></ul><ul><ul><li>Cursor invitation </li></ul></ul><ul><ul><li>Brighten/dim transition </li></ul></ul><ul><ul><li>Highlight transition </li></ul></ul><ul><li>Example </li></ul><ul><ul><li> </li></ul></ul><ul><ul><ul><li>Color swatch </li></ul></ul></ul><ul><ul><ul><li>Click edit “look name” </li></ul></ul></ul>
  32. 32. Ajax Frameworks <ul><li>What </li></ul><ul><ul><li>Ajax frameworks offer pre-built components </li></ul></ul><ul><li>Why </li></ul><ul><ul><li>to help accelerate Ajax development, reduce error and make the code easier to maintain </li></ul></ul><ul><ul><ul><li>Advanced and complex features can be built with only a few lines of code </li></ul></ul></ul><ul><ul><ul><li>No or fewer cross-browser issues </li></ul></ul></ul><ul><li>How </li></ul><ul><ul><li>For pure JavaScript based frameworks like DoJo, Prototype and YUI, just include the js libraries </li></ul></ul><ul><ul><li><script type=“text/javascript” src=“/inc/prototype.js”> </li></ul></ul>
  33. 33. Popular Open Source Frameworks <ul><ul><li>Prototype and Scriptaculous ( and </li></ul></ul><ul><ul><li>Yahoo! User Interface Library ( </li></ul></ul><ul><ul><li>Dojo ( </li></ul></ul><ul><ul><li>T hree examples above are pure JavaScript </li></ul></ul><ul><ul><li>libraries, and are easily integrated </li></ul></ul><ul><ul><li>Direct Web Reporting ( </li></ul></ul><ul><ul><ul><ul><li>DWR is a Java AJAX framework that dynamically generates JavaScript based on Java classes from the application server. </li></ul></ul></ul></ul><ul><ul><li>Google Web Toolkit ( </li></ul></ul><ul><ul><ul><li>GWT is a Java-based AJAX framework that lets you write front-end UI components using Java, then use the GWT compiler to convert them into HTML and JavaScript files. </li></ul></ul></ul>
  34. 34. Brave New World <ul><li>For designers, it means you will soon be able to do more without relying on a (server-side) developer </li></ul><ul><li>For everyone else, it means the web will be getting more interesting more quickly </li></ul>
  35. 35. Q and A <ul><li>Lin Chen </li></ul><ul><li>New Circle Consulting </li></ul><ul><li>[email_address] </li></ul>