Decoding the Web

“Putting the Web to work”1.800.835.1228

info@newcircleconsulting.com

Decoding the Web: A Technical Perspective

The Web Design Conference

October 18, 2007

Agenda

• Big Picture• Server Side Technologies• Client Side Technologies• CSS• CMS• Web 2.0

Big Picture

Browser

WebServer

Internet

HTTP RequestsHTTP Requests

HTML pageHTML page

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

Netscape

Opera Mini

* Source: http://en.wikipedia.org/wiki/Web_browser

HTML and HTTP

• HTML – Hypertext Markup Language• HTTP – Hypertext Transfer Protocol

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

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

Client Side Technologies

• Client side technologies run on the client browser

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

• Document Object Model

• document.form.name.value.length

• window.location="http://someplace.com"

• window.history.go(-1)

CSS – Cascading Style Sheet

• CSS makes it possible to separate a web page’s content from its presentation

Thinking Outside the “Table”

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>

CSS Techniques Example: Drop Shadow

Round-cornered or Edged Boxes

* Boxes can stretch along with the content inside.

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>

Sliding-window Tabs

<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> ……

</div>

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

CMS – Content Management System

• Scope: – Entire site– Part of site

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

• Open Source PHP/MySQL based CMS Joomla!Pligg

Drupal PHPNuke

WordPress MediaWiKi

• Other Packages

OpenACS Eribium (RoR)

Geego cms Radiant (RoR)

CMS Packages

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

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

History of Social Networking/Blogging

Source: from Pete Cashmore at Mashable

Twitter.com Monthly Unique Visitors

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

• Goals– Smooth,

un-interrupted User Experience

• Features– Partial Refresh– Visual Effects

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

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

Keep content fresh

• Applications– News, weather, stocks, time, and new widgets all

enabling disaggregated media experiences

• Ajax Pattern– Periodic refresh

• Example– Gmail

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

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”

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”>

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.

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

Q and A

Lin Chen

New Circle Consulting

lin@newcircleconsulting.com

Decoding the Web

web page http

ajax example

technologies css cms

web designers

web pages content

ajax frameworks

technologies client

web pages syntax

Technology

Decoding the Mark of the Beast

Decoding The SJ Semaphore

Decoding the realty challenges

Decoding the Debate on "Frankenfood."

Decoding the Passages

Decoding the Social Web

Decoding The Meal Equivalency Factor

Decoding Web Content with Scout

Pearson Decoding Adaptive v5 Web

Decoding the Digital Opportunity in...

Decoding the Brain: Neural Representation and the Limits...

Decoding The Dragon: China

SIEMs - Decoding The Mayhem

Decoding Global Talent - · PDF fileUkraine Sweden France...

Decoding the Resume Development Process

Decoding the Mayan Glyphs