Presentación Desarrollo de Aplicaciones Web - Parcial 1

Desarrollo de Aplicaciones Web
Unidad 1
FRONT END Y BACKEND
Tema 1
Back end
Ing. Ronald Henry Díaz A. 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
➢ Presentación del sílabo y actividades a

realizar durante el semestre.
➢ Trabajos Grupales.
➢ Tutorías Académicas.
SUBTEMAS
➢ Subtema 1: Fundamentos de Python.

➢ Subtema 2: Python – paquetes.
Objetivo
Aplicar de forma efectiva los

conceptos de Front End y Back
End en el desarrollo de
aplicaciones web.
INTRODUCCION
FUENTE: https://ed.team/cursos
SUBTEMA 1: FUNDAMENTOS DE PYTHON
Python es un lenguaje de
programación de alto
nivel con un tipado
dinámico fuerte,
multiplataforma, es libre
y gratuito, además fue
diseñado para ser simple
y flexible.
FUENTE: https://ed.team/cursos/html
Características
Es interpretado, es decir Es multiplataforma,

que no necesita ser permite trabajar en
compilado antes de múltiples plataformas sin
ejecutarlo; usa un necesidad de cambiar el
intérprete que lee y código fuente.
ejecuta.
FUENTE: https://www.desarrolladorsoft.com/
Scripts Tabulación Sintaxis.

SUBTEMA 2: PYTHON – PAQUETES.
Para conocer a profundidad lo que

es un paquete, primero se debe
tener clara la definición de módulos
y su estructura.
Módulos
Son archivos que contienen

declaraciones para utilizar en Python,
todo el código se encuentra aquí.
Para llamar un módulo en otro se usa

la sentencia import, seguida del
nombre del módulo; La importación se
debe realizar en las primeras líneas,
antes de usar sus funciones.
CARACTERÍSTICAS Cada módulo tiene su propio espacio de nombres.
Los módulos pueden importar otros módulos.
Puede usar el mismo nombre de variables globales en

cada módulo sin que esto genere conflicto.
No se definen o declaran los nombres importados
desde otro módulo.
Está compuesto de clases, funciones y variables.

Ejemplo de importar todas las

características.
La palabra from hace referencia al lugar

en el que se encuentran, seguido del
nombre del módulo, import me indica
Fuente: Van Rosumm, G(2009).
qué es lo que se va a importar y
finalmente el * que hace referencia a
todas las clases o funciones que se
encuentran en el módulo importado.
Siempre debe existir un fichero

llamado __init__.py, este se encargará
de importar el módulo.
Trabajar con módulos permite usar

nombres de variables globales
similares.
ACTIVIDAD DE CIERRE
ACTIVIDAD DE CIERRE
ACTIVIDAD DE CIERRE
Etiquetas en HTML
https://www.pinterest.es/pin/849632285970043135/
SITIO W3SCHOOL
https://www.w3schools.com/
BIBLIOGRAFÍA
➢ Fernández, A. (2013). Python 3 al descubierto. Alfaomega Grupo Editor.
➢ Gomis, P. (2018). Fundamentos de Programación en Python.
➢ Arregui, I., Ferreiro, A. M., & García, J. A. (2012). Programación en PYTHON.
➢ Alvarez, M., & Gimenez, C. (2020). “Que es python. Online]. Disponible en:
https://desarrolloweb. com/articulos/1325. php.
➢ www. https://docs.python.org/
Revisión de Contenidos Disponibles
• Aula virtual
• Guía del estudiante
• Compendio
• Video Magistral
• Material Complementario
Unidad 1
FRONT END Y BACKEND
Tema 1
Back end


Actividad de Inicio
Viajes / Vuelos
Geolocalización
Hospedaje
SUBTEMAS
➢ Subtema 3: Introducción a la arquitectura de

Microservicios.
➢ Subtema 4: Modelos y API para base de datos.
Objetivo

conceptos de Front End y Back
End en el desarrollo de
aplicaciones web.
INTRODUCCION
Fuente: https://ed.team/cursos
INTRODUCCION
ARQUITECTURA EN DESARROLLO SOFTWARE
Patrones o lineamientos que ayudan a la

