Skip to content

Commit

Permalink
Merge pull request #102 from danigonzser/m4/seccion_milestone
Browse files Browse the repository at this point in the history
Sección M04 y memoria finalizada
  • Loading branch information
danigonzser authored Nov 8, 2024
2 parents 379b775 + ff4abf5 commit 164e44f
Show file tree
Hide file tree
Showing 24 changed files with 573 additions and 110 deletions.
33 changes: 32 additions & 1 deletion doc/diccionario/diccionario.es.txt
Original file line number Diff line number Diff line change
Expand Up @@ -205,4 +205,35 @@ Vercel
stateofcss
new
POO
pixijs
pixijs
Vercel
preview
Preview
m4
Postgres
Milestone
CRUD
serverless
Pavilion
plugin
ck004ns
ft
Platzi
Conf
orm
postgresql
github
typescript
tailwindcss
vercel
agile
Navigator
searchParams
toast
Development
actions
Generator
Mematic
Photopea
imgflip
autoorganización
Binary file added doc/figuras/artefacto.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added doc/figuras/despliegue_prev.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added doc/figuras/despliegue_prod.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added doc/figuras/despliegues.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added doc/figuras/despliegues_vercel.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added doc/figuras/entorno_prev.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added doc/figuras/entorno_prod.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added doc/figuras/fallo_test_e2e.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added doc/figuras/resumen_cypress_ci.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added doc/figuras/test_fallado_snapshot.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added doc/figuras/vercel_postgres.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion doc/portada/portada.tex
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@

{\Huge\bfseries Memes para todos \\}
\noindent\rule[-1ex]{\textwidth}{3 pt}\\[3.5 ex]
{\large\bfseries Almacenamiento Online }
{\large\bfseries Plataforma web para la creación, edición y almacenamiento en línea de memes }
\end{minipage}

\vspace{2.5cm}
Expand Down
25 changes: 14 additions & 11 deletions doc/prefacios/prefacio.tex
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
\thispagestyle{empty}

\begin{center}
{\large\bfseries Memes para todos \\ Almacenamiento Online }\\
{\large\bfseries Memes para todos \\ Plataforma web para la creación, edición y almacenamiento en línea de memes }\\
\end{center}
\begin{center}
Daniel González Serrano\\
Expand All @@ -10,43 +10,46 @@
%\vspace{0.7cm}

\vspace{0.5cm}
\noindent\textbf{Palabras clave}: \textit{software libre}
\noindent\textbf{Palabras clave}: \textit{software libre}, \textit{memes}, \textit{edición de memes}, \textit{aplicación web de memes}, \textit{enfoques ágiles}, \textit{next.js 15}, \textit{fabric.js}, \textit{canvas} \textit{prisma} \textit{orm} \textit{postgresql} \textit{git} \textit{github} \textit{node.js} \textit{react} \textit{typescript} \textit{tailwindcss} \textit{vercel}

\vspace{0.7cm}

\noindent\textbf{Resumen}

El proyecto consiste en el desarrollo de una aplicación web enfocada en la creación, edición y almacenamiento de memes, destacándose por su enfoque en la colaboración y la organización de contenidos visuales. Utilizando enfoques ágiles y herramientas de desarrollo como Git y GitHub, la aplicación facilita la colaboración y la edición de memes en un entorno accesible desde cualquier dispositivo. Con tecnologías como Next.js y Fabric.js, la aplicación ofrece una interfaz moderna y funcional que permite crear catálogos de memes, asegurando su fácil acceso y reutilización por parte de los usuarios. Entre los objetivos alcanzados se incluyen la accesibilidad económica, compatibilidad con dispositivos de bajo rendimiento y la implementación de un sistema modular que facilita su actualización y escalabilidad. Este proyecto representa una solución innovadora dentro del campo del almacenamiento y creación colaborativa de contenido visual.


\cleardoublepage

