–webkit resources for Tablet Hybrid Apps

Written by Nico Pernice on Sep 28 2011 - Last modified on Jun 17 2012

The awe­some –webkit engine pow­er­ing Android and iOS based tablets, allow us to take advan­tage of the full HTML5, CSS3, and JavaScript capa­bil­i­ties to deliver rich expe­ri­ences in our hybrid apps.
In the last months we’ve col­lected a fresh and huge list of resources we’re happy to share with you and keep grow­ing with your fur­ther suggestions:

This post is con­tin­u­ously updated. New ele­ments are fol­lowed by an *[update_monthYear] tag.


[jac­cor­dion]
OFFICIAL REFERENCES::

Dive into HTML5
http://​divein​to​html5​.org/

W3C HTML 5 Ref­er­ence
http://​dev​.w3​.org/​h​t​m​l​5​/​h​t​m​l​-​a​u​t​h​or/

W3 Schools HTML5
http://​www​.w3schools​.com/​h​t​m​l5/

The WebKit Open Source Project
http://​www​.webkit​.org/

Safari Devel­oper Library
http://17.254.2.129/library/safari/navigation/

HTML5 Doc­tor
Help­ing you imple­ment HTML5 today
http://​htm​l5​doc​tor​.com/

Seman­tic class names
http://​micro​for​mats​.org/​w​i​k​i​/​s​e​m​a​n​t​i​c​-​c​l​a​s​s​-​n​a​mes

Touch Ges­ture Ref­er­ence Guide *[update_oct2001]
http://​www​.lukew​.com/​f​f​/​e​n​t​r​y​.​a​s​p​?​1​071

[jacc/] DEMONSTRATIONS::

Apple HTML5 Show­case
http://​www​.apple​.com/​h​t​m​l5/

The­Ex­pres­siveWeb
http://​beta​.the​ex​pres​siveweb​.com/

Mozilla Devel­oper Net­work Demo Stu­dio
https://​devel​oper​.mozilla​.org/​e​n​-​U​S​/​d​e​m​os/

CSS3/HTML5 demos
http://​css3​.brad​shawen​ter​prises​.com/​d​e​m​os/

HTML5 Gallery
http://​htm​l5​gallery​.com/

HTML5 Demos
http://​htm​l5demos​.com/

Andrew Hoyer exper­i­ments *[update_oct2001]
http://​andrew​-hoyer​.com/​e​x​p​e​r​i​m​e​n​ts/

[jacc/] GENERAL CODING RELATED ARTICLES::

Build­ing a Touch-Friendly HTML5 Site
http://​blogs​.clar​i​ty​con​.com/​d​e​s​i​g​n​/​2​0​1​1​/​0​7​/​2​5​/​b​u​i​l​d​i​n​g​-​a​-​t​o​u​c​h​-​f​r​i​e​n​d​l​y​-​h​t​m​l​5​-​s​i​te/

7 tips for using UIWe­b­View
http://​www​.cod​ingven​tures​.com/​2​0​0​8​/​1​2​/​u​s​i​n​g​-​u​i​w​e​b​v​i​e​w​-​t​o​-​r​e​n​d​e​r​-​s​v​g​-​f​i​l​es/

Test­ing mem­ory usage on mobile Safari
http://​cubiq​.org/​t​e​s​t​i​n​g​-​m​e​m​o​r​y​-​u​s​a​g​e​-​o​n​-​m​o​b​i​l​e​-​s​a​f​ari

Design­ing for iPhone 4 Retina Dis­play: Tech­niques and Work­flow
http://​www​.smash​ing​magazine​.com/​2​0​1​0​/​1​1​/​1​7​/​d​e​s​i​g​n​i​n​g​-​f​o​r​-​i​p​h​o​n​e​-​4​-​r​e​t​i​n​a​-​d​i​s​p​l​a​y​-​t​e​c​h​n​i​q​u​e​s​-​a​n​d​-​w​o​r​k​f​l​ow/

Mak­ing an iPad HTML5 App & mak­ing it really fast
http://​mir​.aculo​.us/​2​0​1​0​/​0​6​/​0​4​/​m​a​k​i​n​g​-​a​n​-​i​p​a​d​-​h​t​m​l​5​-​a​p​p​-​m​a​k​i​n​g​-​i​t​-​r​e​a​l​l​y​-​f​a​st/

Hard­ware Accel­er­a­tion for Safari and iPhone
http://​patrick​reynolds​.co/​p​o​s​t​/​h​a​r​d​w​a​r​e​-​a​c​c​e​l​e​r​a​t​i​o​n​-​f​o​r​-​s​a​f​a​r​i​-​a​n​d​-​i​p​h​o​ne/

