{"id":14605,"date":"2015-05-03T05:01:29","date_gmt":"2015-05-02T19:01:29","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=14605"},"modified":"2015-05-02T22:45:03","modified_gmt":"2015-05-02T12:45:03","slug":"html5-meter-element-word-count-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/html5-meter-element-word-count-tutorial\/","title":{"rendered":"HTML5 Meter Element Word Count Tutorial"},"content":{"rendered":"
\"HTML5<\/a>

HTML5 Meter Element Word Count Tutorial<\/p><\/div>\n

HTML5 brought with it many great features to front-end work on the internet in HTML, and today, we continue on from the previous HTML5 Meter Element Progress Bar Tutorial<\/a> as shown below, we talk about one of the newly introduced, and very useful, elements called “<meter>”<\/i><\/a>, and use a lot of the same methods with a different “web application” engine (and lots of the knowledge from PHP\/HTML Google Chart Wordtree Chart Local File Tutorial<\/a>), to show webpage content word counts (with the weakness that only English character sets are catered for … apologies for that), with a progress bar, and a (Google Chart) Bar Chart. By the way, the “<meter>”<\/i> element does not work with mobile Safari, as one example, and you can read more about this here<\/a>.<\/p>\n

As we outlined back then, that at its core, the “<meter>”<\/i> element represents a “fraction of one” or perhaps you can think this as a “percentage of one hundred”, and, as you’d guess, a generic “xth<\/sup> of y for the fraction x\/y” idea … where “y” could be your “max” parameter, and perhaps your “min” parameter is zero. Today we extend that “fraction” concept to being a “fraction” of completion time, as a progress bar.<\/p>\n

Probably don’t need to tell you that progress bars are popular features of the internet. Sometimes, it can be quite hard to predict when some jobs will finish … suppose you base it on a file size … but this may not take into account record sizes or intensity of calculation for particular data record types etcetera etcetera etcetera.<\/p>\n

With our progress bar today we analyze the words used in a web page’s content and show a few of the most commonly used words (the length of which you can restrict a bit, as the user) appearing in that webpage and present this as a (Google Chart) bar chart, that changes along with the progress bar “progressing”.<\/p>\n

So take a look at the PHP code in content_bargraph.php<\/a>, or a live run<\/a>, for your perusal. Hope you get to try out the ideas presented today with a home-grown project of your own.<\/p>\n

\n

Previous relevent HTML5 Meter Element Progress Bar Tutorial<\/a> is shown below.<\/p>\n

\"HTML5<\/a>

HTML5 Meter Element Progress Bar Tutorial<\/p><\/div>\n

HTML5 brought with it many great features to front-end work on the internet in HTML, and today, we continue on from yesterday’s HTML5 Meter Element Primer Tutorial<\/a> as shown below, we talk about one of the newly introduced, and very useful, elements called “<meter>”<\/i><\/a>. By the way, the “<meter>”<\/i> element does not work with mobile Safari, for instance, and you can read more about this here<\/a>.<\/p>\n

As we outlined yesterday, at its core the “<meter>”<\/i> element represents a “fraction of one” or perhaps you can think this as a “percentage of one hundred”, and, as you’d guess, a generic “xth<\/sup> of y for the fraction x\/y” idea … where “y” could be your “max” parameter, and perhaps your “min” parameter is zero. Today we extend that “fraction” concept to being a “fraction” of completion time, as a progress bar.<\/p>\n

Progress bars appear all over the internet. Personally I love the ones that go backwards, just like those mileposts that increase as you head closer to a town. In defense of this occasional progress bar behaviour, it can be quite hard to predict when some jobs will finish … suppose you base it on a file size … but this may not take into account record sizes or intensity of calculation for particular data record types etcetera etcetera etcetera.<\/p>\n

With our progress bar today we analyze the pixels of a user-defined image file and show a few of the most commonly occurring pixel colours appearing in that image (file) and present this as a (Google Chart) bar chart, that changes along with the progress bar “progressing”.<\/p>\n

So take a look at the PHP code in image_bargraph.php<\/a>, or a live run<\/a>, for your perusal. A useful PHP link for this was this one<\/a> … so, thanks. Hope it helps with a project idea you are mulling over now.<\/p>\n

Stop Press:<\/b> The next tutorial in our sequence called HTML5 Meter Element Word Count Tutorial<\/a> led to some thinking causing changes to our code above which you can see with the image_bargraph.php<\/a> link.<\/p>\n

\n

Previous relevant HTML5 Meter Element Primer Tutorial<\/a> is shown below.<\/p>\n

\"HTML5<\/a>

HTML5 Meter Element Primer Tutorial<\/p><\/div>\n

HTML5 brought with it many great features to front-end work on the internet in HTML, and today we talk about one of the newly introduced, and very useful, elements called “<meter>”<\/i><\/a>.<\/p>\n

At its core the “<meter>”<\/i> element represents a “fraction of one” or perhaps you can think this as a “percentage of one hundred”, and, as you’d guess, a generic “xth<\/sup> of y for the fraction x\/y” idea … where “y” could be your “max” parameter, and perhaps your “min” parameter is zero.<\/p>\n

This element is useful to represent a numerical concept graphically (like a ratio), something we do today with …<\/p>\n