Please login or register.

Login with username, password and session length
Advanced search  
Pages: [1] 2 3 4

Author Topic: sNews goes HTML5  (Read 11136 times)

Sven

  • ULTIMATE member
  • ******
  • Karma: 88
  • Posts: 2029
  • Chasing MY bugs!
    • hiseo.fr - rédacteur Web
sNews goes HTML5
« on: September 28, 2009, 08:13:14 AM »

A short title for an sNews move towards HTML 5, CSS 3, SVG, CANVAS, AJAX and more.

Some snoozers has already begun, (see Fred's thread    
Introducing the new Inkpattern Magazine site
and Paul's subject on CSS3 @font-face), and some are planning to go,
so,
may I open a thread here to share pieces of code, resources and sympathy for a few of us?

Click to see Google's Introduction to HTML 5

Sven

  • ULTIMATE member
  • ******
  • Karma: 88
  • Posts: 2029
  • Chasing MY bugs!
    • hiseo.fr - rédacteur Web
« Last Edit: September 29, 2009, 06:29:32 AM by Sven »
Logged

poppoll

  • Full Member
  • ***
  • Karma: 47
  • Posts: 199
    • Poppoll's sNews playground
Re: sNews goes HTML5
« Reply #2 on: September 28, 2009, 12:03:54 PM »

My first experiment on html5
html5&sNews

PP
Logged

Sven

  • ULTIMATE member
  • ******
  • Karma: 88
  • Posts: 2029
  • Chasing MY bugs!
    • hiseo.fr - rédacteur Web
Re: sNews goes HTML5
« Reply #3 on: September 28, 2009, 01:13:21 PM »

I'm in late. ;)
Good markup.
I had a strange behaviour when IE 8 displayed this page: 1st load was crappy. I've needed to refresh it to have printed (almost) correctly.
What's the next step Paul?

Fred K

  • Still trying to learn stuff
  • ULTIMATE member
  • ******
  • Karma: 130
  • Posts: 2728
    • Personal
Re: sNews goes HTML5
« Reply #4 on: September 28, 2009, 09:14:41 PM »

Good topic this. Thanks, Sven. You now have (even) more karma. ;)

One thing I've experienced over the weekend, which may be of interest, concerns <video> file formats for different browsers, and some flaws when used on a page together with lightbox features, for example, in the public version of Safari (Mac).

1. When publishing video clips, using the HTML 5 <video> element, we should take care to offer at least two file formats, if we want to cover as many popular browsers as possible: for Safari, Chrome and other Webkit browsers (including some browsers built for handheld devices), we can use most of the popular file formats such as mpeg, wmv, avi, mp4, m4v, 3gp etc, provided that the device has or can install the appropriate plugin. For Mozilla browsers (primarily Firefox) at least on the Mac which is the only OS I have available for testing, we can only use the ogg or ogv file format, no other will work. And because of the current squabble between these two camps regarding which video codec to support, Webkit browsers currently do not play ogg files (to the best of my knowledge). Which leaves us with the following, general, markup for <video> elements:

Quote
<video controls autobuffer loop>1
<source src="myVideo.3gp">2
<source src="myVideo.ogg">3
<p>This is fallback content for browsers that do not handle the <video> element at all. They will not show the clips but this content instead.</p>
</video>

---
1) The attributes "controls", "autobuffer", "autoplay" and "loop" are optional. If you leave them out, the default behaviour is for the clip to just load and sit on the page, without default controls and without playing or looping. At the minimum, unless you add your own controls through scripting, is to include the "controls" attribute. (Note: in Firefox you can access play options and controls by right/control-clicking - not sure if that's thanks to the Web Developer plugin or default behaviour. Not so in Webkit.)

2) You can add the optional attribute "type" and the appropriate mime type for the clip but leaving it out doesn't interfere with the processing

3) On Mac OS X, there's no obvious file converter available to make ogg files. ffmpeg2theora comes recommended by many, though it is a command line tool only (no graphic interface). It converts files well but take care that you change the file type suffix after completed conversion! ffmpeeg2theora saves ogg video files as .ogv files and .ogv is not a file type that Firefox or Opera recognizes, they demand that you use .ogg. I don't know anything about conversion tools or their default behaviour for other operating systems. Also keep in mind that the file type .ogg is originally an audio file type, so if you for example get an .ogg file from the web or other place, verify the media type before publishing so you know it's a video clip or audio file.

