Instalar un componente en Joomla!

2008-10-11T15:29:00.010-05:00

Ingresar a su cuenta de administrador Joomla! luego hacer click en 'Installers' luego en 'Components'; (seguir los mismos pasos para instalar un template, lenguaje, modulo,mambot) luego en 'examinar' buscar el archivo a instalar (el archivo tiene que estar comprimido), luego click en 'Upload File & Install', tambien lo podemos hacer por Ftp, ingresamos por FTP a nuestro hosting, subimos los ficheros descomprimidos del componente a la carpeta administrator/components/com_installer/component/TU_COMPONENTE, esta ruta es la que daremos en la instalación lo mismo para los modulos pero en este caso en la carpeta modules/TU_MODULO, para los templates en la carpeta template/TU_TEMPLATE, para los mambots en la carpeta mambot/TU_MAMBOT, lo mismo para language. Algunos errores comunes con la instalacion.

media/, administrator/components/, components/, images/stories/ no se encuentran
Writeable (editables), tiene que otorgar permisos en "Global Configuration" - "Server".
El archivo .zip a instalar contiene otros archivos .zip, para solucionar este problema descomprima los archivos internos del .zip y coloquelos en un solo archivo .zip.
El servidor donde se alojan sus archivos no esta configurado correctamente (* este error me sucedio con un Hosting gratuito), enviar un ticket de soporte a su proveedor de hosting.

Hosting gratuito con Joomla! Click aqui

Creacion de una plantilla Joomla!

2008-10-04T15:01:00.034-05:00

Registrate y en referer escribe hostwebcenter si quieres saber mas haz

Empezaremos hablando de la estructura básica de una plantilla Joomla! que consta de 5 archivos principales:

“Index.php”, contiene código HTML y las directivas PHP.
Un archivo “template_css.css” que contendrá el estilo en cascada, dentro de una carpeta css.

“Template_thumbnail.png”, pequeña imagen de la plantilla que se previsualiza en el panel de administración.

Una carpeta llamada “images” que incluirá todas las imágenes de la plantilla.
“TemplateDetails.xml”, contiene todos los archivos necesarios para la instalacion de la plantilla.

A

continuación pasaremos a detallar la creación de cada uno de los archivos:

Creación Index.php : Lo primero será determinar el aspecto o diseño que tendría su plantilla y por consiguiente su pagina

Web; luego

deberán crear su Layout mediante el cual trabajaran, una vez creado el Layout procederemos a ingresar la variables y

funciones

dentro de su Layout de la siguiente manera; antes de ello daré una explicaron de las principales variables y funciónes que

usa Joomla!.

Variables:

$mosConfig_live_site: Esta variable contiene la URL del sitio . Por ejemplo para insertar una imagen en su Web seria

de la siguiente manera, <img src="<?php echo $mosConfig_live_site;?>/images/tuimagen.png>"/>que seria lo mismo

$mosConfig_sitename: Contiene el nombre del sitio.

Funciones:

mosShowHead(): Esta función al invocarla muestra la información metatag, el titulo y favicon. Se lo usa entre los

tags <head> y </head>.
mosMainBody():Muestra el cuerpo principal del documento. Se lo usa en

el body del documento.
mosLoadModules (): Carga los módulos en una posición predispuesta y en un estilo determinado.

Para eso posee dos
parámetros (posición , estilo). El primero dirá que módulos cargar (left, right, user1, user2, user3, top, etc). El segundo
parámetro dirá en que forma cargarlos: 1= horizontal (cada modulo se cargan en celdas en una única fila), 0= normal (cada
modulo se cargan en celdas en una única columna), -1= raw (los módulos se cargan en bruto y sin título), -2= XHTML
(muestra a los módulos en divs), -3= extra divs (similar al anterior, pero con más divs). De esta forma si tenemos
mosLoadModules (left, -2) cargará los módulos predispuestos en la posición 'left' y los mostrará en diferentes divs.
Otro ejemplo. Si tenemos mosLoadModules (user2, 1) cargamos los módulos predispuestos en la posición 'user2' y los
mostrará de manera horizontal.

Este Layout contiene 2 archivos “index.html” y “estilo.css”, estos dos archivos nos servirán para poder ensayar sobre

ellos la practica
de este tutorial. Lo único que tendremos que hacer será copiar el contenido del archivo”index.html” y pegarlo en un nuevo

archivo y
guardarlo con el nombre de “index.php”, al cual insertaremos las variables y funciones para que tenga un buen funcionamiento

con
Joomla!. Acontinuacion comentare línea por línea lo que se agregara

INDEX.PHP

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />

/* "mosShowHead();" muestra toda la información del head; metatag, titulo del documento y el
favicon.*/

<?php mosShowHead(); ?>

/* cargo el archivo .css (estilo en cascada del documento) guardado en la carpeta "css"

*/
<link href="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate();?>
/css/template_css.css" rel="stylesheet" type="text/css" />

</head>

<body>



<div id="wrapper">



