David Powers - Adobe Dreamweaver CS5.5 Studio Techniques: Designing and Developing for Mobile with jQuery, HTML5, and CSS3

Designing and Developing for Mobile with jQuery, HTML5, and CSS3

David Powers

Adobe Dreamweaver CS5.5 Studio Techniques:
Designing and Developing for Mobile with jQuery, HTML5, and CSS3

David Powers

This Adobe Press book is published by Peachpit.
For information on Adobe Press books, contact:

Peachpit
1249 Eighth Street
Berkeley, CA 94710
510/524-2178
510/524-2221 (fax)

For the latest on Adobe Press books, go to www.adobepress.com
To report errors, please send a note to
Peachpit is a division of Pearson Education.

Copyright 2011 by David Powers

Associate Editor: Valerie Witte
Production Editor: Cory Borman
Developmental Editor: Anne Marie Walker
Copyeditor: Anne Marie Walker
Proofreader: Patricia Pane
Composition: WolfsonDesign
Indexer: Joy Dean Lee
Cover Image: Alicia Buelow
Cover Design: Charlene Charles-Will

Notice of Rights

All rights reserved. No part of this book may be reproduced or transmitted in any form by any means, electronic, mechanical, photocopying, recording, or otherwise, without the prior written permission of the publisher. For information on getting permission for reprints and excerpts, contact .

Notice of Liability

The information in this book is distributed on an As Is basis, without warranty. While every precaution has been taken in the preparation of the book, neither the author nor Peachpit 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 instructions contained in this book or by the computer software and hardware products described in it.

Trademarks

Dreamweaver and Photoshop are either trademarks or registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.

Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in this book, and Peachpit was aware of a trademark claim, the designations appear as requested by the owner of the trademark. All other product names and services identified throughout this book are used in editorial fashion only and for the benefit of such companies with no intention of infringement of the trademark. No such use, or the use of any trade name, is intended to convey endorsement or other affiliation with this book.

ISBN-13: 978-0-321-77325-8
ISBN-10: 0-321-77325-X

9 8 7 6 5 4 3 2 1

Printed and bound in the United States of America

David Powers started developing websites in 1994 while at the BBC (British Broadcasting Corporation). Hed just taken on the role of Editor, BBC Japanese TV, and needed a way of advertising the fledgling channel in Japan. The problem was that he had no advertising budget. So, he begged the IT department for a corner of server space and singlehandedly developed an 80-page bilingual website, which he regularly maintained for the next five yearson top of all his other duties.

After three decades as a radio and TV journalist, David left the BBC in 1999 to work independently. He created multilingual websites for several leading clients, including the Embassy of Japan in London and Oxford Analytica. In 2003, he decided to combine his professional writing and editing expertise with his passion for the web, and began writing books on web development. This is his fourteenth so far. Readers frequently comment on Davids ability to explain complex technical subjects in a jargon-free style thats easy to understand. At the same time, he doesnt talk down to readers, thereby appealing equally to more experienced web developers.

David is an Adobe Community Professional and Adobe Certified Instructor for Dreamweaver. Youll often find him giving help and advice in the Dreamweaver forums and Adobe Developer Centerto which he has contributed many popular tutorials and training videos. He greatly enjoys traveling and taking photosall the photos used in this book were taken by him.

David has also translated a number of musical plays from Japanese into English, and he likes nothing better than sushi with a glass or two of cold sake.

Writing a book about new software is a solitary activity, grappling with a constantly moving target and pounding the keyboard to deliver the chapters on time. But none of it would be possible without an army of helpers. First, theres Scott Fegette, Senior Product Manager for Dreamweaver, who kept me informed of the engineering teams plans. Then theres Kin Blas, a Dreamweaver engineer actively involved in developing jQuery Mobile, who clarified points I found difficult to understand. My thanks go to them and to the rest of the Dreamweaver team for their help both directly and indirectly.

Ive also had a strong backup team at Peachpit: Victor Gavenda, who accepted the concept of this book and liked it so much that he persuaded Adobe Press that it was high time one of my books was printed in color; Valerie Witte, my editor, who calmly accepted my frequent changes of mind about the structure of the book; Anne Marie Walker, my development editor, who picked up inconsistencies and helped me (mis)spell the American way; Tom Muck, my technical editor, who spotted problems with code and made suggestions to improve it; and Cory Borman, who oversaw the production process.

Many others have helped indirectly. At times, the Twitter stream felt like an annoying distraction, but it provided some invaluable leads, alerting me to changes in this fast-moving industry. It also provided some essential light relief, although Im not sure Im ready to watch another cat video just yet.

Dont be fooled. Although the .5 might give the impression that Dreamweaver CS5.5 is a point release, its anything but. Dreamweaver engineers have packed a stunning amount of new features into this version. To mention just a few, theres code hinting for the popular jQuery JavaScript library, the ability to see what pages will look like at different screen resolutions without leaving the Document window, support for jQuery Mobile widgets, and integration of PhoneGap to build native apps for Android or iOS (the operating system used in the iPhone, iPad, and iPod touch).

The emphasis in Dreamweaver CS5.5 is firmly on mobile development and designing for multiple screens, but thats not all. Theres improved support for HTML5 and CSS3, including tools to simplify the creation of rounded corners and drop shadows without images. Previous versions of Dreamweaver supported only a limited range of CSS selectors. Live view now supports them all. Oh yes, Dreamweaver CS5.5 supports web fonts, too.

Theres a lot to absorb, and this book aims to guide you through all the new features with the help of three case studies. The first one centers on redesigning a website for display on desktops, tablets, and smartphones using HTML5, CSS3, and media queries. The second takes a cut-down version of the same site and builds a dedicated mobile version using jQuery Mobile, a sophisticated JavaScript and CSS framework designed to work consistently on all major mobile platforms. The final case study develops a simple app that stores information in a database, accesses a mobile phones GPS sensor, and displays a map.

The new features in Dreamweaver CS5.5 are aimed at web designers and developers who are already comfortable with HTML and CSS. It also helps to have at least a basic understanding of JavaScript and some jQuery experience. If the thought of diving into code sends shivers up your spine, this might not be the most appropriate book for you. Web development is becoming increasingly sophisticated, and the days of just copying and pasting snippets of code are rapidly drawing to a close.