4.2 KiB
language = es
title_i18n = wmarkdown_title_design
title_text = Estilo y diseño - WMarkDown
Estilo y diseño
El estilo y el diseño del proyecto WMarkDown está basado a su vez tanto en el proyecto original así como se construyeron visualmente otros proyectos como AnP. A nivel de colores, éste tiene los siguientes:
[| |= Tipo | Hexadecimal | RGBA | Muestra | Fondo | #EFEFEF | rgba(239, 239, 239, 1) | #EFEFEF | Frontal | #222 | rgba(34, 34, 34, 1) | #222 | Primario | #008844 | rgba(0, 136, 68, 1) | #008844 | Secundario | #880044 | rgba(136, 0, 68, 1) | #880044 | Gris | #888 | rgba(136, 136, 136, 1) | #888 | Tabla título | #19888888 | rgba(136, 136, 136, 0.1) | color rgba(136, 136, 136, 0.1) | Tabla Select | #19888888 | rgba(136, 136, 136, 0.1) | color rgba(136, 136, 136, 0.1) | Tabla impar | #38888888 | rgba(136, 136, 136, 0.2) | color rgba(136, 136, 136, 0.2) | Tabla par | #00FFFFFF | rgba(255, 255, 255, 0) | color rgba(255, 255, 255, 0) | Borde interno | #19888888 | rgba(136, 136, 136, 0.5) | color rgba(136, 136, 136, 0.5) | Diccionario | #115533 | rgba(17, 85, 51, 1) | #115533 | Diccionario en | #551133 | rgba(85, 17, 51, 1) | #551133 | Code impar | #38C8C8C8 | rgba(200, 200, 200, 0.2) | color rgba(200, 200, 200, 0.2) |]
[!!] Es importante entender que el diseño se basa en el resultado de la Web como diseño general pues el uso del WMarkDown se condicionará a como lo diseñe el usuario que lo implemente en su proyecto. Inicialmente está diseñado para ser independiente con un diseño monocromático en escala de grises, pero éste puede ser alterado según características del usuario. En el caso de la Web del propio proyecto se basa en el estilo de AnP pero con los códigos de color que le fueron asignados en la tabla anterior.
Se utilizaron 3 fuentes distintas para visualizar el proyecto, las cuales son:
- Roboto. Para el texto en general.
- Roboto Mono. Para los bloques de código.
- Font Awesome. Para la iconificación general de la Web.
El tamaño general del proyecto se basa en un sistema porcentual que imita parcialmente el sistema de DPI existente en los dispositivos móviles o aplicaciones orientadas a la densidad de puntos por pulgada de la pantalla donde se ejecutan. En este caso, la filosofía se basa en unificar la visualización general en todos los dispositivos independientemente del tamaño y resolución de la pantalla, y que permita, de alguna forma, ampliar o disminuir los objetos según permisos por parte de los desarrolladores y, si así lo permiten los desarrolladores, por necesidades del propio usuario. El sistema se basa en buscar, dentro del rectángulo que contiene la aplicación (Pantalla), el lado más estrecho y trabajar sobre éste, dividiéndolo en celdas, en este caso, 40 celdas, así pues, se cambie el tamaño de la pantalla, o navegador en este caso, la aplicación seguirá viéndose exactamente igual.
La cabecera consta de 4 celdas de alto; mientras que el pie de página consta de 2. Ambos elementos están entablados mediante un Flex que permite posicionar los elementos internamente de una forma ágil, flexible y visual, permitiendo añadir nuevos elementos y condicionándolos a éstos.
El logo, partiendo de los colores primario y secundario, consta de 3 rectángulos alterados a formas específicas y separadas con angulos de entre 10 para los externos, y 20 para los internos. La intención es generar una W que parta de la idea de Srx01 de hacer, mediante una M, como respresentación de MarkDown, y la flecha integrada dentro del final de la misma, haciendo una simulación de vela gráfica. De esta forma nos desmarcamos de MarkDown. El resultado de éste es los siguiente.
((!image /images/WMarkDown.svg))
[!!] En PNG tiene un borde de color blanco para destacar sobre ciertos fondos que puedan coincidir en colores con los del propio logo SVG.