Javascript no intrusivo, CSS y PHP

Últimamente está en boca de mucha gente el concepto "Unobtrusive Scripting", así que voy a explicar este concepto lo más brevemente posible y a mostrar un par de trucos para llevarlo a cabo:

Un script no intrusivo debe cumplir lo siguiente:

• Debe ser usable, es decir, debe conferir un beneficio de usabilidad en el site.
  
• Debe ser accesible, si javascript no funciona, la pagina debe mantenerse legible y entendible, aunque la pérdida de cierta usabilidad sea inevitable
  
• Debe ser fácil de implementar; típicamente, un desarrollador web solo debe incluir el fichero en javascript en el documento y el script funciona
  
• Debe estar separado, reside en su propio archivo .js en lugar de estar plantado en el HTML.

Los desarrolladores sabemos que romper con el hábito es a menudo difícil, pero en el mundo web, la separación puede ser buena. Veamos que significa la separación cuando hablamos de desarrollo web:

1. Estructura HTML -> "Qué significa"
   
2. Presentación CSS -> "Cómo se muestra"
   
3. Comportamiento Javascript -> "Qué hace?"

Podemos englobar el punto 1, 2 y 3 en una burbuja cada uno y de esta forma obtener lo que llaman "Las tres capas". Así diremos que cada página web necesita una capa de HTML estructural; sin HTML, no hay página. Sin embargo, las capas de CSS y Javascript son opcionales.

¿Por qué debo separarlos? Sin duda hay múltiples beneficios al separar cada concepto. La idea básica de la separación de la presentación y la estructura es asegurarse de que el HTML define la estructura y solo ésto. Toda la presentación se define en CSS así como el Javascript es definido aparte. Solo así conseguiremos un marcado limpio y funcional 100% sin nada más de por medio.

Por lo tanto, no deberíamos definir más funciones dentro de etiquetas <script>, ni deberíamos asignar eventos tales como onclick, onmouseover en pleno HTML. Y, por supuesto, ni un enlace más del tipo "javascript: hazAlgo();"

Toda la ayuda necesaria la encontraréis en la red, aquí van algunos enlaces:

• Behavioral Separation (Separación por comportamientos)
  
• Event handlers

Para finalizar quería recalcar dos prácticas (en realidad es una sola dividida en dos) que suelo usar en mis proyectos para hacer todo esto más sencillo. Cuando necesitamos pasar variables que vienen desde el lado del servidor para que ejecuten algún script nos encontramos con que en un fichero .js no podemos escribir por ejemplo PHP. La forma de lograr pasar esas variables a nuestro fichero es muy sencilla, la muestro en un ejemplo:

Archivo "variables.js.php"

Código :

<?php 
    header("content-type: application/x-javascript");
    // Paso de variables PHP a Javascript
    echo 'var lang="' . $lang . '";';
    echo 'var menu="' . $menu . '";';
    echo 'var opcion="' . $opcion . '";';
    echo 'var cabecera="' . $cabecera . '";';
    echo 'var claim="' . $claim . '";';
?>

Cómo incluirlo en el HTML:

Código :

<script type="text/javascript" src="../code/variables.js.php"></script>

Por supuesto podemos pasar las variables por GET:
Y listos para usar esas variables en nuestros scripts.

En un proyecto me encontré con el problema de tener que reemplazar algunos encabezados HTML por imágenes con textos, cosa muy habitual por diseñadores odiosos . De manera que separé esas pocas imágenes en carpetas por cada idioma. La ruta quedaba como:

Para no tener que usar un selector, id o clase para cada titulo por cada idioma, hice lo siguiente:

Código :

<?php
    header("content-type: text/css");
    // backgrounds CSS
    echo
        'h2#info_corp {'.
        'background: #989898 url(../' . $lang . '/img/home_info_corp.png) no-repeat left top;'.
    '}'.

Como veis con la variable $lang simplemente cambio la carpeta donde está la imagen coincidiendo con el idioma. Así los encabezados serían los adecuados.

 

Tweet