SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Guru phantom007's Avatar
    Join Date
    May 2008
    Posts
    740
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    Question Animations with HTML5?

    HI

    I have been learning HTML5 since 2 days now. And i found that the major changes in this version are just some attributes.

    I have seen cool animations that are said to be done in HTML5. I do not understand this point. HTML5 is just a static markup language so how come it can do classic animations?

    When I view the source code of those animation pages, I see the entire animations are done using Javascript. So why do people say that HTML5 can do cool animations?

    Can someone pls put some light on this?


    Thanks in advance.

  2. #2
    SitePoint Wizard bronze trophy Immerse's Avatar
    Join Date
    Mar 2006
    Location
    Netherlands
    Posts
    1,661
    Mentioned
    7 Post(s)
    Tagged
    1 Thread(s)
    It's marketing.

    HTML5 + CSS + JS + Canvas can do animations. HTML5 on it's own can't.
    But it's 'cool' to say that HTML5 can do anything Flash can do, but better (thanks Apple!).

  3. #3
    SitePoint Guru phantom007's Avatar
    Join Date
    May 2008
    Posts
    740
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your reply sir.

    One of the challenges the developers are facing today with HTML5 is the browser compatibility. Some features of HTML5 that works on a browser may not work on another one.

    1) How are the developers coming up with this type of situation?
    2) With such browser compatibility issues, how come HTML5 is till a hit so far?

    Thanks

  4. #4
    SitePoint Wizard bronze trophy Immerse's Avatar
    Join Date
    Mar 2006
    Location
    Netherlands
    Posts
    1,661
    Mentioned
    7 Post(s)
    Tagged
    1 Thread(s)
    It depends on which market you're catering for:

    If you're catering for people who still use IE6, then you don't use HTML5.
    If you have users who tend to keep their browsers up-to-date, then you can use HTML5.

  5. #5
    SitePoint Guru phantom007's Avatar
    Join Date
    May 2008
    Posts
    740
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    So does that mean HTML5 cannot be used as a general purposed website like portals, social networking sites etc? Because i do not know who and what kind of users my website will get.

  6. #6
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    It is non normative and experimental hence typically should be avoided or used with a large dose of caution.

  7. #7
    SitePoint Wizard cranial-bore's Avatar
    Join Date
    Jan 2002
    Location
    Australia
    Posts
    2,634
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There is HTML5 you can use now:

    HTML Code:
    <input type="number" name="quantity">
    Compliant browsers will make it easier for users to specify numbers, by giving them a spinner. Other browsers just treat it as a text box. You need to validate the value server side anyway. Nothing breaks.

    New semantic tags such as header, footer, nav, article, section can be used depending on the level of support for old browsers with JS disabled you require. The page will work, the content will be visible, but if a user is on IE <=8 and has JS disabled you won't be able to style these elements. That's a steep minority.

    In other cases there are polyfills that let you use native browser capabilities where they exist, and fill in the gaps with JS solutions where they don't. If a site is built with progressive enhancement this won't lead to anyone missing out on content.
    mikehealy.com.au
    diigital.com art, design . Latest Work ó Saturday Morning

  8. #8
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    So does that mean HTML5 cannot be used as a general purposed website like portals, social networking sites etc? Because i do not know who and what kind of users my website will get.
    Keep in mind that like 90% of "HTML5" is just HTML4. Most of it works, because most of it isn't new.

    You said you've been learning HTML5 for the past few days... is this from after learning HTML4? Or HTML wholly new? I would start with 4 and then learn what's different/new in 5. That helps when trying to realise what's supported. See, some of the stuff that's "new" in HTML5 is old in some browser (like contenteditable is old in IE, canvas is old in Safari, etc). So history matters here.

    Cranial bore gave an example that's mostly okay to use regardless of what the browser supports. The new form input types, for the most part (I exclude type="color" from this list because it's retarded in non-supporting browsers) degrade to type="text" in anyone who doesn't support the new types. Since it automatically gracefully degrades, so long as you are very aware what the effects are in supporting and non-supporting browsers, it's considered pretty "safe". Also, the "new" doctype is totally safe. Basically the WHATWG found out what the minimal doctype is necessary to stop browsers from doctype switching (going into Quirks Mode). Turns out it was just <!doctype HTML> all along. And it's case-insensitive.

  9. #9
    SitePoint Guru phantom007's Avatar
    Join Date
    May 2008
    Posts
    740
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Hi

    can i use RaphaŽl js as an alternative to HTML5 canvas?

  10. #10
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    can i use RaphaŽl js as an alternative to HTML5 canvas?
    I don't see why not.

    If you check out Modernizr, you'll see it does stuff like detect some of the new HTML5/JS API thingies out there. This is (one example of) what cranial-bore meant when he said "polyfills". With Modernizr (or just your own test script), you test for canvas, and if it exists, let canvas do whatever, and if it doesn't, call/load RaphaŽl to do stuff.

    Also, Canvas can have alternative content itself:
    <canvas width="foo" height="bar" id="foobar">
    <p>Browsers who don't support <canvas> will show this text. Browsers who do support <canvas>, even if they are not running Javascript for some reason, will NOT show this text. Of course, if they support <canvas> but have no Javascript, they get nothing at all. Lawlz</p>
    </canvas>
    The original Safari implementation had canvas as an EMPTY tag though: <canvas height="foo" width="bar" id="baz"/> so I believe it's older Safari's may have some issue, but... meh.


    Anyway remember that canvas is mostly a way to have dynamic pictures. You're not building any DOM and it's not accessible in general (unless you mix in SVG), so if you're using it to dynamically change how some data appears, or something, consider having a static DOM version of that data as well. If the data changes, let <canvas> visually show the change, let the inner alternative content just show the new data (so if it's in a table, you'll have a table in the canvas tag), and offer the same data available via a link or something (for users who can't access canvas but are using a browser who understands it). Or something.

    Or you could skip canvas entirely until all the UAs you support can render it, if you want.

  11. #11
    SitePoint Guru phantom007's Avatar
    Join Date
    May 2008
    Posts
    740
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    I reviewed some of the docs of Modernizr and it seems like its just a detection technique for browser compatibility.

    Do you have any recommendation for framework that does HTML5 stuffs easily?

  12. #12
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    I reviewed some of the docs of Modernizr and it seems like its just a detection technique for browser compatibility.
    Yup, that's all it is: a rather large steaming pile of tests/checks for stuff. You can also just use your own. A few properties have some funny tricks but you can see many of them on the rescued Mark Pilgrim's HTML5 Up and Running at HTML5 doctor: http://html5doctor.com/dive-into-html5-doctor/ Each chapter showed both a Modernizr and regular way to test for stuff.

    For an HTML5 framework, I've not touched it myself because it seemed so much larger than anything I'd write myself, but there's html5boilerplate.


    Personally if you have an interest in just, what is all this HTML5 crap anyway?, I *strongly* recommend you read the Mark Pilgrim book mentioned above (it's not terribly long but very well in-depth, quite nice!) and/or (I think AND is best) Bruce Lawson's and Remy Sharp's 2nd edition of Introducing HTML5, which is a book-book. Which, due to the nature of the incomplete HTML5 spec, refutes plenty from the 1st edition. So get the second : ) I read the first, and it was quite excellent.

  13. #13
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,820
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    There's going to be a new version of HTML 5 released on 1st January. All of the new tag names are going to be rotated to mean what the previous tag on the list currently means. This action is a part of the process that has been implemented to make sure that these currently experimental tags are not used in actual live web pages. We thank you for assisting in the testing of these new tags so as to help decide which ONE will become the actual HTML 5 standard tag.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  14. #14
    SitePoint Wizard bronze trophy Immerse's Avatar
    Join Date
    Mar 2006
    Location
    Netherlands
    Posts
    1,661
    Mentioned
    7 Post(s)
    Tagged
    1 Thread(s)
    Wait, are they rotating them clockwise or anti-clockwise?

    Edit>>
    @felgall deserves a mention for that!

  15. #15
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    There's going to be a new version of HTML 5 released on 1st January.
    1st of April actually


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •