Custom JavaScript Trainingmobilehtml5.org/trainings/sa-material/Saudi.Aramco.HTML5.Day1.pdf · 3-...
Transcript of Custom JavaScript Trainingmobilehtml5.org/trainings/sa-material/Saudi.Aramco.HTML5.Day1.pdf · 3-...
max firtman @firt firt.mobi
Saudi Aramco
Custom JavaScript Training
mobile+web developer
who? @firt
mobile+web developer & trainer
trainer
Books I’ve written
TranslationsLanguages I don’t
understand
questions
yes, please
anytime
It’s your turn
experience in
HTML, CSS, JavaScript other dev platforms?
About this training
Goals
Custom JavaScript Training
HTML5 and CSS3
Bootstrap
Additional Tools: VS Code, WebPack, LESS/SASS
TypeScript
Angular 2 with TypeScript
Browsers JS APIs
Goals
Optional modules (last day)
Web Performance Optimization
Web Hardware access
Apache Cordova
Node.js
Logistics
Logistics
7.30am: start 9.00am: break 15 min 11.30pm: lunch 1 hour 12.30pm: second half start 1.30pm: break 15 min ~2.30pm: end. Q&A until 3.30pm
Logistics
- Material from (just wait for the URL) - Presentation, Live code samples, exercises - Test on browsers
Questions?
Yes, please!
Anytime!
Let’s start
html5
‣ w3c standards (all in draft) ‣ some are other w3c standards ‣ de-facto standards ‣ everything “new” on the web
mobile
1- websites 2- apps
mobile
1- websites 2- apps
mobile
1- websites 2- apps
with html5 we can create...
we can create
1- websites
Using the browser
URL
Web Server
1- websiteswe can create
we can create
2- webapps
Browser to install
Full-screen
Icon on home screen
Web Server
2- webappswe can create
full screen webapps
home screen webapps
webapps are also known as(
)
we can create
3- native webapps
Package, compile, sign
Icon on home screen
App Store
No web server
3- native webappswe can create
hybrid apps
packaged webapps
native webapps are also known as
(
)
mobile
1- websites 2- apps
a- native b- webapps c- native webapps
mobile
1- websites 2- apps
native webapps
What is ?
html5
‣ w3c standards (all in draft) ‣ some are other w3c standards ‣ de-facto standards ‣ everything “new” on the web
html version 5?
typeof html5 != boolean
some features safe
some features only on few platforms
some features experimental
some features with prefixes
and what about capabilities today?
progressive enhancement
progressive enhancement
responsive web design
Architecture
Architecture
Architecture
Architecture
Architecture
Architecture
Architecture
Best of both worlds
Progressive Web Apps
1- Open Definition 2- Performance, Secure, App-like 3- Progressive Enhancement 4- Best of Web and Native
Best of Web1- Linkable 2- Discoverable 3- Easy to deploy 4- Easy to update 5- Standards
6- Offline Access 7- Installed Icon 8- Push Notifications 9- Full Screen Experience 10- Fast UI
Best of Native
you can reach a good experience
Pictures)from)freedigitalphotos.net)
thanks!
[email protected]: @firt
mobilexweb.com