Increas­ing Per­for­mance of HTML and JavaScript on Mobile Devices, Espe­cially iOS
http://​the​.ichi​bod​.com/​k​i​j​i​/​i​n​c​r​e​a​s​i​n​g​-​p​e​r​f​o​r​m​a​n​c​e​-​o​f​-​h​t​m​l​-​a​n​d​-​j​a​v​a​s​c​r​i​p​t​-​o​n​-​m​o​b​i​l​e​-​d​e​v​i​c​e​s​-​e​s​p​e​c​i​a​l​l​y​-​i​os/

Hybrid (Native + Web) Mobile App Devel­op­ment (arti­cle series)
http://engineering.gomiso.com/?s=Hybrid+%28Native+%2B+Web%29+Mobile+App+Development

iOS5, the first true web app ready plat­form
http://​cubiq​.org/​i​o​s​5​-​t​h​e​-​f​i​r​s​t​-​t​r​u​e​-​w​e​b​-​a​p​p​-​r​e​a​d​y​-​p​l​a​t​f​orm

[/jaccordion]

Css3

[jac­cor­dion] RESPONSIVE GRIDS::

BluCSS
Your best buddy when it comes to cre­at­ing respon­sive lay­outs. There are 10 columns in BluCSS, and each has a width spec­i­fied in per­cent­ages. Because of this, they resize auto­mat­i­cally to fit into their par­ent con­tainer.
http://​design​lu​natic​.com/​p​r​o​j​e​c​t​s​/​b​l​u​c​ss/

The Seman­tic Grid Sys­tem
Page lay­out for tomor­row. Set col­umn and gut­ter widths, choose the num­ber of columns, and switch between pix­els and per­cent­ages. All with­out any ugly .grid_x classes in your markup.
http://​seman​tic​.gs/

Golden Grid Sys­tem
A fold­ing grid for respon­sive design.
http://​gold​en​gridsys​tem​.com/

Mag­a­zine Grid
cre­ate great mag­a­zine lay­outs for the iPad
http://​grid​.asidemag​.com/

Less Frame­work
CSS grid sys­tem for design­ing adap­tive web­sites.
http://​less​frame​work​.com/

[jacc/] HARDWARE ACCELERATED ANIMATIONS::

Hard­ware accel­er­a­tion allows for smoother tran­si­tions. It takes more mem­ory resources and there’s no more need to force it on the brand new iOS5. How­ever it’s still a great tip to enhance the user experience.

Slice­Box
A fresh 3D image slider with grace­ful fall­back. Slice­box makes use of the Css3 3D trans­forms prop­er­ties and allows dif­fer­ent kind of effects.
http://​tym​pa​nus​.net/​c​o​d​r​o​p​s​/​2​0​1​1​/​0​9​/​0​5​/​s​l​i​c​e​b​o​x​-​3​d​-​i​m​a​g​e​-​s​l​i​d​er/

CSS3 Tran­si­tions With­out Using :hover
http://​www​.impres​sivewebs​.com/​c​s​s​3​-​t​r​a​n​s​i​t​i​o​n​s​-​w​i​t​h​o​u​t​-​h​o​v​er/

CSS3 Tran­si­tion Ani­ma­tions With jQuery Fall­backs
http://​addyos​mani​.com/​b​l​o​g​/​c​s​s​3​t​r​a​n​s​i​t​i​o​n​s​-​j​q​u​e​ry/

Build a Pure CSS Slideshow With Webkit Keyframes
http://​design​shack​.co​.uk/​a​r​t​i​c​l​e​s​/​c​s​s​/​b​u​i​l​d​-​a​-​p​u​r​e​-​c​s​s​-​s​l​i​d​e​s​h​o​w​-​w​i​t​h​-​w​e​b​k​i​t​-​k​e​y​f​r​a​mes

Css3d Slideshow
A pre­sen­ta­tion slideshow tem­plate.
http://​hakim​.se/​e​x​p​e​r​i​m​e​n​t​s​/​c​s​s​/​s​l​i​d​e​s​h​ow/

Pure Css 3d flip effect
https://​github​.com/​W​a​r​r​y​/​C​S​S​-​3​D​-​f​l​i​p​-​e​f​f​e​c​t​-​f​o​r​-​i​p​h​one

