Making it mobile_360_flex_jonathancampos_antonioholguin
-
Upload
antonioholguin -
Category
Technology
-
view
3.541 -
download
1
description
Transcript of Making it mobile_360_flex_jonathancampos_antonioholguin
![Page 1: Making it mobile_360_flex_jonathancampos_antonioholguin](https://reader034.fdocuments.net/reader034/viewer/2022051820/55388ea24a79596f718b475f/html5/thumbnails/1.jpg)
![Page 2: Making it mobile_360_flex_jonathancampos_antonioholguin](https://reader034.fdocuments.net/reader034/viewer/2022051820/55388ea24a79596f718b475f/html5/thumbnails/2.jpg)
Who We Are
Antonio Holguin• ACP• Designer at Smashing Ideas• blog: swfhead.com• twitter: @antonioholguin
Jonathan Campos• ACP• UGM• Director of Software Development at Dedo Inc.• blog: unitedmindset.com/jonbcampos• twitter: @jonbcampos
![Page 3: Making it mobile_360_flex_jonathancampos_antonioholguin](https://reader034.fdocuments.net/reader034/viewer/2022051820/55388ea24a79596f718b475f/html5/thumbnails/3.jpg)
Where You've Seen Us
![Page 4: Making it mobile_360_flex_jonathancampos_antonioholguin](https://reader034.fdocuments.net/reader034/viewer/2022051820/55388ea24a79596f718b475f/html5/thumbnails/4.jpg)
Here's What's Coming
• Planning Your Mobile Application• Working In Teams• Visual and Interaction Design• Graphic Optimization• List and View Optimization• MVC for Flex Hero• User Tracking• Multi-Screen Best Practices• Deploying• Maintaining
![Page 5: Making it mobile_360_flex_jonathancampos_antonioholguin](https://reader034.fdocuments.net/reader034/viewer/2022051820/55388ea24a79596f718b475f/html5/thumbnails/5.jpg)
![Page 6: Making it mobile_360_flex_jonathancampos_antonioholguin](https://reader034.fdocuments.net/reader034/viewer/2022051820/55388ea24a79596f718b475f/html5/thumbnails/6.jpg)
Agreeing on a Workflow
• Phases of development• Target Device List• Design Asset Preparation and Delivery• Wireframe -> Deployment• Code Layout and Formatting
![Page 7: Making it mobile_360_flex_jonathancampos_antonioholguin](https://reader034.fdocuments.net/reader034/viewer/2022051820/55388ea24a79596f718b475f/html5/thumbnails/7.jpg)
Code Layout
• Come Up With A Convention• Stick With It!
• Check Out:• http://opensource.adobe.com/wiki/display/flexsdk/Coding+Conventions
![Page 8: Making it mobile_360_flex_jonathancampos_antonioholguin](https://reader034.fdocuments.net/reader034/viewer/2022051820/55388ea24a79596f718b475f/html5/thumbnails/8.jpg)
• Flow Chart doesn't need to be perfect• Wireframes as grey squares• What screens go where and how to get to them• Be sure all buttons are accounted for, including hardware• How much are you displaying on screen at a given time?• Consider Interactions/Gestures early• Understand that things WILL change
![Page 9: Making it mobile_360_flex_jonathancampos_antonioholguin](https://reader034.fdocuments.net/reader034/viewer/2022051820/55388ea24a79596f718b475f/html5/thumbnails/9.jpg)
![Page 10: Making it mobile_360_flex_jonathancampos_antonioholguin](https://reader034.fdocuments.net/reader034/viewer/2022051820/55388ea24a79596f718b475f/html5/thumbnails/10.jpg)
• Create Value Objects• MVC Structure
• Checkout RobotLegs• Test and Create Services• Setup Data Models• Create Custom Events
![Page 11: Making it mobile_360_flex_jonathancampos_antonioholguin](https://reader034.fdocuments.net/reader034/viewer/2022051820/55388ea24a79596f718b475f/html5/thumbnails/11.jpg)
M-V-C-S
![Page 12: Making it mobile_360_flex_jonathancampos_antonioholguin](https://reader034.fdocuments.net/reader034/viewer/2022051820/55388ea24a79596f718b475f/html5/thumbnails/12.jpg)
• Theorize Design Concept• Research• 1 - 2 screens to get the look• Choosing Fonts / Color• Get It On A Device!• Thinking about Multiple Screen Resolutions• Pixel Perfection!
![Page 13: Making it mobile_360_flex_jonathancampos_antonioholguin](https://reader034.fdocuments.net/reader034/viewer/2022051820/55388ea24a79596f718b475f/html5/thumbnails/13.jpg)
![Page 14: Making it mobile_360_flex_jonathancampos_antonioholguin](https://reader034.fdocuments.net/reader034/viewer/2022051820/55388ea24a79596f718b475f/html5/thumbnails/14.jpg)
![Page 15: Making it mobile_360_flex_jonathancampos_antonioholguin](https://reader034.fdocuments.net/reader034/viewer/2022051820/55388ea24a79596f718b475f/html5/thumbnails/15.jpg)
![Page 16: Making it mobile_360_flex_jonathancampos_antonioholguin](https://reader034.fdocuments.net/reader034/viewer/2022051820/55388ea24a79596f718b475f/html5/thumbnails/16.jpg)
Pixel Perfection
![Page 17: Making it mobile_360_flex_jonathancampos_antonioholguin](https://reader034.fdocuments.net/reader034/viewer/2022051820/55388ea24a79596f718b475f/html5/thumbnails/17.jpg)
• View/Mediator Layout• Unit Test Mediators• CSS Sheets
• ID Selections• CSS Classes
• Flow Layouts• Connect Mediators with Models
![Page 18: Making it mobile_360_flex_jonathancampos_antonioholguin](https://reader034.fdocuments.net/reader034/viewer/2022051820/55388ea24a79596f718b475f/html5/thumbnails/18.jpg)
Advanced CSS (not that advanced...)
ID Selectors Class Selectors
![Page 19: Making it mobile_360_flex_jonathancampos_antonioholguin](https://reader034.fdocuments.net/reader034/viewer/2022051820/55388ea24a79596f718b475f/html5/thumbnails/19.jpg)
Custom SkinsMXML Actionscript
![Page 20: Making it mobile_360_flex_jonathancampos_antonioholguin](https://reader034.fdocuments.net/reader034/viewer/2022051820/55388ea24a79596f718b475f/html5/thumbnails/20.jpg)
• Render Remaining Screens and Elements• Do NOT hand off PSDs• Flatten, Save for Web, Deliver End Files (PNGs / JPGs)• All button states, including toggles, must be accounted for• Save for Multiple Screen Resolutions• Adding Sound
• MP3s are smaller, but a little slower, have "hiccup"• WAVs are bigger, but sound better
![Page 21: Making it mobile_360_flex_jonathancampos_antonioholguin](https://reader034.fdocuments.net/reader034/viewer/2022051820/55388ea24a79596f718b475f/html5/thumbnails/21.jpg)
• Import and Optimize• Update Skins• Relayout Views
• Designer can help
![Page 22: Making it mobile_360_flex_jonathancampos_antonioholguin](https://reader034.fdocuments.net/reader034/viewer/2022051820/55388ea24a79596f718b475f/html5/thumbnails/22.jpg)
• Icons - 512, 128, 114, 90, 72, 57, 50, 48, 36, 29, 16• Just make them all at once, its easier.
• Promo Images - Most Optional• Android Market: 180w x 120h 1024w x 500h• Amazon AppStore: Use Android images
• Videos - Android only - Optional but good.
• Screenshots - Make them interesting, show your app in action Do not include status bar on iOS
![Page 23: Making it mobile_360_flex_jonathancampos_antonioholguin](https://reader034.fdocuments.net/reader034/viewer/2022051820/55388ea24a79596f718b475f/html5/thumbnails/23.jpg)
![Page 24: Making it mobile_360_flex_jonathancampos_antonioholguin](https://reader034.fdocuments.net/reader034/viewer/2022051820/55388ea24a79596f718b475f/html5/thumbnails/24.jpg)
• User Tracking• GA for Flash• Full Google Analytics Stack
• ANT Scripts• Markets
• icons• descriptions• videos• images
• Application Descriptor
![Page 25: Making it mobile_360_flex_jonathancampos_antonioholguin](https://reader034.fdocuments.net/reader034/viewer/2022051820/55388ea24a79596f718b475f/html5/thumbnails/25.jpg)
• Test, Test, Test.
• Put on as many devices as possible.
• Test to break. Test to win. Test to lose.
• Try every scenario that may happen.
• Beta Testers?
![Page 26: Making it mobile_360_flex_jonathancampos_antonioholguin](https://reader034.fdocuments.net/reader034/viewer/2022051820/55388ea24a79596f718b475f/html5/thumbnails/26.jpg)
• Release CheckList• iOS: Check your provisioning profile• Check your app id• Check your permissions• Check your api keys• Verify your testing
• Include good contact information
![Page 27: Making it mobile_360_flex_jonathancampos_antonioholguin](https://reader034.fdocuments.net/reader034/viewer/2022051820/55388ea24a79596f718b475f/html5/thumbnails/27.jpg)
Markets Cost Moderated Device Limitation
Vendor Credits
Google(Android)
Amazon(Android)
App World (BB)
App Store (iOS)
$25 no none none
$99/year(first waived)
yes none none
$200/10 vendor credits no/tested none 10
$100/year yes 100 none
![Page 28: Making it mobile_360_flex_jonathancampos_antonioholguin](https://reader034.fdocuments.net/reader034/viewer/2022051820/55388ea24a79596f718b475f/html5/thumbnails/28.jpg)
• Each release WILL be problematic• Communicate what has changed to users• 3rd party apis• Users will forgive an update MORE than a broken app• Don’t release too often• Update based on User Feedback
![Page 29: Making it mobile_360_flex_jonathancampos_antonioholguin](https://reader034.fdocuments.net/reader034/viewer/2022051820/55388ea24a79596f718b475f/html5/thumbnails/29.jpg)
Thanks for coming!
Contact Jonathan:@jonbcampos
unitedmindset.com/jonbcampos
Contact Antonio:@antonioholguin
swfhead.com