Developing HTML5 Apps for GNOME

•

0 gefällt mir•1,058 views

This document discusses developing HTML5 applications for GNOME. It provides background on the author and a brief history of HTML5. It then defines HTML5, CSS, and JavaScript and their roles in web and HTML5 applications. The document explains why one would develop an HTML5 application and outlines the basic architecture and process for creating a simple HTML5 application. It also introduces Maleo, an HTML5 application runner, and provides examples of HTML5 applications developed for the BlankOn Linux distribution along with links to their source codes.

Technologie

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

Why HTML5 Application?
● Everyone can developing
● there is HTML5 Application Runner (Maleo)
● Everyone can contribute to BlankOn or
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

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/

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

Empfohlen

Web Development with VueJS : The Complete GuideSam Dias

J2EE6_DevelopWebApplications_00_PreampleMichael Mountrakis

[Hkdug] #20151219 drupal 8 release party - drupal 8 multilingual overviewFrancis Yan

DrupalCamp London 2016 session: The Drupal UX Elephant in the RoomKeith Jay

WordPress News and #SaigonWordPress 2015 - Saigon WordPress - Jan 17, 2015Dat Hoang

J2EE6_DevelopWebServices_00_PreampleMichael Mountrakis

Computer academy STEP Diploma Igor Dudnyk.pdfIgor Dudnyk

Agile work practices and toolsDaniel Lopes

Empfohlen

Web Development with VueJS : The Complete GuideSam Dias

J2EE6_DevelopWebApplications_00_PreampleMichael Mountrakis

[Hkdug] #20151219 drupal 8 release party - drupal 8 multilingual overviewFrancis Yan

DrupalCamp London 2016 session: The Drupal UX Elephant in the RoomKeith Jay

WordPress News and #SaigonWordPress 2015 - Saigon WordPress - Jan 17, 2015Dat Hoang

J2EE6_DevelopWebServices_00_PreampleMichael Mountrakis

Computer academy STEP Diploma Igor Dudnyk.pdfIgor Dudnyk

Agile work practices and toolsDaniel Lopes

How to collaborate with the gvSIG projectJorge Sanz

Monolithic installs VS single responsibilities networksFedir RYKHTIK

GlobalLogic University Project VisionGlobalLogic Ukraine

Innovation 2misspilkington

Innovation group 1 v2misspilkington

Implementing corporate Design Systems in ReactIgnacio Velazquez

Open Lesson How We Built Guide Me Right - Open Campus TiscaliRiccardo Sirigu

JDay Sevilla 2015 - Mobile app development for JoomlaExtly Extensions - JoomGap

WebRTC World Trip 2018_20181101@rtc_koreasung young son

Web Technology and Standards Tutorial Jonathan Jeon

21 web-developement-trendsKhairul Aizat Kamarudzzaman

ASP.NET 5: What's the Big DealJim Duffy

Javascript as a target language - GWT kickoff - part1/2JooinK

HTML5Sanjeev Kumar Jaiswal

Apache Flex and the imperfect Webmasuland

Flutter vs Ionic: Which framework is better for cross platform application d...Mobiloitte

Open Apereo - Web components workshopbtopro

HTML5 Presentation at Online Publishers Association Tech Conference 2011-03Rajiv Pant

jQueryMobile Jump StartHaim Michael

Single page apps a bleeding edge new concept or a revived old one?Omer Dawelbeit

2014 HTML5 총정리Wonsuk Lee

Making sense of the front-end, for PHP developersLewiz

Weitere ähnliche Inhalte

Was ist angesagt?

How to collaborate with the gvSIG projectJorge Sanz

Monolithic installs VS single responsibilities networksFedir RYKHTIK

GlobalLogic University Project VisionGlobalLogic Ukraine

Innovation 2misspilkington

Innovation group 1 v2misspilkington

Implementing corporate Design Systems in ReactIgnacio Velazquez

Open Lesson How We Built Guide Me Right - Open Campus TiscaliRiccardo Sirigu

JDay Sevilla 2015 - Mobile app development for JoomlaExtly Extensions - JoomGap

Was ist angesagt? (8)

How to collaborate with the gvSIG project

Monolithic installs VS single responsibilities networks

GlobalLogic University Project Vision

Innovation 2

Innovation group 1 v2

Implementing corporate Design Systems in React

Open Lesson How We Built Guide Me Right - Open Campus Tiscali

JDay Sevilla 2015 - Mobile app development for Joomla

Ähnlich wie Developing HTML5 Apps for GNOME

WebRTC World Trip 2018_20181101@rtc_koreasung young son

Web Technology and Standards Tutorial Jonathan Jeon

21 web-developement-trendsKhairul Aizat Kamarudzzaman

ASP.NET 5: What's the Big DealJim Duffy

Javascript as a target language - GWT kickoff - part1/2JooinK

HTML5Sanjeev Kumar Jaiswal

Apache Flex and the imperfect Webmasuland

Flutter vs Ionic: Which framework is better for cross platform application d...Mobiloitte

Open Apereo - Web components workshopbtopro

HTML5 Presentation at Online Publishers Association Tech Conference 2011-03Rajiv Pant

jQueryMobile Jump StartHaim Michael