construcción de un programa (aplicación).
Se refiere a las estructuras de un sistema,

compuestas de elementos con propiedades
visibles de forma externa y las relaciones que
existen entre ellos.
ARQUITECTURA EN DESARROLLO SOFTWARE
Elementos
Distintas entidades relacionadas con el sistema.
Pueden ser entidades que existen en tiempo de ejecución (objetos,

hilos).
Pueden ser entidades lógicas que existen en tiempo de desarrollo

(clases, componentes)
Pueden ser entidades físicas (nodos, directorios).

Subtema 3: Introducción a la arquitectura de
Microservicios.
Se define como conjuntos de servicios

que se despliegan independientemente
en aplicaciones.
Cada microservicio puede contener

otros servicios, mismos que solo
pueden ser usados por una función.
Fuente : Richardson, C (2021)

Microservicios.
Los microservicios pueden gestionarse por equipos

pequeños.
BENEFICIOS
Al ser independientes, se puede modificar e incluso

eliminar, sin que esto afecte al funcionamiento de otra
aplicación.
Altamente escalables.
Microservicios.
Modelo: En el modelo se mapea la base de

datos, también sus propiedades y métodos.
Vista: La vista es el responsable de la

funcionalidad, es decir de gestionar los
datos.
Router: También llamadas urls, se encarga

de direccionar las vistas y métodos.
Microservicios.
Serializador: Es la estructura que

necesitamos para enviar y recibir los datos
a la aplicación.
Test: Son todas las pruebas que se realizan

para validar que funcione correctamente la
aplicación..

Subtema 4: Modelos y API para bases de datos.
Los Modelos se consideran ficheros que

incluyen todas las propiedades, atributos,
incluso tipos de datos.

Los modelos son las bases de datos, aunque suene redundante; pero se trabaja
de esta manera por los siguientes motivos:
• Permite concentrarse
• Permite trabajar con
en un solo entorno, sin
objetos, esto quiere
• Para acceder de mejor las distracciones de
decir que al ser
manera a los datos. navegar entre ventanas,
llamados trae toda la
ni cambiar entre código
información y atributos.
y sentencias SQL.
Introspección Concentración Facilidad

Definición de APIs
Es una aplicación que permite conectar

sistemas para que interactúen entre sí,
por ejemplo, la implementación de
envío de correos en un proceso.
Cuando desde nuestro sistema

realizamos una acción, se conecta a un
api, enviando parámetros requeridos;
el otro sistema interpreta los datos
recibidos, y si la estructura es correcta,
emite una respuesta favorable.
BIBLIOGRAFÍA
➢ https://sg.com.mx/revista/27/arquitectura-software
➢ https://jucaripo.com/que-es-la-arquitectura-de-software/
• Aula virtual
• Compendio
• Video Magistral
ACTIVIDAD DE CIERRE HTML y CSS
ACTIVIDAD DE CIERRE
CSS SINTAXIS
Fuente: https://ed.team/cursos/css
ACTIVIDAD DE CIERRE
AGREGAR CSS EN
HTML
ACTIVIDAD DE CIERRE
Unidad 1
FRONT END Y BACKEND
Tema 2
Frontend


Actividad de Inicio
SUBTEMAS
➢ Subtema 1: Creación de Vistas.
➢ Subtema 2: Vistas basadas en clases, en funciones y

configuración de URLs.
➢ Subtema 3: Uso de plantillas.
➢ Subtema 4: Librerías, bloques, herencia, etiquetas y

filtros.
Objetivo

conceptos de Front End en el
desarrollo de aplicaciones web.
INTRODUCION
Subtema 1: Creación de vistas.
Las vistas son las encargadas de Figura 1: Manejo de solicitudes por vistas.
gestionar todas las peticiones web que
realizan las aplicaciones. No son más que
funciones en Python que reciben
solicitudes de tipo HttpRequest y
devuelven HttpResponse.
De una manera más clara, las vistas

