SlideShare una empresa de Scribd logo

Front end

Tecnologias Front-End

1 de 13
Descargar para leer sin conexión
TECNOLOGÍAS
FRONT-END
Desarrollo de aplicaciones web
¿Qué son las Tecnologías front-end?
■ Es un conjunto de tecnologías que se utilizan en el
desarrollo de la interfaz de usuario de aplicaciones y
paginas web.
■ Con la ayuda de tecnologías front-end los
desarrolladores crean el diseño, la estructura la
animación y todo lo que ves en las pantallas.
Beneficios de las tecnologías Front-end
Plantillas y
elementos
reutilizables
Automatización
de tareas
Depuración de
Código
Mejora de
productividad
Facilita el
proceso de
desarrollo
Algunas Tecnologías
Existen miles de tecnologías de front-end disponibles en el mercado cada una
tiene numerosas opciones aunque la elección perfecta depende de los
requerimientos del proyecto.
Npm
Es el Node Package Manager que
viene incluido y ayuda a cada
desarrollo asociado a Node, Tiene
colecciones públicas y privadas
de paquetes de código fuente
para aplicaciones móviles,
aplicaciones web, robots,
enrutadores etc.
Vue.js
Es un framework progresivo para
construir interfaces de usuario. La
librería central está enfocada solo
en la capa de visualización, y es
fácil de utilizar e integrar con
otras librerías o proyectos
existentes.

Recomendados

Desarrollos de aplicaciones móviles con tecnologías web
Desarrollos de aplicaciones móviles con tecnologías webDesarrollos de aplicaciones móviles con tecnologías web
Desarrollos de aplicaciones móviles con tecnologías webJulio Alfaro
 
Frameworks de Javascript Lema-Rosero
Frameworks de Javascript Lema-RoseroFrameworks de Javascript Lema-Rosero
Frameworks de Javascript Lema-RoseroDanielRosero23
 
La importancia del frontend y backend en un proyecto
La importancia del frontend y backend en un proyectoLa importancia del frontend y backend en un proyecto
La importancia del frontend y backend en un proyectoAptitud Emprendedora
 

Más contenido relacionado

La actualidad más candente

La actualidad más candente (18)

Info
InfoInfo
Info
 
Visual studio CodeSpaces
Visual studio CodeSpacesVisual studio CodeSpaces
Visual studio CodeSpaces
 
Mvc + html5 + css3
Mvc + html5 + css3Mvc + html5 + css3
Mvc + html5 + css3
 
MEJORES PROGRAMAS PARA DISEÑAR PAGINA WEB
MEJORES PROGRAMAS PARA DISEÑAR PAGINA WEBMEJORES PROGRAMAS PARA DISEÑAR PAGINA WEB
MEJORES PROGRAMAS PARA DISEÑAR PAGINA WEB
 
Entorno de Programacion
Entorno de ProgramacionEntorno de Programacion
Entorno de Programacion
 
Dreamweaver
DreamweaverDreamweaver
Dreamweaver
 
Alberto romario creo lópez
Alberto romario creo lópezAlberto romario creo lópez
Alberto romario creo lópez
 
SOINLABS - TechTalk - WEBGL
SOINLABS - TechTalk - WEBGLSOINLABS - TechTalk - WEBGL
SOINLABS - TechTalk - WEBGL
 
Dreamweaver
DreamweaverDreamweaver
Dreamweaver
 
Silverlight
SilverlightSilverlight
Silverlight
 
Microsoft Developer Day UNED-CR
Microsoft Developer Day UNED-CRMicrosoft Developer Day UNED-CR
Microsoft Developer Day UNED-CR
 
Asp.net jose luis encarnación #11
Asp.net jose luis encarnación #11Asp.net jose luis encarnación #11
Asp.net jose luis encarnación #11
 
javascript
javascriptjavascript
javascript
 
Lenguajes y frameworks para desarrollo web
Lenguajes y frameworks para desarrollo webLenguajes y frameworks para desarrollo web
Lenguajes y frameworks para desarrollo web
 
Webinar: Introducción a Angular
Webinar: Introducción a AngularWebinar: Introducción a Angular
Webinar: Introducción a Angular
 
Webassembly, Blazor y Javascript, una combinación explosiva
Webassembly, Blazor y Javascript, una combinación explosivaWebassembly, Blazor y Javascript, una combinación explosiva
Webassembly, Blazor y Javascript, una combinación explosiva
 
Javacript
JavacriptJavacript
Javacript
 
Presentación1 de w.,jlgvjdfmkhgvfd
Presentación1 de w.,jlgvjdfmkhgvfdPresentación1 de w.,jlgvjdfmkhgvfd
Presentación1 de w.,jlgvjdfmkhgvfd
 

Similar a Front end

APPSWEBI4.0.pptx
APPSWEBI4.0.pptxAPPSWEBI4.0.pptx
APPSWEBI4.0.pptx22040086
 
