Web Development Solutions: Ajax, APIs, Libraries, and Hosted Services Made Easy

278 Pages·2007·6.56 MB·English

by  Christian Heilmann

CYAN YELLOW
MAGENTA BLACK
in this book you’ll learn about h
e
The modern state of web design and development Frilm
a
Setting up and customizing your own dynamic web site using WordPress na
cn
Using online services like Flickr, YouTube, Odeo, and Google Maps isn

Adding special effects using Java Script libraries
Getting to know people on the Web, getting your site noticed, and finding help if you get stuck
W
e
b
the Web has changed dramatically in the last few It starts off by giving you a panoramic view of the Web
D
years. Gone are the days when having a web site today and introducing you to the tools you have at your
meant that you needed to know HTML, CSS, JavaScript, disposal. Next, the book takes you through every aspect e
PHP, and all kinds of other acronyms; convert photos of creating your very own web site—from setting up a
v
and videos to the right format; and beg others to link to PHP and MySQL development environment and creating
your site. a basic site using Wordpress, to getting your site known e
on the web at large and troubleshooting and getting help. l
Tools are available right now on the Web that allow you
o
to quickly and easily create a professional-looking site, The Web gets bigger, more exciting, and increasingly
with dynamic functionality and multimedia content that more dynamic every day. With this book, you can become
p
is simple to maintain and easy to find by others—all with- a part of it easily and effectively!
m
out requiring you to be an experienced developer. This
book shows you how to take advantage of those tools.
e
n
t
also available
s
o
l
u
Harness the power of free tools
t available on the Web to create
powerful modern web functionality
i
o
From installation and implentation
n
to troubleshooting, you’ll be guided
s every step of the way
ISBN-13: 978-1-59059-806-1 shelvinG CateGorY
ISBN-10: 1-59059-806-7
1. Web Development
53499
us $34.99
mac/pC compatible Christian heilmann
FranCis
mark norman
www.friendsofed.com
9 781590 598061
this print for reference only—size & color not accurate spine = 0.657" 280 page count
8067FM.qxp 3/20/07 7:54 PM Page i
Web Development Solutions
Ajax, APIs, Libraries, and
Hosted Services Made Easy
Christian Heilmann
Mark Norman Francis
8067FM.qxp 3/20/07 7:54 PM Page ii
Web Development Solutions: Ajax, APIs,
Libraries, and Hosted Services Made Easy
Copyright © 2007 by Christian Heilmann and Mark Norman Francis
All rights reserved. No part of this work may be reproduced or transmitted in any form or by any means,
electronic or mechanical, including photocopying, recording, or by any information storage or retrieval
system, without the prior written permission of the copyright owner and the publisher.
ISBN-13 (pbk): 978-1-59059-806-1
ISBN-10 (pbk): 1-59059-806-7
Printed and bound in the United States of America 9 8 7 6 5 4 3 2 1
All Google screen captures and logos are used with the express permission of Google Inc.
Trademarked names may appear in this book. Rather than use a trademark symbol with every occurrence
of a trademarked name, we use the names only in an editorial fashion and to the benefit of the trademark
owner,with no intention of infringement of the trademark.
Distributed to the book trade worldwide by Springer-Verlag New York, Inc., 233 Spring Street, 6th Floor,
New York, NY 10013. Phone 1-800-SPRINGER, fax [phone], e-mail [email protected],or
visit www.springeronline.com.
For information on translations, please contact Apress directly at 2560 Ninth Street, Suite 219, Berkeley, CA
94710. Phone [phone], fax [phone], e-mail [email protected],or visit www.apress.com.
The information in this book is distributed on an “as is” basis, without warranty. Although every precaution
has been taken in the preparation of this work, neither the author(s) nor Apress shall have any liability to
any person or entity with respect to any loss or damage caused or alleged to be caused directly or
indirectly by the information contained in this work.
The source code for this book is freely available to readers at www.friendsofed.comin the Downloads section.
Credits
Lead Editors Assistant Production Director
Chris Mills, Matthew Moodie Kari Brooks-Copony
Technical Reviewer Production Editor
Ian Lloyd Kelly Winquist
Editorial Board Compositor
Steve Anglin, Ewan Buckingham, Gary Cornell, Lynn L'Heureux
Jason Gilmore, Jonathan Gennick,
Jonathan Hassell, James Huddleston, Artist
Chris Mills, Matthew Moodie, Jeff Pepper, April Milne
Paul Sarknas, Dominic Shakeshaft,
Jim Sumser,Matt Wade Proofreader
April Eddy
Project Manager
Sofia Marchant Indexer
John Collin
Copy Edit Manager
Nicole Flores Interior and Cover Designer
Kurt Krames
Copy Editor
Liz Welch Manufacturing Director
Tom Debolski
8067FM.qxp 3/20/07 7:54 PM Page iii
To my darling, long-suffering, and endlessly patient girlfriend,
Sarah-Jane. Thank you.
–Mark Norman Francis
To my brother for keeping the family matters in check so I have time to
spend on things like writing and for showing me that people can be
happy with what they are given. To my parents for never stopping me
from learning more and doing new things although neither
surroundings nor technology were on my side. You showed me how to
help someone become independent by showing love and challenging
him at the same time.
–Chris Heilmann
8067FM.qxp 3/20/07 7:54 PM Page iv
8067FM.qxp 3/20/07 7:54 PM Page v
CONTENTS AT A GLANCE
Chapter 1: Stop the Web . . . You’re Getting On! . . . . . . . . . . . . . . . . . 3
Chapter 2: The Dilemma of “Rolling Your Own” Solutions . . . . . . . . . 11
Chapter 3: What You Need to Get Started . . . . . . . . . . . . . . . . . . . . . 49
Chapter 4: Spoiled for Choice—What the Web Offers You. . . . . . . . . 75
Chapter 5: Retrieving and Displaying Content
with REST and Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
Chapter 6: Adding Media Files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123
Chapter 7: Promoting Your Content. . . . . . . . . . . . . . . . . . . . . . . . . 153
Chapter 8: Layout and Navigation . . . . . . . . . . . . . . . . . . . . . . . . . . 171
Chapter 9: Adding Special Effects. . . . . . . . . . . . . . . . . . . . . . . . . . . 199
Chapter 10: What to Do and Where to Find Help
When Things Go Wrong . . . . . . . . . . . . . . . . . . . . . . . . 225
Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250
8067FM.qxp 3/20/07 7:54 PM Page vi
8067FM.qxp 3/20/07 7:54 PM Page vii
CONTENTS
Chapter 1: Stop the Web . . . You’re Getting On! . . . . . . . . . . . . . . . . . 3
Web presence. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
Why set up your own site?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
The root of all evil (making money from the Web) . . . . . . . . . . . . . . . . . . . . . . . 5
Steve Pavlina—personal productivity guru. . . . . . . . . . . . . . . . . . . . . . . . . . 6
Daring Fireball . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Shameless self-promotion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
Your résumé/curriculum vitae and portfolio. . . . . . . . . . . . . . . . . . . . . . . . . 8
Archive your hobbies. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
The scrapbook of your memories. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
Summary. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Chapter 2: The Dilemma of “Rolling Your Own” Solutions . . . . . . . . . 11
You in the limelight on a shoestring budget . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Homepage services . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Hosted blogging services. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
The “knowledgeable buddy solution”. . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
WYSIWIG—What You See Is What You Get solutions . . . . . . . . . . . . . . . . . . . 17
Basics of web development . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Acrash course in technologies and languages that drive the Web. . . . . . . . . . . . 19
Protocols and file naming gotchas . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Image optimization. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
HTML. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
Classes and IDs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
Server-side languages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
Who is on the Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
8067FM.qxp 3/20/07 7:54 PM Page viii
CONTENTS
Chapter 3: What You Need to Get Started . . . . . . . . . . . . . . . . . . . . . 49
The right mind-set. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
Things not to focus on . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
Things to focus on . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
Your local development environment. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
Installing a local server on Windows . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
Tweaking PHP. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
Installing a local server on the Mac . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
Tweaking PHP. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
Installing WordPress. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
Tweaking WordPress . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
Chapter 4: Spoiled for Choice—What the Web Offers You. . . . . . . . . 75
RSS feeds/REST APIs. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
RSS feeds. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
REST APIs. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
CSS templates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
CSS page layouts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
WordPress themes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
JavaScript libraries. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
“Web 2.0” hosted services . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
The social Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90
What’s in it for me?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92
Chapter 5: Retrieving and Displaying Content with REST and Ajax . . . 95
What is REST? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
What is Ajax?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
Abit of theory about Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100
What Ajax is not . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101
How to use Ajax to help your visitors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102
Ajax solutions for your visitors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103
The problems with Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105
JavaScript dependency . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105
Slow and unreliable connections. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
Making the visitor aware of what is going on. . . . . . . . . . . . . . . . . . . . . . . 106
Security restrictions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107
Changing surfing behavior patterns . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107
Assistive technology . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
Some simple Ajax examples. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
Displaying Lyrics via Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
Using a server-side proxy script . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113
Retrieving del.icio.us links with JSON . . . . . . . . . . . . . . . . . . . . . . . . . . . 117
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121
viii
8067FM.qxp 3/20/07 7:54 PM Page ix
CONTENTS
Chapter 6: Adding Media Files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123
Images with Flickr . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124
Inserting Flickr images into your posts. . . . . . . . . . . . . . . . . . . . . . . . . . . 126
Show your most recent Flickr images . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
Agallery powered by Flickr. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130
Inserting videos with YouTube . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132
Adding music and podcasts with Odeo . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
Adding maps with Google Maps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
Start by getting your Google developer key . . . . . . . . . . . . . . . . . . . . . . . 137
The lazy option: let others do the tricky work for you. . . . . . . . . . . . . . . . . . 137
The Online Map Maker. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137
The GEOPress WordPress plug-in . . . . . . . . . . . . . . . . . . . . . . . . . . . 138
The DIY option: using the Google API . . . . . . . . . . . . . . . . . . . . . . . . . . . 139
Displaying a map with a marker . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
Amore accessible alternative . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144
Using XML for marker data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150
Chapter 7: Promoting Your Content. . . . . . . . . . . . . . . . . . . . . . . . . 153
Basic SEO for your site. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154
Blog search engines and aggregators. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156
Automatically telling blog search engines about updates . . . . . . . . . . . . . . . . 156
Tagging—the other way to get found . . . . . . . . . . . . . . . . . . . . . . . . . . . 157
Improving the page search . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158
Adding a web search option with Yahoo! . . . . . . . . . . . . . . . . . . . . . . . . . 159
Cross-linking with the attention services . . . . . . . . . . . . . . . . . . . . . . . . . . . 161
Showing your attention. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162
Encouraging others to bookmark you. . . . . . . . . . . . . . . . . . . . . . . . . . . 165
Alternatives to del.icio.us. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166
Promoting your events with Upcoming.org . . . . . . . . . . . . . . . . . . . . . . . . . . 166
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168
Chapter 8: Layout and Navigation . . . . . . . . . . . . . . . . . . . . . . . . . . 171
Navigation is not a matter of technology . . . . . . . . . . . . . . . . . . . . . . . . . . . 172
How do visitors get to your site? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172
The bare necessities of a good site menu . . . . . . . . . . . . . . . . . . . . . . . . . . . 173
What can you do to help visitors find content in your site?. . . . . . . . . . . . . . . . . 174
Fallback mechanism 1: the site map. . . . . . . . . . . . . . . . . . . . . . . . . . . . 174
Fallback mechanism 2: the FAQ page . . . . . . . . . . . . . . . . . . . . . . . . . . . 175
Site internal linking . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175
Offering chronological navigation . . . . . . . . . . . . . . . . . . . . . . . . . . 175
Offering similar content pages via categories . . . . . . . . . . . . . . . . . . . . 176
Tags—the less rigid category option. . . . . . . . . . . . . . . . . . . . . . . . . . 177
Pagination . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179
Page-internal navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180
ix