FRONT-END/BACK-

END
ALUMNOS
Marco Antonio Romero Rodríguez
Ramón Arturo Vidal Ocaña
Jose Concepción Oramas Arias

DOCENTE
PROF. JULIO HUMBERTO GARCIA ALCOCER

ASIGNATURA
LABORATORIO DE APLICACIONES PARA DISPOSITIVOS
MÓVILES.
 Introducción

Hoy en día, la programación es un campo en constante evolución, desarrollar páginas

web, crear aplicaciones y programas para facilitar nuestro trabajo diario o mejorar la
experiencia del usuario son funciones clave que realizan los desarrolladores.
Los términos front-end y back-end tienen cualidades únicas y únicas. Actúan como
unidades separadas que interactúan entre sí para garantizar la funcionalidad del sitio.

Para tener una gran página digital, se necesita algo más que dominios, hipervínculos,
metaetiquetas y etiquetas de título, por lo que explicaremos por qué estos dos
conceptos son tan importantes.
Dentro de la siguiente investigación se involucran estos conceptos tan importantes
cuando hablamos de desarrollo web, ahora bien, siempre que tenemos en mente
emprender un nuevo proyecto debemos ser cuidadosos, puesto que es un trabajo que
será entregado a un cliente y será visto por muchas personas, para conllevar esta
metodología se tiene que seguir una serie de pasos que continuación se explica sobre
el proceso de este desarrollo.
01 Front-End
 Front-End
Concepto.
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.
 Front-End
Àreas
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 darles dinamismo a los sitios web.
 Front-End
Ventajas y desventajas del enrutamiento de front-end

ventajas

● Desde la perspectiva del rendimiento y la experiencia del usuario, el enrutamiento de

backend envía una solicitud al servidor cada vez que se accede a una nueva página, y
luego el servidor responde a la solicitud. Este proceso definitivamente se retrasará. El
enrutamiento de front-end solo cambia la ruta al acceder a una nueva página. Sin demoras
en la red, la experiencia del usuario mejorará enormemente.

● En algunas ocasiones, el uso de la solicitud ajax puede hacer que la página no se actualice,
la página ha cambiado pero la URL no ha cambiado y el usuario no puede copiar a la
dirección deseada. Usar el enrutamiento de front-end para hacer una página de una sola
página puede resolver este problema bien.
 Front-End
Ventajas y desventajas
Ventajas

● Desde la perspectiva del rendimiento y la experiencia del usuario, el enrutamiento de backend

envía una solicitud al servidor cada vez que se accede a una nueva página, y luego el servidor
responde a la solicitud. Este proceso definitivamente se retrasará. El enrutamiento de front-end
solo cambia la ruta al acceder a una nueva página. Sin demoras en la red, la experiencia del
usuario mejorará enormemente.

● En algunas ocasiones, el uso de la solicitud ajax puede hacer que la página no se actualice, la
página ha cambiado pero la URL no ha cambiado y el usuario no puede copiar a la dirección
deseada. Usar el enrutamiento de front-end para hacer una página de una sola página puede
resolver este problema bien.

Desventaja

La solicitud se reenviará cuando se utilicen las teclas de avance y retroceso del navegador y la caché
no se utilice correctamente
02 Back-End
 Back-End.
Concepto.
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 frameworks como PHP, Javascript, Python y Ruby, entre otros.
 Back-End.
Funciones
Un framework de desarrollo es el que trabaja en el lado del servidor, se encarga de que
las personas puedan disfrutar de una grata experiencia, su propósito principal es que
los procesos de desarrollos estén más acelerados, que se puedan volver a utilizar los
fragmentos de códigos ya existentes y que se realicen buenas prácticas mediante el uso
de distintos patrones.

Con ellos se pueden escribir códigos o desarrollar aplicaciones con el mínimo

esfuerzo.

Las herramientas que se utilizan son editores de código, compiladores, debuggeadores

para revisar errores de seguridad y gestores de bases de datos.

El flujo de trabajo de un backend consiste en darle funciones a un sitio; mientras que

el frontend hace un sitio estático, el backend después le da funciones y adapta el
sistema programado a ese sitio web.
 Back-End.
Funciones
Otras funciones que se gestionan son:

● Creación de funciones que simplifiquen el proceso de desarrollo.

● Acciones de lógica.
● Conexión con bases de datos.
● Uso de librerías del servidor web (un ejemplo puede ser para
implementar temas de caché).