Trade-Off sobre Tecnologías Web
Trade-Off sobre Tecnologías WebTrade-Off sobre Tecnologías Web
Trade-Off sobre Tecnologías WebMiguel Angel Macias
 
itio de realizacion de un blog blogs blogspot
itio de realizacion de un blog blogs blogspotitio de realizacion de un blog blogs blogspot
itio de realizacion de un blog blogs blogspotpaolatublog
 
Israel tecnologias para desarrollo-web
Israel tecnologias para desarrollo-webIsrael tecnologias para desarrollo-web
Israel tecnologias para desarrollo-webimei_02
 
Visual Web Developer.Html
Visual Web Developer.HtmlVisual Web Developer.Html
Visual Web Developer.Htmldiana
 
Proyecto de Aplicación-Implementación de una INTRANET = Colegio Sagrado Coraz...
Proyecto de Aplicación-Implementación de una INTRANET = Colegio Sagrado Coraz...Proyecto de Aplicación-Implementación de una INTRANET = Colegio Sagrado Coraz...
Proyecto de Aplicación-Implementación de una INTRANET = Colegio Sagrado Coraz...Ianpierr Miranda
 
Desarrollo de aplicaciones .net
Desarrollo de aplicaciones .netDesarrollo de aplicaciones .net
Desarrollo de aplicaciones .netJefersonGuevara1
 
Desarrollo de aplicaciones .net
Desarrollo de aplicaciones .netDesarrollo de aplicaciones .net
Desarrollo de aplicaciones .netJefersonGuevara1
 
Instalacion adobe dream weaver
Instalacion adobe dream weaverInstalacion adobe dream weaver
Instalacion adobe dream weaverLuis Viteri
 
los-diferentes-lenguajes-de-programacion-para-la-web
 los-diferentes-lenguajes-de-programacion-para-la-web los-diferentes-lenguajes-de-programacion-para-la-web
los-diferentes-lenguajes-de-programacion-para-la-webolguisf
 
los diferentes lenguajes de programación para-la-web
 los diferentes lenguajes de programación para-la-web los diferentes lenguajes de programación para-la-web
los diferentes lenguajes de programación para-la-webolguisf
 

Similar a Front end (20)

APPSWEBI4.0.pptx
APPSWEBI4.0.pptxAPPSWEBI4.0.pptx
APPSWEBI4.0.pptx
 
Trade-Off sobre Tecnologías Web
Trade-Off sobre Tecnologías WebTrade-Off sobre Tecnologías Web
Trade-Off sobre Tecnologías Web
 
Paola
PaolaPaola
Paola
 
Paola
PaolaPaola
Paola
 
itio de realizacion de un blog blogs blogspot
itio de realizacion de un blog blogs blogspotitio de realizacion de un blog blogs blogspot
itio de realizacion de un blog blogs blogspot
 
Paola
PaolaPaola
Paola
 
Paola
PaolaPaola
Paola
 
Paola 1001 jt
Paola 1001 jtPaola 1001 jt
Paola 1001 jt
 
Israel tecnologias para desarrollo-web
Israel tecnologias para desarrollo-webIsrael tecnologias para desarrollo-web
Israel tecnologias para desarrollo-web
 
Visual Web Developer.Html
Visual Web Developer.HtmlVisual Web Developer.Html
Visual Web Developer.Html
 
Proyecto de Aplicación-Implementación de una INTRANET = Colegio Sagrado Coraz...
Proyecto de Aplicación-Implementación de una INTRANET = Colegio Sagrado Coraz...Proyecto de Aplicación-Implementación de una INTRANET = Colegio Sagrado Coraz...
Proyecto de Aplicación-Implementación de una INTRANET = Colegio Sagrado Coraz...
 
Desarrollo de aplicaciones .net
Desarrollo de aplicaciones .netDesarrollo de aplicaciones .net
Desarrollo de aplicaciones .net
 
Desarrollo de aplicaciones .net
Desarrollo de aplicaciones .netDesarrollo de aplicaciones .net
Desarrollo de aplicaciones .net
 
Tecnologias de desarrollo web
Tecnologias de desarrollo webTecnologias de desarrollo web
Tecnologias de desarrollo web
 
Instalacion adobe dream weaver
Instalacion adobe dream weaverInstalacion adobe dream weaver
Instalacion adobe dream weaver
 
los-diferentes-lenguajes-de-programacion-para-la-web
 los-diferentes-lenguajes-de-programacion-para-la-web los-diferentes-lenguajes-de-programacion-para-la-web
los-diferentes-lenguajes-de-programacion-para-la-web
 
los diferentes lenguajes de programación para-la-web
 los diferentes lenguajes de programación para-la-web los diferentes lenguajes de programación para-la-web
los diferentes lenguajes de programación para-la-web
 
Capitulo1
Capitulo1Capitulo1
Capitulo1
 
Capitulo1
Capitulo1Capitulo1
Capitulo1
 
Tarea 6
Tarea 6Tarea 6
Tarea 6
 