Single page apps a bleeding edge new concept or a revived old one?Omer Dawelbeit

2014 HTML5 총정리Wonsuk Lee

Making sense of the front-end, for PHP developersLewiz

PHP, Java EE & .NET ComparisonHaim Michael

Everything you need to know about HTML5 in 15 minEdgar Parada

HTML5 Jump StartHaim Michael

Chapter 2 introduction to html5nobel mujuji

OU Player APG Meeting 2012Nick Freear

Drupal 8, Don’t Be Late (Enterprise Orgs, We’re Looking at You)Phase2

Ähnlich wie Developing HTML5 Apps for GNOME (20)

WebRTC World Trip 2018_20181101@rtc_korea

Web Technology and Standards Tutorial

21 web-developement-trends

ASP.NET 5: What's the Big Deal

Javascript as a target language - GWT kickoff - part1/2

HTML5

Apache Flex and the imperfect Web

Flutter vs Ionic: Which framework is better for cross platform application d...

Open Apereo - Web components workshop

HTML5 Presentation at Online Publishers Association Tech Conference 2011-03

jQueryMobile Jump Start

Single page apps a bleeding edge new concept or a revived old one?

2014 HTML5 총정리

Making sense of the front-end, for PHP developers

PHP, Java EE & .NET Comparison

Everything you need to know about HTML5 in 15 min

HTML5 Jump Start

Chapter 2 introduction to html5

OU Player APG Meeting 2012

Drupal 8, Don’t Be Late (Enterprise Orgs, We’re Looking at You)

Kürzlich hochgeladen

unit 4 immunoblotting technique complete.pptxBkGupta21

Developer Data Modeling Mistakes: From Postgres to NoSQLScyllaDB

Generative AI for Technical Writer or Information DevelopersRaghuram Pandurangan

Rise of the Machines: Known As Drones...Rick Flair

DSPy a system for AI to Write Prompts and Do Fine TuningLars Bell

"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek SchlawackFwdays

Sample pptx for embedding into website for demoHarshalMandlekar2

DevEX - reference for building teams, processes, and platformsSergiu Bodiu

TeamStation AI System Report LATAM IT Salaries 2024Lonnie McRorey

"Debugging python applications inside k8s environment", Andrii SoldatenkoFwdays

Digital Identity is Under Attack: FIDO Paris Seminar.pptxLoriGlavin3

Ensuring Technical Readiness For Copilot in Microsoft 3652toLead Limited

Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Mark Simos

Training state-of-the-art general text embeddingZilliz

Take control of your SAP testing with UiPath Test SuiteDianaGray10

Artificial intelligence in cctv survelliance.pptxhariprasad279825

The State of Passkeys with FIDO Alliance.pptxLoriGlavin3

Dev Dives: Streamline document processing with UiPath Studio WebUiPathCommunity

Moving Beyond Passwords: FIDO Paris Seminar.pdfLoriGlavin3

What is Artificial Intelligence?????????blackmambaettijean

Kürzlich hochgeladen (20)

unit 4 immunoblotting technique complete.pptx

Developer Data Modeling Mistakes: From Postgres to NoSQL

Generative AI for Technical Writer or Information Developers

Rise of the Machines: Known As Drones...

DSPy a system for AI to Write Prompts and Do Fine Tuning

"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack

Sample pptx for embedding into website for demo

DevEX - reference for building teams, processes, and platforms

TeamStation AI System Report LATAM IT Salaries 2024

"Debugging python applications inside k8s environment", Andrii Soldatenko

Digital Identity is Under Attack: FIDO Paris Seminar.pptx

Ensuring Technical Readiness For Copilot in Microsoft 365

Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)

Training state-of-the-art general text embedding

Take control of your SAP testing with UiPath Test Suite

Artificial intelligence in cctv survelliance.pptx

The State of Passkeys with FIDO Alliance.pptx

Dev Dives: Streamline document processing with UiPath Studio Web

Moving Beyond Passwords: FIDO Paris Seminar.pdf

What is Artificial Intelligence?????????

Developing HTML5 Apps for GNOME

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

2. 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

3. 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

4. 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)

5. CSS? ● CSS stands for Cascading Style Sheets ● CSS defines how HTML elements are to be displayed

6. JS or Javascript? the programming language of HTML and the Web. Programming makes computers do what you want them to do

7. Web and Applications HTML5

8. Why HTML5 Application? ● Everyone can developing ● there is HTML5 Application Runner (Maleo) ● Everyone can contribute to BlankOn or Gnome

9. Architecture HTML5 Application

10. Developing Simple HTML5 Application

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

12. config.xml

13. 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

14. HTML5 Application Runner Maleo source code -> https://github.com/BlankOn/maleo reposatory BlankOn -> http://arsip.blankonlinux.or. id/blankon/pool/main/m/maleo/

15. HTML5 Applications in BlankOn

16. Manokwari

17. GeoBlankOn-Peta

18. HangOnMan

19. Source Code HTML5 Applications ● Manokwari : https://github.com/BlankOn/manokwari ● GeoBlankOn : https://github.com/BlankOn/Peta ● SuperMario : https://github.com/syaimif/FullScreenMario

20. The End contact : syaimif@di.blankon.in @syaimif