Every Web Developer is a Win8 developer

•

0 recomendaciones•442 vistas

Kevin DeRudder

Multimania session on how you can use your webskills to build awesome metro applications

Tecnología

@kevinderudder working for
eGuidelines and a lecturer at the
Technical University of West Flanders.

Contact me on kevin@e-guidelines.be

Goal of this session

 Download and play with Windows 8 and VS11

 If you know web technologies, you are ready to build
amazing Metro style apps

 Understand what you need to add upon your HTML5
skills to build Win8 Metro apps

Metro Application != Web Application

Dieter is quite
serious on this

Building Metro Style Applications

Windows Core OS Services

Popular CSS features in Windows 8

Transforms Motion Layout

2D & 3D transforms Animations Grid
Transitions Flexbox

Graphics Motion

Gradients Multi-column,
Filter Effects hyphenation
Text-shadow Pagination
Position float

Windows hardware acceleration makes these beautiful and fast

WinJS
Library for building Metro Style apps using JavaScript

 Make your apps look and feel great
Matches the Windows Metro design style
Controls for common user experiences
Designed for touch as well as traditional input

 Build your apps fast and with high quality

or use your favourite JavaScript library

Different states == Different UI

UI always in CSS

MEDIA QUERY

Type Query or Expression
@media all and (-ms-view-state: fullscreen-portrait)
{
Feature Value

}

Run 2 applications next to each other
Snapped app Main app

@media screen and (-ms-view-state: snapped)
{

}

Search

Users often search to find the content they care about, be
it on the web, local machine, network, or in an app.

Search

Apps have rich content, but users have to find and
launch the app before searching in it.

Search

Search is universally accessible, contextual to
your app and always just a single swipe away.

Tiles are the “front door” to you app,
Treat it as an extension of your app

Basic Tiles
 Tap on tile to launch or switch to an app

 Static default tile specified in manifest of the app

 Two sizes:

Square (1x1) Wide (2x1)

Más contenido relacionado

Destacado

Customer serviceEva Yordanova

Customer serviceAlimakki

Chapter 5- Systemwide ReservationsNicole Hay-Walters

Unit 3 housekeeping human resource issuesNicole Hay-Walters

Communication BarriersSreenath S

Chapter 9: Check-out & Account SettlementNicole Hay-Walters

Introduction to Hospitality Industryheraesquivel

Australiakhial-h

Chapter 13: Revenue ManagementNicole Hay-Walters

Motivational skills for teachersAnnai vailankanni arts and science college, thanjavur.

Destacado (10)

Customer service

Chapter 5- Systemwide Reservations

Unit 3 housekeeping human resource issues

Communication Barriers

Chapter 9: Check-out & Account Settlement

Introduction to Hospitality Industry

Australia

Chapter 13: Revenue Management

Motivational skills for teachers

Similar a Every Web Developer is a Win8 developer

Media queriesKevin DeRudder

HTML5 and the dawn of rich mobile web applicationsJames Pearce

SLUGUK BUILD Round-upDerek Lakin

Mobility today & what's next.Application ecosystems.Petru Jucovschi

S#01 김영욱 codercay

Building Windows8 Metro ApplicationsAbhishek Sur

CVRashidul Islam

MEAN Stack vs MERN Stack Development Meanstack Developer

HTML5 and the dawn of rich mobile web applications pt 1James Pearce

Modernizing Desktop Apps on Windows 10Windows Developer

Xamarin y MS Azure | Cognitive ServicesVicente Gerardo Guzman Lucio

Win j svsphonegap-damyan-petev-mihail-mateevMihail Mateev

Stocktwits & Responsive Web Design, social network meets flexible frameworkJohn Strott

Modern web applicationsAndrea Tino

Graphics in mobile terminalsTomi Aarnio

DSL (Domain Specific Language) for Maps Mashupsaliraza786

Rapidly Construct LOB Applications with UWP and Visual Studio 2017Windows Developer

Front-End Web DevelopmentYash Sati

App Modernization: From 0 to HeroLorenzo Barbieri

Shape 2013 developing multi targeting windows store and windows phone appsJose Luis Latorre Millas

Similar a Every Web Developer is a Win8 developer (20)

Media queries

HTML5 and the dawn of rich mobile web applications

SLUGUK BUILD Round-up

Mobility today & what's next.Application ecosystems.

S#01 김영욱

Building Windows8 Metro Applications

MEAN Stack vs MERN Stack Development

HTML5 and the dawn of rich mobile web applications pt 1

Modernizing Desktop Apps on Windows 10

Xamarin y MS Azure | Cognitive Services

Win j svsphonegap-damyan-petev-mihail-mateev

Stocktwits & Responsive Web Design, social network meets flexible framework

Modern web applications

Graphics in mobile terminals

DSL (Domain Specific Language) for Maps Mashups

Rapidly Construct LOB Applications with UWP and Visual Studio 2017

