Ejemplo de nuevo post Markdown para probar el Markdown en BearBlog en un nuevo tema
Un artículo de prueba para Mauro Gabriel
Este es un párrafo introductorio para comprobar la tipografía base, el ancho de lectura, la altura de línea y la separación entre párrafos. También permite comprobar cómo se comportan los enlaces, por ejemplo, visitar Bearblog.
1. Encabezado de segundo nivel
Este párrafo aparece después de un H2. Sirve para comprobar la distancia entre el encabezado y el texto que lo desarrolla. La lectura debe resultar cómoda y mantener un ritmo vertical coherente.
1.1. Encabezado de tercer nivel
Un encabezado H3 permite comprobar cómo funciona el tercer nivel de la escala tipográfica. Su tamaño debe diferenciarse claramente del H2 sin competir con él.
1.1.1. Encabezado de cuarto nivel
El H4 debe tener el mismo tamaño que el texto base, pero puede diferenciarse mediante el peso tipográfico. Así comprobamos que la jerarquía no depende exclusivamente del tamaño.
Titulo 1
Titulo 2
Titulo 3
Titulo 4
2. Formato de texto
Este párrafo contiene diferentes formatos: negrita, cursiva, texto tachado, texto normal y un enlace externo.
También podemos probar código inline como display: grid, max-width: 720px o font-family: Merriweather.
Texto con small caps:
Este texto debería mostrarse en versalitas o small caps.
Otro párrafo normal para comprobar la separación posterior.
3. Blockquotes
Cita convencional
El diseño no consiste solamente en hacer que las cosas se vean bien. Consiste en hacer que funcionen de manera clara, coherente y comprensible.
Este es un párrafo posterior a la cita. Permite comprobar el margen inferior del blockquote.
Cita con atribución
La simplicidad es la máxima sofisticación.
— Leonardo da Vinci
Cita extensa
La buena tipografía establece un ritmo visual que acompaña al lector. Cada línea, cada párrafo y cada encabezado deben formar parte de una estructura coherente.
El espacio en blanco también comunica. No es espacio desperdiciado, sino una herramienta para organizar la información y mejorar la experiencia de lectura.
4. Listas
Lista desordenada
- Diseño editorial.
- Arquitectura de la información.
- Tipografía y legibilidad.
- Diseño responsive.
- Accesibilidad web.
Lista ordenada
- Definir la estructura HTML.
- Establecer las variables CSS.
- Construir el sistema de columnas.
- Aplicar la escala tipográfica.
- Ajustar el diseño responsive.
Lista anidada
- Tipografía
- Familia serif.
- Familia sans-serif.
- Escala tipográfica.
- Layout
- CSS Grid.
- Flexbox.
- Contenedores fluidos.
Lista de tareas
- Definir la paleta de colores.
- Establecer la escala tipográfica.
- Revisar los estilos de tablas.
- Comprobar el diseño en móviles.
5. Tablas
Comparación de tecnologías
| Tecnología | Uso principal | Característica |
|---|---|---|
| HTML | Estructura | Semántica |
| CSS | Presentación | Estilos |
| Grid | Maquetación | Dos dimensiones |
| Flexbox | Distribución | Una dimensión |
| JavaScript | Interactividad | Comportamiento |
Tabla con datos
| Dispositivo | Pantalla | Resolución |
|---|---|---|
| iPhone | 6,3 pulgadas | 2622 × 1206 |
| iPad Air | 11 pulgadas | 2360 × 1640 |
| MacBook | 14 pulgadas | 3024 × 1964 |
6. Imágenes
Imagen centrada en el contenido
Imagen de ejemplo para comprobar el ancho, el comportamiento responsive y los márgenes.
Imagen con texto descriptivo
Una imagen dentro de un artículo debe respetar el ancho del contenedor, mantener sus proporciones y adaptarse a pantallas pequeñas.
7. Código
HTML
<article>
<h1>Título del artículo</h1>
<p>Un párrafo de ejemplo.</p>
</article>
CSS
:root {
--font-serif: "Merriweather", serif;
--font-sans: "Noto Sans", sans-serif;
--width-reading: 640px;
}
article {
max-width: var(--width-reading);
margin-inline: auto;
font-family: var(--font-sans);
}
JavaScript
const article = document.querySelector("article");
if (article) {
console.log("Artículo cargado correctamente");
}
8. Elementos adicionales
Una línea horizontal:
Texto después de la línea horizontal.
Una fórmula matemática escrita como texto: E = mc².
Una dirección de correo: mauro@example.com.
Un texto con caracteres especiales: á, é, í, ó, ú, ñ, ¿?, ¡!, € y ©.
9. Conclusión
Este último apartado permite comprobar el cierre del artículo, la separación respecto de los elementos anteriores y la consistencia de la jerarquía visual.
El objetivo es conseguir una experiencia editorial sencilla, legible y equilibrada tanto en escritorio como en dispositivos móviles.