8/7/2019 HTML Limpio y Semantico en Drupal New
1/18
por Jorge Salinas
HTML limpio y semntico enDrupal
8/7/2019 HTML Limpio y Semantico en Drupal New
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.
8/7/2019 HTML Limpio y Semantico en Drupal New
3/18
El resultadoTodo bien a simple vista...
8/7/2019 HTML Limpio y Semantico en Drupal New
4/18
Pero si vemos el cdigo fuente...
Clases = 28 = 11 = 3
8/7/2019 HTML Limpio y Semantico en Drupal New
5/18
Como debera ser el HTML de este bloqueen un mundo ideal...
8/7/2019 HTML Limpio y Semantico en Drupal New
6/18
Comparamos?
VS
8/7/2019 HTML Limpio y Semantico en Drupal New
7/18
Otro ejemplo, los mens en Drupal.
No siempre necesitamos tantas clases.
8/7/2019 HTML Limpio y Semantico en Drupal New
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.
8/7/2019 HTML Limpio y Semantico en Drupal New
9/18
Como lo arreglamos?
Archivos TPL
Funciones temeables
Mdulos contribuidos
Mothership Theme
8/7/2019 HTML Limpio y Semantico en Drupal New
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
8/7/2019 HTML Limpio y Semantico en Drupal New
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.
8/7/2019 HTML Limpio y Semantico en Drupal New
12/18
8/7/2019 HTML Limpio y Semantico en Drupal New
13/18
8/7/2019 HTML Limpio y Semantico en Drupal New
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/1043198/7/2019 HTML Limpio y Semantico en Drupal New
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
8/7/2019 HTML Limpio y Semantico en Drupal New
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
8/7/2019 HTML Limpio y Semantico en Drupal New
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
8/7/2019 HTML Limpio y Semantico en Drupal New
18/18
Jorge Salinas [email protected]