10 Free Android Apps for Web Developers

Read more

Mobile TouchSlider jQuery Plugin

Today, we have another guest post by mobilizetoday.com for a great new jQuery plugin called TouchSlider.

About TouchSlider

Working on mobile web projects we realized there is one thing which is in demand in almost all of them. It’s TouchSlider – the jQuery plugin, for mobile. The conditions on making the plugin were the following. Mobile phones have smaller screens and in order to use available space effectively we need something to scroll content whether it’s images or text. It should be based on jQuery. Scrollable area should understand touch events that makes it useful on touch-screen mobile phones like iPhone, Android and so on. To speed up the performance it should be based on CSS transitions rather than native JavaScript. It should work fast on older phones like iPhone 2 or HTC Magic. The plugin should have options to be flexible and useful for different needs. It should also have API to add callback functions. Taking into consideration the above we’ve created the plugin called TouchSlider. Its firsts release was used in the commercial project in July 2011. In August 2011 it was published on GitHub.

TouchSlider Demo

Demos

Features

* Automatic (3D CSS transition is used if detected)
* JavaScript (jQuery methods will be used for animation)
* No Animation (slider will work with no animation, useful for browsers with poor support of JavaScript like BlackBerry OS 5)

Using callback functions you may build custom designed controls like previous/next slide, go particular slide by index, display current slide index and much more.

About the Author

MobilizeToday.com is a mobile optimization service that may easily turn your existing website to its mobile representation.

Read more

10 Free iPhone / iPad Apps for Designers

IPhones and iPads appear to be more consumer-driven devices. But what’s interesting is there are apps on there that can assist in your web development and make your design life much easier. The following list will feature 10 FREE iPhone and iPad apps for web Designers. Have fun!

Is a better RSS feed reader – an easy way to browse relevant design and development information and articles.

Source

is Craigslist for iPad – ’nuff said. For when you need to find clients or work, people to outsource to, and anything else related to your web development and design work.

Source

Is an alternative to Skype. Text chat with people via Skype and other instant messenger accounts and get free calls if you’re both using Fring.

Source

Is for those who prefer a different interface for using Twitter to stay connected with clients and collaborators – choice is good.

Source

Is a task manager that lets you sync tasks across all of your devices as well as manage your tasks via a web browser.

Source

Is a note-taking app that lets you create projects and add notes, to do lists, drawings, and whatever else.

Source

Is a doodling app which can let you quickly sketch out design ideas and anything else with your fingers. Colors included.

Source

Useful for designing for mobile apps or web apps for use on mobile devices.

Source

Is in case you want an alternative to Dropbox. Sync and access files from your other devices and computers.

Source

Lets you sync and share files across computers and your iPhone and iPad.

Source

Read more

10 Free Mobile Application Development Icon Sets

The gap between the desktop/laptop and the mobile device is becoming smaller and smaller. In this post, we are sharing 10 FREE mobile application development icon sets. For the most part the icons below are targeted mainly for the iPhone or Andriod, and some Symbian icon sets. Enjoy!

Includes Phone Call, Photos, Messages, Calculator, Wireless, Calendar, Settings, Contacts, Notes and Map all with the sizes: 128, 64, 48 and 32px.

Source

In this icon set there are 30 free vector icons with an apple touch and feel about them and perfect for mobile app development. The download contains the .psd source file.

Source

These icons have been developed specifically for iPhone developers, completely free for anyone to use commercially.

Source

These vector based icons have been created to help in the design, development, implementation and promotion of multi-touch interfaces.

Source

The design and style of these icons have been based on some of the icons that are contained within the Android SDK. In total there are 24 .png Glyphs with the option of the following sizes: 16×16, 24×24, 32×32 and 48×48 pixels.

Source

This icon set contains icons designed for use in the Menu, Lists, Tabs (selected and unselected) or Dialogs, with the correct sizing sorted into appropriately labeled folders.

Source

This set of 64 icons for the iPhone toolbar that contain beautiful shaded portions to give added depth and to highlight the icon features.

Source

The Glyphish icon set have designed and carefully optimized specifically for use on toolbars and tab bars in iPhone apps, but would also be perfect for Android Development.

Source

This Android developer icon set includes 30 .png menu icons plus the additional source files (.eps) for further customization.

Source

The icons are available in 32×32 px .png (transparent background) format. This icon pack comes with 108 gray icons, but you can easily customize the color.

Source

Read more

10 New Frameworks for Mobile Web App Developers

One certain limitation in Web development is time and how long it takes to get things up and running. Thankfully, frameworks and libraries can help us focus on creating rather than figuring stuff out. Here, we’ve collected 10 frameworks and libraries that will help you save up your time and energy to create the actual website or application and make your web development more effective.

