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

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

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 (

Files to download: TBA Download Files

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

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

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

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

Starting Project Code

Creating a Page

Buttons

Creating a List

Creating a Grid

Collapsable Blocks

Reveal Panels

Images

Audio

Video

Navbars

Adobe Edge Animation

iFrame

Forms

Tap / Swipe Events