<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Darío Ferrer &#187; Joomla</title>
	<atom:link href="http://www.darioferrer.com/temas/joomla/feed" rel="self" type="application/rss+xml" />
	<link>http://www.darioferrer.com</link>
	<description>Blog</description>
	<lastBuildDate>Mon, 19 Jul 2010 11:17:06 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>¿Joomla Vs. WordPress? (1ª parte)</title>
		<link>http://www.darioferrer.com/wordpress/joomla-vs-wordpress-i-532.html</link>
		<comments>http://www.darioferrer.com/wordpress/joomla-vs-wordpress-i-532.html#comments</comments>
		<pubDate>Fri, 12 Feb 2010 19:26:22 +0000</pubDate>
		<dc:creator>Darío Ferrer</dc:creator>
				<category><![CDATA[Joomla]]></category>
		<category><![CDATA[Portada]]></category>
		<category><![CDATA[Wordpress]]></category>

		<guid isPermaLink="false">http://www.darioferrer.com/?p=532</guid>
		<description><![CDATA[<p><span id="more-532"></span><!--noteaser--><br />
Me gusta WordPress porque con éste hago lo que quiero. Lo moldeo, construyo, destruyo, reconstruyo y aún sigue ahí, riendo y diciéndome <em>&#8220;bah, eso es todo lo que tienes? ¡vamos niñita, pégame con todo!&#8221;</em>. Si no fuese así, sin duda lo hubiese desechado desde el principio.</p>
<p>Mi abuela dice: &#8220;Si las tecnologías se convierten en una jaqueca, pues ríete de ellas, úsalas como esclavas, doblégalas a tu parecer, llévalas al límite. Si aún te responden con eficacia pues qué bien, podrás seguirlas machacando, redescubriendo y mejorando. Y el día que te dejen varado, pues mándalas al demonio o continúa creciendo con o sin ellas porque a fin de cuentas eres un ser libre&#8221;. Es de esta forma como deberías ver tu carrera profesional&#8230; Y es también de dicha forma como deberías leer este artículo.</p>
<h4>&#8220;Soy fanático de&#8230;&#8221;</h4>
<p>Permítete ser fan de The Matrix, Pink Floyd o los Tigres de Aragua, pero no de tecnología alguna (y menos de un CMS). El sujeto fanático -en general- experimenta a cada rato esa divina mezcla cuasiarmónica de entusiasmo, adrenalina, apego frenético y una ignorancia tan ingenua que llama a la ternura. Si acaso eres fanático a capa y espada de Joomla, WordPress o cualquier otra aplicación, mi modesto consejo hacia ti es simple: deja de serlo, no vale la pena. En este momento importa más tu criterio y crecimiento profesional que las 4 paredes de código dentro de las cuales estás empeñado en encerrarte. En lugar de invertir tiempo en encajonarte en un CMS, dedícalo a aprender lo que más te gusta: programar, diseñar/maquetar o planificar proyectos. </p>
<h3>Quién escribe esto</h3>
<p>Antes de entrar en tema, quizás resulte oportuno mencionar un par de datos sobre quien se encuentra martirizando las teclas en este preciso instante. Comenzar diciendo que he implementado Joomla en numerosos proyectos web, además de colaborar en la difusión del conocimiento del software a través de <a href="http://www.maestrosdelweb.com/autores/dario-ferrer/">diversos artículos</a>, así como experimentos varios de mejora de la plataforma tales como <a href="http://forum.joomlaworks.gr/index.php?topic=3664.0">mostrar componentes como módulos</a> o <a href="http://www.maestrosdelweb.com/editorial/implementando-php-en-el-css-de-joomla/">gestionar el CSS de Joomla dinámicamente</a>. Hasta hace un par de años desarrollé alrededor de 22 portales y tiendas electrónicas bajo esta aplicación, pero el grueso de los trabajos en aquél entonces estaban constituidos por desarrolladores que requerían servicios para desarrollar módulos y componentes personalizados. Adicionalmente soy miembro del equipo de soporte de <a href="http://forum.joomlaworks.gr/index.php?action=profile;u=3740">Joomlaworks</a> (uno de los más relevantes desarrolladores de add-ons para Joomla) y moderador general de los <a href="http://www.joomlaspanish.org/foros/showgroups.php?">foros de JoomlaSpanish</a> (partner oficial en español de Joomla.org). En fin, conozco el software.</p>
<p>En cuanto a WordPress, reconozco que todavía no he conquistado el nivel de dominio que llegué a poseer con Joomla, aunque -basándome en lo aprendido hasta el momento- me siento optimista sobre lo que aún está por transcurrir. En el presente aplico WordPress en los proyectos que desarrollo, pues con éste he alcanzado resultados de mejor calidad integral, ejecutados en la mitad del tiempo y, desde luego, con menores costos para el cliente.</p>
<h3>Joomla: estrictamente orientado al usuario común.</h3>
<p>Joomla es un CMS esencialmente orientado a facilitarle la vida al usuario como ente creador de presencia en la web. Esto quiere decir que gracias a Joomla cualquier secretaria de recepción puede poseer, en escasos minutos, un completo sitio web con un montón de elementos preintegrados y el consecuente control integral desde un completo panel de administración. En ese aspecto Joomla es un líder indiscutible, superior a cualquier CMS.</p>
<p>Resulta acertado afirmar que Joomla es una aplicación prefabricada en el puro y crudo sentido de la palabra. A diferencia de WordPress, éste dispone nativamente de múltiples recursos controlables desde el panel administrativo, tales como sistemas de encuestas, banners, formulario de contacto, gestión de feeds RSS y hasta colorizado de sintaxis (basado en <a href="http://qbnz.com/highlighter/">GeShi</a>) si lo necesitas en tu contenido. Igualmente Joomla fue pionero en la implementación de la llamada &#8220;papelera de reciclaje&#8221; en un gestor de contenidos, característica que -en contraste- WordPress recién implementó a partir de la versión 2.9.</p>
<p>Tal como es ampliamente conocido, Joomla es <em>hijo pródigo</em> de Mambo, una aplicación cuya arquitectura fue conceptualizada desde un principio en función del usuario común, aquél que no sabe ni pío de programación y diseño web pero que al mismo tiempo tenía el derecho y necesitaba tener presencia en internet. En aquél entonces, Mambo le otorgó a ese usuario el poder, no sólo de tener su propio sitio, sino un sitio completo, con todos los accesorios y recursos necesarios para gestionar contenido, interactuar con los visitantes y hasta monetizarlo. Dicho esquema se mantuvo y sigue manteniendo con Joomla.</p>
<h3>WordPress: orientado al usuario y al desarrollador web</h3>
<p>En más de una ocasión he mencionado que WordPress se acerca más al concepto de framework que al de un CMS en sí. Visto desde el punto de vista de un programador, esta aplicación constituye un surtido de recursos que sólo pueden ser calificados como soluciones. La arquitectura de WordPress está fundamentada en principios productivos, cuya finalidad no es otra que la más apreciada por un desarrollador: consultar datos y devolverlos sin ningún accesorio imprevisto. WordPress devuelve al desarrollador la capacidad de decidir cómo, cuándo y dónde quiere colocar sus datos. WordPress permite al diseñador controlar la totalidad de la estructura y presentación resultantes.</p>
<p>Ahora bien, si aquella secretaria de recepción instalara WordPress, no llegaría a obtener más que un blog en pocos segundos. Por tal motivo, cuando me tropiezo con algún artículo que afirma que &#8220;WordPress sólo sirve para blogs&#8221;, inevitablemente imagino que detrás del teclado se encuentra alguna secretaria de oficina (o su equivalente en conocimientos sobre este software).</p>
<p>WordPress es un CMS para lo que la creatividad dicte (creatividad: imaginación orientada a lo productivo). No obstante, WordPress necesita de una mano profesional para demostrar todo lo que es capaz de ofrecer. Si pensabas que -por ejemplo- era imposible personalizar una interfaz administrativa de cabo a rabo sin tocar un pelo de los archivos del núcleo, es que aún no conoces WordPress.</p>
<p>¡Ah! también sirve para blogs :)</p>
<h3>Por qué Joomla no puede ofrecer el mismo nivel de personalización que WordPress</h3>
<h4>¿Qué son los archivos del núcleo?</h4>
<p>Son todos aquellos archivos que conforman la aplicación cuando está recién instalada. Me refiero a todos, desde el directorio raiz hasta el último escondrijo. Esos archivos no deben editarse jamás, pues -y aquí viene la primera Regla del buen CMS- uno de los primeros requisitos que debería cumplir un CMS con quien decida emplearlo, consiste en ofrecer los suficientes recursos que permitan al desarrollador proceder a su criterio sin necesidad de modificar los archivos del núcleo.</p>
<p>¿Por qué es inconveniente editar tales archivos? Porque las actualizaciones requieren tener plena disponibilidad sobre éstos para sobrescribir lo que sea necesario. Las actualizaciones son modificaciones que el equipo oficial de desarrollo efectúa al software. Éstas pueden incluir mejoras, soluciones de fallos o parches de seguridad en sus distintos niveles. Es importante que mantengas tu CMS actualizado. El procedimiento para tal fin es cuestión de minutos si mantienes intactos los archivos del núcleo.</p>
<p>De igual manera, si eres un cliente en la búsqueda de quien se encargue de tu proyecto web y, al mismo tiempo, tu proyecto involucra un CMS, debes asegurarte de que el futuro programador no toque esos archivos. Que proceda a criterio siempre y cuando respete esa regla única. Verás que tal manera de proceder te ahorrará múltiples dolores de cabeza a la hora de mantener el sitio al día. Entiende que las actualizaciones son tareas periódicas y debes considerarlas como parte normal del conjunto de procedimientos implicados en la optimización de un sitio web. En virtud de ello debes evitar todo tipo de elementos obstaculizantes para tal fin.</p>
<h4>El problema con Joomla</h4>
<p>Entendido el concepto de los archivos del núcleo de un software -así como la importancia de no modificarlos- nos encontramos con uno de los cuellos de botella más aleccionadores que puedan encontrarse.</p>
<p>Hace pocos años nació (ignoro de dónde pero nació) un planteamiento muy interesante en la llamada comunidad de desarrolladores web, cuya principal propuesta consistía en la opción de utilizar gestores de contenidos prefabricados en los proyectos para ofrecer más calidad a menores costos y tiempos mínimos de ejecución. Dicha tendencia resultó enteramente imprevista, y más imprevista aún para los respectivos equipos de desarrollo de Mambo/Joomla, quienes -como ya mencioné- habían jugado todas sus cartas en función del usuario común (sí, el que no sabe ni pío).</p>
<p>En virtud de tal estrategia y comparándolo con WordPress -que desde el principio sí encauzó su código hacia un entorno de desarrollo- Joomla tenía y sigue teniendo muy poco que ofrecer en materia de: </p>
<ul>
<li>Sitios que requieran escalabilidad de cero a infinito.</li>
<li>Recursos nativos que ofrezcan total libertad de acción al programador para controlar lo que éste quiera controlar, sin que por tal motivo sea necesario modificar, desde luego, el núcleo.</li>
</ul>
<p>Ante las nuevas tendencias de aprovechamiento de la tecnología, muchos individuos (yo incluido) insistían en que Joomla también podía responder exitosamente a requerimientos que involucrasen proyectos web de compleja estructura contextual. Nada más lejos de la realidad.</p>
<p>Si Joomla es el pan listo para servir, WordPress es la harina aún en el empaque. Puede que el pan servido y calientito guste a unos cuantos, pero justo cuando el comensal comienza a exigir algo más que un pan (o un pan de características más adaptadas a sus requerimientos) es cuando termina el encanto de Joomla, mientras WordPress recién comienza a calentar motores.</p>
<p>¿Nos entendimos o no? Joomla es el juguete lujoso con todos los accesorios, WordPress la caja de Lego. Joomla es el edificio, WordPress el montón de ladrillos, cemento y arena. Quien compre un edificio podrá gozar de su comodidad a mediano plazo, pero sólo crecerá a la misma altura de éste. Quien opte por los ladrillos y cuente con un buen profesional para trabajarlos, sencillamente conseguirá lo que quiere. </p>
<p>Si Neo tuviese que escoger entre ambas, Joomla le diría &#8220;My way or the Highway&#8221; mientras paralelamente  WordPress diría &#8220;There is no spoon&#8221;.</p>
<p>No obstante, ser la caja de Lego o el montón de ladrillos no debe implicar que el usuario final (tu cliente) deba estar lidiando diariamente con legos y ladrillos, sino que tú tendrás el camino libre para construirle un sitio justo a su medida y totalmente escalable en el tiempo. Para una mejor comprensión de dicho factor veamos la siguiente lista de casos ilustrativos:</p>
<h4>Personas, situaciones y soluciones</h4>
<p>Si en este momento se efectuara una encuesta acerca de lo que distintos tipos de usuarios buscan en un CMS, probablemente las siguientes figurarían entre las principales respuestas:</p>
<ol>
<li><strong>El usuario común:</strong> &#8220;Quiero un software de fácil instalación y operatividad que además me ahorre, en la mayor medida posible, la jaqueca de meterme con los códigos.  Quiero un panel de administración desde el cual pueda controlar todo el sitio, hasta el mínimo detalle. Quiero disponer de un montón de recursos al instante, todo sencillo, todo fácil. Y no quiero pagar un centavo por ello&#8221;. (Solución: Joomla)</li>
<li><strong>El diseñador web amateur:</strong> &#8220;Quiero un sistema que me proporcione el máximo posible de etiquetas y snippets prestablecidos, a fin de permitirme enfocarme en el diseño/maquetación del sitio, sin necesidad de lidiar con programación&#8221;. (Solución: Joomla/WordPress)</li>
<li><strong>El diseñador web profesional:</strong> &#8220;Quiero lo mismo que el diseñador web amateur, y además necesito controlar el 100% del HTML resultante&#8221;. (Solución: WordPress)</li>
<li><strong>El programador web amateur:</strong> &#8220;No sé lo que quiero y el hecho de no saberlo me parece genial. En este momento estoy encerrado en mi habitación, totalmente enfocado en mi aprendizaje de PHP. No como ni duermo, y uso pañales de adultos para no tener que ir al baño.  En la puerta hay un letrero que dice &#8216;Favor no molestar&#8217; que significa exactamente eso: <strong>favor no molestar</strong>&#8220;. (Solución: una chica que lo salve de la demencia)</li>
<li><strong>El programador web profesional:</strong> &#8220;No quiero nada, yo mismo construyo mi vaina desde cero. Pero si algún día optara por basar mis proyectos en una plataforma de gestión de contenidos, desearía un sistema que bajo ningún concepto entorpezca mi proceso propio de desarrollo&#8221;. (Solución: WordPress)</li>
<li><strong>El cliente:</strong> &#8220;Quiero exactamente lo que pedí. Favor prestar atención a la palabra &#8216;exactamente&#8217;, la cual no significa &#8216;aproximadamente&#8217; ni &#8216;semejante a&#8230;&#8217; sino <strong>exactamente</strong>&#8220;. (Solución: WordPress + una mano profesional)</li>
</ol>
<h4>¿Podría Joomla fexibilizar radicalmente su arquitectura a favor de un entorno de desarrollo?</h4>
<p>Posible pero difícil. En realidad Joomla sí tuvo una oportunidad única para replantear totalmente su arquitectura y no lo hizo. Eso fue en el transcurso del año 2007, cuando su equipo oficial de desarrollo decidió separar la plataforma -de las entonces versiones 1.0.X- de la llamada &#8220;herencia Mambo&#8221;. Ciertamente se efectuaron numerosos cambios que implicaron una reescritura completa del núcleo. Tan profundos fueron dichos cambios, que subir las 1.0.X a la 1.5 no implicaba una actualización sino una migración total de datos, tal como si se tratase de dos aplicaciones distintas.</p>
<p>Al final del día, el nuevo Joomla 1.5 no era extremadamente distinto al 1.0.X. De hecho, aún la plataforma sigue atada al famoso &#8220;legacy&#8221; (la compatibilidad con versiones viejas). Esta medida fue necesaria para no dejar obsoletos la gruesa cantidad de add-ons y plantillas de terceros existentes hasta entonces. Y el precio del &#8220;legacy&#8221; fue, precisamente, seguir atado a la &#8220;herencia Mambo&#8221; hasta el sol de hoy. Creo que es muy difícil que Joomla ejecute una segunda vuelta total de tortilla.</p>
<p>Con WordPress ocurrió un hecho similar (en cuanto al cambio radical de plataforma) pero la estrategia fue exactamente la contraria de Joomla, ya que el Core de WP sí se pasó por el forro las contribuciones de terceros, es decir, se le dio prioridad a la arquitectura (lo realmente permanente y evolucionable), pero pagaron el precio de dejar obsoletos todos los plugins existentes en aquél momento. Sólo funcionaban los que no requerían la base de datos para operar, es decir, una mínima cantidad. Tal cambio se dio en la versión 2.2, cuando se implementó por primera vez nada menos que el sistema de taxonomías.</p>
<p>Sólo imagínense si el core de WordPress hubiese tomado la misma decisión equivocada que el core de Joomla: el software hubiese quedado totalmente estancado y -tal como Joomla- debatiéndose entre callejones sin salida: por un lado la evolución/involución de la aplicación, y por el otro los add-ons (plugins en este supuesto negado) con los cuales había que &#8220;quedar bien&#8221;.</p>
<p>Por cierto, Hoy en día WordPress cuenta con el doble de add-ons que Joomla, los cuales operan bajo una arquitectura más robusta, versátil y escalable que las pre-2.2.</p>
<h3>Conclusión</h3>
<ul>
<li>Si no posees conocimientos de desarrollo web, deseas instalar un completo sitio en un santiamén de forma libre y gratuita, Joomla es tu mejor opción.</li>
<li>Si necesitas desarrollar un sitio que requiera máxima personalización de elementos y funciones (incluyendo interfaces de usuario y administrativas), controlar el 100% del código, y posees los conocimientos suficientes para hacerlo, tu mejor opción es WordPress.</li>
</ul>
<h3>¡Espera el resto de las partes de este artículo!</h3>
<p>Las partes 2, 3 y 4 del presente artículo conformarán precisamente la explicación técnica de todo lo expuesto hasta ahora (no pensabas que te iba a dejar en el aire con este aspecto). Prepárate para analizar códigos, diagramas y demás elementos detallados.</p>
<h4>2ª parte: Tareas altamente esenciales que no se pueden hacer con Joomla (y sí con WordPress) sin tocar los archivos del núcleo</h4>
<ul>
<li>Taxonomías (u organización de secciones). Profundidad, versatilidad y límites. Concepto e importancia para desarrollar estructuras complejas de contenido.</li>
<li>Controlar el 100% de las funciones y comportamiento del sistema (frontend y backend)</li>
<li>Controlar el 100% del HTML y CSS de toda la interfaz (frontend y backend)</li>
</ul>
<h4>3ª Parte. Templating en Joomla y WordPress</h4>
<p>Hasta dónde puede llegar la capacidad de cada una de estas aplicaciones en el desarrollo de plantillas y cuáles son los recursos que las mismas tienen disponibles para tal fin.</p>
<h4>4ª Parte. Desmintiendo mitos trillados.</h4>
<p>¿&#8221;WordPress sólo sirve para hacer blogs&#8221;? ¿&#8221;Joomla es lo ideal para portales de alto tráfico&#8221;? Son algunas fantasías trasnochadas que nos ocuparemos de desmentir una a una con pruebas en mano, pelos y señales. También tomaremos ciertos artículos como referencia. Quien luego de leer la 4ta parte aún desee seguir fantaseando, pues nada, que se trague la pastilla azul y despierte creyendo que sólo tuvo una pesadilla.</p>
]]></description>
		<wfw:commentRss>http://www.darioferrer.com/wordpress/joomla-vs-wordpress-i-532.html/feed</wfw:commentRss>
		<slash:comments>47</slash:comments>
	<enclosure url="http://www.darioferrer.com/archivos/articulos/2010/02/joomla-vs-wordpress-1-50x50.jpg" type="image/jpeg" />	</item>
		<item>
		<title>Dar acceso a grupos de Joomla (o restringírselo) para cualquier componente</title>
		<link>http://www.darioferrer.com/joomla/acceso-a-grupos-joomla-para-cualquier-componente-91.html</link>
		<comments>http://www.darioferrer.com/joomla/acceso-a-grupos-joomla-para-cualquier-componente-91.html#comments</comments>
		<pubDate>Sun, 22 Feb 2009 01:05:18 +0000</pubDate>
		<dc:creator>Darío Ferrer</dc:creator>
				<category><![CDATA[Joomla]]></category>

		<guid isPermaLink="false">http://www.darioferrer.com/?p=91</guid>
		<description><![CDATA[<p><span id="more-91"></span><!--noteaser--></p>
<p class="chiquita">Traducción literal del artículo: <a href="http://forum.joomlaworks.gr/index.php?topic=1119.0">Give Joomla backend managers access to any component! Control who has access!</a> por <a href="http://www.komrade.gr/">Fotis Evangelou</a>.</p>
<p>Uno de los problemas más comunes que enfrentan los desarrolladores cuando finalizan un proyecto basado en Joomla! Es la administración de acceso de usuarios o, para ser más exactos, la falta de control en el acceso de éstos. Hay numerosas soluciones para solventar este aspecto, tales como un componente comercial de Joomla Solutions llamado JBAM (Joomla Backend Access Management &#8211; $125) y el componente gratuito ACLPlus de Byostech. Ambos son hacks a los archivos del core y cada uno tiene sus inconvenientes, lo cual provoca que muchos usuarios/desarrolladores puedan mostrarse escépticos a la hora de usarlos.</p>
<p>No me malinterpreten, pero JACL es dependiente de la versión y JBAM es una forma complicada (y costosa) cuando todo lo que quieres es dar acceso a tus administradores a -por ejemplo- el componente de Encuestas.</p>
<p>Entonces ¿cuáles otras opciones podemos tener? Sólo modifica un poco un archivo por ti mismo y podrás habilitar a cualquier grupo el acceso al componente que quieras.</p>
<p>El archivo es éste: <strong>includes/gacl.class.php</strong></p>
<p>Podemos asignar fácilmente acceso a <strong>determinados componentes</strong> para <strong>determinados grupos</strong>. Supongamos que quieres darle a tu Administrador los privilegios de añadir/eliminar cuentas de usuarios desde el panel de administración, pero no acceso a módulos o mambots. O bien quisieras habilitar a tus Managers para acceder a componentes de terceros tales como ArtBanners, lo cual resulta bastante lógico si trabajas con mucho contenido y deseas distribuir tareas diferentes a distintas personas.</p>
<p>Así que basta con modificar o añadir algunas líneas en el archivo <strong>includes/gacl.class.php</strong> y podremos controlar totalmente a qué partes del sitio pueden acceder los 3 grupos predefinidos del backend (Super administrador, Administrador y Manager).</p>
<p>Les daré un ejemplo de lo que usualmente hago.</p>
<h3>1.- Restringir acceso a Administradores (no Super administradores) a módulos y mambots:</h3>
<p>Aproximadamente en la línea 136, agrega barras de comentario a estas líneas, tal como aparecen a continuación:</p>
<div class="codecolorer-container php mac-classic" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br /></div></td><td><div class="php codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #339933;">/</span> access to modules<br />
&nbsp;<span style="color: #666666; font-style: italic;">//$this-&gt;_mos_add_acl( 'administration', 'install', 'users', 'administrator', 'modules', 'all' );</span><br />
&nbsp;<span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span>_mos_add_acl<span style="color: #009900;">&#40;</span> <span style="color: #0000ff;">'administration'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'install'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'users'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'super administrator'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'modules'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'all'</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp;<br />
&nbsp;<span style="color: #666666; font-style: italic;">//$this-&gt;_mos_add_acl( 'administration', 'edit', 'users', 'administrator', 'modules', 'all' );</span><br />
&nbsp;<span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span>_mos_add_acl<span style="color: #009900;">&#40;</span> <span style="color: #0000ff;">'administration'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'edit'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'users'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'super administrator'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'modules'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'all'</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp;<br />
&nbsp;<span style="color: #666666; font-style: italic;">// access to mambots</span><br />
&nbsp;<span style="color: #666666; font-style: italic;">//$this-&gt;_mos_add_acl( 'administration', 'install', 'users', 'administrator', 'mambots', 'all' );</span><br />
&nbsp;<span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span>_mos_add_acl<span style="color: #009900;">&#40;</span> <span style="color: #0000ff;">'administration'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'install'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'users'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'super administrator'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'mambots'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'all'</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp;<br />
&nbsp;<span style="color: #666666; font-style: italic;">//$this-&gt;_mos_add_acl( 'administration', 'edit', 'users', 'administrator', 'mambots', 'all' );</span><br />
&nbsp;<span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span>_mos_add_acl<span style="color: #009900;">&#40;</span> <span style="color: #0000ff;">'administration'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'edit'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'users'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'super administrator'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'mambots'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'all'</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></div></td></tr></tbody></table></div>
<p>Como puedes ver, se han comentado todas las líneas referentes a &#8220;administrator&#8221;. Así que cada vez que abra una nueva cuenta de usuario y darle privilegios de Administrador, sabré que nunca llegará a ver los menús de módulos y mambots.</p>
<h3>2. Habilitar acceso a los Managers y Administradores a ciertos componentes:</h3>
<p>Aprox. en la línea 152 donde dice:</p>
<div class="codecolorer-container php mac-classic" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br /></div></td><td><div class="php codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #339933;">/</span> uncomment following to allow managers to edit modules<br />
&nbsp;<span style="color: #666666; font-style: italic;">//array( 'administration', 'edit', 'users', 'manager', 'modules', 'all' );</span></div></td></tr></tbody></table></div>
<p>Reemplaza este código&#8230;</p>
<div class="codecolorer-container php mac-classic" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br /></div></td><td><div class="php codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #666666; font-style: italic;">// access to components</span><br />
&nbsp;<span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span>_mos_add_acl<span style="color: #009900;">&#40;</span> <span style="color: #0000ff;">'administration'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'install'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'users'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'administrator'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'components'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'all'</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp;<span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span>_mos_add_acl<span style="color: #009900;">&#40;</span> <span style="color: #0000ff;">'administration'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'install'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'users'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'super administrator'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'components'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'all'</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp;<br />
&nbsp;<span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span>_mos_add_acl<span style="color: #009900;">&#40;</span> <span style="color: #0000ff;">'administration'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'edit'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'users'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'super administrator'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'components'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'all'</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp;<span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span>_mos_add_acl<span style="color: #009900;">&#40;</span> <span style="color: #0000ff;">'administration'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'edit'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'users'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'administrator'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'components'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'all'</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp;<br />
&nbsp;<span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span>_mos_add_acl<span style="color: #009900;">&#40;</span> <span style="color: #0000ff;">'administration'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'edit'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'users'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'manager'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'components'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'com_newsflash'</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp;<span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span>_mos_add_acl<span style="color: #009900;">&#40;</span> <span style="color: #0000ff;">'administration'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'edit'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'users'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'manager'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'components'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'com_frontpage'</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp;<span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span>_mos_add_acl<span style="color: #009900;">&#40;</span> <span style="color: #0000ff;">'administration'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'edit'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'users'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'manager'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'components'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'com_media'</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp;<span style="color: #666666; font-style: italic;">// ** add additional components for a manager as desired, or give access to all</span></div></td></tr></tbody></table></div>
<p>&#8230; con las siguientes líneas:</p>
<div class="codecolorer-container php mac-classic" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20<br /></div></td><td><div class="php codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #666666; font-style: italic;">// Custom Access - Start</span><br />
&nbsp;<span style="color: #666666; font-style: italic;">// added for administrators' access</span><br />
&nbsp;<span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span>_mos_add_acl<span style="color: #009900;">&#40;</span> <span style="color: #0000ff;">'administration'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'install'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'users'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'administrator'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'components'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'all'</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp;<span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span>_mos_add_acl<span style="color: #009900;">&#40;</span> <span style="color: #0000ff;">'administration'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'edit'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'users'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'administrator'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'components'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'com_massmail'</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp;<span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span>_mos_add_acl<span style="color: #009900;">&#40;</span> <span style="color: #0000ff;">'administration'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'manage'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'users'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'administrator'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'components'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'com_massmail'</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp;<span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span>_mos_add_acl<span style="color: #009900;">&#40;</span> <span style="color: #0000ff;">'administration'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'manage'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'users'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'administrator'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'components'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'com_trash'</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp;<span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span>_mos_add_acl<span style="color: #009900;">&#40;</span> <span style="color: #0000ff;">'administration'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'edit'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'users'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'administrator'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'components'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'com_poll'</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp;<span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span>_mos_add_acl<span style="color: #009900;">&#40;</span> <span style="color: #0000ff;">'administration'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'edit'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'users'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'administrator'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'components'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'com_media'</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp;<br />
&nbsp;<span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span>_mos_add_acl<span style="color: #009900;">&#40;</span> <span style="color: #0000ff;">'administration'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'edit'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'users'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'administrator'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'components'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'com_joomfish'</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp;<span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span>_mos_add_acl<span style="color: #009900;">&#40;</span> <span style="color: #0000ff;">'administration'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'edit'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'users'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'administrator'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'components'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'com_yanc'</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp;<span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span>_mos_add_acl<span style="color: #009900;">&#40;</span> <span style="color: #0000ff;">'administration'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'edit'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'users'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'administrator'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'components'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'com_artbanners'</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp;<span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span>_mos_add_acl<span style="color: #009900;">&#40;</span> <span style="color: #0000ff;">'administration'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'edit'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'users'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'administrator'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'components'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'com_virtuemart'</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp;<br />
&nbsp;<span style="color: #666666; font-style: italic;">// added for managers' access</span><br />
&nbsp;<span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span>_mos_add_acl<span style="color: #009900;">&#40;</span> <span style="color: #0000ff;">'administration'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'install'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'users'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'manager'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'components'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'all'</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp;<span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span>_mos_add_acl<span style="color: #009900;">&#40;</span> <span style="color: #0000ff;">'administration'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'edit'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'users'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'manager'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'components'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'com_massmail'</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp;<span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span>_mos_add_acl<span style="color: #009900;">&#40;</span> <span style="color: #0000ff;">'administration'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'manage'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'users'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'manager'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'components'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'com_massmail'</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp;<span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span>_mos_add_acl<span style="color: #009900;">&#40;</span> <span style="color: #0000ff;">'administration'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'manage'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'users'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'manager'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'components'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'com_trash'</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp;<span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span>_mos_add_acl<span style="color: #009900;">&#40;</span> <span style="color: #0000ff;">'administration'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'edit'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'users'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'manager'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'components'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'com_poll'</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></div></td></tr></tbody></table></div>
<p>Con esto hemos permitido el acceso de Administradores a los componentes: Correo masivo, Papelera, Encuestas, JoomFish y ArtBanners, pero NO a YanC o VirtueMart (el acceso al administrador de media es dado como estándar). Esto no sería posible con los controles predeterminados de Joomla! para el control de accesos de usuarios.</p>
<h3>Conclusión</h3>
<p>De esta manera podemos &#8220;distribuir&#8221; fácilmente los privilegios de acceso de 2 grupos de usuarios (Administrador y Manager) a determinados componentes sin necesidad de instalar un componente fabricado por terceros.</p>
<p>Nota que existen algunas restricciones para ciertos grupos de usuarios en Joomla! de forma predeterminada que no pueden ser cambiados por los &#8220;hacks&#8221; mencionados. Por ejemplo, los Managers no pueden manejar la Administración de Usuarios ni pueden accesar a la configuración Global.</p>
<p>Pero en la mayoría de los casos, todo lo que necesitarás es habilitar acceso a tus Managers a los componentes de terceros, y probablemente restringir a los Administradores para que no &#8220;jueguen&#8221; con módulos y mambots.</p>
]]></description>
		<wfw:commentRss>http://www.darioferrer.com/joomla/acceso-a-grupos-joomla-para-cualquier-componente-91.html/feed</wfw:commentRss>
		<slash:comments>11</slash:comments>
	<enclosure url="http://www.darioferrer.com/archivos/articulos/2009/02/dar.acceso-joomla-50x50.jpg" type="image/jpeg" />	</item>
		<item>
		<title>Estilos dinámicos en Joomla</title>
		<link>http://www.darioferrer.com/joomla/estilos-dinamicos-en-joomla-5.html</link>
		<comments>http://www.darioferrer.com/joomla/estilos-dinamicos-en-joomla-5.html#comments</comments>
		<pubDate>Sat, 31 Jan 2009 22:45:15 +0000</pubDate>
		<dc:creator>Darío Ferrer</dc:creator>
				<category><![CDATA[Joomla]]></category>

		<guid isPermaLink="false">http://www.darioferrer.com/?p=5</guid>
		<description><![CDATA[<p>El método que estamos a punto de aprender da un vuelco radical a la forma en que actualmente vemos el diseño de sitios Joomla!. Es posible que otro tipo de plataforma dinámica no requiera de tanta sofisticación en la gestión de estilos. En Joomla! se hace necesario una vía capaz de abreviar los pasos a seguir a la hora de abordar el diseño de una web.<span id="more-5"></span></p>
<p>Publicado en <a href="http://www.maestrosdelweb.com/editorial/implementando-php-en-el-css-de-joomla/">Maestros del Web</a> | Versión en inglés publicada en <a href="http://forum.joomlaworks.gr/index.php?topic=2859">JoomlaWorks</a></p>
<p>CSS es una tecnología web diseñada para controlar la presentación y diseño de los sitios. Su existencia devuelve el propósito original al HTML: gestionar la estructura y flujo del contenido. El CSS también abrió un abanico de posibilidades al diseñador web, al ofrecer novedosos y funcionales recursos aplicables a la maquetación, además de la conocida reducción del conjunto de códigos, lo cual también se resume en ahorro de tiempo, así como mayor facilidad en el control del trabajo.</p>
<p>No obstante, es posible agregar más productividad al CSS implementando lenguaje dinámico. El método no es nuevo; los primeros ejemplos que pudimos observar datan de varios años. En esta oportunidad orientaremos su implementación al sistema Joomla!, una acción que se traduce en múltiples beneficios y ventajas, con las cuales no contábamos antes.</p>
<h3>El problema</h3>
<p>Entre los inconvenientes de llevar al límite la personalización de Joomla! se encuentra el hecho de que a menudo se generan grandes hojas de estilos. Esto se debe, en parte, a la necesidad de diferenciar estilos correspondientes a las diversas zonas del sitio, tales como contenido, weblinks, contactos, galerías, diversos módulos, etc. El problema en sí no radica en el tamaño del CSS, el cual no suele pesar mucho. Por ejemplo, para que la hoja de estilos pese unos 20Kb se requiere más de 1000 líneas de código.</p>
<p>¡Precisamente en esa cantidad kilométrica de líneas está el problema! Quienes trabajamos con Joomla! de manera constante, seguramente ya nos hemos inventado un sistema de procedimientos para no perdernos en esa maraña de códigos. Para contrarrestar esto, algunos diseñadores separamos los archivos CSS según la organización del trabajo, importándolos luego desde una hoja de estilos principal. De esta forma no nos confundimos tanto como si se tuviera todo en un solo documento. Dicha acción soluciona el problema… hasta que llega el momento de dispersar los selectores para evitar la redundancia de propiedades, lo cual constituye un verdadero tropiezo que destroza el orden de los estilos, sobre todo si somos dados a clasificarlos alfabéticamente.</p>
<p>Entonces ¿Cuál es la causa específica de este problema? La respuesta es simple: La calidad estática de la hoja de estilos. Cuando la parte del HTML contiene toda la carga de código, obviamente el CSS debe compensar la desigualdad de condiciones con más información, más datos. Una gestión dinámica de los estilos nivela la ecuación de manera sorprendente. Y los resultados te encantarán.<br />
Los beneficios</p>
<p>El nivel de beneficios que ofrece un CSS dinámico depende directamente de los requerimientos del proyecto a desarrollar. En el caso de webs dinámicas las ventajas son indiscutibles. En esencia podemos resumirlas así:</p>
<ul>
<li>Reducción de la redundancia de código CSS y/o dispersión de selectores: Sobre todo, esto se observa en la maquetación de webs dinámicas, donde se hace necesario asignar estilos a diversas secciones del sitio. Un procedimiento usual para contrarrestar esto consiste en la asignación de varios selectores a un mismo conjunto de estilos, lo cual rompe el orden de su disposición, sobre todo si están clasificados alfabéticamente.
	</li>
<li>Recursos extra para el desarrollador: todas las bondades del PHP están disponibles para ser usadas con creatividad y lograr objetivos que serían imposibles con una hoja de estilos común.</li>
<li>Distribución equitativa de la carga de código dinámico: El hecho de implementar PHP en la hoja de estilos se resume en la simplificación de muchos procesos. Más adelante abordaremos este tema en detalle.</li>
<li>Interpretación limpia del documento: No existen bugs ni sorpresas extrañas en la lectura de un CSS dinámico por parte del navegador.</li>
<li>No rompe con los estándares W3C: Si la &#8220;hoja de estilos&#8221; está bien construida, el validador lo aprobará normalmente.</li>
</ul>
<h3>Los puntos en contra</h3>
<p>Hasta ahora hemos visto un par de pequeños inconvenientes que no afectan el funcionamiento, pero aún así los anotamos:</p>
<p>El CSS se incluye en el HTML interpretado: Una hoja CSS separada puede procesar la mayoría del código PHP. Sin embargo, existe un problema con las funciones específicas de Joomla!, las cuales no se ejecutan si la hoja de estilos es enlazada como un CSS normal. Sólo funciona si agregas el archivo como un include. Esto ocasiona que el contenido se refleje directamente en el HTML, funcionando a la perfección, pero es posible que algunos encuentren esto un tanto antiestético.</p>
<p>La información CSS se carga cada vez que se cambia la página: Unos cuantos gramos de más en el conjunto de Kb de carga. Algunos diseñadores prolijos en la reducción de peso en el conjunto de archivos experimentarán cierta incomodidad con esto.</p>
<p>En cuanto al trabajo del CPU en procesar la información PHP contenida en la hoja de estilos dinámica, no creemos que represente un inconveniente. La carga de instrucciones correspondientes al CSS no serán tan relevantes como para retrasar el tiempo del servidor en procesarla. Recordemos también que la intención no es agregar más código a nuestro proyecto, sino reducirlo de manera sinérgica para lograr mejores resultados gracias a su distribución lógica y equitativa.</p>
<h3>El método actual de trabajo en Joomla!</h3>
<p>A continuación explicaremos parte del método profesional de personalización de un sitio Joomla!. Supongamos que deseamos colocar un logo en nuestra Página de Inicio y otro en el resto de la web.</p>
<p>En el index.php:</p>
<div class="codecolorer-container php mac-classic" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br /></div></td><td><div class="php codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$option</span> <span style="color: #339933;">==</span> <span style="color: #0000ff;">'com_frontpage'</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><br />
&nbsp;<span style="color: #339933;">&lt;</span>div id<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;cabezal&quot;</span><span style="color: #339933;">&gt;&lt;/</span>div<span style="color: #339933;">&gt;</span> <br />
&nbsp;<span style="color: #009900;">&#125;</span> <span style="color: #b1b100;">else</span> <span style="color: #009900;">&#123;</span> <br />
&nbsp;<span style="color: #339933;">&lt;</span>div id<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;cabezal-2&quot;</span><span style="color: #339933;">&gt;&lt;/</span>div<span style="color: #339933;">&gt;</span><br />
<span style="color: #009900;">&#125;</span></div></td></tr></tbody></table></div>
<p>&#8230; Y en la hoja CSS:</p>
<div class="codecolorer-container css mac-classic" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br /></div></td><td><div class="css codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap">div<span style="color: #cc00cc;">#cabezal</span> <span style="color: #00AA00;">&#123;</span><br />
&nbsp;<span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">url</span><span style="color: #00AA00;">&#40;</span>imagen-<span style="color: #cc66cc;">1</span>.jpg<span style="color: #00AA00;">&#41;</span> <span style="color: #993333;">no-repeat</span><span style="color: #00AA00;">;</span><br />
&nbsp;<span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span> <span style="color: #933;">400px</span><span style="color: #00AA00;">;</span><br />
&nbsp;<span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span> <span style="color: #933;">200px</span><span style="color: #00AA00;">;</span><br />
<span style="color: #00AA00;">&#125;</span><br />
div<span style="color: #cc00cc;">#cabezal-2</span> <span style="color: #00AA00;">&#123;</span><br />
&nbsp;<span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">url</span><span style="color: #00AA00;">&#40;</span>imagen-<span style="color: #cc66cc;">2</span>.jpg<span style="color: #00AA00;">&#41;</span> <span style="color: #993333;">no-repeat</span><span style="color: #00AA00;">;</span><br />
&nbsp;<span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span> <span style="color: #933;">400px</span><span style="color: #00AA00;">;</span><br />
&nbsp;<span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span> <span style="color: #933;">200px</span><span style="color: #00AA00;">;</span><br />
<span style="color: #00AA00;">&#125;</span></div></td></tr></tbody></table></div>
<p>Ahora bien, si no se desea la repetición de estilos, ésto es lo que se hace:</p>
<div class="codecolorer-container css mac-classic" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br /></div></td><td><div class="css codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap">div<span style="color: #cc00cc;">#cabezal</span><span style="color: #00AA00;">,</span> div<span style="color: #cc00cc;">#cabezal-2</span> <span style="color: #00AA00;">&#123;</span><br />
&nbsp;<span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span> <span style="color: #933;">400px</span><span style="color: #00AA00;">;</span><br />
&nbsp;<span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span> <span style="color: #933;">200px</span><span style="color: #00AA00;">;</span><br />
<span style="color: #00AA00;">&#125;</span><br />
div<span style="color: #cc00cc;">#cabezal</span> <span style="color: #00AA00;">&#123;</span><br />
&nbsp;<span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">url</span><span style="color: #00AA00;">&#40;</span>imagen-<span style="color: #cc66cc;">1</span>.jpg<span style="color: #00AA00;">&#41;</span> <span style="color: #993333;">no-repeat</span><span style="color: #00AA00;">;</span><br />
<span style="color: #00AA00;">&#125;</span><br />
div<span style="color: #cc00cc;">#cabezal-2</span> <span style="color: #00AA00;">&#123;</span><br />
&nbsp;<span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">url</span><span style="color: #00AA00;">&#40;</span>imagen-<span style="color: #cc66cc;">2</span>.jpg<span style="color: #00AA00;">&#41;</span> <span style="color: #993333;">no-repeat</span><span style="color: #00AA00;">;</span><br />
<span style="color: #00AA00;">&#125;</span></div></td></tr></tbody></table></div>
<p>Lo anterior ilustra un mínimo ejemplo de asignación de clases distintas a una sola sección. Imaginemos el pandemonium de estilos que se produciría cuando además deseamos personalizar módulos, tipografía y toda la presentación entre un área y otra del sitio. Algunos nos &#8220;ahorramos&#8221; un trecho de trabajo cambiando el nombre de la clase de la capa padre que funciona de contenedor y en lugar de escribir -por ejemplo- div#cabezal-2 lo colocamos como #contenedor-2 div#cabezal; de esta manera todo lo que afecte a dicha sección estará regido por #contenedor-2 [clase]. Si existe una capa padre, todas las etiquetas contenidas dentro de ésta llevarán su clase anticipada.</p>
<p>El otro modo de personalización de clases lo ofrece Joomla! de forma nativa, a través de la posibilidad de agregar un sufijo a la clase de determinado módulo, componente, menú y hasta artículo a través del panel de administración. El cambio quedaría archivado en la base de datos. Personalmente no utilizo este recurso porque no es necesario, salvo en casos muy esporádicos.</p>
<p>Bien sea de una u otra forma, el resultado inevitable es 1) la acumulación de estilos y 2) la dificultad en la localización y manejo de los estilos a partir de cierto punto. No es un padecimiento exclusivo de Joomla! sino de toda aplicación web, pero dada su amplitud de funciones y recursos (y por lo tanto de estilos), en Joomla! se hace más notable. Ya mencionamos que el problema es la calidad estática del CSS. La solución siempre estuvo ante nuestros ojos y es la siguiente:</p>
<h3>Construyendo un CSS dinámico orientado a Joomla!</h3>
<p>El método que estamos a punto de aprender da un vuelco radical a la forma en que actualmente vemos el diseño de sitios Joomla!. Es posible que otro tipo de plataforma dinámica no requiera de tanta sofisticación en la gestión de estilos. En Joomla! se hace necesario una vía capaz de abreviar los pasos a seguir a la hora de abordar el diseño de una web. La primera vez que observé este procedimiento fue en la hoja de estilos del pack PhpMyAdmin; luego de recoger mi mandíbula del suelo pude comprobar que efectivamente no es una novedad, sino -para nuestra fortuna- un método bien practicado y documentado en la web a nivel general, aunque lamentablemente escaso en nuestro idioma.</p>
<p>La preparación de los archivos constituye uno de los pasos más importantes. Lo primero que haremos será definir las rutas en el index.php de la plantilla. Esto lo lograremos a través de variables, las cuales no sólo servirán para que nuestro CSS dinámico funcione correctamente, sino para abreviar muchos procedimientos en el diseño. Igualmente le diremos al index dónde están los estilos:</p>
<div class="codecolorer-container php mac-classic" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br /></div></td><td><div class="php codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #000000; font-weight: bold;">&lt;?php</span><span style="color: #000088;">$nombre_plantilla</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">'mi_plantilla'</span><span style="color: #339933;">;</span> <span style="color: #666666; font-style: italic;">// El nombre de nuestra plantilla</span><br />
<span style="color: #000088;">$ruta</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$mosConfig_live_site</span><span style="color: #339933;">.</span><span style="color: #0000ff;">'/templates/'</span><span style="color: #339933;">.</span><span style="color: #000088;">$nombre_plantilla</span><span style="color: #339933;">;</span> <span style="color: #666666; font-style: italic;">// La ubicación de la plantilla$rutacss = $mosConfig_live_site.'/templates/'.$nombre_plantilla.'/css/'; // La ruta de las hojas de estilo CSS</span><br />
<span style="color: #000088;">$rutaimg</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$mosConfig_live_site</span><span style="color: #339933;">.</span><span style="color: #0000ff;">'/templates/'</span><span style="color: #339933;">.</span><span style="color: #000088;">$nombre_plantilla</span><span style="color: #339933;">.</span><span style="color: #0000ff;">'/images/'</span><span style="color: #339933;">;</span> <span style="color: #666666; font-style: italic;">// La ubicación de las imágenes requeridas por la hoja CSS</span><br />
<span style="color: #000088;">$ruta_absoluta</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$mosConfig_absolute_path</span><span style="color: #339933;">.</span><span style="color: #0000ff;">'/templates/'</span><span style="color: #339933;">.</span><span style="color: #000088;">$nombre_plantilla</span><span style="color: #339933;">;</span> <span style="color: #666666; font-style: italic;">// La ruta absoluta de la plantillainclude_once($rutacss .'/css.php'); // Inclusión de la hoja de estilos?&gt;</span></div></td></tr></tbody></table></div>
<p>Como puedes notar, la hoja de estilos está siendo llamada como un archivo PHP común. Repetimos que ciertamente es posible enlazarla como una hoja CSS aparte, pero dicha acción desactiva la funciones más importantes de Joomla! y en dicho caso no valdría la pena implementarla.</p>
<p>En cuanto a la acción de definir las rutas, tiene su buen motivo: Al ser un CSS incluido en el HTML, las rutas de las imágenes ya no apuntarán desde el index de la plantilla, sino desde el index.php del directorio raiz del sitio. Las variables nos ahorran la molestia de escribir esas largas direcciones todo el tiempo.</p>
<p>Ahora nos ocuparemos de crear un archivo llamado css.php (o como desees) en la ubicación que nos resulte más cómoda. En este caso lo colocaremos en el directorio de las hojas de estilo /templates/mi_template/css/css.php. Le introducimos los primeros datos:</p>
<div class="codecolorer-container php mac-classic" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br /></div></td><td><div class="php codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap">&lt;style type=&quot;text/css&quot;&gt;<br />
&nbsp;<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #000088;">$css</span><span style="color: #339933;">=</span><span style="color: #0000ff;">'//Aquí van los estilos'</span><span style="color: #339933;">;</span><span style="color: #000088;">$css</span> <span style="color: #339933;">=</span> <span style="color: #990000;">str_replace</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'url('</span> <span style="color: #339933;">,</span> <span style="color: #0000ff;">'url('</span> <span style="color: #339933;">.</span><span style="color: #000088;">$rutaimg</span> <span style="color: #339933;">,</span> <span style="color: #000088;">$css</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #666666; font-style: italic;">// Ruta de las imágenes$css = str_replace('@import url(' , '@import url('. $rutacss , $css); // Ruta de las hojas CSS importadasecho $css; // Salida del CSS?&gt;&lt;/style&gt;</span></div></td></tr></tbody></table></div>
<p>¿Ya estás comprobando la importancia de definir las rutas? La penúltima línea tiene como objetivo direccionar correctamente la carpeta donde se encuentran las imágenes por medio de una función de reemplazo. Por otra parte, la última línea es la que dará salida a todo lo que coloques en el espacio destinado a los estilos.</p>
<p>Ya nuestro CSS dinámico está lista para recibir datos. Abordemos ahora algunos ejemplos prácticos.</p>
<h3>Ejemplo 1</h3>
<p>Supongamos que deseamos colocar un logo en nuestra Página de Inicio y otro en el resto de la web. (Para ayudar a comprender la sintaxis hemos colocado comentarios a la derecha de cada línea).</p>
<div class="codecolorer-container php mac-classic" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br /></div></td><td><div class="php codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap">&lt;style type=&quot;text/css&quot;&gt;<span style="color: #000000; font-weight: bold;">&lt;?php</span><br />
&nbsp;<span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$option</span> <span style="color: #339933;">==</span> <span style="color: #0000ff;">'com_frontpage'</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> <span style="color: #666666; font-style: italic;">// &quot;Si estamos en la portada&quot; </span><br />
&nbsp;<span style="color: #000088;">$logo</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">'url(logo-portada.jpg) #ffffff no-repeat;'</span><span style="color: #339933;">;</span> <span style="color: #666666; font-style: italic;">// &quot;Éste será el resultado&quot;</span><br />
&nbsp;<span style="color: #009900;">&#125;</span> <span style="color: #b1b100;">else</span> <span style="color: #009900;">&#123;</span> <span style="color: #666666; font-style: italic;">// &quot;de lo contrario...&quot;</span><br />
&nbsp;<span style="color: #000088;">$logo</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">'url(logo-generico.jpg) #ffffff no-repeat;'</span><span style="color: #339933;">;</span> <span style="color: #666666; font-style: italic;">// &quot;... El resultado será éste&quot;</span><br />
&nbsp;<span style="color: #009900;">&#125;</span><span style="color: #000088;">$css</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">'div#cabezal {<br />
&nbsp;background: '</span><span style="color: #339933;">.</span> <span style="color: #000088;">$logo</span> <span style="color: #339933;">.</span><span style="color: #0000ff;">'; // Aplicando la instrucción por medio de la variable<br />
}'</span><span style="color: #339933;">;</span><span style="color: #000088;">$css</span> <span style="color: #339933;">=</span> <span style="color: #990000;">str_replace</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'url('</span> <span style="color: #339933;">,</span> <span style="color: #0000ff;">'url('</span> <span style="color: #339933;">.</span><span style="color: #000088;">$rutaimg</span> <span style="color: #339933;">,</span> <span style="color: #000088;">$css</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>echo <span style="color: #000088;">$css</span><span style="color: #339933;">;</span><span style="color: #000000; font-weight: bold;">?&gt;</span><br />
&lt;/style&gt;</div></td></tr></tbody></table></div>
<p>Seguramente ya comienzas a visualizar el ahorro de tiempo y esfuerzo. Sólo esta acción evitó:</p>
<ul>
<li>Que hiciéramos el trabajo de diferenciar componentes en el index.php, sólo para asignarles clases distintas, y consecuentemente…</li>
<li>Que redundáramos las clases en la hoja CSS, o…</li>
<li>Que asignáramos sufijos de clases distintos a nivel de panel, de forma innecesaria, lo cual provocaría más redundancia o -en el mejor de los casos- la dispersión de selectores al tratar de reducir la repetición.</li>
</ul>
<p>Mientras tanto, el resultado del ejemplo anterior es sencillo de comprobar. Al observar tu hoja de estilos desde el navegador, sólo existirá un div#cabezal, pero con datos acordes a la sección en la cual nos encontremos en ese momento. Sigamos con más ejemplos.</p>
<h3>Ejemplo 2</h3>
<p>Ahora imaginemos que queremos colocar un logo distinto en la sección de Enlaces Web, pero manteniendo lo anterior.</p>
<div class="codecolorer-container php mac-classic" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br /></div></td><td><div class="php codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap">&lt;style type=&quot;text/css&quot;&gt;<span style="color: #000000; font-weight: bold;">&lt;?php</span><br />
<span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$option</span> <span style="color: #339933;">==</span> <span style="color: #0000ff;">'com_frontpage'</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> <span style="color: #666666; font-style: italic;">// &quot;Si estamos en la portada&quot; </span><br />
&nbsp;<span style="color: #000088;">$logo</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">'url(logo-portada.jpg) #ffffff no-repeat;'</span><span style="color: #339933;">;</span> <span style="color: #666666; font-style: italic;">// &quot;Éste será el resultado&quot;</span><br />
&nbsp;<span style="color: #009900;">&#125;</span> <span style="color: #b1b100;">else</span> <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$option</span> <span style="color: #339933;">==</span> <span style="color: #0000ff;">'com_weblinks'</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> <span style="color: #666666; font-style: italic;">// &quot;pero si estamos en la sección de Enlaces...&quot;</span><br />
&nbsp;<span style="color: #000088;">$logo</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">'url(logo-enlaces.jpg) #ffffff no-repeat;'</span><span style="color: #339933;">;</span> <span style="color: #666666; font-style: italic;">// &quot;... el resultado será éste&quot; }else{ // &quot;De lo contrario...&quot; $logo = 'url(logo-generico.jpg) #ffffff no-repeat;'; // &quot;... el resultado será éste&quot;</span><br />
<span style="color: #009900;">&#125;</span><span style="color: #000088;">$css</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">'div#cabezal {<br />
&nbsp;background: '</span> <span style="color: #339933;">.</span><span style="color: #000088;">$logo</span> <span style="color: #339933;">.</span> <span style="color: #0000ff;">'; // Esto queda igual<br />
}'</span><span style="color: #339933;">;</span><span style="color: #000088;">$css</span> <span style="color: #339933;">=</span> <span style="color: #990000;">str_replace</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'url('</span> <span style="color: #339933;">,</span> <span style="color: #0000ff;">'url('</span> <span style="color: #339933;">.</span><span style="color: #000088;">$rutaimg</span> <span style="color: #339933;">,</span> <span style="color: #000088;">$css</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>echo <span style="color: #000088;">$css</span><span style="color: #339933;">;</span><span style="color: #000000; font-weight: bold;">?&gt;</span><br />
&lt;/style&gt;</div></td></tr></tbody></table></div>
<h3>Ejemplo 3</h3>
<p>Veamos ahora otra variante del caso un poquito más compleja. Supongamos que ese mismo logo de los Enlaces Web tiene un tamaño distinto a los otros</p>
<div class="codecolorer-container php mac-classic" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br /></div></td><td><div class="php codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap">&lt;style type=&quot;text/css&quot;&gt;<span style="color: #000000; font-weight: bold;">&lt;?php</span><br />
&nbsp;<span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$option</span> <span style="color: #339933;">==</span> <span style="color: #0000ff;">'com_frontpage'</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> <span style="color: #666666; font-style: italic;">// &quot;Si estamos en la portada&quot; </span><br />
&nbsp;<span style="color: #000088;">$logo</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">'url(logo-portada.jpg) #ffffff no-repeat;'</span><span style="color: #339933;">;</span> <span style="color: #666666; font-style: italic;">// &quot;Éste será el resultado&quot;</span><br />
&nbsp;<span style="color: #009900;">&#125;</span> <span style="color: #b1b100;">else</span> <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$option</span> <span style="color: #339933;">==</span> <span style="color: #0000ff;">'com_weblinks'</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> <span style="color: #666666; font-style: italic;">// &quot;pero si estamos en la sección de Enlaces...&quot;</span><br />
&nbsp;<span style="color: #000088;">$logo</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">'url(logo-enlaces.jpg) #ffffff no-repeat;'</span><span style="color: #339933;">;</span> <span style="color: #666666; font-style: italic;">// ... &quot;el resultado será éste&quot; }else{ // &quot;De lo contrario...&quot; $logo = 'url(logo-generico.jpg) #ffffff no-repeat;'; // ... &quot;el resultado será éste&quot;</span><br />
&nbsp;<span style="color: #009900;">&#125;</span><span style="color: #666666; font-style: italic;">//Aquí comenzamos con la configuración del tamaño if ($option == 'com_weblinks') { // &quot;Si estamos en los Enlaces Web&quot; $logo_ancho = '400px'; // &quot;Éste será el ancho del logo&quot;</span><br />
&nbsp;<span style="color: #000088;">$logo_alto</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">'200px'</span><span style="color: #339933;">;</span> <span style="color: #666666; font-style: italic;">// &quot;y éste el alto&quot; }else{ // &quot;De lo contrario...&quot;</span><br />
&nbsp;<span style="color: #000088;">$logo_ancho</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">'300px'</span><span style="color: #339933;">;</span> <span style="color: #666666; font-style: italic;">// &quot;Éste será el ancho del logo&quot;</span><br />
&nbsp;<span style="color: #000088;">$logo_alto</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">'150px'</span><span style="color: #339933;">;</span> <span style="color: #666666; font-style: italic;">// &quot;y éste el alto&quot; }$css = 'div#cabezal {</span><br />
&nbsp;background<span style="color: #339933;">:</span> <span style="color: #0000ff;">'. $logo .'</span><span style="color: #339933;">;</span> width<span style="color: #339933;">:</span> <span style="color: #0000ff;">'. $logo_ancho .'</span><span style="color: #339933;">;</span> height<span style="color: #339933;">:</span> <span style="color: #0000ff;">'. $logo_alto .'</span><span style="color: #339933;">;</span><br />
<span style="color: #009900;">&#125;</span><span style="color: #0000ff;">';$css = str_replace('</span>url<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">' , '</span>url<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">' .$rutaimg , $css);echo $css;?&gt;</span><br />
&lt;/style&gt;</div></td></tr></tbody></table></div>
<h3>¿Semántica dinámica?</h3>
<p>Existe un factor que desde ahora deberíamos tomar en cuenta e internalizar como principio. En el diseño web moderno hay una regla infalible y muy simple: El HTML se ocupa de todo lo referente a la estructura, y el CSS de todo lo referente a la presentación. Puesto que el CSS también pasó a ser dinámico, esa regla debería seguir vigente: el código PHP que controla la estructura se escribirá en la parte del HTML, y el PHP que controla la presentación se escribirá en la hoja de estilos CSS.</p>
<p>Lo anterior no sólo suena lógico, sino que nos ayudará a organizar mejor nuestro trabajo, tanto en la ubicación/disposición del código como en la resolución de problemas, además de hacer más fácil la búsqueda e identificación de posibles problemas (que van desde una simple capa mal colocada hasta errores de diversos tipos). Construir una web dinámica es un proceso complicado por sí mismo puesto que el sitio no está compuesto por archivos; toda la información, enlaces, secciones, categorías y demás reposa copm texto en una base de datos. Si queremos personalizar al máximo una web en estas condiciones, es necesario encontrarle un uso más sinérgico y organizado al motor que la controla, el PHP.</p>
<p>Sólo imagina las posibilidades de lo que puedes lograr. Para una muestra de lo mencionado veamos el siguiente ejemplo.</p>
<h3>Ejemplo 4</h3>
<p>Aquí vamos a rotar 3 imágenes de un cabezal en orden aleatorio. La rotación se produciría con cada refresco de página, mientras se conserva la misma clase todo el tiempo. Todo esto empleando sólo CSS dinámico:</p>
<div class="codecolorer-container php mac-classic" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br /></div></td><td><div class="php codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap">&lt;style type=&quot;text/css&quot;&gt;<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #000088;">$imagenes</span> <span style="color: #339933;">=</span> <span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;imagen1.jpg&quot;</span><span style="color: #339933;">,</span><span style="color: #0000ff;">&quot;imagen2.jpg&quot;</span><span style="color: #339933;">,</span><span style="color: #0000ff;">&quot;imagen3.jpg&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000088;">$resultado</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$imagenes</span><span style="color: #009900;">&#91;</span><span style="color: #990000;">rand</span><span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">0</span><span style="color: #339933;">,</span> <span style="color: #990000;">count</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$imagenes</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">-</span><span style="color: #cc66cc;">1</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span><span style="color: #000088;">$css</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">'div#cabezal { background: url('</span><span style="color: #339933;">.</span> <span style="color: #000088;">$resultado</span> <span style="color: #339933;">.</span><span style="color: #0000ff;">') no-repeat;}'</span><span style="color: #339933;">;</span><span style="color: #000088;">$css</span> <span style="color: #339933;">=</span> <span style="color: #990000;">str_replace</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'url('</span> <span style="color: #339933;">,</span> <span style="color: #0000ff;">'url('</span> <span style="color: #339933;">.</span><span style="color: #000088;">$rutaimg</span> <span style="color: #339933;">,</span> <span style="color: #000088;">$css</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>echo <span style="color: #000088;">$css</span><span style="color: #339933;">;</span><span style="color: #000000; font-weight: bold;">?&gt;</span><br />
&lt;/style&gt;</div></td></tr></tbody></table></div>
<h3>Ejemplo 5</h3>
<p>Ahora agreguemos más condimento al mismo caso. Supongamos que cuando la Página de Inicio muestre un juego de logos rotatorios, la sección de Contenido mostrará otro, mientras que Enlaces Web tendrá un juego distinto:</p>
<div class="codecolorer-container php mac-classic" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br /></div></td><td><div class="php codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap">&lt;style type=&quot;text/css&quot;&gt;<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$option</span> <span style="color: #339933;">==</span> <span style="color: #0000ff;">'com_frontpage'</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> &nbsp;<span style="color: #000088;">$imagenes</span> <span style="color: #339933;">=</span> <span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;imagen1.jpg&quot;</span><span style="color: #339933;">,</span><span style="color: #0000ff;">&quot;imagen2.jpg&quot;</span><span style="color: #339933;">,</span><span style="color: #0000ff;">&quot;imagen3.jpg&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> &nbsp;<span style="color: #009900;">&#125;</span> <span style="color: #b1b100;">elseif</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$option</span> <span style="color: #339933;">==</span> <span style="color: #0000ff;">'com_content'</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> &nbsp;<span style="color: #000088;">$imagenes</span> <span style="color: #339933;">=</span> <span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;imagen4.jpg&quot;</span><span style="color: #339933;">,</span><span style="color: #0000ff;">&quot;imagen5.jpg&quot;</span><span style="color: #339933;">,</span><span style="color: #0000ff;">&quot;imagen6.jpg&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> &nbsp;<span style="color: #009900;">&#125;</span> <span style="color: #b1b100;">elseif</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$option</span> <span style="color: #339933;">==</span> <span style="color: #0000ff;">'com_weblinks'</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> &nbsp;<span style="color: #000088;">$imagenes</span> <span style="color: #339933;">=</span> <span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;imagen7.jpg&quot;</span><span style="color: #339933;">,</span><span style="color: #0000ff;">&quot;imagen8.jpg&quot;</span><span style="color: #339933;">,</span><span style="color: #0000ff;">&quot;imagen9.jpg&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span> <span style="color: #000088;">$resultado</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$imagenes</span><span style="color: #009900;">&#91;</span><span style="color: #990000;">rand</span><span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">0</span><span style="color: #339933;">,</span> <span style="color: #990000;">count</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$imagenes</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">-</span><span style="color: #cc66cc;">1</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span><span style="color: #000088;">$css</span> <span style="color: #339933;">=</span><span style="color: #0000ff;">'/*Por supuesto, la parte del CSS queda exactamente igual para todos */div#cabezal { background: url('</span><span style="color: #339933;">.</span> <span style="color: #000088;">$resultado</span> <span style="color: #339933;">.</span><span style="color: #0000ff;">') no-repeat;}'</span><span style="color: #339933;">;</span><span style="color: #000088;">$css</span> <span style="color: #339933;">=</span> <span style="color: #990000;">str_replace</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'url('</span> <span style="color: #339933;">,</span> <span style="color: #0000ff;">'url('</span> <span style="color: #339933;">.</span><span style="color: #000088;">$rutaimg</span> <span style="color: #339933;">,</span> <span style="color: #000088;">$css</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>echo <span style="color: #000088;">$css</span><span style="color: #339933;">;</span><span style="color: #000000; font-weight: bold;">?&gt;</span><br />
&lt;/style&gt;</div></td></tr></tbody></table></div>
<p>Es perfectamente posible lograr esto trabajando la parte dinámica en el HTML y agregando unos cuantos estilos más. El procedimiento anterior refleja sólo un estilo en el resultado del CSS, que cambia según la sección donde se encuentre el usuario. Es muy importante asignar las porciones de código en el archivo correspondiente, distribuyendo así los fragmentos de manera lógica.</p>
<p>Anteriormente se mencionó que podía organizarse mejor el trabajo siguiendo el mismo principio semántico que rige al diseño web: Estructura para el HTML y presentación para el CSS. Ciertamente es posible hacer más de lo debido con el CSS dinámico, pero luego de probar algunos escenarios que fuerzan la capacidad y objetivo original del CSS, pude percatarme que es mejor mantener las cosas dentro de dicho principio, pues de lo contrario se causarán más problemas de los que se resolverían.</p>
<p>Por lo tanto es mejor distribuir la carga, porque una de las principales recompensas la constituye el hecho de liberar buena parte de la responsabilidad a la parte del HTML (el index.php de nuestra plantilla). Anteriormente era necesario crear nuevas clases, dejando todo el peso dinámico a dicha sección, mientras el CSS permanecía estático y acumulando líneas eternas para compensar la desigualdad de condiciones.</p>
<h3>Conclusión</h3>
<p>Hasta ahora hemos observado al PHP haciendo un trabajo más productivo que un mosLoadModules o cualquier otra sintaxis propia de una plantilla común. Llevando la gestión de estilos a un carácter dinámico, hemos logrado simplificar de manera relevante varios aspectos que hasta el momento resultaban un dolor de cabeza. La combinación PHP + CSS supone la existencia de un cúmulo de recursos, tan extenso como para considerarlo una gran e inesperada puerta abierta con mucho para aprovechar.</p>
<p>La semántica del código también contribuye -aunque no por sí misma- a aumentar la calidad sinérgica del proyecto. En el campo que tratamos, sinergia consiste en el logro de mejores resultados con el menor empleo posible de recursos. Utilizándolos con habilidad y creatividad, seguramente encontrarás vías más rápidas y simplificadas para alcanzar los mismos objetivos que anteriormente exigían unos cuantos pasos extra.</p>
<p>Como diseñador(a) web es necesario que tengas claro qué nivel de flexibilidad necesitas de tus recursos y prepararte para adquirir nuevos conocimientos, cuya dificultad la determinan las mismas metas que te propongas completar. El método explicado no es ciencia astronáutica o ingeniería nuclear. Lo único que se requiere es nuestra disposición a reconocer que existe un ingrediente más que el puro HTML y CSS, el cual nos ayudará a desarrollar webs más impactantes, con altos niveles de personalización y calidad integral. ¿Verdad que ahora te resultará difícil no querer intentarlo?.</p>
<h4>Documentación</h4>
<ul>
<li><a href="http://www.barelyfitz.com/screencast/html-training/css/colors/">CSS Colors: Take Control Using PHP</a></li>
<li><a href="http://www.php.net/docs.php">Manual de PHP.net</a></li>
<li><a href="http://www.digital-web.com/articles/generating_dynamic_css_with_php/">Generating Dynamic CSS with PHP</a></li>
<li><a href="http://blog.sapphireknight.com/es/wordpress-theme/how-to-create-a-flexible-stylesheet-for-wordpress-theme/">How to create a flexible stylesheet for WordPress theme</a></li>
</ul>
]]></description>
		<wfw:commentRss>http://www.darioferrer.com/joomla/estilos-dinamicos-en-joomla-5.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
	<br />
<b>Warning</b>:  Invalid argument supplied for foreach() in <b>/home/lpi/darioferrer.com/wp-content/plugins/wp-smart-image-ii/wpsi.php</b> on line <b>748</b><br />
	</item>
	</channel>
</rss>
