Wud creating mobile apps - public

Click here to load reader

  • date post

    22-Feb-2017
  • Category

    Education

  • view

    8
  • download

    1

Embed Size (px)

Transcript of Wud creating mobile apps - public

  • Tell me about you

    What type of phone do you have? 517-xxx-xxxx 1 Non-Smart Phone 2 iPhone / iPod / iPad 3 Android 4 Blackberry 5 Windows Mobile or other

    Have you ever developed a mobile application?517-xxx-xxxx 1 Yes 2 No

  • About me

    Work for MSU in the Telecommunication Systems Department.

    Run the Michigan Flex Users Group Adobe Community Professional

    517-xxx-xxxx 517-xxx-xxxx

  • Mobile Devices

    Mobile and Portable Devices are the wave of the future. 4.6 BILLION cellular subscriptions worldwide

    3.5+ Billion are capable of text messaging 257 Million data plan holders within the USA (over 1

    Billion expected worldwide)

    There is significant face time with mobile applications and dollars and interest associated with them.

  • Competing Forces

    Unfortunately, up to now the mobile market was very costly and difficult to work with Each browser on mobile devices is different. Some

    dont even support basic JavaScript! Less than 30% of smart phones support ANY aspect

    of HTML 5 Many phones dont even support HTML! Some rely

    on an aged system called WAP. Native applications were always specific to each

    platform

  • Competing Forces Additionally, when

    working with mobile devices, most people EXPECT there to be an app They are no longer

    searching the web, they are searching for apps.

  • Mobile Devices

    Fragmentation of the mobile device space for native apps Android

    Native Android Code, Flash/Flash Lite, JavaScript Apple

    Native Apple Code, JavaScript, HTML5 RIM

    Java Applications, Native RIM Windows Mobile

    Windows CE Compiled Native Apps / Silverlight

  • Mobile Devices

    Fragmentation of the mobile device space for native apps Android AIR Compatible Today

    Native Android Code, Flash/Flash Lite, JavaScript Apple AIR Compatible Today

    Native Apple Code, JavaScript, HTML5 RIM AIR Compatible Soon

    Java Applications, Native RIM Windows Mobile AIR Compatible Soon

    Windows CE Compiled Native Apps / Silverlight

  • The Adobe Integrated Runtime Adobe has published an application framework

    that allows developers to create applications that run across all three screens Desktops (Windows / Mac / Linux) Mobile (Android / iOS / RIM / Windows Mobile) Televisions (Broadcom / TiVO / Motorola)

    AIR allows you to reuse your code to create apps over multiple platforms **

    The tool are available today. As more devices support AIR, you can quickly compile to them!

  • The Adobe Integrated Runtime

    The AIR toolsets will never be as powerful as an application targeted specifically for one device. However, for 90% of the applications out there

    today it is an excellent choice.

    For example, PopCap games (the makers of Plants vs. Zombies and Bejeweled) spends nearly one person for a full year porting each of their games from one platform to another

  • Writing an app We will be writing a

    quick app that shows one of many workflows you can use to develop Mobile apps based on the AIR framework.

    We will be writing a campus directory app for MSU

  • A few caveats We will not dealing with best practices in

    optimizing mobile apps for speed. We will cover some tips and tricks in creating mobile

    apps at the end of the presentation The final application will not be screen-reader

    compatible. There are techniques that can be done during the

    programming phase that can enable that. We will be targeting one screen size, in one

    orientation. I will mention during the demo how to target more than one screen size.

  • Our Demo Workflow

    Adobe Device Central

    Adobe Illustrator / Photoshop

    Adobe Flash Catalyst

    Adobe Flash Builder / Professional

    AIR Application on Device

  • The Adobe Toolset

    Device Central Allows you to simulate applications (and Flash SWFs) on devices. Also creates templates for new documents to be created

    Flash Catalyst Allows you to take Photoshop or Illustrator files and make them interactive for prototypes. Prototypes can then be given to a developer to convert to a working application.

  • The Adobe Toolset

    Flash Builder The IDE that developers use to code backend of the prototype to make the application function. Developers use ActionScript to make their applications.

  • DEVICE CENTRAL AND PHOTOSHOPExploring creating an application starting with

  • Key Points with Photoshop Separate each of your

    functional components into their own layers & folders

    Be careful with labels and fonts! Custom fonts look nice,

    but they are BIG Avoid rasterizing

    labels/fonts! This will break accessibility!

  • ADOBE CATALYSTWorking with our existing Photoshop design in

  • Key Points with Catalyst

    Convert each item you want to be active into that item by clicking on it, then the HUD.

    Convert Scroll Bars first, then work forward from there.

    Run by doing anALT - ENTER

  • ADOBE FLASH BUILDERMaking your application live with

  • Key Points with Flash Builder

    Everything you can do in Flash Builder, you can do in Flash Professional, if you dont have a coder available

  • Key Points with Flash Builder

    Flash Builder 4.0 (available today) can build Android and iOS apps, but you will need to run a few command line to deploy them to the phone. Flash Builder Burrito is available as a beta today

    and includes this workflow. iOS deployment still needs the command-line if you

    are not on the Mac OSX.

  • Tips and Tricks building Mobile apps Mobile apps cant make

    the user think about what to do.

    Simplicity is key when designing apps. There is not a lot of room

    for stuff on the screen. There is often not much

    time to communicate with the user.

  • Tips and Tricks building Mobile apps Make your buttons and

    other UI elements BIG. People have big fingers and often are not accurate at hitting things.

    Make text BIG. 21 point font is the smallest you should go the bigger the better!

  • Tips and Tricks building Mobile apps Dont think in terms of

    clicks and drags. When people interact with mobile devices they interact with apps different! Swipe Pinch and Zoom Throws Rotate the device Shake, twirl, twist, yell

  • Tips and Tricks building Mobile apps Also, remember, your

    apps may not always be connected to the network! In fact, it may disconnect

    in the middle of a transaction know how to recover from it!

  • Tips and Tricks building Mobile apps Test on EVERY device you

    can get your hands on! Even if you use a

    framework like AIR, it may behave slightly differently because of certain features of the phone.

    Get to know some friends that have phones you wish to target ;-)

  • Resources

    Adobe Flash Builder Burrito http://labs.adobe.com

    Developing Mobile Applications & Using Adobe Catalyst : http://tv.adobe.com

    HTML 5 Framework for developing mobile apps : http://jquerymobile.com/

    My Blog : http://quetwo.com

    http://labs.adobe.com/http://tv.adobe.com/http://jquerymobile.com/http://quetwo.com/

  • Slide Number 1Tell me about youAbout meMobile DevicesCompeting ForcesCompeting ForcesMobile DevicesMobile DevicesThe Adobe Integrated RuntimeThe Adobe Integrated RuntimeWriting an appA few caveatsOur Demo WorkflowThe Adobe ToolsetThe Adobe ToolsetDevice Central and PhotoshopKey Points with PhotoshopAdobe CatalystKey Points with CatalystAdobe Flash BuilderKey Points with Flash BuilderKey Points with Flash BuilderTips and Tricks building Mobile appsTips and Tricks building Mobile appsTips and Tricks building Mobile appsTips and Tricks building Mobile appsTips and Tricks building Mobile appsResourcesSlide Number 29