tienen la lógica o el funcionamiento de la Fuente: Wikstrom Pujante, E. (06 de 2014)
aplicación
Funciones: es una sección que realiza Figura 1: Manejo de solicitudes por vistas.
procesos de forma independiente,
necesita parámetros, procesa y devuelve
valores; se definen fuera de una clase.
Clases: sirven para empaquetar

funcionalidades, contienen métodos.
Métodos: son procesos que se definen Fuente: Wikstrom Pujante, E. (06 de 2014)
dentro de una clase.
Figura 2: Archivo donde se encuentran las vistas
Las vistas se encuentran en el archivo

views.py de la aplicación.
Tipos de vistas
Vistas basadas en Vistas basadas en

clases: Utilizan objetos funciones: Renderizan la
de Python. plantilla.
Figura 2: Archivo donde se encuentran las vistas
¿Cómo crear vistas?
.
1) Se agrega el archivo views.py a la aplicación en
la que estamos trabajando. (ver figura 2)
2) Creamos un método, identificado con la

palabra def, seguido del nombre ejemplo_lista, la
petición entre paréntesis request; dentro del
método colocamos el valor a retornar y un
método render que construye la plantilla. Figura 3: Ejemplo creación de vistas
Subtema 2: Vistas basadas en clases, en funciones y
configuración de urls.
Vistas basadas en clases

Figura 4: Ejemplo de vista basada en clases
Las vistas basadas en clases usan objetos propios
de Python para implementar vistas, por ejemplo,
el uso de métodos HTTP como GET y POST; El
código es reutilizable.
La figura 4 muestra el archivo views.py y dentro

una vista que construye el método get.
Subtema 2: Vistas basadas en clases, en funciones y
configuración de urls.
Vistas basadas en funciones

Figura 5: Ejemplo de vista basada en funciones
Las vistas basadas en funciones solo usan los
métodos de Python para renderizar la plantilla.
La figura 5 muestra un fragmento de código,

donde se encuentra una vista que usa el método
GET propio de Python.
BIBLIOGRAFÍA
• Aula virtual
• Compendio
• Video Magistral
ACTIVIDAD DE CIERRE
MAQUETADO DE
UNA PAGINA WEB
Unidad 1
FRONT END Y BACKEND
Tema 2
Frontend


ACTIVIDAD DE INICIO
SUBTEMAS
➢ Subtema 1: Creación de Vistas.
➢ Subtema 2: Vistas basadas en clases, en funciones y

configuración de URLs.
➢ Subtema 3: Uso de plantillas.
➢ Subtema 4: Librerías, bloques, herencia, etiquetas y

filtros.
Objetivo

conceptos de Front End en el
desarrollo de aplicaciones web.
Subtema 3: Uso de plantillas.
Directorio templates.
Las plantillas sirven para estructurar el

diseño de un proyecto, se pueden definir
como HTMLs que muestran el contenido. Se
encuentran en el directorio “Templates”.
Subtema 3: Uso de plantillas.
La figura muestra el contenido de un HTML que

será usado como plantilla, además cabe indicar
que dentro de un archivo HTML no se puede
colocar ningún tipo de código Python, por lo
tanto, se necesita de otras herramientas para
enviar, recibir y procesar los datos.
Template tags brinda la posibilidad de tratar los

objetos en HTML, obteniendo así páginas más
dinámicas.
Subtema 4: Librerías, bloques, herencia, etiquetas y
filtros.
Librerías
Son un conjunto de paquetes que se

distribuyen con el lenguaje Python, son
imprescindibles para usar múltiples
herramientas y lograr sacarle el máximo
provecho a nuestro sistema.
La figura nos muestra el nombre del

paquete, la versión instalada y la última
versión existente
filtros.
Bloques
Los bloques son fragmentos de textos

que se encuentran en un programa,
estos fragmentos se ejecutan como uno
solo. Se considera bloques a módulos,
cuerpos de funciones o métodos, entre
otros.
filtros.
Herencia
Se usa la herencia en programación

para crear nuevas clases con
ciertas características
preexistentes. Los atributos o
ciertos comportamientos de una
primera clase, saltan a los hijos.
filtros.
Clase padre
La figura 1 muestra como la clase Animal

que es el padre tiene múltiples métodos y
atributos.
filtros.
Clase hijo
En este caso la clase Perro (hijo) toma todos

los atributos de la clase padre que es
Animal
filtros.
Etiquetas Filtros
Filter es una función integrada de Python, se puede usar

Es un cuadro donde se para traer elementos de la base de datos. Es iterable.
coloca texto para marcar
secciones de código. Get es similar a filter, la diferencia es que devuelve un objeto
Permite orientar al usuario y este no es iterable. Al intentar extraer más de un objeto
con Get, producirá un error.
al momento de usar la
aplicación.
Bibliografía
• Aula virtual
• Compendio
• Video Magistral
Actividad de cierre
Unidad 2
Librerías y Frameworks
Tema 1
Librerías


ACTIVIDAD INICIAL
SUBTEMAS
➢ Subtema 1: Requests
➢ Subtema 2: APIs de desarrollo.
➢ Subtema 3: Jquery.
➢ Subtema 4: JavaScript
Objetivo
Argumentar los diferentes conceptos

que se manejan dentro del tema
librerías, fomentando la
participación y aplicación de lo
aprendido a través de recursos
interactivos.
Subtema 1: Request.
URL
Significa Uniform Resource Locator
(Localizador de Recursos Uniforme). Una
URL no es más que una direccion que es
dada a un recurso único en la Web.
En teoria, cada URL valida apunta a un

único recurso. Dichos recursos pueden
ser páginas HTML, documentos CSS,
imagenes, etc.
Subtema 1: Request.
HTTP
HTTP, de sus siglas en inglés: "Hypertext

Transfer Protocol", es el nombre de un
protocolo el cual nos permite realizar
una petición de datos y recursos, como
pueden ser documentos HTML.
Es la base de cualquier intercambio de

datos en la Web, y un protocolo de
estructura cliente-servidor.
Subtema 1: Request.
HTTPS
HTTPS (protocolo de Transferencia de
Hiper-Texto) es un protocolo que
permite establecer una conexión segura
entre el servidor y el cliente, que no
puede ser interceptada por personas no
autorizadas
Es la versión segura de el http (Hyper

Text Transfer Protocol), La transmisión
está encriptada y el servidor
autenticado.
Subtema 1: Request.
Componentes de Http/Https
• HOST es el huésped, contiene el

recurso.
• PATH es la ruta del recurso.
• QUERY contiene los parámetros para

encontrar un recurso a través de una
ruta
Subtema 1: Request.
Cuando los navegadores intentan

comunicarse con un servidor, envía una
petición (request), misma que contiene
ciertos parámetros. Normalmente los
atributos de request son considerados de
lectura.
Si una petición viene de forma parcial, el

servidor web necesita conocer el nombre
del sitio web para lograr comunicarse.
Subtema 1: Request.
Atributos de Request
POST
De los atributos más conocidos, envía
datos para poder cambiar el estado de la
información en el servidor.
GET
Es uno de los atributos más comunes y
se centra en la petición o recuperación
de datos
Subtema 1: Request.
Atributos de Request
HEAD
Solicita únicamente el encabezado sin los
anexos o archivos.
OPTIONS
Muestra los tipos de métodos que
soporta.
TRACE
Realiza el seguimiento al HTTP/HTTPS.
Subtema 1: Request.
Para iniciar, APIs es nombrado así por su

siglas Application Programming
Interfaces.
Son pequeñas construcciones o mini

aplicaciones que permiten integrar dos
aplicaciones siempre y cuando cumplan
ciertos parámetros o reglas.
Subtema 1: Request.
Las API pueden cumplir o contener una o

varias funciones, usándolas de forma
adecuada, es capaz de comunicar,
relacionar y trabajar eficazmente varias
aplicaciones sin perder su
independencia.
Subtema 2: APIs de desarrollo.
Clasificación
Privadas Públicas
Solo pueden acceder las Cualquier persona tiene

personas directamente acceso a ellas, su interfaz
involucradas. fue diseñada para ser
fácilmente implementada.
Tipos
APIs de servicios web APIs basadas en

bibliotecas
Se usan o acceden por Permiten importarlas desde

medio de una URL con otro software para
peticiones HTTP o HTTPS, intercambiar información,
normalmente devuelven o generalmente son
usan formatos XML o JSON. diseñadas con JavaScript.
Tipos
APIs basadas en clases APIs de funciones en

sistemas operativos
Permite conectarse con los Software interactuando con

datos, usa clases abstractas sistemas operativos como
y se organiza en paquetes. Windows, por ejemplo,
interfaz de usuario.
Bibliografía
➢ Suroto, Suroto. (2017). A Review of Defense Against Slow HTTP Attack. JOIV : International
Journal on Informatics Visualization. 1. 127. 10.30630/joiv.1.4.51.
➢ Deitel, P., Deitel, H., & Deitel, A. (2014). Cómo Programar Internet & World Wide Web. México:
Pearson.
➢ Gourley, D., & Totty, B. (2002). HTTP: The Definitive Guide. United States of America: Linda
Mui.
➢ Chandra, R., & Varanasi, B. (2015). Python request essentials. Packt Publishing Ltd.
➢ Robillard, M. "¿Qué hace que las API sean difíciles de aprender? Respuestas de los
desarrolladores". MS.2009
➢ McLellan, S., & Roesler, A., & Tempest, J., & Spinuzzi, C. Creación de API más utilizables en IEEE
Software, 1998
➢ Bibeault, B., & Katz, Y., De Rosa, A., Jquery in Action. Simon and Schuster, 2015
➢ Chaffer, J., & Swedberg, K., Learning Jquery – Third Edition. Packt, 2011
➢ Chaffer, J., & Swedberg, K., Learning Jquery – Fourth Edition. Packt, 2013
➢ Gauchat, J., El gran libro de HTML5,CSS3 & Javascript. Marcombo, 2013
• Aula virtual
• Compendio
• Video Magistral
ACTIVIDAD DE CIERRE
DOCUMENTACION
DE FLASK
ACTIVIDAD DE CIERRE

ACTIVIDAD INICIAL
SUBTEMAS
➢ Subtema 1: Requests
➢ Subtema 2: APIs de desarrollo.
➢ Subtema 3: Jquery.
➢ Subtema 4: JavaScript
Objetivo
Argumentar los diferentes conceptos

que se manejan dentro del tema
librerías, fomentando la
participación y aplicación de lo
aprendido a través de recursos
interactivos.
Subtema 3: Jquery.
¿Qué es Jquery?
Jquery es una biblioteca gratuita que

permite crear aplicaciones complejas por
el lado del cliente, es decir interfaces,
efectos, animaciones, etc.
Sin necesidad de retrasar el desarrollo al
escribir rutinas extensas; el lema de
Jquery es “escribir menos y hacer más”
Subtema 3: Jquery.
Ventajas Módulos que contiene
➢ Mayor aceptación por parte de los ➢ Ajax: Contiene get y post.

programadores. ➢ Effects: Contiene métodos que
➢ Comunidad de creadores extensa. permiten animar.
➢ Tiene estabilidad. ➢ Event: Contiene métodos que
➢ Documentación amplia. toman las acciones realizadas en el
➢ Se actualiza constantemente. navegador.
Subtema 3: Jquery.
¿Quiénes pueden usar Jquery?
Todos los desarrolladores que desean

enriquecer su página con efectos
dinámicos e interacciones avanzadas.
Subtema 3: Jquery.
Jquery vs JavaScript
• Jquery no es un lenguaje, es una

biblioteca.
• Jquery está escrito en Javascript.
• Javascript es más extenso.

Subtema 3: Jquery.
Pasos para usarlo
➢ Descargar la versión adecuada desde la página de Jquery.

➢ Crear una página simple en HTML
➢ Incluir la etiqueta
➢ <script src="jquery-1.3.2.min.js“ type="text/javascript"></script>
➢ Ejecutar el código.
➢ Insertar un evento para alguna etiqueta.
➢ Guardar el archivo HTML y abrirlo en el navegador.
Subtema 4: JavaScript.
• JavaScript (JS) es un lenguaje de

