SlideShare a Scribd company logo
Developing HTML5
Applications for GNOME
by Muhammad M. Syaikhuddin
@syaimif
Depok, May 2015
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
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
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)
CSS?
● CSS stands for Cascading Style Sheets
● CSS defines how HTML elements are to be
displayed
JS or Javascript?
the programming language of HTML and the
Web. Programming makes computers do what
you want them to do
Web and Applications HTML5
Why HTML5 Application?
● Everyone can developing
● there is HTML5 Application Runner (Maleo)
● Everyone can contribute to BlankOn or
Gnome
Architecture HTML5 Application
Developing Simple HTML5
Application
<!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
config.xml
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
HTML5 Application Runner
Maleo
source code -> https://github.com/BlankOn/maleo
reposatory BlankOn -> http://arsip.blankonlinux.or.
id/blankon/pool/main/m/maleo/
HTML5 Applications in
BlankOn
Manokwari
GeoBlankOn-Peta
HangOnMan
Source Code HTML5 Applications
● Manokwari :
https://github.com/BlankOn/manokwari
● GeoBlankOn :
https://github.com/BlankOn/Peta
● SuperMario :
https://github.com/syaimif/FullScreenMario
The End
contact :
syaimif@di.blankon.in
@syaimif

More Related Content

What's hot

How to collaborate with the gvSIG project
How to collaborate with the gvSIG projectHow to collaborate with the gvSIG project
How to collaborate with the gvSIG project
Jorge Sanz
 
Monolithic installs VS single responsibilities networks
Monolithic installs VS single responsibilities networksMonolithic installs VS single responsibilities networks
Monolithic installs VS single responsibilities networks
Fedir RYKHTIK
 
GlobalLogic University Project Vision
GlobalLogic University Project VisionGlobalLogic University Project Vision
GlobalLogic University Project Vision
GlobalLogic Ukraine
 
Innovation 2
Innovation 2Innovation 2
Innovation 2
misspilkington
 
Innovation group 1 v2
Innovation group 1 v2Innovation group 1 v2
Innovation group 1 v2
misspilkington
 
Implementing corporate Design Systems in React
Implementing corporate Design Systems in ReactImplementing corporate Design Systems in React
Implementing corporate Design Systems in React
Ignacio Velazquez
 
Open Lesson How We Built Guide Me Right - Open Campus Tiscali
Open Lesson How We Built Guide Me Right - Open Campus TiscaliOpen Lesson How We Built Guide Me Right - Open Campus Tiscali
Open Lesson How We Built Guide Me Right - Open Campus Tiscali
Riccardo Sirigu
 
JDay Sevilla 2015 - Mobile app development for Joomla
JDay Sevilla 2015 - Mobile app development for JoomlaJDay Sevilla 2015 - Mobile app development for Joomla
JDay Sevilla 2015 - Mobile app development for Joomla
Extly Extensions - JoomGap
 

What's hot (8)

How to collaborate with the gvSIG project
How to collaborate with the gvSIG projectHow to collaborate with the gvSIG project
How to collaborate with the gvSIG project
 
Monolithic installs VS single responsibilities networks
Monolithic installs VS single responsibilities networksMonolithic installs VS single responsibilities networks
Monolithic installs VS single responsibilities networks
 
GlobalLogic University Project Vision
GlobalLogic University Project VisionGlobalLogic University Project Vision
GlobalLogic University Project Vision
 
Innovation 2
Innovation 2Innovation 2
Innovation 2
 
Innovation group 1 v2
Innovation group 1 v2Innovation group 1 v2
Innovation group 1 v2
 
Implementing corporate Design Systems in React
Implementing corporate Design Systems in ReactImplementing corporate Design Systems in React
Implementing corporate Design Systems in React
 
Open Lesson How We Built Guide Me Right - Open Campus Tiscali
Open Lesson How We Built Guide Me Right - Open Campus TiscaliOpen Lesson How We Built Guide Me Right - Open Campus Tiscali
Open Lesson How We Built Guide Me Right - Open Campus Tiscali
 
JDay Sevilla 2015 - Mobile app development for Joomla
JDay Sevilla 2015 - Mobile app development for JoomlaJDay Sevilla 2015 - Mobile app development for Joomla
JDay Sevilla 2015 - Mobile app development for Joomla
 

Similar to GNOME.Asia 2015 : Developing HTML5 Applications for GNOME

WebRTC World Trip 2018_20181101@rtc_korea
WebRTC World Trip 2018_20181101@rtc_koreaWebRTC World Trip 2018_20181101@rtc_korea
WebRTC World Trip 2018_20181101@rtc_korea
sung young son
 
Web Technology and Standards Tutorial
Web Technology and Standards Tutorial Web Technology and Standards Tutorial
Web Technology and Standards Tutorial
Jonathan Jeon
 
21 web-developement-trends
21 web-developement-trends21 web-developement-trends
21 web-developement-trends
Khairul Aizat Kamarudzzaman
 
