b.y.o.l.: building jquery mobile apps in dreamweaver
DESCRIPTION
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) - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: B.Y.O.L.: Building jQuery Mobile Apps in DreamWeaver](https://reader035.vdocument.in/reader035/viewer/2022062304/56812ac5550346895d8e9b36/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](https://reader035.vdocument.in/reader035/viewer/2022062304/56812ac5550346895d8e9b36/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](https://reader035.vdocument.in/reader035/viewer/2022062304/56812ac5550346895d8e9b36/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](https://reader035.vdocument.in/reader035/viewer/2022062304/56812ac5550346895d8e9b36/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](https://reader035.vdocument.in/reader035/viewer/2022062304/56812ac5550346895d8e9b36/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](https://reader035.vdocument.in/reader035/viewer/2022062304/56812ac5550346895d8e9b36/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](https://reader035.vdocument.in/reader035/viewer/2022062304/56812ac5550346895d8e9b36/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](https://reader035.vdocument.in/reader035/viewer/2022062304/56812ac5550346895d8e9b36/html5/thumbnails/9.jpg)
Starting Project Code
![Page 10: B.Y.O.L.: Building jQuery Mobile Apps in DreamWeaver](https://reader035.vdocument.in/reader035/viewer/2022062304/56812ac5550346895d8e9b36/html5/thumbnails/10.jpg)
Creating a Page
![Page 11: B.Y.O.L.: Building jQuery Mobile Apps in DreamWeaver](https://reader035.vdocument.in/reader035/viewer/2022062304/56812ac5550346895d8e9b36/html5/thumbnails/11.jpg)
Buttons
![Page 12: B.Y.O.L.: Building jQuery Mobile Apps in DreamWeaver](https://reader035.vdocument.in/reader035/viewer/2022062304/56812ac5550346895d8e9b36/html5/thumbnails/12.jpg)
Creating a List
![Page 13: B.Y.O.L.: Building jQuery Mobile Apps in DreamWeaver](https://reader035.vdocument.in/reader035/viewer/2022062304/56812ac5550346895d8e9b36/html5/thumbnails/13.jpg)
Creating a Grid
![Page 14: B.Y.O.L.: Building jQuery Mobile Apps in DreamWeaver](https://reader035.vdocument.in/reader035/viewer/2022062304/56812ac5550346895d8e9b36/html5/thumbnails/14.jpg)
Collapsable Blocks
![Page 15: B.Y.O.L.: Building jQuery Mobile Apps in DreamWeaver](https://reader035.vdocument.in/reader035/viewer/2022062304/56812ac5550346895d8e9b36/html5/thumbnails/15.jpg)
Reveal Panels
![Page 16: B.Y.O.L.: Building jQuery Mobile Apps in DreamWeaver](https://reader035.vdocument.in/reader035/viewer/2022062304/56812ac5550346895d8e9b36/html5/thumbnails/16.jpg)
Images
![Page 17: B.Y.O.L.: Building jQuery Mobile Apps in DreamWeaver](https://reader035.vdocument.in/reader035/viewer/2022062304/56812ac5550346895d8e9b36/html5/thumbnails/17.jpg)
Audio
![Page 18: B.Y.O.L.: Building jQuery Mobile Apps in DreamWeaver](https://reader035.vdocument.in/reader035/viewer/2022062304/56812ac5550346895d8e9b36/html5/thumbnails/18.jpg)
Video
![Page 19: B.Y.O.L.: Building jQuery Mobile Apps in DreamWeaver](https://reader035.vdocument.in/reader035/viewer/2022062304/56812ac5550346895d8e9b36/html5/thumbnails/19.jpg)
Navbars
![Page 20: B.Y.O.L.: Building jQuery Mobile Apps in DreamWeaver](https://reader035.vdocument.in/reader035/viewer/2022062304/56812ac5550346895d8e9b36/html5/thumbnails/20.jpg)
Adobe Edge Animation
![Page 21: B.Y.O.L.: Building jQuery Mobile Apps in DreamWeaver](https://reader035.vdocument.in/reader035/viewer/2022062304/56812ac5550346895d8e9b36/html5/thumbnails/21.jpg)
iFrame
![Page 22: B.Y.O.L.: Building jQuery Mobile Apps in DreamWeaver](https://reader035.vdocument.in/reader035/viewer/2022062304/56812ac5550346895d8e9b36/html5/thumbnails/22.jpg)
Forms
![Page 23: B.Y.O.L.: Building jQuery Mobile Apps in DreamWeaver](https://reader035.vdocument.in/reader035/viewer/2022062304/56812ac5550346895d8e9b36/html5/thumbnails/23.jpg)
Tap / Swipe Events