Download - 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
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
<!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
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;}
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>
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 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
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