GNOME.Asia 2015 : Developing HTML5 Applications for GNOME

20
Developing HTML5 Applications for GNOME by Muhammad M. Syaikhuddin @syaimif Depok, May 2015

Transcript of GNOME.Asia 2015 : Developing HTML5 Applications for GNOME

Page 1: GNOME.Asia 2015 : Developing HTML5 Applications for GNOME

Developing HTML5 Applications for GNOME

by Muhammad M. Syaikhuddin@syaimif

Depok, May 2015

Page 2: GNOME.Asia 2015 : Developing HTML5 Applications for GNOME

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

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

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

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

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

Web and Applications HTML5

Page 8: GNOME.Asia 2015 : Developing HTML5 Applications for GNOME

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

Architecture HTML5 Application

Page 10: GNOME.Asia 2015 : Developing HTML5 Applications for GNOME

Developing Simple HTML5 Application

Page 11: GNOME.Asia 2015 : Developing HTML5 Applications for GNOME

<!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

config.xml

Page 13: GNOME.Asia 2015 : Developing HTML5 Applications for GNOME

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

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

HTML5 Applications in BlankOn

Page 16: GNOME.Asia 2015 : Developing HTML5 Applications for GNOME

Manokwari

Page 17: GNOME.Asia 2015 : Developing HTML5 Applications for GNOME

GeoBlankOn-Peta

Page 18: GNOME.Asia 2015 : Developing HTML5 Applications for GNOME

HangOnMan

Page 19: GNOME.Asia 2015 : Developing HTML5 Applications for GNOME

Source Code HTML5 Applications

● Manokwari : https://github.com/BlankOn/manokwari ● GeoBlankOn : https://github.com/BlankOn/Peta ● SuperMario :https://github.com/syaimif/FullScreenMario