joomla!

DIE PDF DATEI IST KOSTENLOS DOWNLOADBAR AB 15.02.2012

Sie haben die Einsteigerbücher zu Joomla! 1.6, 1.7 und 2.5 gelesen und möchten jetzt mehr wissen?

• Sie wollen eigene Anforderungen mit Joomla! lösen?
• Sie wollen Geld verdienen als Entwickler?

Dieses Buch gibt ihnen eine Einführung in die Entwicklung mit Joomla! und ist ein guter Start für Ihren nächsten Schritt.

• Vorwort zur deutschen Ausgabe
• Einleitung
• Richten Sie ihren Arbeitsplatz ein
• Schreiben Sie ihre eigene Komponente
• Schritt 1 - Die Basis
• Schritt 2 - Datenbank, Backend, Sprachen
• Schritt 3 - Die Coolen Dinge
• Schreiben Sie ihr eigenes Modul
• Schreiben Sie ihr eigenes Plugin
• Schreiben Sie ihre eigenen Template Overrides
• Schreiben Sie alternative Template Layouts
• Schreiben Sie ihre eigene App mit der Joomla! Plattform
• Beliebte Fehler
• Bieten Sie Ihre Erweiterung im Joomla! Extension Directory an
• Was ist GIT?
• Bringen Sie Ihren Code in das Projekt ein
• Lokalisation mit OpenTranslators
• Geld verdienen mit Erweiterungen für Joomla!
• Was ist PHP?
• Was ist Objektorientierte Programmierung?
• Was ist MooTools?

Ebook Amazon Kindle (5.99 € Basis Preis. Alle Preise werden auf dieser Basis automatisch von Amazon errechnet):

• Germany: amazon.de Joomla! Entwickler - Ein Anfängerbuch
• USA: amazon.com Joomla! Entwickler - Ein Anfängerbuch (German Edition)
• United Kingdom: amazon.co.uk Joomla! Entwickler - Ein Anfängerbuch (German Edition)
• France: amazon.fr Joomla! Entwickler - Ein Anfängerbuch
• Italy: amazon.it Joomla! Entwickler - Ein Anfängerbuch
• Spain: amazon.es Joomla! Entwickler - Ein Anfängerbuch

Paperback coming soon

DOWNLOADBAR AM 15.2.2012

In Swahili bedeuted das Wort "Jumla" soviel wie "alle gemeinsam". Dieses Wort war die Inspiration für den Namen Joomla!.

Das Joomla! Project ist eines der verbreitesten Content Management Systeme weltweit, getragen von einer weltweiten Community.

Joomla! 2.5 ist der Nachfolger von Joomla! 1.5. Es ist ein Long Term Release und wird von Januar 2012 bis Juli 2013 die aktuelle Version des Projekts sein.

Mit Joomla! lassen sich individuelle Websites in Ihrer Sprache erstellen.

Das funktioniert, auch wenn Sie kein Spezialist sind :-)

IN TRANSLATION PROCESS

La recherche et votre site Web

En tant que propriétaire de site Web, développeur ou créateur, vous savez que l'obtention de visiteurs est la clé d'une présence réussie sur le Web. Dans un monde où internet est la règle et où utiliser les fonctions de recherche reste la façon la plus rapide pour apprendre, localiser les bons produits et les bons services, ou obtenir des retours d'utilisateurs, vous devrez suivre les pratiques établies de recherche en ligne si vous souhaitez être trouvé par les personnes qui recherchent des choses similaires à ce que vous proposez sur votre site Web. Pour vous donner une idée de l'importance prise par la recherche en ligne ces dernières années, voici quelques chiffres fournis par ComScore, une société de recherche spécialisée en intelligence marketing numérique :

• recherches Google: 88 billion par mois
• recherches Twitter: 19 billion par mois
• recherches Yahoo: 9.4 billion par mois
• recherches Bing: 4.1 billion par mois

Joomla 2.5 et le SEO

Étant l'un des systèmes les plus avancés de gestion de contenu Open Source dans le monde, Joomla ! a été conçu pour vous fournir toutes les caractéristiques et les fonctionnalités dont vous avez besoin pour rendre votre site Web convivial pour les moteurs de recherche et prêt à être détecté par le public voulu. Comme vous le savez probablement, le processus de

“l'amélioration de la visibilité d'un site web ou une page web dans les moteurs de recherche via les «naturels» ou non - rémunérés (" organique " ou "algorithmique ") résultats de recherche "¹

est appelé SEO ou Search Engine Optimization.

Les deux principales fonctions du SEO sont pour générer du trafic constitué de visiteurs de haute intention prêts à devenir prospects ou clients, et de vous aider à construire votre image de marque en ligne.

