Convert all remaining templates to HTML5 #9842

andrepereiradasilva · 2016-04-10T22:23:49Z

Pull Request for Improvement.

Summary of Changes

Basic conversion of all site and admin templates to HTML5 (some where still XHTML 1.0 Transitional).

Testing Instructions

Install patch
Check if pages in all templates (normal, component popup - ex: mail/print, error pages, offline and login) site and admin are working properly.

Check also the code changes.

Observations

All should now start with this code:

<!DOCTYPE html>
<html lang="en-gb" dir="ltr">
<head>
[...]
    <meta charset="utf-8" />
[...]

Suggestions and/or improvements are welcomed.

Bakual · 2016-04-11T06:03:42Z

Are beez and hathor really HTML5 templates? I don't know myself.

andrepereiradasilva · 2016-04-11T09:27:19Z

beez3

just check the generated HTML code of the first page. You can see footer, section HTML tags that are exclusive HTML5. So this really fixes a bug.

Also checked the frontpage generated HTML code after this PR in the W3C validator and the only errors i got are regarding the CSS media=projection that is deprecated, I plan to remove those too in this PR.

hathor

I think it was not build as an HTML5 template, but in the generate code across the backend exist some HTML5 features (data- * attributes for instance) so it should be HTML5.

Also checked the control panel generated HTML code after this PR in the W3C validator and just got 1 error: align="center" (in the version) that is obsolete in HTML5. I plan to remove that too in this PR.

I also plan to put html5.js for older IE versions.

brianteeman · 2016-04-11T09:30:00Z

Are beez and hathor really HTML5 templates? I don't know myself.
For beez at least
https://issues.joomla.org/tracker/joomla-cms/7359#event-139164

brianteeman · 2016-04-11T09:45:06Z

administrator/templates/hathor/error.php

@@ -25,7 +28,7 @@
 	<?php if ($this->direction == 'rtl') : ?>
 		<link href="<?php echo $this->baseurl; ?>/templates/<?php echo  $this->template; ?>/css/template_rtl.css" rel="stylesheet" type="text/css" />
 	<?php endif; ?>
-
+	<!--[if lt IE 9]><script src="<?php echo $this->baseurl; ?>/media/jui/js/html5.js"></script><![endif]-->


Why is this removed?

removed? it was added a missing html5.js

I need more coffee

brianteeman · 2016-04-11T09:46:02Z

templates/beez3/component.php

-$doc->addStyleSheet($this->baseurl . '/templates/' . $this->template . '/css/template.css', $type = 'text/css', $media = 'screen,projection');
-$doc->addStyleSheet($this->baseurl . '/templates/' . $this->template . '/css/position.css', $type = 'text/css', $media = 'screen,projection');
-$doc->addStyleSheet($this->baseurl . '/templates/' . $this->template . '/css/layout.css', $type = 'text/css', $media = 'screen,projection');
+$doc->addStyleSheet($this->baseurl . '/templates/' . $this->template . '/css/template.css', $type = 'text/css', $media = 'screen');


why is projection removed?

because the W3C validator said that media=projection is deprecated in html5.

OK thanks - found this link http://stackoverflow.com/questions/31410984/link-tag-media-attribute-projection-tv-not-valid so that satisfies my enquiry

brianteeman · 2016-04-11T09:47:19Z

Other than reducing th file size by a few bytes is there any benefit to these changes

andrepereiradasilva · 2016-04-11T10:05:52Z

Other than reducing the file size by a few bytes is there any benefit to these changes

The few bytes reduced are not relevant to the case.

The benefits? Aside that, with the creation of HTML5, XHTML is good for the history books? :)

It solves a series of problems of using HTML5 features (section, nav, footer, header HTML tags, data-* attributes, etc) in the Joomla core that are rendered in this templates inside a XHTML 1.0 Transitional DOCTYPE which in invalid HTML code according to the web standards.

You can check that in the W3C validator: https://validator.w3.org/