Is an HTML5 JavaScript framework for mobile and touch devices. This HTML5-based JavaScript library lets you build cross-platform web applications for mobile and touch-screen devices.

Source

Is a game framework that combines lots of different HTML5 technologies and allows you to build games for mobile and touch-screen devices, but can also be used within modern browsers as applications.

Source

Is an open-source HTML5-based language designed to speed up your building of mobile web applications. It has fantastic (Eclipse) IDE support (such as as-you-type error reporting, code completion and reference resolving) and has a rapid save and test cycle – No more lengthy compilations, the mobl IDE compiles your modules whenever you save, ready to be tested in the mobile browser.

Source

Is a port of 960 Grid to jQuery mobile. It combines the flexibility of 960.gs with the ease of jQuery mobile, with the purpose of making jQuery mobile more flexible and easier to use on mobile and touch-screen devices.

Source

Is a minimalist JavaScript framework for mobile WebKit browsers, with a jQuery-compatible chaining syntax. It will handle the most basic drudge and repetitive work so you can focus on getting the real stuff done.

Source

Is a flexible and modular CSS framework that is designed to assist in the rapid prototyping and development of websites. It has been designed for the future with larger screen sizes and the use of CSS3 for progressive enhancement and richer user experiences.

Source

A mixture of JavaScript, CSS3, SVG, and HTML5, is a complete kit of over 30 UI Widgets. It is an extension to jQuery UI with every widget built to its standards and framework. Each widget is ThemeRoller-ready.

Source

Is a JavaScript framework that simplifies the use of objects and classes in JavaScript. It’s built on top of MooTools and comes with an elegant syntax as well as built-in support for object-oriented features.

Source

Is a JavaScript library designed to help in the creation of HTML5 and Canvas applications. You can create a canvas tag, resize and style it, add renderable objects, animate those objects, and place it anywhere on the page in a single chained expression.

Source

Is an HTML5 application framework which lets you simply create desktop-level applications for modern web browsers. SproutCore applications are full-fledged programs, written in JavaScript.

Source

Read more

5 jQuery Mobile Swipe

Let’s face it we all like to swipe our mobile phones now and again! So, today we’ve gathered 5 jQuery Mobile Swipe plugins/tutorials for you to checkout. Enjoy!

This plugin uses Mobile Safari’s built in touch events to allow jQuery binding of swipe events to any DOM element. You can override the swipeLeft and swipeRight defaults functions to create your own custom process when the gesture is detected.

Source

Is an enhanced version of TouchWipe. It makes it a breeze to capture wipe gestures (left, top, bottom, right and diagonals) and is fully customizable.

Source

Is a lightweight plugin, which allows to instantly create an image gallery by writing just few lines of HTML such as an unordered list of images. The swipeGallery is optimized for mobile websites and supports swipe gestures.
Source

Add swipe (or rightSwipe) and leftSwipe events to jQuery.

Source

A simple plugin to enable multi-touch swipe events in Mobile Safari, based off of jSwipe by Ryan Scherf.

Source

Read more

5 jQuery Mobile Gallery Plugins

Almost everything electronic these days comes in handy on your mobile phone! Today we look at some jQuery Mobile Galleries to display those lovely pictures you have on your mobile phone!

In this tutorial we are going to develop a simple mobile image gallery using the amazing jQTouch jQuery plugin for mobile web development. jQTouch is a jQuery plugin with native animations, automatic navigation, and themes for mobile WebKit browsers like iPhone, iPod Touch, G1, and Pre.

Source

Is a jQuery image gallery plugin which brings the native look and feel of native photo-viewing applications to the mobile browsers.

Source

Image gallery for mobile devices.

Source

Easy to use JQuery plugin for web developer to build JavaScript gallery for mobile device. The plugin is driven by xml or array data. Easy setup and only minimum programming knowledge is needed. Best for building photo album which target for view on mobile device.

Source

It is compatible with all modern desktop and mobile browsers. TN3 Gallery is a full-fledged HTML based customizable image gallery with jQuery slideshow, transition, CSS skinning and multiple album options.

Source

Read more

10 jQuery Mobile Menu Plugins

Don’t you think your mobile’s menu is getting old already? jQuery has good news for you! Check out our list of jQuery Mobile Menu plugins and get that new design your looking for!

The select menus are driven off native select elements, but the native selects are hidden from view and replaced with a custom-styled select button that matches the look and feel of the jQuery Mobile framework. The replacement selects are ARIA-enabled and are keyboard accessible on the desktop as well.

Source

In depth look at building jQuery Mobile header and footer menu’s. We also look at building navigation menus in the header and footer and creating iPhone and android like fixed menus.

Source

