Join Chris Converse for an in-depth discussion in this video Previewing the final project, part of Create an iPad Web App.
- View Offline
What the web environment does is it gives us almost control of the entire screen, with the exception of just the status bar across the top. Now another advantage of the web app is we get all of the features inside of Mobile Safari. So one feature that's really nice is if I rotate the device, we can see that the teapots actually changed their position from landscape to portrait. And you will notice how smooth the animation is. We can actually take advantage of hardware acceleration through CSS3 and CSS3 animations for the iPad. In addition, if I come down to the navigation and tap on different links, such as video here, we can dynamically load content into our web app as well. So as we go through different pages, we can load the content in and stay within our web app environment. Here we are on the video page; we have a video embedded in the page as well. Let me come in here and tap on the video. This video will start to play. While it's playing, I can use my fingers and stretch the video out to full screen or come in here and pinch it back down.
Another feature of the video player on the iPad is that we can play video in line, so the video can play right in the web page along with the rest of the design elements. Next, we will move over to the Gallery. We are going to create an interactive gallery in this course as well. So I can tap on the teapot thumbnails and see a large image and a caption. So lastly, on the Contact Us page, we are going to be adding the ability to have subscrolling. So I can actually scroll just a portion of the page where the rest of the page stays static. And we are also going to be using Google's Map API, which in this case is touch-enabled, so the map will actually behave differently on a touch device than it does on our computer.
So I can come in here with my fingers and tap and zoom into the map. I can switch between satellite and regular map view. I can even tap on the street view icon and drag this little guy down onto a street and go into street view. So if I tap with my fingers and move around, I can navigate through street view with my fingers. So I hope this course sounds interesting to you, and if so, let's get started.
- Setting up the project folders
- Creating the graphics
- Adding HTML
- Creating the layout containers
- 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