Diseño web, programación web y desarrollo web ¿son lo mismo?

La mayoría de las personas se refieren al diseño web a la hora de hablar de la creación de una página web, sin embargo, el diseño web se limita a eso, al diseño de la página web, como mucho y según lo estrictos que seamos en los términos, estaríamos hablando del diseño y la maquetación web, es decir, del aspecto visual de la página o la aplicación web en cuestión, sin embargo, especialmente si estamos hablando de una página web creada a medida, sin CMS, estamos hablando de desarrollo web, que incluye:

Diseño web.

Maquetación web responsive.

Programación front end, la parte visible de la web.

Programación back end, el panel de control desde el cual el administrador web gestiona los contenidos y otras funciones de la página web.

Desarrollo de la base de datos.

Lo que vemos en una página web, es el diseño web, el que este diseño no sea meramente estático, lo da la maquetación web y es por eso que hablamos aquí en un sentido estricto, de maquetación web responsive y no de diseño web responsive, un diseño web sin plantillas, comienza con Photoshop y /o Illustrator, y este es estático, como lo es por ejemplo, un logotipo, es decir, es más un diseño gráfico que algo aplicado a una web, pero como se realiza pensando en una web o una APP, sí que estamos ante un diseño web.

La maquetación web suele realizarse con HTML5 y CSS3 principalmente, y según las necesidades, también con Javascript. Como podréis ver, en nuestra página web cuando hablamos de diseño web, estamos hablando de maquetación web, pero por entendernos con nuestros potenciales clientes, lo explicamos de esta manera, ya que rara es la persona que solicita una maquetación web a secas. Por eso,  y porque diseño web posiciona mucho mejor que maquetación web, ya que lógicamente si los clientes buscan por diseño web cuando se refieren a diseño y maquetación y en la mayoría de ocasiones de hecho, se están refiriendo al desarrollo integral de una aplicación web, hemos optado por adaptarnos a su lenguaje, al fin y al cabo, lo importante es entenderse, luego ya es trabajo nuestro el explicarle los pasos que vamos a llevar a la hora de crear la página web.

El HTML es un lenguaje de etiquetas donde se marcan los espacios en los que va a ir el contenido, pero no es un lenguaje de programación. No se pueden desarrollar funciones aritméticas, no controla ninguna acción del usuario, no tienen en cuenta variables, en HTML solo se describe la estructura básica de una página web y se pueden incluir enlaces, links a otras páginas o documentos.

La maquetación se completa con CSS, que es poner “en bonito” el contenido de la web y crear el estilo de la página web, básicamente, para que no sea sosa y fea, para que nos entendamos. Los colores, las sangrías, las imágenes de fondo, tamaños, las fuentes, rotar elementos….todo eso lo podemos modificar con CSS. Y es especialmente útil a la hora de crear aplicaciones web responsives a través del uso de Media Queries.

Y dentro de la maquetación web también entra en juego Javascript, pero ya hemos soltado bastante rollo por hoy ;) en resumen, diremos que sirve también para ciertas animaciones en la web que se pueden realizar sin tener que pasar por el servidor, de manera que se realizan de forma rápida. Por ejemplo, el que un menú se pliegue y se despliegue o que nos salte un aviso de que falta un campo a rellenar en un formulario.

¿Y la programación web qué es? Aquí entra en juego el dotar de funciones a la web o a la aplicación. El lenguaje de programación más común es PHP, en Rana Negra empleamos la última versión de este lenguaje, PHP 7. Con la programación web se dota a los elementos gráficos de la web de funcionalidad.

Y con PHP se puede programar tanto el front end como el back end de una página web.

Con PHP procesamos la información, le añadimos funciones a la página web (cuando pase X, que pase Y, cuando el usuario haga esto, que se muestre lo otro…) Cuando necesitamos cualquier función dinámica, más allá de mostrar un contenido estático, necesitamos un lenguaje de programación como PHP.

Páginas como Wikipedia están creadas con PHP, entre otras muchísimas tecnologías.

Y para simplificar y dar mayor rapidez al trabajo con PHP, existen una serie de frameworks, como Symfony y CodeIgniter, que son dos de los que aquí empleamos. Estos frameworks ayudan con las tareas más repetitivas y comunes de un proyecto web, haciendo que haya menos código, por lo que el programador programa más rápido y la web se crea de forma más estable

Y para cualquier tipo de aplicación web dinámica, necesitamos consultar una base de datos, nosotros trabajamos con MySQL. Las bases de datos de una página web contienen una serie de datos organizados y relacionados entre sí, pudiendo realizarse gracias a ellas consultas complejas.

Y además, dependiendo del proyecto en concreto, hay otras tantas tecnologías, APIS, etc.

Si sumamos el diseño web, la maquetación web responsive, la programación del front end y del back end y el desarrollo de la base de datos, estamos ante un desarrollo web integral, que suma el diseño, la maquetación y la programación.

Y luego ya, para rizar el rizo, usamos palabros como full stack development, back end development, front end development, de los que en Rana Negra no somos muy amigos, porque queremos que los clientes nos entienda, no que piensen que somos modernísimos pero no sepan qué hacemos.

Pero bueno, un full stack development es un programador web o un desarrollador web, experto tanto en el front end como en el back end, pudiendo saber o no, de diseño web, pero sí de maquetación y programación web. Con esta descripción, todos nos hacemos una idea de lo que significa front end development y back end development ¿verdad?

¡Ah y en diseño y maquetación web  nos encontramos con UX (User Experience) y UI (User Interface)! Si queréis saber más sobre el tema, os dejamos nuestro artículo La Importancia De Contar Con Un Experto En Usabilidad Web (User Experience - Ux)