Tecnologías Frontend

Emili Daniela Sosa

Instituto tecnológico, Juan Bautista Aguirre

4B Programación De Aplicaciones Web

ING. Jonathan Merino

23 de Noviembree del 2023

 Índice
Tecnologías Frontend 1
INTRODUCCIÓN 3
OBJETIVOS GENERALES 5
OBJETIVOS ESPECIFICOS: 5
DESARROLLO 6
Historia del FrontEnd 6
¿Qué es el FrontEnd? 8
Tecnologías FrontEnd 9
Historia de HTML 10
Uso de Html 12
Versiones de HTML 13
Historia de CSS 15
Uso de CSS 17
Versiones de CSS 18
Historia de JavaScript19
Uso de JavaScript 21
Versiones de JavaScript 22
CONCLUSIONES 23
RECOMENDACIONES 23
Bibliografía 24

INTRODUCCIÓN

Frontend se refiere a la capa de un sistema informático que interactúa directamente con el

usuario final y proporciona una interfaz gráfica y una experiencia de usuario. La constante evolu

ción de la tecnología front-end ha cambiado la forma en que interactuamos con la web y las aplic

aciones.

El desarrollo frontend ha avanzado mucho en los últimos años. Si bien las tecnologías tradicion

ales como HTML, CSS y JavaScript siguen siendo esenciales, ahora se pueden combinar con her

ramientas y marcos modernos para crear aplicaciones web más rápidas, eficientes y atractivas.
Uno de los cambios más notables es el surgimiento de marcos de JavaScript como React, Angula

r y Vue.js. Estos marcos facilitan la creación de interfaces de usuario interactivas y dinámicas, lo

que permite a los desarrolladores crear aplicaciones más sólidas y escalables. Además, la introdu

cción de arquitecturas como el diseño de componentes ha hecho que el código sea más fácil de m

antener y reutilizar.

La optimización del rendimiento también fue un foco del desarrollo front-end. Herramien

tas como Webpack y Babel permiten la transpilación y la gestión eficiente de dependencias, lo q

ue hace que sus aplicaciones se carguen más rápido. Además, nos centramos en el diseño respo

nsivo, para que la interfaz se vea y funcione bien en diferentes dispositivos y tamaños de pantal

la.

La tendencia de la programación declarativa se está volviendo cada vez más popular, permitien

do a los desarrolladores explicar "cuál" debería ser un resultado deseado, en lugar de instrucc

iones paso a paso "cómo" se debe lograr. Esto se expresa en la introducción de lenguajes y enfo

ques como la programación reactiva con bibliotecas como JSX y RxJS en React.
 OBJETIVOS GENERALES

 Crear interfaces de usuario atractivas y funcionales.

 Mejorar la experiencia del usuario al utilizar aplicaciones web.

 Garantizar la compatibilidad con diferentes dispositivos y navegadores.

 Mantener el código limpio, organizado y fácil de mantener.

 Producir aplicaciones web de alta calidad que cumplan con los requisitos del
cliente y los usuarios finales.

OBJETIVOS ESPECIFICOS:
  Integrar correctamente con servicios externos,
como APIs, para obtener y mostrar datos de manera eficiente.

 Aplicar principios de diseño UX/UI para crear una experiencia de usuario

intuitiva y agradable.

 Utilizar frameworks y bibliotecas modernas para agilizar el proceso de desarrollo

y mejorar la calidad del producto final.

DESARROLLO

Historia del FrontEnd

En los primeros días de la web, los sitios web eran principalmente estáticos y se creaban

utilizando HTML para la estructura y CSS para el diseño.

La interactividad era limitada y se lograba a través de elementos simples como enlaces y

formularios.

La introducción de JavaScript y el Modelo de objetos de documento (DOM) ha permitido

a los desarrolladores agregar interactividad y dinamismo a sus sitios web.

Han surgido bibliotecas y marcos como jQuery para simplificar el desarrollo front-end.

En la década de 2010 Los frameworks front-end más potentes y estructurados se hicieron

populares, incluidos AngularJS, React.js y Vue.js.

Las aplicaciones de página única (SPA) se han vuelto populares, lo que permite una

