Home » Posts tagged 'jQuery Mobile'

Tag Archives: jQuery Mobile

Application Craft: a multiplatform rapid development system and SaaS for HTML5 et al

Application Craft – our one minute overview [Oct 29, 2011]

Check out our fantastic one minute video. It shows you just some of the great development features available.

Related information: Microsoft and jQuery Mobile, PhoneGap [Oct 13, 2011]

More information:
New website [Nov 4, 2011]
Technology
Features
How our system works [Nov 9, 2011]
– Example SmartSites (=websites for smartphones, their core value proposition) in the Content ideas: Location Specific Web Sites, Retail, Publishing and Other
– Use cases in App Dev – Build Web, Mobile and Tablet Apps: Mobile, Workflow, Forms, Reporting, Mashups and Features for that
[this is called by them AppOps – their developer value proposition – meaning: “a substantial set of developer oriented functionality that allows you to build pretty well any sort of business or data-centric App (so not great for games) ”]
Application Craft – Learning Center [from Oct 22, 2011 on, only half done yet]
(including an API Cheat Sheet, the other resources are very concise videos and links to the reference manual )
Application Craft – User Guide
Professional Services [Oct 20, 2011] offerings:

Developer Resources

Fork Application Craft on GitHub

As of today (November 3rd, 2011) we are preparing our code for public availability on GitHub. Current estimations are that it will be available in the last week of November. As soon as it is available, we will be letting everyone know and you will find a large link here.

Freddy May, Founder CEO:

I founded Application Craft in September 2009. We started writing code a month or two later and we released our first really proper version in June 2011.

I do the product design and have an extraordinary team of guys and one gal in Russia [in Yoshkar-Ola the capital city of the Mari El Republic]who are a full part of the company. They do all the really hard work and have most of the brains.

Investors [April 8, 2011]

Application Craft is a UK company, founded by Freddy May and backed by 3 Angel Investors.

Urs Wietlisbach – Angel

Urs is the co-founder and Vice Chairman of Partners Group, one of the world’s largest independent private markets asset management companies, with over US$ 23 billion in assets under management [and over 500 employees and 15 offices].

Application Craft IDE [Fredy May, Application Craft, Oct 13, 2011]
[Release: 1.12.1, October 24, 2011 with jQuery Mobile RC1 and Alpha release of Workflow.Detail; Release: 1.10.7, October 3, 2011]

We are just launching our new IDE for building Apps and Content that can be deployed to Mobile, Tablet and Desktop. It is all browser based and uses just HTML5/Javascript/CSS.</p>
<p>It is now released and available on our cloud platform (for not a lot of money) as well as on Amazon AWS from November (for free).</p>
<p>We are looking for advanced content designers as well as javascript developers of all levels to give us their feedback and help guide the product. We are still offering free support at this stage so there really is $0 cost.</p>
<p>It has full support for Responsive Design as well as Client and Server Side Javascripting. </p>
<p>Anyway, take a look and please feel free to contact me directly fmay@applicationcraft.com or on skype 'freddymay'.</p>
<p>

We are just launching our new IDE for building Apps and Content that can be deployed to Mobile, Tablet and Desktop. It is all browser based and uses just HTML5/Javascript/CSS.

It is now released and available on our cloud platform (for not a lot of money) as well as on Amazon AWS from November (for free).

We are looking for advanced content designers as well as javascript developers of all levels to give us their feedback and help guide the product. We are still offering free support at this stage so there really is $0 cost.

It has full support for Responsive Design as well as Client and Server Side Javascripting.

Anyway, take a look and please feel free to contact me directly fmay@applicationcraft.com or on skype ‘freddymay’.

Responsive Design and Javascript Coding in a 100% browser based IDE. [Fredy May, Application Craft, Oct 30, 2011]

Responsive Design and Javascript Coding in a 100% browser based IDE. The first of its kind.</p>
<p>There is lots of chatter and twitter about Responsive Design for Web content right now. What about Apps (both Web Apps and Native ones)? This is my blog post on this topic </p>
<p>http://www.applicationcraft.com/blog/495-responsive-design-adaptive-layouts-application-craft </p>
<p>One of the key things that developers should be focusing on is how to build an App once that works on various screen sizes and, more importantly, on different devices such as Smartphones and Tablets. </p>
<p>This blog post looks at an extremely cool, 100% browser based IDE that enables mobile and desktop apps to be built while meeting all of these requirements for Responsive Design.</p>
<p>It highlights an App that works on everything from a large screen to an iPhone and looks great on all of them. This IDE (from Application Craft) also allows mobile content Apps to be built that also follow the Responsive Design principles.

Responsive Design and Javascript Coding in a 100% browser based IDE. The first of its kind.

There is lots of chatter and twitter about Responsive Design for Web content right now. What about Apps (both Web Apps and Native ones)? This is my blog post on this topic

applicationcraft.com/blog/…

One of the key things that developers should be focusing on is how to build an App once that works on various screen sizes and, more importantly, on different devices such as Smartphones and Tablets.

This blog post looks at an extremely cool, 100% browser based IDE that enables mobile and desktop apps to be built while meeting all of these requirements for Responsive Design.

It highlights an App that works on everything from a large screen to an iPhone and looks great on all of them. This IDE (from Application Craft) also allows mobile content Apps to be built that also follow the Responsive Design principles.

URL: http://www.applicationcraft.com/blog/495-responsive-design-adaptive-layouts-application-craft

PhoneGap + Application Craft = Pain-Free Mobile App Development [a PhoneGap case study, Nov 7, 2011]
Remark: while among jQuery related tools it is one of 13, it is the only other development system case-study by PhoneGap next to the earlier mobileFX!

Just as the PhoneGap mantra is fast and easy cross-platform mobile app deployment, Application Craftcreators are committed to making the mobile app and content development process pain-free. No wonder these two technologies get on so well!

Application Craft is a cloud-based, desktop and mobile app development environment for building enterprise apps and mobile and tablet content. On top of its advanced browser-based IDE, Application Craft offers a sophisticated back end that supports database integration, data storage and more. Examples of apps built with Application Craft include the Tate Modern Museum mobile app and the JamieOliver.comapp.

So, why is Application Craft and PhoneGap a match made in heaven?

Application Craft generates 100% JavaScript apps. When combined with PhoneGap and PhoneGap Build, apps built using Application Craft can access native device features and can be automatically deployed to app stores.

PhoneGap Build–a cloud-based services that compiles PhoneGap apps for various platforms–provides a “huge bonus” because it seamlessly manages the complexities of native compilers, says Freddy May, Founder and CEO of Application Craft. “The PhoneGap Build API is icing on the cake because it meant we were able to achieve the tightest possible integration with Application Craft.”