<span ><div id="header">//parte superior
de la pagina donde puede ir su logo

/* Muestro el nombre del sitio y creamos un vinculo a la web con "$mosConfig_sitename;" */

<h1><a href="<?php echo $mosConfig_live_site; ?>"><?php echo $mosConfig_sitename; ?

></a></h1>

/* "<?php mosLoadModules( 'top', -3 );?>" muestra un cuadro de noticias dentro del

header */

<div id="newstop"><?php mosLoadModules( 'top', -3 );?></div>

</div>

</div>

/* "<?php mosLoadModules ( 'left',-2 ); ?>, <?php mosLoadModules ( 'right',-2 ); ?>" esto
cargara los modulos de la izquierda y derecha respectivamente, mientras que
"<?php mosMainBody(); ?>" cargara el contenido principal,

"<?php mosLoadModules ('user1', -3);?>" cargara los vinculos de las ultimas noticias y

"<?php mosLoadModules ( 'user2',-2 );?>" cargara los vinculos mas populares */



<div id="leftcolumn"><?php mosLoadModules ( 'left',-2 ); ?></div>





<div id="content">

<div id="user"><?php mosLoadModules ('user1', -3);?></div>

<div id="user2"><?php mosLoadModules ( 'user2',-2 );?></div>

<?php mosMainBody(); ?></div>





<div id="rightcolumn"><?php mosLoadModules ( 'right',-2 ); ?></div>





/* bueno solo quedaria editar el archivo "footer.php" que lo encontramos en la carpeta raiz de
Joomla! includes puedes colocar tu copyright, un menu, etc */

<div id="footer"><?php include_once('includes/footer.php'); ?></div>

!-- Fin Footer -- > </div>



</body>

</html>Ahora pasemos a editar el archivo ".css", al cual lo guardaremos en al carpeta "css" con el

nombre de
"tempalte_css.css", bueno para no ser muy extensivo el post lo comentare en el mismo archivo. Como
se sabe de este archivo depende el aspecto que tendra nuestra pagina web

/* CSS Document

version: 1.0

fecha: 20/02/08

Creado por: Erik Japura

E-Mail: angeliron@gmail.com

website: http://www.joomla-peru.blogspot.com

*/

* {

margin: 0; padding: 0; border: 0;

}

img {

padding: 4px 18px 4px 8px;

}

a{

text-decoration:none; color: #235033;

}

li {

list-style:none;

}

li a {

font: 1.1em Georgia, "Times New Roman", Times, Serif; color:#046380;

}

li a:hover {

color: #4A8797;

}

/* Header -------------------------------------------------------------*/

#header h1 {

font: 3.5em/1em "Times New Roman", Times, Serif;letter-spacing: -0.05em; color:#69BFDE;
border-bottom: 1px solid #A7A37E;margin-bottom:30px;

}

body {

font-family: Arial, Helvetica, sans-serif; font-size: 13px;

}

#wrapper {

margin: 0 auto; width: 980px;

}

#header {

color: #333;width: 100%; float: left; padding: 10px; border: 1px solid #ccc; height:
100px; margin: 10px 0px 5px 0px; background: #000;

}

#leftcolumn {

color: #fff; border: 1px solid #ccc; background: #cc3333; margin: 0px 5px 5px 0px; padding:10px;
height: 350px; width: 195px; float: left;

}

#content {

float: left; color: #333; border: 1px solid #000; background: #fff; margin: 0px 5px 5px 0px;
padding: 10px; height: 350px; width: 538px; display: inline;

}

#user { float: left; color: #cc3333; border: 1px solid #000; background: #fff; margin:
0px 5px 5px 0px; padding: 5px;

height: 50px; width: 47%; display: inline;

}

#rightcolumn {

color: #fff; border: 1px solid #ccc; background: #000; margin: 0px 0px 5px 0px; padding: 10px;
height: 350px; width: 195px; float: left;

}

#footer {

width: 980px; clear: both; color: #fff; border: 1px solid #ccc; background: #000; margin:
0px 0px 10px 0px; padding: 10px;

}

#user2 {

FLOAT: left; width: 47%; padding: 5px; background:#FFFFFF; border: 1px solid #000; height: 50px;

}

#newstop {

FLOAT: right; POSITION: relative; width: 60%; padding: 5px; background:#cc3333; color:#FFFFFF;

}

/* Estilos para Joomla!

------------------------------------------------------------------*/

/*Estilos referentes al contenido principal*/

/*.contentheading: Podemos controlar el estilo de los títulos de los artículos. */

.contentheading {

font: 2.5em "Times New Roman", Times, Serif; letter-spacing: -0.05em; color: #96D377;

}

.contentheading a{

color: #79B33A;

}

.contentheading a:hover{

color: #96D377;

}

/*.contentpaneopen: Podemos controlar el contenido mostrado en cada artículo. */

.contentpaneopen{

color: #4F4F4F; padding:0 20px 0 0; text-align:justify;

}

