Contenu connexe
Similaire à Tech days faridabad (20)
Tech days faridabad
- 1. Windows 8 and Metro-Apps
Windows 8 App using HTML5 and JavaScript
Ankur Mishra Christian Moser
© Zühlke 2011
- 2. Windows 8 App Using HTML5 and JavaScript | Ankur Mishra 2/9/2013 © Zühlke 2011
- 3. Windows 8?
Metro-Style Apps für Windows
8
2/9/2013
Christian Moser
Windows 8 App Using HTML5 and JavaScript | Ankur Mishra © Zühlke 2011
- 4. Desktop :
• Starts in a few seconds !
• New Task Manager !
• Improved Copy !
• Explorer Ribbon !
• "Factory Reset" and? Refresh function !
• Internet Explorer 10 !
• Automatic synchronization? Into the Cloud (Sky Drive) !
Windows 8 App Using HTML5 and JavaScript | Ankur Mishra 2/9/2013 © Zühlke 2011
- 5. Metro UI
Metro-Style Apps für Windows
8
2/9/2013
Christian Moser
© Zühlke 2011
- 8. The Metro Design Principles :
• Pride in craftsmanship
A good user experience comes only with a clean
craft in all disciplines
• Be fast and fluid
Apps are responsive, intuitive, touch-optimized and
smooth..
• Authentically Digital
Connected, dynamic, active, strong colors, moves
• Do more with less
Content instead of chrome, to be good at
something
Windows 8 App Using HTML5 and JavaScript | Ankur Mishra 2/9/2013 © Zühlke 2011
- 9. Interaction with the Metro desktop
Charms
(The 5 major system functions,
Task switching Are always available)
Appear when the fingers
is wiped from the touch-edge.
App-Bars
Windows 8 App Using HTML5 and JavaScript | Ankur Mishra 2/9/2013 © Zühlke 2011
- 10. Variations that would support every app :
Snapped and full screen Horizontal and Vertical screen sizes
Resolutions
Windows 8 App Using HTML5 and JavaScript | Ankur Mishra 2/9/2013 © Zühlke 2011
- 11. Layout Grid :
A consistent
Layout Grid provides
consistent Appearance.
Visual Studio 12 provides
Ready-made templates for this.
Windows 8 App Using HTML5 and JavaScript | Ankur Mishra 2/9/2013 © Zühlke 2011
- 12. Contracts
• Applications interact via "Contracts" with each other Without knowing
each other.
• Each application can offer contracts that make sense to use.
• Windows 8 supports three contracts:
Share (Push Content) Picker (Pull Content) Search (Find Content)
Windows 8 App Using HTML5 and JavaScript | Ankur Mishra 2/9/2013 © Zühlke 2011
- 13. Live Tiles
• Icons are outdated, static, boring and offer little benefit.
• Live Tiles are alive, personally, appealing to date and informative
• Apps can content as secondary tiles with "deep link" to the desktop set
(weather stations, friends, important share prices, ...)
Windows 8 App Using HTML5 and JavaScript | Ankur Mishra 2/9/2013 © Zühlke 2011
- 14. Cloud-Integration
• The user logs in once a Windows Live Users with Windows
• Each Metro Style app gets in the cloud storage for user settings and smaller
content.
• Therefore, settings can be easily synchronized between multiple computers.
Begins to read an ebook and need to get away ... ……... The book opens on the right side
Windows 8 App Using HTML5 and JavaScript | Ankur Mishra 2/9/2013 © Zühlke 2011
- 15. What makes a good Metro App
1. Appears completely in the Metro-style design.
2. Feels fast and fluid
3. Supports scaling, snapping and alignment in a meaningful way.
4. Implement meaningful Contracts (Search, Share, Picker).
5. Provides valuable information on their live tile.
6. Always feel connected, current and alive.
7. Large power of the cloud for data synchronization.
Windows 8 App Using HTML5 and JavaScript | Ankur Mishra 2/9/2013 © Zühlke 2011
- 16. Metro Style Apps :
Metro-Style Apps für Windows
8
2/9/2013
Christian Moser
© Zühlke 2011
- 18. Language Projection
• Metro-style apps can be written equivalent in C + +, C #, VB or JS
C#
var fp = new FileOpenPicker();
var result = await fp.PickSingeFileAsync();
C++
auto fp = Windows::Storage::Pickers::FileOpenPicker();
auto result = fp->PickSingeFileAsync();
JavaScript
var fp = new Windows.Storage.Pickers.FileOpenPicker;
fp.pickSingleFileAsync().then();
Windows 8 App Using HTML5 and JavaScript | Ankur Mishra 2/9/2013 © Zühlke 2011
- 19. Windows Store App.
Let’s Try …!!
Windows 8 App Using HTML5 and JavaScript | Ankur Mishra 2/9/2013 © Zühlke 2011
- 21. Windows 8 brings a number of new
controls :
• WebView (without problems AirSpace)
• ListView / GridView / FlipView / Jump View (with "semantic zoom")
• Media player with controls
• Toggleswitch
• Extended TextBox
• Progress ring
Windows 8 App Using HTML5 and JavaScript | Ankur Mishra 2/9/2013 © Zühlke 2011
- 22. Comparison of Desktop and Metro :
Metro Apps Desktop Software
Main input medium Touch Mouse / Keyboard
UI-Style Metro Windows
Runtime WinRT (Win32) .NET/SL/Win32
Distribution Windows Store Download Webseite
Installation .appx Package MSI
System Access Only about WinRT Full access
Conclusion
• Business applications will continue to be primarily mouse and
keyboard-based and based on WPF / SL / HTML or C + +.
Windows 8 App Using HTML5 and JavaScript | Ankur Mishra 2/9/2013 © Zühlke 2011
- 24. Navigation im Windows Store
1. Store Home :
List of all categories of good, popular apps. (Can
not be bought)
2.Second View :
Possibilities with all
the apps, Category
and filter.
3. Application Detail
Windows 8 App Using HTML5 and JavaScript | Ankur Mishra 2/9/2013 © Zühlke 2011
- 25. Application details :
Reviews
Feedback from customers, Through the app.
Without buying,
Try !!.
Used resources
Windows 8 App Using HTML5 and JavaScript | Ankur Mishra 2/9/2013 © Zühlke 2011
- 26. Licensing models :
* After Certification.
• The store supports Metro Style Apps and ordinary
Win32 (desktop) apps.
• Licenses are per user (account). Please be 'roamed'
automatically.
• Microsoft earned 30%
• Apps are downloaded 10 times more often if they
offer a trial
• 10% of the trials will be purchased later
• "In-App" purchases
Windows 8 App Using HTML5 and JavaScript | Ankur Mishra 2/9/2013 © Zühlke 2011
- 27. Wenn die App im Store ist…
The Developer Dashboard lists,
All apps.
1. Vorbereitung 2. Submission 3. Nutzungsstatistik 4. Crash-Data
Windows 8 App Using HTML5 and JavaScript | Ankur Mishra 2/9/2013 © Zühlke 2011
- 28. For more Ping me :
@er_ankur_mishra
/ankurmishrayugal
ankur.mishra@uen.in
ankur.mishra@studentpartner.com
www.ankurmishra.in | www.Go4Every.com | www.blog.uen.in
Windows 8 App Using HTML5 and JavaScript | Ankur Mishra 2/9/2013 © Zühlke 2011