Example for beez3 (component.php):

Also, one of the things accessible templates need is having valid HTML code so that machines can correctly interpret the HTML code.

brianteeman · 2016-04-11T10:07:38Z

Thank you that answers my question

andrepereiradasilva · 2016-04-11T10:35:10Z

ok, it's ready for testing.

ghost · 2016-04-11T10:43:01Z

I have tested this item ✅ successfully on 920bb31

Working properly & start with correct code:

Isis

System: Control Panel, Global Configuration, Global Check-in, Clear Cache, Clear Expired Cache.
Component: Banners, Categories, Clients, Tracks.
Error Page

Hathor

System: Control Panel, Global Configuration, System, Server, Permissions, Text Filters.
Component: Banners, Categories, Clients, Tracks.
Error Page

Protostar

Default Startsite
Error Page

Beez3

Default Startsite
Error Page
_{This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/9842.}

waader · 2016-04-15T11:49:02Z

I have tested this item ✅ successfully on a231b51

Thanks!

_{This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/9842.}

klatte88 · 2016-04-15T13:57:42Z

I found an issue, when swapping from protostar to beez template my article which was set to acces: registered with a readmore link.

What is expected is that the intro shows with a readmore link that asks you to register/login
When swapping to beez from Protostar, the readmore link is gone and the full article and full image displays. In the backend the article still has a readmore links set

_{This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/9842.}

klatte88 · 2016-04-15T14:00:08Z

I have tested this item 🔴 unsuccessfully on a231b51

changing from protostar to beez template breaks readmore link

_{This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/9842.}

waader · 2016-04-15T15:16:29Z

@klatte88
Thanks for clarifications! Please remove your unsuccessful test statement.

mahagr · 2016-04-16T07:08:51Z

@andrepereiradasilva

Unfortunately this pull request (as it is) breaks some error pages. Just a week ago I fixed a major bug in Gantry 4, which was caused by the same behaviour.

You can quickly get the error by appending &format=htm to almost any page to get:

Fatal Error: Call to undefined method JDocumentRaw::setHtml5()

Error page does not always have JDocumentHtml object, which causes $doc->setHtml5() to fail on fatal error.

Easiest fix is to add a check to make sure the function exists or the object is JDocumentHtml before attempting to make the call.

Proper fix would be to make it possible to change document type before rendering error page. Right now doing that is impossible, though.

andrepereiradasilva · 2016-04-16T10:15:19Z

thanks for the warning @mahagr. will check that

@mbabker can you give a hand here? is there is any reason why the error pages (error.php) are not rendered like index, login, component and offline templates?

That cause several issues and makes the job harder to make a custom templating to error pages.

mbabker · 2016-04-16T14:58:56Z

Ask whoever wrote JDocumentError to not inherit JDocumentHtml properties and functions. error.php is rendered by the former, the rest by the latter.

mahagr · 2016-04-16T15:37:59Z

