HTML5 The new web applications - Gustavo Delgado R.
•Télécharger en tant que PPTX, PDF•
0 j'aime•961 vues
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 primary language for building modern interactive websites.
![HTML4 and CSS2, the old couple ,[object Object]](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
Recommandé
Contenu connexe
Similaire à HTML5 The new web applications - Gustavo Delgado R.
Similaire à HTML5 The new web applications - Gustavo Delgado R. (20)
Dernier
Dernier (20)
HTML5 The new web applications - Gustavo Delgado R.
- 1. HTML 5 new generation of WEB applications Gustavo Delgado R. gustavo.delgado@onecore.cl
- 3. Work on HTML 4 started in early 1997CSS 2 was published in 1998.
- 5. Text, text and more text
- 6. Hey!, try to use CSS!
- 12. Itsallabout ‘divitis’ and ‘classitis’.
- 14. Nice to search engines and screen readers
- 15. HTML 5 will update HTML 4.01, DOM Level 2
- 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.0 RoundedCorners Forpersonswhoalwaysfightwiththislike me… border-radius (or variant depending on browser) is used to make rounded corners Example: border-radius: 3px The bigger the value or the radius, the more curvy and larger are the rounded corners Much simpler than using CSS 2 (no background images etc. needed)
- 27. CSS 3.0 Box- and text-shadow box-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 offsets Higher blur radius = more blurred text-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 sites Overall, many features of CSS 3 probably ripe to implement as of now HTML 5 less compelling to implement today but that could change soon
- 29. References W3C http://dev.w3.org/html5/spec/Overview.html Video examplehttp://www.csslab.cl/ejemplos/html5/html5_3.html Databaseexamplehttp://webkit.org/demos/sticky-notes/ Canvasexamplehttps://bespin.mozillalabs.com/
Notes de l'éditeur
- 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.
- 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
- Attribute = attrebiut
- 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.
- 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.