Instituto Tecnológico Superior Zacatecas Sur

INFORME FINAL DE
FUNDAMIENTOS DE INVESTIGACION

DESARROLLO WEB FRONT-END

PRESENTA:
JOSE ARMANDO LLAMAS
VALDEZ

CARRERA:
INGENIERÍA EN SISTEMAS COMPUTACIONALES

Tlaltenango de Sánchez Román, Zac. diciembre de 2021

ÍNDICE
RESUMEN......................................................................................................................5
INTRODUCCIÓN...........................................................................................................6
CAPÍTULO I...................................................................................................................7
1.1 JUSTIFICACIÓN..................................................................................................8
1.2 OBJETIVOS GENERALES Y ESPECIFICOS.....................................................9
1.2.1 OBJETIVO GENERAL..................................................................................9
1.2.2 OBJETIVOS ESPECIFICOS.........................................................................9
1.3 ALCANCES Y LIMITACIONES.........................................................................10
1.3.1 ALCANCES.................................................................................................10
1.3.2 LIMITACIONES...........................................................................................10
CAPÍTULO II................................................................................................................11
2.1 EVALUACIÓN DEL DESARROLLO WEB FRONT-END.................................12
2.2 HISTORIA DEL LENGUAJE DE PROGRAMACIÓN JAVASCRIPT................12
2.3 LA BIBLIOTECA QUE UNIFICA LA FRAGMENTACIÓN: JQUERY...............15
2.4 HISTORIA DEL CONCEPTO FULL STACK.....................................................16
2.5 EVOLUCIÓN DEL DISEÑO WEB......................................................................19
2.6 LA ÉPOCA OSCURA DEL DISEÑO WEB........................................................20
CAPÍTULO III...............................................................................................................22
3.1 LENGUAJES FRONT-END................................................................................23
3.1.1 HTML...........................................................................................................23
3.1.2 CSS..............................................................................................................25
3.1.3 JavaScript...................................................................................................25
3.2 FRAMEWORKS Y LIBRERÍAS DE JAVASCRIPT...........................................27
3.2.1 AngularJS...................................................................................................27
3.2.2 VueJS..........................................................................................................28
3.2.3 ReactJS.......................................................................................................29
3.2.4 JQuery.........................................................................................................29
3.3 HERRAMIENTAS DE CSS................................................................................30
3.3.1 Bootstrap....................................................................................................30
3.3.2 SASS............................................................................................................31

2
 3.3.3 Bulma..........................................................................................................31

3.4 JAVASCRIPT EN BACKEND............................................................................32

3.4.1 NodeJS........................................................................................................32
CAPITULO IV...............................................................................................................34
4.1 CONCLUSIONES...............................................................................................35
REFERENCIAS............................................................................................................36

3
ÍNDICE DE CUADROS, GRAFICAS Y FIGURAS
Figura 1. Desarrollo web Front-end vs Back-end......................................................................12
Figura 2. Logo de JavaScript.....................................................................................................13
Figura 3. Historia de JavaScript.................................................................................................14
Figura 4. Logo de JQuery..........................................................................................................15
Figura 5. Inicios de la programación.........................................................................................16
Figura 6. Amazon Web Services, de los mejores servicios en la nube.....................................17
Figura 7. Funciones de un FullStack.........................................................................................18
Figura 8. Diseño web.................................................................................................................19
Figura 9. Inicios del diseño web................................................................................................20
Figura 10. Evolución del diseño web al paso de los años.........................................................21
Figura 11. Desarrollo Frontend en Windows............................................................................23
Figura 12. HTML logo..............................................................................................................24
Figura 13. CSS logo...................................................................................................................25
Figura 14. JavaScript logo.........................................................................................................27
Figura 15. Angular logo.............................................................................................................27
Figura 16. Vue logo...................................................................................................................28
Figura 17. React logo.................................................................................................................29
Figura 18. JQuery logo..............................................................................................................30
Figura 19. Bootstrap logo..........................................................................................................30
Figura 20. SASS logo................................................................................................................31
Figura 21. Bulma logo...............................................................................................................32
Figura 22. Desarrollo Backend..................................................................................................32
Figura 23. NodeJS logo.............................................................................................................33

4
RESUMEN

Para programar el diseño de una página web es necesario la utilización de distintos lenguajes y
herramientas encargados de ese tipo de actividades, lenguajes como JavaScript, Html o Css,
estos últimos dos no son lenguajes de programación pero igualmente son utilizados para
desarrollar un sitio o una aplicación web.

Esta investigación tiene como objetivo plasmar y dar a conocer como surgió el
desarrollo web así como las tecnologías que se han utilizado a lo largo de la historia de la
programación y las que se utilizan actualmente para la parte de Frontend.

