Decoding the Web

Decoding the Web: A Technical Perspective The Web Design Conference October 18, 2007

Agenda ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Big Picture Browser Web Server Internet HTTP Requests HTTP Requests HTML page HTML page

Browsers ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],* Source: http://en.wikipedia.org/wiki/Web_browser

HTML and HTTP ,[object Object],[object Object]

Requesting a Web Page ,[object Object],[object Object],[object Object],[object Object],[object Object],DNS barrycon.com 63.251.92.197

Server Side Technologies ,[object Object],[object Object],Server Side Technologies - Cold Fusion - PHP - JSP - ASP - … ,[object Object],[object Object],Connect to DB and requests data Data retrieved and “plugged” into HTML internet HTTP Requests HTML Web Pages

Client Side Technologies ,[object Object]

JavaScript ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

DOM ,[object Object],[object Object],[object Object],[object Object]

CSS – C ascading S tyle S heet ,[object Object]

Thinking Outside the “Table”

More Than Just Color and Layout ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],<div class="img-wrapper"> <img src=“ alex .jpg" width="120" height="120" /> </div> CSS Techniques Example: Drop Shadow HTML

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

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>

Print CSS ,[object Object],[object Object],[object Object],[object Object],[object Object],Navigation menu and graphics are removed Put company info in a prominent position for branding Darkened header font color

CMS – C ontent M anagement S ystem ,[object Object],[object Object],[object Object]

CMS – C ontent M anagement S ystem ,[object Object],[object Object],[object Object],[object Object],[object Object]

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],CMS Packages

Web 2.0 ,[object Object],[object Object],[object Object],[object Object],[object Object]

Sites with Social Networking Aspects ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

History of Social Networking/Blogging S ource: from Pete Cashmore at Mashable

Twitter.com Monthly Unique Visitors

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

Ajax ,[object Object],[object Object],[object Object],[object Object],[object Object]

Ajax Example: Be Responsive ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Ajax Example: Page Customization ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Keep content fresh ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Design Challenge: Call attention to new or changed information ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Cue the user that an object is interactive ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Ajax Frameworks ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Popular Open Source Frameworks ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Brave New World ,[object Object],[object Object]

Q and A ,[object Object],[object Object],[object Object]

Decoding the Web

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (7)

Similar to Decoding the Web

Similar to Decoding the Web (20)

Recently uploaded

Recently uploaded (20)

Decoding the Web