Category: Tiggr

Twitter search mobile app built entirely in the cloud with new Tiggr Mobile Apps Builder

This is a screen shot of a Twitter search mobile app built entirely in the cloud with http://gotiggr.com. It was built with a new Tiggr Mobile Apps Builder. It’s not yet publicly available but tomorrow (June 15) we are launching a private beta.

The UI is built with jQuery Mobile components. A data source is then added. You specify service URL, then map input parameters and output parameters. Input parameters are mapped from input components on the screen. Output parameters are mapped to output components on the page. That’s it, you don’t write any code.

Screen shot of the editor (with data source):

Screen shot of editor and properties for data source:

Slides: Mobile Development Choices: Native App vs. Web Apps from JAX conference

Slides from Mobile Development Choices: Native App vs. Web Apps session at JAX conference in Mainz, May 2-6, 2011.

Mobile Development Choices: Native Apps vs. Web Apps
View more presentations from Max Katz

Most content taken from Mobile apps choices: Native Apps vs. Web Apps blog post.

Mobile apps choices: Native Apps vs Web Apps

This post shows various differences, in various categories between building native mobile apps and web mobile apps. I know that everyone has their own experiences and opinions, which I would love to hear. So, don’t hesitate to hit the comments at the end of this post.

Native App Web App
Platforms
Platform Five different mobile platforms:

  • iOS
  • Android
  • BlackBerry
  • webOS
  • Windows Phone
Other notes:

  • Android also experiences a rather big fragmentation in terms of Android versions to various screen size and features from different phone manufacturers and tablets.
  • There are also Symbian and MeeGo, however, they are getting very little traction today.
Mobile web browser. Differences still exist as different versions of mobile platforms run different browsers, with different support for various latest HTML5 features.
App discovery, monetization, support
App discovery App Store – proven and popular. A number of options:

  • Same as desktop apps today, search, URL, etc.
  • Sold through web stores like Chrome app store.
  • Sold through standard app stores (Apple, Android, BlackBerry, etc) by placing the web apps inside a native wrapper. Usually called a hybrid app.
App approval App is published to an app store and goes through review process before being approved Instant, no approval process
App installation Downloaded from app market and installed Open URL in a mobile browser, or another popular option is to create a short cut on the phone. The short cut gives more of a “native app” feel.
App update Updated app goes through review process, then downloaded and installed No approval or download process. Just update the mobile web app and everyone gets the new version.
App support, maintenance, adding new features The more platforms you support, the more challenging and difficult it becomes supporting and adding new features.

It’s not uncommon to have different native apps for iOS and Android with different feature sets. The app for iOS is usually more mature and stable.
 Supporting and adding new features is much simpler, as you write once and it’s available on every platform. Write once, deploy anywhere.
Monetization App Store – proven monetization strategy. Web apps have a number of options:

  • Each app has its own monetization strategy
  • HTML App Store, like Google Chrome Web Store
  • Standard App Store – putting apps inside a native wrapper/shell (hybrid apps)
  • Selling access or token in standard App Store and then getting access to mobile app
Porting/add new platform Need to learn another mobile platform
Need to learn platform’s “UI approach”		 Nothing – build once, run anywhere (almost). Might need to tweak the UI a little bit to “fit” it better in to the underlying mobile platform. Difference in browsers and supported features.
Experience
Performance Faster for some UI functions, especially when heavy graphics are involved. HTML5 improves on the infrastructure of the Web and makes applications faster and more functional. JavaScript rendering engines are getting faster and are good enough for most Web applications.
User experience Native application have a lot of UI effects, usually more developed UI “logic”. Native apps can “feel faster” and screen sizes on mobile devices makes native apps more enticing as well. Can be “very good”. For example, an app like Gmail. Will continue to improve and get better.
Perception Today most people associate mobile apps with something you download and install. We are so used to desktop web apps, so it’s just a matter of time before we “get used” to mobile web apps. It’s also important for more and more (good) web apps to become available.
Phone features
Video/Audio Built-in Possible with HTML5
Offline or disconnected apps Native apps can work in disconnected mode. Offline mode can be achieved with HTML5.
Full screen mode Built-in. Can be in full mode by hiding browser address bar.
Accelerometer Built-in. Possible with HTML5.
Push Possible with native platforms. Possible with HTML5 technologies.
Integration with phone services Good integration with phone services:

  • Contacts
  • Calendar
  • Other applications
 Still somewhat limited with HTML5. But, more and more apps like that get data from the Internet, and not the client device.
Integration with phone hardware Integration with phone hardware

  • Camera/Video
  • GPS
 Some support via HTML5 is now available for camera/video.
Enterprise, development
Developer Skills Need to learn one or more of the mobile platforms and their underlying programming language/SDK:

  • iOS (Objective C)
  • Android (Java)
  • BlackBerry (Java)
  • webOS (HTML/JavaScript)
  • Windows Phone (Silverlight)
