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