Details

    • Testing Instructions:
      Hide

      1/ try moodle UI parts that use complex JS or CSS in all supported browsers

      Please report problems as separate issues, if there are too many we can flip the default in theme_config->doctype = 'xhtml' to get the previous behaviour.

      Show
      1/ try moodle UI parts that use complex JS or CSS in all supported browsers Please report problems as separate issues, if there are too many we can flip the default in theme_config->doctype = 'xhtml' to get the previous behaviour.
    • Affected Branches:
      MOODLE_23_STABLE
    • Fixed Branches:
      MOODLE_24_STABLE
    • Pull from Repository:
    • Pull Master Branch:
      w30_MDL-34299_m24_html5
    • Rank:
      42665

      Description

      I've added an HTML5 doctype to my theme.

      $OUTPUT->doctype produces some complicated XHTML doctype which I don't need, I just put "<!DOCTYPE html>" on the first line of the theme layout. However, if I don't call $OUTPUT-doctype at all it fails with an error, so I'm currently calling it and throwing the output away to avoid triggering this.

      A small fix would be to allow you to not use this function without it failing. A bigger fix would be to shift Moodle to use the HTML5 doctype by default. I believe the two big use cases for XHMTL (MathML and SVG) are now better supported in HTML5 and the Mobile Moodle project has just announced it is using HTML5 so this seems a good time to just switch everyone.

        Issue Links

          Activity

          Hide
          Mary Evans added a comment -

          @Petr I've just added you as a watcher, I thought you might like to say something here on the subject of HTML5?

          Show
          Mary Evans added a comment - @Petr I've just added you as a watcher, I thought you might like to say something here on the subject of HTML5?
          Hide
          Petr Škoda added a comment -

          Hi, I was already proposing to switch to html5 only in 2.3dev because we are already using things like iframe, drag&drop, html5 video, etc. The only problem for now is validator plugins for browsers.

          Show
          Petr Škoda added a comment - Hi, I was already proposing to switch to html5 only in 2.3dev because we are already using things like iframe, drag&drop, html5 video, etc. The only problem for now is validator plugins for browsers.
          Hide
          Petr Škoda added a comment -

          There might be some minor problems in themes or really old browsers, hopefully theme designers will have enough time to fix any problems with inferior browsers.

          I think the sooner we switch the better, see the commit message for some more info, ciao...

          Show
          Petr Škoda added a comment - There might be some minor problems in themes or really old browsers, hopefully theme designers will have enough time to fix any problems with inferior browsers. I think the sooner we switch the better, see the commit message for some more info, ciao...
          Hide
          Dan Poltawski added a comment -

          Hi Guys,

          To be honest, I don't know enough about this myself to know if there are implications we should be aware of, but I think that we least:

          1/ We should have a wider dicussion about it?
          2/ It should be announced on general developer/theme forum if agreed.

          Dan

          Show
          Dan Poltawski added a comment - Hi Guys, To be honest, I don't know enough about this myself to know if there are implications we should be aware of, but I think that we least: 1/ We should have a wider dicussion about it? 2/ It should be announced on general developer/theme forum if agreed. Dan
          Hide
          Martin Dougiamas added a comment -

          +1 for that Dan said, and more:

          I'm not hearing strongly compelling reasons to do the switch right now, so therefore I'd want to see zero effect on 2.3 themes. The last thing we need is more things to upset themers who have already been coping with quite a lot of "small" changes recently.

          So if we do it, then it should go in 2.4 very soon so we have a few months to evaluate it and if any big problems pop up we can solve them or revert it.

          Show
          Martin Dougiamas added a comment - +1 for that Dan said, and more: I'm not hearing strongly compelling reasons to do the switch right now, so therefore I'd want to see zero effect on 2.3 themes. The last thing we need is more things to upset themers who have already been coping with quite a lot of "small" changes recently. So if we do it, then it should go in 2.4 very soon so we have a few months to evaluate it and if any big problems pop up we can solve them or revert it.
          Hide
          Dan Poltawski added a comment -

          Mary: do you have any thoughts on this switch?

          Show
          Dan Poltawski added a comment - Mary: do you have any thoughts on this switch?
          Hide
          Petr Škoda added a comment -

          The patch allows 100% backwards compatibility - just switch the default to 'xhtml' in theme_config class with extra commit if necessary. Theme designers would then have to manually add $THEME->doctype = 'html5' to their theme config.php once they decide it is time to switch.

          Show
          Petr Škoda added a comment - The patch allows 100% backwards compatibility - just switch the default to 'xhtml' in theme_config class with extra commit if necessary. Theme designers would then have to manually add $THEME->doctype = 'html5' to their theme config.php once they decide it is time to switch.
          Hide
          Mary Evans added a comment -

          @Dan for some reason I have missed all the feed back from this discussion, so I am a little bit out of touch with the progress being made here.

          @Martin
          I personally would like to see HTML5 doc-type implemented as a default setting, but as you so rightly pointed out, we need to be certain it's not going to affect themes too much. Small changes we can cope with, but bigger ones can be soul destroying as I have found out lately. Some custom themes that have new block regions don't work in Moodle 2.3.x. In fact there are wider implications when adding new block-regions, such as page-layout especially with AJAX enabled for drag-n-drop. This alone is becoming, for me at least, a bit of a nightmare as I don't have the necessary JavaScript coding skills to fix it.

          But that said...there are some changes being made to CSS selectors which I have only just discovered and fixed in a theme that is being Integrated at this very moment, so yes there is a need for wider discussion.

          In fact it might be time to have a Theme Development Group, that looks at not only Theme design, but also looks at the rest of Moodle to make sure all elements have the same basic look that can be easily styled in a theme with the minimal amount of CSS.

          It's a pity you can't get someone like Douglas Bowman on board...he heads the Design team for Twitter.

          Show
          Mary Evans added a comment - @Dan for some reason I have missed all the feed back from this discussion, so I am a little bit out of touch with the progress being made here. @Martin I personally would like to see HTML5 doc-type implemented as a default setting, but as you so rightly pointed out, we need to be certain it's not going to affect themes too much. Small changes we can cope with, but bigger ones can be soul destroying as I have found out lately. Some custom themes that have new block regions don't work in Moodle 2.3.x. In fact there are wider implications when adding new block-regions, such as page-layout especially with AJAX enabled for drag-n-drop. This alone is becoming, for me at least, a bit of a nightmare as I don't have the necessary JavaScript coding skills to fix it. But that said...there are some changes being made to CSS selectors which I have only just discovered and fixed in a theme that is being Integrated at this very moment, so yes there is a need for wider discussion. In fact it might be time to have a Theme Development Group, that looks at not only Theme design, but also looks at the rest of Moodle to make sure all elements have the same basic look that can be easily styled in a theme with the minimal amount of CSS. It's a pity you can't get someone like Douglas Bowman on board...he heads the Design team for Twitter.
          Hide
          Dan Poltawski added a comment -

          I've integrated this now, thanks everyone.

          Show
          Dan Poltawski added a comment - I've integrated this now, thanks everyone.
          Hide
          Adrian Greeve added a comment -

          Tested with all supported browsers. The areas that I explored didn't show any problems (still many areas that I didn't get to).
          Test passed .

          Show
          Adrian Greeve added a comment - Tested with all supported browsers. The areas that I explored didn't show any problems (still many areas that I didn't get to). Test passed .
          Hide
          Aparup Banerjee added a comment -

          yay, it works!

          This issue has been put through rigorous processes and finally swam upstream along with some 65 others this week.

          Thank you all for taking the time to get us here.

          cheers!

          Show
          Aparup Banerjee added a comment - yay, it works! This issue has been put through rigorous processes and finally swam upstream along with some 65 others this week. Thank you all for taking the time to get us here. cheers!
          Hide
          David Scotson added a comment -

          I thought I'd note that as well as adopting the HTML5 doctype (which is a fairly minor change) I've also built a theme using the new HTML5 tags such as <header> and <footer>. This is a bit more invasive and required two things to help IE cope:

          I added this instruction to tell IE that yes, I really want to use HTML5, so don't emulate older versions of IE's rendering (note I believe you have to set the equivalent http-header when accessing intranets):

          <meta http-equiv="X-UA-Compatible" content="IE=edge" />

          And IE8 (the lowest version I'm supporting) requires a small amount of .js to touch each of the new HTML5 elements before you can add any style to them. I include the HTML5-shiv project for this, though this does mean unfortunate souls using IE8 with JS disabled get a very wobbly looking site, something our browser stats suggest we can live with.

          http://code.google.com/p/html5shiv/

          All stuff that can be done by the individual themer right now, but perhaps worth keeping in mind for the future as people start wanting to take better advantage of HTML5 features.

          Show
          David Scotson added a comment - I thought I'd note that as well as adopting the HTML5 doctype (which is a fairly minor change) I've also built a theme using the new HTML5 tags such as <header> and <footer>. This is a bit more invasive and required two things to help IE cope: I added this instruction to tell IE that yes, I really want to use HTML5, so don't emulate older versions of IE's rendering (note I believe you have to set the equivalent http-header when accessing intranets): <meta http-equiv="X-UA-Compatible" content="IE=edge" /> And IE8 (the lowest version I'm supporting) requires a small amount of .js to touch each of the new HTML5 elements before you can add any style to them. I include the HTML5-shiv project for this, though this does mean unfortunate souls using IE8 with JS disabled get a very wobbly looking site, something our browser stats suggest we can live with. http://code.google.com/p/html5shiv/ All stuff that can be done by the individual themer right now, but perhaps worth keeping in mind for the future as people start wanting to take better advantage of HTML5 features.
          Hide
          Petr Škoda added a comment -

          Hmm, I suppose we could add some new theme option for the html5 compatibility stuff. The X-UA should be already there, I was not sure if we should add chrome=1 there too - does anybody have experience with it?

          Show
          Petr Škoda added a comment - Hmm, I suppose we could add some new theme option for the html5 compatibility stuff. The X-UA should be already there, I was not sure if we should add chrome=1 there too - does anybody have experience with it?
          Hide
          Mary Evans added a comment -

          @David

          This sounds great thanks for doing the legwork with IE8.
          Just to clarify when you say you used the <header><footer> HTML5 tags, I am assuming you are talking about using these in a Moodle theme you have built?

          If so can you TEST something for me in your HTML5 Moodle theme? Can you try embedding an something in a page, using the Moodle options. Something like http://google.com or similar? The reason I ask is that currently it is a Moodle requirement to have <div id="page-header"> and <div id="page-footer"> to make the embedding option work because of the way the algorithm is calculated on the page.

          Thanks

          @Petr

          I've not had chance to play with this option yet.
          To test Moodle thoroughly would mean having a theme that utilises HTML5 tags and no CORE themes do at this moment in time.

          What would chrome=1 do?

          Show
          Mary Evans added a comment - @David This sounds great thanks for doing the legwork with IE8. Just to clarify when you say you used the <header><footer> HTML5 tags, I am assuming you are talking about using these in a Moodle theme you have built? If so can you TEST something for me in your HTML5 Moodle theme? Can you try embedding an something in a page, using the Moodle options. Something like http://google.com or similar? The reason I ask is that currently it is a Moodle requirement to have <div id="page-header"> and <div id="page-footer"> to make the embedding option work because of the way the algorithm is calculated on the page. Thanks @Petr I've not had chance to play with this option yet. To test Moodle thoroughly would mean having a theme that utilises HTML5 tags and no CORE themes do at this moment in time. What would chrome=1 do?
          Hide
          Petr Škoda added a comment -

          chrome=1 could make IE a real browser, see https://developers.google.com/chrome/chrome-frame/

          Show
          Petr Škoda added a comment - chrome=1 could make IE a real browser, see https://developers.google.com/chrome/chrome-frame/
          Hide
          David Scotson added a comment -

          @Mary,

          yes we discovered that bug which was making embedded PDFs flash up for a moment and then disappear for us because we had replaced <div id="page-header"> with just <header>. Currently we've got <header id="page-header"> just to make PDFs work but we're looking at fixing it properly. A glance at the javascript seems to suggest that it's supposed to use at least 400px but as a result of not finding #page-header it's looking for it gets confused and seems to be setting the height to 0px, thus hiding the PDF. I'm hoping that we don't actually need javascript to do this sizing and it can just be done with some CSS, but not had a chance to look at it properly yet.

          Also, regarding your comment about "It's a pity you can't get someone like Douglas Bowman on board...he heads the Design team for Twitter." I'm actually building my theme around Bootstrap, which is exactly designed " to make sure all elements have the same basic look that can be easily styled in a theme with the minimal amount of CSS." and was open sourced by Twitter. I don't think it's his baby, but he's tweeted about it and plenty of other smart people from inside and outside Twitter have contributed to it.

          chrome=1 is the signal to use Chrome Frame if installed, which is the Chrome rendering engine stuffed inside IE. I've not bothered with it because IE8 and 9 seem mostly capable of what Moodle is asking of them (so no whizzy 3D WebGL required) and mostly IE8 just loses drop shadows, nice buttons and rounded corners and things of that level. Rather than encourage people to install Chrome Frame we're just telling them to use the latest version of the full Chrome or Firefox if at all possible. I believe that Chrome has been specifically designed so that it can install (and auto-update) without Admin privileges which undermines the need for Chrome Frame to some degree.

          Show
          David Scotson added a comment - @Mary, yes we discovered that bug which was making embedded PDFs flash up for a moment and then disappear for us because we had replaced <div id="page-header"> with just <header>. Currently we've got <header id="page-header"> just to make PDFs work but we're looking at fixing it properly. A glance at the javascript seems to suggest that it's supposed to use at least 400px but as a result of not finding #page-header it's looking for it gets confused and seems to be setting the height to 0px, thus hiding the PDF. I'm hoping that we don't actually need javascript to do this sizing and it can just be done with some CSS, but not had a chance to look at it properly yet. Also, regarding your comment about "It's a pity you can't get someone like Douglas Bowman on board...he heads the Design team for Twitter." I'm actually building my theme around Bootstrap, which is exactly designed " to make sure all elements have the same basic look that can be easily styled in a theme with the minimal amount of CSS." and was open sourced by Twitter. I don't think it's his baby, but he's tweeted about it and plenty of other smart people from inside and outside Twitter have contributed to it. chrome=1 is the signal to use Chrome Frame if installed, which is the Chrome rendering engine stuffed inside IE. I've not bothered with it because IE8 and 9 seem mostly capable of what Moodle is asking of them (so no whizzy 3D WebGL required) and mostly IE8 just loses drop shadows, nice buttons and rounded corners and things of that level. Rather than encourage people to install Chrome Frame we're just telling them to use the latest version of the full Chrome or Firefox if at all possible. I believe that Chrome has been specifically designed so that it can install (and auto-update) without Admin privileges which undermines the need for Chrome Frame to some degree.
          Hide
          Mary Evans added a comment - - edited

          @David

          Wow I feel like I have just been born into a new dimension! I have been so wrapped up in Moodle CORE themes I forgot to keep up with current technologies.

          Chrome Frame is new to me! Bootstrap I had heard of but not followed its progress. I have just found it now on the Twitter GitHub and forked to a new repro on my GitHub so will take a better look at it later.

          The Embedded BUG is a source of annoyance as I hate the way we have to use page-header and page-footer all the time. Header and footer alone are so much easier. I've not ventured into JavaScript land so I would not know it is easy to fix that bug or not, but I think it is time it was fixed in Moodle, so that it did not matter if we use page-header and page-footer, or oranges and pears, it would still work.

          Would love to see the Moodle theme you built using Bootstrap protocols...I love learning new stuff

          Show
          Mary Evans added a comment - - edited @David Wow I feel like I have just been born into a new dimension! I have been so wrapped up in Moodle CORE themes I forgot to keep up with current technologies. Chrome Frame is new to me! Bootstrap I had heard of but not followed its progress. I have just found it now on the Twitter GitHub and forked to a new repro on my GitHub so will take a better look at it later. The Embedded BUG is a source of annoyance as I hate the way we have to use page-header and page-footer all the time. Header and footer alone are so much easier. I've not ventured into JavaScript land so I would not know it is easy to fix that bug or not, but I think it is time it was fixed in Moodle, so that it did not matter if we use page-header and page-footer, or oranges and pears, it would still work. Would love to see the Moodle theme you built using Bootstrap protocols...I love learning new stuff
          Hide
          David Scotson added a comment -

          @Mary: I was planning on making it easier to download and post an announcement to the forum looking for some help but since you mention Github the moodle/bootstrap stuff is already in my colleague's GitHub here:

          https://github.com/thepurpleblob/gumoodle/tree/gu23/theme

          The key file for now is this one, which gets added after base.css and before any other theme:

          https://github.com/thepurpleblob/gumoodle/blob/gu23/theme/bootstrap/style/bootstrap.css

          If you diff that against the original bootstrap.css that you can build from github or get from here:

          http://twitter.github.com/bootstrap/assets/css/bootstrap.css

          You can see what I've added, basically it's a translation from the many dialects of Moodle to Bootstrap. I've also added bug numbers for various things I've reported, the idea being that as the bugs get closed the line can be deleted and I'll get closer to the mainline Bootstrap.

          The bootstrap theme is really just the base theme plus that .css file. I also have a work-in-progess base theme called simple which our actual theme (gu23) inherits from and adds our branding to.

          Show
          David Scotson added a comment - @Mary: I was planning on making it easier to download and post an announcement to the forum looking for some help but since you mention Github the moodle/bootstrap stuff is already in my colleague's GitHub here: https://github.com/thepurpleblob/gumoodle/tree/gu23/theme The key file for now is this one, which gets added after base.css and before any other theme: https://github.com/thepurpleblob/gumoodle/blob/gu23/theme/bootstrap/style/bootstrap.css If you diff that against the original bootstrap.css that you can build from github or get from here: http://twitter.github.com/bootstrap/assets/css/bootstrap.css You can see what I've added, basically it's a translation from the many dialects of Moodle to Bootstrap. I've also added bug numbers for various things I've reported, the idea being that as the bugs get closed the line can be deleted and I'll get closer to the mainline Bootstrap. The bootstrap theme is really just the base theme plus that .css file. I also have a work-in-progess base theme called simple which our actual theme (gu23) inherits from and adds our branding to.
          Hide
          Mary Evans added a comment -

          @David:

          Thanks for the links. I'll take a look at the code later.

          Show
          Mary Evans added a comment - @David: Thanks for the links. I'll take a look at the code later.
          Hide
          Mary Cooch added a comment -

          Regarding the docs_required label, could someone explain what specifically is needed here for the user docs? Or would this be better in dev-docs? Thanks

          Show
          Mary Cooch added a comment - Regarding the docs_required label, could someone explain what specifically is needed here for the user docs? Or would this be better in dev-docs? Thanks
          Hide
          Petr Škoda added a comment -

          I think there is no need to document this in more detail because we were already using features that were not present in xhtml strict. Theme designers hopefully know a lot about html5 already and developers can use the same html markup.

          +1 to remove the tag

          Show
          Petr Škoda added a comment - I think there is no need to document this in more detail because we were already using features that were not present in xhtml strict. Theme designers hopefully know a lot about html5 already and developers can use the same html markup. +1 to remove the tag
          Hide
          Mary Cooch added a comment -

          Removing docs_required label, thanks.

          Show
          Mary Cooch added a comment - Removing docs_required label, thanks.

            People

            • Votes:
              0 Vote for this issue
              Watchers:
              8 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved: