Entornos de Desarrollo Web

A la hora de plantear la ejecución de un proyecto web, son muchas las variables que deben considerarse y que pueden condicionar el método de desarrollo más adecuado. Es fundamental hacer un análisis y estudio previo de necesidades decidir desde el principio el camino correcto que permita un posible escalado si fuese necesario.

Por tanto, según la entidad y las necesidades del proyecto se podrían plantear diferentes escenarios y los procedimientos, las herramientas y las técnicas de desarrollo empleadas podrían ser distintas en función del tipo de sitio web que vaya a realizarse.

Dentro del módulo que nos ocupa, vamos a aprender los fundamentos básicos de la tecnología web (HTML y CSS principalmente), a partir de los cuales será posible profundizar en técnicas y lenguajes de programación que permitan el desarrollo de proyectos web más complejos. Con los fundamentos básicos de HTML y CSS vamos a poder generar y estructurar contenidos, además de aplicar diseño y formato a los mismos llegando a poder realizar la maquetación en la pantalla del dispositivo.

Podemos considerar HTML y CSS, como una primera fase de desarrollo relacionada con los aspectos gráficos y la maquetación. Más adelante vendría otra fase de desarrollo más compleja donde se abordarán las funcionalidades y comportamientos especiales que pueda requerir el proyecto y para lo que serían necesarios otros conocimientos más avanzados en tecnologías y lenguajes de programación tanto del lado cliente, como del lado servidor.

2. Entornos de desarrollo de web

En muchos proyectos web complejos, el desarrollo se realiza en varias fases. Hay una primera fase en la que se aborda todo lo relacionado con el diseño y la parte gráfica (HTML, CSS y JavaScript) y otra fase posterior para el desarrollo de la parte funcional donde entraría la programación específica (PHP, JavaScript lado del servidor u otros).

Vamos a dejar por el momento los ambientes de trabajo más complejos, que requerirían un conocimiento de base importante y que además tendrían una curva de aprendizaje más elevada y nos vamos a centrar en unos entornos de trabajo con los que podremos realizar desarrollos web muy profesionales y que sería posible hacerlos crecer posteriormente con funcionalidades y características más avanzadas.

Vamos a considerar dos escenarios de trabajo claramente diferenciados para el desarrollo de sitios web.

Por un lado están los entornos basados en editores de código, dentro de los cuales existen entornos más visuales y gráficos y otros donde básicamente todo el desarrollo se realiza escribiendo el código directamente.

Por otro lado tenemos los entornos basados en sistemas de gestión de contenidos (CMSs), donde el desarrollo con el código pasa a un segundo plano, siendo todo más visual, aunque también son muy importantes los conocimientos de código HTML y CSS para poder implementar el desarrollo. Veremos que existe gran variedad de gestores de contenidos.

Debemos tener claro que ambas técnicas conviven y que son complementarias. La opción de ejecutar un proyecto web de una u otra forma dependerá de la naturaleza propia de proyecto así como de otras circunstancias que puedan condicionar su desarrollo.

2.1 Entornos de desarrollo web con editores de código

Un editor de código es una aplicación diseñada para facilitar la creación y edición de documentos en HTML y otros lenguajes. El desarrollo de sitios web con “editores" es el método más utilizado por diseñadores web profesionales que desarrollan proyectos donde la parte gráfica, visual e interactiva tiene un peso importante.

Editores de código de texto enriquecido

Los editores de código de texto enriquecido son aplicaciones sencillas que permiten la introducción de texto o líneas de código que deberán ser guardadas para su posterior interpretación por el navegador.

Dentro de su simplicidad, incluyen coloreado de sintaxis y ayudas para la introducción de las etiquetas entre otras. Algunos ejemplos de este tipo de editores son Visual Studio Code, Sublime Text, Notepad++ o Bluefish y para trabajar online CodePen es un ejemplo, aunque hay otras muchas.

Editores visuales de código

Existen otro tipo de editores que además de permitir la opción de trabajar directamente con código ofrecen herramientas y paneles para construir páginas reduciendo la necesidad de teclear código. Además, en este tipo de aplicaciones se ofrece una vista en la que el código es interpretado y visualizado sin la necesidad de tener que hacerlo en el navegador.

A este tipo de editores se les asocia con el término WYSIWYG (What You See Is What You Get, que traducido al castellano quiere decir: "lo que tú ves es lo que obtienes"). En realidad, esto no es del todo cierto y siempre se recomienda probar las páginas en varios navegadores. Algunos ejemplos de este tipo de editores son Adobe Dreamweaver o Kompozer, una alternativa de software libre y gratuito.

2.2 Desarrollo con gestores de contenidos

Por el momento, en este apartado solo se trata de conocer básicamente el concepto de lo que es un gestor de contenidos y será en unidades posteriores cuando profundizaremos en ellos y realizaremos algún desarrollo web.

Los gestores de contenidos o CMSs (Content Management System) son aplicaciones de desarrollo web en las que habitualmente se trabaja “online" sobre un servidor, aunque también es posible trabajar con ellas de forma local. Para ello sería necesario configurar de forma local un servidor en el equipo.

Son plataformas o entornos de desarrollo en los que la creación y administración de las páginas web ser realiza mediante una interfaz gráfica bastante intuitiva que controla los diferentes recursos relacionados con el contenido del sitio. Se trata de una forma de generar contenidos web de una forma visual sin tener que trabajar apenas con código, aunque para conseguir un mayor control o personalización, muchos de ellos permiten la implementación de código de forma manual.

El sistema se basa en plantillas previamente diseñadas sobre las que se puede trabajar de manera independiente el contenido y el diseño de forma que es posible editar o añadir contenidos de forma simple y modificar en cualquier momento el diseño del sitio en general.

Un sistema de gestión de contenidos también permite que varias personas tengan permisos para publicar contenidos dentro del sitio en los que la publicación de los mismos puede estar controlada por un administrador con permisos de nivel superior que supervisa la publicación definitiva. Algunos de los gestores de contenidos más extendidos son Wordpress, Joomla, Weebly, Wix aunque  hay otros muchos.

2.3 Adobe Dreamweaver

De los muchos editores de código existentes en la actualidad, durante el curso utilizaremos principalmente Adobe Dreamweaver. Además de ser uno de los editores más extendidos, se trata de un editor muy potente y avanzado a la vez de sencillo y eficaz, el cual nos permitirá trabajar de forma intuitiva y visual, pero sin perder de vista la parte del código.

Adobe Dreamweaver, además de facilitarnos el desarrollo de páginas web, dispone de herramientas, paneles y otros elementos que facilita la configuración de un entorno de desarrollo óptimo para la administración y posterior mantenimiento de sitios web completos.

Entre las distintas versiones Adobe Dreamweaver puede haber cambios muy significativos en la interface y disposición de los paneles. Con un conocimiento sólido del funcionamiento de HTML y CSS no es complicada la adaptación entre versiones, aunque es cierto que será necesario un periodo de adaptación para pasar de una versión a otra. Hay algunos paneles básicos y funcionales que se mantienen en las distintas versiones, aunque existen algunos cambios significativos entre las mismas.

En Adobe Dreamweaver es posible configurar el espacio de trabajo según diferentes perfiles de usuario que trae predeterminados. Además, también es posible preparar el espacio de trabajo de forma personalizada y guardar esa configuración. (Ventana/Diseño del espacio de trabajo). Aunque existen diferencias según la versión utilizada, es importante conocer los elementos básicos que forman parte de la interface de la pantalla de trabajo principal.

• La barra de menús: Se encuentra en la parte superior de la pantalla y nos permite acceder a todas las opciones del programa a través de sus menús.

• La barra “Documento": Nos permite cambiar la vista del documento, dar un título a nuestra página web, mostrar el documento en un navegador y otras opciones que iremos viendo.

• Panel Insertar: Podremos colocar de forma directa los elementos más usados en el diseño de los objetos de una página web.

• La ventana de trabajo: Es el área principal de trabajo y aquí es donde se van a abrir nuestras páginas web y las editaremos.

• Barra de Estado: Situada debajo de la ventana de documento. Además del selector de etiquetas HTML, nos muestra las herramientas de visualización de diseño del documento y otras opciones que iremos viendo más adelante.

• Cuadro de Propiedades: Es la herramienta principal que nos permite configurar las opciones del objeto seleccionado. El contenido varía según el objeto y muestra en cada caso los atributos que pueden modificarse.