(Ignore #3, my .ogv test failed for some other reason than the file type being incorrect. Have tested with other .ogv files, including http://videos.mozilla.org/firefox/3.5/meet/meet.ogv, and they work. Only in Firefox 3.5 though, not Safari. Haven't tried in Chrome.)
---

Using with lightbox scripts
I've been testing a layout with a video clip and an image gallery that uses Highslide to display larger images. One thing I learned, other than Highslide being a nice script in its current version, is that the public version of Safari 4 has some issues with the element stack. To keep it short: Safari always puts <video> elements on top of everything else. This can be annoying if you use a lightbox script like Highslide, where the expectation is that the popup generated by the script will always be on top. Not so in Safari 4. Firefox does it correctly though. The current public release of Opera, 10.00 (Mac) doesn't support <video> so the test is inapplicable there. Stainless, and I would guess Chrome, seems to follow Safari's behaviour. However, in the latest nightly build of Webkit that issue has been fixed so we can assume it will be in a coming release of Safari as well.

That's what I've found so far, worth mentioning.
« Last Edit: September 29, 2009, 08:47:12 AM by Fred K (agentsmith) »
Logged

Fred K

  • Still trying to learn stuff
  • ULTIMATE member
  • ******
  • Karma: 130
  • Posts: 2728
    • Personal
Re: sNews goes HTML5
« Reply #5 on: September 28, 2009, 09:53:04 PM »

A List Apart's overview of the HTML 5 structure is a very good resource as well, by the way.
Logged

Sven

  • ULTIMATE member
  • ******
  • Karma: 88
  • Posts: 2029
  • Chasing MY bugs!
    • hiseo.fr - rédacteur Web
Re: sNews goes HTML5
« Reply #6 on: September 29, 2009, 05:34:44 AM »

Oh oh?
Webkit browsers doesn't read OGG format ???
Lawyers didn't appreciate its license I suppose.

So if you such a fallback:
Code: [Select]
<video src="file.ogg"><!-- fallback --><embed src="player.swf" data="file.flv" /></video>it should work. Am I wrong?

Thanks for the karma. Hare hare...

Fred K

  • Still trying to learn stuff
  • ULTIMATE member
  • ******
  • Karma: 130
  • Posts: 2728
    • Personal
Re: sNews goes HTML5
« Reply #7 on: September 29, 2009, 06:56:07 AM »

Oh oh?
Webkit browsers doesn't read OGG format ???
Lawyers didn't appreciate its license I suppose.

So if you such a fallback:
Code: [Select]
<video src="file.ogg"><!-- fallback --><embed src="player.swf" data="file.flv" /></video>it should work. Am I wrong?

Thanks for the karma. Hare hare...


I don't know whose lawyers didn't appreciate which license, all I know is that Apple/Google have opted for the h.264 codec because they are interested in serving HD quality video to both desktop and mobile devices whereas Mozilla at least aren't yet doing anything on the mobile side and even if they were, they prefer a codec that is open source, as yet unrestricted by commercial licenses, which is commendable. I wish both sides could come together and open for both codecs or agree to use the same codec, so that we wouldn't have to continue pushing several copies of the same content. I'm not choosing sides (because I believe both have merits), I just want things to be standardised so we can focus on the work.

Anyway.

I think the fallback code will only work as expected with browsers that don't support the <video> element at all. Webkit browsers that do support <video> will most likely not play the flv file, but I haven't tested it so I'm not 100% sure. Have you tried it in Safari or Chrome for example? Did it work?

But anyway, even with your fallback code we need two versions of the same content ... or three if the fallback code doesn't work in Webkit browsers (I don't think it does) because it has support for <video>. The same would be true for Firefox if we publish an mp4 clip with an flv fallback through <embed>, that will most likely also fail in Firefox but would work properly in Webkit. Again, I'm assuming since I haven't tested it.

/* Edit: A _quick_ but not very thorough test indicates that the fallback code doesn't work in Safari/Mac. Nor does the .ogg file. (I should also update my previous post by saying that it seems the .ogv file type actually works. There was probably some kind of problem with my earlier test file...)

Another quick test using an mp4 in the <video> src and an flv fallback works in Safari but fails in Firefox 3.5 -- so the fallback code does not work in browsers that support <video>. Unfortunately.*/
« Last Edit: September 29, 2009, 09:27:58 AM by Fred K (agentsmith) »
Logged

Sven

  • ULTIMATE member
  • ******
  • Karma: 88
  • Posts: 2029
  • Chasing MY bugs!
    • hiseo.fr - rédacteur Web
Re: sNews goes HTML5
« Reply #8 on: September 29, 2009, 08:01:35 AM »


Anyway.

I think the fallback code will only work as expected with browsers that don't support the <video> element at all. Webkit browsers that do support <video> will most likely not play the flv file, but I haven't tested it so I'm not 100% sure. Have you tried it in Safari or Chrome for example? Did it work?

