GNOME.Asia 2015 : Developing HTML5 Applications for GNOME
-
Upload
syai-mif -
Category
Technology
-
view
440 -
download
2
Transcript of GNOME.Asia 2015 : Developing HTML5 Applications for GNOME
![Page 1: GNOME.Asia 2015 : Developing HTML5 Applications for GNOME](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c383b2bb61eb9f628b4623/html5/thumbnails/1.jpg)
Developing HTML5 Applications for GNOME
by Muhammad M. Syaikhuddin@syaimif
Depok, May 2015
![Page 2: GNOME.Asia 2015 : Developing HTML5 Applications for GNOME](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c383b2bb61eb9f628b4623/html5/thumbnails/2.jpg)
about me● Release Manager of BlankOn Project● Student of Technical Faculty of Universitas
Pesantren Tinggi Darul Ulum Jombang● IT Staff at Nusacomtech● Linux Enthusiast● BlankOn User since 2012
![Page 3: GNOME.Asia 2015 : Developing HTML5 Applications for GNOME](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c383b2bb61eb9f628b4623/html5/thumbnails/3.jpg)
the History of HTML5● 2004, Web Hipertext Application Technology Working
Group (WHATWG) set out to develop HTML5● 2008, First version of HTML5 is published● Jan, 2010. Youtube offers HTML5 video player● 2014, HTML5 was released as a stable W3C
Recommendation
![Page 4: GNOME.Asia 2015 : Developing HTML5 Applications for GNOME](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c383b2bb61eb9f628b4623/html5/thumbnails/4.jpg)
HTML5?a core technology markup language of the Internet used for structuring and presenting content for the World Wide Web. (http://en.wikipedia.org/wiki/HTML5)
![Page 5: GNOME.Asia 2015 : Developing HTML5 Applications for GNOME](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c383b2bb61eb9f628b4623/html5/thumbnails/5.jpg)
CSS?● CSS stands for Cascading Style Sheets ● CSS defines how HTML elements are to be
displayed
![Page 6: GNOME.Asia 2015 : Developing HTML5 Applications for GNOME](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c383b2bb61eb9f628b4623/html5/thumbnails/6.jpg)
JS or Javascript?the programming language of HTML and the Web. Programming makes computers do what you want them to do
![Page 7: GNOME.Asia 2015 : Developing HTML5 Applications for GNOME](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c383b2bb61eb9f628b4623/html5/thumbnails/7.jpg)
Web and Applications HTML5
![Page 8: GNOME.Asia 2015 : Developing HTML5 Applications for GNOME](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c383b2bb61eb9f628b4623/html5/thumbnails/8.jpg)
Why HTML5 Application?
● Everyone can developing● there is HTML5 Application Runner (Maleo)● Everyone can contribute to BlankOn or
Gnome
![Page 9: GNOME.Asia 2015 : Developing HTML5 Applications for GNOME](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c383b2bb61eb9f628b4623/html5/thumbnails/9.jpg)
Architecture HTML5 Application
![Page 10: GNOME.Asia 2015 : Developing HTML5 Applications for GNOME](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c383b2bb61eb9f628b4623/html5/thumbnails/10.jpg)
Developing Simple HTML5 Application
![Page 11: GNOME.Asia 2015 : Developing HTML5 Applications for GNOME](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c383b2bb61eb9f628b4623/html5/thumbnails/11.jpg)
<!doctype html><html><head> <meta content="text/html; charset=utf-8"> <title>WhatsApp</title> <script type="text/javascript"> window.location = "https://web.whatsapp.com/" </script></head></html>
index.html
![Page 12: GNOME.Asia 2015 : Developing HTML5 Applications for GNOME](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c383b2bb61eb9f628b4623/html5/thumbnails/12.jpg)
config.xml
![Page 13: GNOME.Asia 2015 : Developing HTML5 Applications for GNOME](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c383b2bb61eb9f628b4623/html5/thumbnails/13.jpg)
cont...<widget xmlns = "http://www.w3.org/ns/widgets" id = "com.maleo.whatsapp" version = "0.0.1" //version height = "600" width = "800"></widget> //create window application<icon src="whatsapp.svg"/> //icon application<content src="index.html"/> //content application
![Page 14: GNOME.Asia 2015 : Developing HTML5 Applications for GNOME](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c383b2bb61eb9f628b4623/html5/thumbnails/14.jpg)
HTML5 Application RunnerMaleo
source code -> https://github.com/BlankOn/maleoreposatory BlankOn -> http://arsip.blankonlinux.or.
id/blankon/pool/main/m/maleo/
![Page 15: GNOME.Asia 2015 : Developing HTML5 Applications for GNOME](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c383b2bb61eb9f628b4623/html5/thumbnails/15.jpg)
HTML5 Applications in BlankOn
![Page 16: GNOME.Asia 2015 : Developing HTML5 Applications for GNOME](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c383b2bb61eb9f628b4623/html5/thumbnails/16.jpg)
Manokwari
![Page 17: GNOME.Asia 2015 : Developing HTML5 Applications for GNOME](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c383b2bb61eb9f628b4623/html5/thumbnails/17.jpg)
GeoBlankOn-Peta
![Page 18: GNOME.Asia 2015 : Developing HTML5 Applications for GNOME](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c383b2bb61eb9f628b4623/html5/thumbnails/18.jpg)
HangOnMan
![Page 19: GNOME.Asia 2015 : Developing HTML5 Applications for GNOME](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c383b2bb61eb9f628b4623/html5/thumbnails/19.jpg)
Source Code HTML5 Applications
● Manokwari : https://github.com/BlankOn/manokwari ● GeoBlankOn : https://github.com/BlankOn/Peta ● SuperMario :https://github.com/syaimif/FullScreenMario