Adobe Announces Agreement to Acquire Nitobi, Creator of PhoneGap [Adobe press release, Oct 3, 2011]

Open Source HTML5 Mobile App Platform Accelerates Adobe’s HTML5 and Web Standards Strategy

At its MAX 2011 technology conference, Adobe Systems Incorporated (Nasdaq: ADBE) today announced it has entered into a definitive agreement to acquire privately held Nitobi Software, the creator of PhoneGap and PhoneGap Build. PhoneGap is a popular open source platform for easily building fast, cross-platform mobile applications with HTML5 and JavaScript. With PhoneGap, Adobe® will offer developers the choice of two powerful solutions for cross-platform development of native mobile apps, one using HTML5 and JavaScript with PhoneGap and the other using Adobe Flash® with Adobe AIR®. PhoneGap’s open source framework has been downloaded more than 600,000 times to date and thousands of applications built using PhoneGap are available in mobile app stores that span devices based on Android, iOS, BlackBerry and other operating systems.

“PhoneGap has proven to be an industry-defining app solution for HTML5 developers,” said Danny Winokur, vice president and general manager, Platform, Adobe. “PhoneGap is a fantastic solution for developing a broad range of mobile apps using the latest Web standards, and is already integrated with Dreamweaver® CS5.5. It’s a perfect complement to Adobe’s broad family of developer solutions, including Adobe AIR, and will allow us to continue to provide content publishers and developers with the best, cutting-edge solutions for creating innovative applications across platforms and devices.”

…

Adobe today also released its third public preview of Adobe Edge, the new HTML5 motion and interaction design tool that is bringing Flash-like animation to websites and mobile appsusing the latest capabilities of HTML, JavaScript and CSS. The new release contains innovative interactivity features and other additions suggested by the development community, and enables content creators to easily deliver a new level of visual richness to HTML5-only websites and mobile apps.

Adobe has also extended existing tools like Adobe Dreamweaver and Flash Professional to bring the next generation of Web standards to designers and developers who rely on those tools. Adobe today released the new CSS3 Mobile Pack for Adobe Fireworks®, which will enable designers to easily extract CSS3 from their design elements in Fireworks and quickly add them to their HTML based websites and mobile applications.

Adobe continues to work closely with the HTML5 community to make important contributions to the W3C and key open source projects like WebKit and JQuery. Adobe has co-authored with Microsoft and submitted to the W3C a proposal for CSS Regions, which enables sophisticated magazine-like layouts using Web standards. Adobe has also contributed a preliminary implementation of CSS Regions to the open source WebKit layout engine, which is already available in the latest builds of Chromium and the WebKit browser. Microsoft has made an implementation available in the latest preview release of Internet Explorer 10. In addition, Adobe today introduced a new proposal to the W3C, co-edited with other W3C members, called CSS Shaders that brings cinematic visual effects to HTML. Finally, Adobe announced that jQuery Mobile 1.0, a popular touch-optimized open source JavaScript framework to which Adobe is a leading contributor, was just made available as a Release Candidate (RC1) this week. Concurrent with this release will be a new version of ThemeRoller, which Adobe has rebuilt from the ground up to enable users to design custom jQuery user interface themes for tight integration in mobile Web projects

Adobe Envisions Brave New World of Web Layouts With ‘CSS Regions’ [Webmonkey article, May 10, 2011]

Internet Explorer 10 Developer Guide: CSS [Sept 13, 2011]

…

CSS Regions

CSS Regions is a page layout feature for Metro style apps in Windows Developer Preview and for Internet Explorer 10. With it, developers and designers can take a single HTML content stream of text and images and segment that stream into multiple empty containers defined in a standard HTML template. HTML templates are documents that are mostly empty of original content, but are instead composed primarily of empty containers that are sized and positioned to give incoming content a specific layout.

This allows for a continuous content stream to be restructured into a multi-page layout more suited, for instance, for tablet consumption.

Within a single page, CSS Regions allows web developers to develop complex content layouts equivalent to what might be seen in a magazine or newspaper, where multiple regions of the same flow of content (text, related pictures, video, and so on) are shaped around unrelated content elements, such as alternate stories or advertisements.

Furthermore, CSS Regions enables content placed in a target container to take on the styling of that container, even if it is independent of the content source formatting.

CSS Regions are defined by the W3C in the CSS Regions specification, which is currently an Editor’s Draft.

For a hands-on demo of CSS Regions, see Hands On: CSS3 Regions on the IE Test Drive.

…

When can I use CSS Regions? [excerpted, Oct 12, 2011]

Resources:

• Adobe prototype build & samples
• IE10 developer guide info

Adobe Proposes New Standard for 3D Effects on the Web [Webmonkey article, Oct 12, 2011]

Adobe has proposed a new set of CSS-based tools that the company hopes will one day become a standard on the web. Following on the heels of Adobe’s effort to improve web layout tools with CSS Regions, Adobe is now proposing CSS Shaders, which would bring high-quality cinematic effects to the web without the need for plugins like Flash.

“Shader” is a term pulled from the 3D graphics world; it refers to small programs that create 3D effects, like the rippling motion in a waving flag. The CSS Shaders proposal would add similar tools to the CSS specification, allowing web developers to easily apply cinema-style filter effects to any HTML content. Think grayscale to color transitions, animated shadows, photo-realistic warping and other mainstays of the 3D animation world.

CSS Shaders will look familiar to anyone who’s used the various filters in Adobe Flash since they are essentially the same thing applied to HTML. At the moment there’s no working demo, but you can see CSS Shaders at work in the video below

Some of what CSS Shaders do in the demo is already possible using WebGL. However, WebGL’s magic only works on the HTML5 canvas element and can only apply the shader effects that WebGL supports. CSS Shaders, on the other hand, would allow anyone to write custom shaders, load those shaders via the page’s stylesheet and then apply them to any HTML element.

Adobe has been working with Apple and Opera to create the new CSS Shaders draft proposal at the W3C. The CSS version of shaders borrows some ideas from the earlier draft spec for SVG filter effects (now Filter Effects 1.0), but would apply the filters to HTML rather an SVG.

As for the real world, John Nack, Principal Product Manager at Adobe, reports that the code used for the demo is “under consideration for inclusion in WebKit.” For now though Adobe is using its own build of Chromium to create the demo videos.

If you’d like to learn more about how CSS Shaders work and what sort of filters Adobe has created, head on over to the company’s devnet site where Adobe’s Vincent Hardy offers an overview of CSS Shaders, a look at the proposed syntax and several more (sadly not embeddable) demo movies.

CSS Shaders [Oct 10, 2011]

CSS shaders, cinematic effects for HTML.

Short video demonstrating CSS shaders in action. CSS shaders are a proposal from Adobe, Apple and Opera made to the W3C in October 2011: https://dvcs.w3.org/hg/FXTF/raw-file/tip/custom/index.html.

Article at: http://www.adobe.com/devnet/html5/articles/css-shaders.html

Introducing CSS shaders: Cinematic effects for the web [Oct 3, 2011]

Advances in HTML5 and CSS (for example transitions, animations, transforms, text shadows, box-shadows, gradients, SVG) have improved the graphical and interactive richness of HTML. SVG filter effects are now moving to Filter Effects 1.0to become available in CSS and HTML, in addition to SVG, and will bring effects such as grayscale, sepia tone, or hue-rotate to all web content. More sophisticated effects, such as the chiseled effect shown in Figure 1, will also be possible.

Figure 1. Filter Effects applied to SVG content, from the svg-wow.org website.

The Adobe CSS shaders proposal has been brought to the W3C FX task force. CSS shaders define a filter effects extensibility mechanism and provide rich, easily animated visual effects to all HTML5 content. They work particularly well with CSS animations and CSS transitions.

