Download as PDF, PPTX
![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 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>](https://image.slidesharecdn.com/prescpappsnewbies-151126194747-lva1-app6891/85/How-to-Develop-Cross-Platform-Apps-9-320.jpg)
Uploaded byAndrea Tino
How to Develop Cross-Platform Apps
The document discusses modern trends in developing cross-platform applications using HTML5, JavaScript, and CSS, targeting individuals with a minimal programming background. It emphasizes the challenges of creating adaptive layouts for various devices and introduces tools like Cordova, allowing developers to compile web apps for multiple stores using a single codebase. The presentation also highlights the importance of testing applications on different device sizes and encourages readers to explore the numerous available resources for app development.
More Related Content
Similar to How to Develop Cross-Platform Apps
How to Develop Cross-Platform Apps
- 1. Modern trends fordeveloping 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
- 2. Who is this presentationfor? 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
- 3. OUT THERE ISFULL 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
- 4. MANY STORES What ifyou 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
- 5. MODERN REQUIREMENTS App developerstoday 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
- 6. SOLUTIONS? We need tofind 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
- 7. ABOUT HTML Hyper TextMarkup 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 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
- 8. ABOUT CSS Cascading StyleSheets is about love & hate When it is about styling HTML 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; }
- 9. ABOUT JAVASCRIPT The webruns on Javascript! If you have to learn a programming language: start with Javascript :) Make your pages live Javascript 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>
- 10. THE MAGIC DONEBY 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
- 11. ONE APP, MANYDEVICES 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/
- 12. ONE APP, ALLSTORES 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 source: presentation@001 WINDOWS STORE 340.000 source: presentation@001
- 13. EVERYTHING YOU NEED ISOUT THERE Internet is full of tools to build apps with HTML,Javascript and CSS.Get inspired and start creating amazing things!
- 14. ADOBE COLOR CC Organizeyour 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
- 15. DEVICE SIZE HANDLING Thebest 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
- 16. THANK YOU Twitter: @_atino Thiswork 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