this print for reference only—size & color not accurate spine = 0.657" 280 page count CHRISTIAN HEILMANN MARK NORMAN FRANCIS In this book you’ll learn about The modern state of web design and development Setting up and customizing your own dynamic web site using WordPress Using online services like Flickr, YouTube, Odeo, and Google Maps 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 T he Web has changed dramatically in the last few years. Gone are the days when having a web site meant that you needed to know HTML, CSS, JavaScript, PHP, and all kinds of other acronyms; convert photos and videos to the right format; and beg others to link to your site. Tools are available right now on the Web that allow you to quickly and easily create a professional-looking site, with dynamic functionality and multimedia content that is simple to maintain and easy to find by others—all with- out requiring you to be an experienced developer. This book shows you how to take advantage of those tools. It starts off by giving you a panoramic view of the Web today and introducing you to the tools you have at your disposal. Next, the book takes you through every aspect of creating your very own web site—from setting up a PHP and MySQL development environment and creating a basic site using Wordpress, to getting your site known on the web at large and troubleshooting and getting help. The Web gets bigger, more exciting, and increasingly more dynamic every day. With this book, you can become a part of it easily and effectively! Heilmann Francis CYAN YELLOW MAGENTA BLACK WEB DEVELOPMENT SOLUTIONS Harness the power of free tools available on the Web to create powerful modern web functionality From installation and implentation to troubleshooting, you’ll be guided every step of the way US $34.99 Mac/PC compatible www.friendsofed.com ISBN-13: 978-1-59059-806-1 ISBN-10: 1-59059-806-7 9 781590 598061 5 3 4 9 9 SHELVING CATE GOR Y 1. WEB DEVELOPMENT Also Available 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 i Web Development Solutions: Ajax, APIs, Libraries, and Hosted Services Made Easy C opyright © 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, e lectronic or mechanical, including photocopying, recording, or by any information storage or retrieval s ystem, without the prior written permission of the copyright owner and the publisher. I SBN-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 A ll 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 o wner, 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 201-348-4505, e-mail orders-ny@springer-sbm.com, or visit www.springeronline.com. For information on translations, please contact Apress directly at 2560 Ninth Street, Suite 219, Berkeley, CA 94710. Phone 510-549-5930, fax 510-549-5939, e-mail info@apress.com, 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.com in the Downloads section. Credits Lead Editors Chris Mills, Matthew Moodie Technical Reviewer Ian Lloyd Editorial Board Steve Anglin, Ewan Buckingham, Gary Cornell, Jason Gilmore, Jonathan Gennick, Jonathan Hassell, James Huddleston, Chris Mills, Matthew Moodie, Jeff P epper , Paul Sarknas, Dominic Shakeshaft, Jim Sumser , Matt W ade Project Manager Sofia Marchant Copy Edit Manager Nicole Flores Copy Editor Liz Welch Assistant Production Director Kari Brooks-Copony Production Editor Kelly Winquist Compositor Lynn L'Heureux Artist April Milne Proofreader April Eddy Indexer John Collin Interior and Cover Designer Kurt Krames Manufacturing Director T om Debolski 8067FM.qxp 3/20/07 7:54 PM Page ii 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 iii 8067FM.qxp 3/20/07 7:54 PM Page iv 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 v 8067FM.qxp 3/20/07 7:54 PM Page vi 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 A crash 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 vii Chapter 3: What You Need to Get Started . . . . . . . . . . . . . . . . . . . . . 49 The right mind-set. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50 T hings 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 A bit 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 L yrics via Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108 Using a server-side proxy script . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113 Retrieving del.icio.us links with JSON . . . . . . . . . . . . . . . . . . . . . . . . . . . 117 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121 CONTENTS viii 8067FM.qxp 3/20/07 7:54 PM Page viii Chapter 6: Adding Media Files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123 Images with Flickr . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124 I nserting Flickr images into your posts. . . . . . . . . . . . . . . . . . . . . . . . . . . 126 Show your most recent Flickr images . . . . . . . . . . . . . . . . . . . . . . . . . . . 128 A gallery 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 A more 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 F allback 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 CONTENTS ix 8067FM.qxp 3/20/07 7:54 PM Page ix [...]... Homepage services Hosted blogging solutions External help in the form of a “knowledgeable buddy” What You See Is What You Get (WYSIWYG) editors We then go on into what you need to know about web development in order to create web sites without relying on third-party services or products: Basics of web development A crash course in web development and the technologies and languages that drive it And last... and rich media experiences By leveraging easily available software templates, libraries, and APIs (don’t worry, we’ll be explaining these terms throughout the book if they mean nothing to you right now), you can be up and running with your own web site in a matter of days or even hours And it’s cheap! Web hosting is now a commodity, most web services are free (and the rest are quite inexpensive), and. .. and some miles down the road you realize that the covered-up rust is starting to show through and the car slowly but steadily falls apart, translating to more and more small—but costly—repair jobs 2 Basics of web development Here are some facts about web development that might be hard to swallow: You have to face code, and you have to write cryptic commands with your keyboard in order to create a web. .. ins and outs of web development Homepage services Traditionally the first thing a new “netizen” tries out is so-called “homepage services. ” These are free offers of web space that come with preset designs or step-by-step generators (sometimes called wizards) for you to generate your site In the past, they were the only way to take your first steps as a web publisher as web space was too expensive and. .. German web developer stranded in London after a journey around the world working for various web agencies and dotcoms With a background in social work with disabled people and radio journalism, he sees the Web as a perfect media to allow access for everyone and keeps a pragmatic view on how to convey information He currently works as a lead developer and trainer for Yahoo!, writes for net magazine, and. .. people can share and store the photographs and video clips they take 8 8067Ch01.qxp 3/20/07 4:06 PM Page 9 STOP THE WEB YOU’RE GETTING ON! As another example, suppose you and your spouse are about to have a baby You can share this with your friends and family by creating a site in which you share pictures of the ultrasound scans, stories of cravings and back pain (and pictures and video of the actual... creations with the world You are part of a band and need a place to share news and gig information And many, many more (as they say on compilation albums) 1 Whatever the reason, there has never been a better time to start your own site So much community knowledge is now wrapped up and shared in easy- to-use packages that you no longer need to be an expert at web development to create sites that look professionally... Task Force, and is the author of Build Your Own Web Site the Right Way with HTML and CSS, published by SitePoint (in which he teaches web standards–based design to the complete beginner) He has also been technical editor on a number of other books published by Apress, friends of ED, and SitePoint Standards stuff aside, he’s got a real thing for classic VW vans (“You know, the ‘hippie bus’”) and is also... cobbled-together HTML and imagery that doesn’t need to be there in the first place 15 8067Ch02.qxp 3/19/07 9:45 PM Page 16 WEB DEVELOPMENT SOLUTIONS The idea of blogging is to quickly put some thoughts on the Web and invite readers to comment on them Blogging systems like WordPress are amazingly easy to set up on your own server—we will use one in this book and they have become a de facto standard of participation... on the Web for individuals and even small companies Hosted services, however, do limit the options you have to extend the simple publishing idea with extras or personal touches, and a lot of bloggers start hacking inside the blogging systems to add that extra touch to make them stand out In doing so, a lot of them mess up the code and the idea of a simple blog It is all about what you write, and not . Y 1. WEB DEVELOPMENT Also Available 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 i Web. 8067FM.qxp 3/20/07 7:54 PM Page i Web Development Solutions: Ajax, APIs, Libraries, and Hosted Services Made Easy C opyright © 2007 by Christian Heilmann and Mark Norman Francis All rights reserved The modern state of web design and development Setting up and customizing your own dynamic web site using WordPress Using online services like Flickr, YouTube, Odeo, and Google Maps Adding