Introducción al desarrollo web para principiantes

Última actualización:
Este artículo se encuentra en estado de maduración

El desarrollo web es una rama de la programación que lo que busca es la creación y el mantenimiento de las páginas web.

En el pasado las páginas web eran muy sencilla, pero con el avance de la tecnología se ha conseguido que en una página web se puede hacer de todo.

En la actualidad el desarrollo web es una de las partes más populares de la programación, y también una de las más demandadas.

Partes del desarrollo web

A grandes rasgos el desarrollo web se divide en dos partes: Frontend y Backend .

El frontend es la parte encargada de crear los elementos visuales de las páginas webs. Básicamente el frontend se compone de todos los elementos necesarios para que la web se vea correctamente en el navegador del usuario.

El backend sin embargo es la parte del servidor. Se encarga de guardar los elementos necesarios en base de datos y de proveer al frontend de todo lo necesario.

Al principio de empezar en el desarrollo web siempre se tiene la duda de qué partes de la lógica van en el frontend y qué partes van en el backend, es normal.

La respuesta a esta duda suele depender del caso, pero lo recomendable es que el frontend tenga la parte mínima para representar la web, el resto de cosas como cáculos, relaciones entre datos, persistencia, etc, es mejor que estén en la parte del backend. #343434 Pongamos un ejemplo para que el flujo entre frontend se entienda mejor:

Imagina que tienes una web que pinta una tabla con usuarios de la web. El usuario entra en la web y recibe en su navegador el frontend de la web. El navegador interpreta el frontend y pinta la web. Una vez la web cargada el código del frontend pide al backend la lista de usuarios. El backend coge los usuarios que estén guardados en la base de datos del servidor y envía la respuesta, por último el frontend pinta por fin la tabla con los usuarios.

En el ejemplo anterior el backend envía solo la lista de usuarios pero obviamente el backend puede enviar el frontend todo tipo de información que el frontend necesite.

Hoy en día se suelen hacer así las webs, con el backend enviando solo la información necesaria, pero también existen webs en las que el backend envía al frontend una página web ya cargada en backend, para que el navegador ya la tenga lista y no tenga que ejecutar mucho código frontend.

Páginas web estáticas

Una web no tiene por qué tener frontend y backend, tan solo la parte frontend es la necesaria. A las webs que solo tienen frontend se las conoce como webs estáticas.

Una web estática tiene la particularidad que siempre muestra las páginas de la misma forma para todos los usuarios. Piensa por ejemplo en una página web personal, puede ser perfectamente estática porque todos los usuarios que entren en la web la van a ver igual.

Ahora piensa en una web tipo red social, ya no puede ser estática porque requiere guardar usuarios en base de datos y cada usuario ve cosas distintas en la web dependiendo de su usuario (su timeline).

Lo malo de las webs estáticas es que no pueden tener base de datos. todos los datos necesarios para representar la web tiene que estar en los propios ficheros HTML, CSS y Javascript que forma la web.

Lenguajes para el frontend

Tradicionalmente para el frontend solo existen 3 lenguajes: HTML , CSS y Javascript.

HTML sirve para estructurar los elementos de la web. En el HTMl es donde se incluyen los textos, los datos, y cualquier elemento necesario para pintar la web. El HTML es un lenguaje de etiquetas, que indica de forma semántica el contenido de la web.

Por ejemplo en HTML pones botones, títulos y subtítulos, párrafos, tablas y ese tipo de cosas.

CSS es para dar estilos a la web. Aunque dentro de HTML se pueden incluir estilos, lo recomendable es tener un fichero .c#343434ss con los estilos de la web. Con este lenguaje es con el que haces que la web se vea bonita por así decirlo.

Desde CSS se seleccionan los elementos que has creado en el HTML para darles estilos. Estilos como por ejemplo: ancho, alto, márgenes, bordes, sombras, colores, animaciones, posicionamiento, etc.

Por último está Javascript que sirve para hacer que la web tenga cierta interacción con el usuario. Con Javascript puedes también seleccionar elementos del HTML para modificarlos, crear elementos HTML nuevos, etc.

Por ejemplo con Javascript se puede hacer que al pulsar un botón se oculten elementos de la página, o que al abrir la página web se haga una llamada al back y con lo que devuelva el back se pinte en el HTML una tabla con el resultado.

He dicho al empezar la sección “tradicionalmente” porque con el paso de tiempo han surgido alternativas de todo tipo que facilitan la tarea al programador.

Aunque existen otros lenguajes, tienes que tener muy claro que el navegador web (Chrome, Firefox, Edge, etc) solo entiende código HTML, CSS y Javascript, por lo que los otros lenguajes tienen que tener procesos para transformar el código que escribas a uno de estos 3 lenguajes.

Por ejemplo, como en Javascript es algo tedioso de programar el crear y modificar elementos HTML han surgido lenguajes como VueJS o Angular que cuando se compilan el resultado es código Javascript que puede entender el navegador.

Mi recomendación antes de empezar a aprender uno de estos framewors es que aprendas a usar HTML , CSS y Javascript. Estos lenguajes son como el sumar y restar de la escuela (no te enseñan a usar la calculadora de primeras), es muy importante conocerlos muy bien antes de pasar a cosas más complejas. Además recomiendo este orden, primero HTML, luego CSS y luego Javascript.

Lo siguiente que te recomiendo es que empieces a crear tu propip Entorno de desarrollo para frontend, es decir, el lugar en el que escribirás el código de tus páginas web.

Lenguajes para el backend

Para el backend existen muchas más opciones porque no necesitas que el código lo entienda un navegador web, simplemente necesitas que se pueda ejecutar en un servidor.

Lenguajes de backend hay muchos: Python, Java, .NET, golang, NodeJS, etc.

Si estás empezando en este sector te recomiendo Python para aprender, es más sencillo que aprender que el resto.

Si aparte también te quieres dedicar al mundo del frontend entonces escoge NodeJS ya que básicamente tiene la misma sintaxis que Javascript. Si aprendes Javascript para el frontend, con un par de cosas que cambian también puedes hacer backend.

Para el backend normalmente también necesitas bases de datos, las más usadas son MySQL y MongoDB. SQLite y Postgress son también buenas alternativas.