Curso de CSS3

Curso de CSS3

Destinatarios

Maquetadores y programadores web con conocimientos en maquetación CSS2 y HTML4.

Objetivos

  • Conocer las nuevas propiedades CSS3
  • Saber poner en marcha los usos sobre botones y textos
  • Saber importar tipos de letra
  • Saber realizar degradados sobre elementos
  • Saber aplicar distintos estilos dependiendo de la resolución de pantalla

Temario

  • Introducción
  • Nuevas propiedades
  • Botones redondeados
  • Varios fondos de imagen
  • Colores con transparencia
  • Nuevos selectores
  • Sombras
  • Degradados
  • Media Queries

Curso de Desarrollo de Módulos con Drupal 7 (VI): Creación de Bloques

Una vez gestionados los datos principales del módulo, a veces, es necesario poder presentar información en forma de bloques, tal como mencionamos en la 7ª entrega del curso de Drupal 7.
A continuación, detallaremos los pasos fundamentales para la generación de bloques desde un módulo.

Declaración de un Bloque: hook_block_info()

Este el el hook principal para la definición de bloques. Veamos un ejemplo de definición en un fichero .module:
<?php
/**
 * @file
 * Module file for block_example.
 */
/**
* Implementa hook_block_info().
*/
function current_posts_block_info() {
  $blocks[‘current_posts’] = array(
    ‘info’ => t(‘Current posts’), //El nombre que aparecerá en el listado de bloques
    ‘cache’ => DRUPAL_CACHE_PER_ROLE, //Default
  );
  return $blocks;
}
A partir de est momento debería salir el bloque en el listado de bloques.

Obtención de información

Es el momento de recoger los datos que queremos presentar en el bloque, para ello utilizamos una función creada por nosotros:
/**
* Función de obtención de Contenido
*
* Intenta recoger los elementos que están en la base de datos entre una fecha y otra.
*
* @return
*   Un result set de los post entre dos fechas.
*/
function current_posts_contents(){
  //Coge la fecha de hoy
  $today = getdate();
  //Calcula la fecha hace una semana
  $start_time = mktime(0, 0, 0,$today[‘mon’],($today[‘mday’] – 7), $today[‘year’]);
  //Coge la hora actual como la fecha final
  $end_time = time();

  //Usa el API de Database para hacer la consulta
  $query = db_select(‘node’, ‘n’)
    ->fields(‘n’, array(‘nid’, ‘title’, ‘created’))
    ->condition(‘status’, 1) //Published.
    ->condition(‘created’, array($start_time, $end_time), ‘BETWEEN’)
    ->orderBy(‘created’, ‘DESC’) //Most recent first.
    ->execute();

//devuelve los resultados de la consulta
  return $query;
}

Generando la salida del bloque: hook_block_view()

Para generar la salida será necesario implementar el hook_block_view() en el fichero .module. Veamos un ejemplo de utilización:
/**
* Implementa hook_block_view().
*
* Prepara los contenidos del bloque
*/
function current_posts_block_view($delta = ”) {
   //verifica que bloque es el que quiere presentar
  switch($delta){
   //en caso de que sea nuestro bloque
    case ‘current_posts’:
      //genera un array para definir el bloque
      $block[‘subject’] = t(‘Current posts’);
      //verifica los permisos del usuario, en este caso para acceder al contenido
      if(user_access(‘access content’)){
        //Usamos nuestra función para recoger los datos
        $result = current_posts_contents();
        //Genera un array para introducir los datos de la consulta de manera estructurada
        $items = array();
        //Bucle que recorre los resultados y obtiene cada nodo para introducir los datos en el array
        foreach ($result as $node){
          $items[] = array(
            ‘data’ => l($node->title, ‘node/’ . $node->nid),
          );
        }
        //Verifica que el array no esta vacio
        if (empty($items)) { //No content in the last week.
          $block[‘content’] = t(‘No posts available.’);
        }
        else {
          //Pasa los datos a la funcion theme para maquetarlos
          $block[‘content’] = theme(‘item_list’, array(
            ‘items’ => $items));
        }
      }
  }
  //Devuelve el bloque a dibujar
  return $block;
}

