Instalar Joomla de manera local en Windows

Instalar Joomla resulta muy sencillo, hasta  hace unos dias que no tenia idea de como hacerlo, por eso decidi para no olvidarme de los pasos escribir este pequeño artículo.

Joomla según Wikipedia es un sistema de administración de contenidos dinámicos (CMS o Content Management System) que nos permite gestionar el contenido de un sitio web, maneja de manera separada el contenido y el diseño, así que podemos cambiar el diseño sin necesidad de modificar el contenido, esta hecho en PHP y SQL , usa como servidor Apache y como base de datos MySQL , además es software libre y con licencia GPL.
Este administrador es muy sencillo de usar, pues es posible que personas que no conocen de programación puedan realizar sitios de una manera muy profesional sin saber una sola línea de código. Imaginemos a Joomla de manera analoga a  una solicitud de un usuario, que tiene que llenar  desde  su pc  datos necesarios para algún tipo de documento, el usuario no tiene conocimientos de informática, por lo que eldesarrollador del programa  se encarga de hacer más fácil y amigable su interfaz de forma que no le se lehaga laborioso el escribir toda su información, mientras el usuario no se preocupa de como fue hecho esa solicitud, solo se ocupa  de ir proporcionando sus datos sin saber que hay detras de todo ese proceso.

Joomla  significa “todos juntos”, es un proyecto realizado bajo el núcleo de Mambo y como mejora de este. Una de las ventajas de Joomla es que ofrece comunidades en español sobre su soporte técnico, además su popularidad se destaca por su sencillez, podemos construir desde una sitio web muy simple hasta un sistema de noticias.

Algunos otros CMS que existen son: Vignette, Drupal, Mambo, WordPress, OsCommerce.

Requisitos para instalar Joomla

Los principales requisitos para instalar Joomla son:
- Servidor Web: Apache
- Lenguaje PHP
- Gestor de base de datos MySQL

La forma más fácil y rápida de instalar estos tres elementos sin necesidad de configurar archivos es con algún paquete que los incluya, por ejemplo están Xampp, Wamp, Appserver etceterá.

En este caso yo instale XAMPP, la instalación es de manera local por lo que nos permitirá hacer pruebas desde nuestra pc sin necesidad de contratar hosting.
Continuando con  el proceso de requisitos, descargamos xampp, una vez descargado procedemos a instalarlo, lo cual es muy fácil solo con un par de clics en siguiente y así sucesivamente.

Desde phpmyadmin creamos una base de datos con usuario y contraseña donde se guardará el contenido  de joomla, por ejemplo :

Nombre de mi base de datos: Joomla
Usuario: luna
Contraseña: 1234

Ya instalado Xampp y creada la base de datos, ahora descargamos Joomla en formato zip, buscamos la carpeta htdocs , puede ser que la ruta sea así o dependiendo de donde se instalo Xampp,
C:\xampp\htdocs y creamos una carpeta que se llame JOOMLA o con cualquier otro nombre, también podríamos descomprimir en la ruta anterior sin crear una carpeta, pero para tener mas ordenado esto es mejor crearla, copiamos el zip y descomprimir dentro de C:\xampp\htdocs\JOOMLA
Una vez descomprimidos los archivos de Joomla, abrimos una página del navegador y escribimos http://localhost/JOOMLA, automáticamente se abre el instalador.

Algunas opciones aparecen en rojo, y nos muestra lo que esta activado o desactivado,  podemos ir leyendo y configurar de acuerdo a  lo que nos convenga. Como Xampp ya esta configurado para funcionar bien con Joomla no nos dará tantos problemas a la hora de instalarlo y tampoco en algunos permisos de escritura.

Clic en siguiente, leemos la licencia.

Siguiente y configuramos la información de nuestra base de datos.

Nombre del servidor: localhost, se refiere  a tu misma máquina  donde se ejecutarán las  aplicaciones que realices, el nombre de tu máquina es localhost y puede también traducirse con  el  ip 127.0.0.1, esto solo es una convención de TCP/IP, y se llama IP Local.
Nombre del usuario MySQL: Nombre del usuario que usamos en la base de datos joomla.
Contraseña: Contraseña para accesar a la base de datos joomla.
Nombre de la base de datos: Base de datos que usaremos para joomla, no necesariamente debe llamarse así,pudimos haberle puesto otro nombre diferente.
Prefijo de la tabla MySQL: Prefijo predefinido para tablas de la base de datos joomla.

Si marcamos borrar tablas existentes se borraran tablas que fueron creadas en alguna otra instalación de joomla que no fue instalada con éxito. En copia de seguridad  guarda tablas si ya habia existentes y finalmente  en la casilla instalar ejemplos, es  util si apenas empezamos a aprender este administrador de contenidos.

