TECNOLOGIAS PARA LA WEB

Unidad 2
ARQUITECTURA Y TECNOLOGÍAS PARA EL DESARROLLO DE WEB
APPS

Tema 2
TECNOLOGÍAS, BASES DE DATOS Y SERVICIOS PARA LAS
WEBAPPS

Ing. Kevin Castillo Villegas, Msc.

Utilizar auriculares con micrófono.

Utilizar una conexión de internet por cable.

Elegir un lugar tranquilo y sin ruidos.

Ingresar algunos minutos antes de iniciar la videoconferencia.

Silenciar su micrófono.

Levantar la mano para pedir la palabra.

Actividad de Inicio
 Subtemas

• Subtema 1: Tecnologías del cliente

• Subtema 2: Tecnologías del
servidor
 Objetivo

• Identificar las tecnológicas tanto del cliente

como del servidor utilizadas para el
desarrollo de aplicaciones web.
• Conocer como seleccionar la mejor opción
en cuanto a motores de base de datos
para el desarrollo de aplicaciones web,
como también las características y
funcionalidades de los CMS y aplicaciones
enriquecidas para internet.
 Tecnologías del cliente
Características
• Se les conoce como Frontend y estas
corren o se ejecutan a través de un
navegador.
• Se enfocan en el usuario final y su interacción con
la aplicación web.
• Persiguen obtener buenos resultados con respecto
a la experiencia del usuario y la usabilidad.
• Existen tres roles en la programación Frontend:
El Diseñador UI (Diseño de la interfaz), el
Maquetador (Llevar el diseño a código) y el
Programador Frontend (Realiza toda la
programación de la lógica del lado de cliente, por
Fuente: https://bit.ly/3dFzWqO
ejemplo: validación de datos, consumo de API, etc.).
 Tecnologías del cliente
Tecnologías Frontend - HTML
• Es el lenguaje de marcado de hipertexto, y está
diseñado para especificar tanto el contenido como la
estructura de páginas Web de una manera portable,
es el esqueleto de la web y la base de todo.
• HTML en su versión 5, es un nuevo concepto para la
construcción de sitios web y aplicaciones.
básicamente Provee
tres características: estructura, estilo
funcionalidad y
.
• HTML5 es considerado el producto de la combinación
de HTML, CSS y Javascript.
Fuente: https://bit.ly/3yhFIXp
• HTML está a cargo de la estructura, CSS presenta esa
estructura y su contenido en la pantalla y Javascript se
encarga del comportamiento de la página y de la
interacción con el usuario.
Tecnologías del cliente
Tecnologías Frontend - HTML

Fuente: (Gauchat, 2012)

Tecnologías del cliente
Tecnologías Frontend - CSS

• Las hojas de estilo en cascada fueron creadas

para controlar la presentación de la página
definiendo para sus elementos varios aspectos
como colores, tamaños, tipos de letras, posiciones,
espaciados, etc.
• El término en cascada indica que diferentes hojas
de estilo se pueden aplicar sobre la misma página.
• En definitiva, las hojas de estilo son un mecanismo
Fuente: https://bit.ly/3yhFIXp
para separar el formato de representación y
presentación del contenido.
Tecnologías del cliente
Tecnologías Frontend - CSS

Fuente: (Gauchat, 2012)

Tecnologías del cliente

Tecnologías Frontend - JavaScript

• Es un lenguaje de programación
interpretado que se encarga del
comportamiento de una página web y de la
interactividad con el usuario

• JavaScript y Java son dos lenguajes

programaci distintos de
ón con filosofías muy Fuente: https://bit.ly/3yhFIXp
diferentes.
Tecnologías del cliente

Tecnologías Frontend - JavaScript

Fuente: (Mateu, 2004)

Tecnologías del servidor
Características
• A todas las tecnologías de desarrollo web del lado
del servidor se les conoce como Backend, aquí
los programadores tienen más flexibilidad debido a
que estas tecnologías tienen un rango más
amplio de capacidades programables que las
tecnologías Frontend.

• Existen varias tecnologías destinadas a programar la

parte servidor de las aplicaciones web, todas ellas
son muy similares, se basan en los mismos
principios y ofrecen prestaciones y resultados
equivalentes (Luján Mora, 2002). Por ejemplo,
nombrando entre las más utilizadas tenemos a PHP,
Python, Rails, Go, C#, Java, JavaScript, TypeScript,
Ruby, Scala, entre otros. Fuente: https://bit.ly/3xtRqhL
Tecnologías del servidor
Tendencias

Fuente: Google Trends

Tecnologías del servidor
JavaScript
• Se utiliza tanto por el lado del cliente como por el
lado del servidor (Backend con Node.js siendo
este un motor que interpreta JavaScript en el
servidor sin necesidad de un navegador).

• Ahora se puede utilizar el mismo lenguaje en

