HTML5 Projects: Creating a Responsive Presentation is a course available on Lynda.com.
Description:
Follow along with author Justin Putney as he uses open technologies (HTML5, jQuery, and CSS) to create a dynamic presentation slideshow that responds to mobile and desktop layouts. Learn to customize the slideshow to fit your next project, and to display artwork, photography, and other kinds of content.
Discover how to structure the HTML and slide content; design the navigation to react to clicks, keyboard input, and swipe gestures; and use CSS to customize the slide display for different screens and animated transitions. Justin also includes a series of challenge-and-solution pairs to test your skills.
Then, when you’re ready, watch the HTML5 Projects: Creating an Advanced Responsive Presentation follow-up course to enhance your web presentation slides with audio, video, and an automatic playback feature.
Topics include:
- Structuring an HTML5 slideshow
- Creating the default slide appearance
- Using jQuery to display the current page
- Adding swipe gestures for mobile
- Creating a pause screen
- Translating your ideas into CSS
- Using media queries to adjust the layout
Don’t have a Lynda.com account? Get 30 days of free unlimited access to lynda.com.
Get updates from Ajar Productions
Sign up today and get the InDesign Split Text premium extension for free!
Hello,
I am interested in purchasing a standard license In5 to produce digital magazines. I would like to clarify some doubts.
With In5 and Baker can create the same app(digital magazine) for Ipads, Iphone and Android Tablets and Smartphones?
Is there any course that covers the topics addressed in In5?
Is possible to test the digital magazines (view in Ipad) in trial version?
I would appreciate if you could answer me.
I await a return
Thank you
I’m not sure about the status of theAndroid Baker project, but it’s worth a try.
You might want to also look into some other options like PhoneGap Build.
And yes, you can use the trial version of in5 to run tests. That’s what it’s there for. 😉
Is there a way to make the images in the presentation slide in instead of just appear?
Yes, same type of CSS for the transitions and hooking into the section.active class, e.g.:
img{
transition: all 1s ease-out .5s;
-moz-transition: all 1s ease-out .5s;
-webkit-transition: all 1s ease-out .5s;
-o-transition: all 1s ease-out .5s;
opacity:0;
transform:translateX(-50%);
-moz-transform:translateX(-50%);
-webkit-transform:translateX(-50%);
-o-transform:translateX(-50%);
}
section.active img{
opacity:1;
transform:translateX(0);
-moz-transform:translateX(0);
-webkit-transform:translateX(0);
-o-transform:translateX(0);
}
That works for Safari, but when I test in Firefox, it the images show up with the slide.
It may require some tweaks, but it works when I test it in Firefox v34.0 on the Mac.