Showcase

Bienvenido a la sección de Diseño de Aplicaciones.
Aquí exploraremos conceptos clave y buenas prácticas para crear aplicaciones modernas y eficientes.

Introducción

El UI y UX son fundamentales para que los usuarios interactúen correctamente con el sistema.
A lo largo de esta sección, encontrarás ejemplos de API, estructuras de CPU, y bases de datos como SQL que se usan en la arquitectura moderna.

Arquitectura

La arquitectura de la aplicación sigue un modelo MVC.

Componentes principales:

• Modelo: Gestiona los datos y reglas de negocio.
• Vista: Interfaz gráfica que presenta información al usuario.
• Controlador: Coordina la interacción entre modelo y vista.

Pasando el ratón sobre “MVC”, verás la definición si tienes el hook de acrónimos activo.

Patrones de Diseño

Algunos patrones importantes:

• Singleton: Garantiza que una clase tenga una sola instancia.
• Factory: Crea objetos sin exponer la lógica de creación.
• Observer: Permite que un objeto notifique cambios a otros objetos suscritos.

Puedes añadir tooltips a cada patrón usando acrónimos o definiciones en abbreviations.md.

Lorem ipsum dolor sit amet, (1) consectetur adipiscing elit.

1. I'm an annotation! I can contain code, formatted text, images, ... basically anything that can be expressed in Markdown.

Notas

Esto es una prueba (2), y esto espero que sea util (3)

1. Las anotaciones son estas cositas que haces click
2. Una pruebaes una cosa donde pruebas cosas
3. Algo util, es algo que sirve para algo

Estoy desplegado por defecto

Tablas de contenido

Por nombre estan vinculadas:

Pero sin o tienen el mismo nombre:

.rojo{
    color:red;
}

.verde{
    color:green;
}

Usando Grids

Usando diagramas

Graphs

graph LR
  A[Start] --> B{Error?};
  B -->|Yes| C[Hmm...];
  C --> D[Debug];
  D --> B;
  B ---->|No| E[Yay!];

Secuencial

sequenceDiagram
  autonumber
  Alice->>John: Hello John, how are you?
  loop Healthcheck
      John->>John: Fight against hypochondria
  end
  Note right of John: Rational thoughts!
  John-->>Alice: Great!
  John->>Bob: How about you?
  Bob-->>John: Jolly good!

Estado

stateDiagram-v2
  state fork_state <<fork>>
    [*] --> fork_state
    fork_state --> State2
    fork_state --> State3

    state join_state <<join>>
    State2 --> join_state
    State3 --> join_state
    join_state --> State4
    State4 --> [*]

De clase

classDiagram
  Person <|-- Student
  Person <|-- Professor
  Person : +String name
  Person : +String phoneNumber
  Person : +String emailAddress
  Person: +purchaseParkingPass()
  Address "1" <-- "0..1" Person:lives at
  class Student{
    +int studentNumber
    +int averageMark
    +isEligibleToEnrol()
    +getSeminarsTaken()
  }
  class Professor{
    +int salary
  }
  class Address{
    +String street
    +String city
    +String state
    +int postalCode
    +String country
    -validate()
    +outputAsLabel()
  }

De Relacion-Entidad

erDiagram
  CUSTOMER ||--o{ ORDER : places
  ORDER ||--|{ LINE-ITEM : contains
  LINE-ITEM {
    string name
    int pricePerUnit
  }
  CUSTOMER }|..|{ DELIVERY-ADDRESS : uses

Iconos

Iconos normales

:smile: //(1)!

1. Esto seria

Usando librerias de iconos

:fontawesome-regular-face-laugh-wink: //(1)!

1. Esto seria

Aplicando un poco de color a la vida

.youtube {
  color: #ee0f0f;
}

:fontawesome-brands-youtube:{ .youtube }//(1)!

1. Esto se veria asi

Los iconos de mkdocs usan:

En la página oficial, hay un buscador que te permite ver todos los iconos incluidos en mkdocs

Acrónimos/definiciones

En el archivo includes/abbreviations.md(1) estan las abrevicaciones, que al poner el raton encima, te dara una pequeña descripcion que hayas asignado.

1. Destacar codigo en linea, se puede usar cualqueir lenguaje, como background-color:"red"

Bloques de Código

Con tiutlo asignado

.prueba:hover{ /* (1)! */
    background-color: red /* (2)! */
    border-radius: 10px /* (3)! */
}

1. Un botón hover , se aplicara este bloque cuando el ratón pase por encima
2. Cambiar el color a rojo
3. Poner un radio de borde

Enseñando lineas

1
2
3
4
5

def bubble_sort(items):
    for i in range(len(items)):
        for j in range(len(items) - 1 - i):
            if items[j] > items[j + 1]:
                items[j], items[j + 1] = items[j + 1], items[j]

Entonando lineas

def bubble_sort(items):
    for i in range(len(items)):
        for j in range(len(items) - 1 - i):
            if items[j] > items[j + 1]:
                items[j], items[j + 1] = items[j + 1], items[j]

def bubble_sort(items):
    for i in range(len(items)):
        for j in range(len(items) - 1 - i):
            if items[j] > items[j + 1]:
                items[j], items[j + 1] = items[j + 1], items[j]

Preview instantanea

Mirando al pasado a un enlace, podemos ver una pequeña previsualizacion

Ver Tablas

Imagenes

Imagen grande, con descripción, se puede hacer zoom

Descentrada por no usar <figure markdown></figure>(1)

1. Solo es necesario, añadir eso y la imagen, no es necesario usar <figcaption/>

Enlaces Externos

• Annotations
• Tooltips
• Icons
• Admonitors
• Content Tabs
• Creating a Page
• Grid
• Code blocks
• Diagrams
• Icons
• Images