Building a mobile app in the cloud with jQuery Mobile [Video]

Posted: October 11th, 2011 | Author: | Filed under: Tutorials, Video | Tags: , , , , , , , | Comments Off

This video shows how to build a mobile app with Appery.io Mobile Apps Builder.


Signing Up for the Appery.io Mobile Apps Builder Beta Is Easy

Posted: July 7th, 2011 | Author: | Filed under: Mobile Apps Builder | Tags: | Comments Off

(Cross-posted from the Exadel blog)

Today, we’ll be having a briefing for our beta users of Appery.io Mobile Apps Builder. Becoming a beta user and par­tic­i­pating in our com­mu­nity brief­ings is a great way to in­flu­ence and guide the de­vel­op­ment of a useful product and make it even more useful.

It’s easy to be­come a beta user. Here are three ways:

  1. If you don’t al­ready have a Appery.io ac­count, you can sign up right from the home page using the button in this block:
  2. When you sign up for any Appery.io Prototypes Builder plan and click on the ac­ti­va­tion link, you’ll be pre­sented this first time with a pop-​​up giving you an op­por­tu­nity to join the beta:
  3. If you al­ready have an ex­isting Appery.io ac­count, you can be­come a beta user by going to My Account and clicking on the sign-​​up button:

You’ll have a “pending” status at first, but you should only have to wait a few hours be­fore you be­come activated.


Creating input fields with HTML5 placeholder feature

Posted: July 1st, 2011 | Author: | Filed under: Features, Mobile Apps Builder, Prototypes Builder | Tags: , , | 1 Comment »

(Cross-posted on Maxa Blog)

HTML5 introduces a handy new feature for input elements. Using placeholder attribute, you can place a slightly greyed out label inside an input field. When you click on the field and enter text, the label clears. If you delete the input, the placeholder labels appears again. Here is an example (assuming you are using HTML5 complaint browser):

HTML5 code looks like this:

You can do the same thing in Appery.io Prototype Builder or Mobile Apps Builder. Now, it involves a little trick but we will make it much simpler in the near future. Let’s say we start with a screen like this (editor view):

  1. Click the screen outside the phone area, switch to Events view
  2. Click Add Event and select Load
  3. Click the + sign to add an action and select Set HTML Attribute
  4. Component name: find the first input component. Its name should be set to something like ‘mobileinputtextX’ (unless you renamted it)
  5. Property name: placeholder
  6. Value: enter any text you want to see in inside the input
  7. Click OK
  8. Repeat the same for the second input component.
  9. Click Web Preview to view the app in Web browser
  10. To view on your phone, select Web Preview > Configure and select Anybody can view this project on the Web. The open the URL shown on your phone.

Try out this app via QR code below:

Yes, it’s too many steps to add such functionality. It’s really just a workaround for now. We will make it possible to set any attributes from Properties view, without needing to add event and action.

Here is how it looks in a Web browser:


Appery.io interactive HTML prototypes upgrades to use jQuery Mobile version 1.0 Alpha 3.

Posted: March 15th, 2011 | Author: | Filed under: Articles, mobile | Tags: , | Comments Off

The state of Mobile Web development today is probably what was traditional Web back in 1996. Many companies is racing to create mobile presence, be it in the form of a native applications or mobile Web applications. To set the native vs Web debate a side for now, there is a tool to help you prototype and test your mobile Web applications. You can even use the resulting HTML as a starting point for the application. The prototyping tool is Appery.io. With Appery.io, you can create, share and preview interactive Web and mobile HTML prototypes in a browser. Read more.


Create interactive HTML prototypes for the iPad

Posted: March 7th, 2011 | Author: | Filed under: mobile, Tiggr | Tags: | Comments Off

Creating Web and mobile interactive HTML prototypes in Appery.io is simple. But what about the iPad (and other tablets)? Well, turns out it’s pretty simple as well. All you need to do is change the prototype screen size to iPad’s (1024×768):

To start your prototype for iPad, don’t forget to switch Screen Type to Mobile.


It’s time to replace your mockup tool with rapid prototyping

Posted: December 28th, 2010 | Author: | Filed under: Features, mobile | Tags: , | Comments Off

Can you mockup tool do this? [via Maxa blog]


New mobile control in Appery.io prototypes: collapsible block

Posted: December 27th, 2010 | Author: | Filed under: mobile | Tags: , | Comments Off

Last week we pushed Appery.io version 1.2.4. Besides bug fixing, we added a new mobile control: Collapsible Block. You can place any other controls inside and the block is collapsible in design as well as in Web Preview. See how it actually looks in a browser (try to expand/collapse the block).


Two new jQuery Mobile based components in Appery.io prototypes

Posted: December 16th, 2010 | Author: | Filed under: mobile | Tags: | Comments Off

With Appery.io 1.2.3 release this week, we have added two new mobile components based on jQuery Mobile. The two components are Navigation Bar and Search Bar. They are the last two components in this screen shot:

To switch between Web and Mobile prototypes, click anywhere in the whiteboard and in Properties view select the screen type:


Appery.io 1.2.1 release: mobile prototypes and controls based on jQuery Mobile

Posted: November 29th, 2010 | Author: | Filed under: Features | Tags: , | 1 Comment »

We just released Appery.io version 1.2.1 and the biggest new feature is mobile palette which lets you build mobile prototypes and of course preview them. Mobile controls are based on jQuery Mobile. Other new features are reorder screens with drag and drop, preserve ratio for uploaded images, round corners for components and component duplicate option.

To see the entire list of features, just go to http://appery.io. For any questions, suggestions and feedback, go to Appery.io forum. Let’s review all the new features in this release.

Mobile palette and prototypes

With mobile palette based on jQuery Mobile controls, you can now create prototypes for iPhone, Android, BlackBerry or any other mobile device and preview them in any browser (of course we recommend a mobile browser). To activate the mobile palette, switch Screen Type to Mobile in screen properties and get jQuery Mobile based controls:

Use the grid control to help you with layout and don’t forget that you can always preview the mobile prototype by selecting Web Preview/Open:

Read the rest of this entry »


Preview prototypes anywere, even on iPad, iPhone

Posted: November 23rd, 2010 | Author: | Filed under: Features | Tags: , , | Comments Off

Appery.io whiteboard was created using Flash. Why did we use Flash and not HTML? Well, today Flash is still the more powerful and flexible solution for this particular job. We knew that today we would have to do a lot more work to create the same functionality in HTML5. But, it’s something we are considering for the future. So, if you try to access Appery.io from iPad, well, you know what’s going to happen (Thanks, Steve). But, not everything is lost! One of the unique and rather powerful features in Appery.io is Web Preview. Web Preview generates standard HTML/JS/CSS and allows you to preview the prototype in any browser, any mobile device and yes, even on iPad and iPhone. This makes it possible to send prototype Web Preview to anyone and ask for their feedback. Isn’t’ this cool? Your boss or customer sitting in a coffee shop, airport, or anywhere else with their laptop, mobile phone or iPad can now review the prototype with just one click! Appery.io Web Preview is interactive, you can click on various controls to open them up such as calendars and navigate between pages.

And one more thing, we are coming with a specialised mobile palette based on jQuery Mobile components. You will soon be able to build prototypes for mobile devices!

  1. First, select Web Preview/Share and choose who can view the prototype:
  2. Then, select Web Preview/Open
  3. A new page will open (click the link below to see it in action). Go ahead and open this link on Android, iPad or iPhone. Try it!