Want to create interactive content? It’s easy in Genially!

Get started free

Plan de Clase 1

Geovanny Antonio Lara Caal

Created on March 10, 2026

Start designing with a free template

Discover more than 1500 professional designs like these:

Fishbone Diagram

Puzzle Diagram

Gear Diagram

Square Timeline Diagram

Timeline Diagram

Timeline Diagram 3

Timeline Diagram 4

Transcript

Plan de Clase 1

Estructura de datos 2Unidad

Nombre:Geovanny LaraClave:21 6TO Computacion Seccion "A"

Empezar

Frameworks de Frontend

Los frameworks de frontend son aquellos que se utilizan para desarrollar la parte visual de una aplicación web, es decir, todo aquello que el usuario ve e interactúa. Estos frameworks ayudan a estructurar y gestionar la interfaz de usuario, haciéndola más atractiva y funcional.

Siguiente

Año de Creación

Creador

Google

2010 (AngularJS) / 2016 (Angular moderno)

Angular

Este framework de Google es ideal para construir aplicaciones web dinámicas. Es muy completo y viene con una gran cantidad de herramientas integradas, ideal para proyectos de gran escala.

Semejanzas

Angular comparte muchas características con otros frameworks de frontend como React y Vue.js. Todos se utilizan para desarrollar interfaces de usuario interactivas y aplicaciones web modernas.

Versiones

AngularJS, Angular 2, Angular 4, Angular 8, Angular 12, Angular 17+

Creador

Año de Creación

Jordan Walke en Meta Platforms

2013

React

Biblioteca de JavaScript utilizada para construir interfaces de usuario mediante componentes reutilizables.

Semejanzas

React es similar a Angular y Vue.js porque permite crear interfaces web dinámicas mediante componentes reutilizables..

Versiones

React 15, React 16, React 17, React 18

Creador

Año de Creación

Evan You

2014

Vue.js

Aunque es más ligero que React o Angular, Vue.js ha ganado mucha popularidad por su facilidad de uso y su flexibilidad, lo que lo hace perfecto para proyectos tanto grandes como pequeños.

Semejanzas

Vue.js comparte características con Angular y React, ya que se utiliza para desarrollar interfaces de usuario modernas y aplicaciones web interactivas.

Versiones

Vue 1, Vue 2, Vue 3

Creador

Año de Creación

Mark Otto y Jacob Thornton en Twitter

2011

Bootstrap

Framework de CSS utilizado para diseñar páginas web responsivas y adaptables a diferentes dispositivos.

Semejanzas

Versiones

Bootstrap comparte características con otros frameworks de diseño como Foundation y Semantic UI. Todos ayudan a crear interfaces web responsivas

Bootstrap 3, Bootstrap 4, Bootstrap 5

Creador

Año de Creación

Adam Wathan

2017

Tailwind CSS

Framework CSS basado en clases utilitarias para diseñar interfaces modernas.

Semejanzas

Tailwind CSS es similar a Bootstrap y Foundation porque se utiliza para diseñar interfaces web modernas y responsivas.

Versiones

1.x, 2.x, 3.x

Creador

Año de Creación

Rich Harris

2016

Svelte

Framework de JavaScript que compila el código en JavaScript optimizado durante el proceso de construcción.

Semejanzas

Svelte comparte características con frameworks como React y Vue.js porque permite crear interfaces de usuario interactivas y aplicaciones web dinámicas.

Versiones

Svelte 3, Svelte 4

Creador

Año de Creación

Yehuda Katz

2011

Ember.js

Framework de JavaScript diseñado para crear aplicaciones web escalables.

Semejanzas

Ember.js es similar a Angular porque proporciona un framework completo para desarrollar aplicaciones web grandes y estructuradas.

Versiones

Ember 1.x, Ember 2.x, Ember 3.x, Ember 4.x

Creador

Año de Creación

Jeremy Ashkenas

2010

Backbone.js

Framework ligero que proporciona estructura para aplicaciones web con modelos y vistas.

Semejanzas

Backbone.js comparte características con frameworks como Angular y Ember porque permite estructurar aplicaciones web utilizando modelos y vistas.

Versiones

0.x, 1.x

Creador

Año de Creación

ZURB

2011

Foundation

Framework frontend avanzado para desarrollar sitios web responsivos.

Semejanzas

Foundation es similar a Bootstrap porque permite crear sitios web responsivos con componentes de interfaz.

Versiones