Le SEO a des éléments on-page et off-page, que vous pouvez consulter en détail dans ce très utile infographique par searchengineland.com. La bonne nouvelle est que Joomla ! peut vous aider sur ces deux éléments, vous permettant de construire une fondation solide de SEO qui peut être facilement étendue dans une présence réussie axée sur le trafic web.

fonctionnalités SEO incluses dans Joomla! 2.5

 Urls SEO-friendly

Figure 1: Urls SEO-friendly

Selon Matt Cutts de Google, les meilleurs URLs de site Web ne comportent pas plus de 3-5 mots. En partant de là, plus longues sont les urls, moins elles auront de puissance de ranking.

Voici à quoi ressembleront vos urls une fois votre site web mis en place:

• http://www.yourdomain/index.php?option=com_content&view=article&id=8:beginners&catid=19&Itemid=260

Et voila comment elles seront après avoir modifié votre fichier access.txt et activer la fonction url SEO accessible dans le panneau de configuration générale de Joomla :

• http://www.yourdomain/products/your-product-name

Les moteurs de recherche peuvent lire le premier type d'URL, appelées urls dynamiques, sans aucun problème. Cependant, c'est une pratique courante d'utiliser le second type, appelé urls SEO-friendly, à la place. Il y a deux raisons à cela:

1. Les utilisateurs ont plus tendance à cliquer sur les liens url qui ont du sens et des mots de recherche pertinents
2. Les Urls dynamiques sont très souvent à l'origine de ce que les moteurs de recherche pourraient interpréter comme du duplicate content, ce qui au final peut affecter négativement le classement de vos pages dans les résultats de recherche.

Joomla vous permet de mettre en place votre URL SEO-friendly en deux étapes faciles - en modifiant la Configuration globale sur l'admin back-end et en faisant quelques modifications mineures dans le fichier access.txt se trouvant à la racine de votre site. Vous pouvez en outre modifier les mots réels que chaque URL contient en les éditant dans l'éditeur de texte de votre contenu ou dans votre panneau d'installation d'élément de menu.

Titres SEO dans le navigateur

Figure 2: Titres SEO dans le navigateur

