Publicar videos en Joomla con AllVideos

Vamos a presentaros una forma sencilla, potente y elegante de publicar videos en vuestro sitio web basado en Joomla: AllVideos de JoomlaWorks. Se trata de un plugin gratuito que nos permitirá reproducir videos alojados en nuestro servidor o en la nube (Youtube, Vimeo, etc...) con gran cantidad de formatos y de forma responsive.

Instalación y configuración

Podemos descargarlo desde la página web del fabricante: http://www.joomlaworks.net/extensions/free/allvideos. Lo instalaremos desde el gestor de extensiones de nuestro Joomla (Extensiones > Gestión de Extensiones)

Una vez instalado vamos a configurar el plugin. Desde Extensiones > Plugins buscamos AllVideos y entramos a su configuración:

Desde aqui podemos establecer el directorio por defecto que alojará los videos, tamaño por defecto, apariencia del reproductor...

Uso: subir un video a nuestra web

El primer paso será subir el archivo físico al servidor que tiene alojada nuestra página web. Tenemos dos alternativas en función del tamaño del video:

• FTP: subiremos el video a nuestro servidor, por defecto al directorio images/stories/video.
• Si es menor de 10MB podemos utilizar el gestor de archivos de Joomla disponible en el menú Contenido > Gestor Multimedia

En nuestro caso hemos subido un video en formato flv (flash) llamado demo480.flv.

Una vez subido vamos a crear un artículo de Joomla desde Contenido > Gestor de Artículos > Añadir nuevo artículo:

Señalado en rojo tenemos el contenido del artículo, una cadena con la sintaxis que reconocerá el plugin AllVideos para incluir un reproductor con ese contenido. Llamamos al artículo "Videos" y escribimos el contenido: {flv}demo480|480|240{/flv}

La sintaxis del plugin es la siguiente:

• Sencilla: {formato o proveedor}nombre_archivo{/formato o proveedor}
• Avanzada: {formato o proveedor}nombre_archivo|ancho|alto|autoplay{/formato o proveedor} 

Desglosando la sintaxis podemos observar que el bloque se encierra entre los tags {formato o proveedor} y {/formato o proveedor} donde podemos indicar:

•  Proveedores: YouTube, Vimeo, Dailymotion, Metacafe, MySpace, Flickr Video, Blip.tv, TwitVid, yFrog, SoundCloud.
• Formatos: flv, swf, mov, mp4, wmv, wma, mp3, 3gp, webm, ogv, ogg, divx y más.

 Ejemplos:

• {flv}demo480|480|240{/flv} Código utilizado para reproducir nuestro vídeo de ejemplo demo480.flv con la resolución 480x240.
• {flv}demo480|480|240|1{/flv} Código similar al anterior pero al mostrar el video se reproducirá automáticamente.
• {youtube}he73js82|600|450|1{/youtube} Reproduce el video correspondiente alojado en Youtube

Enlazar el video en nuestra web

 Una vez grabado el artículo vamos a crear un elemento de menú  desde Menú > [Menú elegido] > Crear nuevo elemento de menú y seleccionamos el tipo "Mostrar un solo artículo":

Seleccionamos nuestro artículo "Videos" y ponemos el título al elemento de menú:

Ahora aparecerá nuestro nuevo menú en la web:

 Y al pulsar en él aparece una página con el reproductor de nuestro video embebido:

 Esperemos que os resulte de utilidad, un saludo

Habilitar PostgreSQL con WAMP Server

Continuando con la serie de posts sobre PostgreSQL, vamos a incluir uno para habilitar el soporte de PostgreSQL con WAMP Server. Si tratáis de hacer uso de la función pg_connect() sin activar este soporte aparecerá el siguiente error:

Fatal error: Call to undefined function pg_connect() in ...

El proceso debería ser bastante sencillo, pero la presencia de un bug en la versión 2.X de WAMP Server lo complica un poco (aunque os daremos la solución más adelante).

