En este tutorial, te voy a enseñar a maquetar un artículo o post, usando html y css desde cero. Vamos a partir del texto «en bruto», y le vamos a dar formato y diseño para que su lectura sea irresistiblemente atractiva. Añadiremos un par de ilustraciones, y reutilizaremos algunas partes para hacer frases destacadas.
En un principio, la idea de este tutorial era ofrecer algunos tips y consejos para conseguir que un artículo o post nos quedara con una apariencia profesional, usando el editor de nuestro CMS: WordPress o el que sea, porque esto lo podemos hacer tanto usando un editor visual clásico de los llamados WYSWYG, como un editor de bloques moderno, Gutenberg, Elementor y todos estos «builder composers» que hay disponibles en el mercado.
Pero finalmente he decidido hacerlo en código puro y duro. La razón de esta decisión es que si sigues el tutorial, aprenderás fundamentos de HTML y CSS básicos que te serán de gran ayuda aunque en tu día a día (lo es también en el mío) trabajes con un editor visual. Porque entenderás mucho mejor cómo funciona la estructura, presentación y comportamiento de lo que insertas tan fácilmente en tu artículo.
Como desarrollador, entrego a clientes sitios web y blogs cuyos contenidos serán insertados a posteriori por éstos. Evidentemente, el uso de los CMS con sus temas y plantillas, no implica que la persona que los utilice tenga necesariamente conocimientos técnicos; cualquiera puede escribir un post en un blog o una red social añadiéndole fotos, etc.
Pero puedo demostrarte que el resultado puede ser espectacular si le dedicas un poco de cuidado a lo que haces, mucho más allá de coger el artículo de Word , pegar el título y el contenido, poner una foto y marcar cuatro negritas (si es que llegas a ésto último).
Empezar a maquetar el artículo
Vamos a coger este artículo sobre las inteligencias artificiales que he esbozado usando precisamente una de ellas. Partimos como ves, del texto puro y duro con apenas unos saltos de linea.
Añadir marcas HTML
Si has previsualizado el texto en tu navegador (puedes arrastrar el archivo txt dentro del navegador para ello), te habrás percatado de que los acentos no se ven bien. Están bien no te preocupes, pero de momento, no se ven bien. Para muestra, descarga el archivo, y ábrelo en tu Bloc de notas (modo rápido, botón derecho sobre el ficherito y «abrir con…»), Textedit, en Visual Studio Code, o el editor de texto que prefieras.
Una vez abierto el fichero, antes de hacer nada, lo vas a guardar como «el-boom-de-las-ia.html». O con el nombre que quieras, pero asegúrate que lo guardas como tipo de fichero html.
Ahora, vamos a empezar a añadir nuestras marcas HTML. La primera que debes añadir, es, al principio de todo el fichero: <html> y al final de todo, </html>. Esta es la etiqueta raiz de apertura y cierre de un documento html válido (si no tiene estas etiquetas, ya no es válido). El lenguaje HTML consiste en marcas de apertura (ejemplo <marca> y marcas de cierre </marca>. Marcas las cosas como <desde aquí>mi contenido</hasta_aqui>, para definir lo que es cada bloque.
Recuerda que HTML es un lenguaje representativo: Sirve para marcar y estructurar datos, pero NO es un lenguaje de programación. No se puede programar nada en HTML.
Lo siguiente, empezamos ya añadiendo etiquetas al texto. La primera línea es el título principal del artículo, así que lo vamos a marcar como encabezado principal (heading 1) con la etiqueta H1:
<h1>El boom de las IA en las tecnologías de consumo</h1>El resto de párrafos, tal cual lo son, los vamos a etiquetar con la etiqueta P de «paragraph», tal que así:
<p>El boom de las inteligencias artificiales se refiere a un período en curso de rápido y sin precedentes desarrollo en el campo de la inteligencia artificial, con la carrera generativa de IA siendo un componente clave de este boom, que comenzó en serio con la fundación de OpenAI en 2016 o 2017¹. La IA ya es el principal impulsor de tecnologías emergentes como big data, robótica e IoT, por no mencionar la IA generativa, con herramientas como ChatGPT y generadores de arte de IA que están ganando atención generalizada, y seguirá actuando como un innovador tecnológico en el futuro previsible.</p>Así, todos igual con <p> y </p>. Cuando escribimos texto en html, aunque en nuestro editor podemos simplemente apretar enter y hacer cuantos saltos de linea queramos, cuando previsualicemos el archivo en el navegador, estos saltos de linea serán ignorados. En html, el salto de linea se produce o bien tras el cierre de un bloque (El cierre de un párrafo con </p> , por ejemplo) o también podemos crear saltos de línea forzados, «romper una línea» con la etiqueta <br> (abrebiación de break, line-break).
La etiqueta <br> se escribe sola. Es decir, no tiene que escribirse como <br></br>. BR es una etiqueta con «autocierre». Hay otras etiquetas que van solas sin cierre como IMG, INPUT, pero esto ya lo irás aprendiendo poco a poco.
Si quisiéramos forzar uno o varios saltos de línea enmedio de un párrafo, seria como muestro a continuación:
<p>El boom de las inteligencias artificiales se refiere a un período en curso de rápido y sin precedentes desarrollo en el campo de la inteligencia artificial, con la carrera generativa de IA siendo un componente clave de este boom, que comenzó en serio con la fundación de OpenAI en 2016 o 2017¹.<br><br>
<!-- Estas dos etiquetas <br> fuerzan 2 saltos de línea -->
La IA ya es el principal impulsor de tecnologías emergentes como big data, robótica e IoT, por no mencionar la IA generativa, con herramientas como ChatGPT y generadores de arte de IA que están ganando atención generalizada, y seguirá actuando como un innovador tecnológico en el futuro previsible.</p>¿Veis ese texto clarito que está precedido de «<!–» y que termina en «–>» ? Eso es una marca también. Una marca de comentario. Sirve para poner lo que quieras en tu código, sin que sea interpretado. De este modo, añadimos nuestras notas al código, sin que ese texto aparezca en pantalla.
Dependiendo del contexto y morfología de nuestra redacción, podemos necesitar un simple salto de línea, o bien cerrar otro párrafo. Hay una diferencia visual: Un salto de linea, nos salta el mismo espacio que ocupa cualquier línea adicional. En cambio un párrafo, crea (y debe crear) un espacio respecto al anterior párrafo.
Cuando hayamos terminado de determinar y marcar todos nuestros párrafos, marcaremos uno de ellos como título secundario (un subtítulo que hará de separador de la segunda parte del artículo). En una página html no debe haber nunca más de una etiqueta H1, por esto usamos H2 tal que así, en la línea que veis:
<p>En cuanto al largo plazo, es difícil predecir exactamente qué nos deparará esta tecnología. Sin embargo, está claro que la IA está cambiando constantemente nuestro mundo y seguirá haciéndolo en el futuro.</p>
<h2>Qué nos podría deparar el futuro de la humanidad conviviendo con las IA.</h2>
<p>Hay muchas hipótesis e ideas sobre cómo será convivir con las IA en el futuro. Una experta en el tema, Idoia Salazar, presidenta y fundadora del Observatorio del Impacto Social y Ético de la Inteligencia Artificial (Odiseia), ha subrayado que “hay que aprender a convivir” con esta tecnología y “poner ciertas normas éticas para que esa convivencia sea sana”.</p>Llegados aquí, nuestro código debería quedar tal como muestro a continuación. El número de párrafos, puede ser el que queramos, dependiendo de si hemos hecho nuestras divisiones.
Es recomendable para texto que va a ser leido en pantalla, que vayamos dando descanso a la lectura con párrafos más o menos cortos (a diferencia del papel, leer en pantalla tiene otra velocidad al ojo humano y cansa muchísimo más). Tampoco es necesario que el texto parezca un telegráma, no nos pasemos. Yo os lo dejo a vuestro libre albedrío, pero debería ser algo así:
https://cachitoswp.com/tutoriales/maquetacion-articulo-html-css/maquetacion-articulo-html-css-1.html
<html>
<h1>El boom de las IA en las tecnologías de consumo</h1>
<p>El boom de las inteligencias artificiales se refiere a un período en curso de rápido y sin precedentes desarrollo en el campo de la inteligencia artificial, con la carrera generativa de IA siendo un componente clave de este boom, que comenzó en serio con la fundación de OpenAI en 2016 o 2017¹. </p>
<p>La IA ya es el principal impulsor de tecnologías emergentes como big data, robótica e IoT, por no mencionar la IA generativa, con herramientas como ChatGPT y generadores de arte de IA que están ganando atención generalizada, y seguirá actuando como un innovador tecnológico en el futuro previsible.</p>
<p>En el corto plazo, las IA generativas ya pueden responder preguntas, escribir poesía, generar código informático y mantener conversaciones. Están siendo implementadas en formatos conversacionales como ChatGPT y Bing. Pero eso no va a durar mucho tiempo. Microsoft y Google ya han anunciado planes para incorporar estas tecnologías de IA en sus productos. Podrás usarlas para escribir un borrador de un correo electrónico, resumir automáticamente una reunión y realizar muchos otros trucos geniales.</p>
<p>En el mediano plazo, muchos expertos creen que la IA hará que algunos trabajadores, incluidos médicos, abogados y programadores informáticos, sean más productivos que nunca.</p>
<p>También creen que algunos trabajadores serán reemplazados. "Esto afectará a tareas que son más repetitivas, más fórmulas, más genéricas", dijo Zachary Lipton, profesor en Carnegie Mellon que se especializa en inteligencia artificial y su impacto en la sociedad. "Esto puede liberar a algunas personas que no son buenas en tareas repetitivas. Al mismo tiempo, existe una amenaza para las personas que se especializan en la parte repetitiva".</p>
<p>En cuanto al largo plazo, es difícil predecir exactamente qué nos deparará esta tecnología. Sin embargo, está claro que la IA está cambiando constantemente nuestro mundo y seguirá haciéndolo en el futuro.</p>
<h2>Qué nos podría deparar el futuro de la humanidad conviviendo con las IA.</h2>
<p>Hay muchas hipótesis e ideas sobre cómo será convivir con las IA en el futuro. Una experta en el tema, Idoia Salazar, presidenta y fundadora del Observatorio del Impacto Social y Ético de la Inteligencia Artificial (Odiseia), ha subrayado que “hay que aprender a convivir” con esta tecnología y “poner ciertas normas éticas para que esa convivencia sea sana”.</p>
<p>En cuanto a las ideas de ciencia ficción, hay muchas películas que exploran la temática de la inteligencia artificial y cómo podría afectar nuestra vida en el futuro.</p>
<p>Por ejemplo, en la película "Her" (2013), el protagonista se enamora de un sistema operativo con la voz de Scarlett Johansson.</p>
<p>En "The Matrix" (1999), los humanos son controlados por máquinas perversas.</p>
<p>En "Ex Machina" (2015), un programador es invitado a administrar una prueba de Turing a un robot humanoide con inteligencia artificial avanzada.</p>
</html>Terminar de estructurar el documento HTML es vital para que sea interpretable en condiciones para un navegador web. Vamos a añadir los mínimos, esto es, dentro del documento html, añadir y separar los datos de cabeceras (head) de los datos del cuerpo del documento (body). Una página web bien estructurada debe tener su parte HEAD y su parte BODY. Hasta el momento, simplemente habíamos ido añadiendo cosas dentro del tag html, nuestros títulos y párrafos. Si previsualizamos el anterior código en el navegador, se mostrará tal cual, no pasa nada, no hay mensaje de error (html nunca da errores, simplemente una web está bien, o no lo está, se vé bien, o no se ve bien.)
Añado a continuación la estructura que le falta al documento, y sintetizo lo que llevamos hecho usando comentarios; así tendremos una vista más global del documento:
<html lang="es">
<head>
<title>El boom de las IA en las tecnologías de consumo</title>
<meta name="description" content="Cómo han irrumpido las inteligencias artificiales en nuestro día a día, y qué podemos obtener de ellas en un futuro próximo">
</head>
<body>
<article>
<h1>El boom de las IA en las tecnologías de consumo</h1>
<p>El boom de las inteligencias artificiales se refiere a ...
<!-- ... aquí el resto de nuestro artículo ... -->
<h2>Nuestro subtítulo de 2o nivel...</h2>
<p>(...) a un robot humanoide con inteligencia artificial avanzada.</p>
</article>
</body>
</html>Fíjate en que para que tengas una mejor legibilidad, y para mejor referencia visual de «desde dónde» y «hasta dónde» van las etiquetas, así como «qué va dentro de qué», estoy haciendo uso de las tabulaciones, y unos saltos de línea extra.
Cuando trabajas con código, esto es sagrado para no acabar con presbicia. No sólo debes saber tú en todo momento cómo estás «anidando» las etiquetas, sino que debes tener máxima pulcritud para cuando retomes este proyecto y debas volver a situarte. Podrías ser tu o, en el contexto laboral, otra persona.
Por sencillo que pueda ser un lenguaje de marcas de representación como HTML, en el cual como comentábamos no hay lógica programática, cuando hay muchas marcas y mucho contenido, puede hacerse enrevesado.
Dicho esto, analicemos el anterior fragmento. Vamos primero con la parte HEAD y a un añadido que he puesto en la etiquete inicial HTML:
<html lang="es">
<head>
<title>El boom de las IA en las tecnologías de consumo</title>
<meta name="description" content="Cómo han irrumpido las inteligencias artificiales en nuestro día a día, y qué podemos obtener de ellas en un futuro próximo">
</head>
<body>En HTML he añadido el lang=»es», para decirle al navegador que el contenido de esta página está en español. Esto es necesario, aunque parezca algo muy automático, que debiera ser como autodetectado, debemos decir en qué idioma está lo que hay escrito.
Justo a continuación hemos añadido el HEAD. Entre <head> y </head>, se añaden:
- Metadatos del documento, datos NO visibles directamente en la página web, pero que ayudan a la clasificación de la información.
- Estilos de lenguaje CSS requeridos para la correcta visualización del documento HTML. Estos pueden estar escritos directamente en el archivo, como el resto del texto, o estar vinculados a un archivo externo.
- Scripts del lenguaje Javascript: Javascript es el lenguaje de programación que interpretan los navegadores de internet, para aplicar lógica e interactividad en las páginas web HTML. Igual que el CSS, los scripts pueden estar escritos en el mismo archivo.
Vamos con lo primero, y luego con lo segundo, el tercero lo vamos a dejar de momento, que para nuestra maquetación de momento no son necesarios scripts.
Los metadatos del HEAD
Los metadatos no se ven en la página. No aparecerán en nuestro diseño. Imagina que la página es un dossier cerrado en un archivo de una megabiblioteca. Pues los metadatos serían una etiqueta en el dossier, la típica pestañita que sobresale en un clasificador.
Gracias a los metadatos, y en combinación con el contexto y contenido del artículo que contenga la página web, esta puede ser encontrada de manera automática por los buscadores (Son como Google, pero hay miles de ellos 😁).
He añadido como ves, title (que es un tag con apertura y cierre) y el meta description; las META no tienen cierre en su sintaxis, se usan así:
<meta name="description" content="Descripción corta y concisa del contenido de la página">Dónde se ve esta información
Por una parte, el TITLE (que puede ser igual o distinto a lo que tengamos puesto en el tag H1) aparecerá en la pestañita del navegador cuando tengamos abierto el documento o la página cargada. También será usado como nombre del «bookmark» si añadimos la página a nuestros favoritos:
Por otra parte, si nuestro sitio es indexado por los robots de los buscadores, que van rastreando la web como si fueran millones de arañas moviéndose por la telaraña mundial de internet, nuestro título y descripción aparecerían así en los resultados de una búsqueda:
La página que nos devuelve un buscador cuando hemos hecho una consulta, la página de resultados, se denomina con el acrónimo SERP (Search Engine Result Page). Y el trocito que mostramos nosotros con nuestro title y meta description, es el SERP Snippet (Fragmento de la SERP).
Muchas personas creen que este fragmento se genera automáticamente, pero esto no es del todo cierto. No profundizaré en el tema hoy, pero hazte a la idea de que añadir TITLE y META DESCRIPTION como mínimo en los metadatos de tu página es SAGRADO.
Volviendo a la maquetación: El LAYOUT del documento
Entendida la parte no directamente visible de la web, regresamos a nuestro documento, que actualmente, si lo abrimos con el navegador, se ve más o menos así:
Un diseño pobre ¿no? Bueno, una cosa indudable, es que es perfectamente legible. Pero lo que está haciendo el navegador, es usar unas reglas de estilo que vienen incorporadas por defecto (y dependiendo del navegador, estas pueden diferir ligeramanete). Estas reglas son pues, un tipo de letra por defecto (Times New Roman o «serif font») y unos tamaños de letra, interlineados y cuerpos (normal, negrita) preasignados para los párrafos y títulos. Alineación del texto por defecto a la izquierda, y como veis, ningun margen ni longitud máxima de los párrafos (lo cual es MUY molesto)
¿Sabías que? Las líneas de texto no deben contener más de 13-15 palabras aproximadamente, porque de lo contrario la persona se pierde y le cuesta saber por qué linea iba.
Cómo funcionan los tipos de letra en las paginas web
De base, para que el navegador pueda mostrar la página en un tipo de letra concreto, esta tipografía tiene que estar instalada en el ordenador o teléfono desde el que se está solicitando la página.
La fuente Times o una de tipo similar vienen siempre preinstaladas en cualquier sistema operativo (Windows, Apple, Linux, Android…).
Si ahora fuéramos a nuestro explorador de archivos, y borráramos esta fuente, el navegador usaría otra disponible.
Esto se denomina «fallback»; le podemos decir, en nuestro lenguaje de estilos CSS:
«Vamos a usar este tipo de letra, y si no está, usa este otro, y si no, este otro, y si no, finalmente la que encuentres disponible»
Lo que hacemos aquí, es definir un FONT-STACK, o una pila de fuentes que usar.
Comenzando con CSS
Vamos a añadir en la parte HEAD del código, antes del cierre de HEAD, el tag <style> y vamos a empezar a meter estilos:
<html lang="es">
<head>
<title>El boom de las IA en las tecnologías de consumo</title>
<meta name="description" content="Cómo han irrumpido las inteligencias artificiales en nuestro día a día, y qué podemos obtener de ellas en un futuro próximo">
<style>
html {
font-family:Calibri, Arial, Helvetica, sans-serif;
display:flex;
justify-content:middle;
}
article {
max-width:800px;
}
</style>
</head>
<body>https://cachitoswp.com/tutoriales/maquetacion-articulo-html-css/maquetacion-articulo-html-css-2.html
Aquí lo que hacemos es, definir una familia tipográfica con su pila de fuentes comunes, en este caso fuentes de palo seco o sans serif (ya os daré la brasa en otro post con las familias de letras), para el tag raiz HTML.
Le decimos al documento que use el modo de «layout flex», el cual nos permite decirle que el justificado de los bloques de contenido sea centrado. Este método de alineación es para los bloques, no tiene nada que ver con la alineación del texto, esto es importante distinguirlo.
Por otra parte, a todo el artículo ARTICLE, le he dicho que como máximo haga 800 píxeles de ancho*. Para que las líneas no sean tan, tan largas y tediosas. Fijaros como la orden justify-content:middle me centra ahora todo el bloque de texto, pero no me centra la alineación de este (porque el texto lo dejamos alineado a la izquierda).
* Puedes usar otras unidades de medición, porcentaje, VW/VH… Hay una muy interesante que son los CH (caracteres), por exemplo width:60ch, hará que sea un bloque de párrafo «60 letras» del tamaño actual.
Haz clic en la anterior imagen para previsualizar en el navegador lo conseguido hasta ahora. Te recomiendo que pruebes a estirar y hacer estrecha la ventana, para que veas el comportamiento que tiene el ajuste del texto. Debes tener claro, que no sabes nunca en qué tamaño de pantalla va a ver la gente tu web. Así que tiene que porder verse bien en cualquier tamaño.
Mejorando el formato del texto
Yo es que por una parte, ya tengo una edad y soy miope; por otra parte, me gustan los diseños con fuerza y contundencia. Pero una cosa debes tener clara: Cuando leemos cosas por pantalla, cada vez lo hacemos más rápido, en diagonal, y saltando párrafos. Es inconsciente, pero está científicamente probado. Así que, si quieres que te lean, deberás usar ciertas estrategias en tu diseño.
Vamos a añadir un par de reglillas más al css base del documento html:
<style>
html {
font-family:Calibri, Arial, Helvetica, sans-serif;
display:flex;
justify-content:middle;
font-size:18px;
line-height:2;
}
article {
max-width:800px;
}
</style>
Ahora voy a poner un antes y un después de añadir este nuevo tamaño de texto e interlineado (line-height) para que veais la diferencia y comentaros lo que ha pasado:
https://cachitoswp.com/tutoriales/maquetacion-articulo-html-css/maquetacion-articulo-html-css-3.html
He aumentado el texto de los párrafos a 18 píxeles, y de interlineado le he puesto uno bien generoso, del 200%. La línea css line-height:2 es decirle que use el doble de su altura base. Tanto para font-size como para line-height podemos usar diferentes unidades, tanto px como otras, o porcentajes. También para afinar mejor, podemos usar decimales usando el punto (Ejemplo: line-height: 126.7% ). Aquí te dejo que hagas tus pruebas. Es como se aprende.
Ahora, si te fijas en las capturas del antes y el después, aparte de que está mucho más espaciado, el documento se ha hecho más alto, claro, porque hemos duplicado el espacio vertical.
Pero si te fijas en los encabezados (H1 y H2), el tamaño de estos, no ha cambiado. Esto es porque P o párrafo, no tiene de momento ninguna regla especificada, ni nos hace falta en este caso, así que HEREDA las propiedades de texto que definimos en el tag «padre» que es HTML.
En cambio, los encabezados tienen los tamaños especificados para cada uno (siendo h1 el mayor, h2, h3 etc cada vez más pequeños, para mantener una jerarquía de visual de apartados).
Como decía a mi personalmente me gusta lo contundente. Vamos a meter unos tamaños potentes para los encabezados:
<style>
/* esta línea es un comentario en css, mira los delimitadores que uso */
article {
max-width:800px;
}
h1 {
font-size: 250%;
line-height: 1.3;
}
h2 {
font-size: 175%;
line-height: 1.3;
}
</style>
En los encabezados, aparte del tamaño, vuelvo a especificar un line-height. Si no lo hiciera, se aplicaría el 200% que especifiqué para el tag HTML, lo cual queda muy mal en textos muy grandes (el alto de línea toma demasiado espacio, por esto lo he reducido.)
Aunque vamos mejorando en la maquetación, este artículo todavía es visualmente aburrido, y no invita a la lectura. Vamos a darle algo de vida, para empezar, vamos a hacer que el primer párrafo tras el primer título, sea mayor y nos dé menos pereza empezar a leer.
Ahora, en CSS como quiero aplicar un estilo solamente a un párrafo, voy a hacer una regla nueva llamada «intro». Es un nombre que me he inventado yo. Para esto, vamos a crear una CLASE. Atención:
<style>
/* ... resto del código */
h2 {
font-size: 175%;
line-height: 1.3;
}
.intro {
font-size:150%;
line-height:1.5;
color:steelblue;
}
</style>
Aplicaré esta nueva regla, al primer párrafo, que le hará un poco mayor el texto y además será de color azul metálico. Para la nomenclatura del color, puedes usar nombres de colores en inglés, o varias codificaciones distintas de color, como este tutorial es de iniciacion, mejor usa un color de la lista disponible. Ver colores disponibles para html/css.
Este es un recurso para dar un poco de vidilla. Añadiremos al primer párrafo el estilo «intro» de esta manera:
<h1>El boom de las IA en las tecnologías de consumo</h1>
<p class="intro">El boom de las inteligencias artificiales se refiere a un
período en curso de rápido y sin precedentes desarrollo en el campo de la inteligencia artificial, con la carrera generativa de IA siendo un componente clave de este boom, que comenzó en serio con la fundación de OpenAI en 2016 o 2017¹. </p>
https://cachitoswp.com/tutoriales/maquetacion-articulo-html-css/maquetacion-articulo-html-css-4.html
A continuación, voy a hacer 2 cosas:
Resaltar en negrita nombres y partes relevantes en los párrafos; la negrita invita a que si alguien nos lee muy deprisa y se salta cosas, esta capta más su atención para detenerse a leer. Para marcar partes en negrita, usaremos la etiqueta STRONG así:
<p>La IA ya es el principal impulsor de tecnologías emergentes como <strong>big data, robótica e IoT</strong>, por no mencionar la IA generativa, con herramientas como ChatGPT y generadores de arte de IA que están ganando atención generalizada, y seguirá actuando como un innovador tecnológico en el futuro previsible.</p>
<p>En el corto plazo, las IA generativas ya pueden responder preguntas, escribir poesía, generar código informático y mantener conversaciones. Están siendo implementadas en formatos conversacionales como <strong>ChatGPT y Bing</strong>. Pero eso no va a durar mucho tiempo. <strong>Microsoft y Google</strong> ya han anunciado planes para incorporar estas tecnologías de IA en sus productos. <strong>Podrás usarlas para escribir un borrador de un correo electrónico, resumir automáticamente una reunión y realizar muchos otros trucos geniales.<strong></p>
<p>En el mediano plazo, muchos expertos creen que la IA hará que algunos trabajadores, incluidos médicos, abogados y programadores informáticos, <strong>sean más productivos que nunca.</strong></p>Crear una frase citada en grande o frase «lupa»; copiaremos alguna parte del texto y la vamos a poner entre párrafos como frase destacada. Del anterior fragmento, me gusta por ejemplo la última frase. La voy a duplicar (sin el tag STRONG que he colocado y quitando del principio «Muchos expertos creen», para resumirla) y la voy a colocar entre el segundo y tercer párrafo:
<p>La IA ya es el principal impulsor de tecnologías emergentes como <strong>big data, robótica e IoT</strong>, por no mencionar la IA generativa, con herramientas como ChatGPT y generadores de arte de IA que están ganando atención generalizada, y seguirá actuando como un innovador tecnológico en el futuro previsible.</p>
<blockquote>Muchos expertos creen que la IA hará que algunos trabajadores, incluidos médicos, abogados y programadores informáticos, sean más productivos que nunca.</blockquote>
<p>En el corto plazo, las IA generativas ya pueden responder preguntas, escribir poesía, generar código informático y mantener conversaciones. Están siendo implementadas en formatos conversacionales como <strong>ChatGPT y Bing</strong>. Pero eso no va a durar mucho tiempo. <strong>Microsoft y Google</strong> ya han anunciado planes para incorporar estas tecnologías de IA en sus productos. <strong>Podrás usarlas para escribir un borrador de un correo electrónico, resumir automáticamente una reunión y realizar muchos otros trucos geniales.<strong></p>
<p>En el mediano plazo, muchos expertos creen que la IA hará que algunos trabajadores, incluidos médicos, abogados y programadores informáticos, <strong>sean más productivos que nunca.</strong></p>Ahora obtendremos esto:
Por defecto, nuestra frase destacada, sólo destaca en que tiene algo de margen a la izquierda. Ahora, vamos a añadir a nuestro CSS algo de estilo para este tag:
<style>
/* ... */
blockquote {
font-size: 125%;
line-height: 1.6;
color: steelblue;
margin: 20px 10%;
}
</style>He aumentado el tamaño de texto y ajustado el interlineado; le he puesto el color de la entradilla, y he modificado sus márgenes; antes, por defecto el BLOCKQUOTE tenía un margen de 20px a los 4 lados; añadiendo el parámetro 20px 10%, le he dicho que verticalmente tenga 20px arriba y abajo, y horizontalmente un 10% del espacio total del bloque (en este caso, un 10% del ancho del artículo).
Osea un poco más grande, coloreado y centradito. Para rizar el rizo, a mi me gustan las frases destacadas entrecomilladas, ayudan a que quede claro que se trata de una cita y no de un título. Se las voy a añadir al principio y al final; pero en lugar de usar las comillas dobles verticales estandar ( » ), quiero usar las que están inclinadas a ambos lados ( “ y ” ). Como no me acuerdo de cómo obtener esas comillas especiales con el teclado, voy a usar ENTIDADES HTML. Concretamente para esas comillas son «“" para la izquierda, y "”» para la derecha:
<blockquote>“ Muchos expertos creen que la IA hará que algunos trabajadores, incluidos médicos, abogados y programadores informáticos, sean más productivos que nunca. ”</blockquote>Recurso: Aquí un listado de tipos de entrecomillados que podemos usar, yo es que soy muy sibarita.
Vale, pues he puesto esa frase destacada, y otra más un poco más abajo, para quitarle monotonía al ritmo de los párrafos.
https://cachitoswp.com/tutoriales/maquetacion-articulo-html-css/maquetacion-articulo-html-css-5.html
Ilustrar el artículo: añadir una foto de cabecera, y otra para el contenido
Acabemos de agregar vida al artículo añadiendo imágenes. Sin pasarnos, voy a escoger 2, una la pondremos arriba del todo bien grande, la otra la voy a colocar sobre el segundo título. Así también nos hará de separador de las 2 partes que forman el artículo. He buscado un par de fotos gratuitas así en plan ciber cutre futurista en freepik.es:
Te recomiendo escoger imagenes algo apaisadas. Yo las he recortado usando la herramienta de recorte de Photopea, un sucedáneo de Photoshop online bastante apañado. Usaré la más apaisada para la cabecera.
El tag para insertar una imagen es IMG y es un tag de autocierre. (no hay que cerrarlo con </img>). Se usa así:
<img src="ruta-archivo/archivo.jpg" alt="Descripción lógica de la imagen" width="anchura" height="altura">SRC
Es la ruta del archivo. Si estás haciendo el ejercicio en tu ordenador, y colocas la imagen en la misma carpeta donde tienes tu html, tienes que poner el nombre del fichero (con la extensión, .png, .jpg etc) sin mas. Si tienes la imagen en una subcarpeta con respecto a tu html, pues la ruta sera nombrecarpeta/nombrefichero.html. Yo como la subo a mi web para hacerte este tutorial, pondré su ruta url completa.
ALT
Te lo puedes saltar cuando haces pruebas, pero una vez online este es imprescindible y obligatorio: Describe lo que es esa imagen. Porque el navegador NO sabe de que es la imagen, y debe saberlo para poder describirlo al usuario pueda o no cargarla. Es una descripción lógica, el texto NO es un pie de foto donde se deban añadir comentarios, si es una foto de un perro salchicha, su ALT será «fotografía de un perro salchicha».
WIDTH Y HEIGHT
Ancho y alto de la imagen en píxeles, porcentaje (de su espacio contextual disponible) o con el valor «auto». Si ambos valores son «auto», la imagen se representará en sus medidas originales. Si por ejemplo de ancho especificamos «500» y de alto «auto», la imagen se escalará a 500 de ancho, sin distorsionarse.
Podemos especificar un tamaño mayor al de la imagen original, pero nunca es recomendable porque sus píxeles y defectos se estirarán y se verá borrosa.
El navegador antes y durante la carga de las imágenes reservará el espacio que le especifiquemos en width y height, pero estos valores pueden ser controlados desde los estilos CSS, donde disponemos de más recursos para el comportamiento de las imágenes. Luego lo vemos.
Voy a poner aquí la foto de la cabecera, antes del H1:
<article>
<img src="https://cachitoswp.com/tutoriales/maquetacion-articulo-html-css/concepto-digital-ai-freepik.jpg" alt="ilustración conceptual mundo digital" width="100%" height="auto">
<h1>El boom de las IA en las tecnologías de consumo</h1>Y la otra foto, la coloco aquí, antes del segundo título del artículo:
(...) y seguirá haciéndolo en el futuro.</p>
<img src="https://cachitoswp.com/tutoriales/maquetacion-articulo-html-css/hombre-usando-tableta-freepik.jpg" alt="hombre usando tableta digital" width="100%" height="auto">
<h2>Qué nos podría deparar el futuro de la humanidad conviviendo con las IA.</h2>Si las rutas de las imágenes están correctas, esto será lo que salga:
https://cachitoswp.com/tutoriales/maquetacion-articulo-html-css/maquetacion-articulo-html-css-6.html
Et voila! Pues ni tan mal, ¿no? Tenemos un articulito maquetado, ilustrado, colorista y atractivo, y lo hemos hecho usando HTML Y CSS. Enhorabuena.
Usaremos en próximos tutoriales este mismo artículo para hacer prácticas jugando con los anchos, variando con las columnas, y te enseñaré a hacer que el layout de la página sea responsivo y se adapte correctamente a pantallas pequeñas como las de los smartphone.
Ahora mismo, tal como está la página, se puede ver en un smartphone, pero si lo pruebas, verás que se muestra a escala, tal como la ves en el ordenador. Puedes hacer zoom y leer el artículo (lo cual no está mal y hace que sea accesible), pero no es lo mas cómodo .
Ya verás que guapo, esto del responsive, en la segunda parte de este tutorial. ¡Nos vemos!
Deja una respuesta