experiencia de usuario más fluida sin tener que recargar toda la página.
 La década de 2010 también vio un aumento en las

herramientas de desarrollo, como Webpack, Babel y npm, que facilitaron la gestión de

dependencias y la construcción de aplicaciones más complejas.

Los preprocesadores CSS, como Sass y Less, se hicieron populares para mejorar la

eficiencia en el desarrollo de estilos.

El mayor uso de teléfonos inteligentes y tabletas ha hecho que la optimización de los

dispositivos móviles sea esencial.

Una arquitectura de componentes unificada facilita el desarrollo y mantenimiento de

grandes aplicaciones de front-end.

Mayor soporte para aplicaciones web progresivas (PWA) para mejorar la experiencia del

usuario en dispositivos móviles y en condiciones adversas de la red.

A medida que la conciencia sobre la accesibilidad web creció, los desarrolladores

comenzaron a centrarse más en la creación de experiencias web inclusivas y accesibles.

Se desarrollaron estándares como Web Content Accessibility Guidelines (WCAG) para

guiar a los desarrolladores en la creación de sitios web accesibles.

El desarrollo continúa integrando tecnologías como WebAssembly para mejorar el

rendimiento y la capacidad de ejecutar código en el navegador.

GraphQL está ganando cada vez más aceptación como una alternativa eficiente para la

manipulación de datos front-end.

 ¿Qué es el FrontEnd?
El front end se encarga de diseñar páginas que presenten información a los usuarios de

forma agradable.

El frontend es la parte de un sistema informático que se encarga de la interfaz de usuario.

Es la parte visible y con la que interactúan los usuarios. El frontend se encarga de mostrar la

información de manera visual y de permitir la interacción del usuario con el sistema. Esto

incluye el diseño, la disposición de elementos, la navegación y la experiencia de usuario en

general.

Hay muchas tecnologías relacionadas con estos tres lenguajes que los desarrolladores de

aplicaciones para el usuario deben conocer. Por ejemplo, para JavaScript, hay

soporte para Angular y bibliotecas como BackboneJS, AnimateCSS y JQuery.

También hay lenguajes de transferencia de información como XML, JSON y Ajax para

realizar solicitudes al servidor sin actualizar toda la página.

 Tecnologías FrontEnd
Las tecnologías de frontend música herramientas y tecnologías utilizadas para trazar

interfaces de afortunado interactivas en un corte web. Algunas de las tecnologías más populares

en el frontend incluyen:

HTML (lenguaje de marcado de hipertexto): este es un lenguaje de marcado utilizado

para estructurar el contenido de un sitio web.

CSS (hojas de estilo en cascada): se utiliza para diseñar y mejorar la apariencia de un

sitio web.

JavaScript: lenguaje de programación utilizado para agregar funcionalidad y hacer que

los sitios web sean interactivos.

 Frameworks JavaScript: Son un conjunto de

herramientas y bibliotecas que facilitan el desarrollo de aplicaciones web como: B. Reaccionar,

Angular o Vue.

Diseño Web Responsive: Esta es una tecnología que permite personalizar el diseño y

apariencia de tu sitio web en diferentes dispositivos como teléfonos móviles y tablets.

Preprocesadores de CSS: estas son herramientas como Sass y Less que le permiten crear

CSS con funcionalidad adicional de manera más eficiente.

Historia de HTML
La historia y desarrollo del lenguaje de marcado, Hypertext Mark Up Language (de aquí

en adelante HTML), es una historia llena de necesidades y desarrollos realizados en un entorno

de innovación totalmente dinámico y colaborativo, en el cual se mezclan intereses de empresas

privadas, con deseos de estandarización de consorcios

Entre la multitud de desarrollos paralelos que se dan cita en el desarrollo de «la red»,

cabe destacar que a pesar de la complejidad de los cambios realizados, se realizan con gran

rapidez y con una gran cantidad de actores implicados en ellos, en un corto espacio de tiempo.

Esto es debido al carácter democratizador de la red y de las dinámicas de empoderamiento y

gobernanza en red que siempre han estado presentes en el desarrollo de las gemos la