Para esta investigación se usaron distintos métodos de investigación, tales como, el

método de investigación histórico el cual fue utilizado durante el desarrollo del marco teórico
para abarcar como ha sido el desarrollo Frontend a lo largo de la historia, otro método que se
utilizó fu el método de investigación comparativo el cual se puede observar en varios puntos
de la investigación como sucede con los frameworks de JavaScript.

5
INTRODUCCIÓN

En la actualidad, la programación es un ámbito profesional que crece cada día más, hay
distintas áreas de la programación como el desarrollo móvil o el desarrollo de videojuegos,
pero una de las que más ha tenido crecimiento en los últimos años es el desarrollo web.

La programación o desarrollo web se divide en dos partes, la parte de Backend y la

parte de Frontend, en esta investigación se habla más concretamente de la parte de Frontend,
pero ambas interactúan entre si para que el sitio web de desarrolle de la mejor manera.

En pocas palabras, el Frontend es la parte encargada del diseño que tendrá la página
web, como por ejemplo, los colores, el menú, botones, animaciones, fondos efectos, etc. Esta
parte es muy importante dentro del desarrollo web.

6
 CAPÍTULO I

“ASPECTOS GENERALES”

7
1.1 JUSTIFICACIÓN

En la actualidad, el desarrollo web es una actividad demasiado importante y presente en las

funciones de una empresa y una parte indispensable del desarrollo web es el front-end.

Gracias al desarrollo web es posible la comunicación entre la población, se pueden

llevar a cabo actividades de forma más sencilla y además una página web funciona como el
representativo de un negocio.

Con el pasar de los años, los negocios y empresas cada vez le dan más importancia a
tener una página de internet con un diseño agradable y optimizado, esto con el objetivo de
ofrecer un mejor servicio y comunicación a sus clientes.

Es por todo lo anterior que me interesa hacer una investigación documental de cómo
funciona el desarrollo web, para ser más exacto la parte del front-end, y que tecnologías se
utilizan actualmente para llevarlo a cabo.

8
1.2 OBJETIVOS GENERALES Y ESPECIFICOS

1.2.1 OBJETIVO GENERAL

Tener conocimiento acerca de la tecnología y herramientas utilizadas actualmente para el
desarrollo web front-end, así como también cual es usada para cada parte.

1.2.2 OBJETIVOS ESPECIFICOS

 Conocer el funcionamiento del lenguaje principal utilizado para el desarrollo
front-end, JavaScript
 Dar a conocer los principales frameworks de JavaScript que se utilizan
actualmente, angular js, react js y vue js.
 Plasmar la importancia de los lenguajes de maquetación es sus versiones usadas
actualmente, html5 y css3.
 Informar de las tecnologías que tienen relevancia en la actualidad para
desarrollar páginas y aplicaciones web.
 Investigar la implementación de la parte del front-end en la parte del back- end.

9
1.3 ALCANCES Y LIMITACIONES

1.3.1 ALCANCES
 Este informe de investigación tratara de informar y dar a conocer las
herramientas y procesos utilizados en desarrollo front-end.
 La investigación tratara de abarcar todas las tecnologías y herramientas
utilizadas en el desarrollo front-end.

1.3.2 LIMITACIONES
 En este informe no se pueden abarcar todas las herramientas, solo las más
importante y usadas.
 No hay tantas fuentes confiables que hablen del tema que abarca este estudio.
 No toda la información investigada esta actualizada al 100%.

10
 CAPÍTULO II

“FUNDAMENTO TEÓRICO”

11
2.1 EVALUACIÓN DEL DESARROLLO WEB FRONT-END

En los últimos años ha habido una gran demanda de desarrolladores de software debido a la
inclusión de los sistemas informáticos en prácticamente todo los aspectos del día a día de las
personas. A las clásicas demandas de tecnologías tales como C, C++, JAVA, .NET, SQL han
surgido un nuevo elenco de nuevas tecnologías tales como JavaScript, ECMAScript, nodeJS,
AngularJS, React, Angular 2.0+, Vue JS, ember, gulp, web pack, TDD, BDD, CI, CD, etc. El
nuevo conjunto de tecnologías que se solicitan como puestos de trabajo pertenecen al
desarrollo de aplicaciones web. Una de las mayores críticas de los profesionales del sector
(Ingenieros y desarrolladores en general) es el rápido cambio de tecnologías que sufre el
desarrollo Web en el lado del cliente (o front-end). (González, 2017)

Figura 1. Desarrollo web Front-end vs Back-end

2.2 HISTORIA DEL LENGUAJE DE PROGRAMACIÓN JAVASCRIPT

