Aplicaciones Web

Ecosistema del Desarrollador WEB

Que es frontend, backend y Fullstack

¿Qué es el Desarrollo Web?

El Desarrollo Web es una de las actividades imprescindibles dentro de la dinámica digital actual, ya que es a través de él y del uso de diversas herramientas tecnológicas, que se pueden realizan las Páginas Web, con el fin de que los usuarios de internet, puedan obtener una adecuada experiencia digital.

  • ¿Qué es un desarrollador frontend?
  • ¿Qué es un desarrollador backend?
  • ¿Qué es un desarrollador Fullstack?

Hoy en día, la programación es un ámbito que no para de crecer, desarrollar páginas web, crear aplicaciones y programas que faciliten nuestro día a día o mejoren la experiencia del usuario, son funciones cruciales que desempeñan los desarrolladores.

Los términos de frontend y backend, tienen cualidades únicas y distintivas, actúan como unidades que por separado, interactúan entre sí para asegurar la funcionalidad de un sitio.

¿Qué es desarrollador frontend?

El frontend es la parte del desarrollo web que se dedica a la parte frontal de un sitio web, en pocas palabras del diseño de un sitio web, desde la estructura del sitio hasta los estilos como colores, fondos, tamaños hasta llegar a las animaciones y efectos.
Es esa parte de la página con la que interaccionan los usuarios de la misma, es todo el código que se ejecuta en el navegador de un usuario, al que se le denomina una aplicación cliente, es decir, todo lo que el visitante ve y experimenta de forma directa.

Un front-end, es la persona que se dedica básicamente al diseño web, pero esto no significa que no toque código, tanto el front-end como el back-end están en contacto con código todo el tiempo.
Dentro del área de front-end se trabaja con lenguajes mayormente del lado del cliente, como:
HTML (lenguaje de marcado de hipertexto, se utilizan etiquetas que estructuran y organizan el contenido de la web).
CSS (se encarga del formato y diseño visual de las páginas web escritas en html) para darle estructura y estilo al sitio.
Javascript (un lenguaje de programación, rápido y seguro para programar centros de datos, consolas, teléfonos móviles o Internet) para complementar los anteriores y darle dinamismo a los sitios web.

De ellos se generan una gran cantidad de frameworks y librerías que van aumentan las capacidades que se tiene para generar cualquier tipo de interfaz de usuario, como React, Redux, Angular, Bootstrap, Foundation, LESS, Sass, Stylus y PostCSS, entre otros.

Se conoce como el lado del cliente.
forntend

¿Qué es desarrollo backend?

Mientras que el frontend es la capa de programación ejecutada en el navegador del usuario, el backend procesa la información que alimentará el frontend de datos.
Es la capa de acceso a los datos, ya sea de un software o de un dispositivo en general, es la lógica tecnológica que hace que una página web funcione, lo que queda oculto a ojos del visitante.

El backend de una solución, determina qué tan bien se ejecutará la aplicación y qué experiencia, positiva o negativa, obtendrá el usuario de su uso.
Trabajar en este apartado supone algo totalmente diferente al frontend, ya que exige el dominio de otros términos de programación, lenguajes que requieren una lógica, ya que esta área es también la encargada de optimizar recursos, de la seguridad de un sitio y otros factores.

Aquí se utilizan lenguajes y frameworks como PHP, Javascript, Python y Ruby, Laravel entre otros.

Se conoce como de lado del servidor.

Forma en que funciona el frontend y el backend

Considera que una web se conforma por una gran variedad de documentos que se relacionan entre ellos por medio de enlaces, lo que significa que si quieres entrar a una web y escribes la dirección URL en el navegador, se traduce como que estás solicitando que se muestre dicha página web.


Lo siguiente que hará el dispositivo es verificar qué servidor de software tiene el sitio. El servidor recibe esta información, verifica la petición que hizo y te permite ejecutar la acción.


En ocasiones, se puede presentar el caso de que no se requiere una conexión a la base de datos, por ejemplo, accedes a una página y cuando inicias sesión, se hace de manera automática una petición que conecta a la base de datos para verificar los accesos y la suscripción que se tiene, es allí donde el backend devuelve la respuesta al servidor.


Después aparece el frontend, que es quien va a recibir la información que transmitió el backend y la va a acomodar en la interfaz del sitio web o perfil del usuario.

forndrndvsbackend
forndrndvsbackend

Full Stack

Por otro lado, un desarrollador Full Stack es el encargado de manejar cada uno de los aspectos relacionados con la creación y el mantenimiento de una aplicación web. Para ello es fundamental que el desarrollador Full Stack tenga conocimientos en desarrollo Front-End y Back-End además de manejar diferentes sistemas operativos y lenguajes de programación.

Para ser desarrollador frontend, backend o full stack, debes contar con ciertas habilidades y conocimientos de lo que hay dentro y fuera de una página web.

Los desarrolladores fullstack son profesionales que se encargan tanto de la parte técnica como de la parte creativa (frontend y backend). Un stack (en inglés pila o montón) hace referencia al grupo de tecnologías que componen un sitio web en todos sus aspectos (desde la base de datos, hacia el manejo lógico y la interfaz visual). Un desarrollador fullstack es capaz de manejar la pila completa de un sitio y por ende entiende de tecnologías tanto de frontend como de backend y también el manejo de su base de datos.

Se conoce como superMan.

Glosario de terminos

El mayor reto a la hora de adentrarse a una experticia o especialidad, es conocer los términos que son usados dentro de ellos y su significado, y esto sucede a menudo dentro del desarrollo web, donde la mayoría de los profesionales suelen fusionar el uso de palabras en español e inglés y sostener una reunión o presentación del trabajo realizado.

Un término que nos vamos a encontrar mucho en este mundo es el de framework por eso he dedicado una página entera para ver de qué se trata esto

Ver pagina
  • Dominio

    Es el nombre de una página web, esto se convierte en la dirección donde los usuarios de Internet pueden acceder a su sitio web. Los dominios pueden ser reservados y se deben renovar anualmente para poder mantener la dirección. Los dominios se desarrollaron para sustituir a la dirección de Protocolo de Internet (IP), porque es más amigable y fácil de recordar y ubicar. Las direcciones IP se construyen en estos cuatro bloques, que a su vez tienen una regla propia: son números de tres dígitos que van del 0 al 255, por ejemplo la direccione ip de google.com es 142.250.217.238

  • Es el espacio donde se aloja u hospeda el sitio web, dependiendo el diseño, el peso y la cantidad de consultas y visitas que obtengan, es necesario la contratación de un hosting dedicado o con mayor capacidad.

  • Las webs estáticas son básicamente paginas informativas que tienen sus secciones y contenido fijo. Obviamente se pueden actualizar pero no de una forma sencilla para el usuario que no tenga algún conocimiento de HTML. En las páginas web estáticas no se utilizan bases de datos ni se requiere programación. Este tipo de webs son mas económicas ya que el tiempo de programación es mucho menor que en las paginas dinámicas.

    Las webs dinámicas son paginas en las que su contenido es fácilmente y frecuentemente modificado. Se construyen usando lenguajes de programación en nuestro caso PHP que permite programar aplicaciones de todo tipo: blogs, foros, tiendas, etc. Requiere base de datos para almacenar la información.

  • Un servidor web es un software que forma parte del servidor y tiene como misión principal devolver información (páginas) cuando recibe peticiones por parte de los usuarios.
    En otras palabras, es el software que permite que los usuarios que quieren ver una página web en su navegador puedan hacerlo.
    En el caso de páginas estáticas no es obligatorio su uso mientras que con las páginas dinámicas si.

  • Un editor de texto es un programa informático simple que permite a los usuarios crear, cambiar o editar archivos de texto sin formato. Se puede utilizar para crear programas de computadora, editar el código fuente de lenguajes de programación, editar lenguaje de marcado de hipertexto (HTML) y crear páginas web o plantillas de diseño web. Alguno editores pueden ser (Visual Studio Code, Sublime Text, ATOM, DreamWeaver entre muchos otros)

  • HTML, siglas en inglés de HyperText Markup Language, hace referencia al lenguaje de marcado para la elaboración de páginas web

  • CSS, en español «Hojas de estilo en cascada», es un lenguaje de diseño gráfico para definir y crear la presentación de un documento estructurado escrito en un lenguaje de marcado como lo es HTML

  • JavaScript es un lenguaje de programación interpretado, dialecto del estándar ECMAScript. Se define como orientado a objetos, basado en prototipos, imperativo, débilmente tipado y dinámico. Utilizado tanto en el frontEnd como el el BackEnd

  • Una librería es un conjunto de archivos que se utiliza para desarrollar software. Suele estar compuesta de código y datos, y su fin es ser utilizada por otros programas de forma totalmente autónoma. Simple y llanamente, es un archivo importable.

  • Un entorno de trabajo, o marco de trabajo es un conjunto estandarizado de conceptos, prácticas y criterios para enfocar un tipo de problemática particular que sirve como referencia, para enfrentar y resolver nuevos problemas de índole similar.

  • Es una biblioteca o libreria multiplataforma o conjunto de herramientas de código abierto para diseño de sitios y aplicaciones web

  • Es un lenguaje de programación de uso general que se adapta especialmente al desarrollo web, funciona del lado delservidor.

  • Una base de datos es un conjunto de datos pertenecientes a un mismo contexto y almacenados sistemáticamente para su uso posterior, forma parte de las tecnologias de backend.

  • Es un framework de código abierto para desarrollar aplicaciones y servicios web con. Su filosofía es desarrollar código PHP de forma elegante y simple. Es uno de los entornos de desarrollo más demandados en la actualidad en todo el mundo.

  • WordPress es un sistema de gestión de contenidos (CMS) que permite crear y mantener un blog u otro tipo de web. Con casi 10 años de existencia y más de un millar de temas (plantillas) disponibles en su web oficial, no es solo un sistema sencillo e intuitivo para crear un blog personal, sino que permite realizar toda clase de web más complejas.

  • La palabra layout sirve para hacer referencia a la manera en que están distribuidos los elementos y las formas dentro de un diseño. Es un vocablo del idioma inglés que no forma parte del diccionario de la Real Academia Española. Se traduce al español como 'disposión', 'plan' o 'diseño'.

  • Una Landing Page (página de aterrizaje) es una página dentro de un sitio web, desarrollada con el único objetivo de convertir los visitantes en Leads (cliente potencial) o prospectos de ventas por medio de una oferta determinada. Generalmente tiene un diseño más sencillo con pocos enlaces e informaciones básicas sobre la oferta.