Cursos y tutoriales

Cómo aplicar CSS

Cursos y tutoriales - Dom, 02/02/2020 - 23:36

Con CSS podemos dar el aspecto visual a nuestras páginas web, veamos cómo podemos aplicarlo:

Insertado directamente en el HTML

Podemos aplicarlo directamente dentro de las etiquetas HTML, ésta sería la forma más rudimentaria, un ejemplo dentro de una etiqueta div:
<div style="color: black; font-family: Arial;">Aquí un texto cualquiera.</div>
Como se puede apreciar metemos la palabra "style" seguida de un "=" y luego entre comillas el estilo a aplicar.
No es la forma más adecuada ya que no es reutilizable.

En la cabecera del la página

En éste caso se declaran los estilos dentro de la cabecera del HTML, o sea dentro de las etiquetas HEAD y luego dentro de la etiqueta STYLE, un ejemplo:

<head>
<style type="text/css">
  p { color: black; font-family: Arial; }
</style>
</head>

Para poco código puede valer éste sistema, pero sigue sin ser reutilizable.

En un archivo externo

Este método si que es reutilizable y el más aconsejable. En la cabecera del HTML declaramos la ruta del archivo o hoja de estilos, por ejemplo:

<head>
<link rel="stylesheet" type="text/css" href="/css/hoja-estilos.css" />
</head>

Como se puede apreciar se usa una etiqueta LINK para enlazar la hoja de estilos externa. Veamos ahora como aplicar los estilos en el HTML.
Se aplica a través de los selectores:

Selector universal

Es para aplicar a todos los elementos del HTML, ejemplo:

* {
  margin: 0;
  padding: 0;
}

Esto iría en la hoja de estilos y no hay que poner nada en HTML, se aplica a todo.

Selector de etiqueta

Para aplicar en etiquetas concretas del HTML, por ejemplo en un H2

h2 {
  color: blue;
}

Este código iría en la hoja de estilos y no hay que poner nada en el HTML.

Podemos agrupar varios selectores separados por comas:

h1, h2, h3 {
  color: black;
  font-weight: normal;
  font-family: Arial, Helvetica, sans-serif;
}

Es como si se les aplicaran por separado.

Cuando queramos aplicar un estilo a un selector dentro de otro:

p div {
color: green;
}

Se le aplicará el estilo al div que esté dentro de un párrafo, se le denomina selector descendente.
Y pueden ser más de dos selectores, sin limite... creo.

Selector de clase

Este selector es ideal para aplicar a un determinado elemento del HTML, por ejemplo ponemos éstas reglas en la hoja de estilos:

.miclase1 {
   color: black;
   font-size: 12px;
}

A las clases se les pone un punto delante del nombre para distinguirlos de otros tipos de selectores, también se pueden agrupar o hacerlos descendentes.

Ahora vemos como aplicarlo al HTML:

<p class="miclase1">Educasitio es una web estupenda...</p>

Para aplicar el estilo ponemos dentro de la etiqueta HTML la palabra class= seguida del nombre de la clase entre comillas.
Se puede usar en tantos elementos como se quiera.

Selector de ID

Se aplica igual que el de clase, la única diferencia es que solo se aplica a un solo elemento. En vez del punto delante del nombre se pone una almohadilla #:

#idprueba {
   color: black;
   font-size: 12px;
}

Luego en el HTML se plica así:

<p id="idprueba">Educasitio es una web estupenda...</p>

Categorías: CSSTemática: ProgramaciónNivel: Básico
Categorías: Cursos y tutoriales

Mover comentarios y nodos en Drupal

Cursos y tutoriales - Mar, 17/12/2019 - 00:26

Dentro del amplio repertorio de módulos tenemos a Comment mover el cual nos permite mover comentarios y nodos, muy practico cuando tenemos un foro de Drupal activo, ya que es muy normal que los usuarios pongan comentarios donde no deben, con éste módulo podremos moverlos muy fácilmente.
Disponible para Drupal 7.

Características de Comment mover

