CARRERA: INGENIERÍA EN INFORMÁTICA.

MATERIA: TÓPICOS DE BASES DE DATOS.

NOMBRE DEL MAESTRO: JOSÉ LUIS ZAGAL ARCE.

UNIDAD 5 Y 6.

TRABAJO: INTERFACES DE DESARROLLO.

ALUMNAS:
 KARLA PATRICIA MORENO AVALOS
 MARÍA GARRIDO SALINAS.
INTRODUCCIÓN

Hoy en día encontramos API’s en todos lados, Facebook, Twitter, Github, todo
ellos proveen una API para el uso de los desarrolladores. Una API (Application
Programming Interface) es un término que utilizamos para describir una forma de
intercambiar información entre programas o sitios web.

1. ANGULAR

Angular, es un framework para aplicaciones web desarrollado en TypeScript, de

código abierto, mantenido por Google, que se utiliza para crear y mantener
aplicaciones web de una sola página. Su objetivo es aumentar las aplicaciones
basadas en navegador con capacidad de Modelo Vista Controlador (MVC), en un
esfuerzo para hacer que el desarrollo y las pruebas sean más fáciles.

La biblioteca lee el HTML que contiene atributos de las etiquetas personalizadas

adicionales, entonces obedece a las directivas de los atributos personalizados, y
une las piezas de entrada o salida de la página a un modelo representado por las
variables estándar de JavaScript.

Angular se basa en clases tipo "Componentes", cuyas propiedades son las usadas
para hacer el binding de los datos. En dichas clases tenemos propiedades
(variables) y métodos (funciones a llamar).

CARACTERÍSTICAS:

Velocidad y rendimiento

 Generación de código: Angular convierte tus plantillas en código altamente

optimizado para las máquinas virtuales de JavaScript de hoy en día,
ofreciéndote todas las ventajas del código escrito a mano con la productividad
de un framework.
 Universal: Ejecuta la primera vista de tu aplicación en node.js, .NET, PHP, y
otros servidores para renderizado de forma casi instantánea obteniendo
solo HTML y CSS. También abre posibilidades para la optimización del SEO
del sitio.
 División del código: Las aplicaciones de Angular se cargan rápidamente
gracias al nuevo enrutador de componentes. Éste ofrece una división
automática de códigos para que los usuarios sólo carguen el código necesario
para procesar la vista que solicitan.
 HERRAMIENTAS:

 Plantillas: Permite crear rápidamente vistas de interfaz de usuario con una

sintaxis de plantilla simple y potente.
 Angular CLI: Las herramientas de línea de comandos permiten empezar a
desarrollar rápidamente, añadir componentes y realizar test, así como
previsualizar de forma instantánea la aplicación.
 IDEs: Obtén sugerencias de código inteligente, detección de errores y otros
comentarios en la mayoría de los editores populares e IDEs.

VELOCIDAD Y RENDIMIENTO:
Logre la máxima velocidad posible en la plataforma web hoy y avance, a través de
Web Workers y la representación del lado del servidor.
Angular te permite controlar la escalabilidad. Satisface requerimientos enormes de
data construyendo modelos de data en RxJS, Immutable.js o algún otro modelo-de-
empuje.

2. REAC,5
React (también llamada React.js o ReactJS) es una biblioteca JavaScript de código
abierto diseñada para crear interfaces de usuario con el objetivo de facilitar el
desarrollo de aplicaciones en una sola página. Es mantenido por Facebook y la
comunidad de software libre, han participado en el proyecto más de
mil desarrolladores diferentes. 
React intenta ayudar a los desarrolladores a construir aplicaciones que usan datos
que cambian todo el tiempo. Su objetivo es ser sencillo, declarativo y fácil de
combinar. React sólo maneja la interfaz de usuario en una aplicación; React es
la Vista en un contexto en el que se use el patrón MVC (Modelo-Vista-Controlador)
o MVVM (Modelo-vista-modelo de vista). También puede ser utilizado con las
extensiones de React-based que se encargan de las partes no-UI (que no forman
parte de la interfaz de usuario) de una aplicación web.

CARACTERISTCAS:
Virtual DOM
React mantiene un virtual DOM propio, en lugar de confiar solamente en el DOM
del navegador. Esto deja a la biblioteca determinar qué partes del DOM han
cambiado comparando contenidos entre la versión nueva y la almacenada en el
virtual DOM, y utilizando el resultado para determinar cómo actualizar
eficientemente el DOM del navegador.Propiedades (props) de react.
Las propiedades
Las propiedades (también conocidas como 'props') pueden definirse como los
atributos de configuración para dicho componente. Éstas son recibidas desde un
nivel superior, normalmente al realizar la instancia del componente y por
definición son inmutables.
El Estado
El estado de un componente se define como una representación del mismo en un
momento concreto, es decir, una instantánea del propio componente. Existen dos
tipos de componentes con y sin estado, denominados statefull y stateless.
Ciclos de vida
El ciclo de vida es una serie de estados por los cuales pasan los componentes
statefull a lo largo de su existencia. Se pueden clasificar en tres etapas de montaje o
inicialización, actualización y destrucción. Dichas etapas tienen correspondencia en
diversos métodos.
shouldComponentUpdate permite al desarrollador prevenir el re-renderizado
innecesario de un componente, devolviendo falso si no es necesario.
componentDidMount es llamado una vez que el componente es "montado" (el
componente ha sido creado en la interfaz de usuario, usualmente asociándolo con
el nodo del DOM). Esto es comúnmente usado para provocar la carga de datos
desde una fuente remota a través de una API.
componentWillUnmount es llamado inmediatamente antes de que el componente
es "desmontado". Es comúnmente usado para limpiar la demanda de dependencias
del componente que no será simplemente removido con el desmontaje del
componente.
render es el método más importante de los ciclos de vida y el único requerido en
cualquier componente. Es usualmente llamado cada vez que el estado del
componente es actualizado, reflejando los cambios en la interfaz de usuario.

3. NODEJS + MONGODB
Mongoose es un marco de JavaScript que se usa comúnmente en una aplicación
Node.js con una base de datos MongoDB. En este artículo, voy a presentarle
Mongoose y MongoDB, y más importante aún, dónde estas tecnologías se adaptan
a su aplicación.
Comencemos con MongoDB. MongoDB es una base de datos que almacena sus
datos como documentos. Lo más común es que estos documentos se parezcan a
una estructura similar a JSON:

Uno de los factores clave con MongoDB es su flexibilidad cuando se trata de

estructura. Aunque en el primer ejemplo, el objeto user contenía una
propiedad firstName y lastName, estas propiedades no son necesarias en todos los
documentos user que forman parte de la colección users. Esto es lo que hace que
MongoDB sea muy diferente de una base de datos SQL como MySQL o Microsoft
SQL Server que requiere un esquema de base de datos fuertemente definido de
cada objeto que almacena.
CARACTERÍSTICAS:

1. Rendimiento
MongoDB ofrece mucho más rendimiento que otros sistemas de base de datos,
aunque esto tiene su coste como puede ser el tratamiento de las transacciones.
2. Replicación:
Este sistema de replicación usado por MongoDB es del tipo master-slave, de modo
que el maestro recibe tantas consultas de escritura y lectura mientras los esclavos
solo de lectura o copias de seguridad.
3. Balanceo de Carga
A diferencia de las bases de datos relaciones permite escalar de forma horizontal.
4 . Almacenamiento
MongoDB puede ser usado con un sistema de archivo, gracias al balanceo de carga
y la replicación de datos puedes utilizar varios servidores para almacenamiento de
archivos.
5. Velocidad
Una de las características de NodeJS más importantes es su rapidez, lo que ayuda a
desarrollar más rápido, ejecutar test de unidad de forma veloz, las aplicaciones se
ejecutan mucho más ágiles.
6. Flexibilidad
A diferencia de otros entornos donde tienes un servidor y tu aplicación se
despliega en él, con unos directorios y archivos de configuración concretos. Por el
contrario en NodeJS, lanzas un servidor web o varios a la vez, o un servidor ftp.
7. JSON de forma nativa
Tanto NodeJS como MongoDB utilizan de forma nativa JSON, siendo esto una
gran ventaja.

4. CRUD + HTML5
 
El concepto CRUD está estrechamente vinculado a la gestión de datos digitales.
CRUD hace referencia a un acrónimo en el que se reúnen las primeras letras de las
cuatro operaciones fundamentales de aplicaciones persistentes en sistemas de
bases de datos:

 Create (Crear registros)

 Read bzw. Retrieve (Leer registros)
 Update (Actualizar registros)
 Delete bzw. Destroy (Borrar registros)
En pocas palabras, CRUD resume las funciones requeridas por un usuario para
crear y gestionar datos. Varios procesos de gestión de datos están basados en
CRUD, en los que dichas operaciones están específicamente adaptadas a los
requisitos del sistema y de usuario, ya sea para la gestión de bases de datos o para
el uso de aplicaciones.
HTML5 es un lenguaje markup (de hecho, las siglas de HTML significan Hyper
Text Markup Language) usado para estructurar y presentar el contenido para la
web. Es uno de los aspectos fundamentales para el funcionamiento de los sitios,
pero no es el primero. Es de hecho la quinta revisión del estándar que fue creado
en 1990. A fines del año pasado, la W3C la recomendó para transformarse en el
estándar a ser usado en el desarrollo de proyectos venideros. Por así decirlo, qué es
HTML5 está relacionado también con la entrada en decadencia del viejo estándar
HTML 4, que se combinaba con otros lenguajes para producir los sitios que
podemos ver hoy en día. Con HTML5, tenemos otras posibilidades para
explotar usando menos recursos. Con HTML5, también entra en desuso el formato
XHTML, dado que ya no sería necesaria su implementación.

CARACTERÍSTICAS:

 Es un sistema de almacenamiento local: Es una característica muy útil;

pensemos en una aplicación móvil hecha en HTML5… o en una extensión
de Chrome, Firefox, etc. Si IndexedDB no fuera un sistema de
almacenamiento local no podríamos acceder al contenido almacenado si
nuestra conexión de red estuviese caída. Gracias a que la información
almacenada en IndexedDB está en el propio equipo, nuestra aplicación
puede seguir funcionando perfectamente, aunque estemos sin conexión.

 No tiene límite de tamaño: Es una de sus grandes bondades. Al usar

LocalStorage, tenemos un límite de almacenamiento establecido por el
navegador… límite que suele rondar los 10MB. Si bien es suficiente para
gran parte de los casos, este límite puede suponer un problema si nuestra
aplicación mueve mucho dato. En el caso de IndexedDB este límite no existe
y estamos hablando de un sistema de almacenamiento ilimitado (bueno,
limitado por tu disco duro claro). Eso sí, en el caso de Firefox, aunque el
espacio sea ilimitado, el navegador pre-reserva 50MB de espacio y te solicita
permiso cuando necesita reservar otros 50MB.

 Permite múltiples «tablas»: Bueno, IndexedDB no funciona con tablas, pero

en este punto del artículo y para que nos entendamos, puedes tener en una
misma base de datos varias tablas para almacenar tus contenidos.

 Permite múltiples bases de datos: No estás limitado a una base de datos,

puedes conectarte a varias bases de datos vía IndexedDB.

5. PYTHON
Python es un lenguaje de programación creado por Guido van Rossum en el
año 1991, la extensión de los creados en él es .py. Se compara habitualmente
con Tcl, Perl, Scheme, Java y Ruby. En la actualidad Python se desarrolla como un
proyecto de Código abierto, administrado por la Python Software Foundation. La
última versión estable del lenguaje es la 3.2.2. Python es considerado como la
"oposición leal" a Perl, lenguaje con el cual mantiene una rivalidad amistosa. Los
usuarios de Python consideran a éste mucho más limpio y elegante para
programar.
Características y paradigmas
Python es un lenguaje de programación multiparadigma. Esto significa que más
que forzar a los programadores a adoptar un estilo particular de programación,
permite varios estilos: programación orientada a objetos, programación
imperativa y programación funcional. Otros paradigmas están soportados
mediante el uso de extensiones.
Python usa tipado dinámico y conteo de referencias para la administración de
memoria.
Una característica importante de Python es la resolución dinámica de nombres; es
decir, lo que enlaza un método y un nombre de variable durante la ejecución del
programa (también llamado enlace dinámico de métodos).
Otro objetivo del diseño del lenguaje es la facilidad de extensión. Se pueden
escribir nuevos módulos fácilmente en C o C++. Python puede incluirse en
aplicaciones que necesitan una interfaz programable.
Aunque la programación en Python podría considerarse en algunas situaciones
hostil a la programación funcional tradicional del Lisp, existen bastantes analogías
entre Python y los lenguajes minimalistas de la familia Lisp como puede
ser Scheme.
Elementos del lenguaje
Python fue diseñado para ser leído con facilidad. Una de sus características es el
uso de palabras donde otros lenguajes utilizarían símbolos. Por ejemplo, ¡los
operadores lógicos !, || y && en Python se escriben not, or y and,
respectivamente. Curiosamente el lenguaje Pascal es junto con COBOL uno de los
lenguajes con muy clara sintaxis y ambos son de la década del 70. La idea del
código claro y legible no es algo nuevo.
El contenido de los bloques de código (bucles, funciones, clases, etc.) es delimitado
mediante espacios o tabuladores, conocidos como indignación, antes de cada línea
de órdenes pertenecientes al bloque. Python se diferencia así de otros lenguajes de
programación que mantienen como costumbre declarar los bloques mediante un
conjunto de caracteres, normalmente entre llaves {}. Se pueden utilizar tanto
espacios como tabuladores para intentar el código, pero se recomienda no
mezclarlos.
6. BOOTSTRAP 4
Bootstrap 4 es la última versión de Bootstrap, el framework de CSS, HTML  y
JavaScript más popular, que nos permite desarrollar webs que se ajustan a
cualquier resolución y dispositivo.
En esta última versión, el framework se ha reescrito por completo, con nuevos
componentes, estilos más optimizados y aún más adaptabilidad.
Como suele suceder, para poder avanzar hay que deshacerse de las cargas del
pasado, y en este caso implica eliminar el soporte para Internet Explorer 9 y
anteriores.