constitución de las entidades que hoy en día dirigen la Web, señalamos algunas de las

innovaciones más
 significativas y los primeros conflictos de intereses que

surgen en el entramado de actores públicos, privados y organizaciones diversas. Por último, y

como apéndice, señalamos tecnologías y asociaciones que merecen un epígrafe aparte de esta

retrospectiva y la

famosa «Guerra de Navegadores» que ha tenido grandes consecuencias en

el camino de compañías, estándares y modelos de negocio.

Este es un lenguaje de marcado de texto que permite a los navegadores conectados

interpretar páginas solicitadas desde un servidor. Este no es un lenguaje de programación y no

existe un compilador1

. Por lo tanto, los errores en los documentos que este idioma interpreta aparecerán como

si no se entendieran.

El lenguaje HTML se basa principalmente en un sistema de etiquetas que le indica al

navegador dónde está el cuerpo del documento (Rodríguez, 2006), cuándo colorear el texto, etc.

Debido a las limitaciones de HTML, vea cómo se desarrollan "lenguajes auxiliares" como CSS

(Cascading Style Sheets) y JavaScript para implementar estilos y realizar acciones en

documentos web.
 Uso de Html
HTML es la tecnología subyacente para el desarrollo de sitios web. Es un lenguaje de

marcado utilizado para estructurar y organizar el contenido de un sitio web. Puede utilizar

etiquetas HTML para definir títulos, párrafos, listas, enlaces, imágenes y más.

ejemplos de etiquetas HTML comunes:

- `<html>`: Define el inicio y el final del documento HTML.

- `<head>`: Contiene información sobre el documento, como el título y los estilos CSS.

- `<body>`: Contiene el contenido visible del sitio web, como texto, imágenes,

enlaces, etc.

- `<h1>`, `<h2>`, `<h3>`: Definen encabezados de diferentes niveles.

- `<p>`: Crea párrafos de texto.

 - `<a href="URL">`: Crea un enlace hacia otra página

web.

- `<img src="URL" alt="descripción">`: Inserta una imagen en la página.

- `<ul>`, `<ol>`, `<li>`: Crea listas no ordenadas y ordenadas.

Versiones de HTML

A lo largo de los años, han existido varias versiones de HTML para mejorarlo y agregar

nuevas funciones.

Ejemplo:

HTML: la primera versión de HTML lanzada en 1993. Formó la base del desarrollo de

Internet y estableció los elementos básicos de la estructura de la página web.

HTML 2.0: lanzada en 1995, esta versión mejoró la semántica y la compatibilidad con los

navegadores contemporáneos.

HTML 3.2: Lanzada en 1997, esta versión agregó más elementos y atributos, así como

soporte para tablas y formularios.

 HTML 4.01: lanzada en 1999, esta versión fue una actualización importante que incluyó

mejoras de accesibilidad, conjuntos de marcos y estilos CSS.

XHTML (HTML 4.01 en formato XML): Introducido en el año 2000, XHTML combina

las reglas de XML con la sintaxis de HTML. Esta versión enfatiza la estructura estricta y bien

formada de los documentos HTML.

.HTML5: Lanzado en 2014, HTML5 es la versión más reciente y potente de HTML.

Presentamos nuevas etiquetas y atributos, soporte de video y audio, capacidades de

almacenamiento local, diseño responsivo y más.

HTML Living Standard (Continuo):En lugar de lanzar nuevas versiones, HTML ahora

sigue un modelo de especificación viva, conocida como "HTML Living Standard".

Se actualiza continuamente para reflejar el estado actual del desarrollo web y las

implementaciones de los navegadores.

 Historia de CSS

En 1996, se introdujo la primera versión de CSS como parte de la especificación

HTML 4.0.

Permite un control básico sobre el diseño y la apariencia de los documentos HTML.

En 1998 se introdujeron muchas características nuevas, incluida la alineación de

elementos, la tipografía mejorada y la compatibilidad con hojas de estilo en cascada.

El concepto de "cascada" se refiere a una jerarquía de estilos que pueden anularse o

heredarse.

CSS Nivel 2 Revisión 1 (2004) Se corrigieron errores y se agregaron algunas

