Your SlideShare is downloading. ×
0
Joomladay Mallorca 2010 Templates Workshop
Joomladay Mallorca 2010 Templates Workshop
Joomladay Mallorca 2010 Templates Workshop
Joomladay Mallorca 2010 Templates Workshop
Joomladay Mallorca 2010 Templates Workshop
Joomladay Mallorca 2010 Templates Workshop
Joomladay Mallorca 2010 Templates Workshop
Joomladay Mallorca 2010 Templates Workshop
Joomladay Mallorca 2010 Templates Workshop
Joomladay Mallorca 2010 Templates Workshop
Joomladay Mallorca 2010 Templates Workshop
Joomladay Mallorca 2010 Templates Workshop
Joomladay Mallorca 2010 Templates Workshop
Joomladay Mallorca 2010 Templates Workshop
Joomladay Mallorca 2010 Templates Workshop
Joomladay Mallorca 2010 Templates Workshop
Joomladay Mallorca 2010 Templates Workshop
Joomladay Mallorca 2010 Templates Workshop
Joomladay Mallorca 2010 Templates Workshop
Joomladay Mallorca 2010 Templates Workshop
Joomladay Mallorca 2010 Templates Workshop
Joomladay Mallorca 2010 Templates Workshop
Joomladay Mallorca 2010 Templates Workshop
Joomladay Mallorca 2010 Templates Workshop
Joomladay Mallorca 2010 Templates Workshop
Joomladay Mallorca 2010 Templates Workshop
Joomladay Mallorca 2010 Templates Workshop
Joomladay Mallorca 2010 Templates Workshop
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Joomladay Mallorca 2010 Templates Workshop

1,583

Published on

Joomla! 1.5 templates workshop in the Joomla!Day Mallorca 2010 by Joomla! Projects

