September 5, 2012

jQuery Mobile Codiqa

by Nick Staroba

After writing “Resolution Independence” for a recent edition of The Informatizer, I received a comment from a reader that I should write about jQuery Mobile. So, being somewhat familiar with jQuery, I decided to have a look.

jQuery’s developers describe it as “A fast, concise, library that simplifies how to traverse HTML documents, handle events, perform animations, and add AJAX.”

jQuery Mobile on the other hand is very similar: “jQuery mobile framework takes the ‘write less, do more’ mantra to the next level: Instead of writing unique apps for each mobile device or OS, the
jQuery mobile framework allows you to design a single highly-branded web site or application that will work on all popular smartphone, tablet, and desktop platforms.”

Normally for a topic like this I would be delving into the meat of the item in question but I was distracted.

Upon loading jQuery Mobile’s Web site, the page jumps down to a prominent “Try it now!” section.

And I was lost to the world for an afternoon.

Pictured above is this simple drag and drop “try it now” tool for jQuery Mobile powered by Codiqa (http://codiqa.com/).

What this embedded and simplified version of Codiqa does is utilize jQuery Mobile to let you create any number of mobile-ready pages in minutes.

Yes, minutes.

Need a contact form? Easy.

Need a page with a map? Done.

Any designer or developer with moderate HTML and scripting experience could get a fully functional site up for a small or large business with minimal effort.

Of course this isn’t going to be a site to win any major awards but when you’re on a budget or a time crunch to get a fully adaptive mobile project done and published, I would start here.

Here’s an example set of requirements:

Page template:

  • a header image,
  • a navigation bar with three links,
  • content area,
  • a footer with copyright data.

Homepage:

  • a paragraph describing the business with a “Learn More” button linking to page about a service,
  • contact information,
  • a map with the location set.

About page:

  • two paragraphs about the company.

Contact page:

  • “I’m interested in:” with three checkboxes for different services,
  • a text input for an email address,
  • a text input for a phone number,
  • a text area for a message.

A page about a service:

  • a couple of paragraphs describing one service in further detail,
  • a call-to-action button linking to the contact page.

That’s a template and four pages. How long do you think it will take?

It took me an hour.

Here’s the homepage and contact form:

I only counted the front-end of the contact form into my time as I would simply copy and paste the PHP from an earlier form.

Here are the service and about pages:

Pretty slick for hardly any effort.

Codiqa is described as “the fastest mobile builder and prototyping tool” and it is definitely that. And right on jQuery Mobile’s site, you get to try it free. Enjoy.

info@stoutsystems.com
877.663.0877
© Copyright 1995-2018 - STOUT SYSTEMS DEVELOPMENT INC. - All Rights Reserved
envelopephone-handsetlaptop linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram