html limpio y semantico en drupal new

8/7/2019 HTML Limpio y Semantico en Drupal New

1/18

por Jorge Salinas

HTML limpio y semntico enDrupal


2/18

Necesitamos un bloque que nos muestre cuatro campos:

- Ttulo- Resmen- Enlace al nodo- Imgen

Un caso comn en Drupal

Usamos el mdulo Views para cumplir con esta tarea.Agregamos los campos y creamos el bloque.


3/18

El resultadoTodo bien a simple vista...


4/18

Pero si vemos el cdigo fuente...

Clases = 28 = 11 = 3


5/18

Como debera ser el HTML de este bloqueen un mundo ideal...


6/18

Comparamos?

VS


7/18

Otro ejemplo, los mens en Drupal.

No siempre necesitamos tantas clases.


8/18

Que problemas trae esto?

CSS difcil de mantener.

Mayor dificultad para validar el HTML.

Un cdigo HTMLpoco semntico.

Menor control sobre el HTMLy CSS.

Ms cdigo y mayor tamao del documento.


9/18

Como lo arreglamos?

Archivos TPL

Funciones temeables

Mdulos contribuidos

Mothership Theme


10/18

Algunas clases o IDs son necesarias para que ciertos mdulos funcionen correctamente;por ejemplo, el mdulo views necesita la clase view-dom-id para que la opcin 'Ajax'funcione correctamente.

Advertencia antes de continuar


11/18

Archivos tpl.php

Son templates (plantillas) que nos permiten modificar las salidas HTMLde determinados mdulos.

Muchos mdulos implementan estos archivos para darnos mayorcontrol sobre las salidas HTML.

Por ejemplo los mdulos Views , Block , Node , Poll , entre otros, losimplementan.


12/18


13/18


14/18

Y si necesito temear un bloque especfico?

Usamos el mdulo Theme Developer que identifica conun click los nombres que podemos usar para el archivoTPL de un bloque especfico.

Ms detalles acerca de los nombres de archivos TPL aqu:http://drupal.org/node/104319
http://drupal.org/node/104319http://drupal.org/node/104319


15/18

hook_theme functions

Algunos mdulos implementan la funcin hook_theme que especifica quearchivos y funciones se pueden usar para sobreescribir la salida HTML.

http://api.drupal.org/api/function/hook_theme


16/18

Semantic ViewsEste mdulo nos da una interfaz grfica desde donde podremoscambiar la salida HTMLde nuestras vistas (views).

drupal.org/project/semanticviews

Semantic CCKEs un mdulo que nos permite, mediante una interfaz grfica, cambiar lasalida de los campos creados con CCK.

drupal.org/project/semantic_cck

Mdulos contribuidos y temas

MothershipEs un tema que limpia las clases e ids que Drupal trae por defecto.Se utiliza como un tema base y trae una interfaz para elegir que clases oids queremos eliminar o conservar.

drupal.org/project/mothership


17/18

Adicional: Theming de Views y CCK

Ver la presentacin de Edgar Marca (Matiskay) donde se explica con mucho detalle comotemear (y limpiar) el HTML de estos mdulos:

http://drupalperu.org/node/314


18/18

Jorge Salinas [email protected]

html limpio y semantico en drupal new

Documents