Development
Mobile Apps
Web App Development
Creating a Web App for iPad
4.6 (23 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
802 students enrolled

Creating a Web App for iPad

Use standard web technologies to create an app-like experience for iPad. And best of all, no App Store required!
4.6 (23 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
802 students enrolled
Created by Chris Converse
Last updated 8/2014
English
English [Auto]
Preview this course
Creating a Web App for iPad
Current price: $13.99 Original price: $19.99 Discount: 30% off
5 hours left at this price!
Buy now
30-Day Money-Back Guarantee
This course includes
  • 2.5 hours on-demand video
  • 1 downloadable resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • NO APP STORES! Web Apps run form any web server
  • Capture a web experience into a Web App
  • Learn to work with CSS3 animations
  • Support standard and retina graphics
  • Make updates whenever you want
  • Incorporating HTML5 video for iPad
Course content
Expand all 33 lectures 02:42:24
+ – Introduction
5 lectures 07:58

Watch a demonstration of the final project we'll be creating, as well as a glimpse of the graphics, code, and animated explanations.

About this course
Preview 01:20

This lecture sets the expectations for the course, letting you know what to expect when you begin.

A few words before we begin
Preview 01:54

This course requires a text editor, or graphical web tool with access to the code, as well as a WebKit browser. Optional software and hardware include Adobe Photoshop, an iPad or an iPad Simulator.

Software you’ll need to follow along
Preview 02:14

The project files* contain native, sliced, Photoshop files, as well as a set of final graphics, a series of code snippets, and a copy of the fully completed final project.

*project files are attached to the next lecture, Starting Your Project

About the Project Files
Preview 01:43

To begin, there are a series of starter files in the project files* that we'll be adding to a new folder on your desktop.

*download the project files from the lecture

Starting your project
00:47
+ – Creating the Graphics
3 lectures 12:30

We'll be saving the graphics that will be used for the Web App icon, startup screens, and special messaging for detecting non-iPads and non-stand-alone users.

Creating the Web App-Specific graphics for iPad
Preview 06:19

Learn to modify SmartObjects in Photoshop and create multiple version of graphics for the home screen, our video poster, and a transparent content graphic.

Creating the content graphics
04:44

Create a series of product photos to use in the interactive gallery.

Creating the gallery images
01:27
+ – Setting up the HTML
5 lectures 19:58

The HTML and CSS provided in the code snippets work together to create the layout for our Web App. As we walk through the code snippets, this is end result of those snippets.

Examining the HTML and CSS strategy for the layout
Preview 03:24

The meta and link tags allow us to provide the iPad with Web App specific graphics, including detection for retina displays. We'll also be adding links to the CSS and JavaScript files, including jQuery and iScroll frameworks.

Setting up the meta tags and icon link
07:17

The outter-most HTML5 elements that will hold our content, and act as layout containers for our CSS to size and position.

Setting up the HTML containers
03:39

These HTML elements will contain the main page contents as well as a destination to load a Google map.

Adding container for iScroll and Google Map
02:30

Add anchor links to the nav element, and a copyright statement in the footer.

Add navigation links and copyright
03:08
+ – Add Style and Layout For Homepage and Navigation
3 lectures 25:08

We'll add a series of CSS rules for the layout and text styles, and apply some specific rules for landscape and portrait orientations.

Add CSS rules for style and layout
14:23

Here we'll use CSS3 transforms to position elements on the home page of the Web App. Two sets of rules will allow for positioning elements for both landscape and portrait orientations.

Add homepage positioning and animation for elements
06:23

Redefine the CSS display type for anchor links and make use of the icon sprite sheet we created for the for the navigation.

Style the navigation links and copyright
04:22
+ – Adding the JavaScript and (jQuery)
7 lectures 48:55

We'll use standard JavaScript to detect the browser size, and change the classes of the Web App to reflect the devices orientation.

Detecting the orientation of the iPad
09:37

This is a crucial piece to the user experience. Content must be loaded into your via AJAX to keep the user within your Web App. Links that go directly to a URL will switch your user to Mobile Safari on the iPad.

Loading page contents with AJAX
14:34

When we load a page, we'll detect if the home page is targeted, and if so, we'll add a "home" class to the main page container.

Detecting the home page
04:18

When we load a page, we'll detect if the contact us page is targeted, and if so, we'll add an "on" class to the map container.

Detecting the contact us page
06:06

When the Web App loads, we'll automatically trigger, or click, the first navigation link.

Setting and loading a default page on load
05:26

The code snippets contain code from Google's developer site for injecting a map into an HTML container. We'll also explore Google maps to find a location and get the latitude and longitude coordinates necessary to load a map location.

Initializing Google Maps
Preview 04:11

The iScroll plug-in provides an enhanced user experience for touch devices, and can be activated with a few lines of code.

Activating iScroll
04:43
+ – Adding Content for the Gallery and Video Pages
5 lectures 29:59

Much like the main Web App containers, the gallery need some HTML containers to create the layout within the content area.

Adding HTML for the gallery
04:40

These CSS rules will size and position the gallery HTML containers to recreate a layout for both landscape and portrait orientations.

Adding CSS rules for the gallery
04:49

Using jQuery, we'll assign click events to the gallery thumbnails in order to get the image and caption information. Then we can provide that information back to the user in the detail container.

Activating the gallery thumbnails
10:17

In the video page we'll add an HTML5, with a poster graphic, as well as positioning a graphic within the content.

Adding a graphic and video
04:57

Using CSS3 we'll detect the pixel ratio to determine if the user's screen is a hi-definition (retina) screen or not. If they are on a hi-definition screen, we'll switch the graphics to the larger ones.

Detecting and replacing graphics for Retina displays
05:16
+ – Detecting iPads and Stand Alone Status
3 lectures 14:55

Using JavaScript, we'll detect the user agent, and if it is not an iPad, we'll use our non-iPad graphic message.

Detecting an iPad
Preview 06:43

If the user is on an iPad, but has not saved it to their home screen, we'll use our add to home screen graphic message.

Detecting the stand-alone status
03:32

Using CSS and JavaScript, we'll disable user-seelctable items, lock the page background, and dramatically speed up the user experience with touch events.

Replacing click events and disabling selections
04:40
+ – Where To Go From Here.
2 lectures 03:01

Now that we've created a compelling user experience leveraging standard web technologies, learn about other directions you may want to explore with this new approach to interactive development on the iPad.

Where to go from hre
Preview 01:51

Google has recently announced plans for a similar "add to home screen" functionality for Android. Learn where you can get more information.

Considering Web Apps for Android
Preview 01:10
Requirements
  • Text Editor
  • Web-kit Browser
Description

This course will teach you to use standard web technologies to create an engaging, interactive user experience on the iPad.

We'll be creating an eSales Aid in the course, which is a popular use for sharing information about a company or product on tablet devices. However, the possibilities of this approach are limitless. Use standard web technologies to create interactive books, catalogs, or any interactive project you can imagine. If you can create it on the web, you can create it in a Web App.

And the best part is... no app stores!

Web Apps run from any web server, and are actually web sites themselves. The main difference is in the way they load information, and define behaviors. We'll cover creating custom icons and startup screens, optimizing the user experience for touch events, and using CSS3 hardware accelerated features for smooth animations.

What to expect in the course

In the course we'll start by creating web graphics with Photoshop, for both standard and retina screens. There is also a "skip Photoshop" folder as well, in case you want to bypass working in Photoshop. We'll also be using CSS3 to detect hi-definition displays (retina screens), as well as using CSS3 transform properties to position out HTML elements across the iPad screen.

The main focus of the course is the functionality needed for create an engaging user experience, which consists of JavaScript, as well as supporting HTML and graphics specific for the iPad interface. This course will teach you to code the core functionality of the Web App, while supplying plenty of code snippets to relieve you from any repetitive typing. Watch the first 4 videos in Lesson 1, they are all FREE, and provide an overview of the expectations, software, and final product we'll be creating.

The project files provided in this course include a copy of the fully completed final project. Use these files to track your progress, correct any errors you may be having, or more importantly, adapt the project into your own interactive Web Apps.

Who this course is for:
  • Designers
  • Web Designers
  • Web Developers