Author
Released
6/11/2012- Setting up the project folders
- Creating the graphics
- Adding HTML
- Creating the layout containers
- Setting up JavaScript orientation detection
- Adding CSS for layout
- Using CSS3 animation
- Dynamically loading HTML with AJAX
- Adding iScroll functionality
- Adding video
- Adding a Google map
- Detecting an iPad device
Skill Level Beginner
Duration
Views
- [Voiceover] Hi, I'm Chris Converse, and welcome to Create an iPad Web App. In this course, I'll show you how to use HTML, CSS, and JavaScript to create a website that launches and acts like a native iPad app. First, I'll show you how to design a custom icon and startup screen, and animate graphics using hardware acceleration with CSS3 that react to the iPad's orientation. Then, I'll explain how to dynamically load content with Ajax to keep our user experience within the web app. Next, I'll walk you through building out features of the web app, from adding a simple gallery, to incorporating HML5 video, to adding a touch-enabled Google map.
Finally, I'll show you how to set up web browser detection and stand-alone detection to instruct iPad users to save your web app to their home screen. We'll cover all of this and plenty of other tips and techniques. Now, let's get started with Create an iPad Web App.
Related Courses
-
Edge Animate Essential Training
with Chris Converse4h 44m Beginner -
HTML Essential Training
with James Williamson5h 54m Beginner -
Git Essential Training
with Kevin Skoglund6h 25m Beginner
-
Introduction
-
Welcome52s
-
Previewing the final project2m 44s
-
Using the exercise files1m 30s
-
-
1. Setting Up Your Project
-
2. Adding the Graphics and HTML
-
Adding HTML for the web app1m 52s
-
3. Creating the Main Layout Containers
-
Adding CSS for the layout3m 25s
-
4. Adding Content Graphics
-
Adding the logo and leaves2m 41s
-
-
5. Dynamically Loading HTML with AJAX
-
Detecting the homepage4m 24s
-
6. Adding the Scroll Feature
-
Adding iScroll functionality3m 10s
-
-
7. Formatting Content and Media
-
Formatting content2m 33s
-
Adding video2m 35s
-
Activating the gallery3m 34s
-
-
8. Incorporating a Google Map
-
Activating the map3m 8s
-
Animating the map into place2m 33s
-
9. Setting Up Browser and Device Detection
-
Detecting an iPad3m 28s
-
-
Goodbye
-
Where to go from here1m 43s
-
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.
CancelTake notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Welcome