Antes de poder afrontar los últimos avances en el desarrollo de aplicaciones Web hay que
comprender por qué y cómo se ha llegado a esta situación, y para ello se va a presentar la
evolución que ha sufrido el desarrollo del lado del cliente hasta llegar a nuestros días.

Hay que retomarse a los orígenes de la Web cuando existían principalmente dos
navegadores Web populares para los usuarios: Internet Explorer y Netscape. Internet Explorer
hasta hace poco ha sido el navegador por excelencia de la compañía Microsoft y es
sobradamente conocido por la mayoría de los lectores, hoy en día ha

12
sido sustituido por Microsoft Edge. Menos conocido es el navegador Netscape, el cual fue el
primero que plantó cara al dominio de Internet Explorer y del cual deriva hoy en día Mozilla
Firefox.

Figura 2. Logo de JavaScript

Para el desarrollo de scripts (i.e. código) del lado del cliente, Internet Explorer utilizaba
un lenguaje propio denominado VBScript (Visual Basic Script), el cual permitía realizar
interacción con el usuario. Por su parte, Brendan Eich, empleado en Netscape definió un
lenguaje de programación que inicialmente se llamó Mocha pero fue renombrado a LiveScript
y finalmente a JavaScript. En 1995 la compañía Sun MicroSystems (que había adquirido
Netscape y era propietaria del lenguaje de programación Java) anunció el lenguaje JavaScript
y a partir de 1996 ya era operativo en el navegador Netscape. Desde ese momento hubo una
batalla entre VBScript y JavaScript por ser el lenguaje del lado del cliente predominante,
batalla que fue ganando poco a poco JavaScript. Tal fue así que Microsoft ideó un lenguaje de
programación denominado JScript que llevó a confusiones entre los desarrolladores por el
parecido en el nombre a JavaScript. La compañía Netscape envío a la organización Ecma
International la especificación para que se convirtiera en un estándar y de ahí nació la primera
edición llamada ECMA-262, el cual fue conocido como ECMAScript. En el desarrollo del
estándar trabajan hoy las principales compañías interesadas en el desarrollo del lenguaje de
lado del cliente (i.e. Microsoft, Google, Apple o la fundación Mozilla).

13
 Figura 3. Historia de JavaScript

Por lo tanto, hoy en día existe un único lenguaje de programación de lado del cliente:
JavaScript. Este lenguaje es desarrollado por los diferentes fabricantes de los navegadores:
Google, Apple, Microsoft o la fundación Mozilla. Este desarrollo se debe basar en un estándar
que “pactan” entre diferentes organizaciones denominado ECMAScript. No obstante, desde
que se pactan diferentes características en el estándar hasta que se implementan en los
navegadores puede pasar un largo tiempo, o incluso, algunos navegadores, incorporan
características no pactadas en el estándar. Por lo tanto, se dan circunstancias como que una
característica pactada en una versión pasada de ECMAScript nunca ha sido implementada en
uno de los principales navegadores y por tanto el código desarrollado para una aplicación Web
no se ejecutará bien en dicho navegador.

Aunque parece simple, es bastante complicado para los desarrolladores de aplicaciones

Web tener el control de todas las versiones existentes de los navegadores que tienen los
usuarios. La fragmentación de posibles clientes es demasiada elevada, lo que provoca que
existan muchísimos problemas en el desarrollo Web. (González, 2017)

14
2.3 LA BIBLIOTECA QUE UNIFICA LA FRAGMENTACIÓN: JQUERY

La historia de JavaScript nos conduce a un escenario en el que se dispone de una gran

fragmentación de dispositivos sobre los que desarrollar y no solo eso, una gran fragmentación
de recursos del propio lenguaje de programación puesto que no hay una empresa que
determine qué se puede y qué no se puede realizar en el lenguaje, sino que existe un estándar
que pueden o no cumplir las diferentes empresas.

Durante la década 1996-2006 el desarrollo de la Web fue muy caótico, puesto que,
aunque los desarrolladores quisieran crear aplicaciones Web complejas, no era posible debido
a la naturaleza del entorno de ejecución, además que los usuarios finales tampoco lo requerían.

En el año 2006 se presentó jQuery, una biblioteca que trataba de hacer multiplataforma
JavaScript en todos los navegadores. Durante una década, jQuery ha sido el estándar de
desarrollo de los programadores Web puesto que simplificaba la complejidad de manejar
primitivas del desarrollo Web. Hoy en día (2017) sigue siendo la biblioteca más utilizada
puesto que se encuentra en aproximadamente el 96% de la Web. Una de las principales
características de jQuery es que es código abierto y software libre, lo que ha permitido que se
adapte con el tiempo. (González, 2017)

Figura 4. Logo de JQuery

