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
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
- Lecture 1.2 Lecture 2:A few words before we begin Locked
- Lecture 1.3 Lecture 3:Software you’ll need to follow along Locked
- Lecture 1.4 Lecture 4:About the Project Files Locked
- Lecture 1.5 Lecture 5:Starting your project Locked
-
Section 2: Creating the Graphics
- Lecture 2.1 Lecture 6:Creating the Web App-Specific graphics for iPad Locked
- Lecture 2.2 Lecture 7:Creating the content graphics Locked
- Lecture 2.3 Lecture 8:Creating the gallery images Locked
-
Section 3: Setting up the HTML
- Lecture 3.1 Lecture 9:Examining the HTML and CSS strategy for the layout Locked
- Lecture 3.2 Lecture 10:Setting up the meta tags and icon link Locked
- Lecture 3.3 Lecture 11:Setting up the HTML containers Locked
- Lecture 3.4 Lecture 12:Adding container for iScroll and Google Map Locked
- Lecture 3.5 Lecture 13:Add navigation links and copyright Locked
-
Section 4: Add Style and Layout For Homepage and Navigation
- Lecture 4.1 Lecture 14:Add CSS rules for style and layout Locked
- Lecture 4.2 Lecture 15:Add homepage positioning and animation for elements Locked
- Lecture 4.3 Lecture 16:Style the navigation links and copyright Locked
-
Section 5: Adding the JavaScript and (jQuery)
- Lecture 5.1 Lecture 17:Detecting the orientation of the iPad Locked
- Lecture 5.2 Lecture 18:Loading page contents with AJAX Locked
- Lecture 5.3 Lecture 19:Detecting the home page Locked
- Lecture 5.4 Lecture 20:Detecting the contact us page Locked
- Lecture 5.5 Lecture 21:Setting and loading a default page on load Locked
- Lecture 5.6 Lecture 22:Initializing Google Maps Locked
- Lecture 5.7 Lecture 23:Activating iScroll Locked
-
Section 6: Adding Content for the Gallery and Video Pages
- Lecture 6.1 Lecture 24:Adding HTML for the gallery Locked
- Lecture 6.2 Lecture 25:Adding CSS rules for the gallery Locked
- Lecture 6.3 Lecture 26:Activating the gallery thumbnails Locked
- Lecture 6.4 Lecture 27:Adding a graphic and video Locked
- Lecture 6.5 Lecture 28:Detecting and replacing graphics for Retina displays Locked
-
Section 7: Detecting iPads and Stand Alone Status
- Lecture 7.1 Lecture 29:Detecting an iPad Preview Locked
- Lecture 7.2 Lecture 30:Detecting the stand-alone status Locked
- Lecture 7.3 Lecture 31:Replacing click events and disabling selections Locked
-
Section 8: Where To Go From Here.
- Lecture 8.1 Lecture 32:Where to go from hre Locked
- Lecture 8.2 Lecture 33:Considering Web Apps for Android Locked