características nuevas a CSS2.

 CSS Nivel 2.1 (2011) Versión revisada que soluciona

varios problemas y aclara ciertos aspectos del lenguaje.

No introdujo muchas características nuevas, pero sirvió como una versión más estable de

CSS2.

CSS Nivel 3 (en desarrollo desde 1999) Introduce muchas características nuevas y

mejoras.

Se agregó soporte para selectores avanzados, sombras, transiciones, animaciones,

propiedades Flexbox y Grid.

Los módulos individuales fueron desarrollados y adoptados independientemente unos de

otros y están sujetos a un desarrollo continuo.

CSS4 a diferencia de las versiones anteriores, el desarrollo posterior de CSS sigue un

modelo más modular en el que los módulos individuales se desarrollan de forma independiente

unos de otros.

La idea es evitar largos períodos entre lanzamientos importantes y permitir que se

introduzcan nuevas funciones más rápidamente.

CSS sigue siendo una parte esencial del desarrollo web actual.

La implementación de CSS en los navegadores modernos ha mejorado

significativamente, lo que permite a los desarrolladores crear diseños más complejos y atractivos.
 Uso de CSS
CSS se utiliza para diseñar y formatear elementos HTML en un sitio web. Algunos de los

usos más comunes de CSS incluyen:

Diseño y diseño: CSS se utiliza para controlar el diseño y la ubicación de elementos en

las páginas web. Puede definir márgenes, espaciado, tamaño y posición de los elementos.

Estilos de texto: CSS le permite cambiar la fuente, el tamaño, el color y otros atributos

del texto en su sitio web. También puedes aplicar efectos como subrayado, negrita, cursiva y

sombras.
 Colores y fondos: usando CSS, puedes cambiar el color

de fondo de los elementos HTML o aplicar imágenes o degradados como fondos. También puede

definir colores para texto, enlaces y otros elementos.

Imágenes y multimedia: CSS te permite editar imágenes y multimedia en tu sitio web.

Puede aplicar estilos a sus imágenes, como bordes redondeados y efectos de sombra. Además,

puede controlar la reproducción de video y audio usando CSS.

Responsivo y adaptable: CSS le permite crear sitios web responsivos que se adaptan a

diferentes dispositivos y tamaños de pantalla. Las consultas de medios le permiten aplicar

diferentes estilos según el tamaño de la pantalla.

Versiones de CSS
Actualmente existen varias versiones de CSS.

Las versiones principales son:

CSS1: la primera versión de CSS, lanzada en 1996. Presentó los conceptos básicos de los

estilos de diseño, como colores, fuentes, bordes y fondos.

 CSS2: lanzado en 1998 con nuevas funciones como

posicionamiento, flotación y diseño de tabla. También introdujimos soporte para selectores

avanzados y hojas de estilo en cascada.

CSS3: esta es la versión actual de CSS, lanzada como módulo de 1999 a 2017. CSS3

agrega una variedad de características nuevas, incluida la compatibilidad con animaciones,

sombras, transformaciones y medios y diseños responsivos.

Historia de JavaScript
JavaScript fue creado en 1995 por Brendan Eich mientras trabajaba en Netscape

Communications Corporation.

Originalmente llamado "Mocha" y luego "LiveScript", finalmente se le cambió el nombre

a JavaScript para aprovechar la creciente popularidad de Java en ese momento.

Estándar ECMAScript (1997) Para estandarizar JavaScript, Netscape entregó el lenguaje

a Ecma International, que publicó la primera especificación ECMAScript en 1997.

ECMAScript es el estándar subyacente para JavaScript.

IE y Browser Wars (finales de la década de 1990)

Por esta época, JavaScript se implementó en Microsoft Internet Explorer, pero con

algunas diferencias con respecto a otras implementaciones. Esto provocó problemas de

compatibilidad y creó scripts específicos del navegador.

 DOM y AJAX (principios de la década de 2000) La

introducción del modelo de objetos de documento (DOM) permitió a JavaScript interactuar de

forma más dinámica con los elementos de una página web.

AJAX (JavaScript y XML asincrónicos) se ha vuelto popular, lo que permite actualizar el