todos los contextos del desarrollo: JavaScript en el
cliente de escritorio (DOM), en el cliente móvil Fuente: (Rodríguez, 2019)

(Cordova, React Native), en el servidor (Node.js)

o en la BBDD (MongoDB).
Tecnologías del servidor
Java
• Es un lenguaje de programación orientado a objetos
y basadoen C++,es seguro, rápido, confiabley
multiplataforma que se usa para el desarrollo de
aplicaciones que convierten a la Web en un
elemento más interesante y útil.

• Se utiliza para desarrollar aplicaciones empresariales

a gran escala, mejorar la funcionalidad de servidores
Web, proveer aplicaciones en dispositivos para el Fuente: (Oracle, 2021)

consumidor (smartphones, receptores digitales

multimedia y otros más) y para muchos otros
propósitos.
Tecnologías del servidor

PHP

• Es un lenguaje de scripting de uso general popular

que es especialmente adecuado para el desarrollo
web.
• Rápido, flexible y pragmático.
• PHP impulsa todo, desde su blog hasta
los sitios web Fuente: (El Grupo PHP, 2021)
más populares del mundo.
• Puede ser incrustado en HTML
Tecnologías del servidor

Python

• Es un lenguaje de programación de propósito

general de alto nivel interpretado, considerado
como un lenguaje de scripting.
• Es multiparadigma, multiplataforma, fácil, potente,
intuitivo y amigable.
• Lo utilizan aplicaciones como YouTube, Dropbox, Fuente: (Van Baaren, 2021)

Odoo, etc.
Tecnologías del servidor

Go
• Es un lenguaje de programación compilado que
toma ideas de los lenguajes interpretados para
tener una compilación más rápida.
• Go permite compilar cross-platform, es decir es
multiplataforma.
• Combina el poder de lenguajes de más alto nivel Fuente: (Quijada, 2020)
como C y otros como JavaScript y Python, con una
sintaxis fácil de entender.
Tecnologías del servidor

Frameworks para desarrollo web

• Django para Python, este framework lo usan
empresas como Opera, Pixaby, Prezi, Disqus,
Instagram.

• Spring para Java, este framework lo usan

empresas como Wix, TicketMaster y BillGuard.
Existen otros frameworks para Java como, por
ejemplo: Gwt, Jsf, Grails, Struts. Además,
PrimeFaces , RichFaces y IceFaces son librerías de
componentes de la tecnología Java Server Faces
utilizadas para el desarrollo de interfaces de usuario
para la web.
Tecnologías del servidor

Frameworks para desarrollo web

• Laravel para PHP, funciona con aplicaciones web
como comunidades en línea, sitios de comercio
electrónico, aplicaciones de redes sociales, CRM y
sistemas CMS.

• React para JavaScript, en realidad no es un framework

sino una biblioteca Frontend de JavaScript, pero
los desarrolladores lo consideran así por su
potencialidad, por ejemplo, Facebook, Instagram,
Netflix y Apple lo usan.
Tecnologías del servidor

Frameworks para desarrollo web

• Angular para JavaScript, es un framework de Frontend
compatible con la última versión de Chrome, Firefox,
Edge, Android y iOS.
• Express para JavaScript, relacionado con Node.js
empresas como Accenture, IBM y Uber lo utilizan
debido a su flexibilidad, soporte de aplicaciones
completas y API REST.
• Vue.js para JavaScript, es el más reciente. Es un
framework progresivo, esto significa que tu actual
proyecto se puede adaptar a Vue sin ningún
problema.
Tecnologías del servidor
Servidores Web

Fuente: (Briceño, 2014; Bustos, 2021; OpenJs Foundation, 2021; Stackscale,

2021)
Tecnologías del servidor
Stacks utilizados
Variaciones
• NginX en lugar de Apache, PostgreSQL en
lugar de MySQL, o Ruby o Rails en lugar
de PHP. MEAN, MERN Y MEVN a diferencia
de LAMP, estos stacks buscan entregar la
mayor cantidad de carga junto al cliente,
pero requiere una forma muy diferente de
pensar las cosas. También existe un
equivalente en Microsoft que sería Windows
+ Microsoft IIS + .NET + SQL Server Fuente: (Acazia, 2021)
ACTIVIDAD DE CIERRE

¿Cuándo debo iniciar a usar frameworks?

ACTIVIDAD DE CIERRE
Revisión de Contenidos Disponibles

