Creación páginas Web I
Introducción página Web
Existen actualmente millones de sitios, libros e información dedicados a la creación de páginas Web. Sin embargo, y a mi parecer, en muchos sitios no existe una introducción donde se explique a alguien que no sepa nada de nada las opciones que tiene para crear un página Web. En muchos sitios se habla de programar en HTML, XHTML se habla de CSS, de programar en PHP pero no se orienta al usuario ni se le explica cómo se hacen las páginas Web actuales. Intentaré explicar esas lagunas que muchos usuarios que empiezan con su página Web no conocen.
Lenguaje HTML(1-4), XHTML, HTML5
Hace tiempo, para crear páginas Web solamente era necesario conocer un lenguaje (voy a hablar de código html no de lenguaje HTML ya que el lenguaje HTML es el que se utiliza finalmente): HTML (HyperText Markup Language). Como su nombre indica, es un lenguaje de marcación que enseguida se entenderá al ver un ejemplo. Imagina que estás escribiendo una carta en un editor de texto y cuando escribes la palabra dinero quieres darle un énfasis y la escribes en negrita. Realmente tú verás lo siguiente: dinero. Sin embargo, en una página Web el código HTML podría ser el siguiente:
<strong>dinero</strong>
Como puedes observar la palabra dinero está rodeada por dos etiquetas strong. Tu navegador reconoce esas etiquetas y seguramente ponga la palabra en negrita. Te lo muestro en mi Web fíjate: dinero
Existen etiquetas de inicio como <strong> que se colocan al principio y etiquetas de fin como </strong> que simplemente verás que incorpora una barra inclinada. El conjunto de las dos etiquetas de inicio y fin más el contenido que hay dentro se denomina elemento. Esto es muy importante y te debe quedar claro.
Toda página Web comienza por la etiqueta <html> y termina por </html>. Estos archivos se guardan normalmente también con extensión .html. Dentro de estas etiquetas está todo el contenido de la página y existen dos elementos (recuerda la definición de antes) muy importantes: el elemento head y body... pero no quiero extenderme más, quiero dejar la explicación aquí.
Cuando se utilizaba solamente código html para realizar páginas Web, el diseño de los elementos se realizaba directamente en código html. Por ejemplo, imagina que hablas en tu página Web sobre karmany y escribes un artículo titulado karmany. Ese título podría ir entre dos etiquetas h1 tal que así:
<h1>karmany</h1>
Si tú quisieras alinear ese h1 en el centro, hace tiempo se hacía del siguiente modo:
<h1 align="center">karmany</h1>
Sin embargo, con el tiempo el lenguaje HTML dio paso a XHTML (Extensible Hypertext Markup Language - ten en mente como una actualización de HTML) y posteriormente a HTML5 que veremos con más detalle después y el diseño se evitó que se hiciera directamente desde código html para dar paso a las denominadas Hojas de estilo en cascaca o su abreviatura: CSS
Hojas de estilo en cascada
Como acabo de decir, HTML utilizaba elementos y atributos para definir cómo se debía visualizar en pantalla la página Web: por ejemplo como acabo de mostrar la alineación o el color de fondo, el color de letra etc...
La W3C (organismo que tiene por fin establecer normas para el desarrollo y uso de tecnologías Web) decidió que HTML y XHTML no tendrían que contener directamente información de cómo debe ser visualizado un elemento sino que esa información debería estar especificada en una hoja de estilo. Una hoja de estilo en cascada (css) es un lenguaje para controlar la presentación de este código y actualmente una página Web se hace así: código XHTML o HTML o HTML 5, hoja de estilo CSS. Las hojas de estilo se pueden incluir dentro de un archivo html o lo más normal es que aparezcan como un archivo con extensión css. Esto es lo más básico.
Página Web estática
Realizar una página Web escribiendo directamente en XHTML(HTML-HTML5) y CSS se puede hacer y en algunos sitios se sigue haciendo. Si creas tu página de este modo te encontrarás con que cada página de tu sitio Web será un archivo con extensión .html. Si quieres crear un nuevo artículo por ejemplo como este que estoy escribiendo seguramente tendrás que tener un modelo (un esqueleto) de .html e ir rellenándolo y así siempre. Existen programas muy especializados que hacen que esta tarea de programar en XHTML sea muy sencilla. Hablaré de ellos, pero casi seguramente el programa de pago más utilizado ha sido y es Adobe Dreamweaver: http://www.adobe.com/es/products/dreamweaver.html
Estas páginas que se realizan de esta forma: directamente creando el archivo .html y usando css se denominan páginas Web estáticas. Son páginas que creo que son muy fáciles de hacer donde el contenido no varía practicamente nada y no tienen ningún componente adicional. Un ejemplo de página Web puede ser de venta de un producto donde la página apenas se modifica y al autor se le contacta a través de email. Mi primera página fue así.
Página Web dinámica
Esa forma de hacer una Web podía valer para un sitio pequeño, pero para un sitio Web que contenga cientos de páginas se necesita "algo" para administrar el contenido. Imagina que tu Web contiene 200 páginas... tendrías que crear ¡¡¡200 ficheros .html!!! Para solucionar este inconveniente se crearon los Sistemas de Gestión de Contenidos (CMS-Content Management System).
Imagina solamente que en tu Web de 200 páginas tienes que suprimir un menú... ¡UFF! Tendrías que modificar ¡200 archivos!. Esto es una pérdida de tiempo y trabajo. Esto desde un CMS se hace fácilmente y en pocos segundos. Un CMS trabaja normalmente (es un tutorial básico, centrado en Apache) con PHP y MySQL (Para entender la explicación me quiero centrar en php, en los siguientes artículos veremos cómo programar en distintos servidores): PHP para que lo entiendas es programación que se ejecuta en el servidor y "modifica" ese código php en html para que tu navegador lo entienda y con MySQL trabajamos con bases de datos. El contenido(texto, imágenes etc..) se guarda en la base de datos al contrario que en una web estática. Uniendo PHP y MySQL se pueden realizar Web completas y complejas, por ejemplo una Web de venta de productos. Para que tú no tengas que programar en PHP, ni con MySQL ni siquiera en HTML existen estos CMS en los que por ejemplo publicar un nuevo artículo es cuestión de segundos.
Content Managenment System - CMS
En la actualidad existen muchos Sistemas de Gestión de Contenidos. Los debes instalar en un servidor compatible y a partir de ese momento ya podrás trabajar con ellos. Cada CMS es diferente y no se puede generalizar. Una vez que empieces a utilizar un determinado CMS seguramente hasta te olvides de la existencia del código html. No llegues a este punto ya que el resultado final que tu navegador muestra es código HTML por muy CMS que sea y verás que es importante para la validación W3C e incluso para posicionar tu página Web en buscadores.
Despedida
Aparte de estas formas comentadas, en muchos alojamientos Web existen herramientas propias que te permiten crear rápidamente páginas Web.
Espero que hayas podido entender cómo se puede realizar una página web: directamente en html o usando php, mysql o utilizando un CMS. Debes distinguir una Web dinámica de una estática y para que vayas pensando en CMS seguramente los 3 más utilizados sean:
Drupal: http://drupal.org/
WordPress: http://wordpress.org/
Joomla!: http://www.joomla.org/
Seguiremos hablando sobre esto. No quiero centrarme en explicar todos los tags del código XHTML-HTML porque necesitaría 1000 tutoriales y en Internet ya existe muchísima información sobre esto, en siguientes artículos quiero explicar cómo crear una Web estática, una Web dinámica sencilla y conceptos que muchísimas Web presuponen. Hablaré de HTML5 y por qué XHTML no convence. Veremos por qué hay que utilizar php y/o MySql, veremos qué es la validación W3C, los distintos servidores, qué es un servidor Apache, veremos por encima ASP (programación del lado servidor de Microsoft) y muchas cosas más...
