Taller de introduccióna Drupal 7

Alicante, 4 y 6 de Marzo de 2013Organizado por CAMON Alicante y la Comunidad Drupal Alicante

Impartido por Javier Gómez

Sobre mí

• Javier Gómez• Desarrollador web Freelance desde 2010• Miembro de la Asociación Española de Drupal

http://asociaciondrupal.esHe colaborado en la organización de las DrupalCamp Spain 2011 y 2012

• Miembro fundador de la comunidad Drupal de Alicante creada en Octubre de 2011, con reuniones mensuales en CAMON http://groups.drupal.org/alicante

• Actualmente realizo proyectos en Drupal combinando Sitebuilding y Theming

• Podeis encontrarme en:twitter.com/fjgomez2 es.linkedin.com/in/codigoweb www.codigoweb.org

Sobre el taller

• A quien va dirigido– A cualquier persona con o sin conocimientos previos– Es un nivel de iniciación

• Requisitos para el asistir al taller– Ganas de conocer drupal– Opcionalmente: un ordenador

• Que puedo hacer cuando termine el taller?– Montar un sitio web con Drupal

• Y si me pierdo algo?http://vimeo.com/tucamon

http://www.slideshare.net/javiergomezspain

• Introducción• Contenido• Estructura (Arquitectura de la información)• Personas (Usuarios)• Módulos (Funcionalidad)• Apariencia (Presentación)

Contenido del taller

INTRODUCCIÓN

• Qué es Drupal• Cómo funciona Drupal• Requisitos para la instalación• Perfiles de instalación• Instalación de Drupal: Pasos a seguir• Configuración: información del sitio• Revisión del estado del sitio web con los

informes de Drupal 7

1ª Parte: INTRODUCCIÓN

Qué es Drupal

• Drupal es un CMS ó sistema de gestión de contenido modular multipropósito y muy configurable que permite publicar artículos, imágenes, u otros archivos y servicios añadidos como foros, encuestas, votaciones, blogs y administración de usuarios y permisos.

• Drupal es un sistema dinámico: en lugar de almacenar sus contenidos en archivos estáticos en el sistema de ficheros del servidor de forma fija, el contenido textual de las páginas y otras configuraciones son almacenados en una base de datos y se editan utilizando un entorno Web.

http://es.wikipedia.org/wiki/Drupal

1ª Parte: INTRODUCCIÓN

Qué es Drupal

• Es Open Source (programa libre), con licencia GNU/GPL, escrito en PHP, desarrollado y mantenido por una activa comunidad de usuarios. Destaca por la calidad de su código y de las páginas generadas, el respeto de los estándares de la web, y un énfasis especial en la usabilidad y consistencia de todo el sistema.

http://es.wikipedia.org/wiki/Drupal

• Drupal también es un Framework a través del que podemos programar nuevas funcionalidades con un API muy bien documentado y una comunidad de usuarios muy potente.

• La curva de aprendizaje es mas elevada que otros CMS

1ª Parte: INTRODUCCIÓN

Cómo funciona Drupal

• Drupal es una aplicación que se ejecuta sobre un servidor web y hace uso de PHP para efectuar consultas sobre una base de datos y construir dinámicamente las páginas que sirve al usuario utilizando estándares web como XHTML, CSS y JavaScript.

1ª Parte: INTRODUCCIÓN

Requisitos e instalación