…

Adobe Enables 3D Games With Flash Player 11, AIR 3  [Sept 21, 2011]

… said Danny Winokur, vice president and general manager of Platform, Adobe. “Flash offers the best way for content owners to deliver their most demanding experiences, including games, premium video and sophisticated data-driven apps, to all of their users, while HTML 5 tools such as Adobe Edge and Dreamweaver® are ideal for building interactive Web pages, rich ads, branded microsites and general-purpose mobile applications.” …

Adobe Gains Mobile Capabilities, Partnerships With Nitobi/PhoneGap Deal  [Gartner, Oct 10, 2011]

Adobe will gain credibility in mobile application development with this acquisition, but it needs to preserve partnerships and demonstrate the viability of the subscription-based business model for enterprises.

On 3 October 2011, Adobe Systems announced plans to acquire Nitobi Software, the creator of PhoneGap, an open-source platform for building cross-platform mobile applications with HTML5 and JavaScript, and PhoneGap Build, a service for compiling mobile applications for multiple platforms.

Analysis

By purchasing Nitobi, Adobe gets PhoneGap Build and becomes the primary sponsor of the PhoneGap open-source project. Adobe will be able to address the needs of mobile application developers and enterprises with mobile application requirements.

Nitobi introduced PhoneGap in 2008, positioning itself as a vendor of mobile consumer application development platform with several independent software vendors (ISVs) and complementary mobile framework vendors and enterprises. PhoneGap has achieved tremendous traction by providing native code wrappers for most of the relevant operating systems and enabling developers to write an application once and deploy it to a number of devices with variable native functions.

Though Adobe will gain these capabilities, we believe it faces four hurdles:

• PhoneGap has found a unique market position, focused on providing a middleware layer that implements both standards-based and native phone APIs. Over time, the incremental value-add of PhoneGap’s access to native functions may be eroded by updates to HTML5 and other standards. However, Gartner expects that smartphone OS manufacturer innovation will mean that there will be a long-term, ever-changing gap between what is available in standards and what is being built into the latest mobile device operating systems.
• PhoneGap has traction with other development vendors such as Worklight and Sencha. Adobe will need to continue to invest in Phone Gap’s open-source offering to remain attractive to these partners.
• The Creative Cloud subscription model is unproven and targeted outside traditional enterprise development. Gartner observes that many enterprises are averse to such business models (similar to Usablenet).
• Adobe has had little success over time among enterprise mobile developers, and few of them currently use the PhoneGap framework. Gartner has seen a minor amount of evidence that this will change.

Meanwhile, in the rich Internet application (RIA) space, offerings from Adobe (Flex), Microsoft (Silverlight), IBM (Expeditor) and Oracle (ADF Faces) are losing to lighter-weight, vendor-neutral technologies like jQuery (an open-source package which is now supported by Adobe, Microsoft and Oracle).

On the upside, Adobe notes that Nitobi is in the process of contributing the core PhoneGap code to the Apache Software Foundation, and it will continue to update and maintain the framework to add support for new device capabilities as they appear in the market. The primary value for Adobe customers will stem from integrations between PhoneGap and value-added services provided within the Adobe Creative Cloud offering. Formal sponsorship of PhoneGap by Adobe, a financially sound organization with broad reach, also ensures longevity for the framework.

Recommendations

• PhoneGap customers: Continue to use PhoneGap, but assess your mobile architecture and selections of vendors/platforms on at least an annual basis, particularly if you are using Worklight, Sencha, JQueryMobile, Dojox or other frameworks in conjunction with PhoneGap.
• Enterprises pondering native app deployment: Consider PhoneGap a strong choice if you have existing Web investments you would like to resurface in a native app store.

Designers respond to Adobe’s acquisition of Nitobi, TypeKit [DigitalArts, Oct 7, 2011]

Adobe kicked off its conference on Monday with a keynote speech by chief technology officer Kevin Lynch, in which he announced the company’s acquisitions of Typekit — which provides high-quality fonts for use on websites — and also Nitobi Software, the creator of PhoneGap and PhoneGap Build. PhoneGap is a popular open source platform for building cross-platform mobile applications with HTML5 and JavaScript.

The TypeKit announcement, which came early on in the first keynote session, to a huge cheer from the creatives in the audience, means that Typekit fonts will soon be offered as a standalone service and over time as part of Adobe Creative Cloud. It will give designers and developers access to Typekit’s massive font library, with a license to integrate real fonts into websites and ensure fonts are displayed consistently across all modern browsers.

“When Kevin Lynch said the opening announcement was about fonts, I thought ‘this is what we came to MAX for, fonts – are you serious?’, but when they said it was TypeKit I was amazed,” said RJ Owen, experience planner at Colorado-based design agency Effective UI. “As a developer that was super-exciting. I love TypeKit. Jason Santa Maria and those other guys there have been my web-heroes, so knowing that Adobe is interesting in acquiring them is really cool.”

Louisa Churchyard, a freelance web designer from Seattle, was also excited at the TypeKit announcement.

“It’s amazing- it’s really key for designers,” she said. “Not only can you use the font functionality to use any beautiful font on the Web, but the idea that Adobe will build TypeKit into their products is really great. It will save a lot of time.”

Typekit provides font technology for sites such as The New York Times

However it was the Nitobi announcement that was foremost on the minds of most MAX delegates and conference speakers.

“I was really excited about the PhoneGap announcement,” said RJ. “ I think Adobe is doing a really great job from a technology standpoint in the way that they’re trying to push forward both Flash and HTML5. I think it’s the right tone for them and it’s the way the industry is going.”

“I think it gives Adobe a better way to play in the mobile apps space, rather than trying to deploy Flash apps to everyone’s platforms,” continued RJ. “Now they’ve got a HTML5 avenue into Apps as well. It shows that they support the things that the community supports. PhoneGap’s already big, so this gives Adobe bigger credibility with HTML developers.”

Steve Lund, of development and consulting company Digital Primateswas also very positive. “It’s interesting,” he said. “We’ve just developed an application for a company who wanted to get it on the Web, on Android, on iPad, on TV- they wanted that same experience everywhere.  More and more companies are needing that. So moving in that direction and staying on top of being able to deploy to all those places is pretty exciting. Simplifying that build process is pretty interesting too. Flex and Flashbuilder already have a pretty good way to deploy to all those devices, but if we move more to HTML 5 side of things I think we’ll be looking into PhoneGap.”

Danny Jackson of interactive design agency rain also finds the Nitobi announcement interesting, but is rather more downbeat about the PhoneGap product itself.

“We’ve just launching a project that been done using PhoneGap, but we weren’t super-impressed with it,” he said. “A lot of the time our clients come to us with a project which they want across platforms, but don’t have the budget to code it natively, so we have to look for cross-platform solutions and that’s why we used PhoneGap initially.”

Danny said a lot of clients are now specifying HTML5 as part of the project requirements these days because they want the app to run on the iPad.

“When I heard the announcement it started me wondering what advancements could be made to PhoneGap [with Adobe]. At the moment, it’s fine to work with, but it was really far off from doing all things natively for mobile. For our project [using PhoneGap] there’s some latency on iOS – it’s not as snappy as native, and for Android it’s even worse. Our thoughts then were that we probably wouldn’t use PhoneGap going forward and instead use AIR for Mobile.”

Adobe: the biggest WebKit contributor you didn’t know about  [Oct 11, 2011]

…

Dave McAllister, who has been shepherding Adobe’s open source work for several years now, says “the biggest change since last year is our adoption of and contribution to external projects – the adoption and understanding of community-led open source projects that are adding value to Adobe’s basic platforms.”

…

Some of that, but certainly not all, has come from acquiring companies like Nitobi and Day who were already involved in projects through Apache, but there’s a lot of work being done by core teams at Adobe, both in Apache and beyond, in projects that are mainstream rather than niche. “We’re making massive contributions to Apache,” he points out. “We are the drivers for jQuery Mobile, we are working on jQuery DataGrid, we are now massively involved in WebKit and in CSS Regions and Shaders [with the W3C]; CSS Regions are mainstream for WebKit [now] and Shaders are moving that way. We have two full time employees also now who are committers to WebKit and we did not have that last year. They also are working on specific technologies with WebKit, like CSS Regions and Shaders. Not including the PhoneGap submission, the number of Apache projects with current or past participation from Adobe employees is 31.”

…

“One is a specification and one is an implementation,” as McAllister puts it. “In many ways – but not all – the concept of prototyping and delivering to the mainstream of WebKit has been leading HTML5 development. The things that have been floated into WebKit show up in the W3C. We presented regions to the W3C at the same time that it went into WebKit, and it’s now mainstream in WebKit. We see Mozilla and we see IE adopting the standard from W3C; we see that standard implemented in WebKit.”

Prototyping means you’re more likely to get specifications that developers can actually build sites with. McAllister compares a problematic standard like SVG Filters (which he frankly calls “nightmarish”) with the far more practical CSS Shaders: “What you’re seeing is part of that maturity of standards versus production. There’s a reason you’re now seeing implementation lead specification.” Of course, WebKit is also an important route to mobile (with PhoneGap and AIR covering the app options for developers). The mobile web, he points out “is heavily weighted towards WebKit, in the 70% range of mobile browsers.”

Adobe is also contributing to some W3C test suites“where we have expertise” (like internationalisation) but he also sounds a note of caution. “You have to be really careful that the test itself does not become a certification suite; you don’t want it’s ‘cool, this is all open source, do with it what you want to, redistribute it any way you want to, but I’m sorry you didn’t pass the certification test so you can’t do anything with it’. That is a way to stifle that marketplace.”

Too soon to standardise

There is some work Adobe is doing that’s isn’t being proposed as a standard or being contributed to an open source project because it’s too soon, in particular touch – something that has a vendor prefix in every browser that supports it. “It would be really great to have universal hardware and software standards for touch but it’s too soon; the market’s too new. Standards codify what’s common and in the touch world there’s just too much innovation going on.”

But when new technologies stabilise, McAllister says: “You are going to see us probably being aggressive in standards activities that we need to be aggressive in. You’re seeing that a little of that with CSS. Where our customers really expect to have the best capabilities in a technology, if that is controlled by a standard, then it’s part of our job to represent what those needs are.”

That means we can expect to see Adobe continue the cycle of contributing to open source to advance platforms the company is interested in, proposing standards based on proving their ideas with those prototypes – and building tools so that developers can work with those standards.

Adobe Releases Early Preview [Preview 1] of New HTML5 Web Motion and Interaction Design Tool [Heidi Voltmer, Group Product Marketing Manager, Mark Anders, Fellow, Adobe, July 31, 2011]

Adobe Releases Early Preview of New HTML5 Web Motion and Interaction Design Tool [Adobe press release, Aug 1, 2011]

Company Invites Community Into Development Process to Shape Final Product

Adobe Systems Incorporated (Nasdaq:ADBE) today announced the first public preview release of Adobe® Edge, a new HTML5 web motion and interaction design tool that allows web designers to bring animation, similar to that created in Flash® Professional, to websites using standards likes HTML, JavaScript and CSS. Because of rapid changes around HTML5, the company is adopting an open development methodology for Adobe Edge and is releasing the software on the Adobe Labs site much earlier than normal in the development process – before it even reaches beta – in order to allow user feedback to help shape the final product.

“Now, with Adobe Edge, we’re taking our HTML5 tooling to a whole new level and look forward to getting some really useful feedback from the community over the next few months, as we refine the product.”

While in public preview, Adobe Edge will be a no-charge download that web designers are encouraged to explore and provide feedback on, to help shape future preview releases. To download the software, visit www.labs.adobe.com.

Adobe Edge, first shown at Adobe MAX 2010, is ideal for designers who want an efficient way to leverage Web standards like HTML to create Web content with motion and transitions. Adobe Edge is being designed as a fast and lightweight professional-grade tool that complements Adobe’s existing Web tools, such as Adobe Dreamweaver® CS5.5, Adobe Flash Professional CS5.5 and Adobe Flash Builder® 4.5 software.

“Over the last year Adobe has delivered on several significant HTML5 milestones including contributions to jQuery, submitting code to WebKit, and enhanced HTML5 output in Creative Suite® 5.5,” said Paul Gubbay, vice president of Design and Web Engineering, Adobe. “Now, with Adobe Edge, we’re taking our HTML5 tooling to a whole new leveland look forward to getting some really useful feedback from the community over the next few months, as we refine the product.”

The Adobe Edge preview works natively with HTML. It enables users to add motion to existing HTML documents without hampering design integrity of CSS-based layouts, and it also enables users to easily create visually rich content from scratch, using familiar drawing tools that produce HTML elements styled with CSS3. Users can import standard Web graphics assets such as SVG, PNG, JPG and GIF files and style them using CSS3. The design stage utilizes WebKit to enable design, preview and manipulation of content with incredible fidelity. The innovative timeline feature is both familiar for creative professionals and breaks new ground in animation productivity to enable users to define and customize motion applied to HTML elements with extreme precision. Content created with Edge is designed to work on modern browsers including those on Android, BlackBerry Playbook™, iOS, HP webOS and other smartphone mobile devices as well as Firefox™, Google Chrome™, Safari™ and Internet Explorer 9™.

This Adobe Edge public preview is available today on Adobe Labs as a no-charge download for anyone wanting to explore adding motion and animation to their HTML workflow or HTML animation to their skill set. Creative professionals are encouraged to dive into the public preview and provide their feedback at www.labs.adobe.com. The Adobe Edge preview is expected to be updated regularly as new functionality is added.

This summer Adobe is sponsoring the Expressive Web Tour HTML5 Campsin cities that include San Francisco, Tokyo, New York City and London to continue providing further support to people interested in HTML5.

In addition, Adobe has launched a new online resourceshowcasing some of the newest and most expressive HTML5 and CSS3 features being added to the modern Web. The new site, which was released today in beta, was created using new HTML5 and CSS3 features.

About Adobe’s HTML5 Innovations

Adobe Edge is the latest development in the company’s HTML5 and Web standards strategy which also includes commitment to innovate open source platforms like Webkit, contributing to Web frameworks like jQuery and extending existing tools like Adobe Dreamweaver and Flash to bring the next generation of Web standards to Web designers and developers.

Adobe Edge: A new web motion and interaction design tool [Rich Lee, Inspire Magazine [Adobe], Sept 20, 2011]

What is Adobe Edge? (Well, obviously it’s no longer the name of Adobe’s flagship newsletter.) Edge is a tool for enabling motion and interaction design with HTML5, CSS3, and JavaScript. Currently available as a preview on Adobe Labs, Edge is a great solution for visual, web, and interactive designers who want to make their web content come alive using web standards. As a new addition to our toolbox for the web, Edge complements Dreamweaver, Flash Professional, and Flash Builder.

As the product marketing manager for Edge, my job is to get the word out, encourage use, and communicate with customers. In this article, I discuss our first launch, what’s new with Preview 2, and the importance of your feedback in helping us continually improve future versions of Edge. If you’re eager to see Adobe Edge up close, check out Mark Anders’ video below.

ADC Presents – Edge Closer Look [Mark Anders, Adobe Fellow, Adobe Developer Connection, Aug 10, 2011] [actually a little updated version of the Mark Anders part embedded into the the press release video shown earlier]

Adobe Fellow Mark Anders demonstrates how to animate an ad with drawing tools, text, and graphics. He’ll also show you how to add motion to an existing HTML file, as well as some of Edge Preview 1’s easing functions.

Edge Preview 1

Edge was released as a preview, instead of being called a beta or even an alpha. “Preview” signified that it was a glimpse of what’s to come. The primary focus of Preview 1 was the animation model, which is the foundation we’re building on. We also focused on other starting points such as the stage, timeline, and elements controls. Our goal was to make Edge approachable and easy to use, and give our users a solid starting point.

Within a day, more than 50,000 people downloaded Edge. And Edge was one of the top 10 trending topics on Twitter. But the best result was the feedback we received and the number of animations our customers made. To see what people created within days of the Edge launch was awesome — our entire team was amazed by the level of ingenuity and creativity from the community. Check out some exampleson the Edge discussion board.

The results of Preview 1 showed us there is a lot of demand for a tool like Edge, which gave us even more encouragement to build the best product we can.

Introducing Edge Preview 2

Edge Preview 2 was released on September 8, with a theme of fit and finish improvements. We included features we weren’t able to include for Preview 1, updated to the latest version of jQuery, and fixed bugs (including a nasty one that forced some Windows users with certain graphics cards to run in 16-bit mode). We also implemented many of the requests we received from Preview 1 users.

Here’s a summary of the updates:

• Smart guides:Guides and dimension markers are displayed when an object on the stage is moved or resized. This helps you align with precision and resize objects in relation to others on the stage.
• Specify semantic tags on managed elements: Change the tag type of each shape, image and text you create in Edge to reflect how they appear in the HTML document object model (DOM).
• Copy and paste elements:You can now copy and paste elements in Edge, to easily duplicate shapes, images or text. Duplicate images will refer to the same underlying asset.
• Align and distribute elements:Select multiple elements, and align and distribute them via new options in the Modify menu.
• Drag and drop z-index manipulation: In the elements panel, you can now control the z-order of shapes, text and images created in Edge.
• Playhead time editing:You can now type into the timeline’s counter to move the playhead to a specific location, or by dragging the numeric value up or down with your mouse.
• Windows 7 update: An error on the Windows version that caused Edge to crash on startup has been resolved, no longer requiring users to change the display bit depth from 32-bit to 16-bit.
• jQuery update: Edge’s animation framework now works with the latest version of jQuery, 1.6.2.

Check out the complete list of updates on Adobe Labs.

More previews to come

Even though we’re making fast progress with Edge, there’s still more to come. We are planning to release more versions of Edge, as more features and capabilities are added. One of the biggest improvements will be interactivity. This is a major feature that has been on our radar since day 1, and is the most popular request we’ve received from the community. We are working diligently on it and hope to have it available to you soon.

Other changes you can expect are expanded features and functionality, plus more fit and finish improvements and bug fixes. Our philosophy is to improve each version of Edge by being more transparent and letting customers shape its development.

We’re also releasing more updates of Edge because of the evolving nature of web standards. Edge needs to keep up with standards and best practices as they evolve, so releasing one version of Edge that captures the HTML5, CSS3, and JavaScript capabilities of that specific point in time doesn’t make sense. The same goes for the growing multitude of desktop and device browsers on the market — projects created in Edge need to maintain integrity and render correctly for those browsers.

Edge has come a long way since it was first shown as a prototype at MAX 2010, but it’s far from finished.

Feedback is key

It’s no secret that Adobe Edge won’t be free forever. But before we put a price on it, our team needs to ensure we make a 1.0 product worth buying. So instead of assuming we know what customers want, our top priority is to harness your feedback. Feature requests, questions, bugs, good or bad comments — we want to hear them all. This development period gives us time to implement features, make changes, or even pivot directions. In fact, Preview 2 addresses many of the comments we heard from Preview 1 users. Getting Edge into your hands early helps us get it right for the future.

Edge came with a clean slate, an opportunity that marketers crave. In more than 12 years of working in marketing in Silicon Valley, I’ve been involved with a variety of projects across the hardware, software, and Internet industries. What’s different with Edge is the level of openness and desire for customer involvement in its development process. It has been a very refreshing change of methodology, especially in technology companies where decisions are often made behind closed doors. I hope this change will ultimately translate into a new level of trust and, more importantly, a better product for our customers.

To submit feature requests, report bugs, ask questions, or leave comments, visit the Edge discussion board.

Adobe MAX Keynote Announcements – Day 2 [MAX News, Oct 4, 2011]

Creating the very best user experiences

The Adobe MAX 2011 day two keynote explored the best solutions for how Adobe Flash® technology and HTML work together to deliver highly expressive experiences in the browser and as apps. Among the highlights:

– PhoneGap: Adobe has entered into an agreement to acquire PhoneGap. PhoneGap allows developers to create native applications using familiar web technologies including HTML, CSS, JavaScript, and jQuery to build and deploy applications to all major mobile platforms.

– Adobe Edge Preview 3is now available, adding new interactivity features like looping, hyperlinks, and animation control. It also has a new built-in code snippet library and the ability to add custom JavaScript. Expand the boundaries of motion and interaction design using HTML5, CSS3, and JavaScript.

– HTML contributions: Adobe has been contributing actively to HTML5 with the W3C and through contributions to Webkit to enable new expressiveness in HTML.

• CSS Regions: CSS Regions give designers more control over the flow of text in HTML by letting them wrap text around graphics and custom shapes. CSS Regions are available in the latest versions of Chromium and Internet Explorer 10.
• CSS Shaders: Adobe has proposed CSS Shaders to the W3C as a contribution to HTML, with the goal of enabling rich, animated effects for the HTML5 content elements through CSS. Find out more and see examples on the Adobe Developer Connection.

…

Adobe Edge Preview 3

…

Features Introduced in Edge Preview 3 (10/3/11)

Edge will continue to be updated during the preview period with additional features and improved functionality. Preview 3 introduces interactivity capabilities for Edge, the most requested functionality thus far. The first set of interactivity features include looping, hyperlinks, access to the Edge animation framework API, and the ability to handle HTML DOM events– all within Edge.

• Actions — The core of Edge’s interactivity capabilities, Actions are functions that can be added to handle a single event.
  • The Actions Editor uses a popup interface that lets you enter JavaScript code for a function.
  • A built-in code snippet library is available for commonly used functions like go to, stop, hyperlink, etc.
  • Add your own JavaScript code to add new flexibility to your compositions.
  • Where actions can be attached:
    • Elementsto handle click events
    • Stageto access composition-level events such as “loaded”
    • Timelineto access playback events such as “complete”
    • Triggersto allow time-based actions to be applied in the timeline
    • Objects other than triggers allow you to select multiple events you wish to handle, each with its own action.
• Labels — Insert labels on the timeline as reference points in your code, to enable functionality like playing or seeking to that point in the timeline.

See the complete list of features in Edge Preview

…

FAQ

…How does Adobe Edge differ from other Adobe tools for the web?

Edge is a new addition to the existing set of Adobe professional web tools like Dreamweaver, Flash Professional, and Flash Builder. Each Adobe tool has strengths for their respective use cases and support different technologies:

