MobiGeni - iPhone Development - iPad Development
Mobile Application Development
  • Home
  • Portfolio
  • Services
    • iPhone Software Development
    • iPad Software Development
    • Web Development
    • User Interface Design
  • About
    • About Us
    • Team
  • Blog
    • News
    • iPad
    • iPhone
    • Goodies
    • Code
    • Technology
    • Design
  • Contact
Select Page ...

Category : Code

20 Mobile Frameworks to Build Apps for iOS, Android, BlackBerry and more.

No Comments By: admin Published: August 23, 2011
Posted in: Code, iPad, iPhone, Technology Tags: Ansca Corona SDK, DynamicX, iUI, jQTouch, jQuery Mobile, MoSync, MotherApp, Nimblekit, RhoMobile, Sencha, Unity, WebApp.net, WinToolkit, xUI, Zepto.js

In the mobile industry, it has quite a few of frameworks available aiming to create a mobile web app rapidly. To help you start up your mobile development, I have done some research on all mobile frameworks, and below is the list. I have used jQTouch before, it’s pretty easy to implement but definitely has a lot of room of improvement.

  1. Zepto.js
    Zepto.js is a minimalist JavaScript framework for mobile WebKit browsers, with a jQuery-compatible syntax. The goal: a 2-5k library that handles most basic drudge work with a nice API so you can concentrate on getting stuff done. Zepto.js is currently in early beta, and you can help to make it awesome by contributing code, documentation and demos.
  2. Appcelerator
    Use Appcelerator Titanium to build mobile apps for iPhone & Android and desktop apps for Windows, Mac OS X & Linux from Web technologies
  3. DynamicX
    DHTMLX Touch is an HTML5-based JavaScript library for building mobile web applications. It’s not just a set of UI widgets, but a complete framework that allows you to create eye-catching, cross-platform web applications for mobile and touch-screen devices.
  4. Sencha
    Sencha Touch, the first HTML5 mobile JavaScript framework that allows you to develop mobile web apps that look and feel native on iPhone and Android touchscreen devices, has just hit the big 1.0. And best of all, it’s completely free to use.
  5. jQuery Mobile
    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.
  6. jQTouch
    A jQuery plugin for mobile web development on the iPhone, iPod Touch, and other forward-thinking devices.
  7. Wink ToolKit
    Wink toolkit is a mobile JavaScript framework for building webapps on iPhone, iPad and Android
  8. iUI
    iUI is a framework consisting of a JavaScript library, CSS, and images for developing advanced mobile webapps for iPhone and comparable/compatible devices.
  9. xUI
    A super micro tiny dom library for authoring html5 mobile web applications.
  10. iWebkit
    WebKit is a file package designed to help you create your own iPhone, iPod Touch and iPad compatible website or webapp.
  11. iWebAPP.net
    WebApp.Net is a light weight, powerful javascript framework taking advantage of AJAX technology. It provides a full set of ready to use components to help you develop, quickly and easily, advanced mobile web applications.
  12. NimbleKit
    NimbleKit is the fastest way to create applications for iOS. You don’t need to know Objective-C or the iOS SDK. All you need is to know how to write an HTML page with Javascript code.
  13. MotherApp
    The Quick, easy way to publish on iPad and Android.
  14. RhoMobile
    Rhodes is the cross platform smart phone framework for mobile application development, which allows developers to write smart phone native apps. It follows the MVC pattern. They have also started hosting the code on cloud called RhoHub . Apps built using Rhodes framework :: Sugar CRM, Pivotal tracker’s Track R, Wikipedia.
  15. Ansca Mobile’s Corona SDK
    Ansca Mobile’s Corona SDK is a simple-to-use mobile app development platform for iOS and Android.
  16. TapLynx
    A powerful iPhone framework.Rapidly develop iPhone, iPad, and iPod Touch Apps without learning Cocoa.
  17. MoSync SDK
    MoSync makes it easy, fun and cost efficient to develop mobile application for all the major platforms. Using C++ and a set of powerful APIs, you can harness the full power of modern smartphone platforms while still supporting Java ME devices using a single codebase.
  18. SproutCore
    SproutCore is an open-source framework for building blazingly fast, innovative user experiences on the web.
  19. DraginFire SDK
    iPhone + iPad Development in Windows without a Mac or Objective – C. Bring your App idea to life in standard C/C++ and never leave your Windows platform.
  20. Unity Mobile
    Build and deliver the best. Whether you are making a mobile website or publishing a mobile application, UNITY’s integrated platform is simple enough for any user, regardless of technical skill.