CARACTERÍSTICAS:
1. Sistema de grid modificado
Bootstrap 3 siempre ha tenido un sistema de grid sólida como una roca. Esto hace
que el crear sitios responsive sea, prácticamente, una tarea para niños. En
Bootstrap 4, no veremos una remodelación completa del sistema de grid ya que el
anterior era perfecta como te hemos contado. Según los desarrolladores veremos al
menos un nivel adicional para otros tipos de dispositivos.
Esto no debería ser demasiado difícil de aprender. Y además, es opcional, si deseas
establecer un tamaño específico del dispositivo. Lo que si probablemente requerirá
es la inserción de un nombre de clase extra. De menor a mayor, podría ser algo así:
col-lg-*, col-md-*, col-hd-*, col-sm-* y col-xs-*.
2. Navbar completamente rediseñado
Probablemente una de las cosas más difíciles y más desalentadoras de
implementar en Bootstrap 3 es la barra de navegación o navbar. Es difícil de
entender. Quiero decir, que para desarrollar un navbar tenemos que manejar
innumerables nombres de clase. La inserción de una imagen como logotipo es una
práctica maldita, por no decir casi imposible. Los chicos de Twitter trataron de
solucionar esto en Bootstrap 3.3, pero el cambio fue demasiado menor y demasiado
tarde para mí.
No tenemos detalles específicos sobre cómo será el nuevo navbar de Bootstrap 4 ni
de cómo se comportará en el móvil, pero es de esperar que sea menos genérico que
el .navbar-collapse que hay implementado actualmente. ¿Podríamos ver algo de
navegación off-canvas al igual que lo que ofrece el add-on Jasny Bootstrap?
Seguramente con este cambio tendrás que reestructurar el HTML de tu navbar
actual. Pero cabe resaltar que también va a reducir en gran medida todas esas
clases de ayuda extra que has estado agregando, tratando de arreglar la barra de
navegación con Boostrap 3. A mi modo de ver, creo que este cambio valdrá la
pena.
3. Nuevo diseño en la documentación
La documentación de Bootstrap siempre ha sido un poco chusca. Para empezar, a
veces no sé si consultar en la sección de CSS o en la sección de Javascript, por
poner un ejemplo. Esa barra de navegación lateral es un poco meh, ya me
entendéis... (Siempre se me olvida utilizar el enlace que te lleva a la parte
superior). Ok, por lo que puedes ver en el título de este punto, estamos hablando
de un nuevo diseño, es decir, de una nueva organización. Quiero decir, es posible
que no veamos necesariamente contenido reescrito.
Puedes echar un vistazo a una vista previa de la documentación de Bootstrap 4 que
encontré en Dribbble de uno de los creadores de Bootstrap, Mark Otto.
4. Animaciones y transiciónes en los elementos
Bootstrap nunca ha sido muy rico en cuanto animaciones. Quiero decir, sí,
actualmente tienes animaciones para hacer acordeones y similares, pero los que
realmente proporcionan un factor sorpresa no están incluidos entre sus
funciones. Hmmm, me pregunto si podríamos ver algunos de los efectos
de Animate CSS de Daniel Eden.
Las animaciones en Bootstrap 4 de hecho podrían ser su principal atractivo,
aunque es un arma de doble filo. Si los usuarios no lo utilizan sabiamente,
podemos volver a vivir otra vez en la época de los gifs animados. Es importante
saber cuándo usar una animación. Siempre debe hacerse en el contexto adecuado.
5. Un nuevo enfoque en la tematización
Esto es casi los más interesante para mí. Actualmente, si deseas personalizar
Bootstrap 3, puedes:
Reemplazar con archivos RAW CSS (es la manera difícil de hacerlo)
Personalizar archivos less en la customize page de Bootstrap (otra manera difícil de
hacerlo)
Duplicar las variables less de Bootstrap y sobreescribir el original (la manera más
sencilla de hacerlo)
Me pregunto qué van a hacer con esto. Tal vez proporcionen un archivo especial
completamente centrado en la personalización de colores, border-radius, etc...
Siempre vas a ser capaz de seguir el flujo de trabajo normal. Así que este cambio
debería tener poco impacto si no te preocupa cómo la gente de Twitter te diga
cómo hacer un tema.
 7. PHP +SPRESD