• Aula virtual
• Guía del estudiante
• Compendio
• Video Magistral
• Material
Complementario
Bibliografía
» Acazia. (06 de 2021). Acazia the software development company. Obtenido de MEAN vs MERN vs MEVN vs LAMP Stack for
Development:
https://www.acaziasoft.com/mean-vs-mern-vs-mevn-vs-lamp-stack-for-development.html
» Bartrolí Muñoz, À., Casado Martínez, C., Collell Puig, J., Ferry Mestres, A., González Sancho, M., & Martínez Normand, L. (2018). Tecnologías
y herramientas para el desarrollo web. Obtenido de Introducción al frontend y backend:
http://cv.uoc.edu/annotation/a9c35c372dcee6e6b92afad6993cd048/620334/PID_00250214/PID_00250214.html
» Barzanallana, R. (2019). Universidad de Murcia. Obtenido de Páginas web dinámicas. Desarrollo de Aplicaciones Web. Universidad de
Murcia: https://www.um.es/docencia/barzana/DAWEB/2017-18/daweb-tema-13-paginas-web-dinamicas.html
» Briceño, G. (2014). Club de Tecnología. Obtenido de Java Top 5 Servidores de Aplicación Opensources: https://
www.clubdetecnologia.net/blog/2014/java-top-5-servidores-de-aplicacion-opensources/
» Bustos, G. (2021). Hostinger tutoriales. Obtenido de ¿Qué es Apache? Descripción completa del servidor web Apache: https://
www.hostinger.es/tutoriales/que-es-apache/
» CEFIRE. (2021). Centro de formación, innovación y recursos para el profesorado. Obtenido de Comunicación y apertura de centro a
través de
internet: http://cefire.edu.gva.es/file.php/1/Comunicacion_y_apertura/B3_PaginaWeb/pgina_web_esttica_vs_dinmica.html
» Clark, J. A. (01 de 07 de 2006). Information Today, Inc. Obtenido de AJAX (JavaScript asíncrono y XML): esta no es la Web a la que estoy
acostumbrado: https://www.infotoday.com/Online/nov06/Clark.shtml
» DB-ENGINES. (Julio de 2021). DB-ENGINES. Obtenido de Motores DB: https://db-engines.com/en/
» Deitel, P., Deitel, H., & Deitel, A. (2014). Cómo Programar Internet & World Wide Web. México: Pearson.
» El Grupo PHP. (2021). PHP. Obtenido de https://www.php.net/
» Fernández Alonso, A. (23 de 02 de 2018). Webempresa. Obtenido de ¿Qué es un CMS? Conoce los mejores gestores de contenido:
https://www.webempresa.com/blog/que-es-cms-los-mejores-gestores-de-contenido.html
» Gauchat, J. (2012). El gran libro de HTML5, CSS3 y Javascript (Primera ed.). Barcelona, España: Marcombo, S.A.
Bibliografía
» Glajumedia. (26 de 06 de 2020). Glajumedia . Obtenido de TOP FRAMEWORKS DE
DESARROLLO WEB EN EL 2020: https://www.glajumedia.com/
» ICHI.PRO. (2021). ICHI.PRO. Obtenido de Las 10 bases de datos principales para usar en 2021: https://ichi.pro/es/las-10- bases-de-
datos- principales-para-usar-en-2021-237385666527930
» Instituto Tecnológico de Matehuala. (2015). Programación web. Obtenido de Arquitectura de las
aplicaciones Web:
https://programacionwebisc.wordpress.com/2-1-arquitectura-de-las-aplicaciones-web/
» Inteligencia web. (2021). Inteligencia web. Obtenido de Arquitectura WEB: https://
paginasweb/arquitectura-web.htm
www.inteligenciaweb.com/diseno-
» Luján Mora, S. (2002). Programación de aplicaciones web: Historia, Principios Básicos y Clientes Web. Alicante: Editorial Club
Universitario ECU.
» Mateu, C. (2004). Software Libre. Desarrollo de aplicaciones web. Barcelona: Eureca Media.
» Microsoft. (2021). Microsoft. Obtenido de Estilo de arquitectura de n niveles:
https://docs.microsoft.com/eses/azure/architecture/guide/architecture-styles/n-tier
» OpenJs Foundation. (2021). NodeJs. Obtenido de NodeJs: https://nodejs.org/en/
» Oracle. (2021). Java. Obtenido de ¿Qué es Java?: https://www.java.com/es/about/whatis_java.jsp
» Ort, E., & Basler, M. (2006). Oracle. Obtenido de Estrategias de diseño Ajax: https://
www.oracle.com/technicalresources/articles/javaee/ajax-
design-strategies.html
» Palacios, D., Guamán, J., & Contento, S. (2018). Análisis del rendimiento de librerías de componentes Java Server Faces en el
desarrollo de aplicaciones web. NOVA Sinergia, 1(2), 54-59. doi:https://doi.org/10.37135/unach.ns.001.02.06
» Palacios, E. (2008). Aplicaciones ricas en Internet (RIA). Un enfoque de refactorización. La Plata - Argentina.
» Pressman, R. S. (2010). Ingeniería de Software. Un enfoque práctico. México: McGRAW-HILL.