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 Tino
Software 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 DEVICES
If you consider all phones, tablets, watches and devices in the market,
developing an app able to adapt to all of them becomes impossible
SamsungTabS
Sony XPeria
iPad2
iPad Mini
Nokia 920
Lumia

MANY STORES
What if you want to develop an
app for all the stores?
GOOGLE PLAY
1.6M
APPLE STORE
1.5M
WINDOWS STORE
340.000
AMAZON APPSTORE
400.000
Source:Statista
http://www.statista.com/statistics/276623/nu
mber-of-apps-available-in-leading-app-stores
001

MODERN REQUIREMENTS
App 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 ﬁt 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 HTML
Hyper Text Markup Language has been used for many years, and now
it is making his way as the markup language par excellence
Define content
HTML 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 ﬁrst
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 CSS
Cascading Style Sheets is
about love & hate
When it is about styling
HTML is used to deﬁne 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 JAVASCRIPT
The web runs on Javascript! If you have to learn a
programming language: start with Javascript :)
Make your pages live
Javascript is all about having fun! Move stuﬀ, 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 CORDOVA
Cordova 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 DEVICES
Not 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.4M
http://www.statista.com/topics/841/tablets/
PHONE MARKET
967.78M
http://www.statista.com/topics/840/smartphones/

ONE APP, ALL STORES
All the way up to the stores. With just one
single app we could do all!
TABLET MARKET
50.4M
http://www.statista.com/topics/841/tablets/
PHONE MARKET
967.78M
http://www.statista.com/topics/840/smartphones/
GOOGLE
PLAY STORE 1.6M
source: presentation@001
APPLE STORE
1.5M
WINDOWS
STORE
340.000

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

ADOBE COLOR CC
Organize your color palettes, get access to amazing tools to creatic
chromatic configurations for your artworks
https://colo
r.adobe.com
CLOUD
ENABLED
FREE
CREATE
PALETTES
EASY

DEVICE SIZE HANDLING
The 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://resi
zemybrowser
.com
http://setmy.brow
sersize.com
SETMYBROWSERSIZE

THANK YOU
Twitter: @_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

How to Develop Cross-Platform Apps

Recommended

Recommended

More Related Content

What's hot

What's hot (9)

Viewers also liked

Viewers also liked (11)

Similar to How to Develop Cross-Platform Apps

Similar to How to Develop Cross-Platform Apps (20)

More from Andrea Tino

More from Andrea Tino (20)

Recently uploaded

Recently uploaded (20)

How to Develop Cross-Platform Apps