jueves, 28 de enero de 2016

Incluir archivos JavaScript y CSS ( Cascading Style Sheets) en mi sitio web

HTML es la base de la web. Prácticamente para desarrollar un sitio web básico, solo necesitas HTML.

Pero si quieres hacer un sitio más robusto y dinámico, será bueno que vayas incluyendo otros elementos. Un buen primer paso es incluir código PHP. Además sería bueno también incluir código JavaScript si quieres que sea más interactivo.

Y finalmente para el diseño, es bueno incluir también archivos CSS. Por supuesto, casi todas las funciones de CSS las puedes ejecutar desde el mismo HTML.

Pero imagina que tienes tu página. Empiezas con lo básico, HTML. Y decides mezclarlo con algo de PHP. Después decides que es bueno también ejecutar algunos scripts mientras tu página esta cargada en el navegador para que el usuario interactúe. Le metes JavaScript. Y entonces piensas en el diseño, quieres que tu página sea bonita y llamativa. Le metes diseño en el HMTL modificando los elementos que tienes.

HTML de por sí, no es el lenguaje más legible y limpio del mundo. Y ahora piensa en todo lo que has hecho, has mezclado 3 lenguajes diferentes y varios elementos de diseño en tu página. Imagina ahora que un programador quiere modificar tu página, o tu mismo después de varios meses. ¿Se va volviendo una pesadilla, no?

Queremos siempre usar buenas prácticas, y que el código sea lo más legible posible. Una buena estrategia, es separar las partes que no son esenciales, y que pueden tenerse fuera del archivo que forma nuestra página web. Es por eso que en un sitio normal, existen diversas clases de archivos, como explique en otro post.

Entonces la estrategia básica debe ser esta: poner PHP y HTML en el archivo que construirá nuestra página web, poner los elementos de diseño en un archivo CSS, y poner el código JavaScript en un archivo JS.

No tiene caso separar PHP y HTML, porque como ya he explicado en otras entradas, si al navegador le entregas PHP no lo entiende. Así que no puedo entregarle PHP. Será mejor dejarlo en el archivo principal, para que mi servidor lo utilice al momento que genera la página en HTML.

Por supuesto, a veces tengo pequeños archivos solo con código PHP que se ejecutan en el servidor, para usarlos como funciones, en especial si uso AJAX.

Una ventaja de separar JavaScript en archivos JS y el diseño en archivos CSS, es que puedo tener un solo archivo JS para todo mi sitio web, y un solo archivo CSS. Generalmente un sitio se compone de varias páginas contenidas en archivos .html o .php; pero casi siempre tengo solo un archivo JS y CSS, para darle mayor legibilidad.

Todas mis páginas acudirán al mismo archivo JS o CSS en caso de necesitarlo.

¿Cómo incluyo o cómo llamo estos archivos desde mi HTML?

Simple, con estas 2 líneas:

<link rel='stylesheet' id='style-css' href='includes/css/ejemplo.css' type='text/css' media='all'

<script type='text/javascript' src='includes/js/ejemplo.js'></script>

¿Sencillo, no?

En la primera línea, incluyo mi CSS. Es importante, indicar en la propiedad href, el path dentro mi directorio del sitio, donde esta mi archivo.

En la segunda línea incluyo mi archivo JS. En la propiedad src, indico así mismo el path donde se encuentra.

Es muy útil siempre tener todo bien organizado, y así construir un sitio web mas limpio.

Para mas ventajas e información acerca de incluir archivos JS y CSS, estos 2 enlaces:
Incluir archivos JavaScript
Incluir archivos JavaScript y CSS



No hay comentarios.:

Publicar un comentario