ASP.NET 5: What's the Big Deal
ASP.NET 5: What's the Big DealASP.NET 5: What's the Big Deal
ASP.NET 5: What's the Big Deal
Jim Duffy
 
Javascript as a target language - GWT kickoff - part1/2
Javascript as a target language - GWT kickoff - part1/2Javascript as a target language - GWT kickoff - part1/2
Javascript as a target language - GWT kickoff - part1/2
JooinK
 
HTML5
HTML5HTML5
Apache Flex and the imperfect Web
Apache Flex and the imperfect WebApache Flex and the imperfect Web
Apache Flex and the imperfect Web
masuland
 
Flutter vs Ionic: Which framework is better for cross platform application d...
Flutter vs Ionic: Which framework is better  for cross platform application d...Flutter vs Ionic: Which framework is better  for cross platform application d...
Flutter vs Ionic: Which framework is better for cross platform application d...
Mobiloitte
 
Open Apereo - Web components workshop
Open Apereo - Web components workshopOpen Apereo - Web components workshop
Open Apereo - Web components workshop
btopro
 
HTML5 Presentation at Online Publishers Association Tech Conference 2011-03
HTML5 Presentation at Online Publishers Association Tech Conference 2011-03HTML5 Presentation at Online Publishers Association Tech Conference 2011-03
HTML5 Presentation at Online Publishers Association Tech Conference 2011-03
Rajiv Pant
 
jQueryMobile Jump Start
jQueryMobile Jump StartjQueryMobile Jump Start
jQueryMobile Jump Start
Haim Michael
 
Single page apps a bleeding edge new concept or a revived old one?
Single page apps   a bleeding edge new concept or a revived old one?Single page apps   a bleeding edge new concept or a revived old one?
Single page apps a bleeding edge new concept or a revived old one?
Omer Dawelbeit
 
2014 HTML5 총정리
2014 HTML5 총정리2014 HTML5 총정리
2014 HTML5 총정리
Wonsuk Lee
 
Making sense of the front-end, for PHP developers
Making sense of the front-end, for PHP developersMaking sense of the front-end, for PHP developers
Making sense of the front-end, for PHP developers
Lewiz
 
PHP, Java EE & .NET Comparison
PHP, Java EE & .NET ComparisonPHP, Java EE & .NET Comparison
PHP, Java EE & .NET Comparison
Haim Michael
 
Everything you need to know about HTML5 in 15 min
Everything you need to know about HTML5 in 15 minEverything you need to know about HTML5 in 15 min
Everything you need to know about HTML5 in 15 min
Edgar Parada
 
HTML5 Jump Start
HTML5 Jump StartHTML5 Jump Start
HTML5 Jump Start
Haim Michael
 
Chapter 2 introduction to html5
Chapter 2 introduction to html5Chapter 2 introduction to html5
Chapter 2 introduction to html5
nobel mujuji
 
OU Player APG Meeting 2012
OU Player APG Meeting 2012OU Player APG Meeting 2012
OU Player APG Meeting 2012
Nick Freear
 
Drupal 8, Don’t Be Late (Enterprise Orgs, We’re Looking at You)
Drupal 8, Don’t Be Late (Enterprise Orgs, We’re Looking at You)Drupal 8, Don’t Be Late (Enterprise Orgs, We’re Looking at You)
Drupal 8, Don’t Be Late (Enterprise Orgs, We’re Looking at You)
Phase2
 

Similar to GNOME.Asia 2015 : Developing HTML5 Applications for GNOME (20)

WebRTC World Trip 2018_20181101@rtc_korea
WebRTC World Trip 2018_20181101@rtc_koreaWebRTC World Trip 2018_20181101@rtc_korea
WebRTC World Trip 2018_20181101@rtc_korea
 
Web Technology and Standards Tutorial
Web Technology and Standards Tutorial Web Technology and Standards Tutorial
Web Technology and Standards Tutorial
 
21 web-developement-trends
21 web-developement-trends21 web-developement-trends
21 web-developement-trends
 
ASP.NET 5: What's the Big Deal
ASP.NET 5: What's the Big DealASP.NET 5: What's the Big Deal
ASP.NET 5: What's the Big Deal
 
Javascript as a target language - GWT kickoff - part1/2
Javascript as a target language - GWT kickoff - part1/2Javascript as a target language - GWT kickoff - part1/2
Javascript as a target language - GWT kickoff - part1/2
 
HTML5
HTML5HTML5
HTML5
 
Apache Flex and the imperfect Web
Apache Flex and the imperfect WebApache Flex and the imperfect Web
Apache Flex and the imperfect Web
 
Flutter vs Ionic: Which framework is better for cross platform application d...
Flutter vs Ionic: Which framework is better  for cross platform application d...Flutter vs Ionic: Which framework is better  for cross platform application d...
Flutter vs Ionic: Which framework is better for cross platform application d...
 
