Desarrollo de un sistema web: elementos, front-end y backend.

Hola comunidad, hoy voy a hacer una breve descripción de mi persona, hablarles de lo me gusta, hago y a lo que me dedico desde hace un tiempo.

Recién cumplí con todos los requisitos por la universidad para obtener el titulo en Ingeniería de Sistemas. Hasta ahora me he dedicado al desarrollo de sistemas (páginas web en su mayoría), algunos con fines académicos, otros personales y en menor medida como freelancer.

¿Qué es un sistema?

Un sistema es un conjunto de piezas o elementos, en donde la interacción de los mismos permiten dar respuestas a necesidades presentes en las empresas, organizaciones y en la población.

Los sistemas son ideales para:

La automatización de los procesos.

Optimizacion del funcionamiento organizacional.

Mejoramiento en cuanto el acceso a la información.

Por lo anteriormente mencionado he decidido hablarles del proyecto en el que me toco trabajar para las prácticas profesionales de la universidad que realice en una empresa y puedan entender como es el desarrollo de un sistema.

En la actualidad aún existen muchas empresas donde el manejo de la información administrativa se realiza a través de aplicaciones ofimáticas, en este caso de la empresa era Excel, lo cual resultaba una desventaja.
La información era totalmente dependiente del computador donde se almacenaban los datos, de manera que la empresa se exponía al riesgo de pérdida total de la información por alguna avería en el disco duro, archivos que pudieran volverse corruptos por la entrada de algún virus al sistema operativo del computador, había un uso excesivo de la memoria por la cantidad de archivos que se generaban a diario y en ocasiones se presentaban conflictos en la transmisión de la información por tratar de compartir los archivos que se hacían en Windows (software privativo) a computadores con Debian, Ubuntu (software libre).

La solución:

En el departamento de TICs (tecnologías de la información y comunicación), el área a donde fui asignado como pasante consideramos que era necesario la creación de un sistema web donde los trabajadores de la gerencia de administración pudieran tener sincronizacion a la hora de trabajar, pero lo más importante es que:

El acceso al sistema de información podría hacerse desde cualquier computadora de la red de la empresa sin importar el sistema operativo.

Seguridad y respaldo de la información al estar almacenada en el sistema y no en el computador.

Los elementos del sistema:

En la creación de un sistema web se trabaja con los elementos como un engranaje, en una página/aplicación web cohabitan lo que es el front-end y el back-end.

El front-end y el back-end lo que hacen es dividir la capa visual de un sistema y la capa del acceso de datos.

Frontend:

Es la capa visual que permite a los usuarios/clientes la interacción con el sistema, por lo tanto es la capa que define las experiencias de los usuarios en el sistema y la única a la que tienen acceso.

El frontend son todas esas tecnologías que viven en el navegador y con las cuales se crea el diseño del sistema. Cuando hablamos del diseño de un sistema se trata de la creación de las interfaces, las propiedades que pretendemos que tenga y la interacción de las mismas.

Las tecnologías front-end utilizadas en el sistema fueron: HTML + CSS + JAVASCRIPT + MATERIALIZE.

¿Cual es la función de cada una de estas tecnologías en el sistema y en el front-end?

HTML5:

No es un lenguaje de programación como muchos creen, es más bien un lenguaje de marcado de etiquetas de hipertexto. Es utilizado con la finalidad de ordenar, definir y distribuir el contenido de una interfaz.

Con HTML podemos indicar cuales son las divisiones, secciones de nuestra página y lo que incluyen, ya sea un párrafo, una imagen o un formulario.

Algunas de las sentencias HTML de mi sistema, como se ve en la imágen HTML se divide en dos partes, el head y el body.
El head donde se indica el nombre de la interfaz, este puedes verlo en la pestaña del explorador, donde se invoca a CSS, archivos javascript y todas las librerías necesarias para el funcionamiento de la página.
El body para el resto del contenido, es el cuerpo de la página, en el body indicamos los párrafos, imágenes y formularios de nuestro sistema.
PD: En esta imagen solo se aprecian las sentencias principales del HTML de mi sistema, las otras están repartidas en otros documentos HTML. Esta practica se hace con la intención hacer un código reutilizable que evite la generación de código redudante.

CSS:

Conocido como la hoja de estilos en cascadas es utilizado con la intención de darle estética y estilos al contenido visual de las páginas.

Por ejemplo: definir el color de fondo de la página, la tipografía a usar, el tamaño de las letras, formas geométricas y una infinidad de funciones.

Una pequeña parte de los estilos propios del sistema. En la imagen están referenciados los textos de tipos h2 y h4 más la paginación del sistema.

JavaScript:

Es un lenguaje de programación que permite la realización de procesos de cálculos matemáticos y lógicos.

Tiene una particularidad que lo diferencia de los otros lenguajes de programación web y es que funciona del lado del cliente. Por eso es considerado front-end.

Además de procesar datos de operaciones resulta necesario para generar interactividad en las páginas (crear efectos, mostrar/ocultar paneles al hacer click, eventos, acciones), fue esta la razón por la cual esta presente en el sistema desarrollado.

Materialize:

Es un framework de CSS para el diseño, del cual aproveche varias de sus propiedades para agilizar el proceso del diseño como el posicionamiento de las rejillas y las propiedades responsive que permiten que nuestros sistemas sean visibles en las distintas resoluciones de las pantallas de los dispositivos (tablets, laptops, ordenadores de escritorio).

Pero ¿que es un framework?

Un framework es un esquema (un esqueleto, un patrón) para el desarrollo y/o la implementación de una aplicación.

Fuente:

La traducción de framework al español es "entorno de trabajo" y es así, un framework es una herramienta para los programadores los cuales vienen con funciones de trabajo preestablecidas que son de utilidad para el desarrollo del sistema.

Los frameworks pueden ser de frontend o de backend, entre los beneficios que trae usar frameworks es el ahorro de tiempo no teniendo que "reinventar la rueda escribiendo código innecesario", en la actualidad están bien documentados, además suelen ser seguros y son menos limitativos de lo que uno cree.

Backend:

Son las tecnologías que hacen vida en la capa de acceso de datos, están del lado del servidor por lo tanto los usuarios no tienen acceso a ella.

Un servidor web es un ordenador donde se alojan aplicaciones/páginas en un espacio de memoria con la finalidad de dar respuestas a las peticiones de tipo HTTP que hacen los usuarios. Los servidores son los que dan vida al internet.
Las tecnologías back-end con las que se desarrollan sistemas son:

Lenguajes de programación web interpretados de lado del servidor.

Frameworks (marcos de trabajo) elaborados en base a un lenguaje de programación.

Bases de datos.

Servidores HTTP.

+ (1).png

Para el desarrollo del backend del sistema se utilizaron las herramientas de Laravel (framework de PHP), phpmyadmin(administrador de base de datos MySQL) y Xampp.

Laravel:

Es un framework de desarrollo PHP de tipo MVC (modelo, vista, controlador).

¿Que es MVC?

Es un patrón de desarrollo de software usado para la separación de la lógica un sistema.

Fuente

Creación de uno de los modelos del sistema en Laravel.

Un extracto de la sintaxis de un controlador del sistema.

Obtención de los datos solicitados en la vista

Entre las causas por las que Laravel fue escogido para el desarrollo del sistema es que es un framework potente en cuanto a seguridad por incluir funciones que no tienen otros frameworks como los Middleware y que además existe una comunidad amplia de desarrolladores con este framework lo que lo hace que la documentación y la resolución de dudas sea mayor a frameworks como Codeigniter o Symphony.

Fuente:

Laravel es el framework con más proyectos (código) compartido en la plataforma de desarrollo colaborativo GitHub.

Phpmyadmin:

Como todo gran sistema de información se necesita una base de datos donde se pueda almacenar la información y hacer posterior uso de ella. Phpmyadmin es una herramienta que permite el manejo del sistema gestor de base de datos MySQL.

Haciendo uso de MySQL se creo la base de datos del sistema y a pesar de que también se pueden crear las tablas del sistema decidí hacer uso de la opción de Laravel conocida como "migraciones".

Las tablas de una base de datos son las estructuras donde se guardan la información y los registros de los objetos.

Haciendo una pequeña analogía de una base de datos donde necesitamos almacenar información sobre una biblioteca, biblioteca es el nombre de la base de datos, las tablas serian libros, revistas científicas, tesis y material audiovisual mientras que los campos de la tabla libros son todas las características que posee: textura, nombre, autor, tipo, entre otras...

Vista de la base de datos desde el modo diseñador.

Conexión del sistema con la base de datos mediante las variables de entorno de Laravel.

Xampp:

La empresa contaba con un servidor http (web) pero lo ideal y recomendable es no alojar el sistema en el servidor hasta que no este listo para su implantación.
Por lo tanto al utilizar XAMPP tu ordenador se convierte en un servidor local sobre el cual puedes ir desarrollando el proyecto e ir haciendo pruebas.