HTML 5 - Measure and progress!


Published on

Briefing <meter> and <progress> elements of HTML 5

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

HTML 5 - Measure and progress!

  1. 1. HTML 5 <meter> and <progress> Overview of new inline tags of HTML-5. 1Presenter: K Chandrasekhar Omkar
  2. 2. Where does it fit in HTML5? HTML5 offers three types of new elements: 1. Sectioning elements are some ‘flow content’ elements that can be used to indicate page sections. 2. Inline elements add semantics to data within information, which is pretty self-explanatory. These elements can be seen as semantic alternatives. 3. Interactive elements ease the task of presenting data more pointedly, while maintaining simplicity. 2Presenter: K Chandrasekhar Omkar
  3. 3. More about ‘inline’ elements Text within a document is organized into paragraphs. Sometimes, data that is within information (i.e., inline) indicate the gist of content. Such data, can be enclosed within inline tags to provide semantics. <progress> and <meter> are such inline- elements used for presenting facts more intuitively. 3Presenter: K Chandrasekhar Omkar
  4. 4. Understanding <progress> element • Show completion progress of a task. • Progress bars are easily understood, and widely used in all user interfaces. • Useful for: – Indicate loading progress of an application/process. – Show user progress through a series of forms – Making impatient users wait. • 4Presenter: K Chandrasekhar Omkar
  5. 5. Categorize <progress>… Types of tasks Determinate Progress can be expressed giving the fraction of work that has so far been completed. Example, portion of file uploaded. Indeterminate Progress is being made not sure about how much more work remains. Example, waiting for a remote host to respond. 5Presenter: K Chandrasekhar Omkar
  6. 6. Using <progress> <progress> tag supports the following attributes. “Value” •The attribute “value” is the percentage of the task completed. •It should be a floating point number between 0 and “max” value. •If not present, progress bar is indeterminate. “Max” •The “max” attribute specifies how much work the task requires in total. •It determines the maximum value that the ”value” attribute may take. • Takes 1.0 as the default value. “position” • Position is a “readonly” attribute accessible via DOM. • For a determinate progress-bar it is the result of dividing “value” by the ”max”. •For an indeterminate progress-bar it must return −1. W3C recommends to include the current value and the maximum value as text between the <progress> … </progress> tags, so that the progress is made available to users of legacy user agents, for the sake of overcoming incompatibilities (if any). 6Presenter: K Chandrasekhar Omkar
  7. 7. Understanding <meter> element • Representing scalar measurements or fractional counts, within a finite-range of values. • Useful for: – User Ratings (e.g. YouTube Videos, Feedbacks) – Indicating Search-Result relevance – Indicating quotas, factual-figures. • • Also known as “gauge”. 7Presenter: K Chandrasekhar Omkar
  8. 8. Using <meter> • <meter> tag supports the following attributes. Measuring attributes Min Specifies the lower bound of the range. Max Specifies the upper bound of the range. Value Specifies the value to have the gauge indicate as the "measured" value. Ranging attributes Low Specifies the range that is considered to be the "low" part. High Specifies the range that is considered to be the "high" part Optimum Gives the position that is "optimum"; if that is higher than the "high" value then this indicates that the higher the value, the better; if it's lower than the "low" mark then it indicates that lower values are better W3C recommends to include a textual representation of the gauge's state between the <meter> … </meter> tags so that the output is made available to users of legacy user agents, for the sake of overcoming incompatibilities (if any). 8Presenter: K Chandrasekhar Omkar
  9. 9. Constraints for <meter> • ‘value’ is a required attribute. • Min ≤ value ≤ max • Min ≤ low ≤ max (if low is specified) • Min ≤ high ≤ maximum (if high is specified) • Min ≤ optimum ≤ Max (if optimum is specified) • low ≤ high (if both low and high are specified) • Default values of “max” and “min” are taken as 0 and 1.0 respectively. 9Presenter: K Chandrasekhar Omkar
  10. 10. Should I use <meter> or <progress>? • The <progress> element is the wrong one to use for something that is just a gauge, as opposed to task progress. • The <meter> element should represent a scalar value only when a valid range is known. • For instance, indicating disk space usage using <progress> would be inappropriate. Instead, the <meter> element is available for such use cases. 10Presenter: K Chandrasekhar Omkar
  11. 11. Thank you. • Please refer work/multipage/the-button-element.html#the-progress- element for further information. 11Presenter: K Chandrasekhar Omkar