Joomla! 1.5 templates workshop in the Joomla!Day Mallorca 2010 by Joomla! Projects

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,583
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
46
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Desarrollo Templates Joomla! 1.5 – JoomlaDay Mallorca <ul>Autor: Kim Buñuel Baqué twitter: @joomlaprojects Web: www.joomlanetprojects.com [email_address] JoomlaDay Mallorca 9-10 Abril 2010 </ul>
  • 2. Desarrollo templates Joomla! 1.5 - Indice <ul><li>index.php </li><ul><li>Recogiendo información del sistema
  • 3. Directivas JDOC
  • 4. Funciones Joomla!
  • 5. Sesión práctica: desarrollo del xhtml </li></ul><li>template.css </li><ul><li>Clases e identificadores más comunes
  • 6. Sesión práctica: desarrollo de la hoja de estilos </li></ul><li>templateDetails.xml </li><ul><li>Posibles tipos de parámetros
  • 7. params.ini
  • 8. Sesión práctica: desarrollo del archivo xml </li></ul><li>Archivos de lenguaje </li><ul><li>Lenguaje del front-end y back-end </li></ul><li>Personalización </li><ul><li>Estilos personalizados con mod chrome
  • 9. Template override
  • 10. Página de error 404 personalizada </li></ul></ul>
  • 11. Desarrollo templates Joomla! 1.5 – Requisitos <ul><li>Imágenes necesarias
  • 12. http://joomladay.joomlanetprojects.com/templates/jp_mallorca/images.zip
  • 13. Editor de código o de texto
  • 14. Servidor local instalado
  • 15. Instalación Joomla! 1.5.15
  • 16. Opcional: Firefox + Firebug + Webdeveloper toolbar
  • 17. Template Wizard Online Generator puede ayudarte en la repetitiva tarea de crear la estructura del template y el código común en los archivos internos.
  • 18. http://www.joomlanetprojects.com/index.php/es/component/tplwizard/
  • 19. Nociones básicas sobre html y css </li></ul>
  • 20. Desarrollo templates Joomla! 1.5 – Recogiendo información del sistema <ul>Podemos recoger cierta información de nuestro sistema dinámicamente solicitando algunas propiedades del objeto JDocumentHTML <ul><li>$this->language - Obtiene dinamicamente el código del lenguage en uso
  • 21. $this->template - Obtiene dinamicamente el nombre del template en uso
  • 22. $this->baseurl - Obtiene la url base de nuestra instalación Joomla!
  • 23. $this->direction - Obtiene dinamicamente la dirección de escritura del lenguaje usado </li></ul></ul>
  • 24. Desarrollo templates Joomla! 1.5 – Directivas JDOC <ul><li><jdoc:include type=&quot;head&quot; />
  • 25. carga metadatos, librería mootools y título.. Solo puede incluirse una vez en la cabecera del website.
  • 26. <jdoc:include type=&quot;modules&quot; name=&quot;xxx&quot; style=&quot;xxx&quot; />
  • 27. carga los módulos activos en la posición name con el formato style
  • 28. <jdoc:include type=”module” name=”xxx” style=”xxx” />
  • 29. carga un solo módulo en la posicion name con el formato style
  • 30. <jdoc:include type=&quot;component&quot; />
  • 31. carga el componente principal y solo puede llamarse una vez desde el cuerpo del sitio.
  • 32. <jdoc:include type=&quot;message&quot; />
  • 33. Solo puede llamarse una vez desde el cuerpo del sitio y obtiene los mensajes del sistema.
  • 34. Requiere el css: templatessystemcsssystem.css </li></ul><ul><li>Los párametros de las sentencias JDOC solo admiten comillas dobles.
  • 35. Estilos modulares: xhtml, rounded, table, horz, raw, y estilos chrome.
  • 36. Tanto con 'table' como con 'horz' el contenido del módulo será cargado a través de tablas, la diferencia es que el primer parámetro lo hará de forma vertical (a través de una columna) y el segundo lo hará de forma horizontal (a través de una fila). Si utilizamos 'xhtml' el contenido en vez de ser cargado en tablas será insertado en DIVs. El parámetro 'rounded' es similar a 'xhtml' con la diferencia que carga el contenido en varios DIVs anidados. Este último se suele utilizar para realizar bordes redondeados a través de imágenes. Finalmente el parámetro 'raw' cargará el contenido neto, sin contenedores ni título.
  • 37. Existen dos parámetros extra posibles en la instancia de los módulos llamados headerLevel y background, se usan en la técnica llamada mod Chrome que veremos en capítulos posteriores. </li></ul>
  • 38. Desarrollo templates Joomla! 1.5 – Funciones Joomla! <ul><li>countModules(string $condition)
  • 39. Definida en /libraries/joomla/document/html/html.php
  • 40. Devuelve el numero de modulos activos de la posición $position
  • 41. countMenuChildren()
  • 42. Definida en /libraries/joomla/document/html/html.php
  • 43. Devuelve el numero de items de menu hijos </li></ul>
  • 44. Desarrollo templates Joomla! 1.5 – Funciones Joomla! II <ul><li>Determinar si un elemento se cargará en la página de inicio
  • 45. <?php $menu = &JSite::getMenu(); ?>
  • 46. <?php if ($menu->getActive() == $menu->getDefault()) { ?>
  • 47. Determinar un componente o vista del componente concretos
  • 48. <?php if(JRequest:.getVar('option') == ”com_content”) { ?>
  • 49. Cargar el titulo del sitio
  • 50. <?php echo $mainframe->getCfg('sitename'); ?>
  • 51. Cargar una fecha formateada
  • 52. <?php JHTML::Date($this->date_field, ”A%, d%. B% Y%); ?> </li></ul>
  • 53. Desarrollo templates Joomla! 1.5 – maquetación xhtml <ul><li>Antes de empezar a desarrollar nuestro template debemos pensar sobre algunos conceptos.
  • 54. Existen dos tipos de layout posibles:
  • 55. templates estáticos construidos con medidas exactas y los templates dinámicos construidos con medidas porcentuales consiguiendo así la adaptación a la resolución de pantalla del usuario final.
  • 56. Quizás la mejor opción es una combinación de ambos tipos de layouts, una cabecera (header) y un pie (footer) dinamicos y un cuerpo principal de aproximadamente 960 píxeles de ancho centrado.
  • 57. Según los sondeos realizados en encuestas la resolución de monitor más extendida es 1024 x 768 píxeles. </li></ul>
  • 58. Desarrollo templates Joomla! 1.5 – index.php sesión práctica <ul><li>Practica
  • 59. Referencia
  • 60. http://docs.joomla.org/Tutorial:Creating_a_basic_Joomla!_template#Creating_a_basic_index.php_file
  • 61. Buenas practicas:
  • 62. Comentarios en el código html
  • 63. Clases e identificadores sin conflictos </li></ul>
  • 64. Desarrollo templates Joomla! 1.5 – template.css – Clases Joomla! I <ul><li>.article_separator {} Separador vertical entre artículos
  • 65. .article_column {} Celdas que forman las diversas columnas de noticias
  • 66. .author {} Nombre del autor de un artículo
  • 67. .blog {} Cuerpo de la sección blog
  • 68. .blog_more {} Grupo de texto
  • 69. .button {} Botones de formulario
  • 70. .buttonheading {} Grupo de iconos pdf, print, send, edit
  • 71. .componentheading {} Título de la página
  • 72. .contentheading {} Títulos de las noticias
  • 73. .contentpaneopen {} Todo el conjunto de contenido
  • 74. .createdate {} Fecha de los artículos de contenido </li></ul>
  • 75. Desarrollo templates Joomla! 1.5 – template.css – Clases Joomla! II <ul><li>.inputbox {} Campos de introducción de datos en formularios
  • 76. .modifydate {} Fecha de modificación de un artículo
  • 77. .module {} Conjunto de módulos en un template
  • 78. .moduletable {} Conjunto interior de los módulos
  • 79. .pagenav_next {} Enlace ”siguiente” si activada la paginación de artículos
  • 80. .pagenav_prev {} Enlace ”anterior” si activada la paginación de artículos
  • 81. .pagenavbar {} Grupo de elementos de paginación de artículos
  • 82. .readon {} Enlace ”leer más...”
  • 83. .sectiontableentry {} Grupos de columnas de tablas de contenidos
  • 84. .sectiontablefooter {} Pie de tablas de contenidos
  • 85. .sectiontableheader {} Cabecera de una tabla de contenidos, ej. Weblinks, archivo noticias, etc...
  • 86. .small {} Texto de ”Escrito por … ” en un artículo </li></ul>
  • 87. Desarrollo templates Joomla! 1.5 – template.css sesión práctica <ul><li>Practica </li></ul>
  • 88. Desarrollo de templates Joomla! 1.5 - templateDetails.xml <ul><li>El archivo xml es una de las partes más importantes de nuestro template, se encarga de la comunicación con el sistema y le proporciona toda la información relativa a la plantilla. Numero y nombre de las posiciones disponibles, datos sobre la autoría del template, archivos incluidos en el paquete de instalación, parámetros administrativos, archivos de lenguaje, etc...
  • 89. El archivo xml esta estrechamente ligado al params.ini que se encarga de recoger y memorizar los valores introducidos o por defecto.
  • 90. ¿como recuperamos los valores del xml?
  • 91. Gracias al método:
  • 92. <?php $this->params->get($key) ?> </li></ul>
  • 93. Desarrollo de templates Joomla! 1.5 – Posibles datos via xml I <ul><li>Todos los parametros tienen los siguientes atributos de forma común:
  • 94. name =”nombre del parámetro”
  • 95. type =”tipo de parámetro”
  • 96. label =”nombre que veremos en la administración del parámetro”
  • 97. description =”descripción del parámetro, visible en la ayuda flotante”
  • 98. default =”valor por defecto que tomara el parámetro si no se introduce otro distinto” </li></ul><ul><params> <ul><param name=” ”.... /> </ul></params> </ul>
  • 99. Desarrollo templates Joomla! 1.5 – Posibles datos via xml II <ul><li>Filelist
  • 100. <param name=&quot;font&quot; type=&quot;filelist&quot; default=&quot;Arial&quot; label=&quot;Select a font&quot; description=&quot;Escoge un tipo de fuente para el titulo&quot; directory=&quot;templates/jp_leaf/fonts&quot; filter=&quot;&quot; exclude=&quot;&quot; stripext=&quot;&quot; />
  • 101. Filelist nos permite recuperar los archivos de un directorio concreto. </li><ul><li>directory : es la ruta al directorio que deseamos leer
  • 102. filter : expresión regular para determinar que archivos deseamos filtrar. filter=”.ttf$” mostraría únicamente los archivos truetype pero no otros por ejemplo.
  • 103. exclude : es el caso contrario a filter, de nuevo con una expresión regular podemos definir que archivos no deseamos mostrar.
  • 104. striptex : seteado a 1 nos permite no mostrar la extensión del archivo en la lista de opciones.
  • 105. hide_none : seteado a 1 permite esconder la opción ”Do not use” del listado.
  • 106. hide_default : seteado a 1 nos permite esconder la opción ”Use default” del listado. </li></ul></ul>
  • 107. Desarrollo templates Joomla! 1.5 – Posibles datos via xml III <ul><li>List
  • 108. <param name=&quot;color&quot; type=&quot;list&quot; default=&quot;1&quot; label=&quot;Color&quot; description=&quot;Choose your background color.&quot;> </li><ul><li><option value=&quot;0&quot;>green</option>
  • 109. <option value=&quot;1&quot;>blue</option> </li></ul><li></param>
  • 110. Radio
  • 111. <param name=&quot;cache&quot; type=&quot;radio&quot; default=&quot;0&quot; label=&quot;Enable Cache&quot; description=&quot;Enable/Disable cache system&quot;> </li><ul><li><option value=&quot;0&quot;>No</option>
  • 112. <option value=&quot;1&quot;>Yes</option> </li></ul><li></param>
  • 113. El sistema de listas creará un campo select en la administración de la plantilla donde podremos escoger uno de los posibles valores, en cambio el tipo radio ofrecerá un sistema de radio button. </li></ul>
  • 114. Desarrollo templates Joomla! 1.5 – Posibles datos via xml IV <ul><li>Spacer
  • 115. El tipo spacer crea una linea divisoria entre los diversos parámetros, este parámetro admite cierto estilo a traves de la opción default.
  • 116. <param name=&quot;@spacer&quot; type=&quot;spacer&quot; default=&quot;&lt;div style=&quot;border-top:1px solid #06F;border-bottom:1px solid #06F;font-weight:normal;font-size:12px;color:#333;padding:4px;margin:0;background:#B6E1E4;text-align:center;&quot;&gt;Color Settings&lt;/div&gt;&quot; label=&quot;&quot; description=&quot;&quot; />
  • 117. Text
  • 118. <param name=&quot;twitter&quot; type=&quot;text&quot; size=&quot;50&quot; label=&quot;Twitter&quot; default=&quot;#&quot; description=&quot;Your Twitter url&quot; />
  • 119. El tipo text se convierte en un campo de texto simple donde podemos introducir datos.
  • 120. Textarea
  • 121. <param name=&quot;description_text&quot; type=&quot;textarea&quot; default=&quot;&quot; label=&quot;Description Text&quot; rows=&quot;5&quot; cols=&quot;30&quot; description=&quot;PARAMDESCTEXT&quot;/>
  • 122. El tipo textarea como su nombre indica crea un campo textarea con el numero de columnas y filas definidas en los atributos rows y cols
  • 123. Ademas existe una opción para crear tipos de parámetros personalizados que podemos encontrar en la documentación de joomla.org ( http://docs.joomla.org/Creating_custom_template_parameter_types ) </li></ul>
  • 124. Desarrollo templates Joomla! 1.5 – Posibles datos via xml V <ul><li>Existen muchos otros tipos de parámetros disponibles, estos son algunos de ellos: </li><ul><li>calendar nos permite introducir una fecha en un campo de texto con un calendario pop-up javascript
  • 125. category nos proporciona una lista de categorías de una sección determinada.
  • 126. editors proporciona un selector de editores WYSIWYG disponibles.
  • 127. folderlist proporciona una lista de subdirectorios de un directorio especificado.
  • 128. helpsites proporciona una lista de sitios de ayuda Joomla!.
  • 129. hidden nos proporciona la habilidad de crear un campo hidden no modificable por el usuario desde la administración (puede ser alterado mediante código o editando el params.ini).
  • 130. imagelist proporciona una lista de imágenes situadas en un directorio concreto.
  • 131. languages proporciona una lista de lenguages tanto del back-end como del front-end.
  • 132. menu proporciona una lista de menus activos en nuestro sitio Joomla!.
  • 133. menuitem nos proporciona una lista de items de menu activos en el sitio.
  • 134. password proporciona un campo password que ofuscara los caracteres escritos en el. </li></ul></ul>
  • 135. Desarrollo templates Joomla! 1.5 – Posibles datos via xml VI <ul><ul><li>section nos poporciona una lista de secciones del sitio.
  • 136. sql nos permite crear una lista generada a través de una consulta sql
  • 137. timezones nos mostrará una lista de husos horarios
  • 138. usergroup muestra una lista de grupos de usuarios del sitio </li></ul><li>Veamos un uso de la consulta sql a través del xml.
  • 139. <param name=&quot;users&quot; type=&quot;sql&quot; default=&quot;10&quot; label=&quot;Select one user&quot; query=&quot;SELECT id, username FROM #__users” key_field=”id” value_field=”username” />
  • 140. De esta forma hemos obtenido una lista de usuarios, ahora por poner un ejemplo podriamos hacer que cierto contenido de la estructura solo fuera visible si el usuario visitante coincide con este parámetro.
  • 141. <?php $user =& JFactory::getUser(); ?>
  • 142. <?php if($user->id == $this->params->get('users')) : ?>
  • 143. // contenido....
  • 144. <?php endif; ?> </li></ul>
  • 145. Desarrollo templates Joomla! 1.5 – params.ini <ul><ul><li>El archivo params.ini es el encargado de recoger la información que introducimos en los parámetros administrativos del template, es de suma importancia que este archivo tenga permisos de escritura o de lo contrario no podremos memorizar dichos valores.
  • 146. Un archivo ini es un archivo de configuración en el que se introducen datos con la siguiente sintáxis:
  • 147. showComponent=1
  • 148. showTwitter=1
  • 149. twitter=joomlaprojects
  • 150. Si se desean incluir comentarios se usara punto y coma (;) antes de la cadena de texto como en el php.ini </li></ul></ul>
  • 151. Desarrollo templates Joomla! 1.5 – templateDetails.xml sesión práctica <ul><li>Practica
  • 152. Referencia
  • 153. http://docs.joomla.org/Tutorial:Template_parameters
  • 154. http://docs.joomla.org/Tutorial:Creating_a_basic_Joomla!_template#Creating_a_basic_templateDetails.xml_file </li></ul>
  • 155. Desarrollo templates Joomla! 1.5 – archivos de lenguaje <ul><ul><li>En cualquier extensión de Joomla! tenemos dos partes claramente diferenciadas, la parte pública (front-end) y la parte privada (back-end), podemos y debemos (por compatibilidad con websites en varios idiomas) crear archivos de lenguaje para cada una de estas vistas.
  • 156. Los archivos de lenguaje son igual que el archivo params.ini, se trata de archivos de configuración en los que asignamos un valor a una cadena de texto.
  • 157. En el backend estos valores se utilizan en las etiquetas y descripciones del templateDetails.xml y son tomados dinámicamente de nuestro archivo de lenguaje administrativo dependiendo del idioma activo en la administración.
  • 158. En el front-end estos valores son tomados dinámicamente dependiendo del idioma activo del sitio, para ello debemos utilizar una sintáxis concreta en nuestro index.php.
  • 159. <?php echo JText::_('STRING'); ?>
  • 160. De esta forma Joomla! buscara el valor asignado a esta cadena en el directorio de archivos de lenguaje igual al código de lenguaje activo en el sitio en ese mismo instante, por ejemplo es-ES para el español.
  • 161. Esta técnica facilitará a usuarios de nuestro template a traducirse sus archivos de lenguaje en su propio idioma sin complicaciones.
  • 162. Nota: es importante que guardemos los cambios realizados en esos archivos con codificación utf-8 no BOM o encontraremos que nuestros acentos y símbolos desaparecerán.
  • 163. JText admite las funciones php printf y sprintf, de esta forma podemos incluir contenido dinámico a través de variables entre nuestra cadena de texto.
  • 164. <?php echo JText::sprintf('Welcome %s', $this->params->get('username')); ?> </li></ul></ul>
  • 165. Desarrollo templates Joomla! 1.5 – Estilos Module Chrome <ul><li>Gracias a la técnica module chrome los diseñadores de templates podemos tomar cierto control sobre la salida html de los módulos.
  • 166. Es habitual ver templates con títulos en dos colores, esto no es otra cosa que la manipulación de la salida html de un módulo donde se ha insertado una etiqueta <span> a la que podamos darle un estilo personalizado.
  • 167. ¿como podemos conseguir interactuar con la salida html del módulo?
  • 168. Vamos a crear un archivo llamado modules.php dentro del directorio html de nuestro template, allí crearemos el código necesario para conseguir este efecto. </li></ul>
  • 169. Desarrollo templates Joomla! 1.5 – Template Override <ul><li>Una de las características que demuestran la potencia de Joomla! es la técnica llamada ”template override”, gracias a esta técnica podemos hacer modificaciones sobre las vistas de las extensiones que hayan sido realizadas con el patrón MVC sin hacer modificaciones en el propio componente o módulo.
  • 170. Joomla! antes de renderizar una vista concreta de un componente o módulo comprobará si está presente en el template, de encontrarla la ejecutará prioritariamente.
  • 171. Gracias a este sistema podemos personalizar enormemente nuestros diseños sin preocuparnos por futuras actualizaciones del sistema, ya que los archivos recogidos en el template jamás serán sobreescritos por una actualización.
  • 172. ¿Como podemos sobreescribir una vista de una extensión?
  • 173. Para empezar deberemos crear un subdirectorio extra en el directorio de nuestro template al que llamaremos html.
  • 174. Dentro crearemos nuevos subdirectorios con el siguiente patrón:
  • 175. html/nombre_extension/nombre_vista/nombre_archivo.php </li></ul>
  • 176. Desarrollo templates Joomla! 1.5 – Error 404 personalizado <ul><li>Una página de error 404 aparece cuando la respuesta en forma de página que solicitamos a un servidor no es encontrada, en Joomla! tenemos un archivo error.php en el directorio templates/system/ que nos ofrece un mensaje que todos hemos visto alguna vez.
  • 177. Para personalizar este archivo hay diversas opciones: </li><ul><li>Modificar el propio archivo – no recomendado
  • 178. A través de un artículo Joomla! - no recomendado
  • 179. Editando el .htaccess
  • 180. Desde nuestro propio template </li></ul><li>La forma más sencilla es copiar el archivo templates/system/error.php a la raiz de nuestro template y desde ahí editarlo a nuestro gusto. </li></ul>
  • 181. Desarrollo templates Joomla! 1.5 – Estilos Module Chrome <ul><li>Practica
  • 182. Referencia
  • 183. http://docs.joomla.org/What_is_module_chrome%3F </li></ul>
  • 184. Desarrollo templates Joomla! 1.5 – Archivos opcionales I <ul><li>Opcionalmente para completar nuestro template crearemos un par de archivos más.
  • 185. El primero llamado favicon.ico nos permitirá mostrar una imágen pequeña en la barra de dirección del navegador y en las pestañas de navegación.
  • 186. Para ello podemos convertir una imagen pequeña de 16x16 al tipo de imagen .ico o bien crear un favicon personalizado con herramientas online.
  • 187. http://www.favicon.cc/
  • 188. http://www.favicongenerator.com/
  • 189. Para terminar obtendremos una captura de nuestro template ya construido, reduciremos su tamaño a más o menos 250 x 210 píxeles renombrandola a template_thumbnail.png . La depositaremos en la raiz de nuestro template y esto servirá para que en el selector de templates de la administración de Joomla! este disponible una captura flotante del template al pasar el ratón por encima del nombre. </li></ul>
  • 190. Desarrollo templates Joomla! 1.5 <ul>Gracias por vuestra paciencia Sitios de interés http://docs.joomla.org/Category:Templates </ul>

×