{"id":17231,"date":"2015-09-18T05:01:25","date_gmt":"2015-09-17T19:01:25","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=17231"},"modified":"2016-10-12T21:24:43","modified_gmt":"2016-10-12T11:24:43","slug":"xml-to-html-data-intelligence-translation-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/xml-to-html-data-intelligence-translation-tutorial\/","title":{"rendered":"XML to HTML Data Intelligence Translation Tutorial"},"content":{"rendered":"
\"XML<\/a>

XML to HTML Data Intelligence Translation Tutorial<\/p><\/div>\n

Yesterday, with HTML Data Intelligence More Like XML Primer Tutorial<\/a> as shown below, we talked about the HTML5<\/a> Global Attributes under the umbrella of HTML data-* Attribute<\/a> usage.<\/p>\n

You’d be right in guessing that now we want to try some XML<\/a> to HTML translations making use of this.<\/p>\n

Along the way doing this we want to mention PHP’s simplexml methods you can read about at this link<\/a>, which are powerful if you know what the data structure involved is. But today we are writing a home grown translator (or XML parser) to translate XML to HTML in a more “act dumb” generic sense, where you assume no knowledge of the data structure. We acknowledge that it may fall over for some data, especially as the concept is in its infancy.<\/p>\n

The HTML code you can call xml_to_html.html<\/a> supervises some PHP you could call xml_to_html.php<\/a> (which has the dual purpose of demonstrating simplexml and accepting POSTed user defined data (to translate) from the HTML form of its parent). The parent offers two forms for …<\/p>\n

    \n
  1. small amounts of XML data using method=’GET’ to xml_to_html.html<\/li>\n
  2. large amounts of XML data using method=’POST’ to xml_to_html.php (which clones xml_to_html.html to some user specific HTML that it calls)<\/li>\n<\/ol>\n

    Our tutorial today thanks w3schools for some XML examples from this link<\/a> and that link<\/a>.<\/p>\n

    So please try a live run<\/a> and do some XML to HTML translations that try to retain “data intelligence”, in sympathy with the HTML DOM getAttribute<\/a> method available in Javascript.<\/p>\n

    \n

    Previous relevant HTML Data Intelligence More Like XML Primer Tutorial<\/a> is shown below.<\/p>\n

    \"HTML<\/a>

    HTML Data Intelligence More Like XML Primer Tutorial<\/p><\/div>\n

    Today we wanted to start you thinking on the subject of “data with intelligence”. Maybe you think of HTML as representing “data with intelligence” because it brings you, via the Internet so much great information. That is true, but generally speaking, it is carrying “display” information, if it has not been massaged through a server side language, nor through some Ajax “smarts” that will pick up “data intelligence”. The bottom line is, generally speaking, it is not carrying the structured “intelligence” (the protocols<\/a>) XML<\/a> and JSON<\/a> (often) carry.<\/p>\n

    However, HTML can be structured to be more like XML, and we delve into a bit of this by talking about a set of HTML Global Attributes that were added when HTML5<\/a> came out, which you can read more about with the link HTML data-* Attribute<\/a>.<\/p>\n

    We have a dual purpose with today’s illustrative …<\/p>\n

      \n
    1. HTML sidtest.html<\/a><\/li>\n
    2. Javascript sidtest.js<\/a><\/li>\n<\/ol>\n

      … which is …<\/p>\n

        \n
      1. this “poking our toes into the water” approach to HTML data-* Attribute<\/a> HTML “data with intelligence” (as illustrated, in the code with all the HTML element data-type=”[HTML-element-type]”<\/i> usages (shaken, not stirred<\/a>) throughout, like (the header <head> … <\/head> section’s) …
        \n
        \n<title data-type=\"title\"<\/i> id='myhtitle' title='myhtitle title'>HTML Header Id and Title Proof of Concept Ideas of Source Code Printout - RJM Programming - September, 2015<\/title>
        \n<\/code>
        \n… and how, subsequently, you could use Javascript code like …
        \n
        \n var huh=document.getElementById('myhtitle');
        \n alert('Your HTML tag ' + huh.        getAttribute<\/a>('data-type') + ' element has content as per ' + huh.innerHTML);
        \n<\/code>
        \n… to access this information) …<\/li>\n
      2. getting used to the idea that all HTML elements, even those in the header <head> … <\/head> section (as well as the usual body <body> … <\/body> section) can be assigned id= (and that you can make use of these) … even inline Javascript <script> … <\/script> elements<\/li>\n<\/ol>\n

        How are these related? It’s all to do with using Javascript to make use of the HTML slightly<\/i> less in terms of a carrier of “display” information, and slightly<\/i> more as, possibly, also a carrier of “data intelligence”. Even though there is, now with HTML5, the existence of HTML data-* Attribute<\/a> to help facilitate some of these thoughts for the use of some “data intelligence” with HTML, you should go easy on this, perhaps, as the most efficient way to proceed when there is lots of data, as XML was designed for “data intelligence” that is “big time” or dealing with large data sets, but you may have a modest application where you want to “carry” that small amount of database “data intelligence” with you in your HTML, and maybe “kill two birds with one stone”, those two birds being the “display bird” and the “data intelligence bird” … please note, no magpies were hurt during the construction of this blog posting<\/i>.<\/p>\n

        The functionality of today’s live run<\/a> is to “print out” (on a web browser) the coding of our sidtest.html<\/a>, and so, by running it, you’ll see what we mean.<\/p>\n

        If this was interesting you may be interested in this<\/a> too.<\/p>\n