PHP, acrónimo recursivo en inglés de PHP: Hypertext
Preprocessor (preprocesador de hipertexto), es un lenguaje de programación de
propósito general de código del lado del servidor originalmente diseñado para el
preprocesado de texto plano en UTF-8. Posteriormente se aplicó al desarrollo
web de contenido dinámico, dando un paso evolutivo en el concepto de aplicación
en línea, por su carácter de servicio.
Su implementación en los documentos HTML era aparentemente muy sencilla.
Hay que decir, que, PHP no genera HTML, sino que ofrece una salida de texto con
codificación UTF-8 compatible con los documentos HTML. El programador puede
dotar a la salida de los tag's propios del HTML y los exploradores más comunes
para navegar por internet, reconocerán muy rápidamente el formato UTF-8 y lo
adaptarán ofreciendo una salida entendible.
CARACTERÍSTICAS:

 Orientado al desarrollo de aplicaciones web dinámicas con acceso a

información almacenada en una base de datos.
 Es considerado un lenguaje fácil de aprender, ya que en su desarrollo se
simplificaron distintas especificaciones, como es el caso de la definición de
las variables primitivas, ejemplo que se hace evidente en el uso de php
arrays.
 El código fuente escrito en PHP es invisible al navegador web y al cliente, ya
que es el servidor el que se encarga de ejecutar el código y enviar su
resultado HTML al navegador.
 Capacidad de conexión con la mayoría de los motores de base de datos que
se utilizan en la actualidad, destaca su conectividad
con MySQL y PostgreSQL.
 Capacidad de expandir su potencial utilizando módulos (llamados
extensiones).
 Posee una amplia documentación en su sitio web oficial, entre la cual se
destaca que todas las funciones del sistema están explicadas y
ejemplificadas en un único archivo de ayuda.
 Es libre, por lo que se presenta como una alternativa de fácil acceso para
todos.
 Permite aplicar técnicas de programación orientada a objetos.
 No requiere definición de tipos de variables, aunque sus variables se
pueden evaluar también por el tipo que estén manejando en tiempo de
ejecución.
 Tiene manejo de excepciones (desde PHP5).
  Si bien PHP no obliga a quien lo usa a seguir una determinada metodología
a la hora de programar, aun haciéndolo, el programador puede aplicar en su
trabajo cualquier técnica de programación o de desarrollo que le permita
escribir código ordenado, estructurado y manejable. Un ejemplo de esto son
los desarrollos que en PHP se han hecho del patrón de diseño Modelo Vista
Controlador (MVC), que permiten separar el tratamiento y acceso a los
datos, la lógica de control y la interfaz de usuario en tres componentes
independientes.
 Debido a su flexibilidad ha tenido una gran acogida como lenguaje base
para las aplicaciones WEB de manejo de contenido, y es su uso principal.

BIBLIOGRAFÍA

https://es.wikipedia.org/wiki/Angular_(framework)

https://angular.io/resources

https://es.wikipedia.org/wiki/React#Caracter%C3%ADsticas

https://code.tutsplus.com/es/articles/an-introduction-to-mongoose-for-mongodb-and-nodejs--
cms-29527

https://rolandocaldas.com/html5/indexeddb-tu-base-de-datos-local-en-html5

https://programacion.net/articulo/5_caracteristicas_del_proximo_bootstrap_4_que_nos_enamor
an_1127

https://es.wikipedia.org/wiki/PHP#Caracter%C3%ADsticas_de_PHP