\begin{center}
{\large\bfseries Igual, pero en inglés}\\
\end{center}
\begin{center}
Daniel González Serrano\\
\end{center}
\vspace{0.5cm}
\noindent\textbf{Keywords}: \textit{open source}, \textit{floss}
\noindent\textbf{Keywords}: \textit{free software}, \textit{memes}, \textit{meme editing}, \textit{web meme application}, \textit{agile approaches}, \textit{next.js 15}, \textit{fabric.js}, \textit{canvas} \textit{prisma} \textit{orm} \textit{postgresql} \textit{git} \textit{github} \textit{node.js} \textit{react} \textit{typescript} \textit{tailwindcss} \textit{vercel}
\vspace{0.7cm}

\noindent\textbf{Abstract}

% textidote: ignore begin
The project consists of the development of a web application focused on the creation, editing and storage of memes, with a focus on collaboration and organisation of visual content. Using agile approaches and development tools such as Git and GitHub, the application facilitates the collaboration and editing of memes in an environment accessible from any device. With technologies such as Next.js and Fabric.js, the application offers a modern and functional interface that allows the creation of meme catalogues, ensuring easy access and reuse by users. The objectives achieved include economic accessibility, compatibility with low-performance devices and the implementation of a modular system that facilitates updating and scalability. This project represents an innovative solution in the field of storage and collaborative creation of visual content.
% textidote: ignore end

\cleardoublepage

\thispagestyle{empty}

\noindent\hspace*{-\parindent}\rule[-1ex]{\textwidth}{2pt}\\[4.5ex]

D. \textbf{Juan Julián Merelo Guervós}, Profesor(a) del Profesor(a) del departamento de Arquitectura y Tecnología de Computadores de la Universidad de Granada.
D. \textbf{Juan Julián Merelo Guervós}, profesor del departamento de Arquitectura y Tecnología de Computadores de la Universidad de Granada.

\vspace{0.5cm}

\textbf{Informo:}

\vspace{0.5cm}

Que el presente trabajo, titulado \textit{\textbf{Chief}},
ha sido realizado bajo mi supervisión por \textbf{Estudiante}, y autorizo la defensa de dicho trabajo ante el tribunal
Que el presente trabajo, titulado \textit{\textbf{Memes para todos}},
ha sido realizado bajo mi supervisión por \textbf{Daniel González Serrano}, y autorizo la defensa de dicho trabajo ante el tribunal
que corresponda.

\vspace{0.5cm}
Expand All @@ -55,11 +58,11 @@

\vspace{1cm}

\textbf{El/la director(a)/es: }
\textbf{El director: }

\vspace{5cm}

\noindent \textbf{(nombre completo tutor/a/es)}
\noindent \textbf{Juan Julián Merelo Guervós}

\chapter*{Agradecimientos}

Expand Down
6 changes: 3 additions & 3 deletions doc/proyecto.tex
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@
\input{secciones/01_intro}

% Descripción del problema y hasta donde se llega
\input{secciones/02_descripcion}
% \input{secciones/02_descripcion}

% Estado del arte
% 1. Crítica al estado del arte
Expand All @@ -110,10 +110,10 @@

% Presupuesto

\cite{gplv3}
\input{secciones/08_costes}

% Conclusiones
\input{secciones/08_conclusiones}
\input{secciones/09_conclusiones}

% Trabajos futuros

Expand Down
4 changes: 2 additions & 2 deletions doc/secciones/01_intro.tex
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ \chapter{Introducción}

La integración de los memes en el contenido no solo buscan vender el contenido de manera más fresca, entretenida y atractiva, sino que otras veces, solo se busca el entretenimiento y la diversión pura y simple de los consumidores.