Features:
> Built on jQuery core
> Compatible with all major mobile platforms
> Lightweight size
> HTML5 Markup-driven configuration
> Progressive enhancement
> Automatic initialization
> Accessibility
> New events
> New plugins
> Powerful theming framework

Source

Plugin that adds a dual-column experience to your page.

Source

Features:
> Full cross-browser compatibility
> Fully accessible even when JavaScript is turned off, as a pure CSS menu
> Search engines optimized
> Clear unordered list (LI and UL HTML tags) structure
> Easy to setup and update
> Fantastic animation and transition effects
> Multiple pre-designed color schemes
> Completely customizable styling with CSS
> Powered by jQuery
> Extremely small – 3kb uncompressed

Source

Features:
> Inactive/Disabled items
> Several menus on one page
> Horizontal or vertical orientation
> Submenus automatically scrolls
> Sound support!
> 85% transparency for sub menus
> Image arrows
> Keyboard navigation – press Ctrl+F2 to enter the top menu

Source

Features:
> Full cross-browser compatibility
> Fully accessible even when JavaScript is turned off, as a pure CSS menu
> Search engines optimized
> Clear unordered list (LI and UL HTML tags) structure
> Easy to setup and update
> Fantastic animation and transition effects
> Multiple pre-designed color schemes
> Completely customizable styling with CSS
> Powered by jQuery
> Extremely small – 3kb uncompressed

Source

Features:
> Status string shows item labels
> Unlimited number of sub levels
> Personal CSS styles for separate menu elements
> Top items and submenus have a shadow
> Visible over select boxes, iframes, pdf, flash, Java applets.
> Filters and Transitional effects
> Cross-frame support – menus work on frameset-based pages
> AJAX menu loading – loads web menu data from the server “on-the-fly”.

Source

The system will include both layouts (lists, detail panes, overlays) and a rich set of form controls and UI widgets (toggles, sliders, tabs).

Source

Characteristics:
> Embedded browser determined by IE.
> Application switcher (calls for Aero Enabled).

Source

Read more

5 jQuery Mobile Datepickers

In today’s jQuery post we share with you some jQuery Mobile Datepickers. Make your own date pickers for your mobile phones! Check out our tutorials below. Enjoy!

The included files extend the jQuery UI datepicker to make it suitable for touch devices. This plugin is not included in jQuery Mobile by default, so you’ll need to include the files yourself if you’d like to use them.

Source

jQuery Mobile has released an experimental version of Date Picker for Date Input Fields. Learn in this tutorial.

Source

The goal is to get the look of Android’s date picker.

Source

A multi-mode date and time picker for jQueryMobile.

Source

This is jQuery UI’s datepicker plugin with jQuery Mobile’s theming and script handling applied.

Source

Read more

10 Free jQuery Mobile Themes

Mobiles are just not for entertainment purposes anymore! You can now get the information at your fingertips anywhere you go thanks to everyday improving mobile technology. One of the main reasons everyone is developing mobile sites is because mobile themes are becoming extremely popular. Check out our list of 10 free jQuery mobile themes and have some mobile fun!

This theme features a blue, black, and white single column liquid design. It utilizes the jQuery mobile framework to deliver collapsible menus, themed content, rich buttons, hash-tag navigation, loading status, and much more.

Source

The best mothod for creating a theme is actually modifying the existing one. Just like jQuery Mobile have done with their “Valenica” Theme. Use these files as a starting point / reference.

Source

Mobjectify simplifies the task of getting up a quick mockup of your mobile website. Use the bundled widgets, to generate a prototype for your site in just a few minutes. Which means you can experiment with actually running designs rather than paper layouts or wireframes.

Source

Built with the incredible jQuery Mobile plugin, this theme is perfect for those who want to make a good looking and easy to read version of their blog. It uses most of jQuery Mobile features to guarantee an optimal ease of reading on mobile devices such as the iPhone, Blackberries or Android.

Source

Is an elegant mobile theme with that supports advanced touch browsers (iPhone, Android, BlackBerry, Pre) and is also backward compatible with older mobile devices.

Source

This screencast will teach you how to edit a default jQuery Mobile theme and add your CSS and theme changes in order to customize it to your needs.

Source

iPhonsta theme has a fluid layout, fits the screen and configuring font size automatically.

Source

Compatible with touchscreen mobile phones: iPhone & iPod Touch, Android, BlackBerry, Windows Phone, Palm Pre, Symbian. 3 skins: Sky Blue, Amethyst, Rain Forest. Widget ready. W3C valid, hand-made, table-less, SEO, mobile friendly XHTML & CSS code.

Source

Use Smooci on Mobiles to display the theme when your WordPress site is visited on mobiles.

Source

Learn how to make a drupal jQuery theme in this tutorial.

Source

Read more