b.y.o.l.: building jquery mobile apps in dreamweaver jeff batt elearning brothers product...
TRANSCRIPT
![Page 1: B.Y.O.L.: Building jQuery Mobile Apps in DreamWeaver Jeff Batt eLearning Brothers Product Development Manager](https://reader035.vdocument.in/reader035/viewer/2022081513/56649ea35503460f94ba750c/html5/thumbnails/1.jpg)
B.Y.O.L.: Building jQuery Mobile Apps in DreamWeaver
Jeff BatteLearning Brothers
Product Development Manager
![Page 2: B.Y.O.L.: Building jQuery Mobile Apps in DreamWeaver Jeff Batt eLearning Brothers Product Development Manager](https://reader035.vdocument.in/reader035/viewer/2022081513/56649ea35503460f94ba750c/html5/thumbnails/2.jpg)
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
![Page 3: B.Y.O.L.: Building jQuery Mobile Apps in DreamWeaver Jeff Batt eLearning Brothers Product Development Manager](https://reader035.vdocument.in/reader035/viewer/2022081513/56649ea35503460f94ba750c/html5/thumbnails/3.jpg)
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)
![Page 5: B.Y.O.L.: Building jQuery Mobile Apps in DreamWeaver Jeff Batt eLearning Brothers Product Development Manager](https://reader035.vdocument.in/reader035/viewer/2022081513/56649ea35503460f94ba750c/html5/thumbnails/5.jpg)
• 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
![Page 6: B.Y.O.L.: Building jQuery Mobile Apps in DreamWeaver Jeff Batt eLearning Brothers Product Development Manager](https://reader035.vdocument.in/reader035/viewer/2022081513/56649ea35503460f94ba750c/html5/thumbnails/6.jpg)
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
![Page 7: B.Y.O.L.: Building jQuery Mobile Apps in DreamWeaver Jeff Batt eLearning Brothers Product Development Manager](https://reader035.vdocument.in/reader035/viewer/2022081513/56649ea35503460f94ba750c/html5/thumbnails/7.jpg)
If you started with an HTML5 type you may need to add this line of code in your <head> tags.
<meta name="viewport" content="width=device-width, initial-scale=1">
Fix for DreamWeaver & jQuery Mobile
![Page 8: B.Y.O.L.: Building jQuery Mobile Apps in DreamWeaver Jeff Batt eLearning Brothers Product Development Manager](https://reader035.vdocument.in/reader035/viewer/2022081513/56649ea35503460f94ba750c/html5/thumbnails/8.jpg)
Keep in mind that HTML is a mark up language so you write your text and mark itup with different tags.
<p>My paragraph text goes in this area</p><h1>My page heading will go here</h1> My page heading will go here
My paragraph text goes in this area
<div><h1>My page heading will go here</h1><p>My paragraph text goes in this area</p> </div>
My page heading will go hereMy paragraph text goes in this area
A <div> is a invisible
bounding area
<div attributeSample=”AttributeGoesHere”><h1>My page heading will go here</h1><p>My paragraph text goes in this area</p> </div>
This allows you to define different elements about the <div> orany other tag that may have an attribute.
HTML - Hype Text Markup Language
![Page 9: B.Y.O.L.: Building jQuery Mobile Apps in DreamWeaver Jeff Batt eLearning Brothers Product Development Manager](https://reader035.vdocument.in/reader035/viewer/2022081513/56649ea35503460f94ba750c/html5/thumbnails/9.jpg)
Starting Project Code
![Page 10: B.Y.O.L.: Building jQuery Mobile Apps in DreamWeaver Jeff Batt eLearning Brothers Product Development Manager](https://reader035.vdocument.in/reader035/viewer/2022081513/56649ea35503460f94ba750c/html5/thumbnails/10.jpg)
Creating a Page
![Page 11: B.Y.O.L.: Building jQuery Mobile Apps in DreamWeaver Jeff Batt eLearning Brothers Product Development Manager](https://reader035.vdocument.in/reader035/viewer/2022081513/56649ea35503460f94ba750c/html5/thumbnails/11.jpg)
Buttons
![Page 12: B.Y.O.L.: Building jQuery Mobile Apps in DreamWeaver Jeff Batt eLearning Brothers Product Development Manager](https://reader035.vdocument.in/reader035/viewer/2022081513/56649ea35503460f94ba750c/html5/thumbnails/12.jpg)
Creating a List
![Page 13: B.Y.O.L.: Building jQuery Mobile Apps in DreamWeaver Jeff Batt eLearning Brothers Product Development Manager](https://reader035.vdocument.in/reader035/viewer/2022081513/56649ea35503460f94ba750c/html5/thumbnails/13.jpg)
Creating a Grid
![Page 14: B.Y.O.L.: Building jQuery Mobile Apps in DreamWeaver Jeff Batt eLearning Brothers Product Development Manager](https://reader035.vdocument.in/reader035/viewer/2022081513/56649ea35503460f94ba750c/html5/thumbnails/14.jpg)
Collapsable Blocks
![Page 15: B.Y.O.L.: Building jQuery Mobile Apps in DreamWeaver Jeff Batt eLearning Brothers Product Development Manager](https://reader035.vdocument.in/reader035/viewer/2022081513/56649ea35503460f94ba750c/html5/thumbnails/15.jpg)
Reveal Panels
![Page 16: B.Y.O.L.: Building jQuery Mobile Apps in DreamWeaver Jeff Batt eLearning Brothers Product Development Manager](https://reader035.vdocument.in/reader035/viewer/2022081513/56649ea35503460f94ba750c/html5/thumbnails/16.jpg)
Images
![Page 17: B.Y.O.L.: Building jQuery Mobile Apps in DreamWeaver Jeff Batt eLearning Brothers Product Development Manager](https://reader035.vdocument.in/reader035/viewer/2022081513/56649ea35503460f94ba750c/html5/thumbnails/17.jpg)
Audio
![Page 18: B.Y.O.L.: Building jQuery Mobile Apps in DreamWeaver Jeff Batt eLearning Brothers Product Development Manager](https://reader035.vdocument.in/reader035/viewer/2022081513/56649ea35503460f94ba750c/html5/thumbnails/18.jpg)
Video
![Page 19: B.Y.O.L.: Building jQuery Mobile Apps in DreamWeaver Jeff Batt eLearning Brothers Product Development Manager](https://reader035.vdocument.in/reader035/viewer/2022081513/56649ea35503460f94ba750c/html5/thumbnails/19.jpg)
Navbars
![Page 20: B.Y.O.L.: Building jQuery Mobile Apps in DreamWeaver Jeff Batt eLearning Brothers Product Development Manager](https://reader035.vdocument.in/reader035/viewer/2022081513/56649ea35503460f94ba750c/html5/thumbnails/20.jpg)
Adobe Edge Animation
![Page 21: B.Y.O.L.: Building jQuery Mobile Apps in DreamWeaver Jeff Batt eLearning Brothers Product Development Manager](https://reader035.vdocument.in/reader035/viewer/2022081513/56649ea35503460f94ba750c/html5/thumbnails/21.jpg)
iFrame
![Page 22: B.Y.O.L.: Building jQuery Mobile Apps in DreamWeaver Jeff Batt eLearning Brothers Product Development Manager](https://reader035.vdocument.in/reader035/viewer/2022081513/56649ea35503460f94ba750c/html5/thumbnails/22.jpg)
Forms
![Page 23: B.Y.O.L.: Building jQuery Mobile Apps in DreamWeaver Jeff Batt eLearning Brothers Product Development Manager](https://reader035.vdocument.in/reader035/viewer/2022081513/56649ea35503460f94ba750c/html5/thumbnails/23.jpg)
Tap / Swipe Events