wiki:Notes/HTML5

HTML 5

Have things progressed to the point where is it easier to do a UI development with HTML 5 than with Glade, pyGTK, pyWX, Tkinter etc. etc. ?

For simple applications, the answer may be 'yes'. Not stuck a a particular desktop environment. A Very Big plus.

It seems like ever time I 'revolve around' on this, the answer comes up HTML5 ... HTML5 ...

http://en.wikipedia.org/wiki/HTML5

The following is a cursory list of differences and some specific examples.

New parsing rules: oriented towards flexible parsing and compatibility; not based on SGML

Ability to use inline SVG and MathML in text/html

New elements: article, aside, audio, bdi, canvas, command, data, datalist, details, embed, figcaption, figure, footer, header, keygen, mark, meter, nav, output, progress, rp, rt, ruby, section, source, summary, time, track, video, wbr

New types of form controls: dates and times, email, url, search, number, range, tel, color

New attributes: charset (on meta), async (on script)

Global attributes (that can be applied for every element): id, tabindex, hidden, data-* (custom data attributes)

Deprecated elements will be dropped altogether: acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, strike, tt

Some technologies that were originally defined in HTML5 itself are now defined in separate specifications:

HTML Working Group – HTML Canvas 2D Context

Web Apps WG – Web Messaging, Web Workers, Web Storage, WebSocket API, Server-Sent Events

IETF HyBi WG – WebSocket Protocol

WebRTC WG – WebRTC

W3C Web Media Text Tracks CG – WebVTT

http://en.wikipedia.org/wiki/Category:HTML5

https://html5.org/

https://platform.html5.org/

Desktop

http://clintberry.com/2013/html5-apps-desktop-2013/

TideSDK has so much potential. They have a great looking website and a good set of tools. Of all the solutions I looked at, TideSDK has the easiest method for packaging your app ...

If you are a nodeJS fan, AppJS is the start of something awesome. It runs allows you to interact with desktop windows via JavaScript in a nodeJS application ...

The Brackets Shell is a customized version of Chromium Embedded Framework (CEF) that was created to run the Brackets IDE on the desktop. But this shell has some great features and is general enough to allow you to modify it and use it for your own project.

Tutorials

http://www.w3schools.com/html/html5_intro.asp

http://www.w3.org/TR/html5/dom.html#dom

Article And Section

Article

https://www.w3.org/TR/html5/sections.html#the-article-element

The article element represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

Section

https://www.w3.org/TR/html5/sections.html#the-section-element

The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content. The theme of each section should be identified, typically by including a heading (h1-h6 element) as a child of the section element ...

... A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline.

About Outlines

https://www.w3.org/TR/html5/sections.html#outlines

... This section defines an algorithm for creating an outline for a sectioning content element or a sectioning root element. It is defined in terms of a walk over the nodes of a DOM tree, in tree order, with each node being visited when it is entered and when it is exited during the walk.

Mozilla

https://developer.mozilla.org/en-US/demos/

https://developer.mozilla.org/en-US/docs/Web/HTML/Element

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5

Designed to be usable by all Open Web developers, this reference page links to numerous resources about HTML5 technologies, classified into several groups based on their function.

Semantics: allowing you to describe more precisely what your content is.

Connectivity: allowing you to communicate with the server in new and innovative ways.

Offline & Storage: allowing webpages to store data on the client-side locally and operate offline more efficiently.

Multimedia: making video and audio first-class citizens in the Open Web.

2D/3D Graphics & Effects: allowing a much more diverse range of presentation options.

Performance & Integration: providing greater speed optimization and better usage of computer hardware.

Device Access: allowing for the usage of various input and output devices.

Styling: letting authors write more sophisticated themes.

Web Sockets

http://en.wikipedia.org/wiki/WebSocket

WebSocket is a protocol providing full-duplex communications channels over a single TCP connection ...

To establish a WebSocket connection, the client sends a WebSocket handshake request, for which the server returns a WebSocket handshake response, as shown in the following example:

Client request:

GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
Origin: http://example.com

Server response:

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
Sec-WebSocket-Protocol: chat

The handshake resembles HTTP so that servers can handle HTTP connections as well as WebSocket connections on the same port.

http://en.wikipedia.org/wiki/Comparison_of_WebSocket_implementations

