Decoding the Web


Published on


Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • 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>