Your SlideShare is downloading. ×
0
HTML5: What’s Cool About It<br />Justin Georges<br />jo-georges@wiu.edu<br />Western Illinois University Libraries<br />
HTML5: What is it?<br />HTML5 defines the fifth major revision of the core language of the World Wide Web, HTML.<br />HTML...
HTML5: Some History<br />HTML-Hyper Text Markup Language-is the fundamental blueprint of all Websites. <br />When you visi...
1991 HTML<br />1994 HTML 2<br />1996 CSS 1 + JavaScript<br />1997 HTML 4<br />1998 CSS 2<br />2000 XHTML 1<br />2002 Table...
“How can I start using HTML5 if older browsers don’t support it?” <br />But the question itself is misleading. HTML5 is no...
HTML5: You don’t need to throw anything away<br />HTML5builds on the success HTML 4. <br />You don’t need to relearn thing...
Whether you want to draw on a canvas, play video, design better forms, or build web applications that work offline, you’ll...
Tim Berners-Lee invented the world wide web in the early 1990s. He later founded the W3C to act as a steward of web standa...
HTML5: What has changed?<br />Everything is lighter in HTML5<br />Code is shorter- Get things out of JavaScript that don’t...
HTML5: Video format<br />Still in the works for what video format will become the standard, right now just ogg and mp4 are...
Steve Jobs vs. Flash (unstable CPU hog)<br />Will flash go away?<br />Flash is all over the web, but you have to have a pl...
Canvas<br />In plain English, Canvas is an area in HTML5 that allows users to draw. <br />The canvas can be scaled by widt...
Geo-Location<br />The geo-location features allow users to share their current location with the site they are visiting. <...
Offline storage<br />Offline storage is a lot like Google's Gears except without needing a plugin. <br />This means that a...
Local file access<br />This new capability allows web-based applications to access and manage files stored on a local hard...
A few other neat features (keep an eye out for these)<br />Edit content: selected portions of the page will be available t...
Possibility of one icon that will open a window capable of any task imaginable. <br />With growing popularity of online so...
Should also speed the development of new kinds of websites for presenting magazines and newspapers on tablet computers.<br...
Cookies<br />Concerns about tracking<br />Each browser has different privacy settings<br />Software developers and the rep...
Upcoming SlideShare
Loading in...5
×

Html5