How to make Scalable & Resolution Independent UI elements for Mobile Devices with CSS3

No Comments By: admin Published: June 24, 2011
Posted in: Code Tags: Resolution Independent UI, Scalable, UI elements

In computing terms, resolution independence UI is a technique to make elements on a computer or mobile screen can be drawn at sizes independent from the pixel grid. For Mobile devices this is done with CSS3 and Media Queries so that those with larger mobile screens and more compact screens can still view the UI at the same size.

.button {
    display: inline-block;
    color: #fff;

    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#C1FA3B), color-stop(0.02, #8FCA05), to(#5A7F03));
    -webkit-border-radius: .2em;
    -webkit-box-shadow: #7EB105 0 0 .03em 0.03em inset, rgba(0, 0, 0, 0.4) 0px 0.1em .2em;
    text-shadow: rgba(0,0,0,.2) 0 .05em .02em;
    border: .08em solid #374D02;
    padding: .2em .6em;
}

As you can see, we’ve added rounded corners, an inner glow (using inset with -webkit-box-shadow), a drop shadow, text shadow, and padding to our element — all using em as our sizing unit. The only sizing which is not accomplished with ems is the background-gradient, which must be defined in percentage-based color-stops. As these color-stops are still relative to the size of the button itself, these values are inherently relative as well. To show off some different sizes for our button, we can easily just add a few classes like:

.size_2x {
    font-size: 200%;
}
.size_8x {
    font-size: 800%;
}

The HTML for our demo then looks like this:

1×
2×
8×

Making Web apps with HTML5 and LocalStorage – Part 1

No Comments By: admin Published: September 8, 2010
Posted in: Code Tags: html5, localStorage, localStorage.getItem, localStorage.setItem, Storage, Webapps

HTML5 LocalStorage

localStorage sets fields on the domain. Even when you close the browser, reopen it, and go back to the site, it remembers all fields in localStorage.

HTML5 Local Storage is based on named key/value pairs. You store data based on a named key, then you can retrieve that data with the same key. The named key is a string. The data can be any type supported by JavaScript, including strings, Booleans, integers, or floats.

var foo = localStorage.getItem("bar");
// ...
localStorage.setItem("bar", foo);

…could be rewritten to use square bracket syntax instead:

var foo = localStorage["bar"];
// ...
localStorage["bar"] = foo;

Define iPad interface orientation splash screens

4 Comments By: admin Published: May 3, 2010
Posted in: Code, iPad Tags: deafult.png, interface, iPad, landscape, orientation, portrait, splash

Did you know your iPad™ Application must be capable of launching in any interface orientation?

The days of 1 Default.png are over!

The following options are available for your iPad™ Application:

  • Default-PortraitUpsideDown.png (takes precedence over Default-Portrait.png if included)
  • Default-LandscapeLeft.png (takes precedence over Default-Landscape.png if included)
  • Default-LandscapeRight.png (takes precedence over Default-Landscape.png if included)
  • Default-Portrait.png (required – Specifies the generic portrait version of the launch image.)
  • Default-Landscape.png (required – Specifies the generic landscape version of the launch image. )
  • Default.png (not recommended for iPad™ Application usage – allows you to keep using Default.png for the iPhone™ version of your app!)

iPhone Mockup, Wireframe and Prototyping tools for iPhone Developers

6 Comments By: admin Published: February 10, 2010
Posted in: Code, Design, Goodies Tags: Development, Download, iPhone PSD, Mockup, Prototyping, Tools, Wireframe

Notepod

Notepod is a notepad shaped like an iPhone. Each notepod is 100 pages of 60 x 110mm double sided paper. The front has 52mm x 77mm blank space (the iPhone screen), the back is a 6mm grid.

Project Page


iPhone UI Stencil Kit

The iPhone ui stencil kit is a stainless steel, laser cut stencil kit for drawing quick mock-ups and wireframes for iPhone apps. It also comes with a Zebra mechanical pencil.

Project Page


iPhone Sketch Pad

The iPhone Sketchpad works precisely with the iPhone Stencil Kit, with one phone silhouette on the front side and three on the back.

Project Page


App Sketchbook

The App Sketchbook has 50 Double-sided, perforated pages each with 3 actual sized iPhone templates. Each page also has has 20px ruler markings and a ruled section for notes.

Project Page


Vector Images

MetaSpark’s Fireworks Vectors

A collection of vector iPhone UI elements for Fireworks CS3 and CS4.