• Paneles laterales: Ocupan la parte derecha de la pantalla. Su uso es muy cómodo gracias a que se pueden minimizar, ocultar y visualizar fácilmente, dando acceso de forma directa a las distintas funciones posibles.

Desde el principio iremos poco a poco desarrollando un proyecto web que nos permitirá ir descubriendo y conociendo las funcionalidades más importantes para la creación y edición de las páginas del sitio.

3. Organización básica inicial de un sitio web

Cuando vamos a iniciar el desarrollo de un sitio web, siempre partiremos de una carpeta del sitio, donde se van a ir almacenando y organizando convenientemente todos los archivos implicados en dicho sitio. A esta carpeta se le denomina “carpeta raíz" del sitio y una vez creada, habrá que configurar la aplicación o entorno de desarrollo, indicando que será la carpeta raíz del sitio.

Es muy importante mantener perfectamente organizado todos los sitios web en los que estemos trabajando. Para ello, crearemos una carpeta donde se van a ir guardando todos los sitios web y que llamaremos “Proyectos web". Dentro de esta carpeta, crearemos una carpeta independiente para cada uno de los sitios web en los que vayamos a trabajar.

Por el momento, esta será la primera acción de administración de un sitio web y se realizará de manera distinta, según sea la aplicación de desarrollo en la que vayamos a trabajar. Por ahora será suficiente indicar la carpeta raíz de cada sitio, sin configurar más datos.

Desde Adobe Dreamweaver se accede mediante la “Administración de sitios" del menú “Sitio". Será necesario mantener correctamente administrados y configurados todos los sitios en los que estemos trabajando. Veremos que dentro del administrador de sitios hay muchas más opciones que poco a poco iremos viendo y aprendiendo. Debemos trabajar siempre con sitios administrados.

Es importante tener en cuenta que si se cambia la ubicación de la carpeta raíz de un sitio en el ordenador, se perderá el vínculo del Administrador de Sitios y será necesario volver a configurar las propiedades del sitio.

3.1 El Panel de Archivos del Sitio

Desde el panel de “archivos del sitio" podemos ver todos los sitios que tengamos administrados desde la aplicación. En Adobe Dreamweaver, se mostrarán como una “carpeta verde" y podemos acceder a todos los archivos y carpetas que contenga cada uno de ellos.

Este panel es muy útil e importante y es recomendable tenerlo visible en todo momento ya que es utilizado en labores tan comunes como abrir archivos, mover o copiar archivos de una carpeta a otra, crear archivos o carpetas, cambiar nombres y otras operaciones.

3.2 La denominación de los archivos del sitio

La denominación de un archivo se compone de un nombre + extensión. Al nombrar un archivo siempre debemos prestar atención a las dos partes.

• El nombre: Siempre deben cumplirse las siguientes pautas:

• El nombre del archivo no debe de ser muy largo.

• No usar espacios en blanco. Si puede usarse un guion bajo o normal en sustitución al espacio en blanco. (“hola_mundo.html")(“hola-mundo.html“).

• Nunca deben utilizarse letras mayúsculas.

• No utilizar la letra “ñ" ni otros signos raros (!,%,&,*).

• No utilizar puntos (.) ni acentos.

Nombres como “logroño.htm", “Rioja.htm", o “mi página.html" podrían dar problemas una vez subidos al servidor.

• La extensión: Es necesario indicar la extensión para completar la denominación de un archivo. En los archivos HTML se recomienda el uso de la extensión “.html" aunque también sería válida la extensión “.htm".

3.3 Creación de documentos HTML

Desde Adobe Dreamweaver, vamos a “Archivo/Nuevo" y se abrirá el cuadro de dialogo de Nuevo Documento. Desde aquí se pueden crear muchos tipos de documentos predefinidos, pero de momento sólo trabajaremos con una “Página en blanco". También pueden crearse nuevos archivos desde el panel archivos (clic derecho sobre la carpeta raíz).

Se creará un nuevo documento en blanco sin nombre, ni título. Lo primero que debemos hacer es añadir un título y guardar el documento en el lugar adecuado, dándole un nombre correcto que nos ayude a identificarlo.

Según la versión de Dreamweaver que se utilice, se recomienda la revisión del etiquetado básico del documento y la inclusión de algunos de los metadatos que habíamos visto en la unidad anterior.