Cre­ate a CSS3 Image Gallery with a 3D Light­box Ani­ma­tion
http://​inspectele​ment​.com/​a​r​t​i​c​l​e​s​/​c​r​e​a​t​e​-​a​-​c​s​s​3​-​i​m​a​g​e​-​g​a​l​l​e​r​y​-​w​i​t​h​-​a​-​3​d​-​l​i​g​h​t​b​o​x​-​a​n​i​m​a​t​i​on/

Css3Anim
A css3 ani­ma­tion library used for sim­u­lat­ing ppt tran­si­tion.
https://​github​.com/​z​h​o​u​q​i​c​f​/​c​s​s​3​-​a​nim

Cube5
A CSS3 ani­mated 3D Cube lay­out
https://​github​.com/​g​u​i​l​l​e​/​C​u​be5

3d ani­ma­tion using pure CSS3
http://​www​.mar​co​fo​lio​.net/​c​s​s​/​3​d​_​a​n​i​m​a​t​i​o​n​_​u​s​i​n​g​_​p​u​r​e​_​c​s​s​3​.​h​tml

[jacc/] MORE CSS TUTS::

Css Masks *[update_oct2011]
http://​www​.webkit​.org/​b​l​o​g​/​1​8​1​/​c​s​s​-​m​a​s​ks/

Enhance Your Sites with CSS3 Ani­ma­tions
http://​www​.onex​trapixel​.com/​2​0​1​1​/​0​8​/​3​1​/​e​n​h​a​n​c​e​-​y​o​u​r​-​s​i​t​e​s​-​w​i​t​h​-​c​s​s​3​-​a​n​i​m​a​t​i​o​ns/

Sim­u­lat­ing :hover and Dou­ble Clicks With Pure CSS on Mobile Devices
http://​ajax​ian​.com/​a​r​c​h​i​v​e​s​/​s​i​m​u​l​a​t​i​n​g​-​h​o​v​e​r​-​a​n​d​-​d​o​u​b​l​e​-​c​l​i​c​k​s​-​w​i​t​h​-​p​u​r​e​-​c​s​s​-​o​n​-​m​o​b​i​l​e​-​d​e​v​i​ces

Retina Dis­play and CSS Back­ground Images
http://​www​.weedy​gar​den​.net/​2​0​1​0​/​1​0​/​1​3​/​r​e​t​i​n​a​-​d​i​s​p​l​a​y​-​a​n​d​-​c​s​s​-​b​a​c​k​g​r​o​u​n​d​-​i​m​a​g​es/

CSS3 Page Flips
http://​css3wiz​ardry​.com/​2​0​1​0​/​0​7​/​1​3​/​c​s​s​3​-​p​a​g​e​-​f​l​i​ps/

Css tar­get
CSS3 :tar­get nav­i­ga­tion.
https://​github​.com/​m​a​r​i​u​s​z​/​c​s​s​-​t​a​r​get

Cov­er­Flip
An HTML5/CSS3 clone of the iOS Cov­er­flow
https://​github​.com/​l​i​a​m​j​a​/​C​o​v​e​r​f​lip

iPhone CSS3
Image­less iphone UI made in Css3
http://​jeff​bat​ter​ton​.com/​b​l​o​g/5

Fan-style slide show using CSS3 trans­forms
https://​github​.com/​p​r​a​j​w​a​l​i​t​/​s​l​i​d​e​s​how

Snip­plr webkit fil­tered results *[update_nov2011]
http://​snip​plr​.com/​s​e​a​r​c​h​.​p​h​p​?​q​=​w​e​b​k​i​t​&​a​m​p​;​b​t​n​s​e​a​r​c​h​=go

[jacc/] ONLINE GENERATORS::

Ceaser
CSS Eas­ing Ani­ma­tion Tool.
http://​matthewlein​.com/​c​e​a​s​er/

Pat­t­ernizer
Every­one loves a good pat­tern. With Pat­t­ernizer, it’s easy to make some­thing amaz­ing in just a few min­utes. It takes all the work out of cre­at­ing com­pli­cated pat­terns, let­ting you focus on cre­ativ­ity and play.
http://​pat​t​ernizer​.com/​vq6

Css3 gen­er­a­tor
http://​www​.west​civ​.com/​t​o​o​l​s​/​g​r​a​d​i​e​n​ts/

CSS3Warp
Cre­ate Illus­tra­tor like “warped” text (text fol­low­ing an irreg­u­lar path) with pure CSS and HTML.
http://​css​warp​.ele​qtriq​.com/

[jacc/] DESKTOP TOOLS::