contenido de una página sin necesidad de volver a cargarlo.

jQuery se lanzó en 2006 y se ha convertido en una biblioteca JavaScript popular para

simplificar tareas comunes y resolver diferencias entre navegadores. La normalización de

DOM con jQuery ayudó a resolver problemas de compatibilidad.

Ryan Dahl presentó Node.js, que permite a los desarrolladores ejecutar JavaScript en el

lado del servidor.

Esto marcó un cambio importante en la forma en que se veía y usaba JavaScript,

expandiendo su uso más allá del navegador.

ECMAScript 6 (también conocido como ES6 o ECMAScript 2015) introdujo las

siguientes mejoras importantes en el lenguaje: B. let y const para clases, funciones de flecha,

estructuración y declaraciones de variables.

Hoy en día, JavaScript es uno de los lenguajes de programación más populares y una

parte esencial del desarrollo web.

El desarrollo del estándar ECMAScript continúa y periódicamente se introducen nuevas

características y mejoras.
 Uso de JavaScript
JavaScript tiene una amplia variedad de usos en el mundo del desarrollo web. Algunos de

los usos más comunes incluyen:

Interactividad en sitios web: JavaScript se utiliza para agregar interactividad a sitios web,

permitiendo realizar acciones como mostrar u ocultar elementos, validar formularios, crear

efectos visuales y mucho más.

Desarrollo de aplicaciones web: Con el uso de frameworks como React, Angular o

Vue.js, se puede desarrollar aplicaciones web completas utilizando JavaScript.

Manipulación del DOM: JavaScript permite acceder y manipular el Document Object

Model (DOM), lo que permite modificar la estructura, el contenido y el estilo de los elementos

HTML de una página.

 Programación del lado del servidor: Gracias a Node.js, JavaScript también puede ser

utilizado para desarrollar aplicaciones del lado del servidor, lo que permite construir servidores

web y APIs.

Desarrollo de juegos: JavaScript cuenta con bibliotecas y frameworks especializados en

el desarrollo de juegos, como Phaser o PixiJS, lo que permite crear juegos interactivos y

divertidos que se ejecutan en el navegador.

Aplicaciones móviles: desarrolle aplicaciones móviles multiplataforma que se ejecuten

tanto en iOS como en Android utilizando JavaScript, utilizando marcos como React Native e

Ionic.

Versiones de JavaScript

Existen varias versiones de JavaScript, las más famosas son:

ECMAScript 5 (ES5): esta es la quinta edición de ECMAScript y es mayoritariamente

compatible con todos los navegadores modernos. Lanzado en 2009, agregó muchas

características nuevas, que incluyen: Ejemplo: modo estricto y el método JSON.parse().

ECMAScript 6 (ES6) o ECMAScript 2015: Lanzado en 2015, presenta varias mejoras y

nuevas características como clases, módulos, funciones de flecha, conjuntos y mapas.

ECMAScript 7 (ES7) o ECMAScript 2016: esta versión se lanzó en 2016 e incluye

características como el operador de energía (**), el método include() para matrices y cadenas,
concatenación opcional (?.) y fusión nula. sido introducido.

(??).

ECMAScript 8 (ES8) o ECMAScript 2017: lanzado en 2017 con funciones adicionales

como async/await para el manejo de promesas, literales de objetos mejorados y un nuevo método

Object.values().

CONCLUSIONES
 La tecnología frontend ha experimentado una evolución constante con nuevas
herramientas, bibliotecas y marcos (frameworks) que surgen regularmente. Esto
ha llevado a mejoras en el rendimiento, la eficiencia y la experiencia del usuario.

 JavaScript sigue siendo el lenguaje dominante en el desarrollo frontend.

Frameworks como React, Angular y Vue.js han ganado popularidad, facilitando la
creación de aplicaciones web interactivas y dinámicas.

 Es importante tener en cuenta que la tecnología frontend sigue evolucionando, y

las tendencias y conclusiones pueden cambiar con el tiempo. Mantenerse
actualizado con las últimas tecnologías y prácticas es esencial para los
profesionales del desarrollo frontend.