Les balises de titre, auxquelles on fait souvent références sous le vocable : "Titres dans le navigateur"dans votre interface backend (elles sont généralement affichées en haut de la fenêtre d'un navigateur) sont les éléments SEO les plus importants et qui influent directement sur le classement de vos pages individuelles. Pour être efficace, chaque titre doit être :

• Unique pour chaque page,
• Extrêmement pertinent par rapport au contenu de cette page,
• 70 caractères de long, au maximum,
• Devrait inclure le mot clé de recherche pour lequel vous voulez optimiser la page.

This is how it works, as explained by seo.com:

"For example, let’s say you have an educational site that provides information and guidelines on teacher certification requirements. You’ve decided that the most important keywords for your site are “teaching certification” and “teaching requirements.” In this case, a page title along the lines of “Teaching Requirements for Teacher Certification” is highly relevant to the topic of the site. Spiders will crawl your site, and because the title is the first factor it sees, the spider will “read” it and then examine the rest of the page finding the keywords used in other places on the page to determine how relevant the title is to the rest of the content. If the content, H tags, and title tag all relate—you’re in business! This is why it’s so important to target the most critical keywords in the title tag."

With Joomla, adding the title tags is an easy and hassle-free process. You can add and modify the tags of all of your pages from the menu item setup panel.

SEO Meta Descriptions for All Your Pages

Figure 3: SEO Meta Descriptions for All Your Pages

Meta description is the brief summary that shows up under the url of each individual result that a user sees in the search results page after performing an online search query. While it is no longer considered of key importance as far as search engine rankings are concerned, it defines how successful your click through rate is (i.e. whether or not users will actually feel compelled enough to click on your page link). Meta descriptions shouldn't be longer than 160 characters.

Figure 4: SEO Meta Descriptions in Search Engine

Joomla enables you to add meta descriptions to all of your pages – even when you are creating a page that displays a whole category of articles. You can manage this process on two levels – at the menu-item level (for category pages) and at the article level (inside the text editor where you write your article).

Easy Image Titles for SEO

Figure 5: Image Titles for SEO

Search bots are not able to see images correctly. This is where the “alt” tags or image descriptions/titles come into play. They help make your images searchable, ultimately helping with your SEO. Joomla provides you with an easy-to-fill image dialog box ², where you are conveniently prompted to include a short description for your image. This is one more easy-to-use SEO enhancing feature that can provide quick and relevant results.

Redirect for SEO Best Practice

Figure 6: Redirect Manager

In his article about  Redirects and SEO, Stephan Spencer, an SEO expert and blogger says the following:

"Use of the proper kind of redirects is a matter of SEO “best practice”. Every site needs to have redirects (e.g. for example, from your non-www version of your site to your www version or vice versa). And if you don’t, you’re leaving money on the table. In addition, sites evolve over time and URLs change. And any time you make changes to your URLs — whether it’s to the domain, subdomain, subdirectories, filenames, or query strings — you need to ensure links pointing to the old URLs are still valued by Google and the other engines, and that their voting power gets transferred to the new URLs. "

Redirecting users from your old or non-existing pages, documents and other website assets to your new ones can be done in 3 easy steps using Joomla’s native redirect component. It is user-friendly, has zero learning curve, and the best part about it is that every time a web visitor hits a non-working page, the component lists the problem url, as well as how many times it was clicked on. You can then swiftly fix the problem by adding a new url to redirect future visitors to a page that works.

RSS for better SEO

Figure 7: Feeds Module

RSS will enhance your SEO efforts by helping you build more backlinks. As you know, the more backlinks you have to your site, the more Google and the other search engines will trust it and push it up in the search ranking results. The simplest way to use RSS for SEO purposes is to use Joomla’s syndication feeds module to set up RSS feeds for your content and post the feed links on your website and social media channels (LinkedIn, Facebook, etc.), as well as on some of the various content aggregator sites that exist on the web, like feedage.com, etc. You can also share your RSS links with partners and other non-competing sites – as long as you constantly provide relevant and fresh content, many organizations might be willing to subscribe to and display your feed on their website, thus helping you build more backlinks.

In Conclusion

Using all of the features highlighted above will provide a fast and easy way for you to establish and maintain the right SEO practices for your website. However, result-driven SEO is not just about titles and images. It starts before you even begin to build your site and is an on-going project that needs to be managed regularly and measured for success. Here are a few great resources that I would like to recommend. They will help you learn everything that you need to know to become your very own free and effecive SEO consultant:

• This is a very useful 8-part training series on keywords by wordtracker.com, which is free. It introduces you to the concept of keywords and explains why SEO starts with defining your main, category and page keywords, helping you understand how to find your best keywords and how to include them in your texts in order to build a steadily-growing, free, organic traffic to your site.
• To learn more about SEO and the way to implement it, read this searchengineland.com’s free step-by-step Guide to SEO.
• This is another article that offers a quick 5-step guide to jump-starting your do-it-yourself SEO program. 
• The SEO Cheatsheet by SEOMoz gives you great tips on getting your SEO processes up and going in no time.
• The Web Developer SEO Cheatsheet by SEOMoz is a great infographic, showing you how you have to structure content on your page.

____________

¹Definition taken from Wikipedia
²Attached image features the JCE Editor interface. For more information: http://www.joomlacontenteditor.net/

IN TRANSLATION PROCESS

A template usually contains more than you see at first sight.

The term template is usually connected with the visual appearance of a website. But in addition to the design, it is distinguished by the way of the technical implementation. It determines where the content is located within the flow of documents, when and where certain modules can be switched on and disappear, whether custom error pages are used and what markup - version of HTML should be used.

Some users will certainly be familiar with the Beez template in Joomla! 1.5. Both, beez_20  and beez5 are visually very different from the design of the previous version. For the design I used a neutral grey for the elementary components of the template, such as the menu to provide a solution that harmonizes with many colours.

Even at that time, I wanted to develop a standard compliant, easily accessible and adaptable template. I consciously had chosen the colour purple, in the hope that many designers would take the code, modify it and make it freely available. I had hoped for a variety of many new free templates. This has unfortunately not occurred.

Another mistake was probably that I did not communicate clearly enough what the real aim was. The output was structured in a way so that almost any design could be implement in a simple and straightforward manner, with only slight modifications in the CSS. I kept this principle in the new versions of Beez. Additionally, there is a more accessible JavaScript and in beez5 a small portion of HTML5. Beez_20 does not require template overrides. Layout tables are finally not in use anymore in Joomla!. The new HTML-based output follows the structure of the old Beez template.

The CSS class names have been renamed and unified for a better understanding. This is a tremendous advantage for template designers. The HTML output from the Joomla! Standard is clean and well-formed. You do not need to use template overrides anymore to generate clean, standard-compliant code. The technical capabilities of both Beez templates are almost identical. They differ only in their graphic design. The Beez5 version is also designed for the use of HTML5.

The main features

• Accessibility
• Configurable position of the navigation
• WAI-ARIA Roles Landmark
• Automatic representation of the modules in accessible tabs
• Fade in and out of collapsible modules
• Fade in and out of collapsible column
• In beez_ 20 you can choose between two forms: natural or human
• In beez 5 HTML5 is usable

General Accessibility

For most people the Internet has become the norm. Information from around the world are ready for retrieval and perhaps, more importantly, also the special offers at the local hardware store, the opening times of the registration office or the phone book are available on your home screen. Annoying phone calls or library visits are unnecessary, you just look on the net.
But not everybody benefits from this development. Those people, with any physical or mental disability have difficulties to participate fully in society, even though they could benefit enormously from communications technology. But they often fail because of barriers that obstruct their access to information or make it even impossible. Many of these barriers can be overcome, if the offers are designed accordingly.

Operators of online shops or banks which provide Internet banking, should be aware of that not so small target group.

Accessible web design aims at making content and interactions on the Internet accessible for all user groups and devices, if possible.

Approx. 8% of the German population have a physical limitation that makes it difficult for them to access information from the Internet. Commonly the term “accessibility” in web design is identified with Internet for blind people. I want to emphasize that this is not all - indeed, this is only the smallest part. I've often wondered why this is so. Probably the reason is that the monitor has become the classic symbol for the computer, and someone who sees nothing, cannot use it. In my daily work, I have noticed that even blind people cope much better than people with other types of disabilities.

Blind are people whose residual vision is only a few percent of the average value. The number of blind people in Germany lies between 150,000 to 200,000. Some of them can decipher just texts through the computer font size and customized colour settings, while others depend on acoustic information or read by touching the Braille display.

Significantly greater is the proportion of people with severe visual impairment.

About a quarter of the population in working age complains of various degrees of ametropia. Later on, the percentage is much higher. Some of these problems can be compensated by glasses quite well, others with limitations only. Certain eye diseases such as cataract or glaucoma can be resolved or at least mitigated through surgery. Some, like retinitis pigmentosa or diabetic retinopathy, lead to a steady deterioration of vision and ultimately often lead to complete loss of vision. "In the so-called" tunnel vision, the visual field of the affected people is extremely limited - sometimes to the size of a two-Euro coin, which is held at arm length from the eyes.

About 10% of the male population is affected by mild forms of colour blindness – which usually means that some reds and greens cannot be distinguished from each other. Blind to other colours, complete colour blindness or red-green colour blindness in women are very rare.

One other potential group of users has problems with the usual input technology - not everyone can use a mouse or a standard keyboard.

There can be many reasons: arms and fingers are immobile or move spontaneously and are difficult to control. Others have even no arms and no hands or are paralyzed from the neck down after a stroke on one side. As long as a human being is capable to send a controlled binary signal - the famous 0 or 1 – he can learn to operate a computer and its functions with appropriate software.

There are about 60,000 to 100,000 people in Germany with extremely limited ability to hear. Several thousand of these were disabled in learning the German language so that they know it only imperfectly (at the level 4th to 6th grade). This makes the demand for more understandable texts clear.

To communicate with each other, but also for the reception of foreign or sophisticated content they prefer the German sign language - this is an idiom on its own, independent of the spoken language based on a system of signs and gestures.

Attention

Not only people with low hearing abilities surf the Internet without or with speakers turned off! It is not sufficient, for example, to give acoustic warning signals only - they must always be accompanied by a clearly interpretable visual notice.

The more the Internet conquered all areas of life, the more situational disabilities are visible: slow connections in the hotel, uncontrollable lighting conditions in the moving train, arranged waiver of sound in the workplace.

All people benefit from accessible websites. It is not about meeting all the rules to the fullest extent, which governmental institutions are required to comply to. Even small steps toward accessibility can significantly improve the usability of a website.
Due to its high penetration, Joomla! has the ability to influence a lot. With the standard template beez it is now relatively easy, to create websites which are accessible and usable for many.

As in beez 1.5 all those things that are necessary for the design of accessible templates are implemented also in beez_20 and beez5. The most important are:

• Separation of content and layout
• Semantically logical structure
• Anchors links
• Keyboard navigability
• Sufficient colour contrasts

Separation of Content and Layout

The first and most important rule for developers is the possible complete separation of content and layout:

• Clean and pure HTML for the content
• No unnecessary layout tables
• Formatting exclusively with CSS
• A logical semantic structure
• Anchor links

The linearisable issue of content and formatting via CSS only is one of the most important conditions for convenient accessibility.

Only then assistive technology has the option to recycle the contents at will, while the visual presentation can be completely ignored. The outsourcing of the presentation in style sheets give, for example, visually impaired users, the possibility to define own style sheets in their browser and adapt that the pages exactly fit his/her needs. A linear presentation of content and an adequate semantic structure is particularly important for users of screen readers.

Screen readers grasp the content of a site from top to bottom, that means linear. The use of extensive layout tables hinders linearisation.

Behind the term Semantic Web probably most of the people can imagine only very little. You probably associate language lessons, but it also plays a special role in writing Web content. For example, screen readers offer their users to jump from heading to heading or from list to list, to get a quick overview of the overall document. If a Web document has no headers, this functionality is not available.

The formal structure of a web document should largely correspond to the content structure. Depending on the Web project the choice of the corresponding heading hierarchy can be quite a challenge.

Today, this concept can be found not only in the templates, but in the entire Joomla! Standard output. In the development of Joomla! 1.6, this was a central part of the development work. Reasons were, in addition to better usability in assistive technologies, also search engine optimization and better usability in mobile devices. Well-structured code not only helps people with disabilities better navigate within a site, even Google feels better with such a well-structured site.

Anchor Links

Linear presentation of content has a big drawback: You may have to travel a very long way, in order to access "in the back lying" areas of content.
On the screen, a three-column layout allows that a number of areas begin “above" and the eye can jump right to it, where it, supported by visual aids, suspects interesting information.

Remedy offers the concept of anchors. It is, in fact, a non-visual counterpart to the graphical layout and allows the user of linear playback devices to identify key content areas at the beginning of the page and then immediately jump to the area where he/she believes the information of his/her interest lies.

Practically, the use of anchors means, to set up an additional menu at the top of each page for internal navigation of the page. In most cases it will be useful to hide this menu from the graphical layout. It's irritating for users, that can see, to click a link, but nothing (apparently) is happening, because the link target is already visible in the viewport.

In any case, the "anchor links menu" should be not too long and built in a very well thought-through manner, because it extends and complicates, due to the linearisation itself, the path of perception. In general, it's advisable to offer the main content as the first target jump, then regular visitors, who know the site and handle the navigation specifically, have the shortest way to where they actually want to go to.

At least here it becomes clear that, particularly websites with more complex content pages do not only need a graphical layout, but also a content design that aims to arrange the content in a form that it contains no unnecessary barriers for the users of linearising clients.

Example:

<ul class="skiplinks">
  <li><a href="#main" class="u2">Skip to content</a></li>
  <li><a href="#nav" class="u2">Jump to main navigation and login</a></li>
</ul>

The Colour Choice

The colour choice is, in the context of accessibility, of particular importance because even people with impaired colour vision should be able to use your website fully.

If you convert to a layout into shades of gray, you gain an approximate idea of what colour-blind people can see. However, the perception is very individual and depending on the severity of different degrees of ametropia. Many colour-blind people, however, have learned during their life, what colours are represented by what they see. They know, for example, that grass is green, and they can identify by comparison and other shades of green.

Much more widespread than the total colour blindness is the so-called red-green colour blindness. Affected by a genetic anomaly, people are not able to distinguish the colours red and green. Mixed colours that contain these colour components are blurred for them.

Contrasts

Colours also play an important role in various other types of visual impairment, not only because of the colour itself, but also a significant colour contrast can be helpful in the use of a web page.

Foreground and background colour within the text elements should form a distinct contrast, though it is not possible to select the colour and contrast settings, which can meet all requirements. Black text on white background achieves a maximum colour contrast. To avoid disturbing glare effects, a slight tinge of the background can be useful. Some visually impaired people will need very strong contrasts to separate the individual elements of content in a page from each other. For them, colour combinations such as white text on a bright, contrasting orange background are not rich enough. In contrast, other strong contrasts act as a radiation - the content is difficult to read.

beez_20: Design Choice

In the Beez 2.0-Template, you can choose between personal and nature design. The implementation of the files nature.css and personal.css via the template parameters as well as the structure of the used CSS files are the basis for this method.

Figure 1: Choose the Style

There are two more files which are responsible for the colour scheme.The position.css  and the layout.css are responsible for the overall positioning and spacing.

Would you like to change later only the colours of the template, you can simply modify the files personal.css or nature.css as desired. The positioning of the content remains the same, as they are defined in other files.

All style templates are still arbitrarily modifiable and can be amended by template developers to include additional templates.
In the design of the source code I have taken into account to offer the maximum possible creative variations by modifying the CSS files. I'm telling you that very, very quietly, but in their own way, the Beez templates are something like frameworks and save you a lot of working steps.

Position of the Navigation

For aesthetic reasons or to improve the search engine friendliness and accessibility, it may be necessary to position the navigation before or after the content. Both versions of the Beez templates let you choose between two options in the backend.

Figure 2: Select position of the navigation

The navigation is visually and semantically positioned before or after the content and formatted by use of CSS.
If you open the index.php of beez_20 or or the template you have already modified, you can find around line 27 the following assignment:

$navposition = $this->params->get('navposition');

The variable $navposition is assigned to the currently selected value in the backend. The variable expels the value left or center. Left represents the position before the content, center stands for the positioning after the content.

The term center seems to be a little confusing here, it would be logically better to say it is right. But depending on how you design the CSS, you can place the navigation in three-column view in the middle.

JavaScript and WAI ARIA

WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) is a technical specification of the Web Accessibility Initiative (http://en.wikipedia.org/wiki/Web_Accessibility_Initiative), which will facilitate the participation for people with disabilities in today's increasingly complex and interactive web services. This technique is particularly helpful in designing dynamic content presentations and user interfaces. The technique is based on the use of JavaScript, Ajax, HTML, and CSS.

Especially blind people often lose orientation when visiting a site where content is suddenly displayed or hidden. People, that can see, can sense this change with the eyes, blind people can understand it only when the focus is placed on the item.

To focus means nothing else than to place the cursor in the appropriate place to make the positioned content accessible.

In HTML and XHTML we did not had the opportunity to focus on all elements. Only the interaction elements such as links, buttons or input fields were focusable. This has changed with the use of WAI ARIA and HTML5.

The used scripts within the Beez templates rely on this technique to make the template accessible to people with disabilities.

WAI ARIA - Landmark Roles: First Aid for the Orientation

Landmark Roles are intended to facilitate the orientation on a website by describing page areas and their exact function within the page. The navigation has the role navigation, search has the role search, the main content has the role main. The implementation is quite simple. The element is extended only to the appropriate role attribute. Thus, users of modern screen readers will be informed of this role.

<div id="main" role="main">

Inside the Beez template, this is done automatically by using javascript (javascript/hide.js). The approval of the Wai-Aria technology is still pending and with the direct implementation into the source code the website would fail doing the validation test.

A complete overview of the landmark roles can be found at http://www.w3.org/TR/wai-aria/roles#landmark_roles.

If you later use the Beez template as the basis for your own template and modify the structure of page areas, you should adapt the script accordingly.

Collapsible Modules and Sidebars

The activation and deactivation of certain areas can be helpful for the user, especially on pages with a lot of content. Both Beez templates provide two different ways. First, the column with additional information can be fully switched on and off, on the other hand, the modules can be collapsed up to their headlines.

Hide Column

To test this functionality, you have to place a module in the column for additional information. The module positions position-6, position-8 and position-3 are available. No matter whether the navigation is before or after the content, whenever this column is displayed, a link appears right above with the text "close info".

Figure 3: Hide Column

By activating this link, the column is hidden, the link text will change to "open info" and the column will be re-activated by clicking.

This functionality is controlled by JavaScript. All the scripts mentioned here are based on the supplied Mootools JavaScript framework that diminishes our work in many areas.

The file hide.js in the JavaScript folder of the template is responsible for showing and hiding the column.

In the index.php of the template, around line 194, you will find the necessary HTML code.

<div id="close">
 <a href="#" onclick="auf('right')">
  <span id="bild">
   <?php echo JText::_('TPL_BEEZ2_TEXTRIGHTCLOSE'); ?>
  </span>
 </a>
</div>

The textual contents of the JavaScript variables are controlled with the Joomla language strings.

Show and Hide Modules

One of the biggest challenges in designing a website is the clear structuring of the content. Especially on the homepage, you often need to place a variety of information without cluttering the page.

Figure 4: beez-Slider

Both Beez templates have the opportunity to present modules in the form of sliders.

Here, the first output is the title of the module. By clicking on the plus sign next to the heading, the module opens and its contents will be visible. Then, the plus sign replaced by a minus sign and the module can be folded back. Even with this method I have used the WAI ARIA technology.

In order to use modules as described, they should be integrated in the template by using the command

<jdoc:include type="modules" name="position-8" style="beezHide" headerLevel="3" state="0" />

By using the style = "beezHide" all modules that are loaded at this position are shown as sliders.

You may have noticed that the command includes the attribute “state”, which controls whether the module is expanded or collapsed.
If you choose the value 0, it is closed when it first loads, select the value 1, it is opened by default and can be closed by the user.

Accessible Tabs

The presentation of content in so-called Tabs is becoming increasingly popular. There are already modules that Joomla! extends with this functionality. But none of the offered modules fulfilled the requirements of accessibility.

Figure 5: BeezTabs

The integrated solution in Beez is based on the WAI-ARIA techniques to ensure accessibility. To represent the modules in tabs, they are integrated as follows.

<jdoc:include type="modules" name="position-5" style="beezTabs" headerLevel="2" id="1" />

All on the position-5 placed modules are arranged automatically in the form of tabs. You control the HTML output via the Style beezTabs. The use of the attribute id = "3" is mandatory. The reason lies in the structure of the used JavaScripts. Imagine, you want to integrate modules at different places into your template. The JavaScript function requires a unique information about where which tabs should be opened and closed. If this information is missing, the script will not work as desired. Please use at this point numbers only for the id.

Adjust Font Size

In the top head of the layout the user is able to change the font size. The technical basis for this function can be found in the JavaScript file templates/your_name/JavaScript/md_stylechanger.js. Within the index.php you include a div container with id="fontsize" .

This area is initially empty and will then be filled dynamically with content using JavaScript. If your visitors should have turned off JavaScript, this function is not available.

Some might be asking, why this function is still necessary, as every browser has a feature to increase font size. Especially for older people this technique is often of particular importance, since most of them have a more or less impaired vision. However, particularly older people often know very little about the functionality of web browsers and look forward to an apparent offer.

beez5: use HTML5

The Beez5 template is hardly different from beez_20, apart from some design aspects. The features offered are largely identical.

The only difference: beez5 allows the use of HTML5. If you take a look at the template parameters of beez5, you see that you can choose between HTML5 and XHTML code output. This is based on the HTML5 template overrides, which you find in the HTML folder of your template.

HTML5 provides a variety of new possibilities and will bring a number of changes and easements in the future, but it is still not yet an approved standard (March 2011). Many of the options offered are currently not reliably applicable, but others can already be used without difficulties.

A very important part, which already works, are the new structuring elements. HTML4 and XHTML had low semantic weight. This has improved significantly with HTML5.

We have now really practical elements to structure the page.

With the elements

• header
• footer
• aside
• nav

you can structure a wonderful page.
Elements such as

• section
• article
• hgroup

help you to assign more importance to the actual content.

The HTML5 code in Beez5 uses only the elements that are reliable right now. Only the Internet Explorer Version 8 has some problems, as always.

In the top of the page a script is inserted, which integrates the unknown elements in the existing document structure.

<!--[if lt IE 9]>
<script type="text/JavaScript" src="<?php echo $this->baseurl ?>/ templates/beez5/JavaScript/html5.js"></script>
<![endif]-->

Basis for the integration of HTML5 in Joomla! are the template overrides and the response to the selected markup language via the template parameter in the index.php. Because the template allows the use of two different markup languages, you have to approach this possibility in the index.php.

Clearly said: The construction of the index.php is quite complicated, because depending on the selected markup language another HTML code is generated.
It starts with defining the type of document.

When you open the index.php of Beez5 templates, you can instantly see what I mean.

<?php if(!$templateparams->get('html5', 0)): ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><?php else: ?> 
<?php echo '<!DOCTYPE html>'; ?> 
<?php endif; ?>

This concept is carried through the whole page and the HTML5 elements can only be issued if HTML5 was also selected in the backend.

If you later want to build your own template in HTML 5, it would be better you remove all the queries and XHTML elements and output directly the HTML 5 code.

IN TRANSLATION PROCESS

The Atomic template is a skeleton for your own template. It consists of:

• /htdocs/templates/atomic
  component.php - the print view template
  error.php - the error page template
  favicon.ico - the website icon (Favicon)
  index.html - a security file displaying a blank page when the directory is entered directly (also has to be configured by the webserver but usually is)
  index.php - the templete main page
  templateDetails.xml - The configuration file containing all information about files, options and positions is necessary to show the template in the template manager and to later create an installable zip package.
  template_preview.png - the template preview image, displayed in template manager
  template_thumbnail.png - the template thumbnail image, displayed in template manager
• /htdocs/templates/atomic/css
  the folder for CSS files
• /htdocs/templates/atomic/html
  the folder for Override files - Atomic provides a few Overrides for modules.
• /htdocs/templates/atomic/images
  the folder for images
• /htdocs/templates/atomic/js
  the folder for Java script files
• /htdocs/templates/atomic/languages
  the folder for language files - Atomic comes with English base language files.

Main template file index.php

The file name of this layout file has to be index.php since Joomla! searches for embedded <jdoc> and PHP commands. All necessary HTML markup is already built-in and commented. You can change the content of the file according to your needs.

To get an idea, let's do a quick walkthrough:

In line 24 you can choose whether you want to use the blueprint CSS framework or not.

In line 50, 55, 61 and more you see that the template provides positions with special names (atomic-search, atomic-topmenu, ...). If you want to use these names you have to assign your modules to these positions. If you want to change the names, you may do that in the templatedetails.xml file.

In line 24 you will see:

echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/template.js

Joomla! knows the values in baseurl as well as the name of your template and you can access them when needed.

In line 46 you will see:

echo $app->getCfg('sitename');

It will tell you the name of your site.

In line 48 you will see:

if($this->countModules('atomic-search')) ...

It counts the amount of modules at the position atomic-search. It is used to adjust your layout to different situations.

In line 50 you will see:

<jdoc:include type="modules" name="atomic-search" style="none" />

This is a <jdoc> command, which only exists as a name space in Joomla!. It is used to insert the HTML output of the given type into the attributes. In this case it means the output of all modules assigned to the template position atomic search. The style attribute is called module chrome and can have these values

• table - The output is displayed in a table.
• horz - The output is displayed horizontally in a cell of a surrounding table.
• xhtml - The output is in in an XHTML-compliant <div> element.
• rounded - The output is in a format in which round corners can be displayed. The class of the element is renamed from moduletable to module.
• none - no formatting
• outline - the display type for the position preview (?tp=1)
• Template specific style - Some templates, like Beez, have their own styles. See chapter The Beez Template.

You will find a complete list of styles in the Joomla! documentation - What is module chrome.

Other <jdoc> types are:

<jdoc:include type="head" />
<jdoc:include type="message" />
<jdoc:include type="component" style="none" />

Every page needs a head, sometimes a message (after saving) and, of course, a component. One component can be displayed per page. The component can make use of the module chrome as well.

The error and the print view template files work exactly like the main template file.

CSS Folder

You will find three files in this folder.

1. The css/template.css file with predefined commented CSS commands. If you don't use the blueprint framework, you have to uncomment a few of them. The lines are specifically marked.
2. The file css/template_ie.css is empty. Here you can add style overrides for Internet Explorer.
3. The file css/template_rtl.css is empty as well. You can add style overrides for right to left languages.

Blueprint framework

Blueprint is a CSS framework designed to reduce development time and ensure cross-browser compatibility.

A few sentences taken from the readme file:

Welcome to Blueprint! This is a CSS framework designed to cut down on your CSS development time. It gives you a solid foundation to build your own CSS commands. Here are some of the out-of-the-box features BP provides:
* An easily customizable grid
* Sensible default typography
* A typographic baseline
* Perfected browser CSS reset
* A stylesheet for printing
* Powerful scripts for customization
* Absolutely no bloat!

You will find demos and tutorials on the project website - http://www.blueprintcss.org/.

IN TRANSLATION PROCESS

You have already created a style, changed the CSS files and the main page of your template and you are still unhappy with the result? :-) Then this is the perfect time to discuss overrides. In Joomla! there are two kinds of overrides: template overrides and alternative layouts.

