Ingredients RSS Open APIs

Microcontent AJAX Email & SMS Podcasting Sharing

Web 2.0:
Ground Up
Like beef!
Amy Hoy, OmniTI amy@omniti.com http://www.ahoyhere.com/

Combine ingredients. Shake well.

NOW in v2.0!

Web What?
• “Web 2.0” is buzzword-compliant • Some smart people even say we’re on
version 3.0 by now...

• But it’s handy for encapsulating a whole
mess of cool, modern stuff that’s going on

What I’m Covering
• What Web 2.0 means — on every level • How to plan for Web 2.0 features
(existing and crazy future stuff) up front to upgrade later with Web 2.0 goodies PHP applications

• How to create PHP apps which are easy • How (and when) to use Ajax in your • Other cool stuff you can do

And That Means...?
• Web As Platform™! • Improved and alternate interfaces
(emails, SMS) Remixing.

• Openness: APIs and web services. • Less broadcast, more podcast • Give users control

ooo, culture!

Web 2.0 Culture
culture, noun
[with adj.] the attitudes and behavior characteristic of a particular social group

Web 2.0 is...
• Not just technology • What makes Web 2.0 particularly
interesting is that it’s a culture, and an aesthetic

• People are very passionate about it • Trying to implement Web 2.0
technology without embracing the culture is a great way to mark yourself as a “clueless suit”

The Remix Culture
• No, you didn’t stumble into a talk on
music

• The “Remix Culture” is a big part of the
whole Web 2.0 mystique

• Remixing and mashups occur when

data and services that would otherwise be closed and proprietary are opened up

• Then people can combine them

Cool Remixes
• Ajax / Google Maps real-time server • Housing Maps — http://
housingmaps.com/ monitoring — http://www.kosmo.com/ ajaxjsrsgoogle/monitor.php

• Mappr — http://www.mappr.com/ and • More coming soon!

Colr — http://krazydad.com/colrpickr/

Housing Maps

Hobbyists
• Web 2.0 is largely driven by hobbyists • Even the companies doing it create a
hobbyist-type atmosphere (Google, Flickr)

• The key is passion, and personal interest • People are doing stuff they’re really into,
and so others are into it too way

• Often the idea is to help others in some

Community
• Most successful Web 2.0 endeavors
are focused on community in some way

• Whether it’s mapping available

housing from Craigslist on your local Google Maps area, or browsing Flickr photos by the color wheel, or getting people together to talk about their dreams the community, is part of the “authenticity”

• The focus on community, or servicing

Components of Web 2.0

What is Syndication?
• All those little orange buttons
on web sites...

• Most periodically updated web
sites have syndication files called feeds

• No more visiting each web site • XML-based feed formats allow

you follow to see if it’s updated readers to get updated site content in their favorite reader software

Where It’s Used
• Blogs — they started the syndication
explosion

• Podcasting — the magic of podcasting
are special RSS feeds used to funnel MP3 files to iPods or other players

• Community Content — del.icio.us,

43Things, Flickr, etc., let people keep up to date on people, topics, tags, projects (Basecamp), and more.

Why It’s Awesome
• It makes it possible to keep track of
many more web sites/topics than is feasible to visit daily reader

• It puts the power in the hands of the • It’s purely about content • It allows for sites to share or aggregate
content from multiple sources

Syndication Formats
• Really Simple Syndication (RSS)
started it all

• Atom (No Acronym) is slightly more
complex than RSS, but very similar

• The RSS vs Atom holy wars are

apparently never ending, but it’s not really a big deal either way

(API)

Open APIs
• API stands for Application
Programming Interface

• But really, a great explanation is • APIs make closed web sites and
look! it's open!
services open and usable from remote web sites or software

“How my software can get to your data.”

• eBay, Amazon, Google Maps, etc., all
have great open APIs—and they’re free

Why It’s Awesome
• They can create customer evangelists • Letting go of your data lets “a thousand
flowers bloom”

• Your users can do things you would

never have the time or resources (or idea) to do for your company and creates community, too

• It creates some of that “authenticity”

Ajax & Javascript
• Ajax is really an acronym for • It’s the same thing as
Asynchronous Javascript and XML XMLHTTPRequest but easier to say browser reloading and increasing interactivity own—and being coded like a real firstclass language

• Ajax is simply a way of reducing

• Javascript is finally coming into its

Why It’s Awesome
• Update your web page—without
reloading

• Effect change on the back end, and
display results—without reloading users app

• Faster, better web experience for most • Doesn’t take much to add to your web

Look! A Kitty!

The Code

Ground-Up Planning
• Soylent Planning is People! • No, I won’t stop making
ground-up puns

BOTTOM'S UP

• But it’s never a bad idea to

think about all the Web 2.0ish features you’d like before starting never hurt anyone

• A LITTLE up-front design

Top Down

Plan for Not Planning
• Big Up Front Design (BUFD) is bad for
apps which must change at the speed of the web

• A little planning, however, can result in

apps which are easy to upgrade, maintain, extend, Web 2.0ify, and other buzzwordy things major to pull it off

• And you don’t have to be a Comp Sci

MVC + Agile + You
• Model, View, Controller (MVC) is a
good design pattern for web dev

• Separation of these three layers aids in
implementing Web 2.0 goodness

• And other stuff, too • Also, Agile development techniques
can help you keep up with the dizzying change

What’s MVC?
• A design pattern created
for applications with GUI interfaces database transactions for a content type (e.g. Clients)
View

incoming request

• Models = classes to handle • Views = PHP/HTML

Controller

Controller kinda like my ex
Model

templates - view logic only all together for incoming requests

• Controller = PHP glue, tie it

View ooh, pretty pictures!

Model here be data