Foundation 4, 5, 6

Creador

Año de Creación

Jack Lukic

2013

Semantic UI

Framework de frontend que utiliza nombres de clases fáciles de entender para crear interfaces.

Semejanzas

Semantic UI es similar a Bootstrap y Foundation porque incluye componentes listos para usar para crear interfaces web.

Versiones

1.x, 2.x

Tecnologías Implementa

TypeScript, HTML, CSS, JavaScript, RxJS.

Ejemplos aplicados

Aplicaciones empresariales, paneles administrativos, sistemas financieros, aplicaciones bancarias y plataformas educativas.

Logo

Diferencias

Angular es considerado un framework completo, mientras que React es principalmente una biblioteca. Angular utiliza TypeScript como lenguaje principal, lo que permite escribir código más estructurado y con mejor mantenimiento en proyectos grandes. Además, Angular incluye herramientas integradas para rutas, formularios, validación y manejo de datos.

Sitio oficial

lhttps://angular.io

Tecnologías Implementa

JavaScript, JSX, HTML, CSS.

Ejemplos aplicados

Facebook, Instagram, Netflix, Airbnb.

Logo

Diferencias

React se enfoca principalmente en la capa de presentación de la interfaz, por lo que necesita herramientas adicionales para manejar rutas, estados o bases de datos. Utiliza Virtual DOM, lo que mejora el rendimiento de las aplicaciones al actualizar solo los elementos necesarios.

Sitio oficial

https://react.dev

Ejemplos aplicados

Alibaba, Xiaomi.

Logo

Sitio oficial

https://vuejs.org

Tecnologías Implementa

JavaScript, HTML, CSS.

Diferencias

Vue.js es considerado más ligero y fácil de aprender que Angular. Además, combina características de Angular y React, lo que lo hace flexible para proyectos pequeños y grandes.

Sitio oficial

https://getbootstrap.com

Ejemplos aplicados

Sitios web corporativos, blogs, paneles administrativos.

Tecnologías Implementa

HTML, CSS, JavaScript.

Diferencias

Bootstrap incluye componentes prediseñados, como botones, menús, formularios, tarjetas y barras de navegación. Esto permite desarrollar interfaces rápidamente sin diseñar cada elemento desde cero.

Logo

Sitio oficial

https://tailwindcss.com

Ejemplos aplicados

Aplicaciones web modernas y startups.

Tecnologías Implementa

HTML, CSS, JavaScript.

Diferencias

A diferencia de Bootstrap, Tailwind CSS no incluye componentes prediseñados. En su lugar utiliza clases utilitarias, lo que permite mayor flexibilidad para diseñar interfaces personalizadas.

Logo

Logo

Tecnologías Implementa

JavaScript, HTML, CSS.

Sitio oficial

https://svelte.dev

Ejemplos aplicados

Aplicaciones web rápidas y ligeras.

Diferencias

Svelte no utiliza Virtual DOM. En cambio, compila el código durante la construcción del proyecto, lo que reduce el tamaño de las aplicaciones y mejora el rendimiento.

Logo

Sitio oficial

https://emberjs.com

Diferencias

Ember tiene una estructura muy definida que facilita el desarrollo en equipos grandes. Incluye herramientas integradas para rutas, manejo de datos y desarrollo de aplicaciones SPA.

Tecnologías Implementa

JavaScript, HTML, CSS.

Ejemplos aplicados

Aplicaciones web empresariales.

Tecnologías Implementa

JavaScript, HTML, CSS.

Sitio oficial

https://backbonejs.org

Ejemplos aplicados

Aplicaciones web pequeñas.

Logo

Diferencias

Backbone.js es mucho más ligero y simple que otros frameworks. Proporciona una estructura básica pero requiere bibliotecas adicionales para funcionalidades avanzadas.

Ejemplos aplicados

Sitios corporativos y empresariales.

Logo

Tecnologías Implementa

HTML, CSS, JavaScript.

Diferencias

Foundation ofrece mayor flexibilidad para desarrolladores avanzados y permite personalizar los componentes de forma más detallada.

Sitio oficial

https://get.foundation

Diferencias

Utiliza nombres de clases semánticos y fáciles de entender, lo que facilita la lectura y el mantenimiento del código.

Sitio oficial

https://semantic-ui.com

Tecnologías Implementa

HTML, CSS, JavaScript.

Ejemplos aplicados

Interfaces modernas y paneles administrativos.

Logo