Template overrides

Let's assume you want to change the layout of the search result page. A component like the search component has a default template layout, which is stored in the file /httpdocs/components/com_search/views/search/tmpl/default.php. This file makes the search page look the way it looks. Add a few words to the file, save it and you will immediately see the result! For example, add

<strong>I have changed something :-) </strong>

in line 13 and see what happens (Figure 1).

Figure 1: Changes in the HTML output

The result is good for your motivation because it was so easy and is displayed in every template. However, it is not good for your reputation because you have just changed core code. With the next Joomla! update, your changes will be gone!

A better alternative would be to use template overrides in each template. Copy the changed file to your template folder to /httpdocs/templates/[template_name]/html/com_search/search/default.php and remove the changes in the original file. The result on the webpage is the same but, behind the scenes, you have overridden the original .../default.php file with your desired content layout - without changing core code - well done!

This system was introduced in the year of 2007 with the release of Joomla! 1.5 and still works very well today.

Alternative layouts

In Joomla! 2.5 the overrides have an enhancement called alternative layouts. I am sure you have already seen the Alternative Layout field in the edit form of articles, modules and categories (Figure 2).

Figure 2: Alternative layout in an article

Why do we need alternative layouts? Imagine, you are an administrator or webmaster and a template comes with three alternative layouts for an article. Sometimes it is a 'normal article', sometimes it should look like a product, and sometimes like a book page. You only have to choose which layout you would like to use. That sounds like a great feature and, of course, it is.

The technique is the same as with template overrides. You have to create a folder with the same name as the component or module and a subfolder for the view. There are two differences:

1. Obviously the file name has to be something other than default.php as this one has already been reserved for template overrides.
2. The alternative layout is, of course, not automatically selected.

Additionally to the alternative layout, menu item types can be added to the layout and the option items of that article can be controlled by defining them in an xml file with the same name as the alternative layout file (Figure 3).

Figure 3: Additional menu item types

The creation of these files are no beginner's topic but I am sure third-party templates will soon make use of these new possibilities (Figure 4).

Figure 4: Additional layouts in an article