Connect With WRD
feed via e-mail
feed via e-mail

Archive for the ‘Mobile Development’ Category

Moobile is an exciting and fresh project; a mobile web application framework built on MooTools.

Currently, it is focused on providing a iOS-like experience on WebKit browsers and comes with many controls like bar, button, image, list, activity indicator, slider and more.

Moobile - MooTools Mobile

It also has support for transitions like fade, slide, cubic or cover and can display native-like alerts.

Interfaces created with Moobile are fluid, they will work well both in iPhone + iPad and look good when orientation changes.

The download package includes a boilerplate for quickly starting projects, related PSD files and a simulator.

Hammer.js is a JavaScript library for adding touch gestures support to any website so that users can interact with them easier on touch devices.

It requires jQuery, only 2kb sized and supports tap, double tap, hold, drag and transform.

Hammer.js

The library is implemented pretty easily:

  • just bind Hammer.js to a container HTML element
  • every touch event performed on that element returns a callback with an array of details including:
    • event
    • position
    • touches
    • scale
    • rotation

For drag gestures, it can also return extra info like the angle, direction and distance.

Hammer.js works -almost- on all modern browsers and, to sum up, "you can touch this" : ).

ViniSketch Designer is a free application -for Mac OSX- for designing and creating mobile applications using native and web technologies.

It comes with feature-rich visual editors for designing the GUI + dataflow and code editors for keeping the development under control.

The engine of the app has support for multiple platforms and you can managing your mobile app for each device you're targeting.

Vinisketch Designer

ViniSketch Designer is currently compatible for building iOS + Android apps, however, compatibility for other popular platforms are under development.

It can auto-generate Phonegap projects and there is a built-in HTML5 simulator + debug tools based on WebKit WebInspector.

jQuery Rewritten, Ground-Up, for Mobile HTML5 on iOS and Android devices.

This is how jQ.Mobi defines itself and gives a good insight on what it is.

It is a fresh and open source JavaScript framework -developed by appMobi- that focuses on providing a great experience on both of the dominant mobile operating systems with a tiny footprint and code efficiency.

jQ.Mobi

Compared to jQuery Mobile (24kb), it is much smaller in size with only 3.5kb (both minified and gzipped) and covers most features with the same syntax.

When it comes to speed, jQ.Mobi is impressive there as well and mentioned to be 3x faster on Android and 2.2x faster on iOS.

The framework also has a UI library (again smaller in size) and includes plugins for mobile interactions and interfaces

Building mobile web apps already became pretty easy with user-friendly and high quality frameworks

Mobjectify is a free web application which makes it so much simpler by offering an awesome web-based mockup builder.

The application enables us to create pages and add various web elements (like forms, buttons, content areas, footers, etc.) with few clicks.

Mobjectify

It also offers multiple themes to choose from or you can create new themes. There is a live preview and results can be exported as a single HTML file anytime.

Mobjectify powers the mobile web pages with jQuery Mobile + its theme engine and only leaves the custom coding to you.

Swipe JS is a lightweight (3.7kb minified) mobile slider with 1:1 touch movement (sliding content based on exact touch position).

It can display any HTML content and offers a native-like experience with features like:

  • resistant bounds (increased resistance to slide when there are no items to display next or before)
  • smart resizing on rotation as the slider resets to make sure the sliding elements are sized right
  • the size of each slide is set with the width of the container which is useful for passing different widths on responsive designs
  • detecting if you’re trying to scroll down the page or slide the content left to right

Swipe JS

Swipe is a standalone slider which doesn't rely on any JavaScript library and has few configuration options like:

  • the slide to be displayed on initial load
  • speed of transitions
  • auto slideshow to be on/off
  • and callback fired after successfully displaying a slide

Also, it has API methods for custom interactions including the display of prev-next items and getting the current position.

Spine Mobile is a JavaScript framework, built on top of SpineJS, for building mobile web apps that look and feel native.

The framework comes with specialized controllers, panel layout, hardware accelerated transitions and touch events.

Apps are developed with HTML5-CSS3 and the easiest way of building Spine Mobile apps is with Hem, Spine.app, GFX and jQuery. Also, you'll need Node.js.

It is well documented and there are open sourced examples to easily get started.

Spine Mobile

There are several awesome and feature-rich frameworks out there for building mobile web apps which can handle almost any scenario.

For complicated apps, they are usually the best option to go with. However, if you are building a simpler app that requires the most standard UI features, Zoey can be for you.

Zoey

It is a HTML5-CSS3-powered framework for creating mobile apps, built on top of Zepto.js and weights only 6kb (gzipped).

Zoey has the UI components like navigation, lists, buttons, control groups, forms and grids.

The framework is compatible with iOS + Android and comes with an app skeleton that covers all the features.

iUI is a mobile web framework that has been around for a long time (since 2007) compared to many other mobile resources.

It was mentioned in a previous WRD article (iPhone Application And Website Development: All Tools And Tutorials You Need) and evolved much since then.

The framework includes a JavaScript library, CSS and images for developing touch-enabled web apps.

iUI Mobile Framework

User interfaces to be created are iPhone-like yet compatible with most smartphones and tablets and has support for menus, forms, lists, image galleries and more.

Also, there are built-in extensions for caching, getting system information, HTML5 videos or theme switching.

iUI is well-documented and has tutorials to get you started easily.

appMobi, a popular platform for creating HTML5-powered mobile apps and websites has recently open sourced several useful resources for mobile developers.

JavaScript Bridge API

In order to access the device APIs of iOS and Android, creating native apps is not a must. The JavaScript Bridge API brings this functionality to mobile web apps.

The API has support for accessing the camera, notifications, player, display, geolocation and more.

appMobi - Open Source Mobile Resources

aUX.js

This is a mobile web framework for quickly creating touch-enabled interfaces that run equally good on iOS and Android.

It has on-device caching, offers block-based architecture rather than page based (only necessary block are updated during browsing), supports fixed headers/footers and includes several workarounds for known bugs on mobile web development.

Others

appMobi has also open sourced mobiUs, a mobile browser that offers a native-like experience when browsing web apps.

It enables web apps to access all of the hardware features of a smartphone, has a good game performance with DirectCanvas technology, comes with built-in caching and much more.

And, there is Direct Canvas/Box2D/Sound which helps running web apps (mostly games that require calculations) much faster, play multiple audio files at the same time (HTML5 normally supports 1 at a time), etc.

Uptime Robot
feed-holder
FeedBurner
PSD2HTML.com