Clic en siguiente y escribimos el nombre del sitio.

Clic siguiente y llenamos los datos que nos pide.

URL: La ruta donde se ubica Joomla desde el navegador: http://localhost/JOOMLA
Ruta: Es la ruta donde descomprimimos los archivos de Joomla:
C:\xampp\htdocs\JOOMLA
E-mail: Correo del administrador
Contraseña: Por defecto aparece una, pero podemos cambiarla para la administración.

El siguiente paso es:

Llegando a este punto,  vamos al directorio C:\xampp\htdocs\JOOMLA, buscamos la carpeta installation y la eliminamos, debemos recordr el usairo y contraseña para acceder al panel de administración.

Finalmente  si damos clic en  ver Web, obtenemos la siguiente ventana.

Ahora cada vez que decidamos acceder a la administración escribimos la siguiente ruta:
http://localhost/JOOMLA/administrator
Listo!!, Ahora solo queda empezar a gestionar nuestro sitio.

Google Web Toolkit

Me he encontrado con una excelente página en español sobre GWT. Para quienes no saben que es GWT, es un api de google que te permite el desarrollo de aplicaciones web con ajax, pero sin utilizar una sola linea de JavaScript, por el contrario, todo se escribe en Java y al compilar se traduce a código JavaScript, pero eso lo hace el compilador de GWT, por lo cual, nosotros no nos preocuparemos por la compatibilidad entre navegadores, o al menos, eso es lo que se dice! Les dejo la página: http://esgooglewebtoolkit.blogspot.com

Introducción a Ajax

AJAX, es un acrónimo de Asynchronous JavaScript And XML (JavaScript asíncrono y XML), es una técnica de desarrollo web para crear aplicaciones interactivas o RIA (Rich Internet Applications). Estas aplicaciones se ejecutan en el cliente, es decir, en el navegador de los usuarios mientras se mantiene la comunicación asíncrona con el servidor en segundo plano. De esta forma es posible realizar cambios sobre las páginas sin necesidad de recargarlas, lo que significa aumentar la interactividad, velocidad y usabilidad en las aplicaciones.

Esto quiere decir entonces que mientras alguna petición es enviada al servidor, nosotros podemos seguir trabajando. Por ejemplo, si tenemos un formulario con un combo que contiene los países de todo el mundo y seleccionamos “México”, nosotros podemos continuar llenando los demás campos mientras el combo de estados se actualiza con respecto al país que seleccionamos (de ahí lo de “asíncrono”) .

Vamos a realizar un ejemplo introductorio con la tecnología Java, en específico con Servlets (este ejemplo se puede seguir con cualquier lenguaje como PHP, ASP, etc).