Project Page


320480 Stencil PSD file

Most iPhone screen elements, sensible layer sets all contained within one PSD file.

Project Page


Graffletopia Stencil Kit for Omnigraffle

Graffletopia’s stencil kit for Omnigraffle. It is for quick sketching of iPhone ideas. Use the outline for printouts so you can hand sketch as well. The symbols are meant as a check list for included features in your app development.

Project Page


MockApp

MockApp is a set of iPhone ui templates and library files put together for use in Powerpoint or Keynote.

Project Page


Firefox Plug-ins

iPhone Prototype

This is a plug-in to browser Mozilla FireFox for prototyping interface of iPhone applications for creating an iPhone mock-up. Currently Alpha – not compatible with FF 3.55.

Project Page


Firefox Pencil

Pencil is a free and opensource tool for making diagrams and GUI prototyping. Pencil runs on the Mozilla Gecko engine, turning the Firefox browser into a sketching tool with just a 400-kilobyte installation package.

Project Page


Fireworks Plug-ins

Unitid

This plug-in combines Fireworks with some jQuery and PHP to give you a prototype you can not only view, but interact with, directly on your iPhone, just as if it’s a live app.

Project Page


iPhone Apps

LiveView

Liveview is an iPhone app that consists of two parts: the ScreenCaster and the Application itself.  ScreenCaster launches a simple iPhone skin on your Mac. From the same network, launch the LiveView app in your iPhone. Whatever the ScreenCaster is highlighting is now seen in the LiveView App. It also interprets touches as mouse clicks, turning it into a two way interactive prototype.

Project Page


Web Based Tools

Mockingbird

Mockingbird is a web based mockup/wireframe tool built using the Cappucino framework, so there’s no flash to wrestle with. While you can’t actually design your mockups from an iPhone (who’d want to?), the tool does have some very handy features. You can drag elements onto the screen, create multiple pages, link to other pages and share directly from the web.

Project Page


Pidoco

Pidoco is a web-based tool that lets you create clickable wireframes via drag & drop ui and then collaborate with remote users on each project. The tool also includes iPhone stencils.

Project Page


iPhone Mockup

iPhone mockup is a web based tool that is currently in Alpha release only. You can design your mockup as a hand sketch or illustration, and mockups can contain user-uploaded images and user-entered text. Your mockups will be accessible via url so they are unsecured.

The developer makes this perfectly clear and warns that he could discontinue hosting mockups at anytime, thereby deleting any work. That makes this a handy tool for quick and dirty mockups you want to print or share with someone on the fly, but not for much more.

Project Page


Protoshare

Protoshare is a collaborative, web-based prototyping tool that helps teams visualize requirements for interactive projects and work together in real-time. It has an iPhone component that can be seen here.

Project Page


iPlotz

With iPlotz you can create clickable, navigable wireframes to create the experience of a real website or software application. You can also invite others to comment on the designs, and once ready, you can then manage the tasks for developers and designers to build the project.

Project Page


Installed Software

CogTool

CogTool is a general purpose UI prototyping tool simply using a storyboard of your design idea with sketches, images or on a canvas. Demonstrate tasks on that storyboard, then press a button to produce a valid cognitive model predicting how long it will take a skilled user to complete those tasks.

Project Page


Balsamiq

Balsamiq mockups is desktop software that is designed to help teams or clients collaborate on wireframes and mockups. There are iPhone specific controls included.

Project Page


OmniGraffle

OmniGraffle is award winning diagraming mockup or graphic design software. Combined with Graffletopia’s iPhone stencil kit, this software is a great addition to any app developers toolbox.

Project Page


Justinmind Prototyper

Justinmind prototyper allows you to create fully functional wireframes for mobile applications and generate your HTML high-fidelity wireframes.

Project Page


iRise

iRise for iPhones gives developers a way to quickly prototype the look, feel and behavior of Apple iPhone applications through pre-defined visualization widgets and templates that can be quickly assembled into a high definition mobile applications.

Project Page

  • Categories

    • Blog
    • Code
    • Design
    • Goodies
    • iPad
    • iPhone
    • News
    • Technology
    • Connect & Share

      Follow Us on FacebookFollow Us on GoogleFollow Us on LinkedInFollow Us on Twitter

    • Recent Tweets

      Follow @mobigeni

    • Front-end Developer.com
    • ScriptGeni Web Development
    • CSS Playground
    Copyright © 2012 MobiGeni.com. All Rights Reserved