Problem: jQuery UI doesn't support touch gestures
We are customizing a map application with swipe functionality which is based on some legacy code mash-up with dojo and jquery/jquery ui. Everything was nice and dandy until we tried swiping on the iPad for the first time. Bad awakening. jQuery UI user interface library does not support the use of touch events in their widgets and interactions. This means that our mouse event simply don't work on touch devices. One might think the jQuery toolkit would take care of it... but no!
Solution A: For every mouse/keyboard event, provide the equivalent touch event: touchstart, touchmove, touchend,...
Solution B: Use a hack called jQuery UI Touch Punch that adds simulated events (that mimic touch events) to your app and respond to the mouse events you already have in your app. It's really simple:
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script> <script src="jquery.ui.touch-punch.js"></script>
Add the jquery and jquery ui libraries (if you don't have them already or if you use older versions) plus the reference to your local copy of the touch-punch file (download the Development version!!)
Solution C: Go to github and get the really nice swipe story map template which works "out of the box" (but didn't satisfy our complex requirements)
- Using “Preventive Medicine” Against Bad Clients (by Maria Malidaki) - Love the section about useful documents
- Accessibility and web innovation – a talk (by Christian Heilmann) - Chris makes a case for deeper involvement in the actual development of cool technology that is accessible (or cool development that makes technology accessible)
- Architecture v. Web Design (by Dmitry Fadeyev) - Dmitry on the essence of architecture to create space and how this is (or is not) applied to web design
- What’s new for web designers – Apr 2011 (by Cameron Chapman) - Once again, great collection of apps for designers, thx Cameron
- Are your users S.T.U.P.I.D? (by Stephen Turbek) - Get Smart (and download the info poster)
- Essential Facebook Etiquette: 10 Dos and Don’ts (by bellefoong) - Funny how we need to learn social etiquette again, huh?
- How To Design The Perfect Form (by Brian) - Extensive collection of examples and best practices for forms
- Integrating UX into Agile Development (by Janet M. Six) - State your requirements as user stories: As a [role], I want to [action based on a feature], so [user goal].
- Mobile Application Development: Web vs. Native (by Andre Charland, Brian LeRoux) - Excellent research on web versus native development for mobile. Sooner or later we all need to understand the ins and outs of mobile dev.
- A new micro clearfix hack (by Nicolas Gallagher) - updated hack to clear floats without resorting to using presentational markup
- Web Developers vs. Web Developers (Infographic Remix) (by Cassie McDaniel) - nice remix of the original web designers vs web developers infographic by Shane Snow
I'm happy to introduce a new book which was co-authored by my colleague Pinde Fu: "Web GIS: Principles and Applications".
I'm really excited about this, not only because good GIS resources are scarce but also because he used screenshots of applications that I have designed over the past years, e.g. geodata.gov, GeoPortal Toolkit, Loma Linda Medical Center Response System, HydroViewer.
How much better can it get when your design ends up in a book?
While the content of the book is targeted at readers at all skill levels I can see it as a great teaching source as well as invaluable resource for managers and aspiring GIS developers to understand the principles of web applications.
Table of Contents
- GIS in the Web Era
- Technical Basics
- Geospatial Web Services
- Geospatial Mashups
- Mobile GIS
- NSDI in the Web 2.0 Era
- Web GIS Applications in E-Business
- Web GIS Applications in E-Government
- Hot Topics and New Frontiers
- What Websites Can Learn From Mobile (by Michael Wilson) - funny, but my take-away is that 'constraints improve creative design'
- The Perfect Web Designer Should Not Exist (by Jason Gross) - base your design decisions on your sites' target audience and their goals - nothing else matters... uuuhhhhhhh....
- 97 Things to Know about Usability (by Jeff Sauro) - fantastic, fantastic, fantastic - must read!!
- Top 5 Web Font Design Trends to Follow (by Christina Warren) - WOFF-WOFF, love to hear that dog barking..
- Real Time Web Analytics Services – Best of (by hongkiat) - which web analytics service do you use?
- Guidelines for URI Design (by Jacob Gillespie) - URI structure is primarily important for user recognition and easy of use, search engine optimization is nice too.
- 8 Ways to Make Your Website Mobile Friendly (by Joel Reyes) - isn't it sweet that our mobiles will drive us towards better web development also? Something we should have been doing for a long time already?
- The ADA and the Web: Concerns and Misconceptions (by Jared Smith) - Is an accessibility law for e-commerce coming? Will this take the look of the web back to 1990? Jared has some nice Q&A there...
- Stop Designing Aesthetics, Start Designing Emotions (by John O’Nolan) - Design for emotions, definitely not a new concept but usually poorly covered. John takes a good stab on it.
- 5 Small Biz Web Design Trends to Watch (by Grace Smith) - Minimalism, Unique Photography, Bold Typography, Clear Calls to Action, A/B Testing - what more to say?
- iPad User Experience Guidelines (by UX Magazine) - with the source doc at Apple's Human Interface Guidelines for the iPad