background preloader

Tutorial: Developing a PhoneGap Application

Tutorial: Developing a PhoneGap Application
In this tutorial, you create a fully functional employee directory application with PhoneGap. You will learn: How to use different local data storage strategies.How to use several PhoneGap APIs such as Geolocation, Contacts, and Camera.How to handle specific mobile problems such as touch events, scrolling, styling, page transitions, etc.How to build an application using a single page architecture and HTML templates.How to build (compile and package) an application for 6 platforms using PhoneGap Build. To complete this tutorial, all you need is a code editor, a modern browser, and a connection to the Internet. A working knowledge of HTML and JavaScript is assumed, but you don’t need to be a JavaScript guru. Setting Up Download the assets for the workshop here.Unzip the file anywhere on your file system.If your code editor allows you to “open a directory”, open the phonegap-workshop-master directory. Step-by-step solution files are also available here. Part 1: Choosing a Local Storage Option

http://coenraets.org/blog/phonegap-tutorial/

Related:  air_martyInternet relatedESL

It's Not UX vs. UI, It's UX & UI How differentiating the two will improve them both Chris Bank of UXPin — the wireframing & prototyping app — compares and contrasts web UI and UX, explains why we sometimes default to building a UI, and how UI shapes UX. For analysis of examples from over 33 companies, feel free to check out Web UI Best Practices. The web user experience (UX) is the abstract feeling people get from using a website. Useful Tools, Scripts, and Resources for Front-End Developers Jul 11 2012 If you’re a front-end developer mostly focused on HTML, CSS, and JavaScript, then you’re probably always on the look out for ways to be more productive. In this post we’ll share some tools and other resources for front-end developers that you might find useful to include in your workflow. Tools and Scripts and Resources, Oh My! Font Stack Builder by Erin Lawrence

Jarle Hansen's Blog: The simple way to add a prepopulated SQLite DB in PhoneGap A common scenario for PhoneGap applications is that you want to include a prepopulated database that contains required information for the app. The plugin often used is the SQLitePlugin for iOS and Android. There are several ways to accomplish this: Flippy a jQuery flip effect plugin Markup First, add Flippy JS in your page. Be sure to have jQuery too ! The Flippy content need to be included in a container, this prevents random perspective effects with CSS : Simply call flippy() function jQuery Mobile "Getting Started" Application A couple of weeks ago, I shared an Employee Directory sample application built with jQuery Mobile and PhoneGap. That application was implemented “Ajax-style”, keeping the UI and the data access code cleanly separated. In other words: no server code intermingled in the HTML markup. A number of people have asked for a similar example using a “classic” (non-Ajax) implementation where pages (markup + data) are entirely built at the server-side before being delivered to the client. So, here is simpler version of the same application built “sans Ajax”.

Creating a Scalable SVG Infographic In this tutorial, I’m exploring how to make a scalable infographic in the browser using SVG as graphical format. I’m also using CSS3 animation techniques to animate most elements. The subject of the infographic is “Population growth on this planet”. Preview the finished, animated infographic here: The scalable infographic is divided into 11 parts, from the title to the footer at the bottom. 34 Free Open Source CSS Code Snippets for Developers Get the FlatPix UI Kit for only $7 - Learn More or Buy Now With a quick Google search you will find a ton of handy CSS2/CSS3 code snippets. But what about pre-built CSS web interfaces?

Skimming - Readingstrategies Description of Skimming Skimming is used to obtain the gist (the overall sense) of a piece of text. E.g. Use skimming to get the gist of a page of a textbook to decide whether it is useful and should therefore be read more slowly and in more detail. How to Use It (1) Read the title, subtitles and subheading to find out what the text is about. (2) Look at the illustrations to give you further information about the topic. (3) Read the first and last sentence of each paragraph. (4) Don't read every word or every sentence.

Teehan+Lax - Defining Experience Tools iPhone 6 GUI Template (iOS 8) Our template is available in two formats iPhone GUI Template (iOS 7) iPad GUI Template (iOS 7) Use jQuery Mobile to Build a Native Android News Reader App In this three part tutorial series, our main goal is to describe how jQuery Mobile can be used to develop a native Android application. First, we will develop a stand-alone, sample web application that will browse articles from Yahoo! News using jQuery Mobile. Then we will convert that web application into a native Android application with minimal effort.

UX Design: guiding before selling Post promoted by Mays Digital. We can say many designers don’t have any idea of UX design, and it is understandable when you think about it: although this is not a recent discipline, website design didn’t focus on user experience as a whole, but it focused into creating beautiful interfaces no matter the result. But websites became businesses themselves: they became marketplaces of all sorts of products and services, and you no longer needed just a beautiful site, but a functional one that converts users into customers. UX design is about making the experience of using a website easy and fun for the user, and it is a way of creating a bond between the website and the user; this means both entities understanding each other: devices knowing what users require, and users understanding how the website performs easily. The basics UX design is about understanding users, their needs, their ability, their value and their limitations.

Related:  PhoneGap関連