• Save
Technology Research
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Technology Research

on

  • 710 views

HTML5

HTML5

Statistics

Views

Total Views
710
Views on SlideShare
706
Embed Views
4

Actions

Likes
0
Downloads
0
Comments
0

2 Embeds 4

http://www.slideshare.net 3
http://www.verious.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Technology Research Presentation Transcript

  • 1. What’s on the horizon?
    HTML5
    Technology Research created by Katrina Washington on May 23,2010
  • 2. Introduction to HTML5
    In a joint effort between the W3C HTML WG and the WHATWG ( The Web Hypertext Application Technology Working Group) work on HTML5 commenced in 2004. WHATWG is a community of people interested in evolving HTML and was founded by individuals from Apple, the Mozilla Foundation and Opera Software.
    HTML5 introduces and enhances a wide range of features including form controls, multimedia, API’s, structure and semantics to give authors more flexibility and interoperability. This will enable more interactive websites and applications.
    Technology Research created by Katrina Washington on May 23,2010
  • 3. Introduction to HTML5 cont…
    This new version of HTML often called HTML5 or Web Applications 1.0 closely resembles the current version. There are no namespaces, elements don’t have to be closed, browsers are forgiving of errors, a table is still a table and a p is still a p.
    HTML5 has been explicitly designed to degrade gracefully in browsers that don’t support it due to the wide variety of browsers and versions being used today. It offers real benefits to page authors while promising even more to page readers as browsers are slowly upgraded.
    Technology Research created by Katrina Washington on May 23,2010
  • 4. What’s New in HTML5
    Structure
    HTML5 adds new elements to specifically identify each of the common constructs:
    Section- anything that has its own heading such as a part or chapter in a book or a section in a chapter.
    Header- not the same as the “head” element but the page header shown on the page
    Footer- the page footer where the fine print goes; ( the signature in a e-mail message)
    Nav- a collection of links to other pages
    Article- an independent entry in a blog, magazine, compendium, and so forth
    Divs are no longer needed. The meaning of different sections can be inferred from standard names. This is especially important for audio, cell phone, and other non-standard browsers.
    Technology Research created by Katrina Washington on May 23,2010
  • 5. What’s New in HTML5 cont….
    Block Semantic Elements
    Along with the structural elements HTML5 adds some purely semantic block-level elements.
    Aside- represents a note, tip, sidebar, pullquote, a parenthetical remark or something that is just outside the main flow of the narrative.
    Figure- represents a block-level image, along with a caption, but is not limited to pictures. The figure element may be used to caption audio, video, iframe, object, and “embed” elements.
    Dialog- represents a conversation between several people
    Technology Research created by Katrina Washington on May 23,2010
  • 6. What’s New in HTML5 cont..
    Inline Semantic Elements
    HTML4 currently has five different inline elements to represent subtle different variations of code: var, code, kbd, tt and samp. However, it doesn’t have any way to indicate such basic qualities as time or numbers. HTML5 aims to rectify this with several new inline elements.
    Mark or m element- represents text that is “marked” somehow but not necessarily emphasized. An example would be highlighted text in a book.
    Time- represents a specific moment in history. The time element helps browsers and others recognize times in HTML pages.
    Meter- represents a numeric value in a specified range. Each meter element can have up to six attributes offering information about the amount in a more machine-recognizable form:
    Value
    Min
    Low
    High
    Max
    Optimum
    Each should contain a decimal indicating the relevant range.
    Technology Research created by Katrina Washington on May 23,2010
  • 7. What’s New in HTML5 cont…
    Progress- represents the state of an ongoing process. Ex.(this progress control says that a download is 33% complete)
    <p>Downloaded:
    <progress value=“1534602” max=“4603807”>33%</progress>
    </p>
    Value- represents the current state of the operation
    Max- represents the total amount toward which the progress is moving
    In the example above the element indicates that 1,534,602 bytes out of a total 4,603,807 bytes have been downloaded. You can display indefinite progress bars by omitting the “max” attribute.
    Technology Research created by Katrina Washington on May 23,2010
  • 8. What’s New in HTML5 cont…
    Embedded media
    Video on the web is booming, but it’s almost all proprietary. Markup that works for embedding video content in one browser doesn’t work in the next browser. A new “video” element has been proposed which allows the embedding of arbitrary video formats.
    A complementary “audio” element is also proposed.
    <audio src=“spacemusic.mp3”
    Autoplay=“autoplay” loop=“20000” />
    Ex. (you might attach background music to a web page like this)
     
    The “autoplay” attribute tells the browser to begin playing as soon as the page is loaded without waiting for an explicit user request. It will loop 20,000 times before shutting off. (Or until the user either goes to another page or closes the window.)
    These elements aren’t supported by legacy browsers and can be inaccessible to blind and deaf users. The audio and video elements may contain additional markup describing the content of the audio and video.
    Technology Research created by Katrina Washington on May 23,2010
  • 9. What’s New in HTML5 cont…
    Interactivity
    HTML5 introduces several new elements focused on more interactive experiences for web pages.
    Details- represents further information that may not be shown by default. “Details” element can have an “open” attribute. When this occurs the details will be initially shown to the reader.
    Datagrid- serves the role of a grid control. It is intended for use with trees, lists, and tables that can be updated by both users and scripts. A datagrid gets its initial data from its contents: a table, select, or other group of HTML elements.
    Menu and command- the menu element has actually been present since version 2. It was deprecated in HTML4 but is being brought back in HTML5. A “menu” containing “command” elements, each of which causes an immediate action. Commands can be turned in to check boxes with a checked=”checked” attribute. You can also turn checkboxes into radiobuttons using the “radiogroup” attribute.
    Label- gives a title for the menu
     
    Technology Research created by Katrina Washington on May 23,2010
  • 10. Conclusion
    HTML 5 is part of the future of the web. HTML 5 will improve interoperability and reduce development costs by making precise rules on how to handle HTML elements. The web is constantly evolving with new and innovative websites being created every day. The boundaries of HTML are being pushed in every direction. HTML5 is still in development which will likely continue for several years, but it’s great to know what’s on the horizon.
    Technology Research created by Katrina Washington on May 23,2010
  • 11. Sources and Resources
    Sources
    Wikipedia- http://en.wikipedia.org/wiki/HTML5
    New Elements in HTML5- http://www.ibm.com/developerworks/library/xhtml5
    Alist Apart: Articles: A Preview of HTML5- http://www.alistapart.com/articles/previewof html5
    Resources
    Wikipedia- http://en.wikipedia.org/wiki/HTML5
    WHATWG (The Web Hypertext Application Technology Working Group) - http://www.whatwg.org/
    W3C- http://dev.w3.org/html5/html-author/
    W3schools.com- http://www.w3schools.com/html5/html5_reference.asp
    Technology Research created by Katrina Washington on May 23,2010