15
2.4 HISTORIA DEL CONCEPTO FULL STACK

La pila completa (full stack) podría haber sido posible en la era de la Web 2.0, pero una nueva
generación de startups está surgiendo, presionando los límites de prácticamente todas las áreas
del software. Desde la inteligencia de la máquina hasta la computación impulsiva predictiva
hasta la analítica de datos hasta móviles / usables y mucho más, es casi imposible que un único
desarrollador programe toda la pila completa.

Al inicio de la programación, una sola persona podía escribir un programa completo,

de principio a fin. El uso del lenguaje ensamblador, lenguaje de máquina, era la norma para
los programadores que pretendían mejorar el rendimiento y reducir el espacio.

La programación evolucionó rápidamente hacia un modelo de equipo con la llegada de

soluciones cliente / servidor a finales de los años 80s y principios de los 90s, y la ola de la
informática por Internet a finales de los 90 y principios de los 2000. Cada faceta de la nueva
tecnología era tan compleja que a menudo se necesitaba un especialista, a veces uno para
diferentes niveles (por ejemplo, front-end, bases de datos, servidores de aplicaciones, etc.).

Figura 5. Inicios de la programación

16
 A mediados de los años 2000, crear prácticamente cualquier cosa - desde sitios web
sencillos hasta servicios SaaS de nueva generación - se volvió costoso. El gasto creciente se
correlacionó directamente con la sobrecarga de numerosos individuos de los diferentes niveles
que se comunicaban (ya menudo se comunican erróneamente), y los cambios en una cascada
en otros niveles y en los parámetros de desarrollo.

Por su parte, la tecnología para crear la nueva generación de sitios web 2.0 se
simplificó. Los programadores pasaron de utilizar la más complicada pila de bases de datos
empresariales y bases de datos como Oracle en la más sencilla pila LAMP (Linux, Apache,
MySQL, PHP / Python / Perl). Nuevos lenguajes y marcos como Django y Ruby on Rails
automatizaron la capa entre el sitio web y la base de datos. Los marcos de gama frontal como
jQuery ayudaron a abstraer todas las complicaciones entre diferentes navegadores. Los
servicios en la nube, como Amazon Web Services, simplificaron el desarrollo y
proporcionaron redes llave en mano.

Figura 6. Amazon Web Services, de los mejores servicios en la nube

A finales de los años 2000, con los niveles de abstracción se consiguió cierta sencillez
haciendo posible para muchos programadores entregar un programa completo: cliente web
dinámico, una lógica comercial del lado del servidor, una base de datos escalable, despliegue y
soporte operativo . Esta nueva raza de desarrolladores de pila completa (full stack) podría
hacer círculos alrededor de equipos de programadores que intentaran la misma tarea. Cuando
se aumentaron los proyectos, añadir más programadores de pila completa permitió a una sola
persona añadir una única característica a todos los niveles de una aplicación, lo que aceleró la

17
entrega de funciones sobre el gasto de comunicación de tener diferentes personas
propietarias en las diferentes capas.

Por lo tanto, un desarrollador de pila completa sería capaz, si no es fluido, de:

 Servidor, red y entorno de alojamiento

 Bases de datos relacionales y no relacionales
 Como interactuar con las API y el mundo externo
 Interfaz de usuario y experiencia de usuario
 Garantía de calidad
 Problemas de seguridad durante todo el programa
 Comprender las necesidades de los clientes y las empresas

Figura 7. Funciones de un FullStack

Es posible en la web 2.0? Naysayers argumenta que, con los aspectos cada vez más
diversos del desarrollo web, es casi imposible ser un verdadero desarrollador de pila completa.
Francamente, puede que ni siquiera sea práctico hacerlo.

Otros creen que un desarrollador de pila completa es simplemente alguien que esté
familiarizado con todas las capas del desarrollo de software informático. Estos desarrolladores
no son expertos en todo; simplemente tienen un conocimiento funcional y una capacidad para
tomar un concepto y convertirlo en un producto terminado. Estos gurús hacen que el software
de construcción sea mucho más sencillo, ya que entienden cómo funciona todo de arriba a
abajo y pueden prever problemas en consecuencia.

18
 A menudo, esta clase de desarrolladores proviene de entornos de creación inicial,
donde un amplio conocimiento de todas las facetas del desarrollo web es esencial para la
supervivencia de un negocio. Es evidente que se necesitan años de experiencia laboral en
diferentes idiomas, roles e industrias para alcanzar este nivel de calificación. Por ello, los
desarrolladores de pilas completas son pocos y se encuentran entre todos, lo que hace que los
que existen sean muy empleables y en demanda. (Unión, 2020)

2.5 EVOLUCIÓN DEL DISEÑO WEB

Si hablamos de tecnología, las cosas ocurren muy rápido, cada año tenemos nuevos modelos
de teléfonos inteligentes, y aplicaciones nacen y mueren todos los días para facilitar nuestras
vidas.

La evolución del diseño web no ha sido diferente. Desde la creación del primer sitio
web, hasta hoy los cambios son abismales. Y lo más interesante de todo es que esta evolución
es constante.

Con el correr del tiempo, las necesidades y las formas de resolver las dificultades que
se han ido presentando en el mundo del diseño web fueron variando. Sin embargo, la apuesta
fija siempre ha sido evolucionar hacia la experiencia del usuario. Evolucionar para hacer con
que el usuario pueda tener una experiencia fácil e intuitiva a la hora de navegar por internet.
(Gima, 2019)

Figura 8. Diseño web

19
2.6 LA ÉPOCA OSCURA DEL DISEÑO WEB

Todo comienza en la década de los 90, conocida como la época oscura para el diseño web. En
sus inicios, el diseño web se basaba en pantallas negras con píxeles monocromáticos
que le daban el toque de color. En pocas palabras, no existía el diseño web, ya que el texto
dominaba la pantalla.

Hacia 1991 se publicó la primera página web “World Wide Web”, de la mano de Tim
Berners-Lee, un físico inglés considerado uno de los grandes creadores de la web. Este sitio
web tenía como único objetivo informar qué era la World Wide Web (o red informática
global). Hoy, más de 27 años después, podemos garantizar que sus usos sin duda se han
multiplicado, y que la evolución del diseño web está más activa que nunca. (Gima, 2019)

Figura 9. Inicios del diseño web

20
 En la siguiente imagen se puede observar de mejor manera la evolución que ha tenido
el diseño web al pasar los años:

Figura 10. Evolución del diseño web al paso de los años

21
 CAPÍTULO III

“DESARROLLO WEB FRONT-END”

22
Front-end es la parte de un programa o dispositivo a la que un usuario puede acceder
directamente. Son todas las tecnologías de diseño y desarrollo web que corren en el navegador
y que se encargan de la interactividad con los usuarios.

Para convertirte en Front-end Developer debes saber HTML y CSS, los lenguajes de
maquetación que nos permiten definir la estructura y estilos de una página web. Y también
JavaScript, un lenguaje de programación para definir la lógica de nuestra aplicación, recibir las
solicitudes de los usuarios y enviárselos al Backend. (Chapaval, 2018)

Figura 11. Desarrollo Frontend en Windows

3.1 LENGUAJES FRONT-END

3.1.1 HTML
El lenguaje de marcado de hipertexto (HTML) es un lenguaje informático que forma parte de
la mayoría de las páginas web y aplicaciones en línea. Un hipertexto es un texto que se utiliza
para enlazar con otros textos, mientras que un lenguaje de marcado es una serie de marcas que
indican a los servidores web la estructura y el estilo de un documento.

Actualmente, existen 142 etiquetas HTML que nos permiten crear diversos elementos.
Aunque los navegadores modernos ya no soportan algunas de estas etiquetas, aprender los
diferentes elementos disponibles sigue siendo beneficioso.

23
Elementos de bloque
Un elemento de bloque ocupa todo el ancho de la página. Siempre comienza una nueva
línea en el documento. Por ejemplo, un elemento de encabezado estará en una línea separada
de un elemento de párrafo.

Todas las páginas HTML utilizan estas tres etiquetas:

 La etiqueta <html> es el elemento raíz que define todo el documento HTML.

 La etiqueta <head> contiene información meta como el título y el conjunto de
caracteres de la página.
 La etiqueta <body> encierra todo el contenido que aparece en la página.

Elementos en línea
Un elemento en línea da formato al contenido interno de los elementos de bloque,
agregando por ejemplo enlaces y texto enfatizado. Los elementos en línea se utilizan sobre
todo para dar formato al texto sin romper el flujo del contenido.

Por ejemplo, una etiqueta <strong> muestra un elemento en negrita, mientras que la
etiqueta <em> lo muestra en cursiva. Los hipervínculos también son elementos en línea que
utilizan una etiqueta <a> y un atributo href para indicar el destino del enlace. (B., ¿Qué es
HTML? Explicación de los fundamentos del Lenguaje de marcado de hipertexto, 2021)

Figura 12. HTML logo

24
3.1.2 CSS
CSS (en inglés Cascading Style Sheets) es lo que se denomina lenguaje de hojas de estilo en
cascada y se usa para estilizar elementos escritos en un lenguaje de marcado como HTML.
CSS separa el contenido de la representación visual del sitio.

