How to Develop Cross-Platform Apps

  • Published on
    14-Apr-2017

  • View
    403

  • Download
    0

Transcript

  • Modern trends for developing cross-platforms apps with HTML5, Javascript and CSS

    HOW TO DEVELOP CROSS-PLATFORM APPS

    #web #beginners#cross-platform #visual-studio #tools

    Andrea TinoSoftware Development Engineer

  • Who is this presentation for?

    Everyone with a minimal background

    in programming

    What topics does it cover?

    See previous slide :)

    Oh yeah... But how detailed?

    I will follow an horizontal approach without many details

  • OUT THERE IS FULL OF DEVICESIf you consider all phones, tablets, watches and devices in the market,

    developing an app able to adapt to all of them becomes impossibleSa

    msu

    ng T

    ab S

    Sony XPeria

    iPad 2

    iPad Mini

    Nokia 920

    Lum

    ia

  • MANY STORESWhat if you want to develop an

    app for all the stores?

    GOOGLE PLAY1.6M

    APPLE STORE

    1.5M

    WINDOWS STORE

    340.000AMAZON APPSTORE

    400.000

    Source: Statista

    http://www.statista.com/statistics/276623/number-of-apps-available-in-leading-app-stores

    001

  • MODERN REQUIREMENTSApp developers today face two

    big problems...

    XXXX XXXX

    XXXX XXXX

    CROSS PLATFORM

    The possibility to have the same source code, and

    compile it for all platforms

    ADAPTIVE LAYOUT

    The ability to adapt the app layout in order to fit as

    many screens as needed

  • SOLUTIONS?We need to find a way to develop adaptive

    and cross-platform apps

    CROSS PLATFORM

    ADAPTIVE LAYOUT

    Defining content structure

    Interactive logic

    Styling elements

    Compile web apps into apps for all stores

    Starting from Visual Studio 2015, it is possible to integrate Cordova in Javascript projects

  • ABOUT HTMLHyper Text Markup Language has been used for many years, and now

    it is making his way as the markup language par excellence

    Define contentHTML is a markup language that developers use to create web pages.By using tags you create elements which are your page components.

    DEMO

    Writing your first HTML page

    My page

    Hello world!

    GIST link

    https://gist.github.com/andry-tino/6afa3e54c4

    7057c4b683

  • ABOUT CSSCascading Style Sheets is

    about love & hate

    When it is about stylingHTML is used to define content. CSS is used to style that content!Years ago, HTML used to have styling directives in the language, but they were removed and made obsolete!

    DEMO

    Add a CSS stylesheet to your HTML page

    My page Hello world!

    body { padding: 0; margin: 10px; background-color: #efefef;}div { font-family: sans-serif; font-size: 25pt; font-weight: bold; color: #333333;}

  • ABOUT JAVASCRIPTThe web runs on Javascript! If you have to learn a

    programming language: start with Javascript :)

    Make your pages liveJavascript is all about having fun! Move stuff, add animations, make your pages become interactive and dynamic!Javascript is a programming language that today can also be used out of web browsers!

    DEMO

    Add dynamicity to elements of your HTML page

    window.addEventListener(load, function() { var c = document.getElementById( content); var t = [Ciao mondo, Hello world, ]; window.setInterval(function() { c.textContent = t[Math.floor( Math.random()(10)%3]; }, 1000); });

    ... Hello world!

  • THE MAGIC DONE BY CORDOVACordova does the magic of converting your web

    pages into an app for all the stores

    Win output

    myapp.appx

    Android output

    myapp.apk

    iOS output

    myapp.ipa

    Source code

    index.html

    style.css

    script.js

    VISUAL STUDIO 2015

    CORDOVA

  • ONE APP, MANY DEVICESNot only we can reach all platforms thanks to Cordova. We can also reach multiple devices as the same app can run on tablets and phones thanks to

    the fact that we have built our app using HTML, Javascript and CSS

    Win app

    Windows Store

    Android app

    Google Play

    iOS app

    Apple Store

    TABLET MARKET

    50.4Mhttp://www.statista.com/topics/841/tablets/

    PHONE MARKET

    967.78Mhttp://www.statista.com/topics/840/smartphones/

  • ONE APP, ALL STORESAll the way up to the stores. With just one

    single app we could do all!

    TABLET MARKET

    50.4Mhttp://www.statista.com/topics/841/tablets/

    PHONE MARKET

    967.78Mhttp://www.statista.com/topics/840/smartphones/

    GOOGLE PLAY STORE 1.6M

    source: presentation@001

    APPLE STORE 1.5Msource: presentation@001

    WINDOWS STORE 340.000

    source: presentation@001

  • EVERYTHING YOU NEED IS OUT THEREInternet is full of tools to build apps with HTML, Javascript and CSS. Get inspired and start creating amazing things!

  • ADOBE COLOR CCOrganize your color palettes, get access to amazing tools to creatic

    chromatic configurations for your artworks

    https://color.adobe.com

    CLOUD ENABLED

    FREE

    CREATE PALETTES

    EASY

  • DEVICE SIZE HANDLINGThe best part of developing cross-platform apps is that we can

    test them on browsers! To make testing realistic, we need to resize our browsers window to match devices sizes

    http://mydevice.io

    MYDEVICE

    http://screensiz.es

    SCREENSIZ

    RESIZE MY BROWSER

    http://resizemybrowser.com

    http://setmy.browsersize.com

    SETMYBROWSERSIZE

  • THANK YOUTwitter: @_atino

    This work is distributed under the Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International license.

    Authored by: Andrea Tino This work includes statistics and facts whose source is: Statista (www.statista.com).This presentation has been

    designed to target 9th+ graders in schools as part of introduction to development and IT.

    andry.tino@hotmail.comE-Mail: andrea.tino@microsoft.com

    Version: 1.5

    The End