decoding the web
DESCRIPTION
Oct182007TRANSCRIPT
“Putting the Web to work”1.800.835.1228
Decoding the Web: A Technical Perspective
The Web Design Conference
October 18, 2007
“Putting the Web to work”1.800.835.1228
Agenda
• Big Picture• Server Side Technologies• Client Side Technologies• CSS• CMS• Web 2.0
“Putting the Web to work”1.800.835.1228
Big Picture
Browser
WebServer
Internet
HTTP RequestsHTTP Requests
HTML pageHTML page
“Putting the Web to work”1.800.835.1228
Browsers
• Browsers are software applications
• Market share for August, 2007 * – Internet Explorer - 78.68% – Firefox - 14.56% – Safari - 4.68% – Opera - 0.88%
• What does this mean for web designers?
– Cross-browser compliance
Internet Explorer
Firefox
Safari
Opera
Netscape
Opera Mini
* Source: http://en.wikipedia.org/wiki/Web_browser
“Putting the Web to work”1.800.835.1228
HTML and HTTP
• HTML – Hypertext Markup Language• HTTP – Hypertext Transfer Protocol
“Putting the Web to work”1.800.835.1228
Requesting a Web Page
• URL - Uniform Resource Locator– URL uniquely identifies ONE web page.
– Domain Name– IP (Internet Protocol) Address– DNS (Domain Name Server)
DNSbarrycon.com 63.251.92.197
“Putting the Web to work”1.800.835.1228
Server Side Technologies
Web Server
- Apache- IIS- AOL Server- …
Server Side Technologies
- Cold Fusion - PHP - JSP - ASP - …
Database
- Oracle- SQL Server- MySQL- Postgres- …
Connect to DB and requests data
Data retrieved and “plugged” into HTML
internet
HTTP RequestsHTML Web
Pages
“Putting the Web to work”1.800.835.1228
Client Side Technologies
• Client side technologies run on the client browser
“Putting the Web to work”1.800.835.1228
JavaScript
• Most popular scripting language running on the client browser
• JavaScript can be used on all prominent browsers• JavaScript can be also used on the server-side (SSJS)• Commonly used to interact with HTML elements
– Validate text fields– Disable buttons– Redirect to another page– Change the look of a web page–
http://www.newcircleconsulting.com/ajax/Oct18/javascript.html
“Putting the Web to work”1.800.835.1228
DOM
• Document Object Model
• document.form.name.value.length
• window.location="http://someplace.com"
• window.history.go(-1)
“Putting the Web to work”1.800.835.1228
CSS – Cascading Style Sheet
• CSS makes it possible to separate a web page’s content from its presentation
“Putting the Web to work”1.800.835.1228
More Than Just Color and Layout
.img-wrapper {background:
url(images/shadow.gif) no-repeat bottom right;
float: left;line-height: 0;}
.img-wrapper img {background: #fff;padding: 4px;border: 1px solid #aaa;position: relative;left: -5px;top: -5px;}
<div class="img-wrapper">
<img src=“alex.jpg" width="120" height="120" />
</div>
CSS Techniques Example: Drop Shadow
HTML
“Putting the Web to work”1.800.835.1228
Round-cornered or Edged Boxes
* Boxes can stretch along with the content inside.
“Putting the Web to work”1.800.835.1228
Tool Tips
Overall Recruiting Efficiency <a class="info" href="#">[?]<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
“Putting the Web to work”1.800.835.1228
Sliding-window Tabs
<div id="slidetabsmenu">
<ul>
<li id=current><a href="/admin/" title="Admin Home"><span>Admin Home</span></a></li>
<li ><a href="/admin/orders/" title="Orders"><span>Orders</span></a></li> ……
</ul>
</div>
“Putting the Web to work”1.800.835.1228
Print CSS
• Use CSS to build printable version of your web pages• Syntax: <link href="/css/print.css" rel="stylesheet" type="text/css"/
media="print">• Sample ideas:
• Hide graphical heavy and other navigation and side display for print• Adjust width of page for print
Navigation menu and graphics are removed
Put company info in a prominent
position for branding
Darkened header font color
“Putting the Web to work”1.800.835.1228
CMS – Content Management System
• Scope: – Entire site– Part of site
“Putting the Web to work”1.800.835.1228
CMS – Content Management System
• Custom build vs. package + customization– Time and budget– Staff members technical level– Client flexibility to work around the limitations of the
chosen packages– Matching the right package to client requirements
“Putting the Web to work”1.800.835.1228
• Open Source PHP/MySQL based CMS Joomla!Pligg
Drupal PHPNuke
WordPress MediaWiKi
• Other Packages
OpenACS Eribium (RoR)
Geego cms Radiant (RoR)
CMS Packages
“Putting the Web to work”1.800.835.1228
Web 2.0
• Web 2.0 characteristics– An architecture of participation that
encourages users to add value to the application as they use it
• Some social networking aspects• User-generated content
– A rich, interactive, user-friendly interface based on Ajax
“Putting the Web to work”1.800.835.1228
Sites with Social Networking Aspects
• Common Features– User profiles– Find and add friends to
one’s profile– Groups that users can
create or join– Messaging feature– Other online
communication/interactive features
“Putting the Web to work”1.800.835.1228
History of Social Networking/Blogging
Source: from Pete Cashmore at Mashable
“Putting the Web to work”1.800.835.1228
Expansion of Social Networking
Worldwide Growth of Selected Social Networking Sites Total Worldwide Home/Work Locations Among Internet Users Age 15+ Source: comScore World Metrix
Total Unique Visitors (000) Social Networking Site J un-06 J un-07 % Change MySpace 66,401 114,147 72 Facebook 14,083 52,167 270 Hi5 18,098 28,174 56 Friendster 14,917 24,675 65 Orkut 13,588 24,120 78 Bebo 6,694 18,200 172 Tagged 1,506 13,167 774
Total US Population: 302 Millions, Internet Users: 213 Million (Aug 07 data)
Total World Population: 6575 Millions, Internet Users: 1173 Millions
“Putting the Web to work”1.800.835.1228
Ajax
• Goals– Smooth,
un-interrupted User Experience
• Features– Partial Refresh– Visual Effects
“Putting the Web to work”1.800.835.1228
27
Ajax Example: Be Responsive
• Ajax Pattern– Asynchronized call & Partial refresh– “Pop-up” div– Dynamic insert
• Add a row
• Example– Basecamp – to-do list– Basecamp – file upload– Illumallc.com– Flickr
“Putting the Web to work”1.800.835.1228
28
Ajax Example: Page Customization
• Applications– Portals– Social networks
• Ajax Pattern– Drag and Drop
• Cursor Invitation • Drop sites (visual cues showing where an object can be dropped)
– Collapse/Open transitions• Convention is your friend• Cursor invitation
• Example– iGoogle
“Putting the Web to work”1.800.835.1228
29
Keep content fresh
• Applications– News, weather, stocks, time, and new widgets all
enabling disaggregated media experiences
• Ajax Pattern– Periodic refresh
• Example– Gmail
“Putting the Web to work”1.800.835.1228
30
Design Challenge: Call attention to new or changed information
• Applications:– Post new message– Make something visible based on user’s input
• Ajax Pattern– Spotlight
• Example– Basecamp post a message
“Putting the Web to work”1.800.835.1228
31
Cue the user that an object is interactive
• Applications:– Any interactive webpage
• Ajax Pattern– Cursor invitation– Brighten/dim transition– Highlight transition
• Example– Chemistrybridal.com
• Color swatch• Click edit “look name”
“Putting the Web to work”1.800.835.1228
Ajax Frameworks
• What– Ajax frameworks offer pre-built components
• Why– to help accelerate Ajax development, reduce error and
make the code easier to maintain• Advanced and complex features can be built with only a
few lines of code• No or fewer cross-browser issues
• How– For pure JavaScript based frameworks like DoJo,
Prototype and YUI, just include the js libraries<script type=“text/javascript” src=“/inc/prototype.js”>
“Putting the Web to work”1.800.835.1228
33
Popular Open Source Frameworks
– Prototype and Scriptaculous (www.prototypejs.org and script.aculo.us).
– Yahoo! User Interface Library (developer.yahoo.com/yui)
– Dojo (dojotoolkit.org)
Three examples above are pure JavaScriptlibraries, and are easily integrated
– Direct Web Reporting (getahead.org/dwr)– DWR is a Java AJAX framework that dynamically generates
JavaScript based on Java classes from the application server.
– Google Web Toolkit (code.google.com/webtoolkit)• 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.
“Putting the Web to work”1.800.835.1228
Brave New World
• For designers, it means you will soon be able to do more without relying on a (server-side) developer
• For everyone else, it means the web will be getting more interesting more quickly
“Putting the Web to work”1.800.835.1228
Q and A
Lin Chen
New Circle Consulting