HTML5 the new applications
Upcoming SlideShare
Loading in...5
×
 

HTML5 the new applications

on

  • 1,264 views

 

Statistics

Views

Total Views
1,264
Views on SlideShare
1,251
Embed Views
13

Actions

Likes
0
Downloads
3
Comments
0

2 Embeds 13

http://cidi108.blogspot.com 12
http://www.slideshare.net 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
  • 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 ,, , , , 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.

HTML5 the new applications HTML5 the new applications Presentation Transcript

  • HTML 5 new generation of WEB applications
    Gustavo Delgado R.
    gustavo.delgado@onecore.cl
  • HTML4 and CSS2, the old couple
    • The websites of today are built with languages largely conceived during the mid to late 1990’s, when the web was still in its infancy.
    • Work on HTML 4 started in early 1997CSS 2 was published in 1998.
    • 20 yearsforlearning.
  • The websites of the 90
    • Simple layout
    • Text, text and more text
    • Hey!, try to use CSS!
    • Lot of tables
    • IEit’stheking
  • The current websites
    • Complex layout
    • Eye-catching designs
    • Lots of user-interactivity
    • ‘Website’ = essential hub for our digital lifestyles
  • HTML 5
    Thecurrentwaytomake a website
    • A lot of structured content with the same tag.
    • Itsallabout ‘divitis’ and ‘classitis’.
    • Semantic value of <div> and ‘class’ = 0
  • HTML 5
    HTML5 totherescue
    • Specifically designed for web applications
    • Nice to search engines and screen readers
    • HTML 5 will update HTML 4.01, DOM Level 2
    • Hello ,<header>, <nav>, <article>, <section>, and other new tags.
  • HTML 5
    Themostimportantchanges
    • hgroup represents the header of a section.
    • figure can be used to associate a caption together with some embedded content, such as a graphic or video:
    • video and audio for multimedia content.
    • time represents a date and/or time.
    • canvas is used for rendering dynamic bitmap graphics on the fly, such as graphs or games.
    • datalist together with the a new list attribute for input can be used to make comboboxes:
    • datagrid, for manipulation of tables with dataproviders.
    • The input element's type attribute now has the following new values: url, datetime, email, date, month, number, range, color.
    • dialogrepresentsconversations.
  • HTML 5 Structure
  • HTML 5 Support
  • 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)
  • 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
  • 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
  • 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/