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

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (7)

Similaire à Decoding the Web

Similaire à Decoding the Web (20)

Dernier

Dernier (20)

Decoding the Web