CSS fue desarrollado por W3C (World Wide Web Consortium) en 1996 por una razón
muy sencilla. HTML no fue diseñado para tener etiquetas que ayuden a formatear la página.
Está hecho solo para escribir el marcado para el sitio.

Se incluyeron etiquetas como <font> en HTML versión 3.2, y esto les causó muchos
problemas a los desarrolladores. Dado que los sitios web tenían diferentes fuentes, fondos de
colores y estilos, el proceso de reescribir el código fue largo, doloroso y costoso. Por lo tanto,
CSS fue creado por W3C para resolver este problema.

La relación entre HTML y CSS es muy fuerte. Dado que HTML es un lenguaje de
marcado (es decir, constituye la base de un sitio) y CSS enfatiza el estilo (toda la parte estética
de un sitio web), van de la mano. (B., ¿Qué es CSS?, 2019)

Figura 13. CSS logo

3.1.3 JavaScript
JavaScript es el lenguaje de programación encargado de dotar de mayor interactividad y
dinamismo a las páginas web. Cuando JavaScript se ejecuta en el navegador, no necesita de un
compilador. El navegador lee directamente el código, sin necesidad de terceros. Por tanto, se
le reconoce como uno de los tres lenguajes nativos de la web

25
junto a HTML (contenido y su estructura) y a CSS (diseño del contenido y su estructura).

Con este lenguaje de programación del lado del cliente (no en el servidor) podemos
crear efectos y animaciones sin ninguna interacción, o respondiendo a eventos causados por el
propio usuario tales como botones pulsados y modificaciones del DOM (document object
model). Por tanto, nada tiene que ver con el lenguaje de programación Java, ya que su
principal función es ayudar a crear páginas webs dinámicas.

JavaScript es capaz de detectar errores en formularios, de crear bonitos sliders que se

adapten a cualquier pantalla, de hacer cálculos matemáticos de forma eficiente, de modificar
elementos de una página web de forma sencilla. Pero también JS es el encargado de que
existan herramientas como Google Analytics, Google Tag Manager, Facebook Pixel y tantas
otras, que son claros ejemplos de JavaScript.

JavaScript ahora mismo es el lenguaje más popular. De hecho, desde hace años se ha
creado una versión que es capaz de ser ejecutada también en el lado del servidor (Node JS).
Por tanto, ahora mismo se ejecuta JavaScript en los navegadores y en los servidores, creando a
su alrededor una amplísima comunidad de desarrolladores casi full-stack. JavaScript del lado
del servidor compite en igualdad de condiciones con PHP, por ejemplo.

Como casi todo lenguaje de programación, podemos hacer programación orientada a

objetos en JavaScript. Sin duda alguna, la forma en la que se crean, modifican y se muestran
los objetos en el navegador ha sido uno de los grandes causantes de su auge.

En la actualidad existen algunas prácticas, no demasiado recomendadas por los SEO,

donde JS se encarga de numerosas funciones de estilo. Por ejemplo, muchos temas y plugins
de WordPress utilizan scripts para hacer responsive el diseño web. Los navegadores modernos
interpretan esto sin problemas. (Ramos, 2020)

26
 Figura 14. JavaScript logo

3.2 FRAMEWORKS Y LIBRERÍAS DE JAVASCRIPT

3.2.1 AngularJS
Es un framework de ingeniería de software de código abierto que se utiliza para crear
aplicaciones web de una sola página. Los desarrolladores también lo utilizan para crear menús
animados para páginas web HTML.

El framework es una creación de los ingenieros de Google, Misko Hevery y Adam

Abrons. Google lanzó oficialmente la primera versión, AngularJS, en 2012, y la ha mantenido
desde entonces.

AngularJS usa la arquitectura Modelo-Vista-Controlador (MVC), que se usa en el

desarrollo de aplicaciones web.

Este tipo de arquitectura consta de:

 Modelo: la estructura de datos que administra la información y recibe información

del controlador
 Vista: la representación de la información
 Controlador: responde a la entrada e interactúa con el modelo (A., 2021)

Figura 15. Angular logo

27
3.2.2 VueJS
Vue es un framework open source de JavaScript, el cual nos permite construir interfaces de
usuarios de una forma muy sencilla. La curva de aprendizaje es relativamente baja, claro,
debes conocer muy bien JavaScript, saber trabajar con callbacks, promesas, objetos, entre
otros temas más.

Si queremos hacer uso de Vue no será necesario instalar absolutamente nada en nuestra
computadora, sí así lo deseamos podemos utilizar este framework mediante un CDN.

Una de las características más importantes de Vue es el trabajo con componentes. Un