Más de Luis Alberto IC

Más de Luis Alberto IC (6)

EtherChannel.pptx
EtherChannel.pptxEtherChannel.pptx
EtherChannel.pptx
 
Modem dial up pstn
Modem dial up pstnModem dial up pstn
Modem dial up pstn
 
Sistema o
Sistema oSistema o
Sistema o
 
Tipos ecommerce
Tipos ecommerceTipos ecommerce
Tipos ecommerce
 
Ecommerce
EcommerceEcommerce
Ecommerce
 
Usabilidad
UsabilidadUsabilidad
Usabilidad
 

Front end

  • 2. ¿Qué son las Tecnologías front-end? ■ Es un conjunto de tecnologías que se utilizan en el desarrollo de la interfaz de usuario de aplicaciones y paginas web. ■ Con la ayuda de tecnologías front-end los desarrolladores crean el diseño, la estructura la animación y todo lo que ves en las pantallas.
  • 3. Beneficios de las tecnologías Front-end Plantillas y elementos reutilizables Automatización de tareas Depuración de Código Mejora de productividad Facilita el proceso de desarrollo
  • 4. Algunas Tecnologías Existen miles de tecnologías de front-end disponibles en el mercado cada una tiene numerosas opciones aunque la elección perfecta depende de los requerimientos del proyecto.
  • 5. Npm Es el Node Package Manager que viene incluido y ayuda a cada desarrollo asociado a Node, Tiene colecciones públicas y privadas de paquetes de código fuente para aplicaciones móviles, aplicaciones web, robots, enrutadores etc.
  • 6. Vue.js Es un framework progresivo para construir interfaces de usuario. La librería central está enfocada solo en la capa de visualización, y es fácil de utilizar e integrar con otras librerías o proyectos existentes.
  • 7. Angular Es un framework opensource desarrollado por Google para facilitar la creación y programación de aplicaciones web de una sola página, las webs SPA (Single Page Application). Evita escribir código repetitivo y mantiene todo más ordenado gracias a su patrón MVC (Modelo- Vista-Controlador) asegurando los desarrollos con rapidez.
  • 8. React Es una librería que ayuda a crear interfaces de usuario interactivas de forma sencilla. Diseña vistas simples para cada estado en tu aplicación, y React se encargará de actualizar y renderizar de manera eficiente los componentes correctos cuando los datos cambien.
  • 9. Bootstrap Es una biblioteca que permite desarrollar aplicaciones web y sitios mobile first, 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.
  • 10. CodeKit Es una aplicación que te permite crear sitios web más rápido. Reúne todos los lenguajes de vanguardia como Sass, Less, Stylus y CoffeeScript. Además, combina, minimiza y verifica la sintaxis de JavaScript y optimiza las imágenes..
  • 11. Meteor Es una nueva infraestructura de JavaScript que tiene como objetivo automatizar y simplificar el desarrollo de aplicaciones web que actúan en tiempo real . Usa la comunicación en tiempo real mediante un protocolo llamado Distributed Data Protocol (DDP),
  • 12. Tailwindcss Es un framework CSS que permite un desarrollo ágil, basado en clases de utilidad que se pueden aplicar con facilidad en el código HTML y unos flujos de desarrollo que permiten optimizar mucho el peso del código CSS.
  • 13. Bibliografía. ■ A., D. (27 de Enero de 2020). ¿Qué es npm? Una introducción básica para principiantes. Obtenido de Glosario JavaScript: https://www.hostinger.mx/tutoriales/que-es-npm ■ desarrolloweb. (s.f.). Tailwind CSS. Obtenido de https://desarrolloweb.com/home/tailwind-css ■ DEVS, B. Q. (16 de Septiembre de 2019). ¿Qué es Angular y para qué sirve? Obtenido de https://www.qualitydevs.com/2019/09/16/que-es-angular-y-para-que-sirve/ ■ Juagardo, P. (12 de Diciembre de 2020). Bootstrap: guía para principiantes de qué es, por qué y cómo usarlo. Obtenido de https://rockcontent.com/es/blog/bootstrap/ ■ Platzi. (2015). Herramientas gráficas para optimizar tu tiempo como programador. Obtenido de https://platzi.com/blog/herramientas-para- programadores/#:~:text=Codekit%20es%20un%20programa%20que,Expanded ■ React. (s.f.). Declarativo. Obtenido de https://es.reactjs.org/ ■ Sharma, S. (Julio de 03 de 2020). 15 Top Front-End Technologies To Rule The Market in 2020 & Beyond. Obtenido de Web App Development: https://www.credencys.com/blog/front-end- technologies/ ■ TOOIT BLOG. (22 de Julio de 2017). METEOR JS: ¿QUÉ ES Y CÓMO LO UTILIZAMOS? Obtenido de https://www.tooit.com/es/meteor-js-que-es/ ■ Vue.js. (s.f.). Qué es Vue.js? Obtenido de Introduccion: https://es.vuejs.org/v2/guide