Every platform will also have its own approach and style to developing and designing mobile user interfaces.
Developers can use HTML, JavaScript and CSS to create mobile web apps without of learning new languages to code native applications. But, that doesn’t mean that some training won’t be necessary to adapt exiting HTML/JavaScript/CSS skills to mobile development.
Development cost Expensive, as still relatively small number of developers master these skills. Can be significantly cheaper. Large number of developers who posses web development skills – HTML, JavaScript, CSS. But, some training might be needed to learn how to develop UI for mobile apps.
Mobile development frameworks Every mobile platform has its own SDK. Even though Android and BlackBerry both use Java, applications are not compatible. BlackBerry plans to allow running Android applications on BlackBerry devices in the future, probably inside a special wrapper (virtual machine).

  • iOS (Objective C)
  • Android (Java)
  • BlackBerry (Java)
  • webOS (HTML/JavaScript)
  • Windows Phone (Silverlight)
 A number of options available today for building web mobile apps:

  • Take “do it yourself approach” or adapt any existing framework to work on mobile web
  • jQuery Mobile
  • Sencha
Tools that can build both native and mobile web apps:
Tiggr Mobile (coming up), PhoneGap, Open plug, Adobe Flex Mobile, Titanium Appcelerator, Corona SDK
Enterprise integration Existing infrastructure could be reused but also need service layer to communicate between client (mobile) and server. Can use REST, SOAP or custom communication protocols Hessian, Protocol Buffers. Existing infrastructure can be reused.

Virtually any application we used to have on a desktop from email to drawing to CRM, is now available as a web application. I think a similar move will happen in mobile, as more and more natives apps are moved to become mobile web apps.

Try this interactive HTML prototype created in Tiggr

Check out this interactive prototype. It was complety created in Tiggr using the new events/actions feature.

Every time a new wonder is selected, a different image is shown. On click event, the image src attribute is updated with a new image. When you click Find Out where?, a pop-up opens showing the location of the wonder. Every time a new wonder is selected, a custom location JavaScript variable is set. Inside the pop-up, component which display the location is bound to this variable. Pretty cool, huh?

Create your first interactive prototype in Tiggr.

Tiggr HTML prototypes adds powerful new features: events/actions, page templates, custom components, and annotations.

(Originally posted on http://blog.gotiggr.com)
Tiggr 2.0 packs powerful new features: expanded events/actions, templates, custom components and annotations. Try the new Tiggr today

Events and actions

We have greatly expanded actions and events feature and now in addition to navigating between pages, you can set events such as click, value change and associate actions with those events such as setting a value, opening a pop-up window and much more. We are taking HTML prototypes to, well, real HTML prototypes. The following actions are supported (and more are coming soon):

  • Set HTML attribute
  • Set Property
  • Navigate to Page
  • Navigate to Link
  • Open as Popup
  • Close Popup

To start using the expanded events/actions features, just switch to the new Events tab.


Continue reading →

HTML events/actions, screen templates, and annotations – coming up in Tiggr interactive prototypes

We are working hard on getting the next major release of Tiggr out and have planned a number of major and user requested features: actions and events, templates and annotations (notes). Here is a quick preview of what’s coming up!

Expanded actions and events

Today you can navigate between pages but wouldn’t it be cool if it was possible to define other actions and events. Well, that’s coming up. We are expending actions and events feature and soon you will be able to set events such as onclick, onchange and others and associate actions with those events such as setting a value, opening a pop-up window and much more. We are taking HTML prototypes to, well, real HTML prototypes.

Screen templates

Who doesn’t need or like templates? As the prototype becomes bigger, making changes that repeat on every page becomes more difficult and time consuming. That’s why we are introducing templates. You will be able to save any screen as a template and then use the template to create new pages based on it. How do you like this time-saving feature!

Annotations (notes)

Need to comment on particular component or design? Need to leave a note for other users with whom you shared the prototype? You will be able to do it very soon. We are adding annotations feature where you can add notes to the prototype (these notes will not be visible in Web Preview of course).

But, don’t wait, try Tiggr today!

Tiggr UI prototypes updates to version 1.2.6 with new features and enhancements

Tiggr, web-based UI prototyping tool for creating, sharing and previewing interactive HTML prototypes updated to version 1.2.6. It’s free, try it today! This new version brings a number of new features and enhancements:

Mobile preview

Mobile preview now shows the prototype within the actual screen size you defined in properties:

More sharing options

If you shared a project before, the user you shared with had full access to the project, he or she could edit, delete, preview and invite others to share. Starting with this release, you can control what permissions each user has. And, you can invite multiple users at once, just separate emails with a comma or semicolon:

Navigate added to menu component

It was possible to navigate between pages using a link, button or an image but somehow we missed the menu. Well, it’s now possible to navigate via menu as well. Drag and drop a menu into a page and head to properties to set navigation:

Other new features:

  • New spacer control (web and mobile palette), new link control (mobile palette)
  • Tabs on a tab layout container can now be positioned top, bottom, left and right
  • Edit mode after insert
  • Easily edit grid and table rows/columns
  • New property for setting tab index
  • Radio button groups
  • Delete account option

To read about these features, visit the official Tiggr blog: Tiggr 1.2.6 brings new features and enhancements.