programación orientado
especialmente a los navegadores.
• Es capaz de realizar funciones

complejas sin necesidad de
conectarse al servidor repetidamente,
también suele almacenar valores en
variables
Capas
• En primer lugar, se tiene el HTML que
representa el cuerpo o la estructura del
contenido web.
• La segunda capa representa al css, el

encargado de embellecer la página web.
• La tercera capa se tiene a JavaScript,

quien permite controlar el contenido o
incluso animar la página web.
CSS
• Se denomina así por sus siglas Cascading

Style Sheets (Hojas de estilo en cascada),
es el encargado de colocar estilo al
HTML, viene desde colores, bordes,
tamaños, permitiendo así un diseño
atractivo a la vista.
Ejemplo en HTML
Resultado
<!DOCTYPE html>
<html>
<head>
<title>Título de la página</title>
</head>
<body>
<h1>Esta es la cabecera</h1>
<p>Esta es una etiqueta para un párrafo.</p>
</body>
</html>
Ejemplo HTML con CSS
<!DOCTYPE html>
<html>
<head> Resultado
<title>Título de la página</title>
</head>
</style>
body {
background-color: lightblue;
}
h1 {
color: fuchsia;
text-align: center;
}
</style>
<body>
<h1>Esta es la cabecera</h1>
<p>Esta es una etiqueta para un párrafo.</p>
</body>
</html>
Ejemplo HTML con CSS
Resultado
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>El primer script</title>
<script type="text/javascript">
alert("Hola Mundo!");
</script>
</head>
<body>
<p>Esta página contiene el primer script</p>
</body>
</html>
Bibliografía
Pearson.
Mui.
Software, 1998
• Aula virtual
• Compendio
• Video Magistral
ACTIVIDAD DE CIERRE
ACTIVIDAD DE CIERRE
PREGUNTAS, CONSULTAS
TAREA PRACTICA EXPERIMENTAL
Unidad 2
Librerías y Frameworks
Tema 2
Frameworks


ACTIVIDAD INICIAL
¿Qué es un framework?
SUBTEMAS
➢ Subtema 1: Django.
➢ Subtema 2: Angular JS.
➢ Subtema 3: Bootstrap.
Objetivo
Identificar y aplicar librerías y

frameworks, para el desarrollo de
aplicaciones web.
Subtema 1: Django
Django es un framework web el cual

podremos utilizar para crear sitios web,
utiliza el lenguaje de programación
Python.
Es de código abierto y nos permite el

desarrollo de sitios web seguros y
mantenibles.
Subtema 1: Django
Versatilidad.
Seguridad.
Ventajas
Escalabilidad.
Mantenibilidad.
Portabilidad.
Subtema 1: Django
Versatilidad
Django puede ser (y ha sido) usado para

construir casi cualquier tipo de sitio web
desde sistemas manejadores de
contenidos y wikis, hasta redes sociales y
sitios de noticias.
Puede funcionar con cualquier

framework en el lado del cliente
Subtema 1: Django
Seguridad
Django proporciona una forma segura de

gestionar las cuentas de los usuarios y sus
contraseñas.
Evitando los típicos errores como ubicar la

información de sesión en cookies donde
puede ser vulnerable.
Subtema 1: Django
Seguridad
De manera predeterminada Django

permite proteger al sitio web desarrollado
contra algunas de las vulnerabilidades
conocidas como es SQL injection, scripts
entre sitios, falsificación de solicitudes
entre sitios, entre otras
Subtema 1: Django
Escalabilidad
Cada parte de la arquitectura que maneja
Django será independiente de las demás,
permitiendo asi que sea reemplazado o
cambiado si se da el caso de ser necesario.
Puede escalar para incrementar el trafico al

agregar hardware en cualquier nivel
(servidores de caché, servidores de base de
datos o servidores de aplicación).
Subtema 1: Django
Mantenibilidad
El código que se genera en Django se lo

implemente con los principios y patrones de
diseños para fomentar el desarrollo de
código reutilizable y mantenible.
Uiliza el principio de No te repitas (DRY) con

el objetivo de que no existe una duplicación
de código innecesaria.
Subtema 1: Django
Portabilidad
Django está escrito en Python un lenguaje

de programación que se ejecuta en muchas
plataformas.
No está ligado o sujeto a una plataforma en

específico de manera que puede ejecutar
sus aplicaciones en diversas distribuciones
de Linux, Windows y Mac OS.
Subtema 1: Django
VISTA GENERAL DE CÓMO TRABAJA DJANGO
Un sitio web tradicional basado en datos, lo

que se hace es esperar una petición HTTP
desde el explorador de la parte cliente.
Una vez que se recibe esta petición la

aplicación elabora una respuesta para esta
petición dependiendo lo que se necesite si
es leer o escribir información.
Subtema 1: Django
VISTA GENERAL DE CÓMO TRABAJA DJANGO
Después crear de manera dinámica una

página HTML de modo que al presentarlo en
el explorador se inserte los datos
recuperados en marcadores de posición de
una plantilla HTML .
En Django el proceso antes mencionado lo

gestiona en archivos separados.
Subtema 1: Django
URL
En esto se utiliza un mapeador URL para
direccionar las peticiones HTTP que se
realicen a la vista apropiada según la URL
que se indique.
Por otro lado un mapeador URL también

puede emparejar datos que aparecen en la
URL y pasarlos a la función de visualización
como datos
Subtema 1: Django
Vista (view):
En Django una vista es una función que

gestiona las solicitudes HTTP que se vayan
recibiendo y de igual manera devuelve
respuestas HTTP.
Las vistas accederán a los datos que sean

necesarios para cumplir con las solicitudes
por medio de los modelos y encargar a las
plantillas la responsabilidad de formatear la
información de respuesta.
Subtema 1: Django
Modelo (model)
Un modelo es un objetos de Python en los

cuales se va a definir la estructura de los
datos de una aplicación.
También ofrecerán formas o mecanismos

para gestionar estos datos (añadir, eliminar,
modificar) y también consultar información
(registros) de nuestra base de datos.
Subtema 1: Django
Plantillas (template):
Es un fichero de texto en el cual se va a

definir la estructura (como una página
HTML), con marcadores de posición los
cuales se los va a utilizar para presentar la
información.
Subtema 2: Angular JS
AngularJS es un framework MVC (Modelo

Vista Controlador), desarrollado por Google
para el Desarrollo Web Front End que
permite crear aplicaciones SPA (Single-Page
Applications).
MVC (Modelo Vista Controlador)

Características
Enlace del modelo de datos
Escribir menos código
Pruebas unitarias listas

MVC (Modelo Vista Controlador)
Este patrón se basa en dividir la capa de

lógica, la capa de datos y la capa de
presentación de manera seccionada entre
ellas.
Esto se lo hace con el fin de manejar cada

sección con mayor facilidad sin afectar a las
otras
Enlace del modelo de datos
Con este framework no es necesario

escribir código especial para enlazar los
datos con los controles de HTML.
Escribir menos código
En JavaScript se necesita implementar

mucho código para manipular los
elementos del DOM, ahora con Angular
se necesita menos cantidad de código
para poder manipular los elementos
DOM.
Pruebas unitarias listas
Los diseñadores de Google también han

proporcionado un marco de pruebas
denominado Karma que ayuda en el
proceso de diseño de pruebas unitarias
para las aplicaciones que se desarrollen.
Ventajas
Mantiene sincronizada la capa de datos y

la de presentación de manera que los
datos que se muestren mediante el
código HTML.
Estos datos se sincronizaran

automáticamente dependiendo de los
controles que se vinculen a los modelos.
Ventajas
El enrutamiento de angular maneja
aplicaciones de una sola página.
Permite moverse de una vista a otra o de

una funcionalidad a otra, basadas en la
interacción del usuario con el sistema,
pero aun así permanecerá en la misma
página
Subtema 3: Bootstrap
Bootstrap es un framework CSS de

