HTML5 Meter Element Word Count Tutorial

HTML5 Meter Element Word Count Tutorial

HTML5 Meter Element Word Count Tutorial

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 as shown below, we talk about one of the newly introduced, and very useful, elements called “<meter>”, 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), 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>” element does not work with mobile Safari, as one example, and you can read more about this here.

As we outlined back then, that at its core, the “<meter>” 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 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.

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.

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”.

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


Previous relevent HTML5 Meter Element Progress Bar Tutorial is shown below.

HTML5 Meter Element Progress Bar Tutorial

HTML5 Meter Element Progress Bar Tutorial

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 as shown below, we talk about one of the newly introduced, and very useful, elements called “<meter>”. By the way, the “<meter>” element does not work with mobile Safari, for instance, and you can read more about this here.

As we outlined yesterday, at its core the “<meter>” 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 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.

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.

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”.

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

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


Previous relevant HTML5 Meter Element Primer Tutorial is shown below.

HTML5 Meter Element Primer Tutorial

HTML5 Meter Element Primer Tutorial

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>”.

At its core the “<meter>” 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 of y for the fraction x/y” idea … where “y” could be your “max” parameter, and perhaps your “min” parameter is zero.

This element is useful to represent a numerical concept graphically (like a ratio), something we do today with …

  • simulation of a stopwatch … with its seconds, minutes, hours, days, years elapsed
  • a fraction as (numerator) x / y (denominator)

Tomorrow we’ll show you a very commonplace usage for “<meter>” as a “progress bar” which you see so much of on the internet, when you are waiting for something.

So take a look at the HTML code in meter.html, or a live run, for your perusal. Hope it helps with an HTML project you are on now.

If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.

This entry was posted in eLearning, GUI, Tutorials and tagged , , , , , , , , , , , , , , , , , , , . Bookmark the permalink.

33 Responses to HTML5 Meter Element Word Count Tutorial

  1. cool thanks for reis posting! btw are there feeds to your weblog? I’d love to add them to my reader

  2. Nicely, that’s definitely very good, nonetheless how about further alternatives we’ve right here? Can you mind composing yet one more article relating to them all additionally? Appreciate it!

  3. Hello there, just became alert to your weblog by Google, and located that it’s absolutely informative. I’m gonna watch out for brussels. I’ll be grateful in case you continue this in future. A lot of individuals is going to be benefited from your writing. Cheers!

  4. laptop says:

    I genuinely thankful to uncover this site on bing, just what I was seeking for : D too bookmarked .

  5. Nice post. I figure out some thing harder on various blogs daily. It’s going to generally be stimulating to see content material off their writers and practice one thing from their retailer. I’d opt for to apply specific with all the content in my weblog irrespective of no matter whether you do not mind. Natually I’ll provide you with a link with your online weblog. Thank you for sharing.

  6. Personal growth quotes says:

    I’m impressed, I will have to say. Definitely rarely do I encounter a weblog that is both educative and entertaining, and let me let you know, you’ve got hit the nail around the head. Your idea is outstanding; the catch is usually a thing that insufficient persons are speaking intelligently about. I am content which i discovered this at my try to discover anything relating to this.

  7. I wish to express some thanks to the writer for rescuing me from such a setting. Just after looking out throughout the the web and finding strategies which were not pleasant, I believed my entire life was well over. Existing without the presence of answers to the difficulties you have fixed by means of your website is a critical case, as well as ones which could have in a wrong way affected my entire career if I had not encountered your web site. That natural talent and kindness in touching every item was very helpful. I’m not sure what I would’ve done if I had not discovered such a thing like this. I can also now look forward to my future. Thank you so much for this skilled and result oriented help. I will not think twice to recommend your web page to anybody who needs counselling about this subject.

  8. Valuable info. Lucky me I discovered your website by chance, and I’m stunned why this accident did not took place earlier! I bookmarked it.

  9. order says:

    Great opinions you have got here.. Fantastic beliefs you’ve got here.. My personal web browsings seem total.. thanks. Loving the thread.. all the best

  10. Excellent web site. Lots of helpful information here. I am sending it to some pals ans additionally sharing in delicious. And of course, thanks on your effort!

  11. I’m totally agree with your claim or the important things that you have actually discussed below in this web site.

  12. I savour, result in I discovered just what I used to be having a look for. You have ended my four day lengthy hunt! God Bless you man. Have a great day. Bye

  13. I will invite all my associates to your blog, you actually got a fantastic website.”\”*`.

  14. The way you compose, you happen to be seriously an expert blogger.’”,`’

  15. service says:

    Is not it terrific once you uncover a fantastic article? Seriously practical viewpoint, appreciate your sharing.. Love the entry you supplied.. I appreciate you telling your viewpoint..

  16. class says:

    Extremely good viewpoint, appreciate your giving.. Great opinions you have got here.. Adoring the post.. best wishes My personal searches seem complete.. thanks.

  17. Hello.This post was extremely interesting, especially because I was investigating for thoughts on this issue last Saturday.

  18. Health says:

    I am going to Tweet this post, awesome read!
    Thanks for sharing
    سلامت

  19. Undeniably believe that which you stated. Your favorite justification appeared to be on the web the easiest thing to be aware of. I say to you, I certainly get irked while people consider worries that they plainly don’t know about. You managed to hit the nail upon the top and also defined out the whole thing without having side-effects , people can take a signal. Will likely be back to get more. Thanks

  20. Thanks for some other informative site. The place else may I get that type of info written in such an ideal manner? I’ve a mission that I am simply now working on, and I have been on the look out for such info.

  21. wikipedia says:

    Awsome site! I am loving it!! Will come back again. I am taking your feeds also
    wikipedia

  22. Lynne Mensi says:

    I really like your writing style, superb information, appreciate it for posting : D.

  23. Livia Ocejo says:

    Dead pent articles , appreciate it for information .

  24. i realy like your site and posts . thanks..
    لایو مگ

  25. Thanks for your great article. I found it very helpful.

  26. Thanks for sharing this nice article ,I like your website

  27. Thanks for this nice post. its very helpful ,keep up nice post

  28. I enjoy you because of all of your effort on this website.All of us hear all relating to the medium you give simple tips on your web blog.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>