Imagine una escena en la que un grupo de amigos se reúne y discuten sobre los últimos acontecimientos políticos cuando, de repente, un meme ingenioso y fuera de lugar se convierte en el centro de la conversación, rompiendo el hielo y generando risas. Imagine ahora una situación, en un entorno académico, en el que un estudiante quiere realizar una presentación algo diferente y para ello decide introducir algún meme. Esta situación no únicamente se da en un entorno académico, sino que incluso en charlas llevadas por ponentes profesionales. Cada vez es más común encontrar algún meme que otro con el fin de que estas charlas sean más `digeribles`. Un claro ejemplo de este caso es Miguel Ángel Durán (\href{https://midu.dev/}{@midudev}), un experto en desarrollo de software, actualmente divulgador sobre programación, estrella de GitHub y Microsoft MVP, el cual es conocido por su habilidad para integrar memes de forma creativa y efectiva en sus charlas y presentaciones.
Imagine una escena en la que un grupo de amigos se reúne y discuten sobre los últimos acontecimientos políticos cuando, de repente, un meme ingenioso y fuera de lugar se convierte en el centro de la conversación, rompiendo el hielo y generando risas. Imagine ahora una situación, en un entorno académico, en el que un estudiante quiere realizar una presentación algo diferente y para ello decide introducir algún meme. Esta situación no únicamente se da en un entorno académico, sino que incluso en charlas llevadas por ponentes profesionales. Cada vez es más común encontrar algún meme que otro con el fin de que estas charlas sean más `digeribles'. Un claro ejemplo de este caso es Miguel Ángel Durán (\href{https://midu.dev/}{@midudev}), un experto en desarrollo de software, actualmente divulgador sobre programación, estrella de GitHub y Microsoft MVP, el cual es conocido por su habilidad para integrar memes de forma creativa y efectiva en sus charlas y presentaciones.

\begin{figure}[ht]
\caption{Fotograma sacado del (\href{http://sl.ugr.es/0dXQ}{vídeo de YouTube de la conferencia}): Pierde el miedo a desplegar a producción en viernes | ft @midudev (c) Platzi para la Platzi Conf 2024 en el que se puede ver a Miguel Ángel Durán (\href{https://midu.dev/}{@midudev}) en plena conferencia.}
Expand All @@ -25,7 +25,7 @@ \section{Motivación}

La motivación detrás de este proyecto radica en ofrecer una solución que subsane las dificultades que los usuarios encuentran a la hora de gestionar estos medios de información. Estas dificultades van desde la dificultad de encontrar memes antiguos hasta la falta de herramientas colaborativas y centralizadas. Como se puede apreciar los problemas pueden llegar a ser muy diversos y afectar a diferentes tipos de usuarios.

El proyecto `Memes para todos` aspira a proporcionar una plataforma robusta y fácil de usar que simplifique el proceso de creación, almacenamiento y distribución de memes para todo tipo de usuarios, sin importar su experiencia previa o contexto.
El proyecto `Memes para todos' aspira a proporcionar una plataforma robusta y fácil de usar que simplifique el proceso de creación, almacenamiento y distribución de memes para todo tipo de usuarios, sin importar su experiencia previa o contexto.

\section{Definición del problema}

Expand Down
35 changes: 33 additions & 2 deletions doc/secciones/03_estado_del_arte.tex
Original file line number Diff line number Diff line change
@@ -1,4 +1,35 @@
\chapter{Estado del arte}

El software libre y sus licencias \cite{gplv3} ha permitido llevar a cabo una expansión del
aprendizaje de la informática sin precedentes.
En este capítulo se revisarán las herramientas y plataformas actuales que abordan funcionalidades relacionadas con la gestión, almacenamiento y edición colaborativa de memes. Esta revisión permitirá identificar los valores y limitaciones de las soluciones existentes frente a la propuesta de este proyecto.

Vamos a dividir este apartado en dos secciones: la primera sección que se centrará en la comparación con plataformas de creación y edición de memes y la segunda sección que se centrará en la comparación con plataformas de almacenamiento de contenido gráfico.

\section{Herramientas para la Creación y Edición de Memes}

Actualmente, existen diversas aplicaciones enfocadas en la creación y edición de memes, cada una con características específicas en cuanto a funcionalidad, facilidad de uso y accesibilidad. A continuación, se describen algunas de las herramientas más populares y sus características:

\begin{itemize}
\item \textbf{Generación y creación de memes:} aplicaciones como \textit{\textbf{\href{https://imgflip.com/memegenerator}{Meme Generator de imgflip}}} y \textit{\textbf{\href{https://www.mematic.com/}{Mematic}}} permiten a los usuarios crear memes de forma rápida utilizando plantillas populares y ofreciendo opciones básicas de edición, como agregar texto y recortar imágenes. Sin embargo, estas aplicaciones presentan limitaciones cuando se requiere de una personalización más avanzada o colaboración. Además, la falta de opciones de almacenamiento organizado reduce su utilidad para quienes desean reutilizar y categorizar memes.
\item \textbf{Aplicaciones orientadas a la edición online:} Plataformas como \href{https://www.canva.com/es_es/}{Canva} y \href{https://www.photopea.com/}{Photopea} permiten la edición de imágenes con mayores posibilidades de personalización y funciones avanzadas de edición gráfica. No obstante, estas herramientas suelen tener una curva de aprendizaje más alta, ya que están diseñadas para una gama más amplia de trabajos de diseño gráfico. A mayores, la colaboración y la organización de memes en colecciones no son características comunes en estas plataformas.
\item \textbf{Aplicaciones con enfoque social:} redes sociales como \href{https://www.instagram.com/}{Instagram} permiten a los usuarios generar contenido visual con opciones para añadir texto y stickers, lo cual puede ser utilizado para crear memes. Sin embargo, estas plataformas no están diseñadas para la gestión centralizada de memes y carecen de una estructura adecuada para la categorización o reutilización de contenido, limitando su efectividad para un uso colaborativo o profesional.
\end{itemize}

\section{Plataformas de almacenamiento y organización de contenido visual}

La organización y almacenamiento centralizado es un aspecto clave para este proyecto, especialmente para usuarios que producen contenido de forma recurrente. En el mercado actual existen plataformas de almacenamiento de imágenes, pero ninguna está específicamente orientada a la gestión y reutilización de memes. Las plataformas destacadas incluyen:

\begin{itemize}
\item \textbf{\href{https://www.google.com/intl/es_es/photos/about/}{Google Photos} y \href{https://www.dropbox.com/}{Dropbox}:} Estas plataformas de almacenamiento en la nube permiten a los usuarios organizar sus archivos visuales mediante etiquetas y carpetas. A pesar de su popularidad, carecen de funcionalidades específicas para la gestión de memes, como plantillas reutilizables y sistemas de búsqueda avanzada que consideren categorías de memes o contextos humorísticos.
\item \textbf{\href{https://nextcloud.com/es/}{Nextcloud}:} Ofrece opciones avanzadas de sincronización y colaboración en la nube, adaptándose parcialmente a la gestión de memes. Sin embargo, su configuración y administración pueden ser complicadas para usuarios sin conocimientos técnicos. Además, carece de herramientas específicas para la edición o categorización de memes, limitando su utilidad como herramienta especializada.
\item \textbf{\href{https://es.pinterest.com/}{Pinterest}:} Aunque no es una plataforma de almacenamiento en el sentido tradicional, Pinterest permite a los usuarios organizar contenido visual en tableros categorizados, lo cual facilita la agrupación de memes por temas. Sin embargo, no ofrece herramientas para la edición directa de memes, y su estructura no está orientada al almacenamiento profesional o colaborativo de este tipo de contenido.
\end{itemize}

\section{Conclusión de comparativas}

En esta comparación de alternativas con el proyecto, se destacan varios puntos diferenciadores que consolidan esta propuesta como una solución \textbf{innovadora}:

\begin{itemize}
\item \textbf{Facilidad de acceso y colaboración:} Al ser una aplicación web permite a los usuarios acceder desde cualquier dispositivo y colaborar en la creación y modificación de memes, algo que no ofrecen muchas de las plataformas revisadas.
\item \textbf{Centralización y organización:} La plataforma incorpora un sistema específico para el almacenamiento y organización de memes en catálogos, incluyendo funcionalidades avanzadas de búsqueda y gestión de plantillas reutilizables. Esto representa una ventaja significativa frente a las soluciones actuales de almacenamiento general.
\item \textbf{Especialización en memes:} A diferencia de las herramientas de edición de imágenes o plataformas de almacenamiento genéricas, esta aplicación se enfoca principalmente en la creación y gestión de memes. Esto permite una optimización de la experiencia del usuario y la personalización de herramientas específicas para este tipo de contenido, sin limitar la posibilidad de que se suba y organice otro tipo de material visual. Esto asegura que, aunque centrada en los memes, la plataforma sea versátil y pueda adaptarse a otras necesidades de los usuarios.
\end{itemize}
Loading

0 comments on commit 164e44f

Please sign in to comment.