joomla!

Joomla! 3 - Crear una plantilla personalizada

La plantilla es la parte más importante y difícil de un sitio web con Joomla. Se compone de creatividad, arte, un montón de código y la conexión entre el contenido de la base de datos y los "sentidos" de los visitantes al sitio web.

Este libro está escrito especilamente para principiantes, en el vamos a crear una plantilla de Joomla 3 desde cero.

Language: 
Spanish (Español)
Published: 
2011-11-01
Publisher: 
cocoate.com, France
Type of product: 
Book
Our work: 
Author

3. Diseño

Thank you for your contribution: 

Flexible Boxes – next-generation CSS designed to create layoutsCuando hablamos de diseño, en el diseño web, nos referimos casi siempre a la disposición de la página. Maquetación es la parte de diseño gráfico que se ocupa de la disposición y tratamiento de estilo de los elementos (contenido) en una página. Un sistema de gestión de contenidos como Joomla puede tener miles de páginas (o más) y es muy importante pensar en la disposición de los elementos de contenido para que se puedan leer en cualquier tipo de pantalla.

Un diseño de la página puede ser fácilmente dibujada con un lápiz sobre un papel o mediante la utilización de un software de diseño.

La parte difícil de este trabajo, es transformar el diseño de la página prevista en HTML/CSS e integrarlo en Joomla.

Joomla ha utilizado diseños basados ​​en tablas HTML durante mucho tiempo. Son fáciles de crear, se trabaja bien con ellas en el 80% de los casos en que se utilizan, pero es incorrecto, semánticamente, utilizar tablas HTML para el diseño de una página. Las tablas HTML sólo deben utilizarse para los datos de representación que pertenecen a un arejilla de forma natural, como en una hoja de cálculo. Un buen ejemplo para la utilización de tablas HTML es una tabla periódica.

Hace unos años hubo una gran discusión sobre el tema "Tabla vs CSS layouts" (Tablas: la próxima evolución en diseño CSS Artículo en inglés).

El diseño en general es difícil porque se trata de ¡diseño!

Usatilizar hojas de estilo en cascada (CSS) es más difícil en comparación con las tablas HTML con CSS porque ofrece muchísimas posibilidades para organizar el contenido. Para obtener una visión general sobre el trabajo con CSS, lea cuidadosamente Learn CSS Layout (Aprender diseño. con CSS).

Section: 
Freetags: 

Conclusion and Comments SPANISH

Thank you for your contribution: 
IN TRANSLATION PROCESS

This book was written between May and July 2012 and compared to other CMS, I was surprised what's already possible in Joomla.

More and more people will use mobile devices, the speed of internet connections will increase, the prices will decrease. Today, the Joomla 2.5 core package is not well equipped for the mobile world, but the world wide community offers interesting solutions and ideas.
From my point of view it's very necessary to implement as soon as possible into Joomla! core:

Section: 
Freetags: 

Mobile Content Editing SPANISH

Thank you for your contribution: 
IN TRANSLATION PROCESS

If you and your users want to create and edit content on your mobile website, there are in general two possibilities.

  • using the mobile web browser
  • using a native app

As long as we only talk about adding and editing text, everything is possible. But it can be a problem to use a WYSIWYG editor because they are often simply don't work on a mobile device. If you want to upload an image from your mobile device it can be a challenge.

Section: 
Freetags: 

Chimoora for Android

Thank you for your contribution: 
IN TRANSLATION PROCESS

chimoora-home-blog-2012-07-11Written by Achim Fischer, Chimoora developer

Chimoora is a Joomla! client app which brings the features of a Joomla! powered website to mobile devices. Different operating systems will be supported. The first one will be Android 4 (Ice Cream Sandwich). BlackBerry 10, Windows 8 and iOS are on the radar as well. Chimoora 1.0 will support Blogs (Joomla! featured articles) and Forums (powered by Discussions). The next version will bring Private Messages (Discussions) and Classified Ads (Marketplace). On the serverside, Chimoora needs a Joomla! API extension which is developed as part of the Chimoora project in parallel. The API extension is a "normal" Joomla! component and is simply installed via the extension manager.

Section: 
Freetags: 

Using the Twitter Bootstrap Framework to build a responsive Joomla! Template from Scratch SPANISH

Thank you for your contribution: 
IN TRANSLATION PROCESS

Second LookIn this chapter we want to look under the hood of the Joomla template system to understand the basics. Creating a template from scratch is no rocket science. When you are building a website you always need to decide whether it is better to create a template on your own or to buy one. Besides of these two options you can also modify an existing template. To be able to make a useful decision you need to understand the process of creating a Joomla template.

Templates in Joomla

Joomla consists of a frontend (the website) and a backend (the administration interface). Both parts have their own templates. They are stored in the folders

  • /templates - Frontend
  • /administrator/templates - Backend

Each template has it's own folder. In Joomla 2.5 you'll find two preinstalled non responsive templates (Beez 2 and 5) and one template framework (Atomic)

  • /templates/atomic
    Atomic a kind of an uncommon template framework
  • /templates/beez_20
    Beez 2 is the Joomla standard template.
  • /templates/beez5
    Beez 5 is the HTML5 version of Beez 2
  • /templates/system
    In this folder Joomla stores all the files that are common for all the templates, e.g. the Offline and the Error page.

The administrator folder looks the same

  • /administrator/templates/bluestork
    Bluestork is the default standard administrator template
  • /administrator/templates/hathor
    Hathor is an optional administrator template. It is accessible and colours are customizable.
  • /administrator/templates/system
    In this folder Joomla stores all the files that are common for all the templates, e.g. the Error page.

How to create a new Template?

You have three options for creating a new template

  1. start from scratch with creating a folder and all the necessary files
  2. install a starter theme and modify it
  3. copy an existing template and modify it

In this chapter we want to try option one. We'll create a responsive frontend template based on the Twitter Bootstrap framework for Joomla 2.5 from scratch. I'll keep it as simple as possibible. The aim of this chapter is to understand Joomla's template structure. It's quite easy to make it more and more pretty and complicate afterwards :)

Section: 
Freetags: 

What exists in Joomla! Core so far?

Thank you for your contribution: 
IN TRANSLATION PROCESS

The bad news is: If you look at the Joomla! 2.5 core package, there is no mobile and no responsive template included.

The good news is: You can easily install solutions based on third party extensions.

When you start looking for responsive templates, you'll soon find out, that most of the available templates are based on template frameworks. Often these frameworks were developed by template clubs or website agencies to reduce the amount of work for a new template.

A few examples:

Section: 
Freetags: 

Responsive Webdesign

Thank you for your contribution: 
IN TRANSLATION PROCESS

Responsive Web design simply means that the layout of your website is changed based on the size of a device viewport.

The early beginnings of the world wide web in 1993 were responsive, even there were not so many different viewports on different devices available.

You don't believe it? Have a look at Figure 1 and try the <h1> <p> and <table> tag by yourself.

Section: 
Freetags: