Embed Size (px)
Citation preview
B.Y.O.L.: Building jQuery Mobile Apps in DreamWeaver
Jeff BatteLearning 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
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)
• 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 <head> tags.
<meta name="viewport" content="width=device-width, initial-scale=1">
Fix for DreamWeaver & jQuery Mobile
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
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