May adds that integrating the PhoneGap API into Application Craft was easy. Despite PhoneGap Build being in beta, Application Craft developers completed the integration without a single email or call to PhoneGap. The result is an app deployment feature that Application Craft is proud of–a build of five platform binaries takes about a minute. “This is more than acceptable especially when you consider it’s an asynchronous process and we allow our users to work on other things as the apps compile. Once a user can specify a single platform build via the build API, it should be even faster,” he says.

By adding cross-platform app compilation to Application Craft, PhoneGap Build saves developers many tedious testing hours, which translates into a major competitive advantage for the Application Craft development environment and, ultimately, makes for happier app developers.

Watch this video to get a closer look at how Application Craft and PhoneGap work together:

AC Phonegap Short.mov [Sept 6, 2011]

Application Craft Phonegap Build Ripple Emulator Short

In the last couple of weeks, Application Craft has launched a major update with a comprehensive implementation of jQueryMobile and added a new feaure allowing UI designers to build responsive design type page using the IDE. You can read more about this news on their blog.

World’s best and true cross platform to develop mobile application [dineshkamath1982, Nov 14, 2011]

Application Craft (AC) is the best true cross platform for developing mobile apps. AC allows you to develop apps and generate native files for major platforms (symbian, apple – ios, android, webos, blackberry).

They have excellent support (response within minutes) and they also direct you to the necessary documentation for your requirement. They have very good example videos.

The cloud based IDE for developing the apps is excellent. They provide you also preview and live mode to see how would your application behave on your mobile (even before trying out on your mobile).

I decided to go to AC after going through http://en.wikipedia.org/wiki/Mobile_a…. Its mentioned as it is the true cross platform (this is mentioned only for AC). But now i really know why is it.

I am neither an employee or marketing guy of AC. I am just a normal user trying out AC for my personal interest. Please try it out and see if what i quoted make sense 🙂
Application Craft ROCKKKKKKKKKKKKKKKKKKK!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Roadmap [Nov 9, 2011]

To be Released (target release date 21st Nov)

ServerSide Javascript Support

This will enable an AC User to build scripts that run and execute server side. This will allow secure execution of rules etc. It will also tie in with the Data Storage Access and associated permissions so that only server side scripts can read from and write to connections and queries.

Other Plans not yet prioritised

Improved WYSIWYG editor features

The Editor currently does an imperfect job of pasting in HTML from the clipboard. It also does not allow perfect support for AC’s own Styles. This is being rectified along with other user-friendliness aspects of the editor.

CRUD for Regular Databases

CRUD (database Create Read Update and Delete) operations only work on other Apps currently. We have just completed support for CRUD operations on regular databases such as MySQL, Postgres, Oracle etc.

Offline Instance Storage for Mobile Apps

Currently, a Native App cannot store instances to an offline mobile device. We are adding extensive capabilities to allow offline data collection that can be uploaded later.

JQuerymobile Themeroller [Freddy May, Nov 7, 2011]

Just been looking at the new JQuerymobile Themeroller and it  is a beauty. My plan is to annoy the hell out of Tolstoy (that is by new nickname for Max Kraev [Head of Engineering] by the way) and get this shoehorned in by the end of the year.

http://jquerymobile.com/themeroller/

I think it will make a beautiful addition to the product and give great control over the way that Mobile interfaces are created.

I think that we may then look at the regular Themeroller in a later stage as I think that our theme implementation is in need of improvement.

Anyone who wants to contribute thoughts and ideas on this before we get started, please do so here.

My thoughts are that it will fit into the Themes section of the console and pressing ‘edit’ will bring up the Themeroller Editor. Obviously, it will tie in nicely with the system and not require any manual messing around with the resultant CSS.

Why we love the ACE Cloud 9 Editor (and how we’ve integrated it) [Nov 8, 2011]

There are some parts of the Application Craft system where we need to give credit to other people or products where it is due. One of these is the ACE Cloud 9 Editor from ajax.org.

Code Editing is often an integral part of building an App and so having a really superb code editor is essential. We have successfully incorporated the ACE Editor into our IDE and we are extremely pleased with the result.

Click here to see a video in our Learning Center. Look at the first video (from 1:15) or the second one.

Where we use it

The most important part of our system is the Application Craft IDE. This does 2 main things

  • build UI screens with the WYSIWYG, drag-and-drop UI Layout Editor
  • edit javascript code (currently client-side code and, very soon, also server-side)

Mobile Widgets (from the AC User Guide)

We have gone to a lot of effort to make developing for Mobile devices a really positive experience. There are three main components that we are working with which we have integrated very tightly into the product.

JQueryMobile

Application Craft has embedded JQueryMobileinto the Application Craft widget framework. We comment on this only because we would like to thank the JQuery team for their very high quality work. If you find that there are some things on the jquerymobile.com site that you would like to see included in Application Craft then please let us know.

Phonegap [currently pointing to PhoneGap 1.1.0 not the latest 1.2.0 released by Nitobi on Nov 7, 2011]

Phonegapis the magic that transforms the Web Apps that come out of Application Craft into Native Apps. This lets your Apps be deployed through App Stores and it lets them access device features and hardware such as GPS, Camera, Audio, Contacts and so on.

Ripple

Rippleis a superb emulator plugin for Google Chrome that lets you test out device features without needing to deploy to an actual device.

Thanks to all of the above for majorly improving both our own and our users’ lives (well the development part of their lives at least).

Big Update – Application Craft & jQueryMobile [Fredy May, Application Craft blog, Sept 23, 2011] [Release: 1.10.6, September 20, 2011 with PhoneGap and jQuery Mobile Beta 3 and heavily extended Mobile Widgets support]

We have just launched a major update. It contains a comprehensive implementation of jQueryMobile within Application Craft. We think that this combination of JQM and AC has to be the easiest and fastest way to build Web Apps for mobile and tablet devices (and they pretty good on the desktop, too). And thanks to our Phonegap:Build integration, Native Apps are also extremely easy.

In this post, I am covering

  • A bit about the jQueryMobile implementation
  • The range of jQueryMobile widgets we currently support
  • A typical JQM widget inside the Application Craft IDE
  • Requests for widgets and jQueryMobile related features we don’t yet support
  • The next major announcement – Responsive Design and Adaptive Layouts



jQueryMobile implementation

