This article will show you an example for a zend framework layout in html5. In the next articles i will show you the view helpers i use in this layout.
I know html5 is new and not supported by all browsers. Especially IE has problems with html5. But there is a solution for the html5 tags, the problem is, it's javascript, so if the user has deactivated javascript this hack won't work. To enable html5 tags in IE before IE9 we use the shiv javascript file from remy sharp.
http://code.google.com/p/html5shiv/
The top of our html document:
First we output the doctype we had previously setup in our bootstrap.
Then we add the html tag, we define the text direction which is left to right and the language of our content. $this->language() is our first view helper, it's a very simple view helper that takes the language code from the registry and returns it.
|
1
2
3
|
<?php echo $this->doctype(); ?> <html dir="ltr" lang="<?php echo strtolower($this->language()); ?>"> |
The head tag and its content:
We had already defined utf-8 as encoding format for our headers in our bootstrap and passed that value to the frontcontroller, then we also defined the encoding for our views. We retrieve the view encoding format using getEncoding and output that value in a meta tag. Now the page headers and pages html code tell the browser that our encoding type is utf-8.
For the html title tag we use the zend framework headTitle vie helper. We check if the title variable isn't empty, if it isn't we pass it to the headTitle helper and then output the tag. You perhaps remember that we have defined a default title start value in the bootstrap, the second part of the title will be set in the actions.
We do the same for the keywords and description tag. But for those two we need to use the zf headMeta view helper. We check if the variables aren't empty and if they aren't we output the tags. Every action will pass it's own keywords and description to the response object and we will output them in our layout.
Now we use another zend framework view helper, the headLink helper which will fullfill some tasks for us. In the first line we add a link to our rss file so that it's easier for search engines to find it (of course you can add multiple links if you have multiple rss feeds). The next two lines add a favicon for browser bookmarks and an icon for apple iPad and / or iPhone devices. If somebody adds a bookmark in its iPhone or iPad this icon will be placed on the desktop and look like an app icon.
$this->css(); calls a view helper i will show you in the next post, it's a css manager helper. The helper is called before we output the headLink content because the helper will add the css links to the headLink helper.
$this->dojotoolkit(); is another helper i will show you in one of the next posts, this helper will help us to manage the dojo toolkit code for our actions. The dojo toolkit view helper will pass it's code to the zf headScript helper, yet another zend framework helper, it must be placed before we echo the headScript content.
$this->javascript(); is another helper i will show you in a post soon. This helper will help us to manage all javascript code that doesn't depend on the dojo toolkit. Like the dojo toolkit view helper this helper will pass it's code to the zf headScript view helper.
In the noscript tag does nothing yet, copy it where you will have javascript and add fallback html code for browsers which don't parse javascript or for users which have disabled javascript rendering.
More informations on Zend Framework view helpers http://framework.zend.com/manual/en/zend.view.helpers.html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<head> <meta charset="<?php echo $this->getEncoding(); ?>"> <?php if (!empty($this->keywords)) $this->headMeta()->appendName('keywords', $this->escape($this->keywords)); if (!empty($this->description)) $this->headMeta()->appendName('description', $this->escape($this->description)); echo $this->headMeta(); ?> <?php if (!empty($this->title)) { $this->headTitle($this->escape($this->title)); } echo $this->headTitle(); ?> <?php $this ->headLink()->setAlternate($this->base().'/rss/', 'application/rss+xml', 'RSS') ->headLink(array('rel' => 'shortcut icon', 'href' => $this->domain().$this->base().'/images/favicon.ico', 'type' => 'image/x-icon'), 'APPEND') ->headLink(array('rel' => 'apple-touch-icon', 'href' => $this->domain().$this->base().'/images/apple-touch-icon.png'), 'APPEND'); $this->css(); // css layout view helper echo $this->headLink(); // headlink output ?> <?php echo $this->dojotoolkit(); ?> <?php $this->javascript(); // javascript layout view helper echo $this->headScript(); // headscript output ?> <noscript></noscript> </head> |
Now we create the body tag, for its content we use another view helper, the bodytag view helper. More avout this helper in one of my next posts.
The next few lines are from basic html5 template (sources: http://html5boilerplate.com/ and http://diveintohtml5.org/).
Finally at the end is yet another view helper, the google analytics which will use an asynchronous loading mechanism.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<?php echo $this->bodytag(); ?> <div id="wrapper"> <header role="banner"> <hgroup> <h2 id="website_subtitle">Powered by zend framework and html5</h2> </hgroup> </header> <aside id="left"> <nav> </nav> </aside> <section id="content"> </section> <footer> </footer> </div> <?php echo $this->googleanalytics('UA-16705563-1'); ?> </body> </html> |
Every time you make changes to your layout or views html5 code you can use the html5 validator from w3c http://validator.w3.org/
For more informations about html5 take a look at the w3c specification http://www.w3.org/TR/html5/