Proyecto | PizzaraJs

Introducción

El proyecto consiste en crear una aplicación web de una sola página (SPA) que permite dibujar figuras básicas como: círculo, triángulo, cuadrado, líneas y utilizar una herramienta de lápiz. Además, incluye opciones avanzadas como:

Modificación del color de los bordes y el fondo de cada figura.
Ajuste del grosor de los bordes para cada figura.

También se han implementado herramientas adicionales, como:

Gestión de capas.
Herramienta de borrador.
Exportar el lienzo en formato PNG o JPG.
Funcionalidades de rehacer y deshacer.
Exportar e importar lienzos en formato JSON.
Como características adicionales, se incluye la opción de dibujar una figura de corazón y agregar texto como herramienta.

El sitio es completamente adaptable (responsive), optimizado para dispositivos táctiles, tabletas, laptops y computadoras de escritorio. Además, incluye mejoras de accesibilidad como tooltips para cada herramienta.

Ver proyecto (GitHub Pages)

Funciones

El sitio web usa react-router-dom, componentes, custom hooks , context y provider para el funcionamiento del sitio con React. Además de usar e incluir módulos externos de npm para React.

Este sitio web tiene las siguientes funciones:

Dibujar trazos
Capas

Agregar
Eliminar
Ocultar
Activar

Dibujar formas

Círculo
Cuadrado
Triángulo
Corazón
Línea
Lápiz
Texto

Exportar e importar capas, trazos y formas en un archivo JSON
Deshacer y Rehacer capas, trazos y formas
Exportar a imagen PNG y JPG
Modificar herramientas para cada forma
Herramienta de borrador

Este conjunto de tecnologías y características para este sitio web:

Proyecto dockerizado. (*)
Proyecto vagratizado. (*)
Estilos de Tailwind CSS
Componentes funcionales de ReactJS
Hooks personalizados
Context y Provider
Canvas HTML 5
React Icons (Bootstrap)
React Tooltip
Etiquetas de Open Graph (para SEO)

¿Cómo funciona?

Al entrar al sitio web, por defecto se selecciona la herramienta de lápiz, que puedes comenzar a dibujar sobre la pizarra, el sitio web tiene un sistema de historial para deshacer y rehacer los trazos.

Al hacer clic en el botón, que está a un lado del logo, se mostrará las herramientas avanzadas, con que, puedes crear capas ocultar y mostrar capas, puedes exportar el dibujo en una imagen PNG o JPG, puedes exportar en un archivo JSON e importar un JSON de los trazos dibujados.

Adicionalmente, puedes presionar cambiar de herramienta para dibujar formas, tales como:

Lápiz
Línea
Texto
Círculo
Triángulo
Cuadrado
Corazón

Vista previas

Práctica | Text2ArtJS

Introducción

Consiste en crear un sitio web (single page) para generar Arte ASCII basado en Texto, Imagen y GIF.

Ver proyecto (GitHub Pages)

Objetivo

El objetivo de la práctica es usar react-router-dom, componentes, custom hooks durante el desarrollo de la práctica con React. Además de usar e incluir módulos externos de npm para React.

Este conjunto de tecnologías y características para este sitio web:

Proyecto dockerizado. (*)
Proyecto vagratizado. (*)
Estilos de Tailwind CSS
Componentes funcionales de ReactJS
Hooks personalizados
Etiquetas de Open Graph (para SEO)

Las herramientas utilizadas para la práctica son:

Visual Studio Code (editor de texto)
NPM (gestor de paquetes)
Vite (bundler o empaquetador de aplicaciones web)
Git (control de versiones)
GitHub (Alojamento de repositorios git)
GitHub Pages (Alojamiento de sitios web estáticos)
MySQL (base de datos)
Terminal
etc.

Conocimientos obtenidos

Vite es un bundler o empaquetado de aplicaciones web y una herramienta de desarrollo que se distingue por su alta velocidad y eficiencia.

ReactJS es una biblioteca de JavaScript de código abierto utilizada para construir interfaces de usuario, especialmente para aplicaciones web de una sola página (SPA, por sus siglas en inglés).

GitHub Pages es un servicio proporcionado por GitHub que permite a los usuarios alojar sitios web estáticos directamente desde un repositorio en GitHub.

Open Graph son metadatos de etiquetas para HTML que permite a las páginas web optimizar su apariencia y contenido cuando son compartidas en redes sociales o aplicaciones.

Al desarrollar la práctica se obtiene conocimientos acerca de

Vite Sirve como un empaquetado de aplicaciones web
ReactJs Para crear una aplicación web.
GitHub Pages Alojamiento de sitios web estáticos gratuito
react-router-dom Sirve para crear rutas dinámicas
componentes funcionales Sirve para crear pequeños bloques de código y poder reutilizarlos en otros componentes, de tal manera que se puede distribuir y dividir mejor el código.
custom hooks Sirve para crear bloques de códigos con lógica repetitiva o avanzada, que se puedan reutilizar en los componentes.
Open Graph Sirve para incluir información relevante del sitio web al ser compartidas en redes sociales
NPM Para descargar, instalar y desinstalar paquetes.
Git Para crear commit, crear ramas, fusionar ramas, subir repositorio a GitHub, etc.
etc.