Esto es lo que nos permite hacer éste módulo:

  • Mover comentarios debajo de otros comentarios en el mismo nodo
  • Mover comentarios a otro nodo o comentario
  • Convertir comentarios a un tema del foro o a cualquier otro tipo de nodo
  • Convertir nodos a comentarios conservando datos de las mismas instancias de campo.
Cómo se usa Comment mover

Una vez instalado y activado no es necesaria ninguna configuración adicional, debajo de cada nodo y comentario saldrá cut y paste, tan solo tendremos que cortar y pegar donde nos interese, es muy sencillo.

Categorías: Drupal 7
Categorías: Cursos y tutoriales

Crear tablas o indices de contenidos en Drupal

Cursos y tutoriales - Jue, 12/12/2019 - 00:02

Si buscas un módulo o plugin para crear una tabla de contenidos o indice de contenidos dentro de un artículo, puedes usar TOC Filter, válido para Drupal 7 y Drupal 8.
Estas tablas o indices que resumen el contenido de un artículo, sobre todo si son extensos, ayudan a clasificar las diferentes secciones y mejorar en gran medida la usabilidad de cara al usuario. Además mejora el SEO de la página, según dicen...

Indice Volver arribaBuscando el módulo ideal para crear indices de contenido

La verdad es que me ha costado un buen rato encontrar un módulo en Drupal para crear un indice de contenidos porque hay muy poca información al respecto en español, y buceando por Drupal.org la mayoría de módulos son para crear tablas de contenidos a nivel de bloques o listados de contenidos generales de artículos. Lo que yo buscaba era simplemente un módulo para crear un indice dentro de un artículo o post, los típicos que puedes ver en Wikipedia o en éste mismo artículo a modo de ejemplo.
Los que he visto que pudieran hacer éste cometido estaban en su mayoría obsoletos o sin actualizar, al final di con el que creo es simple y efectivo, TOC Filter.

Volver arribaCaracterísticas de TOC Filter

Como comentábamos antes, el módulo crea un indice de contenido dentro de un artículo, para ello se basa en las etiquetas HTML de los títulos H1, H2, H3, H4, etc. El gran inconveniente es que solo lo hace por una de las etiquetas, la que elijamos. Lo ideal sería que anidara los títulos...
Para hacer el trabajo se ayuda de los Filtros de texto de Drupal, en la configuración lo verás con más detalle.
Además crea unos enlaces arlado de cada título para volver al indice, los puedes apreciar en éste mismo post.

Volver arribaInstalar y configurar el módulo

Para Drupal 8 es necesario instalar también TOC API, para Drupal 7 no es necesario.

  1. Instalar el módulo como cualquier otro y habilitar
  2. Ir a configuración -> Autoría de contenido -> Formatos de texto -> FullHTML (o cualquier otro que te interese, lo normal para el administrador es el FullHtml).
  3. Activar la casilla de Table of contents y Guardar.
  4. Ahora vamos a la configuración del módulo: Configuración -> Autoría de contenido -> TOC Filter y aquí seleccionamos la etiqueta H2 o la que nos interese, por defecto está la H3, Guardamos.
Volver arribaAplicar la tabla de contenidos

Para aplicarlo en un post o nodo es tan simple como poner entre corchetes la palabra TOC, opcionalmente se puede poner un título y otros parámetros más que no entraremos en detalle ahora:
[TOC título del indice (opcional)]
Lo ideal es colocarlo inmediatamente después de la introducción del artículo, como puedes ver en éste mismo post.

Volver arribaTraducir TOC Filter

A la hora de escribir éste artículo no hay traducción aún al español, de momento he contribuido traduciendo lo más esencial y mientras no lo apliquen de forma oficial te lo puedes descargar desde aquí mismo e importar en Drupal desde: Configuración -> Regional e idioma -> Traducir interfaz -> Importar
Va en un archivo comprimido, descomprimelo antes de importar.

Volver arriba AdjuntoTamaño Traducción TOC Filter670 bytes
Categorías: Cursos y tutoriales