Product	Sample use cases	Supported technologies
Adobe Edge Preview	Advertising, simple animations and motion design for new compositions or using existing CSS-based page layouts	JavaScript, JSON, HTML/HTML5, CSS, web graphics including SVG, jQuery-based animation framework
Adobe Dreamweaver CS5.5	Websites and web applications for desktops, smartphones, and other devices	HTML/HTML5, CSS, JavaScript, jQuery, PHP, PhoneGap, site management, FTP, CMS frameworks, SVN (Subversion)
Adobe Flash Professional CS5.5	Immersive interactive experiences, mobile applications, gaming, premium video, advertising	ActionScript, Flash Player, AIR for desktop and mobile
Adobe Flash Builder 4.5	Rich Internet applications (RIAs) and mobile applications	Professional ActionScript IDE, Flex, Flash Player, AIR for desktop and mobile

Adobe & jQuery
Updates on Adobe’s use of, and contributions to, jQuery

Adobe Edge Preview 3 available [Oct 4, 2011]

Below, I’ll briefly cover a few of the new additions in Preview 3 and hopefully give you some background and tips that help to get you going.

Preview 3 adds support for interactivity in the form of actions and timeline triggers which execute a custom JavaScript function, defined by you, whenever a specific event occurs on an element, or a time offset within a timeline has elapsed. Actions and triggers provide powerful hooks for manipulating the timeline, elements on the page, or for calling out to your application specific code to accomplish some task. To kick-start the use of actions and triggers, a small library of code snippets has been provided in both the actions and trigger panels in Edge, which allow you to insert the code for common tasks with just a click of a button. The snippets are a great way to get a feel for the types of things you can do with an action or trigger. It’s also a good way to start learning the basics of the Edge Runtime API which the team has started to document here:

http://adobe.com/go/edge_jsapi

Since the Edge Runtime itself uses jQuery 1.6.2, the code for your custom action/trigger functions can make full use of the jQuery core API.

Here are some things to keep in mind when writing your custom event/trigger functions:

…

jQuery Mobile 1.0 Release Candidate 1 available [Oct 3, 2011]

jQuery Mobile 1.0 Release Candidate 1 is now available for download and testing. This release contains numerous bug fixes and some much needed updates to the framework documentation.

The team is also very excited to announce the development of a new Theme Roller Mobile tool, spearheaded by our very own Tyler Benziger, which makes it incredibly easy to create jQuery Mobile themes in just minutes, without having to edit a single line of CSS. Also in the works is a Download Builder tool which allows you to generate custom versions of the jQuery Mobile framework JavaScript and CSS files. Simply choose the components you wish to use, and the Download Builder will take care of building the custom full/minified JavaScript and CSS files necessary to support those components.

Full details can be found here:

http://jquerymobile.com/blog/2011/09/29/jquery-mobile-1-0rc1-released/

You can see a video preview of the new Theme Roller Mobile tool here:

http://bit.ly/o3iEe2

For information on how to download or insert jQuery Mobile into your pages, go here:

http://jquerymobile.com/download/

A demo of jQuery Mobile 1.0 RC1 can also be found here:

http://jquerymobile.com/demos/1.0rc1/

The team is currently focused on fixing bugs and improving performance. If you have any issues or enhancement requests, please file them in the jQuery Mobile issue tracker on GitHub so they can be considered/addressed for the 1.0 final release:

https://github.com/jquery/jquery-mobile/issues

jQuery Mobile Beta 3 available [Sept 9, 2011]

… Finally, we are now driving towards the 1.0 release. Focus will be placed on fixing bugs and improving performance. …

jQuery Mobile Beta 2 available [Aug 4, 2011]

… One important change to note with this release is the updated Mobile Grade Browser Support matrix, which includes several new platforms in the A-Grade support level:

http://jquerymobile.com/gbs/ [“as of 1.0 RC1, we’ve covered all our target platforms for the project” but Windows Phone 7 is just HTC 7 Surround]

…

Adobe Edge Preview 1 and jQuery [Aug 2, 2011]

Adobe recently released Preview 1 of Adobe® Edge, a new web motion and interaction design tool, on labs:

http://labs.adobe.com/technologies/edge/

Edge allows a designer to create animated content for websites, using web standards like HTML5, JavaScript, and CSS3. To get an idea of the types of animations you can create, be sure to check out the “Getting Started” video [Available on the Adobe TV only] and samples:

http://tv.adobe.com/watch/adc-presents/edge-getting-started/
http://labs.adobe.com/technologies/edge/resources/

jQuery is one of the key components in Edge’s implementation. It is used both internally, within the application itself, and within the final animation output it produces, to evaluate selectors and manipulate/traverse the DOM.

The animation output produced by Edge does not make use of jQuery’s $.animate() function. Edge uses its own declarative representation and implementation of timelines and tweens. This representation is designed to be highly flexible yet toolable and human-readable.

Edge Preview 1 uses jQuery 1.4.2. Succeeding Previews will use newer versions of jQuery, and the next release is expected to use version 1.6.2.

Please keep in mind that this is a preview, not a beta, or finished product so there is still quite a bit of work to be done on the product itself. Also, the Edge team is aware of the many ways to animate content with open web technologies (JS, CSS3, Canvas, SVG, etc). For this preview, the focus was on basics, specifically, animation of elements within the HTML document DOM. We’ve heard loud and clear from the community about their desire to animate content within canvas and SVG elements. I assure you that the team has already thought about support for content inside these elements, and so there are already implementation requests for these features in the Edge product backlog.

Dreamweaver CS 5.5 Speaks jQuery [April 13, 2011]

With the release of Creative Suite 5.5 we’re beginning to see the benefit of Adobe’s support for jQuery.

It’s especially exciting for us to see the integration of jQuery Mobile into Dreamweaver CS 5.5. As this video shows, Dreamweaver users now have an incredibly easy way to get started with jQuery Mobile and mobile web application development.

The addition of industrial-strength jQuery code hinting is also fantastic to see and should be a welcomed addition to all those folks who work with jQuery code in Dreamweaver.

The Current State of (Touch) Events [March 7, 2011]

One of the main goals of the jQuery Mobile project is to allow developers to extend the reach of their application content to a wide variety of browsers on different devices. If you take a look at some of the web-enabled devices that are currently out on the market, you will see that there are many different means being employed to allow users to navigate and click/activate elements within a web page.

Older or low-end devices, with no touch screen support, usually have hardware buttons, scroll-wheels, nubs/joysticks, or track-balls. Devices that use buttons and scroll-wheels usually scroll the page, highlighting actionable (clickable) items along the way. When the user activates the highlighted element on screen, a click event is usually dispatched to trigger any actions associated with that element. Devices that use nubs/joysticks or track-balls typically display a cursor on screen, and usually dispatch mouse and click events just like the desktop. The main point to note here is that the browsers on these devices are using the standard desktop mouse events to trigger actions on a web page.

Newer or high-end devices, now rely on touch screens as the main means for scrolling and manipulating items within the display. Although there are many options for browsing the web on these devices, a growing number of them are deploying WebKit based browsers as the default.

One of the common misconceptions I hear quite frequently is the assumption that because all these browsers are all based on WebKit that they all share the same features and work identically. The reallity is that WebKit is just a rendering engine with a set of APIs that allow developers to write browsers on top of it to communicate and drive the rendering of the page. It doesn’t know how to load a file, it doesn’t know what hardware/platform it is running on, what graphics library is being used to render objects to the screen, or even how to deal with OS level events. All of these things are what browsers, built on top of WebKit, need to provide, and this is what is going to make things interesting and challenging for the next few years. All of these WebKit based browsers are either written entirely by the device vendor, or supplied with the OS, but modified by vendors to work better with their hardware and/or add/remove browser and Web Kit features.

All of these factors create a mobile environment where there are lots of WebKit based browsers, but the features they support, performance, and user experience all vary quite a bit.

When Safari for mobile hit the scene, via iOS, it introduced a set of new touch events:

• touchstart
• touchmove
• touchend
• touchcancel

These are the DOM-level events that Safari mobile dispatches in real-time as the user places one or more fingers (touches) on the screen and drags them around. The big problem is that most of the pages on the web assume the use of mouse and click events. To keep most web pages functional, mobile Safari dispatches synthesized mouse events afterthe user lifts his finger so the web page receives a series of mouse events in the following order:

• mouseover
• mousemove
• mousedown
• mouseup
• click

At this point you may be asking “why didn’t the Safari folks just use mouse events instead of creating a whole new set of events?” I think the answer has to do with the fact that the iOS devices support multi-touch. On traditional computing platforms there was always a notion of a single mouse with a main (left) button and maybe center and right buttons. Although you could click and hold down these buttons at different times to generate multiple overlapping mousedown and mouseup events, they were still tied to a single source for the move/positioning information. Also, folks have become accustomed to the fact that these buttons do specific actions. For example right mouse buttons are typically associated with bringing up a context menu, etc. With the new multi-touch events, not only can you have more than 3 touches, each touch generates its own set of touchstart, touchmove, and touchend events, and in some cases touchmoves could be coalesced into single events if more than one touch shares the same target. It suffices to say that the newer touch events are fundamentally different in behavior and perhaps the Safari folks did not want to break or modify the well established mouse usage and behavioral model.

There are a few interesting things to note about touch events on iOS:

• Only one event for each mouse event type is dispatched.
• Mouse events are dispatched approximately 300+ milliseconds after the user lifts his finger.
• Mouse events are not dispatched if the touch results in the screen scrolling. Scroll events are also not dispatched until after the user lifts their finger.
• Mouse events are not dispatched if the user initially touches the screen with more than one finger.
• Touch events are not dispatched to textfields and textareas. Only mouse events are dispatched.

Ok, so getting back to the larger picture, vendors with touch-based devices and WebKit-based browsers have decided to adopt Safari’s touch events. The problem is now each vendor has to implement the event code to drive the touch events. It was explained to me by a device vendor that every hardware device and OS has its own unique implementation and API for dispatching events and that this leads to some interesting differences in browser behavior and event implementations. After playing with several iOS, Android and BlackBerry devices, I have seen first handthat this is indeed true. Some examples off the top of my head include:

• BlackBerry dispatches interleaved touch and mouse events real-time while Android and iOS dispatch single mouse events after the user lifts their finger.
• Some devices dispatch scroll events in a somewhat real-time manor, while others only dispatch a single event after the user lifts their finger.
• Android devices require preventDefault on touchstart to prevent screen scrolling, while other devices require a preventDefault on touchmove, but this causes form elements to break because you can no longer click on them.
• iOS dispatches a touchend event when the screen scrolls, but some platforms just stop dispatching touch events while the screen scrolls.

Some of these differences are bugs, or temporary problems due to current implementation, but the fact remains that the devices with these problems may exist and be used for a long time since vendors decide if and when these devices can be updated with fixes. Hopefully things will get better as standards emerge.

Another complicating factor is that some devices have both a touch-screen and a nub/joystick/track-ball. For jQuery Mobile, we need to support both touch and mouse events within all our components. We can’t just rely on mouse events because they don’t provide the real-time feedback/response that is necessary to make things feel snappy when the user is touching the screen. But supporting both is a big headache because it complicates event handling. For example, we need to set up a component to listen for both touch and mouse events, but then we need to disable mouse event handlers if touch events are used so that handlers/actions are only triggered once. We then need to re-enable the mouse handlers when the touch events are all done, but sometimes “done” is hard to figure out due to the fact that sometimes touch events just stop coming because the screen just scrolled.

Over the next few weeks we’ll be blogging about some of the ways we are dealing with these challenges while trying to reduce the event code complexity for jQuery Mobile components and implementing features like faux momentum scrolling. Stay tuned! [Have not been realized!]

…

By Steve Drucker– 3:57 PM on March 31, 2011

Have you looked at Sencha Touch? Much better IMHO.

Adobe and jQuery Sitting In A Tree… [Feb 7, 2011]

If you attended Adobe MAX in November you heard us declare our appreciation for jQueryand the important role it plays in helping web designers and developers create engaging experiences across browsers and devices.

Along with that, we announced our intention to 1) increase support/usage of jQuery within our products and 2) contribute to jQuery development projects.

This blog is where we’ll share information about how those efforts are going and hopefully hear from you about what you’d like to see from the combination of jQuery and Adobe.

This being our first post, there are a couple things we should mention to catch you up on what’s been happening since MAX. We’re currently involved in two projects; jQuery Mobile and the jQuery Data Grid.

jQuery Mobile–a touch-optimized UI framework for smartphones and tablets–is currently on its Alpha 3 release. We’re very excited about this project and have had one of our finest–Kin Blas–working closely with the rest of the jQuery mobile team since November. As a side note, Kin will be speaking about jQuery Mobile at a Bay Area Mobile (BAM) meetupin March. Highly recommended if you’re interested in getting an overview of the framework from one of its main contributors.

jQuery Data Grid–a rich, dynamic grid component–is a new jQuery UI project. We recently became sponsors and look forward to getting more involved from a development standpoint. A key aspect of the Data Grid project is the development of a generic data model and a generic template model. These are the pieces we’re most interested in as we’d like to see a jQuery-based framework that helps web designers/developers more easily work with dynamic, client-side data.

We’re thrilled to be participating in the evolution of jQuery and we look forward to sharing more news in the months ahead.

jQuery Mobile: State of the Framework (PDF presentation, 142 slides) [Todd Parker & Scott Jehl, filament group, Oct 1, 2011]

jQuery Mobile: Touch-Optimized Web Framework for Smartphones & Tablets [product website]

A unified user interface system across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design.

Project Goals and Strategy

Seriously cross-platform & cross-device

jQuery mobile framework takes the “write less, do more” mantra to the next level: Instead of writing unique apps for each mobile device or OS, the jQuery mobile framework will allow you to design a single highly branded and customized web application that will work on all popular smartphone and tablet platforms. Device support

Touch-optimized layouts & UI widgets

Our aim is to provide tools to build dynamic touch interfaces that will adapt gracefully to a range of device form factors. The system will include both layouts (lists, detail panes, overlays) and a rich set of form controls and UI widgets (toggles, sliders, tabs). Demos

---

Themable designs: Bigger and better

To make building mobile themes easy, we’re dramatically expanding the CSS framework to have the power to design full applications. For more polished visuals without the bloat, we added support for more CSS3 properties like text-shadow, box-shadow, and gradients.

jQuery Mobile ThemeRoller Preview [Oct 1, 2011]

jQuery Mobile 1.0 RC1 Released! [Sept 29, 2011]

…

ThemeRoller Mobile: Coming soon!

We’ve been working on a completely new ThemeRoller tool, built from the ground-up for jQuery Mobile. Tyler Benzinger from Adobe has been spearheading the development effort (thanks Tyler!) and we’re very close for having a beta version ready for release [in two weeks]. We’re really excited to show it off because there are a lot of super cool features that make it drop-dead-simple to build a stunning theme in minutes.

…

Essential jQuery Plugin Patterns [Smashing Magazine, Oct 11, 2011]

… Some developers may wish to use the jQuery UI widget factory; it’s great for complex, flexible UI components. Some may not. …

…

“Complete” Widget Factory

While the authoring guide is a great introduction to plugin development, it doesn’t offer a great number of conveniences for obscuring away from common plumbing tasks that we have to deal with on a regular basis.

The jQuery UI Widget Factory is a solution to this problem that helps you build complex, stateful plugins based on object-oriented principles. It also eases communication with your plugin’s instance, obfuscating a number of the repetitive tasks that you would have to code when working with basic plugins.