componente Vue, en términos simples, es un elemento el cual se encapsula código reutilizable.
Dentro de un componente podremos encontrar etiquetas HTML, estilos de CSS y código
JavaScript. Los componentes nos permiten desarrollar proyectos modularizados y fáciles de
escalar, si nosotros así lo deseamos podemos reemplazar un componente por otro de una
forma muy sencilla, como si de piezas de lego se tratasen. (Pérez, 2019)

Figura 16. Vue logo

28
3.2.3 ReactJS
ReactJS es otro de los framework imprescindibles que debes conocer. Desarrollado por
Facebook, ReactJS es una biblioteca JavaScript de código abierto muy extendida. Los
desarrolladores lo utilizan principalmente en la creación de interfaces de usuario y ocuparse de
esta capa de visualización de una manera mucho más ágil, versátil y rápido que otros
frameworks como por ejemplo AngularJS.

React se puede utilizar para crear todo tipo de aplicaciones web, para móviles, e
interfaces y mucho más. ReactJS es un framework JavaScript moderno, declarativo y eficiente
que permite un desarrollo flexible y hace que la creación de interfaces de usuario
interactivas/front-end sea divertida y completamente indolora.

Es también un framework con un amplio respaldo en la comunidad debido a que cuenta

con Facebook como su principal impulsor. Debido a esto es muy fácil encontrar
documentación o buscar ayuda gracias a la comunidad en redes sociales (Facebook, Google,
Twitter, LinkedIn, GitHub, Stackoverflow, Reddit, etc.). (Geek, 2020)

Figura 17. React logo

3.2.4 JQuery
jQuery es una popular biblioteca de JavaScript. Fue creada por John Resig en el 2006 con el
objetivo de facilitarle el uso de JavaScript en los sitios web a los desarrolladores. No es un
lenguaje de programación separado y funciona en conjunto con JavaScript.

Escribir código puede resultar desgastante, especialmente cuando hay muchas cadenas
incluidas. jQuery comprime varias líneas de código en una sola función, de forma que no es
necesario volver a escribir bloques enteros de código para lograr una sola tarea.

29
 Figura 18. JQuery logo

3.3 HERRAMIENTAS DE CSS

3.3.1 Bootstrap
Bootstrap es un framework CSS desarrollado por Twitter en 2010, para estandarizar las
herramientas de la compañía.

El framework combina CSS y JavaScript para estilizar los elementos de una página
HTML. Permite mucho más que, simplemente, cambiar el color de los botones y los enlaces.

Esta es una herramienta que proporciona interactividad en la página, por lo que ofrece
una serie de componentes que facilitan la comunicación con el usuario, como menús de
navegación, controles de página, barras de progreso y más.

Además de todas las características que ofrece el framework, su principal objetivo es

permitir la construcción de sitios web responsive para dispositivos móviles.

Esto significa que las páginas están diseñadas para funcionar en desktop, tablets y
smartphones, de una manera muy simple y organizada. (Varios, 2020)

Figura 19. Bootstrap logo

30
3.3.2 SASS
SASS es el mejor ayudante para el desarrollador web a la hora de trabajar en CSS gracias a sus
múltiples funcionalidades: mixins, variables, funciones, herencia, nesting.

La principal ventaja de SASS es la posibilidad de convertir los CSS en algo dinámico.

Permite trabajar mucho más rápido en la creación de código con la posibilidad de crear
funciones que realicen ciertas operaciones matemáticas y reutilizar código gracias a los
mixins, variables que nos permiten guardar valores. SASS, en definitiva, se convierte en tu
mejor ayudante.

Y algo siempre importante cuando te decantas por una herramienta con alternativas,
dispone de una gran comunidad que la hace progresar, por lo que se le augura un gran futuro
por delante. (Villacampa, 2021)

Figura 20. SASS logo

3.3.3 Bulma
Nos encontramos ante un framework elegante, ligero ( comprimido pesa solo 21Kb), sencillo
y responsive, de hecho se enfoca principalmente en los móviles. Además, si comparamos
Bulma con otros frameworks CSS tenemos que este es altamente personalizable y para nada
complejo.

Si bien Bulma es bastante joven eso no le quita que sea completo, y esto se demuestra
en sus diversos componentes que bien utilizados te permitirán crear sitios web fantásticos y
con diseños increíbles, aunque en realidad lo que puedas no hacer está solo limitado por tu
creatividad, porque Bulma te da todo lo que necesitas.

Con Bulma crear grids, barras de navegación, formularios y botines es más sencillo y
flexible, bastará con tan solo escribir unas cuantas líneas para que el framework se encargue
de dar la apariencia adecuada a nuestra web.

31
 Figura 21. Bulma logo

3.4 JAVASCRIPT EN BACKEND

En los últimos años JavaScript ha avanzado exponencialmente como lenguaje de