(Clic aquí si deseas leer antes un ejemplo sencillo de Servlets:

http://mundobyte.wordpress.com/2008/03/26/introduccion-a-los-servlets/)

El ejemplo consiste en lo siguiente: Tendremos una página con un simple botón, el cual ejecutara a nuestro Servlet al dar clic sobre el. Dicho Servlet, se encargará de leer un saludo desde un fichero de texto ubicado en nuestro disco duro y retornará dicho saludo al cliente (navegador) sin necesidad de recargar la página!

HERRAMIENTAS:

• NetBeans 6.5

• GlassFish V3 (prelude)

DESARROLLO

Primeramente, crearemos un nuevo proyecto web en NetBeans.NOusaremos ningún framework.

Una vez creado el proyecto,vamos a crear un archivo de JavaScript llamado“XHR”(XMLHttpRequest) el cual se encargará de crear al objeto correspondiente para hacer las peticiones asíncronas al servidor, y se creara en función del Navegador en el que nos encontremos! (Esto es así por que hay un navegador patito que siempre rompe con los estándares). Además, este archivo JavaScript también se encargará de recibir la respuesta del cliente y pintarlo en el navegador. En NetBeans, para crear el archivo JavaScript basta con dar clic derecho sobre la carpeta“Web Pages” New– File JavaScript.En dado caso de no ver dicha opción, debemos ir a la opción other y buscar el mencionado archivo.

Ahora, procedemos a copiar el siguiente código!

NO pierda de vista a la línea 44, dichos parámetros serán enviados al servidor y recuperados por el servlet.

La línea 57 permite obtener al div con el id=”contenido” y la línea 58 escribe en dicho div, la respuesta que envió el servidor

ALGUNOS MÉTODOS UTILIZADOS

open

Este método se encarga de configurar la conexión y dejarla lista para enviarla al servidor. Sus parámetros son los siguientes:

Método	Se refiere a la forma en la que será enviada la petición, es decir, GET o POST
URL	Se refiere a la URL que deseamos invocar en el servidor, en nuestro caso, deseamos invocar al Servlet.
Tipo	True o false. Por default es true y se refiere a que la petición será asíncrona, un false la convierte en síncrona.
Usuario	Es opcional y define el nombre de usuario con el que se debe identificar la petición en el server.
Contrasena	La contraseña de usuario.

send

Este es el encargado de enviar una petición al navegador y su único parámetro es una cadena que contiene los datos que deseamos enviar al servidor. Si es más de un parámetro, ya sabemos que van separados por el símbolo de & (p.e. n=uno&n=dos). Como recomendación, hacerlo con el código UNICODE.

Los demás métodos, pueden ser vistos en la siguiente dirección del W3 http://www.w3.org/TR/XMLHttpRequest/ y para los no muy bilingües:

http://www.tufuncion.com/tutorial_basico_ajax

Ahora que ya tenemos nuestro archivo JavaScript, procedemos a crear una página HTML y dentro de la etiqueta HEAD indicaremos la carga de nuestro script ya creado:

<script type=”text/javascript” src=”XHR.js” />

Ahora bien, ya dentro de nuestra etiqueta body, debemos tener un botón que invoque al método JavaScript“enviaPeticion”y que a su vez invocará al Servlet que se encargará de leer el fichero de texto y enviar la respuesta al cliente para que éste la muestre… ¿A donde la mostraría?… en un div. Por lo tanto, dentro del body, debemos tener algo como esto:

button onclick=”enviaPeticion()”>CLICK</button>

<div id=”contenido”> </div>

CREANDO EL SERVLET

El siguiente paso ahora, es crear el Servlet. Para ello, en NetBeans damos click derecho sobre la carpeta de Source Package y seleccionamos la opción de Servlet. Como nombre le ponemos “LeerArchivo”.

Solo resta que dentro del métodoprocessRequestescribamos el siguiente código

Como se observa, obtenemos los parámetros ruta y nombre que enviamos desde el cliente. Posteriormente lo único que hacemos es leer el archivo de texto (ojo! Este archivo ya debe existir en nuestro disco duro con alguna palabra).

Por último escribimos la respuesta para que al ejecutar el ejemplo, obtengamos el siguiente resultado:

Como se puede observar al ejecutar nuestro ejemplo, todo se hace sin recargar la página. Para los principiantes y a modo de que comprendan mejor esto, pueden darle la URL para que puedan accesar a su ejemplo. Si tienen una IP de: 200.134.32.156 entonces deberían pasarle algo como:

http://200.134.32.156:8080/ejemplo/reemplazoDIV.xhtml/

De esta forma, podrán ir cambiando el contenido de su archivo de texto y a su amigo le aparecerá una frase distinta cada vez que pulse sobre el botón.

Puedes ver este ejemplo funcionando aqui: http://windoctor.s155.eatj.com/primero/

Saludos!!

Si este contenido fue de provecho para ti, no olvides dejar algún comentario. Recuerda que el conocimiento es libre, lo único que se pide es el agradecimiento de quien aprovecho el material y las críticas de quien tiene sugerencias de mejora. Lo anterior, alienta a seguir publicando más artículos con los cuales puedas beneficiarte.

Autocompletar texto: Ajax y JavaServer Faces

Tomado de: http://www.netbeans.org/kb/docs/web/ajax-textfield.html

En este tutorial se demuestra el uso del componente TextField con funcionalidad Ajax dotada por el proyecto Dynamic Faces. Dynamic Faces, también es conocido como POJC (Plain Old JavaServer Faces Components), es una extensión de la tecnología JavaServer Faces que permite implementar funcionalidad Ajax facilmente. En particular, debe usar el componente “ Ajax Transaction” incluido dentro del proyecto Dynamic Faces, el cual le permite configurar la funcionalidad Ajax en tiempo de diseño. No es una página convensional que de lugar a un submit.

Especificamente, una petición Ajax es enviada cuando el usuario envia un comentario de texto en un text field. La página también utiliza peticiones Ajax para consultar continuamente al servidor la actualización de los comentarios.

Antes de que pueda utilizar los componentes de la libreria Dynamic Faces en su aplicación, debe descargar e instalar la libreria:

1. En el menú Tools—p lugins

2. Seleccione el tab de “Available Plugins” y en la caja de texto “ search” escriba las primeras letras del nombre del plugin, por ejemplo “Dyna…” (Figura 1)

Figura 1: Instalando Dynamic Faces

Una vez instalado el plugin, ya podemos proceder al diseño de la página.

CREANDO EL PROYECTO

En esta sección crearemos el proyecto Web usando el framework “Visual Web JSF”. La característica de este framework es el “drag and drop” (arrastra y suelta) como medio para el desarrollo web.

1. En el menú principal, seleccione la opción “File > New Project”

2. Seleccione “Java Web” como categoría y “Web Application” como tipo de proyecto. Next

3. En el nombre del proyecto, escribimos “AutocompleteTF” y de clic en Next.

4. Seleccione GlassFish como Servidor y de clic en Next.

5. Seleccione el Framework “Visual Web JSF” tal como se muestra en la siguiente figura.

6. Finalmente dar clic al botón de Finish.

AGREGANDO DYNAMIC FACES

En esta sección, usted agregará la libreria de componentes “Dynamic Faces” a su Entorno de Desarrollo (IDE).

1. En la ventana “Projects”, de un clic derecho sobre el nodo “Component Libraries” y seleccione “Add Component Library”

2. En el cuadro de dialogo, seleccione“Dynamic Faces Components (0.2)”y de clic al botón“Add Component Library”.

Ahora la categoria Dynamic Faces se muestra en la paleta de componentes.

DISEÑO DE LA PÁGINA

En este apartado, usted agregará funcionalidad Ajax a los componentes del woodstock. Construya un diseño como el mostrado en la siguiente figura.

Una vez insertados los componentes, seleccione el TextField y el ListBox, de clic derecho y seleccione la opción “Add Binding Attribute” para poder hacer referencia a dichos controles desde el código.

CONFIGURANDO “AJAX TRANSACTION”

El componente “Ajax Transaction” incluido en el proyecto Dynamic Faces, le permite configurar visualmente la funcionalidad Ajax en tiempo de diseño, mostrando los diferentes componentes con un borde de colores en el Diseñador Visual. Como minimo, debe especificar los componentes cuya entrada será enviada al servidor cuando se dispare el Ajax Transaction así como los componentes que serán re-pintados cuando el cliente reciba la respuesta via Ajax.

Los componentes cuya entrada son enviados al servidor, son mostrados con un borde solido y los componentes que serán re-pintados son mostrados con un borde punteado.

En esta sección, usted configurará dos “Ajax Transaction”, uno para el envio de comentarios y otro más para la votación del servidor. El primer “Ajax Transaction” se disparará en respuesta al usuario que escribio un texto en el componente TextField. Cuando se dispare el primer “Ajax Transaction”, el TextField enviará su entrada al servidor de manera Asíncrona (via Ajax) y el componente ListBox será repintado cuando el cliente reciba la respuesta Ajax del servidor.

1. Arrastre dos componentes “Ajax Transaction” de la categoria Dynamic Faces en paleta de componentes.

2. De clic al icono que se encuentra en la parte superior del Diseñador Visual cuyo ícono es parecido a dos cuadrados de distintos colores que se intersectan. Con esto usted vera en la esquina inferior derecha, algo como lo mostrado en la siguiente figura:

1. Clic derecho sobre el componente TextField y seleccione “Configure Ajax Transaction” .

2. En el cuadro de diálogo marque como Yes al “Send Input” y establezca No en “Re-Render” . Con esto podrá observar lo comentado con anterioridad, los componentes cuya entrada es enviada al servidor, se marcan con un borde sólido.

1. Haga lo mismo para el componente ListBox pero ahora establezca No en el “Send Input” y Yes en “Re-Render”. Ahora observará que la lista estará con un borde punteado.

NOTA: Para ámbos componentes, configurelos con el ajaxTransaction1 (color azul) y no con ajaxTransaction2 (color verde).

Debemos comprender que el ListBox no será el único componente que se repintará! También la caja de texto sera repintara cuándo el ListBox retorne su entrada.

1. Repita los pasos descritos en los puntos 3-5 pero invirtiendo la configuración, es decir;

ajaxTransaction2 (color verde)

Componente	Send Input	Re-Render
TextField	No	Yes
ListBox	Yes	No

(Figura 8).

1. Seleccione el TextField y en la ventana de propiedades, agregue los siguientes parámetros en la propiedad “onKeyUp”

DynaFaces.Tx.fire(“ajaxTransaction1″, “textField1″)

1. Establezca para la propiedad onChange del ListBox lo siguiente:

   DynaFaces.Tx.fire(“ajaxTransaction2″, “listbox1″)

INTERACTUANDO CON BASES DE DATOS

1. Vaya a la venta “Service” y expanda el nodo DataBase. Localice la BD vir y de clic derecho sobre ella y seleccione “Connect”.

1. Expanda el nodo de la BD vir, seleccione la tabla EMPLOYEE y arrastre y suelte sobre la página (Page1) dicha tabla.

2. En la ventana Navigator, expanda el nodo “ SessionBean1”, de clic sobre el employeeRowSet y seleccione la opción “Edit SQL Statament”.

1. En el panel del Editor SQL, reemplace la consulta existente por la siguiente:

SELECT ALL VIR.EMPLOYEE.ID, VIR.EMPLOYEE.FIRSTNAME, VIR.EMPLOYEE.LASTNAME,

VIR.EMPLOYEE.EMAIL FROM VIR.EMPLOYEE WHERE VIR.EMPLOYEE.FIRSTNAME LIKE ?

1. Guarde los cambios y cierre el editor.

2. En la pestaña “Service” arrastre nuevamente la tabla EMPLOYEE sobre la página (Page1).

3. Aparecerá un cuadro de diálogo, seleccione “ Create SessionBean1 employeeRowSet1” tal como lo muestra la siguiente figura.

1. 

2. Repita los pasos del 3-5, pero ahora con la siguiente consulta:

SELECT ALL VIR.EMPLOYEE.ID, VIR.EMPLOYEE.FIRSTNAME, VIR.EMPLOYEE.LASTNAME, VIR.EMPLOYEE.EMAIL FROM VIR.EMPLOYEE WHERE VIR.EMPLOYEE.ID = ?

1. De clic derecho sobre el componente ListBox y seleccione “Bind to Data”

2. Vaya a la pestaña “Bind to Data Provider” y seleccione “employeeDataProvider” desde el combo.

3. Seleccione EMPLOYEE.ID en “Value Field” y EMPLOYEE.FIRSTNAME en “Display field”.

AGREGANDO EL CÓDIGO JAVA

1. De doble clic sobre el TextField y escriba el siguiente código:

if (textField1.getText().toString() != null || textField1.getText().toString().length() > 0) {

listbox1.setVisible(true);

}

String prefix = textField1.getText().toString();

String doctName = prefix.substring(0, 1).toUpperCase() + prefix.substring(1) + ‘%’;

try {

getSessionBean1().getEmployeeRowSet().setObject(1, doctName);

employeeDataProvider.refresh();

} catch (SQLException ex) {

Logger.getLogger(Page1.class.getName()).log(Level.SEVERE, null, ex);

}

1. De doble clic sobre el ListBox y escriba el siguiente código:

if (textField1.getText() == null || textField1.getText().toString().length() == 0) {

listbox1.setVisible(false);

try {

getSessionBean1().getEmployeeRowSet().setObject(1, “”);

} catch (SQLException ex) {

Logger.getLogger(Page1.class.getName()).log(Level.SEVERE, null, ex);

}

}

1. Localice el método “prerender” y coloque el siguiente código:

if (textField1.getText() == null || textField1.getText().toString().length() == 0) {

listbox1.setVisible(false);

try {

getSessionBean1().getEmployeeRowSet().setObject(1, “”);

} catch (SQLException ex) {

Logger.getLogger(Page1.class.getName()).log(Level.SEVERE, null, ex);

}

}

Finalmente, resta ejecutar el proyecto para ver los resultados!

NOTA: Este artículo ha sido sacado de http://www.netbeans.org/kb/docs/web/ajax-textfield.html . Si bien no es estrictamente una traducción , todo esta sacado de dicho artículo.

Saludos!!

Si este contenido fue de provecho para ti, no olvides dejar algún comentario. Recuerda que el conocimiento es libre, lo único que se pide es el agradecimiento de quien aprovecho el material y las críticas de quien tiene sugerencias de mejora. Lo anterior, alienta a seguir publicando más artículos con los cuales puedas beneficiarte.

Editor de Diagramas

EDITOR DE DIAGRAMAS

Aunque me gusta el Pingüino de Linux como OS, varias herramientas se quedan un poco cortas comparadas con las existentes en Windows. En el trabajo, utilizamos herramientas como Enterprice Architect, Power Designer, etc., aunque cuando necesito hacer algún diagrama sencillo trato siempre de utilizar “Día” y/o Kivio, dos herramientas de linux para este tipo de tareas.

Sin embargo, y debo reconocerlo que nunca me han gustado, aparte de ser algo feas, se me hacen incomodas. Recién descubri una aplicación llamada “yEd”, programada totalmente en Java. Es muy vistosa y los diagramas generados son atractivos a la vista (no como los generados por dia y kivio).

Lamentablemente, yEd no es open source. Su página de internet es: http://www.yworks.com