mobile web design with adobe dreamweaver cs5 5 n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Mobile Web Design with Adobe® Dreamweaver CS5.5 PowerPoint Presentation
Download Presentation
Mobile Web Design with Adobe® Dreamweaver CS5.5

Loading in 2 Seconds...

play fullscreen
1 / 18

Mobile Web Design with Adobe® Dreamweaver CS5.5 - PowerPoint PPT Presentation


  • 170 Views
  • Uploaded on

Mobile Web Design with Adobe® Dreamweaver CS5.5. Presented by: Jonathan Meersman Course Technology Conference San Antonio, Texas March 9, 2012. Session Agenda. What is Adobe ® Dreamweaver? Why Design for the Mobile Web? Dreamweaver CS5.5’s Mobile Features Enhanced Multiscreen Preview

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Mobile Web Design with Adobe® Dreamweaver CS5.5' - wayne


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
mobile web design with adobe dreamweaver cs5 5

Mobile Web Designwith Adobe® Dreamweaver CS5.5

Presented by: Jonathan Meersman

Course Technology Conference

San Antonio, Texas

March 9, 2012

session agenda
Session Agenda
  • What is Adobe®Dreamweaver?
  • Why Design for the Mobile Web?
  • Dreamweaver CS5.5’s Mobile Features
    • Enhanced Multiscreen Preview
    • Media Queries for Responsive Design
    • jQuery Mobile Framework
    • PhoneGap to Create Native Apps
  • Live Demonstration
  • Mobile Curriculum at MATC
presenter background
Presenter Background
  • Jonathan Meersman
    • Current Industry Employment
      • Milwaukee Area Technical College – Web Design Faculty
      • eBusiness Consultant
    • Previous Industry Experience
      • HostingSpot.com – Founder & Past President
      • General Electric – eLead Systems Designer
      • Milwaukee Kickers Soccer Club – Multimedia Coordinator
    • Education
      • MBA in eBusiness
      • BA in Geography (focus: Computer Cartography)
what is adobe dreamweaver
What is Adobe®Dreamweaver?
  • What is Dreamweaver?
    • Industry-leading web development tool
    • MAC and Windows versions
    • Built-in FTP/SFTP client
    • Supports HTML5, CSS3, ASP, PHP, XML, jQuery Mobile, JavaScript, Ajax, ColdFusion, etc.
    • New features support mobile web and app design
what is adobe dreamweaver1
What is Adobe®Dreamweaver?
  • History of Dreamweaver
    • 1997 – Developed by Allaire Systems
    • 2001 – Macromedia acquired Allaire
    • 2005 – Macromedia Dreamweaver 8 - 9/05
    • 2007 – Adobe Dreamweaver 9 (CS3) - 4/07
    • 2008 – Adobe Dreamweaver 10 (CS4) - 10/08
    • 2010 – Adobe Dreamweaver 11 (CS5) - 04/10
    • 2011 – Adobe Dreamweaver 11.5 (CS5.5) - 04/11
  • What will the future hold?
why design for the mobile web1
Why Design for the Mobile Web?
  • Mobile Internet Explosion
    • According to Morgan Stanley:
      • Number of smartphones & tablets sold exceeded total PCs in 2010
      • Mobile Internet is ramping faster than desktop Internet did - more users may connect to the Internet via mobile devices than desktop PCs by 2014 2012
      • Internet users reached 1 billion in 2005, but mobile Internet is at 10+ billion
why design for the mobile web2
Why Design for the Mobile Web?
  • Mobile Internet Explosion
    • According to Nielsen:
      • 44% of U.S. mobile subscribers now own a smartphone, up from 18% just two years ago
      • The majority of smartphone owners (62%) have downloaded apps
      • 83% of all smartphone app downloaders use Android or iPhone
why design for the mobile web3
Why Design for the Mobile Web?
  • Mobile Internet Explosion
    • According to IT job site Dice.com, job postings for:
      • Android developers rose 302% in Q1 of 2011 versus Q1 of 2010
      • iPhone-related positions rose 220% in Q1 of 2011 versus Q1 of 2010
enhanced multiscreen preview
Enhanced Multiscreen Preview
  • Simultaneously view three different customizable screen sizes
  • Run your code in real time
  • Quickly and easily preview your designs for smartphones, tablets, and PC screens
  • Helps create CSS media queries and display separate style sheets for each device
media queries for responsive design
Media Queries for Responsive Design
  • Media queries let you target your designs for multiple devices by specifying a different CSS file for each device
  • Dreamweaver’s Media Queries dialog box allows you to attach or create multiple CSS files for different screen sizes
jquery mobile framework
jQuery Mobile Framework
  • Allows rapid development and design of a mobile-specific interface with minimal hassle
  • Integrated jQuery code hinting and starter layouts for many different types of mobile devices
phonegap to create native apps
PhoneGap to Create Native Apps
  • Use existing web development skills, assets, and resources without learning a new model
  • Build native Android and iOS apps directly from Dreamweaver CS5.5 projects
  • Write mobile apps using standards-based code, such as HTML, CSS, and JavaScript
  • Add device-specific functionality, such as multi-touch, geolocation, and accelerometer
live dreamweaver demonstration
Live Dreamweaver Demonstration
  • Let’s explore some of the great new features…
mobile curriculum at matc
Mobile Curriculum at MATC
  • New Classes
    • Mobile Web Development
    • iPhone App Development
    • Android App Development
    • Advanced Mobile Development
  • New Programs
    • Mobile App Designer Technical Diploma
    • Mobile App Designer A.A.S. Degree
slide16
Q & A
  • Time for Questions
presenter contact information
Presenter Contact Information
  • Jonathan Meersman

Site: JonathanMeersman.com

Facebook: facebook.com/jonathanmeersman

LinkedIn: linkedin.com/in/jonathanmeersman

Twitter: twitter.com/meersman

Email: Jonathan@JonathanMeersman.com

resources
Resources
  • tv.adobe.com/watch/cs-55-web-premium-feature-tour-/dreamweaver-cs-55-jquery-mobile-pages/
  • tv.adobe.com/watch/cs-55-web-premium-feature-tour-/dreamweaver-cs-55-jquery-mobile/
  • tv.adobe.com/watch/cs-55-web-premium-feature-tour-/dreamweaver-cs-55-native-mobile-applications/
  • tv.adobe.com/watch/cs-55-web-premium-feature-tour-/dreamweaver-cs-55-multiscreen-authoring/
  • tv.adobe.com/watch/cs-55-web-premium-feature-tour-/dreamweaver-cs-55-building-a-native-mobile-application/
  • tv.adobe.com/watch/cs-55-web-premium-feature-tour-/dreamweaver-cs-55-creating-a-native-mobile-application/
  • www.adobe.com/devnet/dreamweaver/articles/dw_html5_pt3.html
  • www.adobe.com/aboutadobe/pressroom/pressmaterials/pdfs/cs55_dreamweaver_whatsnew.pdf
  • foundationphp.com/dwmobile/