Why Use MVC?
• Not just separation of content and
design

• Separation of database ops (Create,

Read, Update, Delete - CRUD) and code that will call those ops any purpose

• Makes it easy to access the content for • Makes it easy to add spiffy stuff to any
layer, esp. things like Ajax

Why, Illustrated
MVC Layers
HTML Presentation Ajax Presentation RSS Presentation Database HTML Presentation Fetching/Returning Data

Embedded Approach

Fetching/Returning Data

Database

• Separation allows maximum reuse of logic (using
the model to perform database ops)

• Inserting new layers is easy

Adding New Stuff
Front Page Template index.tpl.php

Super Simple Blog

the controller... takes an incoming request and searches for blog entries using Content Class includes Front Page Template (which iterates over blog entries array)

Controller index.php Content Class BlogPost.php

By simply adding logic in the controller to use a different template when the user visits index.php?rss=true you can add RSS support without recoding

RSS Feed Template rss.tpl.php

Adding New Stuff
Whole Mess 'o' Template Files Category Controller con.category.php

Less Simple Store Site

The controller takes incoming requests and includes the right individual item controller file The individual controllers use the model classes to create, read, update, and delete database entries and then they call the right templates to display whatever needs to be displayed

Controller index.php

Customer Controller con.customer.php Product Controller con.product.php

Category Model Category.php Product Model Product.php
Customer Model Customer.php

Adding an Ajax response is as easy as checking if the request is Ajax, and including a different template

Ajax "Add Product" Template ajax.tpl.add_item.php

Ajaxxx
• Ajax is a way of shortcircuiting browser reloading

• All it does is make a

super secret background HTTP request to your web application Javascript to display the results, if you want

• Then you can use

Anatomy of Ajax Requests
Typical Request
Browser Request

Ajax Request
Browser Request

Web Server

Web Server

Your Script

Your Script

Ways to Ajax
• There is no single approach called
“Ajax”

• “Ajax” is really more of an idea—even
though it’s XMLHTTPRequest

• Ajax is pretty awkward in PHP because
the existing approaches are mostly geared towards “Ajax frameworks”

• Frameworks aren’t a bad idea, but it’s
overkill for what Ajax really entails

Can the Frameworks
• I don’t really like people telling
me that to get some simple Javascript working, I need a whole new framework

• One way to learn to do

frameworks

something right is to look at who else is doing it right, and in this case it’s Ruby on Rails prompted the development of some awesome Javascript

• Ruby on Rails partially

Ajax Isn’t...
• A big deal (more on this later) • Proprietary to any language (other
than Javascript, obviously)

• Incompatible with modern browsers • Incredibly backwards compatible • Just for XML • What you call just any Javascript
interaction in a site

Ajax the Easy Way
• Use the Javascript library called
Prototype http://prototype.conio.net/

• It’s MIT-licensed and really great • But creating Ajax requests takes just a
couple lines of Javascript http://script.aculo.us/

• Scriptaculous is a cool add-on

Types of Ajax
• Links — text, images,
checkboxes, “Click Here” anything

• Forms — whole forms • Forms — single fields
(form observers)

• Timed updates

An Ajaxed Link
HTML + Javascript
<!-- basic link --> <h2>ajax replacing link</h2> <a href="ajax_test.php?return=time" onclick="new Ajax.Updater('test_div', 'ajax_test.php?return=time', {asynchronous:true, evalScripts:true } ); return false;"> This link updates a line</a> <div id="test_div"></div>

PHP
if($ajax) { header("Content-Type: text/xml"); echo "\n".'<p>',date("F j, Y, g:i:s a"), '</p>'; exit(); }

Ajax Autocomplete
HTML + Javascript
<h2>auto complete</h2> <input type="text" id="snack" name="snack" autocomplete="off" /> <div id="snack_auto_complete"></div> <script type="text/javascript"> new Ajax.Autocompleter("snack", "snack_auto_complete", "ajax_test.php?return=autocomplete", {})</script>

Scriptaculous

PHP
if($ajax) { header("Content-Type: text/xml"); echo '<ul><li>Yay! It worked!</li></ul>'; exit(); }

Now, The Back End
• If your application design even
approximates MVC, adding in Ajax is super easy

• You don’t have to know (or send) XML • All you have to do is determine if an
incoming request is from Ajax or not, and return a different set of HTML design—just the pertinent result

• Just avoid returning your whole page

Example
$ajax = ($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest' ? true : false); switch($_GET['return']) { case 'search': if($ajax) { header("Content-Type: text/xml"); echo '<b>You searched for:</b>'.$_POST['q']; exit(); } else { echo '<h2>regular submission</h2>'; echo 'You submitted the form normally.'; exit(); } break; }

Debugging Ajax
• Since there’s no reloading action going
on, it’s a bit harder to debug your friends

• But Firefox—and Greasemonkey—are • Download and install: • Live HTTP Headers • Tamper Data • XmlHttpRequest Debugging (G.M.)

Ajax & UI
• There are concerns about Ajax and the
traditional Web model of interaction

• Don’t just use Ajax for Ajax, only use it

where it really enhances your interactivity not support old browsers—think of your audience UI advice

• If you plan to require Ajax, be prepared to • Look online for Ajax interaction patterns &

Parting Thoughts
• Web 2.0 is exciting, thrilling,
sometimes a bit trying, and a number of other *ings to work at it

• If you want to be cutting edge, you have • But it doesn’t have to be hard • There’s a big community out there to
support you if you take the plunge

More Information
• I’ll be posting my slides, links, and the
code I’ve used (HTML/Javascript and PHP) on my web site http://www.ahoyhere.com/

• http://prototype.conio.net/ • http://script.aculo.us/