miércoles, 27 de enero de 2016

Los 3 tipos de archivos principales que componen un sitio web

Vamos a lo básico. Digamos que estás empezando a desarrollar páginas web. Como he mostrado en una entrada anterior, la programación web es algo complejo. Si quieres que tu página sea robusta y dinámica, por lo general usarás varios lenguajes de programación.

Pero no solo eso. Una página web, tranquilamente puede ser la mezcla de varios lenguajes. Empiezas con PHP, sigues con JavaScript, metes HTML, e insertas otro poco de PHP. El problema con todo eso, es que en efecto el código es difícil de leer y es difícil seguir su ejecución.

A veces, no puedes evitarlo, es necesario que uses este enfoque . ¿Pero no sería mejor tener todo separado y en orden? Bueno eso ayudaría un poco a la legibilidad....aunque en realidad no te ayudara a entender el orden de ejecución. Eso es un esquema mental que debes siempre tener bien definido en tu cabeza.

Es por eso que los sitios web, suelen estar construidos en base a varios archivos. Con el fin de tener todo ordenado y lo más limpio posible.

Por supuesto, podrías tenerlo todo simplemente en HTML, pero tu página no hará mucho entonces, y queremos un sitio interactivo y poderoso.

El día de hoy mencionaré los 3 tipos principales de archivos que se utilizan para construir un sitio web.

1.- Archivos PHP


Cierto, ya mencione que HTML es la base de la web. Pero yo en lo personal, no uso casi archivos HTML. ¿Por qué? Porque un archivo PHP puede hacer lo mismo que un archivo HTML , y más. Casi todo el código HTML, lo escribo dentro de mis archivos php, donde además escribo código PHP. Por supuesto, el navegador solo va a ver HTML. Ocasionalmente añado un poco de Javascript. Prácticamente todo un sitio puede estar construido únicamente con archivos PHP.

Muchas páginas están en este formato, es muy común en tu barra de direcciones, que te encuentres con archivos .php en lugar del .html que esperas (si no lo has visto observa más seguido tu barra de direcciones). Sobre todo si el sitio es complejo e interactivo.

Pero quizá quieres algo más. Muchos sitios tienen otro tipo de archivos.


2.- Archivos JS


Un archivo JS es un archivo que contiene código JavaScript. Cierto ya dijimos que el código JavaScript tranquilamente puede ir en un archivo PHP o HTML. ¿Por qué separarlo entonces?

Bueno para ordenar mejor nuestro sitio. Además nos permite separar la estructura de la página como tal de los scripts que corre en tiempo de ejecución. Imagina además que quieres un script que esté disponible para varias páginas, ya que contiene rutinas que se utilizan de manera habitual. Una solución elegante es crear varios archivos HTML o PHP que llamen a un archivo JS que contiene el código JavaScript.


3.- Archivos CSS


Ya hablamos de los lenguajes de programación. Pero un sitio web no es solo eso. Mucho de la esencia de las páginas web es la presentación y el diseño. Desde HTML se ha podido siempre dar formato a nuestra página: definir tamaños, estilos de letra, colores de fondo, alineación de los elementos, etc.

En un principio las páginas eran muy sencillas. Letras, imágenes, elementos de control como botones o checkbox, y poco más. Pero la web se fue haciendo más robusta. Sonidos, videos, animaciones, etc.

Y se esperaba poder ajustar cada vez más el formato y diseño de los elementos en pantalla. Pronto, todo ese formato provocó que los tag HTML fueran cada vez más grandes. 

Desde hace mucho tiempo se venía pensando en separar la estructura de la página web de su presentación. HTML debería definir qué elementos contiene la página, pero la presentación y formato de los mismos, debería poder escribirse aparte. Así en diciembre de 1996, la W3C recomienda la primera versión de CSS.

CSS (cascading style sheets)  no es más que un lenguaje que sirve para diseñar y definir el estilo de los diferentes elementos que componen una página web. Posición, tamaño, color, animaciones, en fin todo lo que puedas imaginar que tiene que ver con el diseño.

De esta manera en el archivo HTML escribes solo que elementos tiene tu página, y en el archivo CSS defines el formato de dichos elementos. Un archivo CSS no es más que un archivo de diseño. Todo lo que define tiene que ver con la presentación de los elementos, no contiene código que sea ejecutable. 

Bueno en principio, toma CSS como la definición de cómo son los objetos en tu página web. Por supuesto tus objetos responden a eventos, y CSS permite incluso definir como cambian tus objetos al ejecutarles cierta acción. Por ejemplo, digamos que quieres que una imagen cambie de tamaño al pasarle el cursor por encima. O que un texto cambie de color al dejar de hacer foco en el. Por supuesto todas las acciones que ejecuta CSS tienen que ver con el diseño de los elementos de tu página. Puedes entonces usar CSS incluso para hacer pequeñas animaciones.

Y por eso CSS es importante. Así que los mas habitual es que un buen sitio web tenga también sus archivos CSS.

Así que lo más normal, cuando exploras el directorio en que está guardado tu sitio web, es que encuentres este tipo de archivos.

Una nota adicional. Al acceder al directorio donde esta tu sitio web, veras muchos archivos. Generalmente, cada página web se guarda en un archivo ya sea HTML o PHP. Además están los archivos JS y CSS.  Pero recuerda: el archivo index es el primero en ejecutarse, generalmente. Desde ese archivo, puedes ir llamando tus CSS y JS y las demás páginas. 

No pierdas de vista eso, y seguro se te hará mas comprensible el funcionamiento del sitio.




No hay comentarios.:

Publicar un comentario