1 / 23

B.Y.O.L.: Building jQuery Mobile Apps in DreamWeaver

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)

hilel-bright
Download Presentation

B.Y.O.L.: Building jQuery Mobile Apps in DreamWeaver

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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. My Approach www.kinetic-media.com twitter.com/kineticmedia01 www.youtube.com/jeffbatt01 • 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)

  4. Download Files Files to download: TBA

  5. Agenda • Video/Audio • iFrame (Using other HTML) • Navbars • Mobile forms - How to create them • Touch Events • Taps • Swipes • 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

  6. Starting a Mobile Project in DW 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 3. Select More under the Create New section. Takes your new document settings 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

  7. Fix for DreamWeaver & jQuery Mobile 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">

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

  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

More Related