Your SlideShare is downloading. ×
0
Prueba ppt
Prueba ppt
Prueba ppt
Prueba ppt
Prueba ppt
Prueba ppt
Prueba ppt
Prueba ppt
Prueba ppt
Prueba ppt
Prueba ppt
Prueba ppt
Prueba ppt
Prueba ppt
Prueba ppt
Prueba ppt
Prueba ppt
Prueba ppt
Prueba ppt
Prueba ppt
Prueba ppt
Prueba ppt
Prueba ppt
Prueba ppt
Prueba ppt
Prueba ppt
Prueba ppt
Prueba ppt
Prueba ppt
Prueba ppt
Prueba ppt
Prueba ppt
Prueba ppt
Prueba ppt
Prueba ppt
Prueba ppt
Prueba ppt
Prueba ppt
Prueba ppt
Prueba ppt
Prueba ppt
Prueba ppt
Prueba ppt
Prueba ppt
Prueba ppt
Prueba ppt
Prueba ppt
Prueba ppt
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Prueba ppt

212

Published on

asdas dasdasd asd asd asdasd as

asdas dasdasd asd asd asdasd as

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

  • Be the first to like this

No Downloads
Views
Total Views
212
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. HTML 5New & Enhanced Web ARTISANS OF OPEN SOURCE
  • 2. Agenda• HTML5 Introduction o What is HTML5 o HTML5 diff against HTML4• New Features• Compatibility o Browser Support• Code Examples & Demos• Q&A ARTISANS OF OPEN SOURCE
  • 3. HTML5…What?• HTML5 defines the fifth major revision of the core language of the World Wide Web, HTML.• Reflects an effort, started in 2004 to study contemporary HTML implementations and deployed content. o Defines a single language called HTML5 which can be written in HTML syntax and in XML syntax. o Defines detailed processing models to foster interoperable implementations. o Improves markup for documents. o Introduces markup and APIs for emerging idioms, such as Web applications. ARTISANS OF OPEN SOURCE
  • 4. HTML5…What?• New version of HTML4, XHTML1, and DOM Level 2 HTML addressing issues of those specifications & enhancing (X)HTML to more adequately address Web applications.• HTML5 is a work in progress o Some are features available now […July 2010] • Firefox • Safari • IE 8+ • Opera ARTISANS OF OPEN SOURCE
  • 5. HTML5• HTML5 not based on SGML, but compatible with older HTML parsing.• Purely presentational elements were dropped • basefont • strike • big • tt • center • u • font • s ARTISANS OF OPEN SOURCE
  • 6. HTML5• The following elements are not included because they have not been used often, created confusion, or their function can be handled by other elements: o acronym is not included because it has created a lot of confusion. Authors are to use abbr for abbreviations. o applet has been obsoleted in favor of object. o isindex usage can be replaced by usage of form controls. o dir has been obsoleted in favor of ul. ARTISANS OF OPEN SOURCE
  • 7. HTML5• The following elements are not in HTML5 because their usage affected usability and accessibility for the end user in a negative way o frame o frameset o noframes• For a more complete reference on attributes an elements changed see here ARTISANS OF OPEN SOURCE
  • 8. HTML5• HTML5 has extended the HTMLDocument interface from DOM Level 2 HTML in a number of ways o getElementsByClassName() o innerHTML o activeElement and hasFocus o getSelection() o classList ARTISANS OF OPEN SOURCE
  • 9. (New) Features• Enhanced semantics o <div class=“header”><header> (generic block)  (semantic) o <footer>, <nav>, <audio>, <video>• FYI: Semantic Web is a term coined by the W3C director Tim Berners-Lee. It describes methods and technologies to allow machines to understand the meaning of information on the web. ARTISANS OF OPEN SOURCE
  • 10. (New) Features(Semantic Web)• The following elements have been introduced for better structure:• section represents a generic document or application section. It can be used together with the h1, h2, h3, h4, h5, and h6 elements to indicate the document structure.• article represents an independent piece of content of a document, such as a blog entry or newspaper article.• aside represents a piece of content that is only slightly related to the rest of the page.• header represents a group of introductory or navigational aids.• hgroup represents the header of a section.• footer represents a footer for a section and can contain information about the author, copyright information, et cetera.• nav represents a section of the document intended for navigation. ARTISANS OF OPEN SOURCE
  • 11. (New) Features(Semantic Web)• figure represents a piece of self-contained flow content, typically referenced as a single unit from the main flow of the document. <figure> <video src="ogg"></video> <figcaption>Example</figcaption> </figure> o figcaption can be used as caption (it is optional).• video and audio for multimedia content. Both provide an API so application authors can script their own user interface, but there is also a way to trigger a user interface provided by the user agent. source elements are used together with these elements if there are multiple streams available of different types.• embed is used for plugin content.• mark represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context.• progress represents a completion of a task, such as downloading or when performing a series of expensive operations.• meter represents a measurement, such as disk usage.• time represents a date and/or time.• ruby, rt and rp allow for marking up ruby annotations.ARTISANS OF OPEN SOURCE
  • 12. (New) Features(Semantic Web)• wbr represents a line break opportunity.• canvas is used for rendering dynamic bitmap graphics on the fly, such as graphs or games.• command represents a command the user can invoke.• details represents additional information or controls which the user can obtain on demand. The summary element provides its summary, legend, or caption.• datalist together with the a new list attribute for input can be used to make comboboxes: <input list="browsers”> <datalist id="browsers”> <option value="Opera”> <option value="Firefox"> </datalist>• keygen represents control for key pair generation.• output represents some type of output, such as from a calculation done through scripting. ARTISANS OF OPEN SOURCE
  • 13. (New) Features(Semantic Web)• Internet Explorer versions older than 9 treats unknown elements in such a way that disallows them to be styled and any element inside them will actually end up as siblings rather than children.• In order to start using yet unsupported semantic elements we can use the following workaround in IE o Create a dummy element of that type(s) just for the browser to acknowledge the element and permit styling and hierarchy ARTISANS OF OPEN SOURCE
  • 14. (New) Features(Semantic Web)• So: o document.createElement(„tagWeNeed‟); o Place it in the head, early in the document before the browser parses other tags and attributes• HTML5 enabling script is a script that does just that, you may use it for this purpose• <!--[if lt IE 9]> Your script should be inside these tags so that it would be executed only when necessary (IE versions older than 9) and ignored (faster) if unnecessary<![endif]--> ARTISANS OF OPEN SOURCE
  • 15. (New) Features• Canvas • Microdata• Audio • MathML• Video • Web (SQL) database• Storage • New Selectors• Web workers • Web Sockets• App Cache • SVG• Geolocation • Window Messaging• New input types • Drag & Drop ARTISANS OF OPEN SOURCE
  • 16. (New) Features(Canvas)• “a resolution-dependent bitmap canvas that can be used for rendering graphs, game graphics, or other visual images on the fly.” ARTISANS OF OPEN SOURCE
  • 17. (New) Features(Video)• HTML5 defines a new element called <video> for embedding video in your web pages without using third-party plugins ARTISANS OF OPEN SOURCE
  • 18. (New) Features (Video) • You can create auto-fallback behavior on the video element by placing whatever you need the browser to show in case <video> is not supported • You may (should) specify multiple video sources for different codec types for the different browsers Flashauto-fallback ARTISANS OF OPEN SOURCE
  • 19. (New) Features(Video)• <video src=“somevideo” controls></video> o The controls attribute automatically places the default controls to the player; these will look different depending on the browser‟s implementation. o You may want to create your own controls to maintain cross-browser consistency in the player‟s look & feel; the video api provides all the necessary methods for reproduction control so the how (elements, styles, interaction model) its the author‟s choise ARTISANS OF OPEN SOURCE
  • 20. (New) Features(Storage)• HTML5 storage provides a way for web sites to store information on your computer and retrieve it later. The concept is similar to cookies, but it‟s designed for larger quantities of information. Note: Anyone who has physical access to your computer could look and even change your HTML5 storage database ARTISANS OF OPEN SOURCE
  • 21. (New) Features(Storage)Cookies HTML5 Storage• Limited in size • Larger storage• The browser sends them • Stays on your computerback to the web server every • Web sites can access it withtime it requests a new page JavaScript after the page isthis takes extra time and loadedbandwidth • Any web site can read and modify its own values • Sites can‟t access values stored by other sites (same-origin restriction) ARTISANS OF OPEN SOURCE
  • 22. (New) Features(Storage)• Kinds Storage: o Local storage: persistent data storage, remains on your computer o Session storage: its life span is the current session life span (per-tab) ARTISANS OF OPEN SOURCE
  • 23. (New) Features(Web Workers)• Web Workers provide a standard way for browsers to run JavaScript in the background• These “background threads” can do complex mathematical calculations, make network requests, or access local storage while the main web page responds to the user scrolling, clicking, or typing. ARTISANS OF OPEN SOURCE
  • 24. (New) Features(Application Cache)• Start out as an online web application, the web server tells your browser which files need to be downloaded in order for the app to work offline, these files can be anything. Once the files are cached, you can revisit the site offline.• When you‟re online, any changes made can be uploaded to the remote server. ARTISANS OF OPEN SOURCE
  • 25. (New) Features(Geolocation)• This specification defines an API that provides scripted access to geographical location information associated with the hosting device• Not part of the HTML5 specification, geolocation is being standardized by the Geolocation Work Group• You can see this spec here• geo.js is a geolocation API wrapper ARTISANS OF OPEN SOURCE
  • 26. (New) Features(input types)• The input elements type attribute now has the following new values: o tel o month o search o week o url o time o email o datetime-local o datetime o number o date o range o color ARTISANS OF OPEN SOURCE
  • 27. (New) Features(Microdata)• This mechanism allows machine-readable data to be embedded in HTML documents in an easy-to- write manner, with an unambiguous parsing model. It is compatible with numerous other data formats including RDF and JSON• A standardized way to provide additional semantics in your web pages. o i.e. you can use microdata to declare that a photograph is available under a specific Creative Commons license. ARTISANS OF OPEN SOURCE
  • 28. (New) Features(Microdata)• The HTML5 microdata standard includes both HTML markup (primarily for search engines) and a set of DOM functions (primarily for browsers)• Microdata annotates the DOM with scoped name/value pairs from custom vocabularies• For further reading go here ARTISANS OF OPEN SOURCE
  • 29. (New) Features(Microdata) ARTISANS OF OPEN SOURCE
  • 30. (New) Features(MathML)• The goal of MathML is to enable mathematics to be served, received, and processed on the World Wide Web, just as HTML has enabled this functionality for text• While MathML is human-readable, it is anticipated that, in all but the simplest cases, authors will use equation editors, conversion programs, and other specialized software tools to generate MathML (there are existing tools already) ARTISANS OF OPEN SOURCE
  • 31. (New) Features(MathML)• The expression ax2 + bx + c could be represented as ARTISANS OF OPEN SOURCE
  • 32. (New) Features(MathML)• Further reading o Spec o Wikipedia ARTISANS OF OPEN SOURCE
  • 33. (New) Features(Web database)• Defines an API for storing data in databases that can be queried using a variant of SQL• APIs to manipulate client-side databases using SQL• Each database has a name and a current version and they cant exist in multiple versions at once o Versions are intended to allow authors to manage schema changes incrementally & non-destructively, and without the risk of old code writing to a database with incorrect assumptions• All strings including the empty string are valid database names• Database names are case-sensitive ARTISANS OF OPEN SOURCE
  • 34. (New) Features(Web database)• Transaction support• Synchronous & Asynchronous APIs• For SQL query execution: o executeSql(sqlStatement, arguments, callback, errorCallback)• The executeSql() method invokes its callback with a SQLResultSet object as an argument ARTISANS OF OPEN SOURCE
  • 35. (New) Features(New Selectors)• getElementsByClassName o Get a set of elements matching a CSS class• getSelection o Get a set of elements that match a CSS syntax ARTISANS OF OPEN SOURCE
  • 36. (New) Features(Web Sockets)• Bi-directional, full-duplex communications channels over TCP socket, designed to be implemented in web browsers and web servers• API that enables two-way communication with a remote host ARTISANS OF OPEN SOURCE
  • 37. (New) Features(SVG)• Is a modularized language for describing two-dimensional vector and mixed vector/raster graphics in XML• HTML5 allows the embedding of scalable vector graphics in your document ARTISANS OF OPEN SOURCE
  • 38. (New) Features(SVG)• Can be interactive and dynamic. Animations can be defined and triggered declaratively or via scripting• Further reading o SVG Spec ARTISANS OF OPEN SOURCE
  • 39. (New) Features(Window Messaging)• You can use this technique to talk across related windows (documents)• You can post a message from document A to document B by calling the postMessage method which receives two parameters o The actual message o The URL to which you expect to pass that message • The „*‟ wildcard can be used here but for security it should be avoided ARTISANS OF OPEN SOURCE
  • 40. Compatibility• HTML5 defines an HTML syntax that is compatible with HTML4 and XHTML1 documents published on the Web, but is not compatible with the more esoteric SGML features of HTML4, such as processing instructions and shorthand markup as these are not supported by most user agents ARTISANS OF OPEN SOURCE
  • 41. Compatibility• The basic compatibility consideration is the browsers feature support. o Detection techniques • You can (should) test for the browser‟s support for the HTML5 feature you need • A library might come in handy for this purpose ARTISANS OF OPEN SOURCE
  • 42. Compatibility(feature detection)• Example: Detecting Geolocation Support o if ( navigator.geolocation ) // browser supports geolocation… else alert(„Sorry, no geolocation support‟);Note: detecting geolocation is fairly simple, some other features require a bit more work to check for support, that’s why… ARTISANS OF OPEN SOURCE
  • 43. Compatibility(feature detection: Modernizr)• Mordernizr: is an open source, MIT-licensed JavaScript library that detects support for many HTML5 & CSS3 features.• Use it to easily figure if the user agent supports an specific feature o Example: Detecting geolocation • Modernizr.geolocation ? alert(„We know where you are!!‟) : alert(„Where the heck are you!?‟); ARTISANS OF OPEN SOURCE
  • 44. Compatibility(feature detection: Modernizr)Current version is 1.5 (July 2010), it detects the following feature• @font-face • CSS Gradients • History Management• Canvas • CSS Reflections • applicationCache• Canvas Text • CSS 2D Transforms • Web Sockets• HTML5 Audio • CSS 3D Transforms • Web Workers• HTML5 Video • CSS Transitions • Web SQL Database• rgba() • Geolocation API • IndexedDB• hsla() • localStorage • Input Types• border-image: • sessionStorage • Input Attributes• border-radius: • SVG• box-shadow: • SMIL• opacity: • SVG Clipping• Multiple • Drag and Drop backgrounds • hashchange• CSS Animations • X-window• CSS Columns Messaging ARTISANS OF OPEN SOURCE
  • 45. Compatibility• Opera feature support • Firefox feature support ARTISANS OF OPEN SOURCE
  • 46. Compatibility• Chrome feature • Safari Feature Support Support ARTISANS OF OPEN SOURCE
  • 47. Compatibility• IE feature support ARTISANS OF OPEN SOURCE
  • 48. Blah blah blah…show me!• Code examples and features o Presentation by Google site html5rocks.com ARTISANS OF OPEN SOURCE

×