Tumult Hype
Cre­ate. Ani­mate. HTML5
http://​tumultco​.com/​h​y​pe/

Adobe Edge
Motion and Inter­ac­tion Design for HTML5
http://​labs​.adobe​.com/​t​e​c​h​n​o​l​o​g​i​e​s​/​e​d​ge/

Sen­cha Ani­ma­tor
Cre­ate amaz­ing CSS3 ani­ma­tions with ease.
http://​www​.sen​cha​.com/​p​r​o​d​u​c​t​s​/​a​n​i​m​a​t​or/

Radi
Cre­ate video, ani­ma­tion and real­time graph­ics for the mod­ern web
http://​radi​app​.com/

Motion­Com­poser
Cre­ate inter­ac­tive Web con­tent using Flash® and HTML5!
http://​www​.aquafadas​.com/​e​n​/​m​o​t​i​o​n​c​o​m​p​o​s​er/

[/jaccordion]

Javascript

Just some pure JavaScript with­out a frame­work and using the capa­bil­i­ties of the tar­get plat­form (iPad) as much as pos­si­ble allows for a lean page that loads almost instantly, caches well and works great offline. Yes, we could have used JavaScript and CSS frame­works, but some­times less is more (and remem­ber, you don’t need all the cross-browser heavy lift­ing that frame­works do for you).” Thomas Fuchs

[jac­cor­dion] STAND ALONE JS PLUGINS::

Jester *[update_oct2011]
Easy JavaScript ges­ture recog­ni­tion for iphone and ipad.
https://​github​.com/​p​l​a​i​n​v​i​e​w​/​J​e​s​ter

MiniApps*[update_oct2011]
Touch & ges­ture JavaScript plu­g­ins
http://​miniapps​.co​.uk/​c​o​de/

Css Ani­ma­tion Keyframe Events js
Pro­vides Keyframe events for CSS3 Ani­ma­tions
https://​github​.com/​j​o​e​l​a​m​b​e​r​t​/​C​S​S​A​n​i​m​a​t​i​o​n​K​e​y​f​r​a​m​e​E​v​e​nts

Mobile Web-based Ges­ture Recog­ni­tion
A proof-of-concept
https://​github​.com/​t​a​i​t​e​m​s​/​M​o​b​i​l​e​-​W​e​b​-​b​a​s​e​d​-​G​e​s​t​u​r​e​-​R​e​c​o​g​n​i​t​ion

Treesaver

A JavaScript frame­work for cre­at­ing magazine-style lay­outs using standards-compliant HTML and CSS.
http://​treesaverjs​.com/

Tempo 1.6
Tempo is a tiny JSON ren­der­ing engine that enables you to craft data tem­plates in pure HTML.
http://​twigkit​.github​.com/​t​e​m​po/

Bib­lio­type
A (very) sim­ple HTML, CSS and JS based library for rapid pro­to­typ­ing long-form typog­ra­phy and read­ing on tablets.
http://​craig​mod​.com/​b​i​b​l​i​o​t​y​pe/

Spin.js
A load­ing Spin­ner Sans Images. Uses CSS3 to ren­der the ani­ma­tion
http://​fgnass​.github​.com/​s​p​i​n​.​js/

CSI (client side includes)
A library that let you “include” an exter­nal file into an XHTML doc­u­ment using Ajax, with­out requir­ing any kind of server-side func­tion­al­ity.
http://​www​.mas​si​mo​corner​.com/​l​i​b​r​a​r​i​e​s​/​c​si/

JsMa­n­ip­u­late
javascritp image effects and fil­ters
http://​www​.joelb​.me/​j​s​m​a​n​i​p​u​l​a​te/

Hyphen­ator
Javascript that imple­ments client-side hyphen­ation of HTML-Documents
http://​code​.google​.com/​p​/​h​y​p​h​e​n​a​t​or/

Smoke.js
A framework-agnostic styled alert sys­tem for javascript.
http://​ssss​nakes​.com/​s​m​o​ke/

Scrol­la­bil­ity
Imi­tates iOS native scrolling in JavaScript.
https://​github​.com/​j​o​e​h​e​w​i​t​t​/​s​c​r​o​l​l​a​b​i​l​ity

Guiders.js (ver­sion 1.1.2)
Guiders are a user expe­ri­ence design pat­tern for intro­duc­ing users to a web appli­ca­tion.
https://​github​.com/​j​e​f​f​-​o​p​t​i​m​i​z​e​l​y​/​G​u​i​d​e​r​s​-​J​S​?​u​t​m​_​s​o​u​r​c​e​=​j​a​v​a​s​c​r​i​p​t​w​e​e​k​l​y​&​a​m​p​;​u​t​m​_​m​e​d​i​u​m​=​e​m​ail

Glove­Box
Bare-metal webkit touch enabled scroll project. All JavaScript with no ext depen­den­cies.
https://​github​.com/​p​u​r​p​l​e​c​a​b​b​a​g​e​/​G​l​o​v​e​Box

Flux Slider
Hard­ware accel­er­ated image tran­si­tions using CSS3.
http://​www​.joe​lam​bert​.co​.uk/​f​l​ux/

[jacc/] MOBILE FRAMEWORKS::

Zepto
A min­i­mal­ist JavaScript frame­work for mobile and desk­top WebKit browsers, with a jQuery-compatible API
https://​github​.com/​m​a​d​r​o​b​b​y​/​z​e​pto

Sen­cha Touch
Sen­cha Touch allows you to develop mobile web apps that look and feel native on iPhone, Android, and Black­Berry touch devices.
http://​www​.sen​cha​.com/​p​r​o​d​u​c​t​s​/​t​o​u​ch/

ChocolateChip-UI *[update_nov2011]
ChocolateChip-UI is a frame­work that pro­vides lay­outs and wid­gets with built-in func­tion­al­ity to enable you to quickly and eas­ily cre­ate mobile Web apps. In some cases these require no script­ing at all. Comes in jQuery or Zepto flavour.
http://​www​.choco​lat​e​chip​-ui​.com/

Wink toolkit *[update_nov2011]
Wink Toolkit is a light­weight JavaScript toolkit which will help you build great mobile web apps. It is designed and devel­oped to meet the spe­cific con­straints of the mobile envi­ron­ment. The toolkit’s core offers all the basic func­tion­al­i­ties a mobile devel­oper would need from touch event han­dling to DOM manip­u­la­tion objects or CSS trans­forms util­i­ties. Addi­tion­ally, it offers a wide range of UI com­po­nents to help you improve the look and feel of a web app, or sim­ply to exper­i­ment with new user inter­ac­tions.
http://​www​.wink​toolkit​.org/

Xui
A tiny javascript frame­work for mobile web apps.
http://​xuijs​.com/

Mootools Mobile
http://​www​.naprej​.com/​m​o​o​t​o​o​l​s​_​m​o​b​ile

JQuery Mobile
Touch-Optimized Web Frame­work for Smart­phones & Tablets
http://​jquery​mo​bile​.com/

jQTouch
jQuery plu­gin for mobile web devel­op­ment on the iPhone, Android, iPod Touch.
http://​jqtouch​.com/

[jacc/] jQUERY MOBILE TUTORIALS::

Top 10 jQuery Mobile Code Snip­pets that you need to know
http://​eis​abainyo​.net/​w​e​b​l​o​g​/​2​0​1​1​/​0​1​/​3​1​/​t​o​p​-​1​0​-​j​q​u​e​r​y​-​m​o​b​i​l​e​-​c​o​d​e​-​s​n​i​p​p​e​t​s​-​t​h​a​t​-​y​o​u​-​n​e​e​d​-​t​o​-​k​n​ow/

iOS Inspired jQuery Mobile Theme
https://​github​.com/​t​a​i​t​e​m​s​/​i​O​S​-​I​n​s​p​i​r​e​d​-​j​Q​u​e​r​y​-​M​o​b​i​l​e​-​T​h​eme

Using swipe ges­tures for nav­i­ga­tion in jQuery Mobile
http://​www​.cold​fu​sion​jedi​.com/​i​n​d​e​x​.​c​f​m​/​2​0​1​1​/​3​/​1​4​/​U​s​i​n​g​-​s​w​i​p​e​-​g​e​s​t​u​r​e​s​-​f​o​r​-​n​a​v​i​g​a​t​i​o​n​-​i​n​-​j​Q​u​e​r​y​-​M​o​b​ile

[jacc/] jQUERY TUTORIALS::

Notabene
An iPad Webapp that explores the bound­aries of the browser.
https://​github​.com/​i​n​t​u​i​t​y​m​e​d​i​a​l​a​b​/​N​o​t​a​b​ene

Mix­ing CSS3 Pre­fixed Prop­er­ties with Keyframe Ani­ma­tions
http://​www​.impres​sivewebs​.com/​m​i​x​i​n​g​-​c​s​s​3​-​k​e​y​f​r​a​m​e​-​a​n​i​m​a​t​i​o​ns/