Partimos del supuesto de un servidor WAMP ya instalado, si no sabéis cómo hacerlo tenéis un tutorial aquí: http://alcasoft.blogspot.com.es/2011/12/instalacion-de-un-servidor-local-wamp.HTML

Una vez instalado, la activación de los módulos de Apache y extensiones de PHP es relativamente sencilla: hacemos clic en el icono de WAMP en la barra de tareas > PHP > Extensiones de PHP y activamos las siguientes:

• php_pdo_pgsql
• php_pgsql

Al reiniciar los servicios de WAMP debería funcionar, pero si tratamos de hacer uso de la función sigue apareciendo el error:

Si verificáis las extensiones habilitadas (con la función phpinfo() dentro de una página PHP), podréis comprobar que pgsql no se encuentra activo pese a haberlo activado en el interfaz gráfico de WAMP.

Esto se debe a un bug en WAMP. PostgreSQL hace uso de la librería libpq.dll encargada de ejecutar consultas SQL en Postgre. Esta librería debería estar en la carpeta bin de la instalación de Apache, pero se encuentra en la carpeta de PHP.

La solución es sencilla: copiar esa librería a la carpeta correcta:

• Origen: C:\wamp\bin\php\php5.3.10
• Destino: C:\wamp\bin\apache\Apache2.2.21\bin

Las rutas obviamente pueden cambiar dependiendo del directorio raíz de vuestra instalación de WAMP y de la versión del mismo, pero espero que os sirvan de ejemplo.

Reiniciamos los servicios de WAMP y comprobamos de nuevo con phpinfo():

 

Ya aparece la extensión activa y podremos hacer uso de las funciones de PHP para PostgreSQL desde nuestro código.

Configurar FTP en Dreamweaver

A petición de uno de nuestros seguidores hemos realizado un sencillo tutorial sobre cómo configurar el acceso FTP en Dreamweaver. A pesar de la existencia de alternativas en software libre para el desarrollo web (Filezilla para la transferencia FTP y Eclipse, NetBeans, Notepad++, SublimeText, etc... para la edición del código), Dreamweaver goza de una gran popularidad debido a su posibilidad de edición en código y en WYSIWYG (o diseño visual) y su integración con el sistema de transferencia de archivos por FTP en el mismo programa.

Como ya hemos adelantado, vamos a explicar paso a paso la configuración del servidor remoto para la transferencia de datos FTP. Las capturas de pantalla pueden variar entre versiones del programa pero básicamente las opciones siguen siendo las mismas.

Requisitos previos

Debemos contar con el programa Adobe Dreamweaver debidamente licenciado y una cuenta FTP en el servidor remoto.

Configuración del FTP

En primer lugar iniciamos Dreamweaver y abrimos la ventana de Archivos (pulsando F8 o el menú Ventana > Archivos):

Sobre esta ventana pulsaremos en Administrar sitios y se abre la siguiente ventana con el listado de los sitios activos:

Pulsamos sobre el botón Nuevo, elegimos la opción Sitio y seleccionamos la pestaña Avanzadas

Aquí seleccionamos la opción FTP en el desplegable de acceso y rellenamos los siguientes datos:

• Servidor FTP: la URL de nuestro servidor ftp (por ejemplo ftp.miservidor.com).
• Directorio del servidor: ruta en la que se encuentra nuestra web (por ejemplo /public_html/nombre_web)
• Usuario y contraseña de nuestra cuenta FTP. Con el botón Prueba podemos comprobar si todos los parámetros introducidos son correctos.
• Utilizar FTP pasivo: en muchos alojamientos web es necesario tener esta casilla activada, consulta con el administrador de tu servidor (o si con la casilla desmarcada no supera la prueba de conexión prueba de nuevo con la casilla marcada).

Si todos los datos son correctos, Dreamweaver nos avisará con el siguiente cuadro de diálogo:

Subir archivos por FTP

Una vez configurado, volvemos a sitios y conectamos a nuestro servidor FTP pulsando el icono conexión:

Si se conecta correctamente el icono cambia a otro en el que los cables están enchufados y el led se ilumina en verde. En este momento podemos transferir archivos (subirlos o descargarlos) con el servidor FTP de varias maneras:

• Seleccionando el archivo o carpeta de la lista y pulsando sobre los iconos de flecha verde descendente (obtener o descargar la versión que hay en el servidor local a nuestro disco duro) o el de la flecha azul ascendente (colocar o subir la versión del archivo de nuestro disco duro al servidor):

• Si abrimos un archivo en el editor (haciendo doble clic sobre él desde la ventana archivo), se habilitan unos iconos equivalentes en el espacio de trabajo:

Al pulsarlos se despliega un menú con las opciones para obtener o colocar el archivo.

• Existe otra opción con atajos de teclado cuando como en el caso anterior tenemos un archivo abierto desde el editor: CTRL + MAYS + U para colocar (upload) y CTRL + MAYS + D para obtener (download).

Como podéis comprobar es un proceso muy sencillo de llevar a cabo y una vez configurado muy cómodo para trabajar. En la otra cara de la moneda está el coste de la licencia de este software.

Joomla: error en Responsive Form Contact

Hace unos días os hablamos de un módulo para crear formularios de contacto en Joomla: Responsive Form Contact

Es posible que en algunos servidores web os aparezca este error al enviar un formulario desde el formulario de contacto creado por el módulo Responsive Form Contact en Joomla:

¡Error SMTP! Los siguientes destinatarios han fallado: tucorreo@dominio.com
Error del servidor SMTP: 5.7.1: Sender address rejected: not owned by user correoadministrador@tudominio.com

Este es un error de seguridad que se produce en algunos servidores de correo como Postfix cuando están configurados para enviar correos sólo desde cuentas de tu dominio. El módulo Responsive Form Contact envía el correo fijando como dirección de envío la introducida en el formulario por el usuario. Cuando llega el correo a Postfix es rechazado por la configuración de seguridad.

¿Cómo lo evitamos?

Si no queremos o no podemos eliminar esa regla de la configuración del servidor podemos modificar el módulo Responsive Form Contact para que no envíe los correos con la dirección del usuario (sino con la que está configurada como dirección de administración de Joomla).

Para ello editaremos el fichero mod_responsive_contact_form.php que se encuentra en la ruta: [raíz de Joomla]/modules/mod_responsive_contact_form/ y comentamos las líneas 144 y 210, en las cuales se establece la dirección de origen del correo (sentencia setSender() del objeto getMailer):

De ese modo Joomla utiliza como dirección de envío la que tenga establecida por defecto y el formulario funcionará correctamente.

Prestashop: ampliar el marco central

Continuando con la serie de tutoriales de Prestashop vamos a incluir unas sencillas indicaciones para poder controlar la maquetación de nuestra página de una forma rápida y sencilla. Controlaremos la visibilidad de las columnas laterales con la posibilidad de ampliar el marco central a su costa.

Para ello es muy sencillo, tendremos que editar varios archivos de la plantilla que utilicemos. En el ejemplo vamos a utilizar la plantilla por defecto (default) de Prestashop.

En primer lugar debemos ocultar la o las columnas laterales que no deseemos mostrar. Para ello tenemos dos archivos dentro de [directorio_raiz_prestashop]/themes/default:

• header.tpl: controla las cabeceras. Aquí podremos evitar que se muestre la columna de la izquierda localizando las siguientes líneas:

• footer.tpl: controla el pie de página. Aquí podemos controlar la visibilidad de la columna de la derecha, con las siguientes líneas:

Si os fijáis en la sintaxis del resto de los archivos, podemos incluir sentencias entre llaves. Por ejemplo, podemos poner una determinada condición para mostrar la columna de la derecha ediando footer.tpl e incluyendo una línea {if condicion} .... {/if}

Al poner un nombre de página que no existe la columna no se mostrará nunca. Podemos decirle que sólo la muestre en el índice (if $page_name==index), que no la muestre con !=... a gusto del consumidor.