.contentpaneopen li{

padding:0 30px 0 10px; background: url(/images/lista.gif) no-repeat 0 5px; list-style:none;

}

/*.createdate / .modifydate:Controlamos la fecha de creación / modificación del

artículo.*/

.createdate, .modifydate{

font-size: 0.8em; color: #5F5F5F;

}

/*.readon: Controlamos la manera de mostrar el link ' Leer más... '*/

.readon, .readon:hover{

color: #497858; text-decoration:underline;

}

/*.pagenav_next / .pagenav_prev / .back_button: Son las clases que controlan los links '

Siguiente '
, ' Anterior ' y ' Volver '*/

.pagenav_next a, .pagenav_prev a{

text-decoration:none; color:#77C727; font-weight: bold;

}

/*------------Estilos referentes a los módulos---------*/

/*.moduletable: Cada modulo será cargado en un div diferente.

Cada uno de estos divs tendrán
la clase ' moduletable '. */

.moduletable, .moduletable_menu{

margin-bottom:20px;

}

/*.moduletable h3: Es el título de cada módulo.*/

.moduletable h3, .moduletable_menu h3 {

font: 2em/1em "Times New Roman", Times, Serif; letter-spacing: -0.09em; color: #497858;
border-bottom: 1px solid #A7A37E; margin-bottom:10px;

}

.moduletable .search input{

font: 1.1em/1.4em Georgia, "Times New Roman", Times, Serif;

border:1px solid #CCC; color:#666; padding:2px 0 2px 5px;

}

/*.moduletable .mainlevel: Es la clase específica para cada elemento de los módulos del tipo
menú.*/

.moduletable .search input:hover{

background-color:#FFFFF1;

}

/*.moduletable .mainlevel: Es la clase específica para cada elemento de los módulos del tipo
menú.*/

.moduletable .mainlevel{

text-decoration:none; color: #235033;

}

/*.moduletable .latestnews: Es la clase específica del modulo ' Últimas noticias '.

Los títulos son cargados en una lista.

.moduletable .mostread: Es la clase específica del modulo ' Popular '

.Los títulos son cargados en una lista.

.moduletable .search: Es la clase específica del modulo ' Buscador '.*/

Bueno solo quedaría crear el

archivo "templateDetails.xml" este archivo es importante ya que sin el no podríamos instalar nuestro
template o plantilla, lo comentare en el mismo archivo.
<?xml version="1.0" encoding="iso-8859-1"?>

<mosinstall version="1.0" type="template">

<name>Plantilla Joomla! de muestra </name> 

<creationDate>09/2008</creationDate> 

<authorEmail>angeliron@gmail.com</authorEmail> 

<files>> <!-Archivos del template -->

<span ><filename>index.php</filename>

<filename>templateDetails.xml</filename>

<filename>template_thumbnail.png</filename>

<filename>images/tusimagenes.png</filename>

<filename>css/template_css.css</filename>

</files>

</mosinstall>

Así tendría que quedar el archivo "templateDetails.xml"; al final tendríamos que haber creado un archivo index.php,
template_css.css el cual tiene que estar en una carpeta ce nombre "css", un archivo de nombre "templateDetails.xml", un

archivo
de imagen"template_thumbnail.png" el cual es la imagen en miniatura de nuestra plantilla y por ultimo una carpeta "images"

donde
contendrán todas las imágenes de nuestra pagina Web (si se tiene varias imágenes se tendrá que insertar mas

<filename>images/
tusimagenes1.png</filename>,<filename>images/tusimagenes2.png</filename>, ...).

Joomla! tutorial de instalacion

2008-09-04T18:05:00.001-05:00

Joomla! sistema de administración de contenidos CMS

2008-09-04T13:52:00.003-05:00

Joomla! es un sistema de administración de contenidos de código abierto construido con PHP bajo una licencia GPL. Este administrador de contenidos se usa para publicar en Internet e intranets utilizando una base de datos MySQL. En Joomla! se incluyen características como: hacer caché de páginas para mejorar el rendimiento, indexamiento web, feed RSS, versiones imprimibles de páginas, flash con noticias, blogs, foros, polls (encuestas), calendarios, búsqueda en el sitio web, e internacionalización del lenguaje. Su nombre es una pronunciación fonética para anglófonos de la palabra swahili jumla que significa "todos juntos" o "como un todo". Se escogió como una reflexión del compromiso del grupo de desarrolladores y la comunidad del proyecto.
La primera versión de Joomla! (Joomla! 1.0.0) fue publicada el 16 de septiembre de Se trataba de una versión mejorada de Mambo 4.5.2.3 combinada con otras modificaciones de seguridad y anti-bugs. Actualmente los programadores han publicado Joomla! 1.5 estable bajo un código completamente reescrito y construido bajo PHP 5.

el mejor CMS

Instalar un componente en Joomla!

Creacion de una plantilla Joomla!

Joomla! tutorial de instalacion

Joomla! sistema de administración de contenidos CMS