HTML to valid XML code using tidy.

Sometimes you copy HTML source code from a web page that is not valid. Some tools, like mine htmlminimizator requires valid XML fragments to work. In this case we need to transform HTML sources to valid XML. I'm doing it fine with the tidy utility like this.

First I suppose you have your HTML code fragment in a file called test1.html, then I perform :

tidy -asxml -ashtml -utf8 test1.html 

Hope that can be of help to others in a similar situation.

RaphaelMarkup - XML syntax for great drawing Javascript API

My new pet project is http://code.google.com/p/raphaelmarkup/, let me present it to you:


Some links:

feature examples: http://cancerbero.vacau.com/raphaelmarkup/src/doc/examples.html

different ways of including raphael XML in HTML documents:
http://cancerbero.vacau.com/raphaelmarkup/src/doc/usage.html

documented raphael XML document definition in XML Schema:
http://cancerbero.vacau.com/raphaelmarkup/src/raphael.xsd




resume:

Write and validate your raphael drawings in xml, stylize with CSS like
syntax. Access any raphael paper instances in an XML DOM using jquery.
Use CSS 3 selectors for locating your shapes in the raphael DOM.

long description:

raphaël javascript library has a portable and nice API for drawing
vector graphics with javascript. This project, RaphaelMarkup, try to
bring declarative parts of raphaël API to XML so you can draw with XML
and CSS. Some important things that raphaelmarkup supports:

* RaphaelMarkup define a XML document type for writing raphaël in
XML. A XML Schema document definition is provided so users can
validate their xml drawings.
* It contains a javascript renderer for easily render xml drawings
in your HTML documents.
Provides several ways of including XML drawings in HTML documents,
like embedding code, ajax, XSL stylesheets, etc.
* Creates an XML DOM that can be manipulated programatically with
tools like jquery. and then easily update the drawing with the changes
in the DOM
* CSS like syntax for raphaël shapes attributes. Raphael elements
support id and class attributes, and CSS3 selectors are supported.
Note that this is not CSS, some cascading rules are different and
raphael attributes are not valid CSS.
* Easy scripting for rendered documents.
* Utilities for easy export any raphael paper to XML drawing code.

RaphaelMarkup depends on raphael and jquery libraries. jquery is used
for XML parsing and XML DOM Manipulation.

The project just started, many things still need revision and some
parts of raphaeljs api still need works. Expect improvements soon! I'm
announcing it here for feedback so please if you have any suggestions.
Expect project inprovements soon!

jQuery: accessing XML doms created with $.parseXML and problems with append(string)

In the project raphaelmarkup I'm exploiting jquery API for loading and manipulating XML. First I parse the XML sources and then I can use jquery API for accessing and manipulating it. A documented example:

//some xml string example. the XML must not have any <!doctype definition
var xmlStr = '<p><o><b></b></o><b></b></p>';

//create a jquery dom object for that xml document.
var xmldoc1 = $.parseXML(xmlStr); //the native XMLDocument object
var dom = $(xmldoc1); //the jquery DOM object that we will use fopr accessing

//finds some element and sets attributes using the jquery API
dom.find("p>o").attr("attr1", "val1");

This has some advantages: its uses the internal XML browser parser, the jquery API is a portable way of accessing the XML DOM.

Now I want to document a problem that I had with this using jquery's append(String) method.
In the previous example, dom.find("p").append("hello) won't work. This is mainly because append(String) method will create the new elements using the global html document (the global "document variable) instead or using our XML document object. So we must do the following for appending an element :

var g1 = $(xmldoc1.createElement("g"));
dom.find("p>o").append(g1);
g1.test("hello");

the complete example based on qunit (ok() is an assertEquals()) :

var xmlStr = '
'
var dom = $($.parseXML(xmlStr));

ok(dom.find("b").size()==2, "jquery xml dom 1"); //OK

//set attribute and check -
dom.find("p").attr("attr1", "val1");
ok(dom.find("p").attr("attr1")=="val1", "jquery xml dom 12");
ok($("p", dom).size()==1, "13");//OK 

/*  a bug, using dom.find("p").append('<d>hello</d>') won't work. it seems 
jquery won't let creation of non HTML valid code. */

dom.find("p").append('<d>hello</d>'); //this doesn't work
ok(dom.find("d").size()==1, "jquery xml dom 2"); //FAIL!

/* but this way works. Don't use append(string) but create the element
manually, and pass the dom object to append() */

var c1 = $(dom.get(0).createElement("c")); //make sure new el is created in our xml doc
dom.find("p").append(c1);
ok($("c", dom).size()==1, "14"); //OK

A function for creation of arbitrary xml elements :

/**
 * create a new element in raphael XML dom
 * @param parent an html dom or jquery selector or object 
 * where to append the created child.
 * @return the created jquery dom element 
 */
createElement: function(parent, tagName, attrs) {
 parent=$(parent);
 var xmldoc = null;
 //if they send us a document, we append it on the documentElement
 
 if(rm.isDocument(parent)) {
  parent=$(parent.prop("documentElement"));
 } 
 xmldoc=parent.prop("ownerDocument");
 
 var e = $(xmldoc.createElement(tagName));
 if(attrs)
  e.attr(attrs);
 
 parent.append(e);
 
 return e;
},

Being a great tool for parsing and accessing xml documents in xhtml documents, It is a shame that jquery don't let to use arbitrary xml markup strings in methods like append, prepend, etc. :( But it seems that it is a thing we can live without