1

Índice

INTRODUCCIÓN ..................................................................................................................................................3
1.1 Que es el FrontEnd. ......................................................................................................................................4
2.1. Lenguajes de programación en el FrontEnd. ...............................................................................................5
2.2. Lenguaje HTML ................................................................................................................................................5
2.3. Estructura de un documento HTML ................................................................................................................5
2.4. Estructura HTML ..............................................................................................................................................6
2.5. CSS ...................................................................................................................................................................6
3.1. Conceptos de FrontEnd. ..............................................................................................................................8
4.1. Servidores Web. ..........................................................................................................................................9
5.1. Entorno y herramientas de desarrollo de un FrontEnd...............................................................................9
5.2. Lenguajes de Programación ............................................................................................................................9
5.3. Librerías ........................................................................................................................................................ 10
5.4. Frameworks .................................................................................................................................................. 11
5.5. Software ....................................................................................................................................................... 12
Referencias ............................................................................................................................................................. 13
 3

INTRODUCCIÓN

La programación web es una disciplina que se enfoca en el desarrollo de

aplicaciones y sitios web para ser utilizados en internet. Esta área de la

programación se ha vuelto cada vez más importante en los últimos años

debido al creciente uso de internet en nuestra vida cotidiana. Desde la creación

de redes sociales hasta la gestión de grandes tiendas en línea, la programación

web ha demostrado ser fundamental en el desarrollo de proyectos de gran

envergadura. En este campo, se utilizan diferentes lenguajes de programación,

como HTML, CSS, JavaScript y PHP, entre otros, para crear páginas web

dinámicas y atractivas que proporcionen una experiencia de usuario única. En

este contexto, la programación web se ha convertido en una habilidad esencial

para los desarrolladores de software y los diseñadores web que desean crear

sitios web modernos y efectivos.

 4

1.1 Que es el FrontEnd.

FrontEnd es la parte de una aplicación que interactúa con los usuarios, es

conocida como el lado del cliente. Básicamente es todo lo que vemos en la

pantalla cuando accedemos a un sitio web o aplicación: tipos de letra, colores,

adaptación para distintas pantallas, los efectos del ratón, teclado,

movimientos, desplazamientos, efectos visuales… y otros elementos que

permiten navegar dentro de una página web. Este conjunto crea la experiencia

del usuario. Como hemos dicho, el desarrollador frontend se encarga de la

experiencia del usuario, es decir, en el momento en el que este entra a una

página web, debe ser capaz de navegar por ella, por lo que el usuario verá una

interface sencilla de usar, atractiva y funcional.

1.2 Cómo funciona un sistema front end.

Un sistema de frontend se utiliza principalmente para enviar preguntas y

solicitudes, y recibir datos desde el sistema anfitrión. Sirve o proporciona a

los usuarios la capacidad de interactuar y utilizar un sistema de información.

Típicamente, los sistemas de front-end tienen capacidades de procesamiento

de la lógica computacional o de negocio muy limitadas y se basan en los datos

y las funciones del sistema anfitrión. Sin embargo, algunos sistemas de front-
 5

end de nivel avanzado mantienen copias de los datos, tales como un duplicado

de cada transacción, que se envía al sistema de back-end.

2.1. Lenguajes de programación en el FrontEnd.

Un desarrollador frontend debe conocer los siguientes lenguajes de

programación: HTML5, CSS3, JavaScript, Jquery, Ajax.

2.2. Lenguaje HTML

HTML son las siglas de HyperText Markup Language (Lenguaje de Marcas

de Hipertexto), es el lenguaje de marcado predominante para la construcción

de páginas web. Es usado para describir la estructura y el contenido en forma

de texto, así como para complementar el texto con objetos tales como

imágenes.

2.3. Estructura de un documento HTML

Toda página HTML debe incluir las etiquetas y, estas etiquetas nos están

indicando que el código contenido entre ellas va a ser HTML. Los documentos

escritos en HTML están estructurados en dos partes diferenciadas:

1. HEAD (cabecera): Es la primera de las dos partes en que se estructura un

documento HTML. En esta zona reside información acerca del documento,

 6

y generalmente no se ve cuando se navega por él. En la zona se pone el

elemento que es una breve descripción que identifica el documento.

2. BODY (cuerpo): El cuerpo <BODY> y </BODY> es la segunda y última

de las dos partes en que se estructura un documento HTML. Esta parte al

contrario que <HEAD> es obligatoria, ya que es aquí donde reside el

verdadero contenido de la página.

2.4. Estructura HTML

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<body>

<h1>Hola mundo</h1>

</body>

</html>

2.5. CSS
CSS (Cascading Style Sheets u Hojas de Estilo en Cascada) es un lenguaje

de programación muy parecido a HTML que permite aplicar estilos a los

 7

