16
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 Tino Software Development Engineer

How to Develop Cross-Platform Apps

Embed Size (px)

Citation preview

Page 1: How to Develop Cross-Platform Apps

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

Page 2: How to Develop Cross-Platform Apps

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

Page 3: How to Develop Cross-Platform Apps

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

Page 4: How to Develop Cross-Platform Apps

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

Page 5: How to Develop Cross-Platform Apps

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

Page 6: How to Develop Cross-Platform Apps

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

Page 7: How to Develop Cross-Platform Apps

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

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>My page</title> </head>

<body> <div>Hello world!</div> </body></html>

GIST link

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

7057c4b683

Page 8: How to Develop Cross-Platform Apps

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

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>My page</title> <link href=”style.css”></link> </head> <body> <div>Hello world!</div> </body></html>

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

Page 9: How to Develop Cross-Platform Apps

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); });

<!DOCTYPE html> ... <script src=”script.js”> </script> </head> <body> <div id=”content”> Hello world! </div> </body></html>

Page 10: How to Develop Cross-Platform Apps

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

Page 11: How to Develop Cross-Platform Apps

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/

Page 12: How to Develop Cross-Platform Apps

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

Page 13: How to Develop Cross-Platform Apps

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!

Page 14: How to Develop Cross-Platform Apps

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

Page 15: How to Develop Cross-Platform Apps

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 browser’s window to match devices’ sizes

http://mydevice.io

MYDEVICE

http://screensiz.es

SCREENSIZ

RESIZE MY BROWSER

http://resizemybrowser.com

http://setmy.browsersize.com

SETMYBROWSERSIZE

Page 16: How to Develop Cross-Platform Apps

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.

[email protected]: [email protected]

Version: 1.5

The End