Actually JDocumentError is not being used either in this case; it uses JDocumentRaw which is set on routing (htm isn't a known type).

andrepereiradasilva · 2016-04-16T21:22:45Z

how about replacing (only in error.php files)

$doc = JFactory::getDocument();

for

$doc = JDocument::getInstance('html');

To force the error pages to be rendered as HTML.

mbabker · 2016-04-16T21:36:31Z

That won't force it because it's a different document type. You need to do
all the conversions in the error.php template files or make error.php be
rendered by the JDocumentHtml class.

On Saturday, April 16, 2016, andrepereiradasilva [email protected]
wrote:

how about replacing (only in error.php files)

$doc = JFactory::getDocument();

for

$doc = JDocument::getInstance('html');

To force the error pages to be rendered has HTML.

—
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub
#9842 (comment)

andrepereiradasilva · 2016-04-16T21:53:35Z

That won't force it because it's a different document type.

The change i propose in error.php files would solve the problem @mahagr is talking. I tested.

or make error.php be rendered by the JDocumentHtml class.

Yes, IMHO error.php should be rendered by the JDocumentHtml class. That way it would be a template like the other ones (login, index, offline, component) with no special cases and so easier to maintain.

It would also solve some other bugs in error.php rendering (the mod_languages, for instance, doesn't load the css in error php pages).

But, since i don't understand quite well joomla error handling, if i try to do that kind of change the result will most probably be that something gets broken 😄 .

mbabker · 2016-04-16T22:25:54Z

Again, ask whoever designed JDocumentError to be a different document type than JDocumentHtml, and why they wrote the error handler to only support HTML output. It's not a bug in the error.php template, it's how the thing is (poorly) designed; it doesn't support <jdoc> tags. Changing the $doc reference won't fix anything in error.php; now you're changing references of another JDocument instance instead of $this instance that you're already rendering. So you have to do all the HTML5 stuff in error.php directly and not rely on anything that's in the JDocumentHtml API.

andrepereiradasilva · 2016-04-16T22:30:35Z

ok, i see. since it was (poorly) designed this way i will do the small html5 changes in error.php directly then.

andrepereiradasilva · 2016-04-16T22:31:08Z

And thanks again for the explanations.

Also solves fatal error when using error pages in other formats

joomla-cms-bot · 2016-04-17T13:45:09Z

This PR has received new commits.

CC: @franz-wohlkoenig, @klatte88, @waader

_{This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/9842.}

joomla-cms-bot · 2016-04-17T14:46:39Z

This PR has received new commits.

CC: @franz-wohlkoenig, @klatte88, @waader

_{This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/9842.}

andrepereiradasilva · 2016-04-17T14:54:15Z

Please test again.
Include also a test in each template error page with ?format=raw query string.

mahagr · 2016-04-18T05:35:53Z

After a quick code review, all error pages should now work.

andrepereiradasilva · 2016-05-26T13:48:50Z

This PR get conflicts really quickly.
So will close this PR and will make a PR for each template. That should be more easy to test and mantain conflicts.

andrepereiradasilva added 2 commits April 10, 2016 22:11

templates to html5

b884ea2

setHtml5

326e57a

joomla-cms-bot added the PR-staging label Apr 10, 2016

andrepereiradasilva added 2 commits April 10, 2016 23:30

forgot this one

884d126

hathor error too

c3bc6a5

andrepereiradasilva added 4 commits April 11, 2016 10:32

remove deprecated "projection" css media from beez3 (component page)

48068a3

remove deprecated "projection" css media from beez3 (error page)

4d4ca99

remove deprecated "projection" css media from beez3 (index page)

aebd5b3

load html5.js in hathor error template too

c7ef7c6

brianteeman reviewed Apr 11, 2016
View reviewed changes

andrepereiradasilva added 2 commits April 11, 2016 10:45

load html5.js in system component template

c633fbc

load html5.js in system error template

914e41d

brianteeman reviewed Apr 11, 2016
View reviewed changes

load html5.js in beez3 index template

629a034

andrepereiradasilva added 5 commits April 11, 2016 11:17

add html5.js to system tempalte component.php

0d7aa94

add html5.js to system template error.php

b9efadd

add html5.js to system template offline.php

920bb31

remove invalid "align=" from isis index.php and replace it with css

c634b6e

remove invalid "align=" from mod_version and replace it with css

a231b51

andrepereiradasilva added 4 commits April 17, 2016 14:08

Output error pages as html5 by default

7c1d53e

Also solves fatal error when using error pages in other formats

errors code style

95d976f

frontend templates code style

66edbe7

backend templates codestyle

4d1f27a

andrepereiradasilva added 2 commits April 17, 2016 15:37

minor improvements

520bedf

minor changes

1eb9433

andrepereiradasilva closed this May 26, 2016

andrepereiradasilva deleted the no-xml branch May 26, 2016 13:48

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Convert all remaining templates to HTML5 #9842

Convert all remaining templates to HTML5 #9842

andrepereiradasilva commented Apr 10, 2016

Bakual commented Apr 11, 2016

andrepereiradasilva commented Apr 11, 2016

brianteeman commented Apr 11, 2016

brianteeman Apr 11, 2016

andrepereiradasilva Apr 11, 2016

brianteeman Apr 11, 2016

brianteeman Apr 11, 2016

andrepereiradasilva Apr 11, 2016

brianteeman Apr 11, 2016

brianteeman commented Apr 11, 2016

andrepereiradasilva commented Apr 11, 2016

brianteeman commented Apr 11, 2016 via email

andrepereiradasilva commented Apr 11, 2016

ghost commented Apr 11, 2016

waader commented Apr 15, 2016

klatte88 commented Apr 15, 2016

klatte88 commented Apr 15, 2016

waader commented Apr 15, 2016

mahagr commented Apr 16, 2016 •

edited

Loading

andrepereiradasilva commented Apr 16, 2016

mbabker commented Apr 16, 2016

mahagr commented Apr 16, 2016

andrepereiradasilva commented Apr 16, 2016 •

edited

Loading

mbabker commented Apr 16, 2016

andrepereiradasilva commented Apr 16, 2016

mbabker commented Apr 16, 2016

andrepereiradasilva commented Apr 16, 2016

andrepereiradasilva commented Apr 16, 2016

joomla-cms-bot commented Apr 17, 2016

joomla-cms-bot commented Apr 17, 2016

andrepereiradasilva commented Apr 17, 2016 •

edited

Loading

mahagr commented Apr 18, 2016

andrepereiradasilva commented May 26, 2016

Convert all remaining templates to HTML5 #9842

Convert all remaining templates to HTML5 #9842

Conversation

andrepereiradasilva commented Apr 10, 2016

Summary of Changes

Testing Instructions

Observations

Bakual commented Apr 11, 2016

andrepereiradasilva commented Apr 11, 2016

beez3

hathor

brianteeman commented Apr 11, 2016

brianteeman Apr 11, 2016

Choose a reason for hiding this comment

andrepereiradasilva Apr 11, 2016

Choose a reason for hiding this comment

brianteeman Apr 11, 2016

Choose a reason for hiding this comment

brianteeman Apr 11, 2016

Choose a reason for hiding this comment

andrepereiradasilva Apr 11, 2016

Choose a reason for hiding this comment

brianteeman Apr 11, 2016

Choose a reason for hiding this comment

brianteeman commented Apr 11, 2016

andrepereiradasilva commented Apr 11, 2016

brianteeman commented Apr 11, 2016 via email

andrepereiradasilva commented Apr 11, 2016

ghost commented Apr 11, 2016

waader commented Apr 15, 2016

klatte88 commented Apr 15, 2016

klatte88 commented Apr 15, 2016

waader commented Apr 15, 2016

mahagr commented Apr 16, 2016 • edited Loading

andrepereiradasilva commented Apr 16, 2016

mbabker commented Apr 16, 2016

mahagr commented Apr 16, 2016

andrepereiradasilva commented Apr 16, 2016 • edited Loading

mbabker commented Apr 16, 2016

andrepereiradasilva commented Apr 16, 2016

mbabker commented Apr 16, 2016

andrepereiradasilva commented Apr 16, 2016

andrepereiradasilva commented Apr 16, 2016

joomla-cms-bot commented Apr 17, 2016

joomla-cms-bot commented Apr 17, 2016

andrepereiradasilva commented Apr 17, 2016 • edited Loading

mahagr commented Apr 18, 2016

andrepereiradasilva commented May 26, 2016

mahagr commented Apr 16, 2016 •

edited

Loading

andrepereiradasilva commented Apr 16, 2016 •

edited

Loading

andrepereiradasilva commented Apr 17, 2016 •

edited

Loading