The latest jQueryMobile (Beta 3) is a leap forward in terms of stability, functionality and speed. There were quite a few architectural changes, too. We have added these into a special ‘mobile’ toolbox section in the AC IDE. We find the stability to be really excellent and any bugs we found we have patched up, but they were few and far between. All jQueryMobile components have a comprehensive range of properties rendered in the IDE’s property bar and there is full javascript event support. Appropriate widgets also support the AC Data Storage Framework.

JQM comes with 5 standard themes. These have been well designed by the JQM team but we will soon be adding the ability for designers to upload their own custom CSS themes. These Themes are actually very simple and easy to add and everything is done in CSS. We’ll announce it on this blog when it’s ready.

The Mobile widgets we currently support

The table below shows the mobile specific widgets we support (we have a load more desktop ones, most of which can also be used in mobile Apps).  Each of these widgets is highly configurable via the property bar in the IDE as well as from AC Scripting (Javascript).

  • Checkbox
  • Checkbox Group
  • Select Button Group
  • Single Line Text Input
  • Multi Line Text Input
  • Mobile Toolbar (dockable)
  • Buttons (multi-size)
  • Search Input Field
  • Slider
  • Flip Switch
  • Navbar (button bar)
  • Popup Dropdown (selection wheel)
  • Popup Multi Select List
  • List (for navigation and content)
  • Collapsible Container
  • Accordion

A typical JQM widget in AC

You either set properties or use javascript to control all the finer points of a widget’s behavior. Below are a few variations of the Mobile List widget

You can add Items to the list in two ways. You can use the Item dialog for navigation type stuff where you know your items in advance. Or, you can add data to the list programmatically.

1. You have an array of the following object, one element for each list entry

{ “value”:”1″, // Data value that gets stored in AC (if required)

“label”:”United Kingdom”, // appears as list content

“image”: imgUrl,   // image url if required

“divider”: “false”,  // true if divider should be shown

“count”: “25”,   // the number to show in the count bubble

“aside”: “Short Text”,  // appears on the right in smaller font

“action”: id    // page jump action id

}

2. And this is how you update your list widget with the list item array
app.setData(‘myMobileList’, lstItems);

Populating a Mobile List manually
Populating a Mobile List with Javascript

Over in the property bar, we can now start to make all sorts of adjustments relating to cosmetic and functional behavior. Here are the two more interesting proeprty sections for the Mobile List widget

Documentation

We have documented the new Mobile features. Your can find them here.

Requests for widgets and jQueryMobile related features we don’t yet support

If anyone is aware of a mobile feature that we aren’t supporting but should be, then please let us know. We are also interested in any cool widgets that are already mobile compliant or with a little work, could be.

Responsive Design / Adaptive Layouts

This is a really exciting topic and one which one of the next blog posts will go into in detail. Initiatives like “Mobile First” state that modern web designers and app builders should think about putting the mobile device at the top of the list when thinking about platform support.

Responsive Design allows you to build a single app design that looks and works great on Desktop, Tablet and Mobile devices.

Inaugural Blog Post as Application Craft and SmartSites enters Private Beta [Fredy May, Application Craft blog, June 23, 2011] [Beta 1.0, June 22, 2011, first full Private Beta Release, pre-launch announcement: “Full mobile support and lots of ‘Visual Basic in the Cloud’ features.”]

After some long, hard development and a little bit of pivoting from the original concept, Application Craft is now ready for prime time. We are extremely proud of the platform we have built and we think it does a totally unique job of delivering beautiful, rich mobile and desktop sites (SmartSites) all the way up to full-blown applications.

If you are a Web Designer or Marketer, SmartSites lets you build device independent sites incredibly quickly. If you are a Javascript developer(or about to become one) then Application Craft lets you build anything from great front-ends to forms apps, workflow apps or full-blown relational applications.

SmartSites

[The essence of the new value proposition, i.e. the evolution from the original one: “Democratizing the Building of Data-driven Apps … for Citizen Developers as well – i.e. application stakeholders who have historically been peripheral to, or shut out of, the development process” see the below September 27, 2010 announcement]

A SmartSite is really a Mobile Web Site built on the Application Craft platform. There are several things that make SmartSites very different from other sites.

  • It is properly platform independent
  • The layout options are really exceptional, supporting many mobile specific widgets
  • Device orientation changes are fully supported
  • You can deploy your SmartSite app as a Web Site OR as a Native App
  • Thanks to the full development capabilities of Application Craft, you can turn a simple, static site into a full blown App with some Javascript knowledge.

Example SmartSites

Rather than explain what they are, take a look at the SmartSites section of our website, where you will find some really good examples.
See some examples on the various tabs on the SmartSites page

Application Development

Javascript is the lingua franca of the web and everything about Application Craft is Javascript. It is written 100% in it(a lot of thanks to JQuery and JQueryMobile by the way), SmartSites and Apps are pure Javascript and you can add business logic to your Sites and Apps using it.

More about Application Craft AppOps

Private Beta

We are starting off with a Private Beta phase which I anticipate will last 3 to 4 weeks before it goes into Public Beta. We are delighted with the stability and the feature set of the product but we want to make sure that our provisioning systems and platform operations are functioning smoothly before we switch on the automated provisioning.

Support & Feedback

Our main goal in the next months is to work very, very closely with our users. We brought the product to where it now is by working with real users with real issues. We started working with these users in the early days after Robert Scoble did a pre-release video interview late last year. We are immensely grateful to their input and we now are ready to do the same with the next wave of users.

If you contact us for help or suggestions, you will hear back from us. We don’t just want your feedback and input, we need it. We are available on Skype, Twitter etc. You can find full support and contact information here (click on the Support button).

Version 1.0 Release

Application Craft has had a lot of very hard testing before Private Beta from ourselves as well as a handful of early adopters who have built substantial Apps and Sites using Application Craft. The first Commercial Offering is not yet certain but it will not be later than Fall 2011.

Pricing

We will be announcing proper pricing plans in July. There will be versions for all types of users. including a Free version for basic, single-user SmartSites usage all the way up to high end versions including special releases, features, unlimited users (SmartSite/App builders not consumers) and support options.

Future Blog Entries & Requests

Initially, I plan to write a series of blogs on the many usages of Application Craft and SmartSites. I will be showing real examples that focus in on a particular use of the product. If you would like to see me blog on a specific topic, please tweet either @appcrafty or me (Freddy May) personally @3bfred.

SmartPhones need SmartSites [Fredy May, Application Craft blog, June 24, 2011]

The main thrust of this article is to discuss a major problem (and a corresponding solution) with almost all web sites when they are visited by a SmartPhone. They appear so small as to be pretty well unreadable and clicking links is a lottery.

We all know that SmartPhone usage is growing rapidly, so many companies should prepare for lots more people to visit their web site using a SmartPhone. The proliferation of Gelocation Apps and Services (Google Search/Places/Maps, SimpleGeo, Factual etc.) cater explicity to the Mobile user and increase SmartPhone traffic even further.

If you take a look at the image on the left, it will probably be a familiar sight. Given the size of the opportunity, it is pretty amazing how poorly this situation has been addressed.

As you can see from the infographic excerpts above (full Infographic from Microsoft Tag available here), there is already a lot of mobile based internet usage and by 2014 it will exceed desktop usage. And already one half of all searches are performed on mobile devices. This all leads to a lot of people visiting web sites using their SmartPhones.
You should view SmartPhone web site visitors as exciting opportunities, because

  • they are probably nearby
  • they probably have a very specific and immediate interest in your product or place
  • they need information, a local service or a product

One big problem

The big problem is that almost every web site looks terrible in a SmartPhone browser. And site navigation is even worse due to tiny links colliding with fat fingers (my good friend Dobs would appreciate this). Get your phone out and visit some random sites.

There are some notable exceptions (Twitter, Facebook) but take a look at these well known names below. Click on these to see them at their original size or go to the website on your phone or scan the QR-Code if you’ve got an App.

FYI: The QR-codes shown here can be read with QR-Reader Apps (iPhone try ‘ConnectMe’, Android try ‘Google Goggles’)


Starbucks


Apple


DHL

… with a SmartSite solution

Take a look at the following example, which is a typical local business you might want to get information on. Click on the thumbnail or scan the QR-Code to see the website rendered on a phone, then read on.

Now, take a look at the SmartSite below, which is an Application Craft SmartSite. It is actually live, so you can interact with it. Be sure to check out the Location pages and both tabs on the Contact page.

  • imageThis SmartSite took about 1 hour to build
  • It includes a simple but cool ‘contact’ form
  • It required absolutely no programming skills
  • It is a really easy job for a Web Designer, Marketer or Product Manager
  • If you want to add really advanced App capabilities and you have some Javascript knowledge then our AppOps features are genuinely superb (more on this in another post)

also reachable at
ac.applicationcraft.com/kallkwik

SmartPhone Visitors will probably want different (and simpler) content

Clearly, this is a good thing, because they will usually want access to

  • only the most relevant information
  • information that relates to the fact they are on the move and probably nearby
  • complex and rich layout is not required due to the limited form factor

Location Specific Content

There is another set of very relevant uses of SmartSites that are described on our SmartSites page. Location Specific Content is where you build a SmrtSite that is tied to an object, place or business and targets the SmartPhone user who is actually standing at the location. For instance, information boards at Airport, Tourist Office, Hotel or Shopping Centre. Or providing information to in-store shoppers. Printing QR-Codes/tiny URLs onto products as a better way of accessing manuals and assembly guides. The list is pretty well endless. Go to the SmartSites page to take a look at the example uses.

What are the alternatives?

There are alternative, but very expensive and non-trivial, ways of achieving an effective mobile-ready site

  • Hand code it using developer tools such as Sencha or JQueryMobile. This requires proper web development skills and will take many times longer than using Application Craft
  • Design your main web site to reformat for SmartPhones but this is really not for the faint-hearted

What if I want to add App like capabilities to my SmartSite

Well, this is where you really are in luck. Application Craft was initially conceived as a cloud based App development platform. Alongside SmartSites, we have AppOps, which is a substantial set of developer oriented functionality that allows you to build pretty well any sort of business or data-centric App (so not great for games) that you are likely to need.

I plan to do another blog post on AppOps soon, but feel free to explore AppOps now.

Application Craft: Sam Schillace to Advise Application Craft [Oct 7, 2010]

Google Docs Creator to Advise Cloud-based Rapid App Development Platform Innovator

London, UK October 7, 2010 – Application Craft today announced that Sam Schillace, creator of Google Docs and co-founder of new venture Restartle, is joining Application Craft as an Advisor. Launched at Tech Crunch Disrupt 2010 and currently in Public Beta, Application Craft radically shortens development cycles for even complex data-driven desktop and mobile applications. Importantly, Application Craft’s drag and drop Data Graphs and built-in collaboration tools allow an unparalleled level of involvement by Citizen Developers in the application development process. By eliminating the user/developer gulf, Application Craft reduces strain on development teams, promotes on-time and on-budget projects and blurs the boundary between content and applications.

Schillace led the Google Docs team after Google acquired Upstartle, the company he co-founded to bring the collaborative word processor Writely to market. Before leaving Google in June 2010 to found Restartle, he led the Internet giant’s Gmail and Apps team as Senior Engineering Director.

“I have seen how fast the Application Craft team has built a really superb product over the last year,” said Mr. Schillace. “It is a genuine enabler for a new class of application developer and I think it will result in some major changes to the desktop and mobile application development landscape. I am excited to be involved with Application Craft during these early, formative days.”

“You would be hard pressed to find a software entrepreneur with as much SaaS and PaaS expertise as Sam Schillace,” said Freddy May, Application Craft Founder and CEO. “I have benefited greatly from Sam’s counsel over the past year and I am delighted that Application Craft will continue to do so now that he has joined as a formal company Advisor.”

About Application Craft

Launched at Tech Crunch Disrupt 2010 and currently in Public Beta, Application Craft’s rapid application development platform allows professional and ‘Citizen’ developers to quickly and collaboratively build amazing data-driven desktop and mobile apps. By eliminating the user/developer gulf, Application Craft reduces strain on development teams, promotes on-time and on-budget projects and blurs the boundary between content and applications. To learn more, please visit: http://www.applicationcraft.com

Application Craft Invites Citizen and Pro Developers to Get Crafty Rapid Development [TechCrunch Disrupt, London, UK and San Francisco, CA (PRWEB) September 27, 2010]

Platform Democratizes the Building of Data-driven Apps

Application Craft today opened the public beta for their rapid development platform that allows both professional and ‘Citizen’ developers to quickly and collaboratively build amazing data-driven desktop and mobile apps. Citizen Developers are application stakeholders who have historically been peripheral to, or shut out of, the development process, such as web designers, analysts, knowledge workers and IT staff. Getting Crafty means unprecedented ease of collaboration between hard core coders and Citizen Developers.

“Throughout my IT career, I have witnessed countless development projects fail due to lack of alignment between users and developers and overloaded development teams. Application Craft aims to eliminate the user/developer gulf by fostering active collaboration, which reduces strain on dev teams and promotes on-time and on-budget projects,” said Freddy May, Application Craft Founder and CEO.