desarrollo front end que permite crear
interfaces con CSS y JavaScript.
Posee una particularidad que es la de

adaptar al interfaz al tamaño del
dispositivo en el que se visualice el sitio
web.
Características
• Cuenta con un mantenimiento y

actualizaciones realizadas por Twitter,
lo cual indica que gran parte del
trabajo interno esta realizado por sus
creadores.
• Utiliza elementos importantes en el

desarrollo web como son HTML5, CSS3
JavaScript, entre otros.
Características
• Facilita bastante documentación en su

sitio oficial de manera que aclara las
dudas tanto para principiantes como a
personas con experiencia.
• Puede trabajar con diversos plugins de

terceros, además constantemente van
apareciendo nuevos plugins para su
uso.
Bibliografía
Pearson.
Mui.
Software, 1998
• Aula virtual
• Compendio
• Video Magistral
Actividad de Cierre

Presentación Desarrollo de Aplicaciones Web - Parcial 1

Cargado por

Copyright:

Formatos disponibles

Presentación Desarrollo de Aplicaciones Web - Parcial 1

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Presentación Desarrollo de Aplicaciones Web - Parcial 1

Cargado por

Copyright:

Formatos disponibles

Desarrollo de Aplicaciones Web

Ing. Ronald Henry Díaz A. Msc

Utilizar una conexión de internet por cable.

Elegir un lugar tranquilo y sin ruidos.

Ingresar algunos minutos antes de iniciar la videoconferencia.

Levantar la mano para pedir la palabra.

➢ Presentación del sílabo y actividades a

➢ Subtema 1: Fundamentos de Python.

Aplicar de forma efectiva los

Es interpretado, es decir Es multiplataforma,

Scripts Tabulación Sintaxis.

Para conocer a profundidad lo que

Son archivos que contienen

Para llamar un módulo en otro se usa

CARACTERÍSTICAS Cada módulo tiene su propio espacio de nombres.

Los módulos pueden importar otros módulos.

Puede usar el mismo nombre de variables globales en

Está compuesto de clases, funciones y variables.

Ejemplo de importar todas las

La palabra from hace referencia al lugar

Siempre debe existir un fichero

Trabajar con módulos permite usar

Ing. Ronald Henry Díaz A. Msc

Utilizar una conexión de internet por cable.

Elegir un lugar tranquilo y sin ruidos.

Ingresar algunos minutos antes de iniciar la videoconferencia.

Levantar la mano para pedir la palabra.

➢ Subtema 3: Introducción a la arquitectura de

Aplicar de forma efectiva los

Patrones o lineamientos que ayudan a la

Se refiere a las estructuras de un sistema,

Distintas entidades relacionadas con el sistema.

Pueden ser entidades que existen en tiempo de ejecución (objetos,

Pueden ser entidades lógicas que existen en tiempo de desarrollo

Pueden ser entidades físicas (nodos, directorios).

Se define como conjuntos de servicios

Cada microservicio puede contener

Fuente : Richardson, C (2021)

Los microservicios pueden gestionarse por equipos

Al ser independientes, se puede modificar e incluso

Modelo: En el modelo se mapea la base de

Vista: La vista es el responsable de la

Router: También llamadas urls, se encarga

Serializador: Es la estructura que

Test: Son todas las pruebas que se realizan

Fuente : Richardson, C (2021)

Los Modelos se consideran ficheros que

Fuente : Richardson, C (2021)

Introspección Concentración Facilidad

Es una aplicación que permite conectar

Cuando desde nuestro sistema

Ing. Ronald Henry Díaz A. Msc

Utilizar una conexión de internet por cable.

Elegir un lugar tranquilo y sin ruidos.

Ingresar algunos minutos antes de iniciar la videoconferencia.

Levantar la mano para pedir la palabra.

➢ Subtema 2: Vistas basadas en clases, en funciones y

➢ Subtema 3: Uso de plantillas.

➢ Subtema 4: Librerías, bloques, herencia, etiquetas y

Aplicar de forma efectiva los