RECOMENDACIONES

 El propósito de este estudio no fue solo explicar los antecedentes de la tecnología front-
end, sino también transmitir nuevos conceptos e información que actualmente se están
desarrollando en serio.

La tecnología está transformando el sector financiero y más allá. Puede considerar el

desarrollo de aplicaciones descentralizadas utilizando lenguajes como Solidity y

plataformas como Ethereum.

 Por lo tanto, se recomienda a profesores y estudiantes a

explorar y descubrir nuevas herramientas que les ayudarán a estar un paso por delante de

los demás en términos de desarrollo de sistemas.

Bibliografía
Pérez Ibarra, S. G., Quispe, J. R., Mullicundo, F. F., & Lamas, D. A. (2021).

Herramientas y tecnologías para el desarrollo web desde el FrontEnd al BackEnd. XXIII

Workshop de Investigadores en Ciencias de la Computación (WICC 2021, Chilecito, La Rioja).

http://sedici.unlp.edu.ar/handle/10915/120476

Google Books. (s/f). Com.ec. Recuperado el 22 de noviembre de 2023, de

https://www.google.com.ec/books/edition/DOMINIO_DE_JAVASCRIPT_DEL_FRONT_END

_AL_B/Ux_QEAAAQBAJ?hl=es-

419&gbpv=1&dq=historia+del+frontend&pg=PA66&printsec=frontcover

Google Books. (s/f). Com.ec. Recuperado el 22 de noviembre de 2023, de

https://www.google.com.ec/books/edition/HTML5_Avanzado_1/oaglEAAAQBAJ?hl=es-

419&gbpv=1&dq=tecnologias+frontend&pg=PT5&printsec=frontcover

Tabarés Gutiérrez, R. (2012). El inicio de la Web : historia y cronología del hipertexto

hasta HTML 4.0 (1990-99). ArtefaCToS Revista de estudios sobre la ciencia y la tecnología, 57–

82. https://www.torrossa.com/en/resources/an/3032743

Bortolossi, H. J. (s/f). Criando conteúdos educacionais digitais interativos em matemática

e estatística com o uso integrado de tecnologias: GeoGebra, JavaView, HTML, CSS, MathML e
JavaScript Creating interactive digital educational contents in

mathematics and statistics with the integrated use of technologies: GeoGebra, JavaView, HTML,

CSS, MathML and JavaScript. Edu.co. Recuperado el 22 de noviembre de 2023, de

http://funes.uniandes.edu.co/32287/1/BortolossiHumbertoCriando.pdf

Vértice, E. (2009). Diseño básico de páginas web en HTML. Editorial Vértice.

https://books.google.es/books?

hl=es&lr=&id=Q4VL8Tiy7gcC&oi=fnd&pg=PP2&dq=uso+html&ots=Vl30GVcmvg&sig=fd-

yP_uFuvyaepZjIN3raZycscM#v=onepage&q=uso%20html&f=false

Durango, A. (2015). Diseño Web con CSS: 2a Edición. IT Campus Academy.

https://books.google.es/books?

hl=es&lr=&id=bCXsCgAAQBAJ&oi=fnd&pg=PA11&dq=+css&ots=mKtm5LUs2b&sig=Iwxr

8PgJI4kEKsnEVnCyjYpCsC4#v=onepage&q=css&f=false

1.2. Breve historia de CSS. (s/f). Uniwebsidad.com. Recuperado el 22 de noviembre de

2023, de https://uniwebsidad.com/libros/css/capitulo-1/breve-historia-de-css

Google Books. (s/f). Com.ec. Recuperado el 22 de noviembre de 2023, de

https://www.google.com.ec/books/edition/Aprender_a_desarrollar_con_JavaScript/

nDNwM_5IDLIC?hl=es&gbpv=1&dq=historia+javascript&pg=PA17&printsec=frontcover
 Google Books. (s/f-b). Com.ec. Recuperado el 22 de

noviembre de 2023, de

https://www.google.com.ec/books/edition/JavaScript_y_VBScript/wsflfIQFh6cC?

hl=es&gbpv=1&dq=versiones+javascript&pg=PA13&printsec=frontcover