• Drupal 7 (descargar de http://drupal.org)• Servidor (local o hosting) requisitos mínimos del servidor:– Servidor HTTP. Apache o similar– Base de datos: MySQL 5.0.15 o PostgreSQL 8.3– PHP Versión: 5.2 o superior– Mail Server (si queremos que nuestro sitio envíe e-mails)

Para el taller utilizaremos un servidor local XAMPP

1ª Parte: INTRODUCCIÓN

Perfiles de instalación

Drupal 7 tiene tipos de configuración para el momento de instalarlo

• En el taller se usará el perfil Standar en castellano– http://drupal.org/project/drupal– http://localize.drupal.org/translate/languages/es

• Existen otros perfiles para diversos usos de drupal – http://drupal.org/project/distributions

por ejemplo Commerce KickStart, para crear una tienda virtual http://drupal.org/project/commerce_kickstart

1ª Parte: INTRODUCCIÓN

Instalación de Drupal 7

Pasos que vamos a seguir en el taller:1. Instalación del servidor local con XAMPP2. Iniciar los servidores Apache y MySql3. Instalación de la Base de Datos4. Copiar los archivos de Drupal en el servidor5. Instalar Drupal

1ª Parte: INTRODUCCIÓN

Instalación: servidor local Instalando el servidor XAMPP

• XAMPP es uno de los muchos servidores Apache+MySql+php

• Es muy facil de instalar en windows, Mac y Linux, incluso una version windows portable.

• Editamos el archivo php.ini y establecemos el valor max_execution_time a 120

• Una vez instalado iniciamos Apache y MySql

1ª Parte: INTRODUCCIÓN

http://www.apachefriends.org/es/xampp.htm

Instalación: Base de Datosconfigurar phpMyAdmin

• Cotejamiento– utf8_spanish_ci

• Idioma– Español

1ª Parte: INTRODUCCIÓN

http://localhost/phpmyadmin

Instalación: Base de DatosCreación de usuario y base de datos

1. Entrar en Privilegios2. Agregar nuevo usuario3. Nombre de usuario

y password4. Seleccionar:

“Crear base de datos con el mismo nombre y otorgar todos los privilegios”

5. Privilegios : Marcar todos6. Crear usuario

1ª Parte: INTRODUCCIÓN

http://localhost/phpmyadmin

Instalación: copiar archivos colocar los archivos de Drupal en el servidor

• Descomprimir drupal-7.20.tar.gz• Crear una carpeta en el

servidor con el nombre del sitio web que vamos a crear:– C:\xampp\htdocs\taller-drupal

• Copiar dentro los archivos descomprimidos

• Copiar el archivo drupal-7-20.es.po en la carpeta …\profiles\standard\translations

1ª Parte: INTRODUCCIÓN

Instalación de Drupal 7 Selección del perfil de instalación

1ª Parte: INTRODUCCIÓN

Instalación de Drupal 7 Selección del idioma

1ª Parte: INTRODUCCIÓN

• Si hemos copiado el archivo drupa-7-20.es.po en la carpeta translations, nos aparezca el idioma español.

• Podemos descargar más idiomas en

http://localize.drupal.org/translate/languages

Instalación de Drupal 7 Configuración de la base de datos

1ª Parte: INTRODUCCIÓN

• Si los requerimientos del servidor son correctos pasaremos a Set up database

• Aquí introduciremos los mismos datos de usuario y contraseña que nos pidió phpMyAdminY el mismo nombre de base de datos que de usuario.

Instalación de Drupal 7 Finalizando la instalación

1ª Parte: INTRODUCCIÓN

• Si todo va bien, drupal hará los siguientes pasos:– Instalar perfil– Configurar traducciones

• Y al finalizar nos mostrará una ventana de configuración

Instalación de Drupal 7 posibles errores durante la instalación

1ª Parte: INTRODUCCIÓN

• Nos podemos encontrar con errores durante la instalación– En instalaciones locales hay veces que

no podemos configurar la base de datos con el usuario que hemos creado, en ese caso utilizaremos el usuario root , si no hemos cambiado el password, este lo dejaremos en blanco.

– Si al importar las traducciones nos sale el siguiente error, pulsaremos continuar a la página de error y terminará la instalación.

– Para otros errores consultar la amplia documentación de Drupal http://drupal.org/documentation/install

Configuración

• La configuración inicial nos permite personalizar el comportamiento de nuestro sitio y su información básica:– Nombre del sitio web– Email del sitio web– Datos del usuario administrador

• nombre de usuario, email y password

– Pais y zona horaria por defecto– Etc.

1ª Parte: INTRODUCCIÓN

Instalación de Drupal 7 Instalación finalizada

• Ya tenemos Drupal instalado

1ª Parte: INTRODUCCIÓN

Informes

• Permiten visualizar el estado de nuestro sitio. – Por ejemplo: si han salido

actualizaciones interesantes, si nuestro sistema está correctamente configurado...

1ª Parte: INTRODUCCIÓN

CONTENIDOS

• Crear Contenidos• Formatos de texto• Revisiones• Etiquetar contenidos

2ª Parte: CONTENIDOS

Crear ContenidosMi primera página en Drupal

2ª Parte: CONTENIDOS

1. Seleccionar Agregar contenido.2. Elegir el tipo de contenido Página básica.3. Título: Bienvenido a mi sitio Drupal 7.4. Editar resumen.5. Resumen: Hoy he aprendido a instalar Drupal 7.6. Cuerpo: Esta es mi página de inicio, realmente ha sido muy

fácil instalar drupal.7. Opciones de comentarios:

• Cerrada.8. Opciones de publicación:

• Publicado• Colocado en la página principal

Crear ContenidosFormatos de texto

2ª Parte: CONTENIDOS

• La información en los campos de texto siempre se guarda como la introducimos pero al presentarla al usuario se filtra.

• Utiliza Filtered HTML para evitar fallos de seguridad, permite realizar diferentes manipulaciones del texto...

• Full HTML permite cualquier código html pero baja el nivel de seguridad, utilizar únicamente cuando no sea suficiente Filtered HTML

Crear ContenidosVersiones y clasificación

• Permite controlar las versiones de un determinado contenido. Muy útil cuando es editado por diferentes usuarios.

• Las taxonomías nos permiten asociar categorías a nuestro contenido.

2ª Parte: CONTENIDOS

ESTRUCTURA

Para estructurar la información, Drupal utiliza:• Bloques• Menús• Taxonomías• Tipos de contenido

Opcionalmente, drupal se apoya de módulos externos que amplían esta funcionalidad como views, display suite o panels

3ª Parte: ESTRUCTURA

ESTRUCTURABloques

• Los bloques son piezas del sitio web

• Drupal permite disponer estas piezas en regiones preestablecidas desde la interfaz de usuario

• Los bloques pueden ser contenido estático, dinámico, formularios...

• Los bloques se configuran por tema

3ª Parte: ESTRUCTURA

ESTRUCTURAMenús

• Los menús definen la navegación principal del sitio web y se gestionan desde UI

• Se pueden crear menús que estén disponibles como bloques

• Los enlaces de un menú pueden ser externos o internos al sitio web

3ª Parte: ESTRUCTURA

ESTRUCTURATaxonomias

• Las taxonomías permiten clasificar el contenido en categorías

• Se crea un vocabulario que contiene términos

• El vocabulario se asocia a un tipo de contenido

• Los términos pueden ser predefinidos o no

3ª Parte: ESTRUCTURA

ESTRUCTURATipos de Contenido

• Se pueden crear diferentes tipos de contenidos

• Se pueden personalizar su estructura añadiendo campos (esto funciona con todas las entidades como usuarios o taxonomía)

– Campos de texto– Imágenes– Archivos

• Módulos adicionales:– Email– Link– Audiofield, etc

3ª Parte: ESTRUCTURA

ESTRUCTURAEjercicio

1. Vamos a modificar el tipo de contenido Página básica– Administrar Campos– Agregar campo existente Etiquetas– Pulsamos Guardar y en se siguiente

ventana Guardar opciones

2. Modificamos la página que creamos en el ejercicio anterior– Añadimos las etiquetas: taller,

camon, drupal– Seleccionamos Proporciona un enlace

de menú – Guardamos

3ª Parte: ESTRUCTURA

ESTRUCTURAEjercicio

3ª Parte: ESTRUCTURA

Fin de la 1ª Parte

http://vimeo.com/tucamon

http://www.slideshare.net/javiergomezspain