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

3. Directivas JDOC

4. Funciones Joomla!

7. params.ini

9. Template override

10. Página de error 404 personalizada

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

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

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.

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.

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

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%); ?>

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.

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

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

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

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) ?>

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”

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; />

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.

110. Radio

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.

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 )

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.

136. sql nos permite crear una lista generada a través de una consulta sql

137. timezones nos mostrará una lista de husos horarios

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; ?>

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

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

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')); ?>

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.

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

178. A través de un artículo Joomla! - no recomendado

179. Editando el .htaccess

182. Referencia

183. http://docs.joomla.org/What_is_module_chrome%3F

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.