Probando

Una vez genradas estas funciones será necesario activar el módulo, verificar que el bloque está presente en el listado, asignarle una región y recargar la página para ver los resultados.
Licencia Creative Commons

Curso de Drupal 7 (III): Entorno de Administración Básica

El Entorno de Administración

La administración de Drupal 7 se realiza de una manera muy sencilla a través del módulo toolbar, cuando entramos por primera vez al sitio web desde la instalación nos aparece un interfaz similar al siguiente…

como se puede observar en la captura, en la parte superior de la página aparece una barra horizontal de color negro. Ésta es la Barra de Tareas de Drupal. Justo debajo de la barra de tareas aparece una barra de atajos, donde podemos ir configurando aquellos enlaces directos a las tareas típicas de administración.

La Barra de Tareas

Mediante esta barra de tareas disponemos de enlaces a los principales módulos de administración de Drupal 7, de izquierda a derecha…

  • Home: Enlace a la página principal del sitio web.
  • Panel de control: Pantalla de resumen de la actividad sobre el sitio web, es fácilmente configurable, para adaptarse a nuestras necesidades específicas. 
  • Contenido: módulo principal de gestión de contenidos del sitio web.
  • Estructura: conjunto de módulos que nos permiten gestionar la estructura principal del sitio web, includos los bloques, los menús, las taxonomías y los tipos de contenido.
  • Apariencia: módulo de gestion de temas visuales, plantillas o templates, que determinan la manera en la que se ve el sitio web.
  • Personas: módulo de gestión de usuarios, roles y permisos del sitio web.
  • Módulos: gestión de funcionalidades disponibles y activadas para el sitio web.
  • Configuración: gestión de configuraciones globales al sitio web, tales como el título del sitio web, el sistema de registro de usuarios, etc…
  • Informes: gestión de informes del funcionamiento y configuración del sitio web, crucial para la verificación de la instalación
  • Ayuda: módulo que agrupa distintas guías de uso de drupal.
  • Menú de Usuario: permite la gestión de la cuenta de usuario, así como cerrar la sesión.

La Barra de Atajos

Ésta barra de atajos nos permitirá configurar acciones típicas que realicemos como administradores del sitio web, inicialmente incluye tres opciones principales:

  • Agregar contenido.
  • Hallar contenido.
  • Editar atajos: así podremos configurar de manera unificada los enlaces presentes en esta barra. 

