Esta introducción al desarrollo web, nos permitirá conocer los aspectos básicos de los que consta un desarrollo web, para poder afrontarlo con garantías y evitar posibles errores.
¿Qué es el desarrollo web?
El desarrollo web es una especialidad, dentro de la informática, que trata de crear y mantener espacios web en linea, para ofrecer algún tipo de servicio, ya sea información, proceso, u otro cualquiera, disponible en internet.
Para ello se tienen que reunir una serie de condiciones, como la programación, el diseño, gestión y mantenimiento de base de datos, diseño de una interfaz gráfica, alojamiento en servidores públicos, creación y mantenimiento de un dominio, implementación de seguridad, promoción del sitio mediante técnicas SEO( Search Engine Optimization) , marketing digital.
Herramientas de diseño web
Para un diseñador, las herramientas imprescindibles en su trabajo pueden ser:
- Programa de diseño. El más común y conocido es Photoshop, aunque hay otros como Gimp. Son usados para diseñar las imágenes, iconos y logotipos que se van a mostrar en la web.
- Editor. Dependiendo del tamaño del diseño, puede que esta parte esté incluida en un departamento aparte, pero en pequeñas empresas, es el propio diseñador, el que se encarga de maquetar la web, con HTML, CSS y javascript, para construir el esqueleto necesario. Aqui hay gran variedad de programas, y cada cual elige el de su preferencia. Actualmente tiene mucho auge Visual Studio Code, y otros similares pueden ser Sublime, Atom, WebStorm, Eclipse, Brackets, Komodo, Notepad++
- Navegador web. Esto es básico para probar el diseñó. Entre ellos, los más conocidos y usados son Chrome, Firefox, Opera, Safari, Bing, Brave, entre muchos más.
A partir de aqui, ya puede que cada diseñador, tenga algunas herramientas, que le faciliten su día a día.
Entre estas herramientas, podemos encontrar compiladores de scss, para construir plantillas de código css, con algo de funcionalidad y variables, para mantener el código CSS más facilmente. Una alternativa a esto, sería un librerías CSS, donde ya estén muchas de las funcionalidades y diseños comunes hechos, como por ejemplo, Bootstrap, Bulma, Materialize o Foundation. Estos están listos para usarse, una vez configurados. Otra opción sería usar un framework propio de FrontEnd, como React, Vue o Angular
Otro programa útil puede ser git, un sistema de control de versiones, para tener un histórico de cambios y poder recuperar o deshacer cambios y volver a versiones anteriores.
Lenguajes de programación web
Además del diseño visual, una web necesita una funcionalidad, que se le da mediante código que se ejecuta en el servidor, y esta se muestra en forma de resultados o información en la interfaz web. Algunos procesos comunes son por ejemplo, consultar una base de datos y mostrar información, enviar un email de contacto, hacer un login, insertar un producto en un carrito de la compra, realizar una compra, etc.
Los lenguajes de programación del lado del servidor más usados hoy dia pueden ser , JavaScript, PHP, Python, Ruby, Go, Rest entre otros.
Generalmente, esta parte de la programación tiene poco de visual, y es conocida como BackEnd.
En esta página, se puede ver un ejemplo con el framework para PHP Laravel, de como crear una web en pocos minutos : Como crear una web con Laravel
Frameworks y librerías web
Aqui se describer algunas características de los frameworks y librerías web más utilizados, como React, Angular, Vue.js, Bootstrap, jQuery, entre otros.
React
Fue desarrollado por Facebook, usado para construir interfaces de usuario en aplicaciones web.
Está basado en componentes reutilizables, que se pueden actualizar en tiempo real, sin necesidad de recargar toda la página.
Utilizan JSX, una extension de la sintaxis que permite combinar javascript y HTML en un mismo componente.
Vue
Se basa en la construcción de componentes para el desarrollo de la interfaz del usuario, y se pueden actualizar de manera eficiente en tiempo real.
Es quizá algo más fácil de aprender que otros.
Tiene funcionalidades como enrutamiento, gestión de estados o pruebas unitarias.
Angular
Creado por Google, se usa generalmente para construir aplicaciones SPA (Single Page Application) .
Se basa en el uso de componentes y servicios para conseguir construir una aplicación compleja.
Su base está construida sobre Typescript, lo que le da solidez y escalabilidad al código.
Ofrece una gran funcionalidad ya implementada en su base.
Bootstrap
Es un framework CSS, creado por twitter, que combina CSS y javascript para estilizar los elementos de una página HTML.
Esta librería permite intereacción con la página, mediante menús, botones, tabs, barras de progreso y otros elementos ya preconfigurados, listos para usar, y cumpliendo con una de las premisas obligatorias de hoy dia, que se a undiseño responsivo, es decir, que se adapte a los distintos tamaños de pantallas, como los móviles.
jQuery
Es una librería javascript que introduce una capa de abstracción entre la aplicación y el javascript, con el objetivo de facilitar la interacción con eventos, creación de animaciones y efectos, junto con el acceso a la capa DOM ( Document Object Model) para realizar tareas comunes.
Es mucho más breve su codificación, además de estandarizar los distintos modos que tiene cada navegador de tratar con la página, reduciendo así los errores, además de ganar compatibilidad.
Aunque es una librería que no tiene muchos adeptos, si que en su día ahorró muchas líneas de código, también consiguió compatibilidad, se convirtió casi en un estandar y aun está muy presente en desarrollos actuales.
Gestores de contenido
A veces, para la creación de una web, se puede optar por un gestor de contenido, que reune diseño y programación, todo en uno, y que nos ayuda en la tarea de publicar una web en el menor tiempo posible. Alguno de los más utilizados en el desarrollo web son WordPress, Drupal y Joomla.
En este caso, la primera tarea sería instalar el gestor de contenido en un hosting anteriormente contratado, normalmente casi todos tienen estos gestores de contenido disponibles para su instalación en pocos pasos, y una vez instalado, habría que configurarlo a nuestro gusto, eligiendo la plantilla visual que vayamos a usar. A partir de aqui, empezar a generar contenido, y con ayuda de las herramientas y plugins que estos gestores ofrecen, ir construyendo nuestra web. Hay muchos plugins, o componentes que nos ayudan con tareas comunes y nos facilitan su uso.
Herramientas de prueba y depuración
Existen varios tipos de prueba que nos ayudan a desarrollar y mantener nuestra aplicación correcta y en funcionamiento.
Hay varios niveles de pruebas, unitarias, de integracion, funcionales, de aceptación, entre otras.
Entre el software de pruebas que existe, los más comunes son :
- Selenium
- Appium
- JMetter
- TestComplete
- Telerik
Herramientas de análisis de rendimiento
Una vez que la web está funcionando, hay varias herramientas de análisis de rendimiento, que nos dicen cómo esta respondiendo nuestra aplicación web, como Google PageSpeed Insights, Pingdom, GTmetrix, entre otras.
Nos ayudan a detectar los puntos débiles de nuestra aplicación, y así poder corregirlos.
Herramientas de publicación y alojamiento web
Necesitamos un espacio en un servidor público donde alojar nuestra aplicación, para que sea accesible desde cualquier lugar, por medio de Internet. Esto hoy día es accesible desde cualquiera de los múltiples hostings que se ofrecen.
Una vez que contemos con un alojamiento web, existen diferentes formas de poner esa aplicación en el alojamiento. La más común y utilizada desde los inicios de Internet, es usar el protocolo FTP, para subir los archivos al servidor, y actualmente, todavía sigue estando vigente. Para ello, nos basta con un cliente de FTP, y subir todo el contenido e nuestra aplicación.
Otros hostings nos ofrecen la posibilidad de hacer esta misma subida con una interfaz visual dentro de un panel de control, donde tenemos distintas utilidades relacionadas con nuestro sitio web, siendo cPanel uno de los paneles más comunes.
También podríamos usar un software de control de versiones como git, para descargar la versión de nuestro código que está disponible para publicar, conectándonos remotamente a un servidor donde alojamos nuestro código. Las plataformas más comunes, como gitlab, github, attlasian o google cloud deploy, tiene automatismos que nos permiten realizar estas tareas, lo que se conoce como Integración continua.
Conclusión sobre el desarrollo web
Hasta aquí llegamos con esta introducción al desarrollo web, que hemos sentado las bases necesarias para construir una aplicación web, y ahora tendremos una idea más clara de como llevarla a cabo.
Bien es cierto que hacen falta bastantes elementos y de diferentes características, multidisciplinar, que a veces hay empresas en los que los realiza uno cada departamento, y en las pequeñas hay algunos de los llamados FullStack, que tienen que realizar todo el proceso, depende del tamaño de la empresa y del proyecto.