HTML5 the new applications
Download as PPTX, PDF0 likes586 views
HTML 5 is the new standard for building web applications that provides semantic structure and support for multimedia. It introduces useful new elements like <header>, <nav>, <article>, and <section> to replace non-semantic <div> tags. New features like <video>, <audio>, and the <canvas> element allow embedding multimedia content. While still evolving, many CSS 3 features can be used now like rounded corners, drop shadows, and new input types to create eye-catching designs. HTML 5 is not fully supported by all browsers yet, but continues advancing to become the standard for building modern web applications and sites.
HTML5 the new applications
- 1. HTML 5 new generation of WEB applicationsGustavo Delgado R.gustavo.delgado@onecore.cl
- 2. HTML4 and CSS2, the old coupleThe websites of today are built with languages largely conceived during the mid to late 1990’s, when the web was still in its infancy.
- 3. Work on HTML 4 started in early 1997CSS 2 was published in 1998.
- 4. 20 yearsforlearning.The websites of the 90Simple layout
- 5. Text, text and more text
- 6. Hey!, try to use CSS!
- 8. IEit’sthekingThe current websitesComplex layout
- 11. ‘Website’ = essential hub for our digital lifestylesHTML 5Thecurrentwaytomake a website A lot of structured content with the same tag.
- 12. Itsallabout ‘divitis’ and ‘classitis’.
- 13. Semantic value of <div> and ‘class’ = 0 HTML 5HTML5 totherescue Specifically designed for web applications
- 14. Nice to search engines and screen readers
- 15. HTML 5 will update HTML 4.01, DOM Level 2
- 16. Hello ,<header>, <nav>, <article>, <section>, and other new tags.HTML 5Themostimportantchangeshgroup represents the header of a section.
- 17. figure can be used to associate a caption together with some embedded content, such as a graphic or video:
- 18. video and audio for multimedia content.
- 19. time represents a date and/or time.
- 20. canvas is used for rendering dynamic bitmap graphics on the fly, such as graphs or games.
- 21. datalist together with the a new list attribute for input can be used to make comboboxes:
- 22. datagrid, for manipulation of tables with dataproviders.
- 23. The input element's type attribute now has the following new values: url, datetime, email, date, month, number, range, color.
- 25. HTML 5 Support
- 26. CSS 3.0RoundedCornersForpersonswhoalwaysfightwiththislike me…border-radius (or variant depending on browser) is used to make rounded cornersExample: border-radius: 3pxThe bigger the value or the radius, the more curvy and larger are the rounded cornersMuch simpler than using CSS 2 (no background images etc. needed)
- 27. CSS 3.0Box- and text-shadowbox-shadow creates a drop shadow effect (3 lengths and a colour)Code example:box-shadow: 10px 6px 5px #888;10px is horizontal offset, 6px is vertical offset, 5px is ‘blur radius’To put the shadow on the left and top, use negative values for the first two offsetsHigher blur radius = more blurredtext-shadow is similar but applied to text
- 28. Should I be using them?Keep an eye on browser version statistics (buggy browsers should be more short-lived than before)Experiment on intranet(s) and/or personal sitesOverall, many features of CSS 3 probably ripe to implement as of nowHTML 5 less compelling to implement today but that could change soon
Editor's Notes
- #3: Los sitios web de hoy en día se construyen en gran medida con los idiomas concebido a mediados y finales de 1990, cuando Internet era todavía en su infancia.
- #7: Specifically designed for web applications = specificlidisain for web aplikeichons Nice to search engines and screen readers HTML 5 will update HTML 4.01, DOM Level 2Hello ,<header>, <nav>, <article>, <section>, and other new tags.It’s good for search engines, screen readers, information architects, and the web in general. we have a picture to describe, how put together this new tags from html5
- #8: Attribute = attrebiut
- #9: The canvas element provides a straightforward and powerful way to draw arbitrary graphics on a web page using Javascript. Sample applications demoed at the show include a simple drawing area and a simple game. But to see the real power of the Canvas element, take a look at Mozilla'sBeSpin. Bespin is an extensible code editor with an interface so rich that it's hard to believe it was written entirely in Javascript and HTML.The video element aims to make it as easy to embed video on a web page as it is to embed images today. No plugins, no mismatched codecs. See for example, this simple video editor running in Safari. And check out the page source for this YouTube demo. (As a special bonus, the video is demonstrating the power of O3D, an open source 3D rendering API for the browser.)The geolocation APIs make location, whether generated via GPS, cell-tower triangulation or wi-fi databases (what Skyhook calls hybrid positioning) available to any HTML 5-compatible browser-based app. At the conference, Google shows off your current location to any Google map, and announces the availability of Google Latitude for the iPhone. (It will be available shortly after Apple releases OS 3.) What's really impressive about Latitude on the phone is that it's a web app, with all the platform independence that implies, not a platform-dependent phone application.AppCache and Database make it easy to build offline apps. The killer demo is one that Vic first showed at Web 2.0 Expo San Francisco a few months ago: offline gmail on an Android phone. But Vic also shows off a simple "stickies" app running in Safari.(I love the language that Vic uses: "You can even store the application itself offline and rehydrate it on demand.")Web workers is a mechanism for spinning off background threads to do processing that would otherwise slow the browser to a crawl. For a convincing demo, take a look at a web pagecalculating primes without web workers. As the demo says, "Click 'Go!' to hose your browser." Then check out the version with web workers. Primes start appearing, with no hit to browser performance. Even more impressive is a demo of video motion tracking, using Javascript in the browser.
- #10: The canvas element provides a straightforward and powerful way to draw arbitrary graphics on a web page using Javascript. Sample applications demoed at the show include a simple drawing area and a simple game. But to see the real power of the Canvas element, take a look at Mozilla'sBeSpin. Bespin is an extensible code editor with an interface so rich that it's hard to believe it was written entirely in Javascript and HTML.The video element aims to make it as easy to embed video on a web page as it is to embed images today. No plugins, no mismatched codecs. See for example, this simple video editor running in Safari. And check out the page source for this YouTube demo. (As a special bonus, the video is demonstrating the power of O3D, an open source 3D rendering API for the browser.)The geolocation APIs make location, whether generated via GPS, cell-tower triangulation or wi-fi databases (what Skyhook calls hybrid positioning) available to any HTML 5-compatible browser-based app. At the conference, Google shows off your current location to any Google map, and announces the availability of Google Latitude for the iPhone. (It will be available shortly after Apple releases OS 3.) What's really impressive about Latitude on the phone is that it's a web app, with all the platform independence that implies, not a platform-dependent phone application.AppCache and Database make it easy to build offline apps. The killer demo is one that Vic first showed at Web 2.0 Expo San Francisco a few months ago: offline gmail on an Android phone. But Vic also shows off a simple "stickies" app running in Safari.(I love the language that Vic uses: "You can even store the application itself offline and rehydrate it on demand.")Web workers is a mechanism for spinning off background threads to do processing that would otherwise slow the browser to a crawl. For a convincing demo, take a look at a web pagecalculating primes without web workers. As the demo says, "Click 'Go!' to hose your browser." Then check out the version with web workers. Primes start appearing, with no hit to browser performance. Even more impressive is a demo of video motion tracking, using Javascript in the browser.