Al acceder a cualquiera de los elementos configurables desde la barra de tareas es posible pulsar sobre el icono + que aparece al lado del nombre del elemento, para poder añadirlos a los atajos. Inicialmente sólo se pueden añadir un total de 7 atajos.

     Enlaces Contextuales

    Los enlaces contextuales de Drupal 7 permiten en algunos módulos la inclusión de enlaces contextuales al contenido que presentan, que evitan la necesidad de ir al apartado de administración para gestionar dichos contenidos. Es posible configurar los permisos para habilitar a distintos perfiles el uso de dichos enlaces contextuales.

    Éste módulo está activado en la instalación Stardard.

    El Panel de Control (Dashboard)

    Se puede acceder al panel de control desde la barra de tareas pulsando en el enlace “Panel de Control”, tendrá un aspecto similar al siguiente…

    La idea del panel de control es poder disponer de un vistazo toda la información relevante al sitio web drupal. Para ello es altamente configurable, mediante el enlace denominado “Personalizar panel de control”, con el que veremos un interfaz sencillo de personalización similar al siguiente…

    donde podremos editar de una manera intuitiva mediante el enlace, añadir otros bloques…

    y con el ratón con el movimiento arrastrar y soltar del ratón moverlos entre las distintas posiciones disponibles en el panel de control…

    Referencias:

    Licencia Creative Commons

    Curso de Drupal 7 (I): Introducción

    Drupal se ha convertido en poco tiempo en unos de los Sistemas de Gestión de Contenidos (SGC o CMS en inglés) más utilizados y más flexibles del mercado por méritos propios. En este conjunto de tutoriales que servirán de inicio de este blog, expondré los puntos fundamentales para el desarrollo de sitios web con Drupal 7, así que sin más dilación empecemos.

    Conceptos fundamentales 

    A continuación  detallaré aquellos conceptos fundamentales en el funcionamiento de una web.

    • HTTP: protocolo principal de la web.
    • HTTPS: protocolo de web segura.
    • Cliente: elemento de la arquitectura que consulta la información.
    • Servidor: elemento de la arquitectura que almacena y gestiona la información.
    • Navegador web: Programa cliente http y https, permite visualizar páginas web.
    • Página Web:  Fichero html y sus referencias que contienen tanto el contenido con la manera de presentar el contenido en un navegador web.
    • Sitio web: Conjunto de páginas web.
    • Servidor Web: Programa que almacena páginas y sitios web.
    • Dominio: Nombre registrado único que identifica un conjunto de ordenadores. 
    • URL:  dirección de internet que permite localizar un recurso online.
    • CMS ó SGC: Sistema que gestiona los contenidos de uno o varios sitios web.
    • LAMP: Arquitectura de desarrollo e implatación de soluciones web, que consta normalmente de Linux, como sistema operativo, Apache, como servidor web, Mysql, como motor de bases de datos y PHP como lenguaje de programación.

    Así pues, Drupal es un CMS que necesita de una plataforma LAMP para poder funcionar, en siguientes tutoriales veremos cómo funciona su instalación y configuración.

    Arquitectura de Drupal

    En el siguiente diagrama se pueden ver los elementos principales de la arquitectura de drupal

     

    • Data: en esta capa residen los datos, toda la información que gestiona drupal, debe tener elementos en esta capa.
    • Modules: ésta es la capa representativa de las funcionalidades de drupal, tanto las presentes en el core, o funcionalidades presentes en la distribución oficial de drupal, como en funcionalidades implementadas por parte de terceros.
    • Bloques y menús: los bloques representan zonas de presentación de información, lo smenús repsentan estructuras de enlaces de acceso a los contenidos del sitio web.
    • Permisos: esta capa permite identificar que pueden ver o no los distintos usuarios que acceden al sitio web.
    • Plantillas: Estilo visuales de presentación de la información, básicamente contienen el código HTML y CSS de presentación final del sitio web.

    Otros Conceptos importantes

    • Entities: Las entidades son la nueva manera de almacenar información en el apartado de datos, es un concepto nuevo introducido en drupal 7.
    • Usuarios: Los usuarios es toda persona o programa que vaya a visitar o utilizar el sitio web.
    • Permisos: Conjunto de acciones permitidas para los usuarios del sitio web.
    • Roles: Conjunto de permisos, normalmente asociado a un conjunto de usuarios.
    • Nodo: Conjunto de datos que puede ser presentado en el sitio web, usualmente asociado a un tipo de cotenido.
    • Tipo de contenido: Normalmente relacionado con un Nodo, dicese de los diferentes conjuntos de datos presentables gestionados en el sitio web.
    • Taxonomía: Se refiere a categorías de clasificación de contenidos en un sitio web.
    • Path: Ruta a un contenido del sitio web, normalmente una URL.
    • Regions: las regiones son áreas visuales que permiten la introducción de bloques de contenido.

    Tipos de contenido 

    Los tipos de contenido iniciales de Drupal 7 son dos:

    • Article: contenido que permite introducir informaciones variables en el sitio web, un ejemplo de uso serían noticias.
    • Page: Contenido estático del sitio web.

    Según se van agregando funcionalidades como módulos a Drupal, pueden ir apareciendo distintos tipos de contenido, así como nosotros tambien podemos dar de alta nuevos tipos de contenidos fácilmente en el sitio web.

    Refencias: 

    Licencia Creative Commons

    Suscríbete al Boletín

    Si quieres estar al tanto de las novedades del blog, ya sabes :)
    * = campo obligatorio

    powered by MailChimp!

    Archivos

    Uso de cookies

    Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información. ACEPTAR

    Aviso de cookies