In case you haven’t come across these before, stateful plugins keep track of their current state, also allowing you to change properties of the plugin after it has been initialized.

One of the great things about the Widget Factory is that the majority of the jQuery UI library actually uses it as a base for its components. This means that if you’re looking for further guidance on structure beyond this template, you won’t have to look beyond the jQuery UI repository.

…

jQuery Mobile Widgets With The Widget factory

jQuery mobile is a framework that encourages the design of ubiquitous Web applications that work both on popular mobile devices and platforms and on the desktop. Rather than writing unique applications for each device or OS, you simply write the code once and it should ideally run on many of the A-, B- and C-grade browsers out there at the moment.

The fundamentals behind jQuery mobile can also be applied to plugin and widget development, as seen in some of the core jQuery mobile widgets used in the official library suite. What’s interesting here is that even though there are very small, subtle differences in writing a “mobile”-optimized widget, if you’re familiar with using the jQuery UI Widget Factory, you should be able to start writing these right away.

…

Customizable starter design for jQuery Mobile [Adobe Developer Connection, Oct 11, 2011]

This article shows you how to use this customizable starter designfor your jQuery Mobile projects. Read the overview to learn about two key approaches to developing websites for mobile, preview and download the template and related files and assets, and watch a short video to learn how you can customize this template.

• Overview: Understand jQuery Mobile development
• Watch the video: Using the custom template
• Preview and download the template

Overview: Understand jQuery Mobile development

When developing your website for use with mobile devices you have two options. You can make your design “responsive” to varying screen sizes by using CSS media queries, a technique referred to as multiscreen design, responsive design, or screen-sensitive design. The idea behind this approach is to adapt your design based on the users’ screen sizes. Your web page uses a single set of HTML markup, and CSS is used to alter the appearance and layout of that HTML in order to adapt your design for varying screen sizes. (For more information on and a free template for this approach see Customizable starter design for multiscreen development.)

The second approach deals with using an alternate set of HTML and CSS for the mobile version of your website, while using JavaScript to alter the user experience. This approach can give your mobile website a “mobile app feel,”which can tie in closer with the usability of the device’s operating system. Figure 1 represents the relationship between the HTML markup and the design view of the content of a jQuery Mobile project in Dreamweaver.

Figure 1. Relationship between the HTML markup and the design view of the content of a jQuery Mobile project in Dreamweaver.

jQuery Mobile has been developed specificaly for this purpose. And Dreamweaver CS5.5, has built-in support to aid you in creating mobile websites built on the jQuery Mobile framework. jQuery Mobile allows you to build pages, or screens, in a single HTML file, and control what information is seen based on user interaction. As the content slides back and forth, the user experience begins to resemble many mobile application interfaces, while allowing you to break your content into manageable pieces for small-screen consumption.

…

Building Mobile Pages with Dreamweaver CS5.5 [Aug 3, 2011]

Build mobile-friendly web pages based on jQuery JavaScript objects quickly and easily with Dreamweaver CS5.5. And do it without coding! David Karlins, author of Adobe Creative Suite 5 Web Premium How-Tos: 100 Essential Techniques [Adobe Press, Aug 17, 2010], takes you through the Dreamweaver techniques that make this eminently possible.

Customizing Mobile Pages with jQuery Mobile in Dreamweaver CS5.5 [Aug 18, 2011]

New starter pages in Dreamweaver CS5.5 serve as templates for building mobile-friendly pages with jQuery Mobile animation and interactivity. Or you can use jQuery Mobile widgets to design mobile-friendly pages from scratch, with your own choice of jQuery Mobile objects. All without coding! David Karlins, author of Adobe Creative Suite 5 Web Premium How-Tos: 100 Essential Techniques, explores this Dreamweaver magic.

…

In this tutorial, we built a mobile-ready page that used jQuery Mobile to define expandable blocks.

Turning Web Pages into Apps with Dreamweaver CS5.5 [Sep 14, 2011]

David Karlins, author of Adobe Creative Suite 5 Web Premium How-Tos: 100 Essential Techniques, concludes his three-part miniseries on how to get mobile with Dreamweaver. This article walks through the relatively easy process of turning a mobile-friendly web page into an app that runs on iOS or Android. Amazingly, Dreamweaver does most of the work, and no coding is needed!

…

In the second article in this series, “Customizing Mobile Pages with jQuery Mobile in Dreamweaver CS5.5,” I showed you how to build mobile-friendly pages by using Dreamweaver CS5.5’s jQuery Mobile widgets to create your own pages, more or less from scratch.

So actually, if you’ve worked your way through eitherof these previous tutorials, or you know how to build jQuery Mobile pages in Dreamweaver CS5.5 without needing those articles, you’re almost ready to generate an app from your page in Dreamweaver CS5. First let’s look at a checklist of what you need to have in place before generating an app in Dreamweaver CS5.5:

• You need to have a web page built exclusively with HTML5 (which can include audio and video), CSS3, and jQuery Mobile. No Flash objects.NOTENotice that I said a web page. Your app will be generated from a single HTML page. As I explained in the two earlier articles in this series, Dreamweaver’s jQuery Mobile widgets generate forms of content display that look and feel like pages, but everything is within a single HTML page.
• Finally, if you’re going to generate apps for Apple’s mobile iOS (the operating system for the iPod touch, iPhone, and iPad), you’ll need to be using Dreamweaver CS5.5 installed on a Mac. I’ll go into the reasons why shortly, but you need to know about this constraint right away. If you’re generating apps for Google’s Android mobile operating system, you can use either a Windows or Mac install of Dreamweaver CS5.5.

Dreamweaver CS5.5 rather seamlessly invokes software developer kits (SDKs) from Apple and Google, along with PhoneGap, to generate apps. Once you’ve designed your single web page with HTML5, CSS3, and jQuery Mobile, you’ll follow a relatively simple three-step procedure to build your app in Dreamweaver CS5.5. The following sections provide the details, but these are the basic steps:

1. Configure the application framework(s).This is a one-time step. You install and connect Dreamweaver with the software development kits (SDKs) from Android and iOS. Once these SDKs are installed and configured for Dreamweaver, you don’t need to mess with this step again.
2. Define your mobile application settings.In this step, you specify the name and other parameters of your app.
3. Build and emulate the app. This process is more or less a matter of clicking a button, waiting awhile, and then viewing your new app in a mobile device emulator on your laptop or desktop.

…

Getting started with jQuery Mobile [Adobe Developer Connection, May 27, 2011]

…

To support your mobile development needs, jQuery Mobile employs a philosophy called progressive enhancement. At its roots, progressive enhancement means this: Start with static semantic HTML markup, which should work in every browser. Then add your behaviors and enhancements (bells and whistles) on top of that. This ensures that the content of your page and basic HTML functionality is still accessible to less capable browsers.

The challenge with mobile browsers is a real issue. On the one hand you have feature-rich browsers (such as Android web browsers, BlackBerry 6, and iOS Mobile Safari) that are all running variations of WebKit—a rendering engine that powers many web browsers such as Google Chrome and the desktop version of Apple’s Safari. (WebKit knows nothing about loading things off of a network. It knows nothing about native OS events. It knows nothing about scrolling. Every OS, browser, or device vendor, needs to build a browser on top of this engine to provide these things.) Then you have the millions of phones running Nokia’s Symbian or Windows Mobile 6 and earlier that have fragmented support web standards. To add to the challenge is that there are different versions of WebKit used in the different mobile OSes. The bottom line is that progressive enhancement is a model that allows your content to display on any of the supported mobile devices.