Front-End Web Development

App Modernization: From 0 to Hero

Shape 2013 developing multi targeting windows store and windows phone apps

Más de Kevin DeRudder

Build your own Cloud/Home security system for 60$Kevin DeRudder

Comparing xaml and htmlKevin DeRudder

ECMASCRIPT.NEXTKevin DeRudder

VISUG: Visual studio for web developersKevin DeRudder

Testing apps with MTM and Tea Foundation ServiceKevin DeRudder

ECMAScript.Next ECMAScipt 6Kevin DeRudder

Building cross platform applications using Windows Azure Mobile ServicesKevin DeRudder

Responsive SharePointKevin DeRudder

Use html5 to build what you want, where you want itKevin DeRudder

Developers and DesignersKevin DeRudder

What you need to know bout html5Kevin DeRudder

Html5 introKevin DeRudder

Más de Kevin DeRudder (12)

Build your own Cloud/Home security system for 60$

Comparing xaml and html

ECMASCRIPT.NEXT

VISUG: Visual studio for web developers

Testing apps with MTM and Tea Foundation Service

ECMAScript.Next ECMAScipt 6

Building cross platform applications using Windows Azure Mobile Services

Responsive SharePoint

Use html5 to build what you want, where you want it

Developers and Designers

What you need to know bout html5

Html5 intro

Último

Artificial Intelligence Chap.5 : UncertaintyKhushali Kathiriya

ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProduct Anonymous

Boost Fertility New Invention Ups Success Rates.pdfsudhanshuwaghmare1

Vector Search -An Introduction in Oracle Database 23ai.pptxRemote DBA Services

Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Angeliki Cooney

Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoffsammart93

Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...apidays

Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Jeffrey Haguewood

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FMESafe Software

WSO2's API Vision: Unifying Control, Empowering DevelopersWSO2

Exploring Multimodal Embeddings with MilvusZilliz

ICT role in 21st century education and its challengesrafiqahmad00786416

[BuildWithAI] Introduction to Gemini.pdfSandro Moreira

Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...apidays

Corporate and higher education May webinar.pptxRustici Software

Finding Java's Hidden Performance Traps @ DevoxxUK 2024Victor Rentea

Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Orbitshub

Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfOrbitshub

presentation ICT roal in 21st century educationjfdjdjcjdnsjd

Strategies for Landing an Oracle DBA Job as a FresherRemote DBA Services

Every Web Developer is a Win8 developer

5. @kevinderudder working for eGuidelines and a lecturer at the Technical University of West Flanders. Contact me on kevin@e-guidelines.be

6. Goal of this session  Download and play with Windows 8 and VS11  If you know web technologies, you are ready to build amazing Metro style apps  Understand what you need to add upon your HTML5 skills to build Win8 Metro apps

8. HTML5 Page

9. CSS3 Grid

10. CSS3 Media Queries

11. Tiles

12.

13. Metro Application != Web Application Dieter is quite serious on this

14.

15. Building Metro Style Applications Windows Core OS Services

16.

17. Popular HTML features in Windows 8

18. Popular CSS features in Windows 8 Transforms Motion Layout 2D & 3D transforms Animations Grid Transitions Flexbox Graphics Motion Gradients Multi-column, Filter Effects hyphenation Text-shadow Pagination Position float Windows hardware acceleration makes these beautiful and fast

19. Controls

20.

21.

22. WinJS Library for building Metro Style apps using JavaScript  Make your apps look and feel great Matches the Windows Metro design style Controls for common user experiences Designed for touch as well as traditional input  Build your apps fast and with high quality

23. Windows Library for JavaScript (WinJS)

24. or use your favourite JavaScript library

25.

26.

27. So far, so good

28. Thank you ListView

29.

30. Void

31. Different states == Different UI UI always in CSS

32.

33. MEDIA QUERY Type Query or Expression @media all and (-ms-view-state: fullscreen-portrait) { Feature Value }

34.

35.

36. Run 2 applications next to each other Snapped app Main app

37. @media screen and (-ms-view-state: snapped) { }

38.

39.

40. Search Users often search to find the content they care about, be it on the web, local machine, network, or in an app.

41. Search Apps have rich content, but users have to find and launch the app before searching in it.

42.

43.

44. Search Search is universally accessible, contextual to your app and always just a single swipe away.

45.

46.

47.

48. Tiles are the “front door” to you app, Treat it as an extension of your app

49. Basic Tiles  Tap on tile to launch or switch to an app  Static default tile specified in manifest of the app  Two sizes: Square (1x1) Wide (2x1)

Every Web Developer is a Win8 developer

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (10)

Similar a Every Web Developer is a Win8 developer

Similar a Every Web Developer is a Win8 developer (20)

Más de Kevin DeRudder

Más de Kevin DeRudder (12)

Último

Último (20)

Every Web Developer is a Win8 developer