Con esto evitamos que se muestre la columna de la derecha, pero el marco central no aprovecha el espacio que ha quedado libre. Para ampliar sus dimensiones iremos al archivo global.css dentro de la carpeta [directorio_raiz_prestashop]/themes/default/css y añadimos al final del archivo el siguiente estilo:

De este modo ampliamos el ancho de la columna central para ocupar el espacio vacío dejado al ocultar la derecha. Podemos hacer lo mismo con la columna de la izquierda y aumentar el ancho a 980px.

Espero que os resulte útil, esperamos vuestros comentarios.

Prestashop: tienda virtual libre y gratuita

¿Necesitas montar una tienda virtual? Hay muchas soluciones disponibles para ello. Vamos a hablaros de Prestashop, un sistema de tienda virtual software libre y gratuito, potente y sencillo de implementar y manejar.

Requisitos previos

Como en la mayoría de CMS necesitaremos un servidor web para mostrar los archivos y una base de datos para la persistencia de los datos. Para implementar Prestashop necesitamos un servidor web que soporte PHP y bases de datos MySQL.


Instalación

Podemos descargar los archivos fuente de la página del desarrollador: http://www.prestashop.com/es/descarga

Una vez descargado crearemos una base de datos en MySQL y un usuario con todos los privilegios sobre ella. Podéis encontrar un tutorial sobre cómo hacerlo en http://alcasoft.blogspot.com.es/2012/08/instalar-joomla-facilmente.html (el tutorial es sobre instalar Joomla, pero usuario y base de datos se crean de igual modo).

Después descomprimid los archivos fuente en un directorio del servidor web y escribid la dirección en vuestro navegador: el proceso de instalación comenzará automáticamente. Para el ejemplo hemos trabajado en un servidor local WAMP (podéis encontrar un tutorial de instalación en http://alcasoft.blogspot.com.es/2011/12/instalacion-de-un-servidor-local-wamp.html).

Hemos descargado la versión 1.5.6.2 (más actual a fecha de este artículo) y lo descomprimimos en el directorio prestashop del servidor local. Accedemos a la instalación con la URL localhost/prestashop:

Elegimos el idioma y pulsamos siguiente. En la siguiente pantalla aceptamos los términos de la licencia y aparece un formulario para poner los datos principales de la tienda:

Introducimos el nombre de la tienda, el sector, el nombre y correo del administrador (que se usará para iniciar sesión en el panel del administrador) y la clave de acceso al backend. Pulsamos en siguiente y aparece el formulario para introducir los datos de conexión con la base de datos que creamos antes:

Si pulsáis el botón "Comprueba la conexión..." podréis verificar que los datos introducidos son correctos. Si lo son, pulsad el botón "Siguiente" para continuar con la instalación. En este momento se crearán automáticamente todas las tablas en la base de datos necesarias para el funcionamiento de Prestashop, se instalan los módulos, idiomas, addons, etc...

Esperamos a que el proceso termine (puede llevar unos minutos, en función de la potencia del servidor). Cuando el proceso termina el sistema nos informa de las credenciales de acceso:

Os recomiendo imprimirlo y guardarlo en un lugar seguro para no olvidarlo ;-). Finaliza con un mensaje informando que se debe eliminar la carpeta install. La eliminamos y accedemos a nuestra tienda con la URL http://localhost/prestashop (en el caso de ejemplo, cada cual en su servidor):

Ahora que ya lo tenemos instalado tendremos que acceder al panel de administración (o backend). Prestashop crea una carpeta adminXXXX (donde XXXX son cuatro números al azar para dificultar que terceros con malas intenciones accedan a nuestra tienda). Nos vamos al directorio en el que descomprimimos los archivos de Prestashop y miramos el nombre de la carpeta admin:

En nuestro caso la carpeta se llama "admin7785". Introducimos en el navegador la URL localhost/prestashop/admin7785:

Introducimos los datos de acceso que elegimos en el proceso de instalación y accederemos al panel de administración:

Con esto termina el tutorial de instalación, próximamente explicaremos el funcionamiento del panel y cómo personalizar nuestra tienda.