http://en.wikipedia.org/wiki/Push_technology

Push, or server push, describes a style of Internet-based communication where the request for a given transaction is initiated by the publisher or central server ...

Push services are often based on information preferences expressed in advance. This is called a publish/subscribe model. A client "subscribes" to various information "channels" provided by a server; whenever new content is available on one of those channels, the server pushes that information out to the client.

Synchronous conferencing and instant messaging are typical examples of push services. Chat messages and sometimes files are pushed to the user as soon as they are received by the messaging service. Both decentralised peer-to-peer programs and centralised programs (such as IRC or XMPP) allow pushing files, which means the sender initiates the data transfer rather than the recipient ...

Email may also be a push system: The SMTP protocol is a push protocol (see Push e-mail) ...

WebSocket MVC

http://tonygaitatzis.tumblr.com/post/61028281192/html5-and-javascript-websockets-using-mvc

https://github.com/backupbrain/mvc-javascript-websocket-client

This code is a companion to my tutorial, HTML5 and JavaScript WebSockets using MVC

HTML5 Rocks

http://www.html5rocks.com/en/tutorials/

http://www.html5rocks.com/en/tutorials/websockets/basics/

You open up a WebSocket connection simply by calling the WebSocket constructor:

var connection = new WebSocket('ws://html5rocks.websocket.org/echo', ['soap', 'xmpp']);

Notice the ws:. This is the new URL schema for WebSocket connections ...

// When the connection is open, send some data to the server
connection.onopen = function () {
  connection.send('Ping'); // Send the message 'Ping' to the server
};

// Log errors
connection.onerror = function (error) {
  console.log('WebSocket Error ' + error);
};

// Log messages from the server
connection.onmessage = function (e) {
  console.log('Server: ' + e.data);
};

... Keeping a large number of connections open at the same time requires an architecture that receives high concurrency at a low performance cost. Such architectures are usually designed around either threading or so called non-blocking IO.

Server Side Implementations:

Node.js

Socket.IO
WebSocket-Node
ws

Java

Jetty

Ruby

EventMachine

Python

pywebsocket
Tornado

How Not To Do HTML5

Does your machine have gigabytes of memory and multiple multi-gigahertz CPUs ? Congratulations, you have a supercomputer.

But , wait a mo', let's suck down the capacity of your super computer with JavaScript doing unnecessary crap in the browser !!! Let's eat the capacity of your CPU so that your machine won't even respond to basic clicks and keystrokes [ no exaggeration ] !!!

What a great idea - I can hear the money rolling in already ;-)

Are the web sites running these machine-eating scripts using t of advanced marketing tool in your browser or are they conducting malicious attacks attempting to seize your computer ? Do they think that trashing your machine will help the company to sell more product ? I can't decide, it's a grey area.

I can not imagine what machine the JavaScript developers of these sites are working on .... some sort of cloud virtualization with multi-teraflops to burn ?

Or maybe it's just the result of crooked web developers ripping off their clients, although it's hard to see what they are getting out of it. Maybe they get to charge more for developing these enormous piles of crap that don't work than for developing simpler web sites that actually work and make money for the clients ?

For that matter, what are the companies sponsoring these sites thinking of ? Don't they ever visit their own web site and try to use it ? I don't know, the whole thing's a mystery to me.

Also See

https://github.com/html5lib

https://github.com/html5lib/html5lib-python

html5lib is a pure-python library for parsing HTML.

It is designed to conform to the WHATWG HTML specification, as is implemented by all major web browsers.

http://stackoverflow.com/questions/12961536/html5-ui-frameworks

http://montagestudio.com/montagejs/

MontageJS is a modern frontend HTML5 framework that supports creating single-page applications—fast.

https://github.com/montagejs/montage

MontageJS simplifies the development of rich HTML5 applications by providing modular components, real-time two-way data binding, object serialization with DOM mapping, event handling, a managed component draw cycle, CommonJS dependency management, and many more conveniences to help build robust single-page web applications.

http://docs.montagestudio.com/montagejs/hello-montagejs.html

http://docs.montagestudio.com/montagejs/

Getting one CPU at 100% for some demos !!!

NodeJS

PythonGUIApps#Kivy

Search wiki for 'html5'

Last modified 8 weeks ago Last modified on 03/07/2017 06:49:54 PM