Creating a Web App for iPad

(0 review)
Creating a Web App for iPad

About This Course

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.

What are the requirements?

  • Text Editor
  • Web-kit Browser

What am I going to get from this course?

  • 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

What is the target audience?

  • Designers
  • Web Designers
  • Web Developers

Course Staff

Chris Converse

Chris Converse

Designer and Developer at Codify Design Studio

Chris has over 22 years experience in graphic design and interactive media, with a unique focus on both design and development. Chris possesses development skills across such languages as HTML, CSS, JavaScript (including jQuery and AngulatJS), and PHP, making his design execution optimal across various media. In addition to designing and teaching online, Chris speaks at number of industry-related conferences, including HOW Design, Adobe MAX, Adobe ADIM, AIGA, and the Creative Publishing Network.

Frequently Asked Questions

What web browser should I use?

The EnlightMe platform works best with current versions of Chrome, Firefox or Safari, or with Internet Explorer version 9 and above.

Course Features

  • Lectures 33
  • Quizzes 0
  • Duration 4 Hours/Week
  • Skill level
  • Language English
  • Students 651
  • Certificate No
  • Assessments Self
  • Section 1: Introduction

    • Lecture 1.1 Lecture 1:About this course Locked 0m
    • Lecture 1.2 Lecture 2:A few words before we begin Locked 0m
    • Lecture 1.3 Lecture 3:Software you’ll need to follow along Locked 0m
    • Lecture 1.4 Lecture 4:About the Project Files Locked 0m
    • Lecture 1.5 Lecture 5:Starting your project Locked 0m
  • Section 2: Creating the Graphics

    • Lecture 2.1 Lecture 6:Creating the Web App-Specific graphics for iPad Locked 0m
    • Lecture 2.2 Lecture 7:Creating the content graphics Locked 0m
    • Lecture 2.3 Lecture 8:Creating the gallery images Locked 0m
  • Section 3: Setting up the HTML

    • Lecture 3.1 Lecture 9:Examining the HTML and CSS strategy for the layout Locked 0m
    • Lecture 3.2 Lecture 10:Setting up the meta tags and icon link Locked 0m
    • Lecture 3.3 Lecture 11:Setting up the HTML containers Locked 0m
    • Lecture 3.4 Lecture 12:Adding container for iScroll and Google Map Locked 0m
    • Lecture 3.5 Lecture 13:Add navigation links and copyright Locked 0m
  • Section 4: Add Style and Layout For Homepage and Navigation

    • Lecture 4.1 Lecture 14:Add CSS rules for style and layout Locked 0m
    • Lecture 4.2 Lecture 15:Add homepage positioning and animation for elements Locked 0m
    • Lecture 4.3 Lecture 16:Style the navigation links and copyright Locked 0m
  • Section 5: Adding the JavaScript and (jQuery)

    • Lecture 5.1 Lecture 17:Detecting the orientation of the iPad Locked 0m
    • Lecture 5.2 Lecture 18:Loading page contents with AJAX Locked 0m
    • Lecture 5.3 Lecture 19:Detecting the home page Locked 0m
    • Lecture 5.4 Lecture 20:Detecting the contact us page Locked 0m
    • Lecture 5.5 Lecture 21:Setting and loading a default page on load Locked 0m
    • Lecture 5.6 Lecture 22:Initializing Google Maps Locked 0m
    • Lecture 5.7 Lecture 23:Activating iScroll Locked 0m
  • Section 6: Adding Content for the Gallery and Video Pages

    • Lecture 6.1 Lecture 24:Adding HTML for the gallery Locked 0m
    • Lecture 6.2 Lecture 25:Adding CSS rules for the gallery Locked 0m
    • Lecture 6.3 Lecture 26:Activating the gallery thumbnails Locked 0m
    • Lecture 6.4 Lecture 27:Adding a graphic and video Locked 0m
    • Lecture 6.5 Lecture 28:Detecting and replacing graphics for Retina displays Locked 0m
  • Section 7: Detecting iPads and Stand Alone Status

    • Lecture 7.1 Lecture 29:Detecting an iPad Preview Locked 0m
    • Lecture 7.2 Lecture 30:Detecting the stand-alone status Locked 0m
    • Lecture 7.3 Lecture 31:Replacing click events and disabling selections Locked 0m
  • Section 8: Where To Go From Here.

    • Lecture 8.1 Lecture 32:Where to go from hre Locked 0m
    • Lecture 8.2 Lecture 33:Considering Web Apps for Android Locked 0m
Chris Converse
Chris Converse

Designer and Developer at Codify Design Studio

Chris has over 22 years experience in graphic design and interactive media, with a unique focus on both design and development. Chris possesses development skills across such languages as HTML, CSS, JavaScript (including jQuery and AngulatJS), and PHP, making his design execution optimal across various media. In addition to designing and teaching online, Chris speaks at number of industry-related conferences, including HOW Design, Adobe MAX, Adobe ADIM, AIGA, and the Creative Publishing Network.

Reviews

Average Rating

0
0 rating

Detailed Rating

5 stars
0
4 stars
0
3 stars
0
2 stars
0
1 stars
0