Editor Web usando fabric js, javascript, reactjs
Budget: $250 – $750 USD
Hola estimado lector,
Soy Óscar Acosta, CEO de la empresa Torrente Dev SAS, una startup colombiana que, con mucho esfuerzo, estamos tratando de crear soluciones tecnológicas enfocadas en la educación. En esta ocasión, quiero compartir un requerimiento importante para nosotros: estamos buscando un profesional con altas competencias en ReactJS, NodeJS, TypeScript, Fabric.js y otras tecnologías que permitan lograr el siguiente objetivo.
Objetivo del desarrollo:
Necesitamos construir un editor tipo canvas para una plataforma que estamos desarrollando. Esta plataforma permitirá a los docentes crear videos para sus clases a partir de los slides del recurso.
Estructura requerida para el editor:
El editor que necesitamos es esencialmente el mismo que se muestra en las imágenes a continuación. Cada imagen describe los alcances mínimos necesarios para que el editor funcione correctamente.
Imagen 1: Esta imagen muestra la vista general. Queremos que nuestro editor tenga colores grises, buscando un aspecto serio y elegante.
Imagen 2: En la parte superior, el usuario debe poder ingresar el nombre del recurso que está creando, permitiendo solo letras y números y con un máximo de 100 caracteres.
Imagen 3: En el costado izquierdo deben aparecer las herramientas de construcción del recurso. Las herramientas mínimas necesarias son:
• Sección para seleccionar plantilla (Imagen 3): Para cada slide que el usuario cree, es importante contar con al menos 5 plantillas prediseñadas con animaciones básicas como entrada de texto, aparición de texto, desplazamiento, zoom in o zoom out, entre otras. (Requerimos la documentación sobre cómo crear más plantillas).
• Sección de banco personal (Imagen 3-1): Esta sección debe mostrar las imágenes y videos que el usuario ha cargado hasta la fecha.
• Sección de multimedia externo (Imagen 3-2): Este módulo debe permitir acceder a herramientas de imágenes como Unsplash, videos de Coverr, imágenes GIF y stickers de Tenor, y bancos de imágenes y videos de Pixabay y Pexels, todo a través de API.
• Sección de estilos y distribución tipográfica (Imagen 3-3): Este módulo debe contar con al menos 20 estilos tipográficos. (Requerimos la documentación sobre cómo crear más estilos).
• Sección de elementos (Imagen 3-4): Este módulo permite a los usuarios colocar objetos vectoriales en sus slides, con un mínimo de 20 objetos. (Requerimos la documentación sobre cómo cargar más objetos).
Imagen 4: En la zona de construcción de elementos, el editor debe funcionar como un canvas, permitiendo arrastrar y soltar, mover por el lienzo, ver guías, borrar y contar con menús emergentes para más configuraciones.
Sección de capas (Imagen 4-1): El editor debe permitir tener capas de los recursos creados en el slider, pudiendo cambiar su posición, duplicar, eliminar o bloquear elementos para protegerlos de eliminación y movimiento.
Sección de navegación por slides (Imagen 4-2): Esta sección permite al usuario navegar correctamente entre los slides creados. Al alcanzar un cierto tamaño, deben aparecer botones de navegación adelante y atrás. El usuario debe poder cambiar la posición de un slide arrastrándolo a la ubicación deseada, con un indicador visual.
Sección de herramientas adicionales (Imagen 4-3): Esta sección debe incluir botones para reproducir una previsualización, agregar nuevos slides en blanco, duplicar slides existentes y eliminar slides, con una confirmación de eliminación.
Imagen 5 y 5-1: Al seleccionar una imagen, en el costado derecho deben aparecer herramientas para la distribución del elemento, edición de posición, tamaño, bloqueo de tamaño y ubicación, rotación, opacidad, agregar radios, bloqueo para no editar, filtros de color, bordes y color sobre la imagen. También debe permitir agregar animaciones con opciones de tipo, duración y delay.
Imagen 6 y 6-1: Al seleccionar un texto, en el costado derecho deben aparecer herramientas para la distribución del elemento, edición de posición, tamaño, bloqueo de tamaño y ubicación, rotación, opacidad, radios, bloqueo para no editar, tipo de fuente (Google Fonts), estilo (negrita, cursiva, subrayado, mayúsculas), tamaño, alineación, espaciado entre letras, color y borde de la caja de texto. También debe permitir agregar animaciones.
Imagen 7 y 7-1: Al seleccionar un objeto vectorial, en el costado derecho deben aparecer herramientas para la distribución del elemento, edición de posición, tamaño, bloqueo de tamaño y ubicación, rotación y opacidad. También debe permitir agregar animaciones.
Imagen 8: Al seleccionar un video, en el costado derecho deben aparecer herramientas para la distribución del elemento, edición de posición, tamaño, bloqueo de tamaño y ubicación, rotación, opacidad y filtros de color. También debe permitir activar o desactivar el loop del video y agregar animaciones.
Imagen 9: Herramientas flotantes de acceso rápido para el usuario al seleccionar un texto.
Imagen 10, 10-1 y 10-2: Herramientas flotantes de acceso rápido para el usuario al seleccionar una imagen, incluyendo funcionalidad de zoom y desplazamiento de imagen, con opciones de cambiar el tamaño desde el lienzo sin dañar la imagen.
Imagen 11: Herramientas flotantes de acceso rápido para el usuario al seleccionar un objeto vectorial.
Imagen 12: Herramientas flotantes de acceso rápido para el usuario al seleccionar un video.
Imagen 13: En la parte superior derecha, debe haber un botón para guardar el avance del trabajo, un botón para publicar el recurso y una sección para ajustar la vista del canvas al 50%, 75%, 100%, 150% o 200%, para facilitar la visualización a personas con dificultades visuales.
Es importante que el editor cuente con guías para ayudar a los usuarios a ubicar mejor los objetos en el lienzo. Se adjunta un video mostrando un editor que tomamos como guía para desarrollar el nuevo.
Espero que la información en este documento aclare nuestro requerimiento. Este es un proyecto que estamos desarrollando en beneficio de los estudiantes en Colombia, gracias al apoyo de herramientas para sus docentes. Somos una empresa sin gran capital, pero con el objetivo de crecer y contribuir a la educación. Esperamos contar con tu apoyo en este desarrollo y en futuros proyectos.
Muchas gracias y quedo atento a tus comentarios, dudas y presupuesto para realizar el editor.
Soy Óscar Acosta, CEO de la empresa Torrente Dev SAS, una startup colombiana que, con mucho esfuerzo, estamos tratando de crear soluciones tecnológicas enfocadas en la educación. En esta ocasión, quiero compartir un requerimiento importante para nosotros: estamos buscando un profesional con altas competencias en ReactJS, NodeJS, TypeScript, Fabric.js y otras tecnologías que permitan lograr el siguiente objetivo.
Objetivo del desarrollo:
Necesitamos construir un editor tipo canvas para una plataforma que estamos desarrollando. Esta plataforma permitirá a los docentes crear videos para sus clases a partir de los slides del recurso.
Estructura requerida para el editor:
El editor que necesitamos es esencialmente el mismo que se muestra en las imágenes a continuación. Cada imagen describe los alcances mínimos necesarios para que el editor funcione correctamente.
Imagen 1: Esta imagen muestra la vista general. Queremos que nuestro editor tenga colores grises, buscando un aspecto serio y elegante.
Imagen 2: En la parte superior, el usuario debe poder ingresar el nombre del recurso que está creando, permitiendo solo letras y números y con un máximo de 100 caracteres.
Imagen 3: En el costado izquierdo deben aparecer las herramientas de construcción del recurso. Las herramientas mínimas necesarias son:
• Sección para seleccionar plantilla (Imagen 3): Para cada slide que el usuario cree, es importante contar con al menos 5 plantillas prediseñadas con animaciones básicas como entrada de texto, aparición de texto, desplazamiento, zoom in o zoom out, entre otras. (Requerimos la documentación sobre cómo crear más plantillas).
• Sección de banco personal (Imagen 3-1): Esta sección debe mostrar las imágenes y videos que el usuario ha cargado hasta la fecha.
• Sección de multimedia externo (Imagen 3-2): Este módulo debe permitir acceder a herramientas de imágenes como Unsplash, videos de Coverr, imágenes GIF y stickers de Tenor, y bancos de imágenes y videos de Pixabay y Pexels, todo a través de API.
• Sección de estilos y distribución tipográfica (Imagen 3-3): Este módulo debe contar con al menos 20 estilos tipográficos. (Requerimos la documentación sobre cómo crear más estilos).
• Sección de elementos (Imagen 3-4): Este módulo permite a los usuarios colocar objetos vectoriales en sus slides, con un mínimo de 20 objetos. (Requerimos la documentación sobre cómo cargar más objetos).
Imagen 4: En la zona de construcción de elementos, el editor debe funcionar como un canvas, permitiendo arrastrar y soltar, mover por el lienzo, ver guías, borrar y contar con menús emergentes para más configuraciones.
Sección de capas (Imagen 4-1): El editor debe permitir tener capas de los recursos creados en el slider, pudiendo cambiar su posición, duplicar, eliminar o bloquear elementos para protegerlos de eliminación y movimiento.
Sección de navegación por slides (Imagen 4-2): Esta sección permite al usuario navegar correctamente entre los slides creados. Al alcanzar un cierto tamaño, deben aparecer botones de navegación adelante y atrás. El usuario debe poder cambiar la posición de un slide arrastrándolo a la ubicación deseada, con un indicador visual.
Sección de herramientas adicionales (Imagen 4-3): Esta sección debe incluir botones para reproducir una previsualización, agregar nuevos slides en blanco, duplicar slides existentes y eliminar slides, con una confirmación de eliminación.
Imagen 5 y 5-1: Al seleccionar una imagen, en el costado derecho deben aparecer herramientas para la distribución del elemento, edición de posición, tamaño, bloqueo de tamaño y ubicación, rotación, opacidad, agregar radios, bloqueo para no editar, filtros de color, bordes y color sobre la imagen. También debe permitir agregar animaciones con opciones de tipo, duración y delay.
Imagen 6 y 6-1: Al seleccionar un texto, en el costado derecho deben aparecer herramientas para la distribución del elemento, edición de posición, tamaño, bloqueo de tamaño y ubicación, rotación, opacidad, radios, bloqueo para no editar, tipo de fuente (Google Fonts), estilo (negrita, cursiva, subrayado, mayúsculas), tamaño, alineación, espaciado entre letras, color y borde de la caja de texto. También debe permitir agregar animaciones.
Imagen 7 y 7-1: Al seleccionar un objeto vectorial, en el costado derecho deben aparecer herramientas para la distribución del elemento, edición de posición, tamaño, bloqueo de tamaño y ubicación, rotación y opacidad. También debe permitir agregar animaciones.
Imagen 8: Al seleccionar un video, en el costado derecho deben aparecer herramientas para la distribución del elemento, edición de posición, tamaño, bloqueo de tamaño y ubicación, rotación, opacidad y filtros de color. También debe permitir activar o desactivar el loop del video y agregar animaciones.
Imagen 9: Herramientas flotantes de acceso rápido para el usuario al seleccionar un texto.
Imagen 10, 10-1 y 10-2: Herramientas flotantes de acceso rápido para el usuario al seleccionar una imagen, incluyendo funcionalidad de zoom y desplazamiento de imagen, con opciones de cambiar el tamaño desde el lienzo sin dañar la imagen.
Imagen 11: Herramientas flotantes de acceso rápido para el usuario al seleccionar un objeto vectorial.
Imagen 12: Herramientas flotantes de acceso rápido para el usuario al seleccionar un video.
Imagen 13: En la parte superior derecha, debe haber un botón para guardar el avance del trabajo, un botón para publicar el recurso y una sección para ajustar la vista del canvas al 50%, 75%, 100%, 150% o 200%, para facilitar la visualización a personas con dificultades visuales.
Es importante que el editor cuente con guías para ayudar a los usuarios a ubicar mejor los objetos en el lienzo. Se adjunta un video mostrando un editor que tomamos como guía para desarrollar el nuevo.
Espero que la información en este documento aclare nuestro requerimiento. Este es un proyecto que estamos desarrollando en beneficio de los estudiantes en Colombia, gracias al apoyo de herramientas para sus docentes. Somos una empresa sin gran capital, pero con el objetivo de crecer y contribuir a la educación. Esperamos contar con tu apoyo en este desarrollo y en futuros proyectos.
Muchas gracias y quedo atento a tus comentarios, dudas y presupuesto para realizar el editor.