Open Apereo - Web components workshop
Open Apereo - Web components workshopOpen Apereo - Web components workshop
Open Apereo - Web components workshop
 
HTML5 Presentation at Online Publishers Association Tech Conference 2011-03
HTML5 Presentation at Online Publishers Association Tech Conference 2011-03HTML5 Presentation at Online Publishers Association Tech Conference 2011-03
HTML5 Presentation at Online Publishers Association Tech Conference 2011-03
 
jQueryMobile Jump Start
jQueryMobile Jump StartjQueryMobile Jump Start
jQueryMobile Jump Start
 
Single page apps a bleeding edge new concept or a revived old one?
Single page apps   a bleeding edge new concept or a revived old one?Single page apps   a bleeding edge new concept or a revived old one?
Single page apps a bleeding edge new concept or a revived old one?
 
2014 HTML5 총정리
2014 HTML5 총정리2014 HTML5 총정리
2014 HTML5 총정리
 
Making sense of the front-end, for PHP developers
Making sense of the front-end, for PHP developersMaking sense of the front-end, for PHP developers
Making sense of the front-end, for PHP developers
 
PHP, Java EE & .NET Comparison
PHP, Java EE & .NET ComparisonPHP, Java EE & .NET Comparison
PHP, Java EE & .NET Comparison
 
Everything you need to know about HTML5 in 15 min
Everything you need to know about HTML5 in 15 minEverything you need to know about HTML5 in 15 min
Everything you need to know about HTML5 in 15 min
 
HTML5 Jump Start
HTML5 Jump StartHTML5 Jump Start
HTML5 Jump Start
 
Chapter 2 introduction to html5
Chapter 2 introduction to html5Chapter 2 introduction to html5
Chapter 2 introduction to html5
 
OU Player APG Meeting 2012
OU Player APG Meeting 2012OU Player APG Meeting 2012
OU Player APG Meeting 2012
 
Drupal 8, Don’t Be Late (Enterprise Orgs, We’re Looking at You)
Drupal 8, Don’t Be Late (Enterprise Orgs, We’re Looking at You)Drupal 8, Don’t Be Late (Enterprise Orgs, We’re Looking at You)
Drupal 8, Don’t Be Late (Enterprise Orgs, We’re Looking at You)
 

Recently uploaded

Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
innovationoecd
 
UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6
DianaGray10
 
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
Neo4j
 
Removing Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software FuzzingRemoving Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software Fuzzing
Aftab Hussain
 
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
SOFTTECHHUB
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
名前 です男
 
UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5
DianaGray10
 
20240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 202420240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 2024
Matthew Sinclair
 
National Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practicesNational Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practices
Quotidiano Piemontese
 
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Albert Hoitingh
 
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdfObservability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Paige Cruz
 
Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1
DianaGray10
 
Mind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AIMind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AI
Kumud Singh
 
Generative AI Deep Dive: Advancing from Proof of Concept to Production
Generative AI Deep Dive: Advancing from Proof of Concept to ProductionGenerative AI Deep Dive: Advancing from Proof of Concept to Production
Generative AI Deep Dive: Advancing from Proof of Concept to Production
Aggregage
 
Uni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdfUni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems S.M.S.A.
 
Full-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalizationFull-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalization
Zilliz
 
Introduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - CybersecurityIntroduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - Cybersecurity
mikeeftimakis1
 
A tale of scale & speed: How the US Navy is enabling software delivery from l...
A tale of scale & speed: How the US Navy is enabling software delivery from l...A tale of scale & speed: How the US Navy is enabling software delivery from l...
A tale of scale & speed: How the US Navy is enabling software delivery from l...
sonjaschweigert1
 
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Speck&Tech
 
Microsoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdfMicrosoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdf
Uni Systems S.M.S.A.
 

Recently uploaded (20)

Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
 
UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6
 
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
 
Removing Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software FuzzingRemoving Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software Fuzzing
 
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
 
UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5
 
20240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 202420240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 2024
 
National Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practicesNational Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practices
 
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
 
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdfObservability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
 
Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1
 
Mind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AIMind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AI
 
Generative AI Deep Dive: Advancing from Proof of Concept to Production
Generative AI Deep Dive: Advancing from Proof of Concept to ProductionGenerative AI Deep Dive: Advancing from Proof of Concept to Production
Generative AI Deep Dive: Advancing from Proof of Concept to Production
 
Uni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdfUni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdf
 
Full-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalizationFull-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalization
 
Introduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - CybersecurityIntroduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - Cybersecurity
 
A tale of scale & speed: How the US Navy is enabling software delivery from l...
A tale of scale & speed: How the US Navy is enabling software delivery from l...A tale of scale & speed: How the US Navy is enabling software delivery from l...
A tale of scale & speed: How the US Navy is enabling software delivery from l...
 
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
 
Microsoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdfMicrosoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdf
 

GNOME.Asia 2015 : Developing HTML5 Applications for GNOME