distintos elementos de las páginas web, de modo que los títulos, listas y

párrafos pueden verse igual en todas y cada una de las páginas. Se puede

hacer de tres formas diferentes, pero la más recomendada es la tercera.

1. Mediante el atributo style: El atributo style es de CSS, pero se inserta

dentro de las etiquetas HTML directamente. Por ejemplo, para aplicar el

color rojo al fondo de la página, en el documento HTML se escribiría,

dentro de la etiqueta body:

2. Mediante la etiqueta style: También de esta forma se insertaría código

CSS dentro del archivo HTML, en esta ocasión mediante una etiqueta

HTML llamada style. Por ejemplo, para conseguir el mismo efecto que en

el caso anterior, se escribiría:

 8

3. Mediante un archivo CSS externo.

3.1. Conceptos de FrontEnd.

El frontend o «desarrollo del lado del cliente» se refiere a la práctica de

producir HTML, CSS y JavaScript. Estos tres elementos se encargan de

dar forma a la parte frontal de un sitio web o aplicación. Esto incluye los

fondos, colores, texto, animaciones o efectos.

 9

4.1. Servidores Web.

Un servidor web algunas pueden ser definido como un hardware y como

un software; porque efectivamente posee cualidades de ambos. Es una

computadora con una alta potencia que le permite mantenerse conectada a

la red las 24 horas del día, los 365 días del año; además de contar con un

sistema operativo, de almacenamiento y de procesamiento sumamente

eficaces para atender las consultas de los usuarios.

5.1. Entorno y herramientas de desarrollo de un FrontEnd.

5.2. Lenguajes de Programación

1. HTML

2. CSS

3. JavaScript
 10

5.3. Librerías
Las librerías de programación son un conjunto de archivos que facilitan la

creación del código. Su finalidad es proporcionar códigos funcionales,

soluciones a bugs y diversas funcionalidades diseñadas por otros

desarrolladores previamente.

1. JQuery:

JQuery es una librería de código abierto usada en múltiples navegadores y

compatible con CSS3. La herramienta facilita la programación de código

JavaScript.

2. React:
 11

React es una librería que facilita la creación de una interfaz de usuario. Lo

logra a través de la implementación de elementos, como botones y menús,

que describen la lógica del sitio.

5.4. Frameworks
Un framework es un conjunto de archivos que crean un esquema,

estructura y metodología que tienen como objetivo el desarrollo ágil de

aplicaciones y sitios web.

1. Materialize

Es un framework de CSS que facilita la creación de sitios webs y

aplicaciones. Esta herramienta fue diseñada bajo los principios

establecidos en la guía Material Design. La cual, combina los estilos de

diseño, innovación y tecnología utilizados en las aplicaciones de Google.

2. Bootstrap
 12

Bootstrap es un framework que combina CSS y JavaScript para definir el

estilo visual de los componentes HTML. Por tanto, su finalidad es mejorar

la interactividad de un sitio o aplicación web.

5.5. Software
Los desarrolladores utilizan herramientas con las que realizan pruebas de

rendimiento del sitio. Así, obtienen información sobre los puntos de

mejora y optimización de la plataforma.

1. Lighthouse

Esta es una herramienta creada por Google que ayuda a los desarrolladores

a realizar revisiones en los sitios webs para mejorar aspectos como:

Accesibilidad del sitio.

Performance de la plataforma.

Mejores prácticas de SEO.

Mide la velocidad de un sitio web.

Determina la percepción de los usuarios.

 13

Recomendaciones para el desarrollo de aplicaciones web progresivas.

Referencias
Aira. (s.f.). Recuperado el 07 de Diciembre de 2024, de Aira: https://www.airavirtual.com/blog/herramientas-de-
front-end-dev#paragraph-4

Arimetrics. (14 de Diciembre de 2021). Recuperado el 07 de Enero de 2024, de Arimetrics:

https://www.arimetrics.com/glosario-digital/frontend

Dialnet-ProgramacionWebDelFrontendAlBackend-933116.pdf. (s.f.). Recuperado el 07 de Enero de 2024, de

Dialnet-ProgramacionWebDelFrontendAlBackend-933116.pdf: file:///C:/Users/D-
Low/Downloads/Dialnet-ProgramacionWebDelFrontendAlBackend-933116.pdf

HubSpot. (s.f.). Recuperado el 07 de Diciembre de 2024, de HubSpot: https://blog.hubspot.es/website/frontend-

y-backend#:~:text=páginas%20de%20destino%20>>-
,Qué%20es%20el%20frontend,%2C%20texto%2C%20animaciones%20o%20efectos.

HubSpot. (s.f.). Recuperado el 07 de Diciembre de 2024, de HubSpot: https://blog.hubspot.es/website/que-es-

servidor-web