programación. Como sabemos, JavaScript antes lo usábamos para agregar interacción a
nuestras aplicaciones web, es decir, solo era ejecutado e interpretado por el navegador web,
pero todo cambió gracias al lanzamiento de Node.js. (Vega, 2020)

Figura 22. Desarrollo Backend

3.4.1 NodeJS
Node.js es un ambiente de ejecución de código JavaScript donde se hace uso de V8, el motor
de Google Chrome que está escrito en C++ y fue lanzado en el 2009 por Ryan Dahl.

Una de las mejores características de Node.js es que es multiplataforma, gracias a esto

podemos ejecutar JavaScript en cualquier plataforma ya sea en Servidor, Escritorio, Móvil o
Web.

32
 Node.js al tener una parte escrita en C/C++ tiene acceso nativo a las diferentes
plataformas en las cuales Node.js puede correr.

Empresas reconocidas como Walmart, Netflix, Uber, Twitter, Medium, Reddit y hasta
Platzi, usan o han usado Node.js en sus aplicaciones y servicios para darle una mejor
experiencia a sus usuarios. (Vega, 2020)

Figura 23. NodeJS logo

33
 CAPITULO IV

“CONCLUSIONES”

34
4.1 CONCLUSIONES

 En conclusión, el desarrollo web es parte importante en las actividades de una

empresa o compañía, y para el desarrollo web es necesario establecer un diseño para el
proyecto que se desee realizar y para aplicar este diseño es donde entra el desarrollo
Frontend realizado por varios desarrolladores dedicados a esa área.

 Si alguien quiere ser desarrollador web es bastante necesario que obtenga

distintas habilidades y conocimientos de lo que hay dentro y fuera de una página web.

 Para crear una página web dinámica y agradable a la vista, la utilización de las
tecnologías Frontend es la mejor opción, debido al gran alcance que estas tienen al
momento de desarrollar un sitio web.

35
REFERENCIAS

A. , D. (29 de julio de 2021). ¿Qué es Angular? – Una guía para principiantes. Obtenido de
Hostinger Tutoriales: https://www.hostinger.mx/tutoriales/que-es-
angular? cf_chl_captcha_tk =CpiAG75cwjwbrhOiEVOnqdBYCDVmYsPIyhfZWh
wT7D4-1638924119-0-gaNycGzNCr0
B. , G. (13 de mayo de 2019). ¿Qué es CSS? Obtenido de Hostinger
Tutoriales: https://www.hostinger.mx/tutoriales/que-es-css
B., G. (9 de agosto de 2021). ¿Qué es HTML? Explicación de los fundamentos del Lenguaje
de marcado de hipertexto. Obtenido de Hostinger Tutoriales:
https://www.hostinger.mx/tutoriales/que-es-html
Chapaval, N. (2018). Qué es Frontend y Backend: diferencias y caracteriticas. Obtenido de
Platzi: https://platzi.com/blog/que-es-frontend-y-backend/
Geek, E. (26 de marzo de 2020). ¿Qué es ReactJS? Conceptos básicos. Obtenido de if geek
then: https://ifgeekthen.nttdata.com/es/que-es-reactjs-conceptos-basicos
Gima, N. (30 de septiembre de 2019). La evolución del diseño web. Obtenido de HostGator:
https://www.hostgator.mx/blog/evolucion-del-diseno-web/
González, C. C. (24 de julio de 2017). Evolucion del desarrollo web del lado del cliente.
Obtenido de Tecnologia++: https://informatica.blogs.uoc.edu/evolucion-del-desarrollo-
web-del-lado-del-cliente/
Pérez, E. I. (1 de marzo de 2019). ¿Qué Es Vue.JS? Obtenido de Codigofacilito:
https://codigofacilito.com/articulos/que-es-vue
Ramos, R. (30 de septiembre de 2020). ¿Qué es JavaScript y para qué sirve? Obtenido de Soy
Rafa Ramos: https://soyrafaramos.com/que-es-javascript-para-que-sirve/
Unión, C. T. (2020). Historia del concepto Full Stack. Obtenido de Union:
https://union.cat/es/historia-full-stack
Varios. (12 de abril de 2020). Bootstrap: guía para principiantes de qué es, por qué y cómo
usarlo. Obtenido de Rockcontent: https://rockcontent.com/es/blog/bootstrap/
Vega, F. (2020). Node.js: Desarrollo Backend con JavaScript. Obtenido de Platzi:
https://platzi.com/backend-javascript/
Villacampa, Ó. (9 de abril de 2021). Qué es SASS y por qué los CSS pueden volver a
divertirnos. Obtenido de ondho: https://www.ondho.com/que-es-sass-y-por-que-los-
css-pueden-volver-a-divertirnos/

36