Trig­ger­ing CSS3 Tran­si­tions With JavaScript
http://​www​.impres​sivewebs​.com/​c​s​s​3​-​t​r​a​n​s​i​t​i​o​n​s​-​j​a​v​a​s​c​r​i​pt/

How to Use jQuery to Make Slick Page Tran­si­tions
http://​www​.onex​trapixel​.com/​2​0​1​0​/​0​2​/​2​3​/​h​o​w​-​t​o​-​u​s​e​-​j​q​u​e​r​y​-​t​o​-​m​a​k​e​-​s​l​i​c​k​-​p​a​g​e​-​t​r​a​n​s​i​t​i​o​ns/

Link swipe effect
http://​www​.net​magazine​.com/​f​i​l​e​s​/​t​u​t​o​r​i​a​l​s​/​d​e​m​o​s​/​2​0​1​1​/​0​2​/​j​a​v​a​s​c​r​i​p​t​-​a​n​i​m​a​t​i​o​n​s​-​t​h​e​-​l​i​n​k​-​s​w​i​p​e​/​d​e​m​o​/​d​e​m​o​.​h​tml

Cre­at­ing a HTML 5 Web App for iPad
http://​anders​.zakris​son​.se/​p​r​o​j​e​c​t​s​/​c​r​e​a​t​i​n​g​-​h​t​m​l​-​5​-​w​e​b​-​a​p​p​-​i​p​ad/

Full Page Coda Slider Effect
http://​www​.james​riter​.com/​b​l​o​g​/​2​0​1​0​/​0​5​/​1​3​/​f​u​l​l​-​p​a​g​e​-​c​o​d​a​-​s​l​i​d​e​r​-​e​f​f​e​ct/

CSS based tran­si­tions, only using jQuery to manip­u­late classes to trig­ger the effects.
https://​github​.com/​b​r​i​d​g​e​s​t​e​w​/​C​S​S​3​-​S​l​i​d​e​s​how

Text Resiz­ing With jQuery
http://​www​.shopdev​.co​.uk/​b​l​o​g​/​t​e​x​t​-​r​e​s​i​z​i​n​g​-​w​i​t​h​-​j​q​u​e​ry/

Cre­ate a Ver­ti­cal, Hor­i­zon­tal and Diag­o­nal Slid­ing Con­tent Web­site with jQuery
http://​www​.que​ness​.com/​p​o​s​t​/​3​5​6​/​c​r​e​a​t​e​-​a​-​v​e​r​t​i​c​a​l​-​h​o​r​i​z​o​n​t​a​l​-​a​n​d​-​d​i​a​g​o​n​a​l​-​s​l​i​d​i​n​g​-​c​o​n​t​e​n​t​-​w​e​b​s​i​t​e​-​w​i​t​h​-​j​q​u​ery

Slid­ing and Glid­ing Page Con­tent with JavaScript
http://​devel​oper​.prac​ti​calecom​merce​.com/​a​r​t​i​c​l​e​s​/​2​0​4​8​-​S​l​i​d​i​n​g​-​a​n​d​-​G​l​i​d​i​n​g​-​P​a​g​e​-​C​o​n​t​e​n​t​-​w​i​t​h​-​J​a​v​a​S​c​r​ipt

[jacc/] jQUERY PLUGINS::

Page­Flip­per
A jQuery plu­gin for cre­at­ing a cross device(tough opti­mized for the iPad and iPhone) page­flip­per, sup­ports both touch and mouse events for flip­ping trough the pages.
https://​github​.com/​w​t​w​-​s​o​f​t​w​a​r​e​/​p​a​g​e​f​l​i​p​per

Baker pag­ify
Small jQuery script to add snap-to-pages behav­iour to Baker iPad mag­a­zines.
https://​github​.com/​h​a​r​r​y​f​k​/​b​a​k​e​r​-​p​a​g​ify

jQuery Mobile Pag­i­na­tion Plu­gin
The Pag­i­na­tion plu­gin cre­ates touch-drag nav­i­ga­tion between sep­a­rate HTML pages.
http://​fil​a​ment​group​.com/​l​a​b​/​j​q​u​e​r​y​_​m​o​b​i​l​e​_​p​a​g​i​n​a​t​i​o​n​_​p​l​u​g​in/

Pag­ify
Effort­lessly cre­ate sin­gle page web sites with this jQuery plu­gin
https://​github​.com/​c​m​p​o​l​i​s​/​P​a​g​ify

Visibility.js
A wrap­per for the Page Vis­i­bil­ity API
https://​github​.com/​e​v​i​l​m​a​r​t​i​a​n​s​/​v​i​s​i​b​i​l​i​t​y​.js

Lec­tric Slider
JavaScript slider that is touch-enabled and takes advan­tage of hard­ware accel­er­a­tion. It looks awe­some on Apple touch devices.
https://​github​.com/​m​c​k​i​n​n​e​y​/​l​e​c​t​r​i​c​#​r​e​a​dme

Har­mo­nize Text
This jQuery plu­gin changes font size of selected ele­ments to har­mo­nize text with their par­ent ele­ment
http://​hail2u​.github​.com/​j​q​u​e​r​y​.​h​a​r​m​o​n​i​z​e​-​t​e​xt/

Jquery.animate-enhanced plu­gin
Extend $.ani­mate() to detect CSS tran­si­tions for Webkit, Mozilla and Opera and con­vert ani­ma­tions auto­mat­i­cally.
http://​play​ground​.ben​bar​nett​.net/​j​q​u​e​r​y​-​a​n​i​m​a​t​e​-​e​n​h​a​n​c​ed/

FSS — Full Screen Slid­ing Web­site Plu­gin
http://​code​canyon​.net/​i​t​e​m​/​f​s​s​-​f​u​l​l​-​s​c​r​e​e​n​-​s​l​i​d​i​n​g​-​w​e​b​s​i​t​e​-​p​l​u​g​i​n​/​1​5​9​1​0​3​?​r​e​f​=​l​y​d​ian

jQuery Multi-Pageslide
http://​www​.ian​lewis​.org/​f​i​l​e​s​/​m​u​l​t​i​-​p​a​g​e​s​l​i​d​e​/​d​e​m​o​.​h​tml

Sweet Pages: A jQuery Pag­i­na­tion Solu­tion
http://​tuto​ri​alzine​.com/​2​0​1​0​/​0​5​/​s​w​e​e​t​-​p​a​g​e​s​-​a​-​j​q​u​e​r​y​-​p​a​g​i​n​a​t​i​o​n​-​s​o​l​u​t​i​on/

Iso­tope
An exquis­ite jQuery plu­gin for mag­i­cal lay­outs
http://​iso​tope​.metafizzy​.co/

Chop Slider
comes with 152 pre­de­fined and ready to use tran­si­tion effects — Tran­si­tions Library: 105 2D Tran­si­tions, 3D Tran­si­tions, “No CSS3” Tran­si­tions, “Mobile” Tran­si­tions
http://​www​.idan​gero​.us/

Smoothly
jQuery plu­gin to improve animations/transitions on mobile and tablets using CSS3 keyframes
http://​peter​j​mags​.com/​c​s​s​3​-​a​n​i​m​a​t​e​d​-​t​y​pe/

iSwipe
jQuery plu­gin for swip­ing in iPhone, iPod or iPad
https://​github​.com/​k​a​n​d​u​v​i​s​l​a​/​i​S​w​ipe

Roto
A sim­ple, flex­i­ble, touch-capable scrolling plu­gin for jQuery
https://​github​.com/​r​d​a​l​l​a​s​g​r​a​y​/​r​oto

[/jaccordion]

Mockup & Design

[jac­cor­dion] PROTOTYPING, UX and DESIGN ARTICLES::

iOS Human Inter­face Guide­lines
http://​devel​oper​.apple​.com/​l​i​b​r​a​r​y​/​i​o​s​/​#​d​o​c​u​m​e​n​t​a​t​i​o​n​/​u​s​e​r​e​x​p​e​r​i​e​n​c​e​/​c​o​n​c​e​p​t​u​a​l​/​m​o​b​i​l​e​h​i​g​/​I​n​t​r​o​d​u​c​t​i​o​n​/​I​n​t​r​o​d​u​c​t​i​o​n​.​h​tml

Books in the Age of the iPad *[update_oct2011]
http://​craig​mod​.com/​j​o​u​r​n​a​l​/​i​p​a​d​_​a​n​d​_​b​o​o​ks/

UX Lab: How can we enrich the read­ing expe­ri­ence on a screen?
http://​blog​.intu​ity​medi​alab​.eu/​2​0​1​0​/​1​2​/​2​2​/​u​x​-​l​a​b​-​h​o​w​-​c​a​n​-​w​e​-​e​n​r​i​c​h​-​t​h​e​-​r​e​a​d​i​n​g​-​e​x​p​e​r​i​e​n​c​e​-​o​n​-​a​-​s​c​r​e​en/