But anyway, even with your fallback code we need two versions of the same content ... or three if the fallback code doesn't work in Webkit browsers (I don't think it does) because it has support for <video>. The same would be true for Firefox if we publish an mp4 clip with an flv fallback through <embed>, that will most likely also fail in Firefox but would work properly in Webkit. Again, I'm assuming since I haven't tested it.

/* Edit: A _quick_ but not very thorough test indicates that the fallback code doesn't work in Safari/Mac. Nor does the .ogg file. (I should also update my previous post by saying that it seems the .ogv file type actually works on Linux, but I haven't had outside confirmation of that so for now it's an assumption that may or may not be correct.)

Another quick test using an mp4 in the <video> src and an flv fallback works in Safari but fails in Firefox 3.5 -- so the fallback code does not work in browsers that support <video>. Unfortunately.*/
Maybe a solution?

Sven

  • ULTIMATE member
  • ******
  • Karma: 88
  • Posts: 2029
  • Chasing MY bugs!
    • hiseo.fr - rédacteur Web
Resources
« Reply #9 on: September 29, 2009, 08:07:52 AM »

1/ GRAPHICS:
  • Raster to Vector: Online converter to SVG, easily convert Bitmap images like JPEGs, GIFs and PNGs to SVG
  • Raster to Vector: Stand alone app
    Works!
    My logo in SVG:
    Quote
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
    <!-- Created with Inkscape (http://www.inkscape.org/) -->

    <svg
       xmlns:dc="http://purl.org/dc/elements/1.1/"
       xmlns:cc="http://creativecommons.org/ns#"
       xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
       xmlns:svg="http://www.w3.org/2000/svg"
       xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink"
       xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
       xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
       width="210mm"
       height="297mm"
       id="svg2"
       version="1.1"
       inkscape:version="0.47pre3 "
       sodipodi:docname="Nouveau document 1">
      <defs
         id="defs4">
        <inkscape:perspective
           sodipodi:type="inkscape:persp3d"
           inkscape:vp_x="0 : 526.18109 : 1"
           inkscape:vp_y="0 : 1000 : 0"
           inkscape:vp_z="744.09448 : 526.18109 : 1"
           inkscape:persp3d-origin="372.04724 : 350.78739 : 1"
           id="perspective10" />
        <inkscape:perspective
           id="perspective2824"
           inkscape:persp3d-origin="0.5 : 0.33333333 : 1"
           inkscape:vp_z="1 : 0.5 : 1"
           inkscape:vp_y="0 : 1000 : 0"
           inkscape:vp_x="0 : 0.5 : 1"
           sodipodi:type="inkscape:persp3d" />
      </defs>
      <sodipodi:namedview
         id="base"
         pagecolor="#ffffff"
         bordercolor="#666666"
         borderopacity="1.0"
         inkscape:pageopacity="0.0"
         inkscape:pageshadow="2"
         inkscape:zoom="0.35"
         inkscape:cx="375"
         inkscape:cy="520"
         inkscape:document-units="px"
         inkscape:current-layer="layer1"
         showgrid="false"
         inkscape:window-width="1109"
         inkscape:window-height="812"
         inkscape:window-x="154"
         inkscape:window-y="154"
         inkscape:window-maximized="0" />
      <metadata
         id="metadata7">
        <rdf:RDF>
          <cc:Work
             rdf:about="">
            <dc:format>image/svg+xml</dc:format>
            <dc:type
               rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
            <dc:title></dc:title>
          </cc:Work>
        </rdf:RDF>
      </metadata>
      <g
         inkscape:label="Calque 1"
         inkscape:groupmode="layer"
         id="layer1">
        <image
           y="240.93361"
           x="162.85713"
           id="image2826"
           height="448.57144"
           width="440.00003"
           xlink:href="file:///C:/Documents%20and%20Settings/Phil/Bureau/BASE2png.png" />
      </g>
    </svg>

« Last Edit: September 29, 2009, 08:40:42 AM by Sven »
Logged

Fred K

  • Still trying to learn stuff
  • ULTIMATE member
  • ******
  • Karma: 130
  • Posts: 2728
    • Personal
Re: sNews goes HTML5
« Reply #10 on: September 29, 2009, 09:24:39 AM »

Maybe a solution?

Haven't tried it, mostly because that amount of code (even when compacted) to serve one piece of media content feels contradictory to using the <video> element as the current HTML 5 spec intends it. I think I'll simply resort to having clips in one format, that is usable by the greatest number of browsers, served through <video> and provide download links to alternative file formats when/if I have that.
Video for everyone is an understandable approach, but, why then use the <video> tag at all? Why not simply do the normal object/embed soup we use in html 4/xhtml 1? The idea of having a <video> element that works much like the <img> element is only viable if we respect the intentions of it, otherwise its usefulness is null. So it's up to browser makers, basically, to ensure that we _can_ use the element as the spec stipulates. Right now it's as if Safari would only accept the .png format for the <img> tag and Firefox and Opera would only accept .jpg while IE would accept .png, jpg, .gif and a bunch of other image formats like .tif, .bmp and .eps. It's the same soup.

Here's what we need:
Code: [Select]
<video poster="posterimage.jpg" controls="true" loop="true" playcount="2">
<source src="name.type" type="mime type">
Fallback content here
</video>

That should really be it. Now, using <source> we can list a number of file types to serve for different browsers/devices, they will only use the file type they can play. So:

Code: [Select]
<video poster="posterimage.jpg" controls autobuffer loop>
<source src="http://videos.mozilla.org/firefox/3.5/meet/meet.ogv" type="video/ogg">
<source src="http://videos.mozilla.org/firefox/3.5/meet/meet.mp4" type="video/quicktime">
<source src="http://videos.mozilla.org/firefox/3.5/meet/meet.3gp" type="video/quicktime">
<!-- Fallback content for older browsers --><a href="http://videos.mozilla.org/firefox/3.5/meet/meet.wmv" title="Download the video">Download the video clip that you can't see (WMV)</a>
</video>

covers Firefox 3.5 and on, the dev version of Opera 10 that hasn't been publicly release yet (?), Safari 3 & 4, Stainless, Chrome, plus Webkit-based browsers for handhelds like iPod Touch/iPhone, Android, HTC's Android, some Nokia models etc and some handhelds using WebOS. Download link in fallback covers others.
Logged

Sven

  • ULTIMATE member
  • ******
  • Karma: 88
  • Posts: 2029
  • Chasing MY bugs!
    • hiseo.fr - rédacteur Web
Re: sNews goes HTML5
« Reply #11 on: September 29, 2009, 09:45:49 AM »

Good shot Fred!
I got he public release of Opera 10! ???

nukpana

  • Hero Member
  • *****
  • Karma: 71
  • Posts: 663
Re: sNews goes HTML5
« Reply #12 on: September 29, 2009, 12:49:09 PM »

Since this has nothing to do with sNews, then this thread should be moved. Last I checked AJAX is considered fluff (for sNews) and won't be used for sNews
Logged

Sven

  • ULTIMATE member
  • ******
  • Karma: 88
  • Posts: 2029
  • Chasing MY bugs!
    • hiseo.fr - rédacteur Web
Re: sNews goes HTML5
« Reply #13 on: September 29, 2009, 01:18:33 PM »

Since this has nothing to do with sNews, then this thread should be moved. Last I checked AJAX is considered fluff (for sNews) and won't be used for sNews
No problemo: You can move it.

Fred K

  • Still trying to learn stuff
  • ULTIMATE member
  • ******
  • Karma: 130
  • Posts: 2728
    • Personal
Re: sNews goes HTML5
« Reply #14 on: September 30, 2009, 09:46:52 PM »

To make this topic a little more connected to the title, I thought I could show a work in progress, if anyone's bold enough to test it? :D 8)

The link: http://www.ball-ball.net/html5/

This is a work-in-progress sNews HTML 5 template. At the moment it's relatively simple, not a lot of spliffy graphics or spinning cartwheels, but it does come with a simple jQuery-powered style switcher, apart from a few CSS effects like rounded corners (only works in Firefox and Safari/Webkit) and @font-face (site logo). The construction is yer basic HTML 5 structure with header, article, aside and footer, nothing fancy there. I've thrown a <video> container in one of the articles, ffs, and tested it all on Mac OS X 10.6, Safari 4.0.3, Webkit nightly (couple of days old...), Firefox 3.5.3 and Stainless 0.4b -- everything seems to work as expected.

You can test the "adminface" as well, default user/pass combo. All I ask is that you don't abuse this so I don't have to police the backend, that would be nice. Thanks.

Comments and other feedback, as well as reports if anything is looking wonky in Windows/handheld browsers, are obviously welcome. I have one alternative stylesheet in the pipeline, apart from the original and the blue (the third is black/green) and I'm thinking of doing a high contrast text-only-like stylesheet with larger type and all that.
So, have at it. ;)

Oh, the core is the standard official sNews 1.7 with some minor modifications. I was thinking of adding the compact archive in there but haven't done it yet. The current main category ("General") comes with 2 subcategories that will show in a droplist on hover (not on the home page though, that is default 1.7 behavior).

Ok, go.
Logged
Pages: [1] 2 3 4