Además, debe velar por la seguridad de los sitios web y optimizar al

máximo los recursos para que las páginas sean ligeras.
 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.
 ¿Front-end y Back-end: qué diferencias
tienen?
1. Son conceptos diferentes
Cuando tratamos las diferencias entre Front-end y Back-end resulta
evidente que ambas ideas son distintas.

Como hemos mencionado antes, Front End es la parte del sitio web con
la que puedes ver e interactuar. Mientras, la parte trasera engloba el
funcionamiento estructural y no es visible por el cliente.

2. Roles distintos
Para que lo entiendas mejor, piensa que son dos caras de la misma
moneda. Front-end tiene que ver con aspectos visuales con los que
experimentas.

Por su parte, al Back-end se le atribuye todo lo que sucede en segundo

plano porque facilita la interacción web.
 ¿Front-end y Back-end: qué diferencias
tienen?
3. Fundamentos esenciales
Los elementos esenciales del desarrollo web Back End incluyen lenguajes
como:
Java, Ruby, Python, PHP, .Net, entre otros.

Ahora, los lenguajes más comunes de Front-end son:

HTML, CSS y JavaScript.

4. Funciones de los desarrolladores de Front End y Back End

Un diseñador web se encarga de construir sitios web teniendo en cuenta los
aspectos visuales.

Los desarrolladores web de Back-end se aseguran de que los datos y sistemas

solicitados por el software funcionen de manera eficiente.

Ambos aspectos tienen un valor tremendo en el buen desarrollo de la interfaz de

usuario.
 Ejemplos de Front-end y Back-end en la
práctica
Los componentes que se encuentran en la parte frontal del sistema son los siguientes:

● pruebas de usabilidad y accesibilidad;

● lenguajes de diseño y marcado como HTML, CSS y JavaScript;
● diseño gráfico y herramientas de edición de imágenes;
● posicionamiento en buscadores o SEO;
● rendimiento web y compatibilidad del navegador.

Ahora bien, estos son algunos ejemplos prácticos de los conceptos asociados con Back-end:

● Lenguajes de programación y scripting como PHP y Python;

● escalabilidad y disponibilidad de red;
● transformación de datos y gestión de bases de datos;
● marcos de prueba automatizados;
● ciberseguridad y prácticas de respaldo de datos.
● Mencionamos los ejemplos más sencillos de Front-end y Back-end en la práctica.
Sin embargo, existen otros que de igual manera contribuyen a la construcción de un sitio web.
 Conclusión
Luego de algunas explicaciones sobre cada etapa de la programación de aplicaciones
web y comprensión de las diferencias entre ellas, podemos decir que, si bien abarcan
diferentes aspectos del programa, ambos son completamente necesarios para el
correcto funcionamiento del programa.

Cada aspecto al momento de desarrollar un proyecto de nuestro interés, debemos de

tomar ciertos riesgos que vayan a nuestro criterios, pero de igual forma se deben
tomar pautas que combinen con nuestro tipo de trabajo y así obtener éxito en ello,
debemos ver la parte exterior y interior de nuestra aplicación o nuestra pagina para
saber que podemos agregar para que sea mejor o quitar para obtener otro resultado,
debemos seguir rasgos que ayuden a tener un buen diseño pero que ese diseño este
acompañado de un buen funcionamiento, el funcionamiento de nuestro proyecto debe
ser mutuo, de nada serviría tener un buen funcionamiento si lo que ve el usuario es
feo o nada intuitivo, de igual manera no tendría necesidad tener el mejor diseño si lo
que usuario busca resolver con nuestro proyecto no cumple las expectativas.

Estos son solo algunos de los muchos aspectos que podemos encontrar a la hora de
crear aplicaciones web, y hay muchos otros aspectos que pueden ayudarnos a
desarrollarnos.
 Referencias
• Souza, I. (2021, 12 febrero). Entiende las diferencias entre
Front-End y Back-end en el ambiente de los sitios web.
Rock Content - ES. https://rockcontent.com/es/blog/front-
end-y-back-end/
• Hernández, K. (2021). Backend y Frontend, ¿Qué es y
cómo funcionan en la programación? servnet.
https://www.servnet.mx/blog/backend-y-frontend-partes-
fundamentales-de-la-programaci%C3%B3n-de-una-
aplicaci%C3%B3n-web
• I. (2020, 1 octubre). Front End vs Back End. Viewnext.
https://www.viewnext.com/front-end-vs-back-end/