iPad Appli­ca­tion Design
http://​mattgem​mell​.com/​2​0​1​0​/​0​3​/​0​5​/​i​p​a​d​-​a​p​p​l​i​c​a​t​i​o​n​-​d​e​s​i​gn/

Design­ing for the iPad
http://​www​.8164​.org/​d​e​s​i​g​n​i​n​g​-​f​o​r​-​t​h​e​-​i​p​ad/

Design­ing for iPad: Real­ity Check
http://​www​.infor​ma​tion​ar​chi​tects​.jp/​e​n​/​d​e​s​i​g​n​i​n​g​-​f​o​r​-​i​p​a​d​-​r​e​a​l​i​t​y​-​c​h​e​ck/

Use­ful Design Tips For Your iPad App
http://​www​.smash​ing​magazine​.com/​2​0​1​0​/​0​4​/​1​6​/​d​e​s​i​g​n​-​t​i​p​s​-​f​o​r​-​y​o​u​r​-​i​p​a​d​-​a​pp/

Android User Inter­face Guide­lines
http://​devel​oper​.android​.com/​g​u​i​d​e​/​p​r​a​c​t​i​c​e​s​/​u​i​_​g​u​i​d​e​l​i​n​e​s​/​i​n​d​e​x​.​h​tml

Android User Inter­face Design
http://​mobile​.tut​splus​.com/​s​e​r​i​e​s​/​a​n​d​r​o​i​d​-​u​s​e​r​-​i​n​t​e​r​f​a​c​e​-​d​e​s​i​gn/

Build­ing Killer Android Tablet Apps: Design and Devel­op­ment Tips
http://​www​.devel​oper​.com/​w​s​/​a​r​t​i​c​l​e​.​p​h​p​/​3​9​0​9​8​7​1​/​B​u​i​l​d​i​n​g​-​K​i​l​l​e​r​-​A​n​d​r​o​i​d​-​T​a​b​l​e​t​-​A​p​p​s​-​D​e​s​i​g​n​-​a​n​d​-​D​e​v​e​l​o​p​m​e​n​t​-​T​i​p​s​.​htm

Design­ing For Android
http://​cod​ing​.smash​ing​magazine​.com/​2​0​1​1​/​0​6​/​3​0​/​d​e​s​i​g​n​i​n​g​-​f​o​r​-​a​n​d​r​oid

Touch Appli­ca­tion Pro­to­types (TAP) *[update_nov2011]
For iPhone and iPad, using Adobe Fire­works
http://​uni​tid​.nl/​2​0​1​1​/​0​3​/​t​o​u​c​h​-​a​p​p​l​i​c​a​t​i​o​n​-​p​r​o​t​o​t​y​p​e​s​-​t​a​p​-​f​o​r​-​i​p​h​o​n​e​-​a​n​d​-​i​p​a​d​-​u​s​i​n​g​-​a​d​o​b​e​-​f​i​r​e​w​o​r​ks/

[jacc/] DESKTOP TOOLS::

Unretiner
A tool for iOS devel­op­ers to eas­ily resize their @2x or –hd cocos2d images in sec­onds!
http://​itunes​.apple​.com/​u​s​/​a​p​p​/​u​n​r​e​t​i​n​e​r​/​i​d​4​1​1​2​7​7​0​8​5​?​m​t​=12

Live­View for iPhone & iPad
Mobile Appli­ca­tion Design & Pro­to­typ­ing Tool
http://​www​.zam​betti​.com/​p​r​o​j​e​c​t​s​/​l​i​v​e​v​i​ew/

Test­Flight
iOS beta test­ing on the fly
https://​test​fligh​tapp​.com/

Html5 slider
Frame­work for HTML pre­sen­ta­tions on the iPad
https://​github​.com/​K​a​e​l​i​g​/​H​T​M​L​5​-​S​l​i​der

Sim­Cap
The sim­ple iPhone and iPad Sim­u­la­tor screen cap­ture appli­ca­tion.
http://​www​.jaml​.co​.uk/​s​i​m​c​a​p​.​h​tml

iPad Mock Swiper
jQuery based full screen viewer for mocks designed for tablet devices. Cur­rently iPad only.
https://​github​.com/​e​g​o​e​n​s​/​i​P​a​d​-​M​o​c​k​-​S​w​i​per

[/jaccordion]

Tags: -

Nico Pernice

Graphic and Interactive Designer passionate about building strong brand identity and deliver it across a wide range of media and devices. Joined [the]PrintLabs to face the exciting challenge of the new digital publishing era.

tweets