The first step to getting started using jQuery Mobile is to set up a web page.
… You will need to use three basic areas of content on your web page when building your first jQuery Mobile site. … [… header … content … footer] …

Creating pages in your mobile site using links

… [as a “first level” content add a menu that links to different pages] …

Test the page on your Android or iOS device. When you load the web page you will get three things:

• The menu loads as its own page (you can try to scroll up and down but you will not see anything else).
• When you select a link, the page will transition with an animation sequenceas it moves to the new section.
• When you move away from the menu page a back button automatically appears in the top header DIV section.

Each of these DIV elements will load inside of the web browser and look like separate web pages. The movement between screens is fluid.

The recommendation of creating multiple screens of content on one page allows you to reduce the page load times that cause many mobile devices to appear slow. You can link to external web pages, however, with the following caveat: Links in jQuery Mobile are treated as Ajax calls. Links within a jQuery Mobile page take advantage of CSS Transitions to change the screens. When you want to link to a page outside of the application you are in you need to create a forcing action that creates a new document and replaces the current jQuery Mobile files.  This is demonstrated with the following example:

<a href="http://www.madinc.co" rel="external">madinc.co</a>

You need to include the rel="external" property and value. This allows you to link to a web page outside of the local page links you have been using up to this point. However, jQuery Mobile goes one extra step. Instead of just treating external links as a link outside of your site, jQuery Mobile will apply the page transition animation. What this gives you is a unique one-up over other popular mobile frameworks. Instead of having all of your website content in one page, you can split up the content over several pages allowing you to build larger solutions.

Working with components

Of course, links and pages are just one part of mobile web design. A second challenge many mobile web developers face is the explosion of apps. Unlike web pages, apps for Android, iOS, and other systems are built with complex technologies such as Objective-C, Java, and C#. These technologies allow developers to easily add menu tools, unique list and other controls, and components not found natively in HTML.

jQuery Mobile is currently shipping with a selection of components. The following components are included in the current alpha version [the components are nominally the same in the RC1]:

• Pages
• Dialog boxes
• Toolbars
• Buttons
• Content formatting
• Form elements
• List views

Adding and changing a component is not too hard. If you know a little HTML, then you are good to go.

…

Where to go from here

A lot of work has clearly gone into the current alpha version of jQuery Mobile. If you have been waiting to jump into the mobile web design world then your wait is over. jQuery Mobile gives you a framework that would otherwise make mobile web development very difficult.

For more information about using jQuery Mobile, refer to the following:

Explore how to use jQuery to make designing for mobile more efficient [Adobe TV, April 10, 2011]

Using and customizing jQuery Mobile themes [the same author, Adobe Developer Connection, July 11, 2011]

In my earlier article, Getting started with jQuery Mobile, I provided an introduction to using the jQuery Mobile framework to build great web experiences for smartphones and tablets. Out of the box, the websites you build with jQuery Mobile look great. Buttons are glossy, gradients are smooth, and the overall interface is elegant.

Depending on your design requirements, however, you may want to blend colors to match your company colors or brand, or highlight or mute buttons and tabs. In short, you may want control of the look and feel of your jQuery Mobile website. This tutorial demonstrates how you can extend the visual structure and themes in a jQuery Mobile website.

jQuery Mobile themes and swatches

jQuery Mobile uses cascading style sheets (CSS) to control the visual layout of content on the screen. There are two main partsof the main jQuery Mobile CSS document:

• Structure, which controls the position, padding, and margins for elements such as buttons and tabs on the screen.
• Theme, which controls specific visual elements such as fonts, colors, gradients, shadows, and corners. Modifying a theme allows you to control the visual elements of objects such as buttons.

Note:To reduce the use of images (and server requests), jQuery Mobile relies on CSS3 properties to add rounded corners, shadows, and gradients instead of techniques that traditionally required JPEG or PNG images. Buttons, backgrounds, and tab bars are created using CSS. It is possible to use images to control your layout, but this is the exception and not the rule.

Each theme can include one or more swatches. A swatch sets the color values for bars, content blocks, buttons, and list items in a theme. You can use swatches to easily switch among alternative color schemes for the main theme.

The idea behind swatches is to provide quick access to alternate color schemes for a given website. While pages for any website generally apply a consistent color scheme, there are occasions where specific elements on a page need to be highlighted (for example, a Try It button) or de-emphasized (for example, a Not Interested button). Swatches enable you to define and use an alternate color scheme to cover these cases.

The default CSS document that comes with jQuery Mobile has a theme with a set of five swatches that are named a, b, c, d, and e. By convention swatch ais the highest level of visual priority; it is black in the default theme (see Figure 1).

Figure 1. A screen created using the default theme and swatch.

Use of the five default jQuery swatches (see Figure 2) is tied to the following jQuery conventions:

• a(black): high-level visual priority
• b(blue): secondary level
• c (gray): baseline
• d(gray and white): alternate secondary level
• e (yellow): accent

Figure 2. The five default swatches from a (left) to e (right).

…

Creating jQuery Mobile website themes in Fireworks [Adobe Developer Connection, Oct 03, 2011)

Dreamweaver CS5.5 Studio Techniques: Progressive Enhancement with HTML5 and CSS3 [July 18, 2011]

Customizable starter design for multiscreen development [Adobe Developer Connection, Jul 11, 2011)

Getting started with jQuery Mobile [Adobe TV, May 27, 2011]

Getting started with jQuery Mobile and Adobe Dreamweaver CS5.5 [Edge Newsletter, May 17, 2011]

Dreamweaver CS5.5 and mobile [Adobe TV, May 3, 2011]

Mobile ThemeRoller [Todd Parker, June 13, 2011]

Initial ideas for the mobile ThemeRoller requirements. Consider making this a simple JS tool that can read and edit the theme CSS and be extensible by developersso it can slot into their tools.

Simple mockup.

GLOBAL SETTINGS /////////////////////////

Active state = Same as one of swatches below

Box Corner radius [0.6em] Button corner radius [1em]

Icon [black|white] Disc color [hex] Disc opacity [%]

SWATCHES /////////////////////////

• Default to 5 swatches (A, B, C, D, E), can add up to 26 total (A-Z)
• Each swatch has the following fields for these 5 elements: Bar / Body / Button up / Button hover /Button down
• font-family [input]
• font-weight [normal|bold]
• text-color [hex]
• text-shadow [blur][offset][offset][hex]
• border [hex]
• background-color [hex]
• background-image [hex][hex] = 2 stop gradient, can specify img
• Icon [black|white]

12.00

Normal
0

false
false
false

EN-US
X-NONE
X-NONE

MicrosoftInternetExplorer4

/* Style Definitions */
table.MsoNormalTable
{mso-style-name:”Table Normal”;
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-qformat:yes;
mso-style-parent:””;
mso-padding-alt:0in 5.4pt 0in 5.4pt;
mso-para-margin-top:0in;
mso-para-margin-right:0in;
mso-para-margin-bottom:10.0pt;
mso-para-margin-left:0in;
line-height:115%;
mso-pagination:widow-orphan;
font-size:11.0pt;
font-family:”Calibri”,”sans-serif”;
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;}

When can I use CSS Regions?

Compatibility table for support of CSS Regions in desktop and mobile browsers.

Legend

Green

Supported

Red

Not supported

Greenish yellow

Partially supported

Gray

Support unknown

CSS Regions – Working Draft

Method of flowing content into multiple elements.

Resources:

·         Adobe prototype build & samples

·         IE10 developer guide info

Note: Currently supported in WebKit using -webkit-flow: “flow_name”; and content: -webkit-from-flow(“flow_name”); Supported in IE10 using an iframe with -ms-flow-into: flow_name; and -ms-flow-from: flow_name;