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

Technology Research

on

  • 678 views

HTML5

HTML5

Statistics

Views

Total Views
678
Views on SlideShare
674
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 Technology Research Presentation Transcript

    • What’s on the horizon?
      HTML5
      Technology Research created by Katrina Washington on May 23,2010
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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