It may be hard to imagine, but once upon a time, pages on the World Wide Web didnt have pictures, let alone animations, videos, and interactive graphics. All these elements were added through trial, error, debate, and debunk. Changes came when brave souls (like you) forged ahead and made things work with the tools at hand. If a commercial product worked well and was widely adopted, it became the de facto standard. Adobes PDF (portable document files) and Flash animation player are well-known examples. However, theres always been a problem with proprietary and patent-encumbered technologies on the Internet. Theyre like a toll road in the center of a major city. On the other hand, authorities and standards-writing groups have been known to create standards that few browser and web developers follow. Strictly structured XHTML pages fall into this category. The solution is to create standards for the Internet that are practical, usable, and dont stifle creativity. Of course, thats easier said than done.
Tip
As Adobe Edge continues to grow and change, well be updating this book periodically. Your purchase of this book includes free updates to the ebook edition. To get your free ebook, go to http://shop.oreilly.com/product/0636920025658.do. Next to the Ebook buying option, click Add to Cart. Enter AE5MM in the Discount Code box; click Submit; click Checkout; and then follow the onscreen instructions.
With HTML5, the standards-writing crowd (also known as the W3C) is working hard to give the Internet community a roadmap that takes into account where weve been and where were heading. There are a number of exciting new features in HTML5, but perhaps most visible are the new ways to present and animate graphics. If youre thinking, That sounds a lot like Adobe Flash, youre right. One shiny new feature of HTML5 provides a non-proprietary, standard way to change graphics, color, size, shape, and position over time. The technique uses newly defined HTML tags, the power of JavaScript, and its jQuery companion library. These open-source technologies are available to everyone, whether theyre designing web pages or building the next great web browser.
Why Use Adobe Edge?
If you need a compelling reason to learn yet another animation technology, here are three good ones: iPhone, iPod, and iPad. In fact, if youre a Flash designer or developer, youre probably already dialed in to the famous debate between Apple and Adobe regarding Flash. As a web designer and developer, more important than the debate is the fact that Flash content on web pages cant be viewed by the most popular mobile devices on the planet. However, if you use HTML5 and JavaScript, you can capture that Apple audience and more.
So why should you use an Adobe product to create HTML5 web content? Its an understatement to say that most graphic artists view the world differently from computer programmers. If youre an artist, you may not be entirely comfortable describing each circle, gradient, and line in your artwork by typing out JavaScript code, even though its theoretically possible. Youre probably more inclined to use a tool that reminds you of Adobe Illustrator, Photoshop, or Flash. Thats exactly where Edge fits in. Edge has a Timeline like the ones in Flash and After Effects. The Elements and Properties panels will remind you of your favorite drawing and photo tools. If you use Edge to develop HTML5 graphics, then you can concentrate on creating and fine-tuning your artwork. Edge will generate the HTML5 and JavaScript/jQuery code thats needed for your web pages.
Where to Find Adobe Edge
If you dont already have Adobe Edge on your computer, you may be wondering where to get it. At this writing, you couldnt buy Edge from Amazon. Thats because at the moment, its free preview software from Adobe Labs. To download the program, go to .
About This Book
Despite the many improvements in software over the years, one feature has grown consistently worse: documentation. With the purchase of most software programs these days, you dont get a single page of printed instructions. To learn about the hundreds of features in a program, youre expected to use online electronic help, but with a Preview product like Adobe Edge, the help files are missing or incomplete.
But even if youre comfortable reading a help screen in one window as you try to work in another, something is still missing. At times, the terse electronic help screens assume that you already understand the discussion at hand and hurriedly skip over important topics that require an in-depth presentation. In addition, you dont always get an objective evaluation of the programs features. (Engineers often add technically sophisticated features to a program because they can , not because you need them.) You shouldnt have to waste your time learning features that dont help you get your work done.
The purpose of this book, then, is to serve as the manual that should have been in the box. In this books pages, youll find step-by-step instructions for using every Edge feature, including those you may not even have quite understood, let alone mastered, such as moving the HTML5 and JavaScript code into your web pages or making changes to existing pages using Edge. In addition, youll find clear evaluations of each feature that help you determine which ones are useful to you, as well as how and when to use them.
Note
This book periodically recommends other books, covering topics that are too specialized or tangential for a manual about Edge. Careful readers may notice that not every one of these titles is published by Missing Manual-parent OReilly Media. While were happy to mention other Missing Manuals and books in the OReilly family, if theres a great book out there that doesnt happen to be published by OReilly, well still let you know about it.
Adobe Edge Preview 5: The Missing Manual is designed to accommodate readers at every technical level. The primary discussions are written for advanced-beginner or intermediate computer users. But if youre a first-timer, special sidebar articles called Up to Speed provide the introductory information you need to understand the topic at hand. If youre an advanced user, on the other hand, keep your eye out for similar shaded boxes called Power Users Clinic. They offer more technical tips, tricks, and shortcuts for the experienced computer fan.
Macintosh and Windows
Edge works almost precisely the same in its Macintosh and Windows versions. Every button in every dialog box is exactly the same; the software response to every command is identical. In this book, the illustrations have been given even-handed treatment, rotating between the two operating systems where Edge is at home (Windows 7 and Mac OS X).