Implementación y desarrollo de
Brush Ninja
Zaira Marín García
Índice
Brush Ninja
Servidor WEB a utilizar.
Frase
Base de datos a utilizar.
Introducción.
¿Qué es Brush Ninja?
NET
Brush Ninja
MySQL Workbench
Tipo de despliegue web a utilizar
Lenguaje de programación
Aplicación a implementar.
Conclusiones.
¿Qué es Javascript?
Interfaces de Programacion de Aplicaciones
¿Qué contiene?
Plan de mantenimiento.
Bibliografía.
Herramientas de desarrollo web a utilizar
Procesos
Procedimiento para implementtar la app web
SCMMS
Javascript
Brush Ninja
INTRODUCCIÓN
Esta presentación esta conformada por los siguientes puntos o partes que conforman la implementación de un proyecto de una aplicación web, los cuales son los siguientes:
- Aplicación a implementar.
- Herramientas de desarrollo web a utilizar
- Servidor WEB a utilizar.
- Tipo de despliegue web a utilizar (WAMP,LAMP, J2EE, .NET,etc.)
- Base de datos a utilizar.
- Lenguaje de programación a emplear.
- Plan de mantenimiento.
Brush Ninja
INTRODUCCIÓN
¿qué es Brush Ninja?
De igual forma vamos a explicar un poco que es y como funciona la aplicación que se va a desarrollar durante esta presentación. Brush Ninja es una aplicación web completamente gratuita que sirve para crear animaciones dibujadas a mano, directamente desde tu navegador y de forma sumamente simple. Si usas macOS, también tienen una app de escritorio para ese sistema operativo. Puedes usar el ratón, el touchpad o un stylus para hacer los dibujos, el que tengas o el que más te convenga. Brush Ninja te permite añadir hasta 1000 cuadros por animación y luego puedes exportar tu trabajo en formato GIF.
Brush Ninja
Aplicación a implementar.
¿Qué contiene?
La aplicación cuenta con cuatro herramientas diferentes: un pincel para dibujar a mano alzada con diferentes tamaños de grosor, una herramienta de formas para añadir círculos, cuadrados, triángulos y estrellas; una herramienta de lineas, y un borrador.
En la parte inferior tienes el historial de tus cuadros, y puedes ir añadiendo cuantos _frames_ necesites para tu animación. La función "Onion Skinning" te permite ver copias "fantasmas" del cuadro anterior o posterior para ayudarte a posiciones bien tu dibujo y el tiempo de la animación.
Aplicación a implementar.
Brush Ninja
¿Qué contiene?
También tienes la opción de añadir marcas de agua a tus GIFs que te sirven de firma digital, y tienes la posibilidad de añadir fotos de Unsplash de fondo gracias a la integración con esa librería de fotos abiertas.
No importa mucho el nivel de tus habilidades, pues la app es extremadamente fácil de usar, incluso por un novato. Ahora, con la calidad de tus dibujos si que no te pueden ayudar mucho, tampoco hace milagros.
Procesos
Procedimiento para implementar la app web
Desarrollar una aplicación web de banca en línea es un proyecto complejo que implica varios aspectos, desde la seguridad hasta la interfaz de usuario. A continuación, le proporcionaré una visión general de los pasos básicos que podría seguir para desarrollar una aplicación web de banca en línea. Ten en cuenta que este es un resumen general y cada paso puede ser mucho más detallado.
1. Definición de Requisitos y Objetivos: Definir claramente los requisitos y objetivos de la aplicación. Esto incluye características como la gestión de cuentas, transferencias de fondos, pagos, informes de transacciones, seguridad, etc. 2. Diseño de la Base de Datos: Diseñar una base de datos que maneje la información de los usuarios, cuentas, transacciones y cualquier otro dato relevante. Se utilizará un modelo de datos seguro y eficiente. 3. Desarrollo del Backend: Implementar el backend de la aplicación utilizando un lenguaje de programación adecuado para las necesidades (por ejemplo, Node.js, Python, Java). Implementará la lógica de negocio, la autenticación, la autorización y la seguridad.
Procedimiento para implementar la app web
4. Desarrollo del Frontend: Se crea una interfaz de usuario atractiva y fácil de usar utilizando tecnologías web como HTML, CSS y JavaScript. Puede utilizarse un framework como React, Angular o Vue.js para facilitar el desarrollo. 5. Implementación de Seguridad: Asegúrar de que la aplicación cumpla con los estándares de seguridad. Utiliza HTTPS, cifrado de datos, protección contra ataques de inyección, autenticación de dos factores, entre otras medidas de seguridad. 6. Integración con Servicios Financieros: Integrar la aplicación con servicios financieros para realizar transacciones en tiempo real, como procesadores de pagos y sistemas de transferencias.
7. Pruebas: Realizar pruebas exhaustivas para garantizar la estabilidad y la seguridad de la aplicación. Esto incluye pruebas de unidad, integración y sistema, así como pruebas de seguridad.
Procedimiento para implementar la app web
8. Despliegue: Desplegar la aplicación en un entorno de producción utilizando servicios de alojamiento web seguros y confiables. Configure copias de seguridad regulares y mecanismos de recuperación. 9. Mantenimiento Continuo: Proporcionar soporte continuo, realiza actualizaciones de seguridad y mejora las características según sea necesario. 10. Cumplimiento Normativo: Integrar la aplicación con servicios financieros para realizar transacciones en tiempo real, como procesadores de pagos y sistemas de transferencias. 11. Monitoreo: Implementar herramientas de monitoreo para monitorear el rendimiento de la aplicación, detectar problemas y responder rápidamente a eventos inesperados.
Servidor WEB a utilizar.
Con "Servidor web" podemos referirnos a hardware o software, oa ambos trabajando juntos.
En cuanto a hardware, un servidor web es una computadora que almacena el software de servidor web, y los archivos que componen un sitio web (por ejemplo, documentos HTML, imágenes, hojas de estilos CSS y archivos JavaScript). Un servidor web -hardware- se conecta a internet y mantiene el intercambio de datos con otros dispositivos conectados a la web.
En cuanto a software, un servidor web tiene muchas partes que controlan cómo los usuarios de la web obtienen acceso a los archivos alojados en el servidor; es decir, mínimamente, un servidor HTTP . Un servidor HTTP es una pieza de software capaz de comprender URLs (direcciones web) y HTTP (el protocolo que tu navegador usa para obtener las páginas web). Un servidor HTTP puede ser accedido a través de los nombres de dominio de los sitios web que alojan, y entrega el contenido de esos sitios web alojados al dispositivo del final. El que utiliza actualmente es estático, lo que significa lo siguiente: Un servidor web estático, o pila, consiste en una computadora (hardware) con un servidor HTTP (software). Llamamos a "estático" a este servidor porque envía los archivos que alojan "tal como se encuentran" (sin modificarlos) a tu navegador.
Servidor WEB a utilizar.
Pero se planea que cuente con un servidor dinámico, lo que significa lo siguiente: Un servidor web dinámico consiste en un servidor web estático con software adicional, habitualmente un servidor de aplicaciones y una base de datos . Llamamos "dinámico" a este servidor porque la aplicación servidor actualiza los archivos alojados, antes de enviar el contenido a su navegador mediante el servidor HTTP . Alojamiento de archivos (Hosting)
Un servidor web primero debe almacenar los archivos del sitio web, es decir, todos los documentos HTML y sus medios relacionados, incluidas las imágenes, las hojas de estilo CSS, los archivos JavaScript, las fuentes y videos.
Técnicamente, puede alojar todos esos archivos en su propia computadora, pero es mucho más conveniente almacenarlos en un servidor web dedicado que:
- Siempre está funcionando.
- Siempre está conectado a internet.
- Tiene la misma dirección IP todo el tiempo.
- Es mantenido por un proveedor externo.
Tipo de despliegue web a utilizar
¿Qué son las APIs?
Las Interfaces de Programacion de Aplicaciones (APIs por sus siglas en inglés) son construcciones disponibles en los lenguajes de programación que permiten a los desarrolladores crear funcionalidades complejas de una manera simple. Estas abstraen el código más complejo para proveer una sintaxis más fácil de usar en su lugar. Si se quiere programar gráficos 3D, sería mucho más facil hacerlo usando una API escrita en un lenguaje de alto nivel como JavaScript o Python, en lugar de intentar escribir código de bajo nivel (por ejemplo: C o C++) que controle directamente la GPU del equipo u otras funciones gráficas. APIs en JavaScript del lado cliente
JavaScript del lado cliente, particularmente, tiene muchas APIs disponibles — estas no son parte del lenguaje en sí, sino que están construidas sobre el núcleo de este lenguaje de programación, proporcionándote superpoderes adicionales para usar en tu código. Por lo general, se dividen en dos categorías:
Tipo de despliegue web a utilizar
APIs en JavaScript del lado cliente
Las APIs de navegador están integradas en tu navegador web y pueden exponer datos del navegador y del entorno informático circundante y hacer cosas complejas y útiles con él. Por ejemplo, la API de Geolocalización proporciona algunas construcciones simples de JavaScript para obtener datos de ubicación con los que, por ejemplo, trazar tu ubicación en un mapa de Google. Realmente, el navegador está haciendo uso de códigos de bajo nivel complejos en segundo plano (por ejemplo, C++) para comunicarse con el hardware GPS del dispositivo (o lo que esté disponible para determinar los datos de posición), recuperar datos de posición y devolverlos al entorno del navegador para su uso en tu código. Pero una vez más, la API se encarga de abstraer esta complejidad.
Las APIs de terceros no están incluídas por defecto en el navegador, y por lo general es necesario obtener el código e información desde algún lugar de la Web. Por ejemplo, la API de Twitter permite hacer cosas como mostrar tus últimos tweets en un sitio web. Proporciona un conjunto especial de construcciones que puedes usar para consultar el servicio de Twitter y devolver información específica.
Tipo de despliegue web a utilizar
Relacion entre JavaScript, APIs, y otras herramientas de JavaScript
Otras herramientas de JavaScript:
JavaScript — Un lenguaje de scripts de alto nivel incorporado en los navegadores que permite implementar interactividad en páginas web / apps. Ten en cuenta que JavaScript también está disponible en otros entornos de programación, como Node.
APIs de navegador — Construcciones integradas en el navegador creadas con el lenguaje JavaScript y que permiten implementar funcionalidad mucho más fácilmente.
APIs de terceros — Construcciones integradas en plataformas de terceros (por ejemplo Twitter, Facebook) que permiten usar algunas de las funcionalidades de esa plataforma en tus páginas web (como por ejemplo mostrar tus últimos Tweets en tu página web).
Librerías JavaScript — Por lo general uno o más archivos JavaScript que contienen funciones personalizadas (en-US) que puedes añadir a tu página web para acelerar o habilitar la escritura de funcionalidades comunes. Por ejemplo jQuery, Mootools y React.
Frameworks JavaScript — El siguiente paso a las librerías, los frameworks JavaScript (como Angular y Ember) suelen ser paquetes de HTML, CSS, JavaScript y otras tecnologías que se instalan y luego se usan para escribir una aplicación web completa desde cero. La diferencia clave entre una librería y un framework es la "Inversión del control". Cuando se llama a un método desde una librería, el desarrollador tiene el control. Con un framework el control se invierte: el framework llama al código del desarrollador.
Tipo de despliegue web a utilizar
Los tres tipos de APIs que utiliza BRUSH NINJA son los siguientes: APIs que obtienen datos del servidor: Comunmente usadas para actualizar pequeñas secciones de una página web. Este aparente pequeño detalle tiene un gran impacto en el performance y en el comportamiento de los sitios. — Sí solo necesitas actualizar un Stock de artículos o una lista de tiendas disponibles, al utilizar APIs para obtener datos desde el servidor lo lograrás sin tener que volver a cargar toda la página o aplicación logrando que estas tengan una sensación de rapidez y agilidad. Las APIs hacen esto posible gracias a que incluyen XMLHttpRequest y la Fetch API. Tambièn puede encontrar el termino Ajax que describe esta técnica. Más información sobre este tipo de APIs en Fetching data from the server.
Las APIs para dibujar y manipular graficos: Ya son soportadas por la mayoría de navegadores. Las más populares son Canvas y WebGL, que permiten actualizar la información de cada uno de los píxeles contenidos en un <canvas> HTML, para crear escenas 2D y 3D. Por ejemplo, se pueden dibujar formas como rectángulos o círculos, importar una imagen en el canvas y aplicarle filtros como sepia o escala de grises usando la API de Canvas, o crear una escena compleja 3D con iluminación y texturas usando WebGL. Estas APIs, a menudo se combinan con apis para crear bucles de animación (como window.requestAnimationFrame()) y otras veces para hacer que se actualicen constantemente escenas de dibujos animados o videojuegos.
Tipo de despliegue web a utilizar
APIS de audio y vídeo como HTMLMediaElement, la Web Audio API, y WebRTC te permitirán hacer cosas realmente interesantes con elementos multimedia: crear una interfaz personalizada para los controles de reproducción de audio y vídeo, mostrar pistas de texto con subtítulos junto con el vídeo, capturar vídeo de la cámara web para ser manipulado en un canvas (ver más arriba) o mostrado en el ordenador de otra persona en una videoconferencia, añadir efectos a las pistas de audio (como ganancia, distorsión, retardo, etc).
APIs que se implementarán en BRUSH NINJA
Las APIS de almacenamiento en el lado del cliente: Se están popularizando en los navegadores. La habilidad de almacenar información en el lado del cliente es muy útil para hacer aplicaciones que salven su estado entre carga de páginas, e incluso trabajar cuando el dispositivo está fuera de línea. Hay varias opciones disponibles, por ejemplo el almacenamiento en pares de clave/valor con Web Storage API, y una forma más compleja de almacenar datos tabulados mediante la IndexedDB API.
BRUSH NINJA
Herramientas de desarrollo web a utilizar
Brush Ninja es una aplicación web que utiliza JavaScript para su funcionalidad. JavaScript es un lenguaje de programación que se ejecuta en un navegador web. Para dibujar, Brush Ninja utiliza la fantástica biblioteca FabricJS . Esta es una biblioteca de código abierto (el código se regala) para crear y editar dibujos vectoriales con JavaScript.
BRUSH NINJA
JavaScript
JavaScript (JS) es un lenguaje de programación ligero, interpretado, o compilado justo-a-tiempo (just-in-time) con funciones de primera clase. Si bien es más conocido como un lenguaje de scripting (secuencias de comandos) para páginas web, y es usado en muchos entornos fuera del navegador, tal como Node.js, Apache CouchDB y Adobe Acrobat JavaScript es un lenguaje de programación basada en prototipos, multiparadigma, de un solo hilo, dinámico, con soporte para programación orientada a objetos, imperativa y declarativa (por ejemplo programación funcional). Lee más en acerca de JavaScript. El estándar para JavaScript es ECMAScript (ECMA-262) y la especificación de la API para la Internacionalización de ECMAScript (ECMA-402). La documentación en MDN está basada enteramente en las últimas versiones preliminares de ECMA-262 y ECMA-402. Y en algunos casos donde algunas propuestas para nuevas funciones para ECMAScript ya hayan sido implementadas en los navegadores, la documentación y algunos artículos de MDN pueden hacer uso de algunas de estas funciones.
BRUSH NINJA
Fabric.js es una biblioteca de lienzo
Fabric te permite multiplicar el poder de la etiqueta canvas, porque te ayuda a administrar los elementos que colocas dentro, como objetos. Puedes modificar sus atributos e interactuar por medio de vértices, entre muchas más opciones muy potentes. Fabric proporciona un modelo de objetos interactivo encima del elemento lienzo, Fabric también tiene un analizador de SVG a lienzo (y de lienzo a SVG ) fabric.js es una biblioteca javascript poderosa y bastante simple para el lienzo HTML5.
Proporciona una plataforma interactiva para trabajar con el lienzo HTML5. Usando la tela puede
crear objetos / formas en lienzo desde formas geométricas simples hasta formas complejas.
Incluso puedes trabajar con imágenes usando fabric.js. fabric.js también soporta animaciones.
Proporciona controles para trabajar con imágenes como arrastrarlas, escalarlas girándolas.
Permite agrupar formas / objetos que pueden ser manipulados juntos. admite eventos no solo
limitados al elemento de lienzo sino también con objetos. Incluso proporciona funcionalidad para
serializar el lienzo a SVG o JSON y reutilizarlo cuando sea necesario. Incluso admite la ejecución
de fabric bajo Node.js, con la ayuda de las bibliotecas jsdom y node-canvas.
BRUSH NINJA
ReefJS
Una pequeña biblioteca de utilidades para crear una interfaz de usuario reactiva basada en estados.
Reef es una alternativa más sencilla a React, Vue y otras bibliotecas de UI. Sin pasos de construcción. Sin una sintaxis sofisticada. Solo Vanilla JS y algunas pequeñas funciones de utilidad. Instalar #
Reef funciona sin ningún paso de construcción. La CDN es la forma más rápida y sencilla de comenzar, pero puedes usar módulos importables o una descarga directa si lo prefieres.
<!-- Get the latest major version -->
<script src="https://cdn.jsdelivr.net/npm/reefjs@13/dist/reef.min.js"></script>
Con el script global, puede llamar a los métodos API en el reefobjeto o desestructurarlos en sus propias variables.
// You do this...
reef.store();
// or this...
let {store} = reef;
Reef utiliza versiones semánticas. Puede obtener una versión principal, secundaria o de parche de la CDN con la @1.2.3sintaxis. Puede encontrar todas las versiones disponibles en lanzamientos .
BRUSH NINJA
Gif.js
Gif es uno de los formatos más famosos que podemos encontrar, este tuvo su repunte y éxito en la era de GeoCities y hoy en día en varias formas, colores y sabores en varias redes sociales o agregadores de contenido.
Es posible poder generar, con HTML5 y un par de librerías en Javascript, un output Gif a partir de un contexto canvas. Esta librería utiliza las mismas librerías que necesitaríamos en la integración de antimatter15 pero wrappeada bajo un plugin escrito en CoffeeScript y utilizando jQuery para convertirlo en plugin.
La integración, encoding y generación de Gifs se vuelve una tarea bastante sencilla cómo puedes ver en el ejemplo de su landing page.
También soportado en la mayoría de los navegadores: Chrome, IE10+, Safari y mobile 6+, Firefox 17+.
BRUSH NINJA
FFmpeg.wasm
Permite que las aplicaciones web funcionen de manera efectiva con videos. Los WebCodecs son una alternativa estándar que ofrece soporte de codificación y decodificación similar, pero aún no se ha distribuido en todos los navegadores.
Ffmpeg.wasm es un puerto Webassembly/Javascript puro de FFmpeg. Permite grabar, convertir y transmitir vídeo y audio directamente dentro de los navegadores.
BRUSH NINJA
Jekyll
Tom Preston-Werner, uno de los cuatro fundadores de la plataforma GitHub, publicó en noviembre de 2008 el generador de páginas web Jekyll bajo una licencia de código abierto MIT. Escrito en Ruby, el programa recurre para su funcionamiento a un directorio de plantillas que contiene un conjunto de archivos de texto estructurados y estáticos en diversos formatos, los llamados markdowns, que son los que determinan tanto el diseño como el contenido del proyecto y pueden, por ello, personalizarse. Sin embargo, el programa no ofrece un editor WYSIWYG, sino que requiere trabajar con líneas de código. Para ello, se recomienda el editor de contenidos Prose, ya que simplifica la edición en lenguaje markdown y está optimizado para Jekyll.
Antes de incorporar los cambios realizados en el código a la versión en línea de la aplicación web, pueden comprobarse con ayuda del propio servidor de desarrollo de Jekyll. La conversión de los archivos de texto en una página web estática que pueda servirse con cualquiera de los servidores web habituales es tarea del motor de renderizado Liquid, que genera en un segundo plano el código HTML cada vez que los archivos se modifican.
BRUSH NINJA
Vídeos mp4
MP4 es un formato de almacenamiento de archivos multimedia ampliamente utilizado para almacenar vídeo y para transmisiones. Es un estándar internacional que funciona con una amplia gama de dispositivos.
MP4 hace referencia al archivo de contenedor digital que actúa como envoltura del vídeo, no al vídeo en sí. Contiene datos de vídeo comprimidos y otros datos asociados que son necesarios para reproducir el vídeo.
Durante el proceso de codificación, un archivo de vídeo se optimiza para varias plataformas, programas y dispositivos. Esto implica tanto la compresión (hacer el archivo más pequeño) como la transcodificación (cambiar el formato de vídeo).
En comparación con otros tipos de archivos de vídeo, los archivos MP4 suelen estar más comprimidos y, por tanto, son más pequeños. Como los componentes de audio y vídeo se comprimen por separado, tiene una calidad de vídeo relativamente alta después de la compresión.
BRUSH NINJA
Gulp 4
Gulp es una herramienta que sirve para automatizar muchas de las tareas habituales que se realizan durante el desarrollo de una aplicación web, desde copiar y mover archivos, hasta actualizar el navegador de forma automática cuando se modifica el código. Se trata de un task manager (gestor de tareas) en forma de script de NodeJS que se utiliza en el desarrollo web para ejecutar todo tipo de tareas, siendo las más habituales:
- Optimizar las imágenes web.
- Generar código CSS.
- Procesar código HTML para verificar que los enlaces que incluye son correctos.
- Empaquetar una web para poder ejecutar el script con el servidor (JavaScript, CSS, HTML…).
- Desplegar una página en el servidor web.
- Hacer FTP y SSH.
Gulp cuenta con más de 3000 plugins que permiten la ejecución de toda clase de tareas relacionadas con la programación web. Esta gran cantidad de complementos la convierten en una herramienta ideal para acelerar el proceso de creación de aplicaciones y sitios web, facilitando de forma notable el trabajo de los desarrolladores.
BRUSH NINJA
MVC
¿Qué es MVC?
MVC es un patrón de arquitectura que tiene como objetivo optimizar la comunicación de tu aplicación con la base de datos. Normalmente, dividimos la aplicación en tres capas: Model, View y Controller y, a través de estas capas, realizamos solicitudes y cambios en nuestra base de datos.
Aunque todavía es posible abstraer el código en más de tres capas, la mayoría de los programadores prefieren apegarse al patrón original para evitar que el código se vuelva demasiado complejo.
Este concepto es fundamental para cualquier desarrollador que se inicia en el estudio del backend y es un patrón utilizado en software de varias empresas. Entonces, ahora que tenemos la comprensión básica de la arquitectura de software, veremos en detalle todas las capas de un MVC. Luego, te enseñaré cómo crear una aplicación usando MVC en la práctica. Capa Model (Modelo de Negocio): A camada Model é responsável pela comunicação com o banco de dados. Ela gerencia e controla os dados da aplicação por meio de funções, podendo editar, adicionar ou fazer requisições de dados (tudo isso seguindo a lógica da função criada). Capa Controller: La aplicación utiliza la capa de control para llamar funciones desde la capa Model. A veces, usamos una capa de servicios en el medio que se encarga de validar datos, devolver errores, entre otros problemas que a algunos les gusta abstraer de la lógica del controller. Camada de View: La capa View sería la encargada de mostrar visualmente los datos que obtenemos de la base de datos en formato JSON o en una estructura HTML. Esta capa generalmente se deja al desarrollador frontend.
BRUSH NINJA
Base de datos a utilizar.
MySQL Workbench
El software MySQL Workbench es un entorno de MySQL gráfico de diseño de bases de datos, servidores, administración y mantenimiento para el sistema MySQL. Además, esta herramienta gráfica fue desarrollada y distribuida por la compañía de desarrollo de nube y locales Oracle Corporation.
La herramienta MySQL Workbench se encuentra disponible para su uso comercial, teniendo total compatibilidad con las versiones del servidor MySQL 5.6 en adelante.
Funciones de MySQL Workbench
Dentro de las funcionalidades y características de MySQL Workbench se pueden encontrar factores como:
Modelado de datos
Una de las características de MySQL Workbench permite a los desarrolladores, arquitectos de datos y demás clientes diseñar, modelar, gestionar y generar bases de datos de manera visual o gráfica, incluyendo todos los elementos necesarios para realizar modelos con un alto nivel de complejidad.
Esta plataforma permite, además, obtener información o diseño a partir de un producto, con el objetivo de establecer cuáles son sus componentes, cómo interactúan entre sí y cómo fueron creados. Este proceso se conoce como ingeniería inversa o retro-ingeniería, y MySQL Workbench permite llevarlo a cabo entre una base de datos que esté activa y un esquema.
BRUSH NINJA
Base de datos a utilizar.
Editor de tablas
Otra de las características de MySQL Workbench es el editor de tablas. Este entorno de MySQL gráfico cuenta también con la función de editor de tablas, que permite la modificación de todos los aspectos de la base de datos. Esto ofrece facilidades de uso para el proceso de configuración de las tablas, índices, columnas, opciones, permisos y particiones, entre otros elementos.
Migración de bases de datos
Esta herramienta de MySQL Workbench ofrece una solución completa y de fácil uso enfocada en migrar de Microsoft SQL Server, Microsoft Access, PostgreSQL, Sybase ASE y otras tablas, datos y objetos de un sistema de gestión de bases de datos relacionales (RDBMS) a MySQL. Esto permite que los usuarios tengan la posibilidad de convertir de manera rápida y sencilla las aplicaciones para que puedan ser ejecutaras en MySQL tanto en Windows como en plataformas bajo el sistema operativo Linux o Mac OS.
BRUSH NINJA
Base de datos a utilizar.
Panel de rendimiento visual
Otra de las características de MySQL Workbench es que le ofrece a sus usuarios una serie de elementos destinados a aumentar el rendimiento de las aplicaciones. De manera que, con el uso de esta herramienta gráfica, los clientes pueden observar de forma rápida todo lo relacionado con los indicadores clave de productividad, a través del llamado panel de rendimiento visual.
Esta función proporciona un conjunto de informes que ofrecen una fácil identificación y opciones para que el usuario vea dónde optimizar su consulta.
Desarrollo de SQL
MySQL Workbench se encarga también de la creación y gestión de conexiones a servidores de bases de datos, además del proceso de configuración de parámetros de conexión y la ejecución de consultas SQL en las conexiones de la base de datos, a través del uso del editor incorporado. Este editor también ofrece un resaltado de sintaxis en color, la reutilización de fragmentos de SQL, el historial de ejecución y la función de autocompletado.
BRUSH NINJA
Base de datos a utilizar.
Gestión del servidor
Otra de las funciones de MySQL Workbench proporciona una consola visual que permite la gestión de manera fácil de los entornos de MySQL Workbench. Esto permite que el usuario obtenga una mejor visibilidad de sus bases de datos y que, además, pueda hacer uso de herramientas visuales que contribuyan en la configuración de servidores, administración de usuarios, realización de backups o copias de seguridad y recuperación, al tiempo que inspecciona los datos de auditoria y ve el estado actual de la base de datos, monitoreando su rendimiento.
Lenguaje de programación.
¿Qué es JavaScript?
JavaScript es un lenguaje de programación que los desarrolladores utilizan para hacer páginas web interactivas. Desde actualizar fuentes de redes sociales a mostrar animaciones y mapas interactivos, las funciones de JavaScript pueden mejorar la experiencia del usuario de un sitio web. Como lenguaje de scripting del lado del servidor, se trata de una de las principales tecnologías de la World Wide Web. Por ejemplo, al navegar por Internet, en cualquier momento en el que vea un carrusel de imágenes, un menú desplegable “click-to-show” (clic para mostrar), o cambien de manera dinámica los elementos de color en una página web, estará viendo los efectos de JavaScript.
¿Para qué se utiliza JavaScript?
Anteriormente, las páginas web eran estáticas, similares a las páginas de un libro. Una página estática mostraba principalmente información en un diseño fijo y no todo aquello que esperamos de un sitio web moderno. JavaScript surgió como una tecnología del lado del navegador para hacer que las aplicaciones web fueran más dinámicas. Por medio de JavaScript, los navegadores eran capaces de responder a la interacción de los usuarios y cambiar la distribución del contenido en la página web.
A medida que el lenguaje evolucionó, los desarrolladores de JavaScript establecieron bibliotecas, marcos y prácticas de programación y comenzaron a utilizarlo fuera de los navegadores web. En la actualidad, puede utilizar JavaScript para el desarrollo tanto del lado del cliente como del lado del servidor. En las siguientes subsecciones se presentan algunos casos de uso comunes:
Anteriormente, las páginas web eran estáticas, similares a las páginas de un libro. Una página estática mostraba principalmente información en un diseño fijo y no todo aquello que esperamos de un sitio web moderno. JavaScript surgió como una tecnología del lado del navegador para hacer que las aplicaciones web fueran más dinámicas. Por medio de JavaScript, los navegadores eran capaces de responder a la interacción de los usuarios y cambiar la distribución del contenido en la página web.
A medida que el lenguaje evolucionó, los desarrolladores de JavaScript establecieron bibliotecas, marcos y prácticas de programación y comenzaron a utilizarlo fuera de los navegadores web. En la actualidad, puede utilizar JavaScript para el desarrollo tanto del lado del cliente como del lado del servidor. En las siguientes subsecciones se presentan algunos casos de uso comunes:
¿Cómo funciona JavaScript?
Todos los lenguajes de programación funcionan mediante la traducción de sintaxis similar a la del inglés a código de máquina, que posteriormente el sistema operativo se encarga de ejecutar. JavaScript se clasifica principalmente como un lenguaje de scripting o interpretado. El código JavaScript es interpretado, es decir, directamente traducido a código de lenguaje de máquina subyacente mediante un motor de JavaScript. En el caso de otros lenguajes de programación, un compilador se encarga de compilar todo el código en código de máquina en un paso diferente. En consecuencia, todos los lenguajes de scripts son lenguajes de programación, pero no todos los lenguajes de programación son lenguajes de scripts.
Plan de mantenimiento
CMMS
CMMS es un sistema de gestión de mantenimiento asistido por computadora, diseñado para trabajar en organizaciones de cualquier tamaño para ayudar de manera simple pero eficiente en la trazabilidad del manejo de los datos asociados con las operaciones de mantenimiento preventivo, correctivo y predictivo, historiales de activos, calendario de trabajos, indicadores de desempeño entre otros.
Ofrecemos una solución de seguimiento de activos que le brinda a cada equipo de mantenimiento las herramientas e información necesaria para elaborar el plan de mantenimiento, ejecutar órdenes de trabajo de manera eficiente y efectiva. La plataforma facilita la vida laboral del personal técnico, contribuye con su eficacia y brinda una gran visibilidad.
CMMShere
CMMShere software de mantenimiento computarizado. Gestión de mantenimiento preventivo y correctivo.
Podrás ver las funcionalidades mas importantes del CMMShere y adicionalmente podrás ver las caracteristicas mas impactantes del CMMSedge IoT, con este podrás supervisar y monitorizar los activos de mas alto costo en tiempo real.
¿CÓMO FUNCIONA UN CMMS?
Con la información en la base de datos de CMMShere.com apoya varias funciones del área de mantenimiento, además que te permite hacerlo desde cualquier lugar.
El sistema de gestión de mantenimiento computarizado o CMMShere es un software que centraliza la información de mantenimiento, facilitando los procesos de las operaciones del área.
Ayuda a optimizar el uso y disponibilidad de equipos físicos como la flota de vehículos, maquinaria pesada y de alto costo, infraestructuras de planta, plantas eléctricas, equipos de salud, maquinaria petrolera entre otros activos.
Frase
BRUSH NINJA
Diseñado para ser accesible a la mayor cantidad de personas posible, Brush Ninja es gratuito, privado y adecuado para personas de todas las edades.
BRUSH NINJA
Conclusiones
Las conclusiones a las que he llegado durante este proceso de investigación es que para desarrollar una aplicación web es algo que necesita que uno sea muy observador en cada uno de los detalles y requerimientos que necesita que se implemente en una aplicación web, ya que esta integrada por varias herramientas, como por varios softwares dependiendo de la inmensidad del proyecto. Al igual que es necesario que se tenga en mente que tipo de aplicación web es la que se quiere desarrollar y que lo va a complementar a la misma, como todas las cosas que va a poder realizar el usuario dentro de la misma y que tipo de navegadores van a ser aptos para usar esta aplicación.
Bibliografía.
Gabriela G.(29 Junio 2018)Brush Ninja, crea tus propias animaciones desde el navegador de forma rápida y sencilla.genbeta.Recuperado el 29 de Noviembre de 2023 de:https://www.genbeta.com/imagen-digital/brush-ninja-crea-tus-propias-animaciones-navegador-forma-rapida-sencilla(2023)JavaScript.developer.Recuperado el 29 de Noviembre de 2023 de:https://developer.mozilla.org/es/docs/Web/JavaScript Aprendizaje fabricjs.riptutorial.Recuperado el 29 de Noviembre de 2023 de:https://riptutorial.com/Download/fabricjs-es.pdf Chris F.Reef.https://reefjs.com/Recuperado el 29 de Noviembre de 2023 de:https://reefjs.com/ Chris F.Reef.https://reefjs.com/Recuperado el 29 de Noviembre de 2023 de:https://reefjs.com/getting-started/ Alejandro A.(24/10/2014)Generando Gifs con HTML5 Canvas y Javascript.Recuperado el 29 de Noviembre de 2023 de:https://octuweb.com/generando-gifs-html5-canvas-javascript/ (3 de mayo de 2023)WebAsssembly: acelerando y creando nuevas posibilidades en desarrollo web.Recuperado el 29 de Noviembre de 2023 de:https://www.campusmvp.es/recursos/post/webasssembly-acelerando-y-creando-nuevas-posibilidades-en-desarrollo-web.aspx#:~:text=FFMPEG%20en%20Wasm%20permite%20que,distribuido%20en%20todos%20los%20navegadores. ffmpegwasm.github.Recuperado el 29 de Noviembre de 2023 de:https://github.com/ffmpegwasm/ffmpeg.wasm
Bibliografía.
(30 de Marzo de 2022)Jekyll: el generador de webs estáticas que se aloja en GitHub.ionos.Recuperado el 29 de Noviembre de 2023 de:https://www.ionos.mx/digitalguide/hosting/blogs/jekyll-manual-de-instalacion-y-configuracion/(2023)¿Qué es MP4? | MPEG-4 vs. MP4.cloudflare.Recuperado el 29 de Noviembre de 2023 de:https://www.ionos.mx/digitalguide/hosting/blogs/jekyll-manual-de-instalacion-y-configuracion/ JavaScript.developer.Recuperado el 1 de Diciembre de 2023 de:https://developer.mozilla.org/es/docs/Web/JavaScript (2023)Introducción a las APIs web.developer.Recuperado el 1 de Diciembre de 2023 de:https://developer.mozilla.org/es/docs/Learn/JavaScript/Client-side_web_APIs/Introduction#apis_en_javascript_del_lado_cliente (27 de enero de 2023)¿Qué es MySQL Workbench?keepcoding..Recuperado el 1 de Diciembre de 2023 de:https://keepcoding.io/blog/que-es-mysql-workbench/
¡Gracias!
¿Cómo funciona un CMMS?
Con la información en la base de datos de CMMShere.com apoya varias funciones del área de mantenimiento, además que te permite hacerlo desde cualquier lugar.
El sistema de gestión de mantenimiento computarizado o CMMShere es un software que centraliza la información de mantenimiento, facilitando los procesos de las operaciones del área.
Ayuda a optimizar el uso y disponibilidad de equipos físicos como la flota de vehículos, maquinaria pesada y de alto costo, infraestructuras de planta, plantas eléctricas, equipos de salud, maquinaria petrolera entre otros activos.
¿Tienes una idea?
¡Que fluya la comunicación!
Con las plantillas de Genially podrás incluir recursos visuales para dejar a tu audiencia con la boca abierta. También destacar alguna frase o dato concreto que se quede grabado a fuego en la memoria de tu público e incluso embeber contenido externo que sorprenda: vídeos, fotos, audios... ¡Lo que tú quieras! ¿Necesitas más motivos para crear contenidos dinámicos? Bien: el 90% de la información que asimilamos nos llega a través de la vista y, además, retenemos un 42% más de información cuando el contenido se mueve.
- Genera experiencias con tu contenido.
- Tiene efecto WOW. Muy WOW.
- Logra que tu público recuerde el mensaje.
- Activa y sorprende a tu audiencia.
BRUSH NINJA
Zaira Marín García
Created on November 27, 2023
Start designing with a free template
Discover more than 1500 professional designs like these:
View
Corporate Christmas Presentation
View
Business Results Presentation
View
Meeting Plan Presentation
View
Customer Service Manual
View
Business vision deck
View
Economic Presentation
View
Tech Presentation Mobile
Explore all templates
Transcript
Implementación y desarrollo de
Brush Ninja
Zaira Marín García
Índice
Brush Ninja
Servidor WEB a utilizar.
Frase
Base de datos a utilizar.
Introducción.
¿Qué es Brush Ninja?
NET
Brush Ninja
MySQL Workbench
Tipo de despliegue web a utilizar
Lenguaje de programación
Aplicación a implementar.
Conclusiones.
¿Qué es Javascript?
Interfaces de Programacion de Aplicaciones
¿Qué contiene?
Plan de mantenimiento.
Bibliografía.
Herramientas de desarrollo web a utilizar
Procesos
Procedimiento para implementtar la app web
SCMMS
Javascript
Brush Ninja
INTRODUCCIÓN
Esta presentación esta conformada por los siguientes puntos o partes que conforman la implementación de un proyecto de una aplicación web, los cuales son los siguientes:
Brush Ninja
INTRODUCCIÓN
¿qué es Brush Ninja?
De igual forma vamos a explicar un poco que es y como funciona la aplicación que se va a desarrollar durante esta presentación. Brush Ninja es una aplicación web completamente gratuita que sirve para crear animaciones dibujadas a mano, directamente desde tu navegador y de forma sumamente simple. Si usas macOS, también tienen una app de escritorio para ese sistema operativo. Puedes usar el ratón, el touchpad o un stylus para hacer los dibujos, el que tengas o el que más te convenga. Brush Ninja te permite añadir hasta 1000 cuadros por animación y luego puedes exportar tu trabajo en formato GIF.
Brush Ninja
Aplicación a implementar.
¿Qué contiene?
La aplicación cuenta con cuatro herramientas diferentes: un pincel para dibujar a mano alzada con diferentes tamaños de grosor, una herramienta de formas para añadir círculos, cuadrados, triángulos y estrellas; una herramienta de lineas, y un borrador. En la parte inferior tienes el historial de tus cuadros, y puedes ir añadiendo cuantos _frames_ necesites para tu animación. La función "Onion Skinning" te permite ver copias "fantasmas" del cuadro anterior o posterior para ayudarte a posiciones bien tu dibujo y el tiempo de la animación.
Aplicación a implementar.
Brush Ninja
¿Qué contiene?
También tienes la opción de añadir marcas de agua a tus GIFs que te sirven de firma digital, y tienes la posibilidad de añadir fotos de Unsplash de fondo gracias a la integración con esa librería de fotos abiertas. No importa mucho el nivel de tus habilidades, pues la app es extremadamente fácil de usar, incluso por un novato. Ahora, con la calidad de tus dibujos si que no te pueden ayudar mucho, tampoco hace milagros.
Procesos
Procedimiento para implementar la app web
Desarrollar una aplicación web de banca en línea es un proyecto complejo que implica varios aspectos, desde la seguridad hasta la interfaz de usuario. A continuación, le proporcionaré una visión general de los pasos básicos que podría seguir para desarrollar una aplicación web de banca en línea. Ten en cuenta que este es un resumen general y cada paso puede ser mucho más detallado.
1. Definición de Requisitos y Objetivos: Definir claramente los requisitos y objetivos de la aplicación. Esto incluye características como la gestión de cuentas, transferencias de fondos, pagos, informes de transacciones, seguridad, etc. 2. Diseño de la Base de Datos: Diseñar una base de datos que maneje la información de los usuarios, cuentas, transacciones y cualquier otro dato relevante. Se utilizará un modelo de datos seguro y eficiente. 3. Desarrollo del Backend: Implementar el backend de la aplicación utilizando un lenguaje de programación adecuado para las necesidades (por ejemplo, Node.js, Python, Java). Implementará la lógica de negocio, la autenticación, la autorización y la seguridad.
Procedimiento para implementar la app web
4. Desarrollo del Frontend: Se crea una interfaz de usuario atractiva y fácil de usar utilizando tecnologías web como HTML, CSS y JavaScript. Puede utilizarse un framework como React, Angular o Vue.js para facilitar el desarrollo. 5. Implementación de Seguridad: Asegúrar de que la aplicación cumpla con los estándares de seguridad. Utiliza HTTPS, cifrado de datos, protección contra ataques de inyección, autenticación de dos factores, entre otras medidas de seguridad. 6. Integración con Servicios Financieros: Integrar la aplicación con servicios financieros para realizar transacciones en tiempo real, como procesadores de pagos y sistemas de transferencias. 7. Pruebas: Realizar pruebas exhaustivas para garantizar la estabilidad y la seguridad de la aplicación. Esto incluye pruebas de unidad, integración y sistema, así como pruebas de seguridad.
Procedimiento para implementar la app web
8. Despliegue: Desplegar la aplicación en un entorno de producción utilizando servicios de alojamiento web seguros y confiables. Configure copias de seguridad regulares y mecanismos de recuperación. 9. Mantenimiento Continuo: Proporcionar soporte continuo, realiza actualizaciones de seguridad y mejora las características según sea necesario. 10. Cumplimiento Normativo: Integrar la aplicación con servicios financieros para realizar transacciones en tiempo real, como procesadores de pagos y sistemas de transferencias. 11. Monitoreo: Implementar herramientas de monitoreo para monitorear el rendimiento de la aplicación, detectar problemas y responder rápidamente a eventos inesperados.
Servidor WEB a utilizar.
Con "Servidor web" podemos referirnos a hardware o software, oa ambos trabajando juntos. En cuanto a hardware, un servidor web es una computadora que almacena el software de servidor web, y los archivos que componen un sitio web (por ejemplo, documentos HTML, imágenes, hojas de estilos CSS y archivos JavaScript). Un servidor web -hardware- se conecta a internet y mantiene el intercambio de datos con otros dispositivos conectados a la web. En cuanto a software, un servidor web tiene muchas partes que controlan cómo los usuarios de la web obtienen acceso a los archivos alojados en el servidor; es decir, mínimamente, un servidor HTTP . Un servidor HTTP es una pieza de software capaz de comprender URLs (direcciones web) y HTTP (el protocolo que tu navegador usa para obtener las páginas web). Un servidor HTTP puede ser accedido a través de los nombres de dominio de los sitios web que alojan, y entrega el contenido de esos sitios web alojados al dispositivo del final. El que utiliza actualmente es estático, lo que significa lo siguiente: Un servidor web estático, o pila, consiste en una computadora (hardware) con un servidor HTTP (software). Llamamos a "estático" a este servidor porque envía los archivos que alojan "tal como se encuentran" (sin modificarlos) a tu navegador.
Servidor WEB a utilizar.
Pero se planea que cuente con un servidor dinámico, lo que significa lo siguiente: Un servidor web dinámico consiste en un servidor web estático con software adicional, habitualmente un servidor de aplicaciones y una base de datos . Llamamos "dinámico" a este servidor porque la aplicación servidor actualiza los archivos alojados, antes de enviar el contenido a su navegador mediante el servidor HTTP . Alojamiento de archivos (Hosting) Un servidor web primero debe almacenar los archivos del sitio web, es decir, todos los documentos HTML y sus medios relacionados, incluidas las imágenes, las hojas de estilo CSS, los archivos JavaScript, las fuentes y videos. Técnicamente, puede alojar todos esos archivos en su propia computadora, pero es mucho más conveniente almacenarlos en un servidor web dedicado que:
Tipo de despliegue web a utilizar
¿Qué son las APIs?
Las Interfaces de Programacion de Aplicaciones (APIs por sus siglas en inglés) son construcciones disponibles en los lenguajes de programación que permiten a los desarrolladores crear funcionalidades complejas de una manera simple. Estas abstraen el código más complejo para proveer una sintaxis más fácil de usar en su lugar. Si se quiere programar gráficos 3D, sería mucho más facil hacerlo usando una API escrita en un lenguaje de alto nivel como JavaScript o Python, en lugar de intentar escribir código de bajo nivel (por ejemplo: C o C++) que controle directamente la GPU del equipo u otras funciones gráficas. APIs en JavaScript del lado cliente JavaScript del lado cliente, particularmente, tiene muchas APIs disponibles — estas no son parte del lenguaje en sí, sino que están construidas sobre el núcleo de este lenguaje de programación, proporcionándote superpoderes adicionales para usar en tu código. Por lo general, se dividen en dos categorías:
Tipo de despliegue web a utilizar
APIs en JavaScript del lado cliente
Las APIs de navegador están integradas en tu navegador web y pueden exponer datos del navegador y del entorno informático circundante y hacer cosas complejas y útiles con él. Por ejemplo, la API de Geolocalización proporciona algunas construcciones simples de JavaScript para obtener datos de ubicación con los que, por ejemplo, trazar tu ubicación en un mapa de Google. Realmente, el navegador está haciendo uso de códigos de bajo nivel complejos en segundo plano (por ejemplo, C++) para comunicarse con el hardware GPS del dispositivo (o lo que esté disponible para determinar los datos de posición), recuperar datos de posición y devolverlos al entorno del navegador para su uso en tu código. Pero una vez más, la API se encarga de abstraer esta complejidad. Las APIs de terceros no están incluídas por defecto en el navegador, y por lo general es necesario obtener el código e información desde algún lugar de la Web. Por ejemplo, la API de Twitter permite hacer cosas como mostrar tus últimos tweets en un sitio web. Proporciona un conjunto especial de construcciones que puedes usar para consultar el servicio de Twitter y devolver información específica.
Tipo de despliegue web a utilizar
Relacion entre JavaScript, APIs, y otras herramientas de JavaScript
Otras herramientas de JavaScript: JavaScript — Un lenguaje de scripts de alto nivel incorporado en los navegadores que permite implementar interactividad en páginas web / apps. Ten en cuenta que JavaScript también está disponible en otros entornos de programación, como Node. APIs de navegador — Construcciones integradas en el navegador creadas con el lenguaje JavaScript y que permiten implementar funcionalidad mucho más fácilmente. APIs de terceros — Construcciones integradas en plataformas de terceros (por ejemplo Twitter, Facebook) que permiten usar algunas de las funcionalidades de esa plataforma en tus páginas web (como por ejemplo mostrar tus últimos Tweets en tu página web). Librerías JavaScript — Por lo general uno o más archivos JavaScript que contienen funciones personalizadas (en-US) que puedes añadir a tu página web para acelerar o habilitar la escritura de funcionalidades comunes. Por ejemplo jQuery, Mootools y React. Frameworks JavaScript — El siguiente paso a las librerías, los frameworks JavaScript (como Angular y Ember) suelen ser paquetes de HTML, CSS, JavaScript y otras tecnologías que se instalan y luego se usan para escribir una aplicación web completa desde cero. La diferencia clave entre una librería y un framework es la "Inversión del control". Cuando se llama a un método desde una librería, el desarrollador tiene el control. Con un framework el control se invierte: el framework llama al código del desarrollador.
Tipo de despliegue web a utilizar
Los tres tipos de APIs que utiliza BRUSH NINJA son los siguientes: APIs que obtienen datos del servidor: Comunmente usadas para actualizar pequeñas secciones de una página web. Este aparente pequeño detalle tiene un gran impacto en el performance y en el comportamiento de los sitios. — Sí solo necesitas actualizar un Stock de artículos o una lista de tiendas disponibles, al utilizar APIs para obtener datos desde el servidor lo lograrás sin tener que volver a cargar toda la página o aplicación logrando que estas tengan una sensación de rapidez y agilidad. Las APIs hacen esto posible gracias a que incluyen XMLHttpRequest y la Fetch API. Tambièn puede encontrar el termino Ajax que describe esta técnica. Más información sobre este tipo de APIs en Fetching data from the server. Las APIs para dibujar y manipular graficos: Ya son soportadas por la mayoría de navegadores. Las más populares son Canvas y WebGL, que permiten actualizar la información de cada uno de los píxeles contenidos en un <canvas> HTML, para crear escenas 2D y 3D. Por ejemplo, se pueden dibujar formas como rectángulos o círculos, importar una imagen en el canvas y aplicarle filtros como sepia o escala de grises usando la API de Canvas, o crear una escena compleja 3D con iluminación y texturas usando WebGL. Estas APIs, a menudo se combinan con apis para crear bucles de animación (como window.requestAnimationFrame()) y otras veces para hacer que se actualicen constantemente escenas de dibujos animados o videojuegos.
Tipo de despliegue web a utilizar
APIS de audio y vídeo como HTMLMediaElement, la Web Audio API, y WebRTC te permitirán hacer cosas realmente interesantes con elementos multimedia: crear una interfaz personalizada para los controles de reproducción de audio y vídeo, mostrar pistas de texto con subtítulos junto con el vídeo, capturar vídeo de la cámara web para ser manipulado en un canvas (ver más arriba) o mostrado en el ordenador de otra persona en una videoconferencia, añadir efectos a las pistas de audio (como ganancia, distorsión, retardo, etc).
APIs que se implementarán en BRUSH NINJA
Las APIS de almacenamiento en el lado del cliente: Se están popularizando en los navegadores. La habilidad de almacenar información en el lado del cliente es muy útil para hacer aplicaciones que salven su estado entre carga de páginas, e incluso trabajar cuando el dispositivo está fuera de línea. Hay varias opciones disponibles, por ejemplo el almacenamiento en pares de clave/valor con Web Storage API, y una forma más compleja de almacenar datos tabulados mediante la IndexedDB API.
BRUSH NINJA
Herramientas de desarrollo web a utilizar
Brush Ninja es una aplicación web que utiliza JavaScript para su funcionalidad. JavaScript es un lenguaje de programación que se ejecuta en un navegador web. Para dibujar, Brush Ninja utiliza la fantástica biblioteca FabricJS . Esta es una biblioteca de código abierto (el código se regala) para crear y editar dibujos vectoriales con JavaScript.
BRUSH NINJA
JavaScript
JavaScript (JS) es un lenguaje de programación ligero, interpretado, o compilado justo-a-tiempo (just-in-time) con funciones de primera clase. Si bien es más conocido como un lenguaje de scripting (secuencias de comandos) para páginas web, y es usado en muchos entornos fuera del navegador, tal como Node.js, Apache CouchDB y Adobe Acrobat JavaScript es un lenguaje de programación basada en prototipos, multiparadigma, de un solo hilo, dinámico, con soporte para programación orientada a objetos, imperativa y declarativa (por ejemplo programación funcional). Lee más en acerca de JavaScript. El estándar para JavaScript es ECMAScript (ECMA-262) y la especificación de la API para la Internacionalización de ECMAScript (ECMA-402). La documentación en MDN está basada enteramente en las últimas versiones preliminares de ECMA-262 y ECMA-402. Y en algunos casos donde algunas propuestas para nuevas funciones para ECMAScript ya hayan sido implementadas en los navegadores, la documentación y algunos artículos de MDN pueden hacer uso de algunas de estas funciones.
BRUSH NINJA
Fabric.js es una biblioteca de lienzo
Fabric te permite multiplicar el poder de la etiqueta canvas, porque te ayuda a administrar los elementos que colocas dentro, como objetos. Puedes modificar sus atributos e interactuar por medio de vértices, entre muchas más opciones muy potentes. Fabric proporciona un modelo de objetos interactivo encima del elemento lienzo, Fabric también tiene un analizador de SVG a lienzo (y de lienzo a SVG ) fabric.js es una biblioteca javascript poderosa y bastante simple para el lienzo HTML5. Proporciona una plataforma interactiva para trabajar con el lienzo HTML5. Usando la tela puede crear objetos / formas en lienzo desde formas geométricas simples hasta formas complejas. Incluso puedes trabajar con imágenes usando fabric.js. fabric.js también soporta animaciones. Proporciona controles para trabajar con imágenes como arrastrarlas, escalarlas girándolas. Permite agrupar formas / objetos que pueden ser manipulados juntos. admite eventos no solo limitados al elemento de lienzo sino también con objetos. Incluso proporciona funcionalidad para serializar el lienzo a SVG o JSON y reutilizarlo cuando sea necesario. Incluso admite la ejecución de fabric bajo Node.js, con la ayuda de las bibliotecas jsdom y node-canvas.
BRUSH NINJA
ReefJS
Una pequeña biblioteca de utilidades para crear una interfaz de usuario reactiva basada en estados. Reef es una alternativa más sencilla a React, Vue y otras bibliotecas de UI. Sin pasos de construcción. Sin una sintaxis sofisticada. Solo Vanilla JS y algunas pequeñas funciones de utilidad. Instalar # Reef funciona sin ningún paso de construcción. La CDN es la forma más rápida y sencilla de comenzar, pero puedes usar módulos importables o una descarga directa si lo prefieres. <!-- Get the latest major version --> <script src="https://cdn.jsdelivr.net/npm/reefjs@13/dist/reef.min.js"></script> Con el script global, puede llamar a los métodos API en el reefobjeto o desestructurarlos en sus propias variables. // You do this... reef.store(); // or this... let {store} = reef; Reef utiliza versiones semánticas. Puede obtener una versión principal, secundaria o de parche de la CDN con la @1.2.3sintaxis. Puede encontrar todas las versiones disponibles en lanzamientos .
BRUSH NINJA
Gif.js
Gif es uno de los formatos más famosos que podemos encontrar, este tuvo su repunte y éxito en la era de GeoCities y hoy en día en varias formas, colores y sabores en varias redes sociales o agregadores de contenido. Es posible poder generar, con HTML5 y un par de librerías en Javascript, un output Gif a partir de un contexto canvas. Esta librería utiliza las mismas librerías que necesitaríamos en la integración de antimatter15 pero wrappeada bajo un plugin escrito en CoffeeScript y utilizando jQuery para convertirlo en plugin. La integración, encoding y generación de Gifs se vuelve una tarea bastante sencilla cómo puedes ver en el ejemplo de su landing page. También soportado en la mayoría de los navegadores: Chrome, IE10+, Safari y mobile 6+, Firefox 17+.
BRUSH NINJA
FFmpeg.wasm
Permite que las aplicaciones web funcionen de manera efectiva con videos. Los WebCodecs son una alternativa estándar que ofrece soporte de codificación y decodificación similar, pero aún no se ha distribuido en todos los navegadores. Ffmpeg.wasm es un puerto Webassembly/Javascript puro de FFmpeg. Permite grabar, convertir y transmitir vídeo y audio directamente dentro de los navegadores.
BRUSH NINJA
Jekyll
Tom Preston-Werner, uno de los cuatro fundadores de la plataforma GitHub, publicó en noviembre de 2008 el generador de páginas web Jekyll bajo una licencia de código abierto MIT. Escrito en Ruby, el programa recurre para su funcionamiento a un directorio de plantillas que contiene un conjunto de archivos de texto estructurados y estáticos en diversos formatos, los llamados markdowns, que son los que determinan tanto el diseño como el contenido del proyecto y pueden, por ello, personalizarse. Sin embargo, el programa no ofrece un editor WYSIWYG, sino que requiere trabajar con líneas de código. Para ello, se recomienda el editor de contenidos Prose, ya que simplifica la edición en lenguaje markdown y está optimizado para Jekyll. Antes de incorporar los cambios realizados en el código a la versión en línea de la aplicación web, pueden comprobarse con ayuda del propio servidor de desarrollo de Jekyll. La conversión de los archivos de texto en una página web estática que pueda servirse con cualquiera de los servidores web habituales es tarea del motor de renderizado Liquid, que genera en un segundo plano el código HTML cada vez que los archivos se modifican.
BRUSH NINJA
Vídeos mp4
MP4 es un formato de almacenamiento de archivos multimedia ampliamente utilizado para almacenar vídeo y para transmisiones. Es un estándar internacional que funciona con una amplia gama de dispositivos. MP4 hace referencia al archivo de contenedor digital que actúa como envoltura del vídeo, no al vídeo en sí. Contiene datos de vídeo comprimidos y otros datos asociados que son necesarios para reproducir el vídeo. Durante el proceso de codificación, un archivo de vídeo se optimiza para varias plataformas, programas y dispositivos. Esto implica tanto la compresión (hacer el archivo más pequeño) como la transcodificación (cambiar el formato de vídeo). En comparación con otros tipos de archivos de vídeo, los archivos MP4 suelen estar más comprimidos y, por tanto, son más pequeños. Como los componentes de audio y vídeo se comprimen por separado, tiene una calidad de vídeo relativamente alta después de la compresión.
BRUSH NINJA
Gulp 4
Gulp es una herramienta que sirve para automatizar muchas de las tareas habituales que se realizan durante el desarrollo de una aplicación web, desde copiar y mover archivos, hasta actualizar el navegador de forma automática cuando se modifica el código. Se trata de un task manager (gestor de tareas) en forma de script de NodeJS que se utiliza en el desarrollo web para ejecutar todo tipo de tareas, siendo las más habituales:
- Optimizar las imágenes web.
- Generar código CSS.
- Procesar código HTML para verificar que los enlaces que incluye son correctos.
- Empaquetar una web para poder ejecutar el script con el servidor (JavaScript, CSS, HTML…).
- Desplegar una página en el servidor web.
- Hacer FTP y SSH.
Gulp cuenta con más de 3000 plugins que permiten la ejecución de toda clase de tareas relacionadas con la programación web. Esta gran cantidad de complementos la convierten en una herramienta ideal para acelerar el proceso de creación de aplicaciones y sitios web, facilitando de forma notable el trabajo de los desarrolladores.BRUSH NINJA
MVC
¿Qué es MVC?
MVC es un patrón de arquitectura que tiene como objetivo optimizar la comunicación de tu aplicación con la base de datos. Normalmente, dividimos la aplicación en tres capas: Model, View y Controller y, a través de estas capas, realizamos solicitudes y cambios en nuestra base de datos. Aunque todavía es posible abstraer el código en más de tres capas, la mayoría de los programadores prefieren apegarse al patrón original para evitar que el código se vuelva demasiado complejo. Este concepto es fundamental para cualquier desarrollador que se inicia en el estudio del backend y es un patrón utilizado en software de varias empresas. Entonces, ahora que tenemos la comprensión básica de la arquitectura de software, veremos en detalle todas las capas de un MVC. Luego, te enseñaré cómo crear una aplicación usando MVC en la práctica. Capa Model (Modelo de Negocio): A camada Model é responsável pela comunicação com o banco de dados. Ela gerencia e controla os dados da aplicação por meio de funções, podendo editar, adicionar ou fazer requisições de dados (tudo isso seguindo a lógica da função criada). Capa Controller: La aplicación utiliza la capa de control para llamar funciones desde la capa Model. A veces, usamos una capa de servicios en el medio que se encarga de validar datos, devolver errores, entre otros problemas que a algunos les gusta abstraer de la lógica del controller. Camada de View: La capa View sería la encargada de mostrar visualmente los datos que obtenemos de la base de datos en formato JSON o en una estructura HTML. Esta capa generalmente se deja al desarrollador frontend.
BRUSH NINJA
Base de datos a utilizar.
MySQL Workbench
El software MySQL Workbench es un entorno de MySQL gráfico de diseño de bases de datos, servidores, administración y mantenimiento para el sistema MySQL. Además, esta herramienta gráfica fue desarrollada y distribuida por la compañía de desarrollo de nube y locales Oracle Corporation. La herramienta MySQL Workbench se encuentra disponible para su uso comercial, teniendo total compatibilidad con las versiones del servidor MySQL 5.6 en adelante.
Funciones de MySQL Workbench
Dentro de las funcionalidades y características de MySQL Workbench se pueden encontrar factores como: Modelado de datos Una de las características de MySQL Workbench permite a los desarrolladores, arquitectos de datos y demás clientes diseñar, modelar, gestionar y generar bases de datos de manera visual o gráfica, incluyendo todos los elementos necesarios para realizar modelos con un alto nivel de complejidad. Esta plataforma permite, además, obtener información o diseño a partir de un producto, con el objetivo de establecer cuáles son sus componentes, cómo interactúan entre sí y cómo fueron creados. Este proceso se conoce como ingeniería inversa o retro-ingeniería, y MySQL Workbench permite llevarlo a cabo entre una base de datos que esté activa y un esquema.
BRUSH NINJA
Base de datos a utilizar.
Editor de tablas
Otra de las características de MySQL Workbench es el editor de tablas. Este entorno de MySQL gráfico cuenta también con la función de editor de tablas, que permite la modificación de todos los aspectos de la base de datos. Esto ofrece facilidades de uso para el proceso de configuración de las tablas, índices, columnas, opciones, permisos y particiones, entre otros elementos.
Migración de bases de datos
Esta herramienta de MySQL Workbench ofrece una solución completa y de fácil uso enfocada en migrar de Microsoft SQL Server, Microsoft Access, PostgreSQL, Sybase ASE y otras tablas, datos y objetos de un sistema de gestión de bases de datos relacionales (RDBMS) a MySQL. Esto permite que los usuarios tengan la posibilidad de convertir de manera rápida y sencilla las aplicaciones para que puedan ser ejecutaras en MySQL tanto en Windows como en plataformas bajo el sistema operativo Linux o Mac OS.
BRUSH NINJA
Base de datos a utilizar.
Panel de rendimiento visual
Otra de las características de MySQL Workbench es que le ofrece a sus usuarios una serie de elementos destinados a aumentar el rendimiento de las aplicaciones. De manera que, con el uso de esta herramienta gráfica, los clientes pueden observar de forma rápida todo lo relacionado con los indicadores clave de productividad, a través del llamado panel de rendimiento visual. Esta función proporciona un conjunto de informes que ofrecen una fácil identificación y opciones para que el usuario vea dónde optimizar su consulta.
Desarrollo de SQL
MySQL Workbench se encarga también de la creación y gestión de conexiones a servidores de bases de datos, además del proceso de configuración de parámetros de conexión y la ejecución de consultas SQL en las conexiones de la base de datos, a través del uso del editor incorporado. Este editor también ofrece un resaltado de sintaxis en color, la reutilización de fragmentos de SQL, el historial de ejecución y la función de autocompletado.
BRUSH NINJA
Base de datos a utilizar.
Gestión del servidor
Otra de las funciones de MySQL Workbench proporciona una consola visual que permite la gestión de manera fácil de los entornos de MySQL Workbench. Esto permite que el usuario obtenga una mejor visibilidad de sus bases de datos y que, además, pueda hacer uso de herramientas visuales que contribuyan en la configuración de servidores, administración de usuarios, realización de backups o copias de seguridad y recuperación, al tiempo que inspecciona los datos de auditoria y ve el estado actual de la base de datos, monitoreando su rendimiento.
Lenguaje de programación.
¿Qué es JavaScript?
JavaScript es un lenguaje de programación que los desarrolladores utilizan para hacer páginas web interactivas. Desde actualizar fuentes de redes sociales a mostrar animaciones y mapas interactivos, las funciones de JavaScript pueden mejorar la experiencia del usuario de un sitio web. Como lenguaje de scripting del lado del servidor, se trata de una de las principales tecnologías de la World Wide Web. Por ejemplo, al navegar por Internet, en cualquier momento en el que vea un carrusel de imágenes, un menú desplegable “click-to-show” (clic para mostrar), o cambien de manera dinámica los elementos de color en una página web, estará viendo los efectos de JavaScript.
¿Para qué se utiliza JavaScript?
Anteriormente, las páginas web eran estáticas, similares a las páginas de un libro. Una página estática mostraba principalmente información en un diseño fijo y no todo aquello que esperamos de un sitio web moderno. JavaScript surgió como una tecnología del lado del navegador para hacer que las aplicaciones web fueran más dinámicas. Por medio de JavaScript, los navegadores eran capaces de responder a la interacción de los usuarios y cambiar la distribución del contenido en la página web. A medida que el lenguaje evolucionó, los desarrolladores de JavaScript establecieron bibliotecas, marcos y prácticas de programación y comenzaron a utilizarlo fuera de los navegadores web. En la actualidad, puede utilizar JavaScript para el desarrollo tanto del lado del cliente como del lado del servidor. En las siguientes subsecciones se presentan algunos casos de uso comunes: Anteriormente, las páginas web eran estáticas, similares a las páginas de un libro. Una página estática mostraba principalmente información en un diseño fijo y no todo aquello que esperamos de un sitio web moderno. JavaScript surgió como una tecnología del lado del navegador para hacer que las aplicaciones web fueran más dinámicas. Por medio de JavaScript, los navegadores eran capaces de responder a la interacción de los usuarios y cambiar la distribución del contenido en la página web. A medida que el lenguaje evolucionó, los desarrolladores de JavaScript establecieron bibliotecas, marcos y prácticas de programación y comenzaron a utilizarlo fuera de los navegadores web. En la actualidad, puede utilizar JavaScript para el desarrollo tanto del lado del cliente como del lado del servidor. En las siguientes subsecciones se presentan algunos casos de uso comunes:
¿Cómo funciona JavaScript?
Todos los lenguajes de programación funcionan mediante la traducción de sintaxis similar a la del inglés a código de máquina, que posteriormente el sistema operativo se encarga de ejecutar. JavaScript se clasifica principalmente como un lenguaje de scripting o interpretado. El código JavaScript es interpretado, es decir, directamente traducido a código de lenguaje de máquina subyacente mediante un motor de JavaScript. En el caso de otros lenguajes de programación, un compilador se encarga de compilar todo el código en código de máquina en un paso diferente. En consecuencia, todos los lenguajes de scripts son lenguajes de programación, pero no todos los lenguajes de programación son lenguajes de scripts.
Plan de mantenimiento
CMMS
CMMS es un sistema de gestión de mantenimiento asistido por computadora, diseñado para trabajar en organizaciones de cualquier tamaño para ayudar de manera simple pero eficiente en la trazabilidad del manejo de los datos asociados con las operaciones de mantenimiento preventivo, correctivo y predictivo, historiales de activos, calendario de trabajos, indicadores de desempeño entre otros. Ofrecemos una solución de seguimiento de activos que le brinda a cada equipo de mantenimiento las herramientas e información necesaria para elaborar el plan de mantenimiento, ejecutar órdenes de trabajo de manera eficiente y efectiva. La plataforma facilita la vida laboral del personal técnico, contribuye con su eficacia y brinda una gran visibilidad.
CMMShere
CMMShere software de mantenimiento computarizado. Gestión de mantenimiento preventivo y correctivo.
Podrás ver las funcionalidades mas importantes del CMMShere y adicionalmente podrás ver las caracteristicas mas impactantes del CMMSedge IoT, con este podrás supervisar y monitorizar los activos de mas alto costo en tiempo real.
¿CÓMO FUNCIONA UN CMMS?
Con la información en la base de datos de CMMShere.com apoya varias funciones del área de mantenimiento, además que te permite hacerlo desde cualquier lugar. El sistema de gestión de mantenimiento computarizado o CMMShere es un software que centraliza la información de mantenimiento, facilitando los procesos de las operaciones del área. Ayuda a optimizar el uso y disponibilidad de equipos físicos como la flota de vehículos, maquinaria pesada y de alto costo, infraestructuras de planta, plantas eléctricas, equipos de salud, maquinaria petrolera entre otros activos.
Frase
BRUSH NINJA
Diseñado para ser accesible a la mayor cantidad de personas posible, Brush Ninja es gratuito, privado y adecuado para personas de todas las edades.
BRUSH NINJA
Conclusiones
Las conclusiones a las que he llegado durante este proceso de investigación es que para desarrollar una aplicación web es algo que necesita que uno sea muy observador en cada uno de los detalles y requerimientos que necesita que se implemente en una aplicación web, ya que esta integrada por varias herramientas, como por varios softwares dependiendo de la inmensidad del proyecto. Al igual que es necesario que se tenga en mente que tipo de aplicación web es la que se quiere desarrollar y que lo va a complementar a la misma, como todas las cosas que va a poder realizar el usuario dentro de la misma y que tipo de navegadores van a ser aptos para usar esta aplicación.
Bibliografía.
Gabriela G.(29 Junio 2018)Brush Ninja, crea tus propias animaciones desde el navegador de forma rápida y sencilla.genbeta.Recuperado el 29 de Noviembre de 2023 de:https://www.genbeta.com/imagen-digital/brush-ninja-crea-tus-propias-animaciones-navegador-forma-rapida-sencilla(2023)JavaScript.developer.Recuperado el 29 de Noviembre de 2023 de:https://developer.mozilla.org/es/docs/Web/JavaScript Aprendizaje fabricjs.riptutorial.Recuperado el 29 de Noviembre de 2023 de:https://riptutorial.com/Download/fabricjs-es.pdf Chris F.Reef.https://reefjs.com/Recuperado el 29 de Noviembre de 2023 de:https://reefjs.com/ Chris F.Reef.https://reefjs.com/Recuperado el 29 de Noviembre de 2023 de:https://reefjs.com/getting-started/ Alejandro A.(24/10/2014)Generando Gifs con HTML5 Canvas y Javascript.Recuperado el 29 de Noviembre de 2023 de:https://octuweb.com/generando-gifs-html5-canvas-javascript/ (3 de mayo de 2023)WebAsssembly: acelerando y creando nuevas posibilidades en desarrollo web.Recuperado el 29 de Noviembre de 2023 de:https://www.campusmvp.es/recursos/post/webasssembly-acelerando-y-creando-nuevas-posibilidades-en-desarrollo-web.aspx#:~:text=FFMPEG%20en%20Wasm%20permite%20que,distribuido%20en%20todos%20los%20navegadores. ffmpegwasm.github.Recuperado el 29 de Noviembre de 2023 de:https://github.com/ffmpegwasm/ffmpeg.wasm
Bibliografía.
(30 de Marzo de 2022)Jekyll: el generador de webs estáticas que se aloja en GitHub.ionos.Recuperado el 29 de Noviembre de 2023 de:https://www.ionos.mx/digitalguide/hosting/blogs/jekyll-manual-de-instalacion-y-configuracion/(2023)¿Qué es MP4? | MPEG-4 vs. MP4.cloudflare.Recuperado el 29 de Noviembre de 2023 de:https://www.ionos.mx/digitalguide/hosting/blogs/jekyll-manual-de-instalacion-y-configuracion/ JavaScript.developer.Recuperado el 1 de Diciembre de 2023 de:https://developer.mozilla.org/es/docs/Web/JavaScript (2023)Introducción a las APIs web.developer.Recuperado el 1 de Diciembre de 2023 de:https://developer.mozilla.org/es/docs/Learn/JavaScript/Client-side_web_APIs/Introduction#apis_en_javascript_del_lado_cliente (27 de enero de 2023)¿Qué es MySQL Workbench?keepcoding..Recuperado el 1 de Diciembre de 2023 de:https://keepcoding.io/blog/que-es-mysql-workbench/
¡Gracias!
¿Cómo funciona un CMMS?
Con la información en la base de datos de CMMShere.com apoya varias funciones del área de mantenimiento, además que te permite hacerlo desde cualquier lugar. El sistema de gestión de mantenimiento computarizado o CMMShere es un software que centraliza la información de mantenimiento, facilitando los procesos de las operaciones del área. Ayuda a optimizar el uso y disponibilidad de equipos físicos como la flota de vehículos, maquinaria pesada y de alto costo, infraestructuras de planta, plantas eléctricas, equipos de salud, maquinaria petrolera entre otros activos.
¿Tienes una idea?
¡Que fluya la comunicación!
Con las plantillas de Genially podrás incluir recursos visuales para dejar a tu audiencia con la boca abierta. También destacar alguna frase o dato concreto que se quede grabado a fuego en la memoria de tu público e incluso embeber contenido externo que sorprenda: vídeos, fotos, audios... ¡Lo que tú quieras! ¿Necesitas más motivos para crear contenidos dinámicos? Bien: el 90% de la información que asimilamos nos llega a través de la vista y, además, retenemos un 42% más de información cuando el contenido se mueve.