1,568

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,568
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
54
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • 2. As people have pushed the boundaries of the technologies, it became clear that the standards had to evolve.3. This new standard incorporates features like video playback and drag-and-drop that have been previously dependent on third-party browser plug-ins such as Adobe Flash and Microsoft Silverlight.4. Must be installed,Power hungry,Slow browser,Crash prone
  • 1.You don’t need to throw away your existing markup. 2.There’s just newer features that work within HTML 5.
  • 3. HTML 5 aims to give developers a better and more precise way of describing data. Before HTML 5, when we created headers (and footers, and so forth) there was no way to specify with markup that these elements were somehow structurally different than regular content. These new tags providea way to say to the audience, &quot;this part of the content is the document header&quot; and &quot;this part of the content is the document footer.&quot; This is a significant improvement in accessibility, as well as allowing automated user agents like search engine crawlers to better understand our documents.5. In HTML 5 it is not only as easy to embed a video in a website as it has been to embed an image - using just one tag - but it also opens the way for a host of additional features. Using the HTML5 video tag developers can embed videos without third-party codes and manipulate the videos in real-time.
  • Flash can be used to create rich, Web-based applications that could threaten App Store sales if developers chose to market them independently. 3. Browsers such as Opera, Firefox and Chrome allow visitors to save video to their machines with a click of the context menu. If you need to prevent video from being saved, you’ll need to use plug-ins.
  • Most people take in information more quickly and effectively through visuals The downside of images is that they&apos;re static. you wouldn&apos;t be able to adjust any data that changes without manually editing your graphics. The canvas API also allows users to interact with &lt;canvas&gt; elements. For example, you can write a script that responds to users&apos; clicking on a particular section of the pie chart.2. The canvas element has no drawing abilities of its own. All drawing must be done inside a JavaScript3.Again, like the video tag, developers can use the canvas tag to create regions of dynamic content without relying on external plugins. 3. There are a number of simple and more advanced examples of canvas at work on the Internet.
  • HTML5&apos;s geo-location capabilities are already being included in many popular browsersTypically this is more functional on mobile devices with built-in GPS or location-aware hardware.
  • Gears first introduced the idea of storing data locally so that applications could continue to work even when disconnected from the network. Offline storage is also like seriously beefed-up cookies, with significantly more storage space.
  • The potential in this is significant as it paves the way for web applications to behave the same way as desktop-based applications and making browsers more like an application platform than simply a web viewer.
  • 2. New tags in the coding of sites will help them better organize the information they present to search engines’ automated indexers. That could make search results more relevant for everyone.”4. With Scribbed (a popular social reading and publishing site) HTML5 has made it easier to read the content on the web, moving away from pdf’s when reading long-form content. HTML5 non-proprietary, not like many devices that hold content….it can remain universally acceptable where any device can read it. Idea is if someone starts reading something on their desktop machine or latptop, they will be able to finish reading on any mobile device later on.
  • 1. the technology uses a process in which large amounts of data can be collected and stored on the user’s hard drive while online. 2. not all browsers have obvious settings for removing data created by the new Web language. Even the most proficient software engineers and developers acknowledge that deleting that data is tricky and may require multiple steps.2. Might take away from features you like to use, like in social networking.-Opera once tried to put more controls on certain types of cookies, but users in Russia complained that the controls prevented a popular social networking site from working properly.
  • Transcript of "Html5"

    1. 1. HTML5: What’s Cool About It<br />Justin Georges<br />jo-georges@wiu.edu<br />Western Illinois University Libraries<br />
    2. 2. HTML5: What is it?<br />HTML5 defines the fifth major revision of the core language of the World Wide Web, HTML.<br />HTML5 is currently under development. However, most modern browsers have some HTML5 support.<br />Like its immediate predecessors, HTML 4.01 and XHTML 1.1, HTML5 is a standard for structuring and presenting content on the World Wide Web. <br />Plug-in problems<br />
    3. 3. HTML5: Some History<br />HTML-Hyper Text Markup Language-is the fundamental blueprint of all Websites. <br />When you visit a site, you see pages with text, photos, videos, and games. But your browser displays all that stuff because it downloaded a big chunk of HTML code that instructs it where to access that media and how to lay it out on a virtual page.<br />http://www.pcworld.com/businesscenter/article/207653/html5_what_does_it_mean_for_you.html<br />
    4. 4. 1991 HTML<br />1994 HTML 2<br />1996 CSS 1 + JavaScript<br />1997 HTML 4<br />1998 CSS 2<br />2000 XHTML 1<br />2002 Tableless Web Design<br />2005 AJAX<br />2008ish HTML 5Begins….Is HTML 5 ready yet??? http://ishtml5readyyet.com/<br />HTML5: Some History<br />
    5. 5. “How can I start using HTML5 if older browsers don’t support it?” <br />But the question itself is misleading. HTML5 is not one big thing; it is a collection of individual features. <br /> So you can’t detect “HTML5 support”<br />But you can detect support for individual features, like canvas, video, or geolocation.<br />HTML5: It’s not one big thing<br />Taken from http://diveintohtml5.org/<br />
    6. 6. HTML5: You don’t need to throw anything away<br />HTML5builds on the success HTML 4. <br />You don’t need to relearn things you already know. <br />If your web application worked yesterday in HTML 4, it will still work today in HTML5. <br />Taken from http://diveintohtml5.org/<br />
    7. 7. Whether you want to draw on a canvas, play video, design better forms, or build web applications that work offline, you’ll find that HTML5 is already well-supported. <br />Firefox, Safari, Chrome, Opera, and mobile browsers already support canvas, video, geolocation, local storage, and more. <br />Even Microsoft — rarely known for blazing the trail of standards support — will be supporting most HTML5 features in Internet Explorer 9.<br />HTML5: It already works<br />Taken from http://diveintohtml5.org/<br />
    8. 8. Tim Berners-Lee invented the world wide web in the early 1990s. He later founded the W3C to act as a steward of web standards, which the organization has done for more than 15 years. <br />Here is what the W3C had to say about the future of web standards, in July 2009:<br />Today the Director announces that when the XHTML 2 Working Group charter expires as scheduled at the end of 2009, the charter will not be renewed. By doing so, and by increasing resources in the HTML Working Group, W3C hopes to accelerate the progress of HTML5 and clarify W3C’s position regarding the future of HTML.<br />HTML5: It’s here to stay<br />Taken from http://diveintohtml5.org/<br />
    9. 9. HTML5: What has changed?<br />Everything is lighter in HTML5<br />Code is shorter- Get things out of JavaScript that don’t need to be there<br />New tags<br />Native audio/video<br />According to projections from Cisco, online video viewing will soon surpass peer-to-peer file sharing as the activity responsible for the most traffic on the internet.<br /> -Technology Review 2010<br />Many modern websites show videos. HTML5 provides a standard for showing them.<br />Until recently web-based video relied on Flash, Adobe's rich media language. But HTML could put an end to that with its own native video tag. <br />The control attribute is for adding play, pause, and volume controls.<br />Taken from http://mybroadband.co.za/news/internet/12127-Best-HTML5.html<br />
    10. 10. HTML5: Video format<br />Still in the works for what video format will become the standard, right now just ogg and mp4 are the most popular.<br />Apple & IE pushed=h.264 (portions of the H.264 technology are covered by patents)<br />Ogg=another HTML5 video format option being pushed by the open source community, but the W3C is also concerned over patent issues.<br />Google recently introduced a new video format, dubbed WebM, and open-sourced its technology in an effort to settle the matter.<br />The key players can’t agree.<br />Taken from http://mybroadband.co.za/news/internet/12127-Best-HTML5.html<br />
    11. 11. Steve Jobs vs. Flash (unstable CPU hog)<br />Will flash go away?<br />Flash is all over the web, but you have to have a plug-in to make it work.<br />There is no way to do digital rights management in HTML5<br />Google supports it<br />HTML5: What happens to flash?<br />
    12. 12. Canvas<br />In plain English, Canvas is an area in HTML5 that allows users to draw. <br />The canvas can be scaled by width or height and, coupled with Javascript<br />The canvas can be used to accept user input, provide animations, edit images and a host of other features. <br />HTML5: What has changed?<br />Taken from http://mybroadband.co.za/news/internet/12127-Best-HTML5.html<br />
    13. 13. Geo-Location<br />The geo-location features allow users to share their current location with the site they are visiting. <br />The feature uses a combination of GPS, WiFi, IP address and Bluetooth to determine the user's position. <br />There are many opportunities for geo-location-capable browsers, including customized search results, location-specific maps and listings and a host of others. <br />Users have to actively give permission to a site to obtain their location to prevent against abuse. <br />HTML5: What has changed?<br />Taken from http://mybroadband.co.za/news/internet/12127-Best-HTML5.html<br />
    14. 14. Offline storage<br />Offline storage is a lot like Google's Gears except without needing a plugin. <br />This means that anything from user details to email can be stored locally and used by web applications.<br />Work offline and sync to the cloud when you get internet access.<br />Web storage<br />Cookies are not suitable for large amounts of data, because they are passed on by EVERY request to the server, making it very slow and in-effective. <br /> In HTML5, the data is NOT passed on by every server request, but used ONLY when asked for. It is possible to store large amounts of data without affecting the website's performance. <br />HTML5: What has changed?<br />Taken from http://mybroadband.co.za/news/internet/12127-Best-HTML5.html<br />
    15. 15. Local file access<br />This new capability allows web-based applications to access and manage files stored on a local hard disk. <br />Users won't have to upload files to a remote server before being able to manipulate them. <br />For example, a photo management application could be used to manipulate an image stored locally, or even view thumbnails, without needing to upload the image first. <br />Drag and drop-have this capability with Gmail, where you can drag a file to the browser window to add as an attachment.<br />HTML5: What has changed?<br />Taken from http://mybroadband.co.za/news/internet/12127-Best-HTML5.html<br />
    16. 16. A few other neat features (keep an eye out for these)<br />Edit content: selected portions of the page will be available to users to jot down notes and those notes will appear when they return to the site.<br />Chat: API associated with HTML5 will let web developers set up a simple chat program. Users interact beyond limits of a comments section (similar to Meebo)<br />New form input types and elements<br />HTML5: What has changed?<br />
    17. 17. Possibility of one icon that will open a window capable of any task imaginable. <br />With growing popularity of online software packages (Office and Photoshop) html5 would allow offline use and seamlessly synchronizing new changes when a connection becomes available.<br />HTML5: The New OS?<br />Taken from http://mybroadband.co.za/news/internet/12127-Best-HTML5.html<br />
    18. 18. Should also speed the development of new kinds of websites for presenting magazines and newspapers on tablet computers.<br />Libraries will love the new tags like <article> for marking articles or blog posts with additional citation information<br />There’s an <aside> for attaching related content. These tags will define the relationship between pieces of content by enabling semantic identification.<br />Scribd website example<br />HTML5: The future of publishing<br />Taken from http://mybroadband.co.za/news/internet/12127-Best-HTML5.html<br />
    19. 19. Cookies<br />Concerns about tracking<br />Each browser has different privacy settings<br />Software developers and the representatives of the World Wide Web argue that as technology advances, consumers have to balance its speed and features against their ability to control their privacy.<br />W3 working on this. Holding workshop about privacy concerns:<br />http://www.iab.org/about/workshops/privacy/<br />HTML5: Concern over privacy <br />Taken from http://mybroadband.co.za/news/internet/12127-Best-HTML5.html<br />
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×