Вы находитесь на странице: 1из 47

Web 2.

0:
Ingredients
RSS
Open APIs
Microcontent
Ground Up
Like beef!
AJAX
Email & SMS
Podcasting
Sharing
Combine ingredients. Amy Hoy, OmniTI
amy@omniti.com
Shake well. http://www.ahoyhere.com/
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

• How to create PHP apps which are easy


to upgrade later with Web 2.0 goodies

• How (and when) to use Ajax in your


PHP applications

• Other cool stuff you can do


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

• Openness: APIs and web services.


Remixing.

• 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
monitoring — http://www.kosmo.com/
ajaxjsrsgoogle/monitor.php

• Housing Maps — http://


housingmaps.com/

• Mappr — http://www.mappr.com/ and


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

• More coming soon!


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

• Often the idea is to help others in some


way
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 focus on community, or servicing


the community, is part of the
“authenticity”
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


you follow to see if it’s updated

• XML-based feed formats allow


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

• It puts the power in the hands of the


reader

• 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
Open APIs
(API)
• API stands for Application
Programming Interface

• But really, a great explanation is


“How my software can get to your
data.”

• APIs make closed web sites and


services open and usable from
look! remote web sites or software
it's open!
• 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

• It creates some of that “authenticity”


for your company and creates
community, too
Ajax & Javascript
• Ajax is really an acronym for
Asynchronous Javascript and XML

• It’s the same thing as


XMLHTTPRequest but easier to say

• Ajax is simply a way of reducing


browser reloading and increasing
interactivity

• Javascript is finally coming into its


own—and being coded like a real first-
class language
Why It’s Awesome
• Update your web page—without
reloading

• Effect change on the back end, and


display results—without reloading

• Faster, better web experience for most


users

• Doesn’t take much to add to your web


app
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.0-
ish features you’d like
before starting

• A LITTLE up-front design


never hurt anyone
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

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


major to pull it off
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 incoming request
for applications with GUI
interfaces

• Models = classes to handle Controller

database transactions for a


Controller
content type (e.g. Clients) kinda like my ex

• Views = PHP/HTML View Model

templates - view logic only View Model


ooh, pretty pictures! here be data
• Controller = PHP glue, tie it
all together for incoming
requests
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

• Makes it easy to access the content for


any purpose

• Makes it easy to add spiffy stuff to any


layer, esp. things like Ajax
Why, Illustrated
MVC Layers Embedded Approach
HTML Ajax RSS
Presentation Presentation Presentation

HTML Database
Fetching/Returning Data Presentation
Fetching/Returning
Data

Database

• Separation allows maximum reuse of logic (using


the model to perform database ops)

• Inserting new layers is easy


Super Simple Blog
Adding New Stuff
the controller... takes an incoming request and
Front Page searches for blog entries using Content Class
Template includes Front Page Template (which iterates
index.tpl.php over blog entries array)

Controller By simply adding logic in the controller


index.php to use a different template when the user visits
index.php?rss=true
you can add RSS support without recoding
Content Class
BlogPost.php RSS Feed
Template
rss.tpl.php
Less Simple Store Site
Adding New Stuff
Whole Mess 'o'
Template Files The controller takes incoming
Category requests and includes the right
Controller individual item controller file
con.category.php

Controller Customer The individual controllers use the


index.php Controller model classes to create, read,
con.customer.php update, and delete database
entries and then they call the
Product right templates to display
Category Model Controller whatever needs to be displayed
Category.php con.product.php

Product Model
Product.php Adding an Ajax response is
Ajax "Add Product" Template
as easy as checking if ajax.tpl.add_item.php
Customer Model the request is Ajax,
Customer.php and including a different
template
Ajaxxx
• Ajax is a way of short-
circuiting browser
reloading

• All it does is make a


super secret background
HTTP request to your
web application

• Then you can use


Javascript to display the
results, if you want
Anatomy of Ajax Requests
Typical Request Ajax Request

Browser Request Browser Request

Web Web
Server 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


something right is to look at
frameworks who else is doing it right, and
in this case it’s Ruby on Rails

• Ruby on Rails partially


prompted the development of
some awesome Javascript
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

• Scriptaculous is a cool add-on


http://script.aculo.us/
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();
}
Scriptaculous
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>
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

• Just avoid returning your whole page


design—just the pertinent result
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

• But Firefox—and Greasemonkey—are


your friends

• 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

• If you plan to require Ajax, be prepared to


not support old browsers—think of your
audience

• Look online for Ajax interaction patterns &


UI advice
Parting Thoughts
• Web 2.0 is exciting, thrilling,
sometimes a bit trying, and a number
of other *ings

• If you want to be cutting edge, you have


to work at it

• 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/