You’re Getting Crafty When…

  • Your apps can instantly pull data from virtually any source
  • You can rapid prototype in minutes and build a production app in hours
  • Web designers become Web developers in a day
  • Agile is easy!
  • Apps run everywhere out of the box
  • Usability takes center stage
  • Your projects are consistently on time and on budget

Watch this video to see it in action: http://tinyurl.com/GetCrafty

_C_ollaborative app development that welcomes pros and amateurs
_R_ich apps, extreme mash ups
_A_gile
_F_lexible deployment
_T_otal customization
_Y_our projects on time every time

About Application Craft
Application Craft is the quickest way to build apps. The company opened the Public Beta for their revolutionary Rapid Application Development Platform for Professional and ‘Citizen’ developers at TechCrunch Disrupt, where the company is also exhibiting on Tuesday, September 28. Application Craft is seeking Public Beta participants. To learn more and apply for the Beta, go to: http://tinyurl.com/GetCrafty

About TechCrunch Disrupt
TechCrunch Disrupt San Francisco (http://disrupt.techcrunch.com), is being held Sept 27-29 2010, at the San Francisco Design Center Concourse. TechCrunch Disrupt attracts over 1,500 leading technology innovators and investors and over 150 new startups. The format combines top thought-leader discussions with new product and company launches. Morning executive discussions debate the most timely disruptions in media, advertising and technology. Afternoons host the Startup Battlefield where 25 new companies will launch for the first time on stage, selected to present from more than 500 applications received from around the world. Another 100 early-stage startups will exhibit in Startup Alley. TechCrunch will award a $50,000 grand prize along with other award recognitions at the conclusion of the conference.

Corporate developers: exclusive first look at Application Craft, a new tool for corporate web apps [Robert Scoble, Sept 26, 2010]

http://www.applicationcraft.com/ has what they say is the quickest way to build apps. This is generally aimed at corporate developers, and looks like a modern Visual Studio — everything is in the web browser. Here I spend a bit of time with founder Freddy May who gives me a good look at what it does and why it’s an important new entrant into the web programming field.

In the 1990s we had Visual Basic, Delphi, and then Visual Studio come along. All great tools for corporate developers who needed to build apps for their workgroups.

But since then developer tools have stagnated. Yeah, we’ve had Ruby on Rails, but that’s really aimed at web developers (Twitter was originally built in it, for instance) and the kinds of database and UI tools that corporate developers needed weren’t there.

Today Application Craft (CrunchBase info on Application Craft) is releasing a new system that looks somewhat like Visual Studio, but is completely web based. Here CEO Freddy May spends a lot of time with me showing how it works and giving me some idea of the power underneath.

Oh, and you can build a LOT without knowing any code. May says it’s not just aimed at developers, but can be used by “citizen developers.” IE, those who don’t know how to code very well. That is exactly the audience that Visual Basic was aimed at back in 1992, and it went on to be the tool for corporate developers. Will Application Craft take over that mantle? We’ll see, but this is a very interesting start. What do you think?

Microsoft and jQuery Mobile, PhoneGap

UpdatesPhoneGap, Cordova, and what’s in a name? [March 19, 2012]
– PhoneGap for Windows Phone Dissected [Dec 19, 2011]
– Tombstoning with PhoneGap for Windows Phone 7 (and KnockoutJS) [Oct 24, 2011]

A few weeks back I wrote a blog post about how the recent announcement of PhoneGap support for Windows Phone 7 (WP7) which makes it possible to develop HTML5-based applications. In my previous blog post I showed the development of a simple HTML5 / JavaScript application which PhoneGap wraps up within a Silverlight application ‘shell’ allowing it to be deployed to your phone and potentially submitted to the Marketplace.

However, in order to pass the various Marketplace requirements and gain certification, your application must correctly handle the application lifecycle. With the recent Mango release, the lifecycle has become a little more complicated (although better! in that it adds multi-tasking / fast-app switching). I have also covered the lifecycle in a previous blog post and demonstrated how you can handle the various lifecycle events within an MVVM application.

The most tricky part of the application lifecycle that as a developer you need to handle is the tombstoned state, where your application is terminated (i.e. stopped and removed from memory). It is your responsibility to save enough state in order that when your tombstoned application is restarted, it looks to the user as if your application never stopped running, i.e. you restore your application UI to its original state.

My Take on jQuery Mobile [Oct 25, 2011]

When I first saw the demo of jQuery mobile I was super impressed. Every buttons and gesture feels like a native app. Elements such as the header and footer gives it a strong sense of iOS feel. One couldn’t tell the difference if they didn’t see the address bar. However, after coding HTML 5 mobile apps for assignment 2 and final assignment, the flaws of jQuery mobile starts to surface.
1. Bad documentation
2. Page transition
3. Persistent footer
4. Platforms
HTML 5 mobile app is the future but not now.

jQuery Mobile 1.0RC2 Released! [Oct 19, 2011]

… We plan on this being the last RC before moving to the final 1.0 release within the next few weeks. This plan may change if we run into any major issues that will require broader testing and another RC. …

Platform support in 1.0 RC2

We’re excited to announce that as of 1.0 RC2, we’ve covered all our target platforms for the project. At this stage, we have broad support for the vast majority of all modern desktop, smartphone, tablet, and e-reader platforms. In addition, feature phones and older browsers are supported because of our progressive enhancement approach. We’re very proud of our commitment to universal accessibility through our broad support for all popular platforms.

Our graded support matrix was created over a year ago based on our goals as a project and since that time, we’ve been refining our grading system based on real-world device testing and the quickly evolving mobile landscape. To provide a quick summary of our browser support in Beta 1, we’ve created a simple A (full), B (full minus Ajax), C (basic) grade system with notes of the actual devices and versions we’ve been testing on in our lab.

The visual fidelity of the experience is highly dependent on CSS rendering capabilities of the device and platform so not all A grade experience will be pixel-perfect but that’s the nature of the web.

End of Updates

Satya Nadella, Jason Zander, Scott Guthrie, and Steve Ballmer: BUILD Keynote – Day 2 [Sept 14, 2011]

Scott Guthrie:

… when you create a new MVC 4 project, you’ll notice that there’s actually now a mobile application project template that you can use, so that if you want to build a standalone app specifically for mobile devices, it’s really easy to get started and do that.

What we’re also doing though is making it possible so that you can start with a project like I have here, which is built for desktop browsers, and easily mobile-extend it. So, I’m going to actually take advantage of that technique.

So, to that I’m just going to import a NuGet package called jQuery.Mobile.MVC. This is going to import a couple files into my project here, and let’s take a look at those.

So, the first one that it imported is a couple new JavaScript files, which is jQuery.mobile. And so we’ve been huge fans of the jQuery project for several years now, and really excited to announce this week that we’re going to be shipping jQuery Mobile as part of ASP.NET and Visual Studio going forward. (Applause.)

Even better though is some of the server support that we’re adding to ASP.NET to allow you to easily take advantage of that.

And so one of the things that we’ve done here if you look inside our project again is you’ll notice that there’s a new file that’s also been added by that NuGet package called layout.mobile. And what we’re doing is we’re — in the model view controller world, you can have clean separation between your controllers, your models, and your views. With MVC 4 we’re making it possible so that you can easily override any of the views inside your project to have device-specific optimizations within it.

So, for example, this layout.mobilewill basically override when a phone hits the site, and actually has a layout that’s kind of optimized for a smaller screen real estate. And the cool thing is you can do that on any individual view, partial, or layout.

So, if I wanted to, I could, for example, override the index.CSS HTML to have a mobile-specific view, but I don’t need to do that. So, I can choose which files I want to. In this case I’m just going to use the standard HTML app here, but I am going to go ahead and annotate it with a few jQuery Mobile annotations. So, I’m going to basically say I want this thing to be a list view style rendering, I want to enable filtering on it, and I want to inset it slightly so it looks a little better on a really small screen real estate.

And then I’m going to rerun this application. On my desktop browser it’s going to look exactly the same because I’m using the standard desktop layout, and those annotations are just going to be ignored, and they’re perfectly valid HTML5 annotations.

But if we switch gears here and hit it with a phone, and so I’m going to show here an iPhone emulator. We’re going to hit that exact same app, and one of the things you’ll notice now is we’re taking advantage of that new mobile layout, and we’re taking advantage of those data annotations to have a much smoother look and feel across that experience that’s optimized for a small form factor.

I could go ahead and do filtering. This is all client side. So, I can filter to see just the JAs or the SCs. Again you’ll notice full logon registration capabilities built into the template, and again I can click on say the about link and go back and forward within my site. And with only a few lines of code it’s super easy for me now to mobile optimize my site, and have it work across any phone, whether it’s a Windows Phone, an iPhone, Android, or any other type of device. (Applause.)

BUILD Day #2 in Review According to MVPs [Sept 15, 2011]

… Windows Phone team is creating CSS skins for jQuery Mobile that look WinPhone native. #bldwin …

ASP.NET MVC 4 Release Notes [Sept 14, 2011]

New Features in ASP.NET MVC 4 Developer Preview

This section describes features that have been introduced in the ASP.NET MVC 4 Developer Preview release.

Enhancements to Default Project Templates

The template that is used to create new ASP.NET MVC 4 projects has been updated to create a more modern-looking website:

In addition to cosmetic improvements, there’s improved functionality in the new template. The template employs a technique called adaptive renderingto look good in both desktop browsers and mobile browsers without any customization.

To see adaptive rendering in action, you can use a mobile emulator or just try resizing the desktop browser window to be smaller. When the browser window gets small enough, the layout of the page will change.

Another enhancement to the default project template is the use of JavaScript to provide a richer UI. The Login and Register links that are used in the template are examples of how to use the jQuery UI Dialog to present a rich login screen:

Mobile Project Template

If you’re starting a new project and want to create a site specifically for mobile and tablet browsers, you can use the new Mobile Application project template. This is based on jQuery Mobile, an open-source library for building touch-optimized UI:

This template contains the same application structure as the Internet Application template (and the controller code is virtually identical), but it’s styled using jQuery Mobile to look good and behave well on touch-based mobile devices. To learn more about how to structure and style mobile UI, see the jQuery Mobile project website.

If you already have a desktop-oriented site that you want to add mobile-optimized views to, or if you want to create a single site that serves differently styled views to desktop and mobile browsers, you can use the new Display Modes feature. (See the next section.)

Display Modes

The new Display Modes feature lets an application select views depending on the browser that’s making the request. For example, if a desktop browser requests the Home page, the application might use the Views\Home\Index.cshtml template. If a mobile browser requests the Home page, the application might return the Views\Home\Index.mobile.cshtml template.

Layouts and partials can also be overridden for particular browser types. For example:

  • If your Views\Shared folder contains both the _Layout.cshtml and _Layout.mobile.cshtml templates, by default the application will use _Layout.mobile.cshtml during requests from mobile browsers and _Layout.cshtml during other requests.
  • If a folder contains both _MyPartial.cshtml and _MyPartial.mobile.cshtml, the instruction @Html.Partial(“_MyPartial”) will render _MyPartial.mobile.cshtml during requests from mobile browsers, and _MyPartial.cshtml during other requests.If you want to create more specific views, layouts, or partial views for other devices, you can register a new DefaultDisplayMode instance to specify which name to search for when a request satisfies particular conditions. For example, you could add the following code to the Application_Startmethod in the Global.asax file to register the string “iPhone” as a display mode that applies when the Apple iPhone browser makes a request:
    DisplayModes.Modes.Insert(0, new DefaultDisplayMode("iPhone"){    ContextCondition = (context => context.Request.UserAgent.IndexOf        ("iPhone", StringComparison.OrdinalIgnoreCase) >= 0) });

    After this code runs, when an Apple iPhone browser makes a request, your application will use the Views\Shared\_Layout.iPhone.cshtml layout (if it exists).

    jQuery Mobile, the View Switcher, and Browser Overriding

    jQuery Mobile is an open source library for building touch-optimized web UI. If you want to use jQuery Mobile with an ASP.NET MVC 4 application, you can download and install a NuGet package that helps you get started. To install it from the Visual Studio Package Manager Console, type the following command:

    Install-Package jQuery.Mobile.MVC

    This installs jQuery Mobile and some helper files, including the following:

     

  • Views/Shared/_Layout.Mobile.cshtml, which is a jQuery Mobile-based layout.
  • A view-switcher component, which consists of the Views/Shared/_ViewSwitcher.cshtml partial view and the ViewSwitcherController.cs controller.After you install the package, run your application using a mobile browser (or equivalent, like the Firefox User Agent Switcher add-on). You’ll see that your pages look quite different, because jQuery Mobile handles layout and styling. To take advantage of this, you can do the following:
  • Create mobile-specific view overrides as described under Display Modesearlier (for example, create Views\Home\Index.mobile.cshtml to override Views\Home\Index.cshtml for mobile browsers).
  • Read the jQuery Mobile documentationto learn more about how to add touch-optimized UI elements in mobile views.A convention for mobile-optimized web pages is to add a link whose text is something like Desktop view or Full site mode that lets users switch to a desktop version of the page. The jQuery.Mobile.MVC package includes a sample view-switcher component for this purpose. It’s used in the default Views\Shared\_Layout.Mobile.cshtml view, and it looks like this when the page is rendered:If visitors click the link, they’re switched to the desktop version of the same page.Because your desktop layout will not include a view switcher by default, visitors won’t have a way to get to mobile mode. To enable this, add the following reference to _ViewSwitcher to your desktop layout, just inside the <body>element:
    <body>    @Html.Partial("_ViewSwitcher")    ...

    The view switcher uses a new feature called Browser Overriding. This feature lets your application treat requests as if they were coming from a different browser (user agent) than the one they’re actually from. The following table lists the methods that Browser Overriding provides.

    HttpContext.SetOverriddenBrowser(userAgentString)

    Overrides the request’s actual user agent value using the specified user agent.

    HttpContext.GetOverriddenUserAgent()

    Returns the request’s user agent override value, or the actual user agent string if no override has been specified.

    HttpContext.GetOverriddenBrowser()

    Returns an HttpBrowserCapabilitiesBase instance that corresponds to the user agent currently set for the request (actual or overridden). You can use this value to get properties such as IsMobileDevice.

    HttpContext.ClearOverriddenBrowser()

    Removes any overridden user agent for the current request.

    Browser Overriding is a core feature of ASP.NET MVC 4 and is available even if you don’t install the jQuery.Mobile.MVC package. However, it affects only view, layout, and partial-view selection — it does not affect any other ASP.NET feature that depends on the Request.Browser object.

    By default, the user-agent override is stored using a cookie. If you want to store the override elsewhere (for example, in a database), you can replace the default provider (BrowserOverrideStores.Current). Documentation for this provider will be available to accompany a later release of ASP.NET MVC.

    Azure SDK

    ASP.NET MVC 4 Developer Preview supports the September 2011 1.5 release of the Windows Azure SDK.

Progressively enable the mobile web with ASP.NET MVC 4, HTML5, and jQuery Mobile [BUILD2011 session TOOL-803T, video record on Channel 9, by Phil Haack, Sept 15, 2011]

There are over a billion mobile devices with rich Web capabilities, yet many Websites look terrible on such devices, or worse, fail to work at all. As mobile devices become the primary way that most people access the Web, having a site that fails to deliver a rich experience on the Web using HTML5, JavaScript and jQuery Mobile is missing out on a huge opportunity. In this session, learn how ASP.NET MVC 4 leverages these next generation technologies enabling developers to build a single solution that targets multiple platforms and form factors such as mobile, tablet and desktop devices.

51Degrees.mobi and MVC4 [Sept 23, 2011]

The annual Build conference announced and showcased many exciting innovations from Microsoft, but what interests us the most is the latest version of MVC.

Many of the changes to MVC4 are trying to make it more mobile friendly. As can be seen from Phil Haack’s presentation at Build, MVC now has jQuery Mobile in the box and allows multiple views for each controller depending on the device the server detected; and as Phil said at his talk, “Device detection is not trivial…[51Degrees]… adds a ton of device info to the browser files”.

So exactly how would you integrate 51Degrees with MVC4? The Nuget repository along with the manner in which Views can be configured makes the whole process a breeze. This guide describes how to install 51Degrees from Nuget and then how to setup a view for a mobile device.

ASP.NET MVC 4 Mobile Features [Tutorial with the same content as the Phil Haack’s session above, Sept 14, 2011]

… For this tutorial, you’ll add mobile features to the simple conference-listing application that’s provided in the starter project.  …

Skills You’ll Learn

Here’s what you’ll learn:

  • How the ASP.NET MVC 4 templates use the HTML5 viewport attribute and adaptive renderingto improve display on mobile devices.
  • How to create mobile-specific views.
  • How to create a view switcher that lets users toggle between a mobile view and a desktop view of the application.

CSS Media Queries

CSS media queries are an extension to CSS for media types. They allow you to create rules that override the default CSS rules for specific browsers (user agents). A common rule for CSS that targets mobile browsers is defining the maximum screen size. …

The Viewport Meta Tag

Most mobile browsers define a virtual browser window width (the viewport) that’s much larger than the actual width of the mobile device. This allows mobile browsers to fit the entire web page inside the virtual display. Users can then zoom in on interesting content. However, if you set the viewport width to the actual device width, no zooming is required, because the content fits in the mobile browser.

The viewport <meta> tag in the ASP.NET MVC 4 layout file sets the viewport to the device width. …

Examining the Effect of CSS Media Queries and the Viewport Meta Tag

The viewport <meta> tag and the CSS media query are not specific to ASP.NET MVC 4, and you can take advantage of these features in any web application. But they are now built into the files that are generated when you create a new ASP.NET MVC 4 project.

For more information about the viewport <meta> tag, see A tale of two viewports — part two.

In the next section you’ll see how to provide mobile-browser specific views.

Overriding Views, Layouts, and Partial Views

A significant new feature in ASP.NET MVC 4 is a simple mechanism that lets you override any view (including layouts and partial views) for mobile browsers in general, for an individual mobile browser, or for any specific browser. To provide a mobile-specific view, you can copy a view file and add .Mobile to the file name. For example, to create a mobile Index view, copy Views\Home\Index.cshtml to Views\Home\Index.Mobile.cshtml.

In this section, you’ll create a mobile-specific layout file.

Browser-Specific Views

In addition to mobile-specific and desktop-specific views, you can create views for an individual browser. For example, you can create views that are specifically for the iPhone browser. In this section, you’ll create a layout for the iPhone browser and an iPhone version of the AllTags view.

In this section we’ve seen how to create mobile layouts and views and how to create layouts and views for specific devices such as the iPhone. In the next section you’ll see how to leverage jQuery Mobile for more compelling mobile views.

Using jQuery Mobile

The jQuery Mobile library provides a user interface framework that works on all the major mobile browsers. jQuery Mobile applies progressive enhancement to mobile browsers that support CSS and JavaScript. Progressive enhancement allows all browsers to display the basic content of a web page, while allowing more powerful browsers and devices to have a richer display. The JavaScript and CSS files that are included with jQuery Mobile style many elements to fit mobile browsers without making any markup changes.

In this section you’ll install the jQuery.Mobile.MVC NuGet package, which installs jQuery Mobile and a view-switcher widget.

Improving the Speakers List

Creating a Mobile Speakers View

Improving the Tags List

Improving the Dates List

Improving the SessionsTable View

Improving the SessionByCode View

Wrapup and Review

This tutorial has introduced the new mobile features of ASP.NET MVC 4 Developer Preview. The mobile features include:

  • The ability to override layout, views, and partial views, both globally and for an individual view.
  • Control over layout and partial override enforcement using the RequireConsistentDisplayModeproperty.
  • A view-switcher widget for mobile views than can also be displayed in desktop views.
  • Support for supporting specific browsers, such as the iPhone browser.

See Also

Other information:

Anatomy of a Page [jQuery Mobile site]

Building Cross-Platform Apps Using jQuery Mobile [MSDN ScriptJunkie article by Nick Riggs, April 20, 2011]

ASP.NET MVC 4 Article Series by Nandip Makwana:

  • Getting Started With ASP.NET MVC 4(Sep 15th)
  • First look at ASP.NET MVC 4 Templates(Sep 16th)
  • ASP.NET MVC 4 Mobile Project Template(Sep 18th)
  • Display Mode in ASP.NET MVC 4 (Sep 21st)
  • Under the Hood of Display Mode in MVC 4 (Sep 27th)

    PhoneGap

    Announcing PhoneGap for Windows Phone Mango [Jesse MacFadyen, Senior SE, Nitobi, Sept 8, 2011]

    Over the last month and a bit, Nitobi has been working closely with Microsoft to bring PhoneGap to WP7 devices. I am happy to say that it’s now here, and ready for beta exposure.

    Our starting point was the excellent work of Matt Lacey, who created the initial project and did the initial exploration of device functionality. The upcoming Windows Phone Mango update to devices brings a rich set of HTML5 features and IE9 to the device.

    Thanks to Microsoft sponsorship, Sergei Grebnov has been making contributions to the code and has implemented the MediaCapture and Camera APIs. This is Sergei’s first foray into PhoneGap, but he has proven to be a valuable asset to the project and was up to speed quickly.

    Nitobi has dedicated two developers to the project, myself and Herm Wong. We’ve been busy dusting off our Sliverlight+C# skills and implementing the other APIs. ( the infamous Shazron has also jumped in just this week )

    What You’ll Need to Get Started

    Where Are We ? What APIs Are Done?

    Here’s an overview of where we’re at:

    • Accelerometer
    • Camera
    • Compass (unit testing is waiting on us having a device that supports compass)
    • Contacts
    • Events (partial, still underway)
    • GeoLocation
    • MediaCapture
    • Connection
    • Notification

    These have all been implemented per the spec, and function as expected with some quirks being added to the documentation as you read this.

    The ‘deviceready’ event is fired on startup, and like other device platforms, is the signal that you can begin making PhoneGap API calls.

    The GeoLocation API did not require any work, as IE9 implements the spec as defined by W3C.

    Still to come :

    • File
    • Storage

    How Does it Work? A peek under the hood.

    Gotchas + Known Issues

    Reporting issues, tracking progress and keeping up to date.

    Will PhoneGap for WP7 support plugins?

    This was a key focus, as keeping the architecture plug-able is a primary concern, and in my view, where the real power lies.

    PhoneGap-WP7 maintains the plugability of other platforms via a command pattern, to allow developers to add functionality with minimal fuss, simply define your C# class in the WP7GapClassLib.PhoneGap.Commands namespace and derive your class from BaseCommand.

    PhoneGap exec works in exactly the same way as other platforms :

    PhoneGap.exec(callbackSuccessFunction,callbackErrorFunction, PLUGINNAME, PLUGINMETHODNAME, paramObj);

    What is Left to Do? How can You Contribute?

    Sergei has begun working on the File API, so you can expect full file access to create, modify, delete files as well as upload/download to/from a server.

    I am busily trying to wrap up some of the life-cycle events (Events API) so your application can be notified when the app is pushed to the background. I will be looking into exposing mouse events to JavaScript shortly after that.

    roadmap-planning [Brian LeRoux, Senior Architect, Nitobi, Sept 30, 2011]

    Sept 30 – 1.1.0

    • plugins (discussion on Planning: Plugin Packaging)
    • security: child browser investigation / oauth support
      • Android (Simon)
    • performance: first benchmark(s) / resource profiling hooks / capacity tests (maybe identify flagship devices!)
    • cmd line scripts for: build, debug, emulate, release, create, log, test
    • bundle phonegap/wp7 in the download ( FileAPI, MouseEvents, Storage, Template + BuildScripts )

    More information:

The accelerated Adobe strategy for HTML5 et al

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 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.

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’s Heidi Voltmer shares the news about the first Adobe Edge preview and Mark Anders shows off a demo of Adobe Edge.

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.

  • ActionsThe 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]

