49 lines
2.7 KiB
Markdown
49 lines
2.7 KiB
Markdown
|
```wmd-options
|
||
|
|
language = es
|
||
|
|
title_i18n = errors_manager_title_design
|
||
|
|
title_text = Diseño - ErrorsManager
|
||
|
|
```
|
||
|
|
|
||
|
|
<!-- [[wmd]] -->
|
||
|
|
|
||
|
|
## Diseño
|
||
|
|
|
||
|
|
El diseño de la interfaz de muestreo e información del proyecto ErrorsManager viene siendo la extraída de forma directa del proyecto AnP y el propio WMarkDown, con la diferencia principal de los colores primario y secundario.
|
||
|
|
|
||
|
|
Empezando por los colores, tenemos los siguientes:
|
||
|
|
|
||
|
|
[|
|
||
|
|
|= Tipo | Hexadecimal | RGBA | Muestra
|
||
|
|
| Fondo | #EFEFEF | rgba\(239, 239, 239, 1) | [[#EFEFEF]]
|
||
|
|
| Frontal | #222 | rgba\(34, 34, 34, 1) | [[#222]]
|
||
|
|
| Primario | #812 | rgba\(136, 17, 34, 1) | [[#812]]
|
||
|
|
| Secundario | #218 | rgba\(34, 17, 136, 1) | [[#218]]
|
||
|
|
| 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 | #551a22 | rgba\(85, 26, 34, 1) | [[#551a22]]
|
||
|
|
| Diccionario en | #224d55 | rgba\(34, 77, 85, 1) | [[#224d55]]
|
||
|
|
| Code impar | #38C8C8C8 | rgba\(200, 200, 200, 0.2) | [[color rgba(200, 200, 200, 0.2)]]
|
||
|
|
|]
|
||
|
|
|
||
|
|
Por otro lado, tenemos las fuentes de texto usados en la Web de este proyecto, las cuales son:
|
||
|
|
|
||
|
|
* **Roboto**. Para el texto en general.
|
||
|
|
* https://fonts.google.com/specimen/Roboto?query=roboto
|
||
|
|
* **Roboto Mono**. Para los bloques de código.
|
||
|
|
* https://fonts.google.com/specimen/Roboto+Mono?query=roboto
|
||
|
|
* **Font Awesome**. Para la iconificación general de la Web.
|
||
|
|
* https://fontawesome.com/
|
||
|
|
|
||
|
|
El tamaño de la fuente, así como de los elementos de la Web se basan en un sistema que simulan los DPI en la Web, usando la magnitud "EM" para determinar un tamaño dinámico sobre el bloque anfitrión del mismo. Por defecto, éste se basa en dividir en 40 celdas desde el lado de la pantalla o del marco de visualización más estrecho, quedando como tamaño de fuente por defecto una celda.
|
||
|
|
|
||
|
|
La cabecera hace uso de 4 celdas y el pie de página consta de 2. Ambos ordenan sus elementos en un bloque Flex a modo tupla.
|
||
|
|
|
||
|
|
Finalmente tenemos el logo del proyecto, que representa una centralización de recursos sobre otros proyectos exponiendo un punto central del que parten todos los demás proyectos más grandes.
|
||
|
|
|
||
|
|
((!image /images/ErrorsManager.png))
|
||
|
|
|
||
|
|
<!-- [[wmd]] -->
|