1. B.Y.O.L.: Building jQuery Mobile Apps in DreamWeaver Jeff Batt eLearning Brothers Product Development Manager

2. Wo Am I? Worked for Rapid Intake - 6 years Worked for eLearning DevCon - 6 Years (Part of it as the Director of the Conferences) Currently Product Development Manager at eLearning Brothers (Started in Jan) Graduated at Utah Valley University in Digital Media - Emphasis in Web Development Passion for learning new tools Love teaching people about new technology

3. www.kinetic-media.com www.youtube.com/jeffbatt01 twitter.com/kineticmedia01 My Approach How to guy - Focus on how you use the tools I teach about Everyone is on a different level - I’m starting at the beginning Tutorials about everything will be found on my blog (www.kinetic-media.com)www.kinetic-media.com

4. Files to download: TBA Download Files

5. Start with a jQuery template in DW Creating pages Headers Content Footers Creating lists Text Descriptions Thumbnails and Icons Text Bubbles/Text Asides Grid layouts Collapsable Block/Sections Buttons Video/Audio iFrame (Using other HTML) Navbars Mobile forms - How to create them Touch Events Taps Swipes Agenda

6. 1. Must have DreamWeaver CS5.5 or CS6 You can still do some of this without it but DW makes everything soooo much easier 2. Open DreamWeaver CS5.5 or CS6 This is to start a new project 4. Select Page from Sample This allows you to start from a sample project 5. Select Mobile Starters This will take you to the mobile projects you can start from 6. Select jQuery Mobile (Local) Select that and then hit the Create button 3. Select More under the Create New section. Takes your new document settings Starting a Mobile Project in DW

7. If you started with an HTML5 type you may need to add this line of code in your tags. Fix for DreamWeaver & jQuery Mobile

8. Keep in mind that HTML is a mark up language so you write your text and mark it up with different tags. My paragraph text goes in this area My page heading will go here My paragraph text goes in this area My page heading will go here My paragraph text goes in this area My page heading will go here My paragraph text goes in this area A is a invisible bounding area My page heading will go here My paragraph text goes in this area This allows you to define different elements about the or any other tag that may have an attribute. HTML - Hype Text Markup Language

9. Starting Project Code

10. Creating a Page

11. Buttons

12. Creating a List

13. Creating a Grid

14. Collapsable Blocks

15. Reveal Panels

16. Images

17. Audio

18. Video

19. Navbars

20. Adobe Edge Animation

21. iFrame

22. Forms

23. Tap / Swipe Events