This screencast is a preview of the new jQuery Mobile ThemeRoller tool, shown during Todd Parker and Scott Jehl’s (of http://filamentgroup.com) keynote session at jQuery Conference 2011. This is being developed by Tyler Benziger at Adobe and makes it incredibly easy to create jQuery Mobile themes in just minutes, without having to edit a single line of CSS.

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

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.

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. … [headercontentfooter] …

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.

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).

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

IE

Firefox

Chrome

Safari

Opera

iOS Safari

Opera Mini

Opera Mobile

Android Browser

10 versions back

4.0: Not supported

9 versions back

5.0: Not supported

8 versions back

6.0: Not supported

7 versions back

2.0: Not supported

7.0: Not supported

9.0: Not supported

6 versions back

3.0: Not supported

8.0: Not supported

9.5-9.6: Not supported

5 versions back

3.5: Not supported

9.0: Not supported

10.0-10.1: Not supported

4 versions back

5.5: Not supported

3.6: Not supported

10.0: Not supported

3.1: Not supported

10.5: Not supported

3 versions back

6.0: Not supported

4.0: Not supported

11.0: Not supported

3.2: Not supported

10.6: Not supported

3.2: Not supported

2 versions back

7.0: Not supported

5.0: Not supported

12.0: Not supported

4.0: Not supported

11.0: Not supported

4.0-4.1: Not supported

10.0: Not supported

2.1: Not supported

Previous version

8.0: Not supported

6.0: Not supported

13.0: Not supported

5.0: Not supported

11.1: Not supported

4.2-4.3: Not supported

11.0: Not supported

2.2: Not supported

Current

9.0: Not supported

7.0: Not supported

14.0: Not supported

5.1: Not supported

11.5: Not supported

5.0: Not supported

5.0-6.0: Not supported

11.1: Not supported

2.3: Not supported

3.0: Not supported

Near future

9.0: Not supported

8.0: Support unknown

15.0: Partial support -webkit-

5.1: Not supported

12.0: Support unknown

Farther future

10.0: Partial support -ms-

9.0: Support unknown

16.0: Partial support -webkit-

6.0: Partial support -webkit-

12.1: Support unknown

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;

Design a site like this with WordPress.com
Get started