{"id":6824,"date":"2023-04-06T14:59:19","date_gmt":"2023-04-06T17:59:19","guid":{"rendered":"https:\/\/irisfernandez.com.ar\/betaweblog\/?p=6824"},"modified":"2023-04-16T10:09:40","modified_gmt":"2023-04-16T13:09:40","slug":"codigos-para-maquetado","status":"publish","type":"post","link":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/2023\/04\/06\/codigos-para-maquetado\/","title":{"rendered":"C\u00f3digos para maquetado"},"content":{"rendered":"\n<p>Estoy trabajando en la carga de contenidos en una plataforma Moodle, y muchos\/as docentes me env\u00edan algunos cuadros en im\u00e1genes que podr\u00edan estar en texto. Por una cuesti\u00f3n de accesibilidad, siempre que el tiempo me alcanza, paso esos cuadros a c\u00f3digo.<\/p>\n\n\n\n<p>Voy a ir guardando en este posteo esos c\u00f3digos, para volver a usarlos yo misma, y para compartir con quienes se encuentren en una situaci\u00f3n similar.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Recuadrito a la derecha de un texto<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div style=\"float: right; width: 40%;background-color: #d5dfee; padding: 1.5em; margin: 2em; border: 1px #123872 solid; text-align: center;\"&gt;&lt;em&gt;\"He pasado una noche estupenda, pero no ha sido esta\"&lt;\/em&gt;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<div style=\"float: right; width: 40%;background-color: #d5dfee; padding: 1.5em; margin: 2em; border: 1px #123872 solid; text-align: center;\"><em>&#8220;He pasado una noche estupenda, pero no ha sido esta&#8221;<\/em><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Recuadrito con bordes redondeados<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div style=\"float: right; width: 40%;background-color: #d5dfee; padding: 1.5em; margin: 2em; border: 1px #123872 solid; text-align: center; border-radius: 25px;\">&lt;em>\"He pasado una noche estupenda, pero no ha sido esta\"&lt;\/em>&lt;\/div><\/code><\/pre>\n\n\n\n<div style=\"float: right; width: 40%;background-color: #d5dfee; padding: 1.5em; margin: 2em; border: 1px #123872 solid; text-align: center; border-radius: 25px;\"><em>&#8220;He pasado una noche estupenda, pero no ha sido esta&#8221;<\/em><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Recuadro t\u00edtulo de pesta\u00f1a<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div style=\"width: 80%; border: 2px solid #012760; text-align: center; padding: 1em; margin-left: auto; margin-right: auto; background-color: #C6D2DD;\"&gt;\n    &lt;h4 style=\"color: rgb(1, 39, 96); text-align: center;\"&gt;Clase 1&lt;\/h4&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n\n\n\n<div style=\"width: 80%; border: 2px solid #012760; text-align: center; padding: 1em; margin-left: auto; margin-right: auto; background-color: #C6D2DD;\">\n    <h4 style=\"color: rgb(1, 39, 96); text-align: center;\">Clase 1<\/h4>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Imagen con pie de imagen a la derecha del texto<\/h2>\n\n\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div style=\"clear: both;\"&gt;&lt;div style=\"float: right; width: 20%;\"&gt;&lt;img src=\"https:\/\/irisfernandez.com.ar\/betaweblog\/wp-content\/uploads\/2023\/04\/405px-Tux.png\" alt=\"tux\"&gt;&lt;p style=\"font-size: 70%; font-style: italic; text-align: center;\" &gt;Fuente: Wikipedia&lt;\/p&gt;&lt;\/div&gt;&lt;p&gt;Tux es el nombre de la mascota oficial de Linux. Creado por Larry Ewing en 1996, es un peque\u00f1o ping\u00fcino de aspecto risue\u00f1o y c\u00f3mico basado en una imagen que Linus Torvalds encontr\u00f3 en un servidor FTP. &lt;\/p&gt;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<div style=\"clear: both;\"><div style=\"float: right; width: 20%;\"><img decoding=\"async\" src=\"https:\/\/irisfernandez.com.ar\/betaweblog\/wp-content\/uploads\/2023\/04\/405px-Tux.png\" alt=\"tux\"><p style=\"font-size: 70%; font-style: italic; text-align: center;\">Fuente: Wikipedia<\/p><\/div><p>Tux es el nombre de la mascota oficial de Linux. Creado por Larry Ewing en 1996, es un peque\u00f1o ping\u00fcino de aspecto risue\u00f1o y c\u00f3mico basado en una imagen que Linus Torvalds encontr\u00f3 en un servidor FTP. <\/p><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Lista de \u00edtems<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;br&gt;\n&lt;div style=\"clear: both;\"&gt;\n    &lt;div style=\"float: left; border: 1px solid #000077; padding: 0.5%; margin: 0.9%; width: 5%; text-align: center; font-size: 300%; color: #000077;\"&gt;1&lt;\/div&gt;\n    &lt;div style=\"float: left; border: 1px solid #000077; padding: 1em; margin: 1em; width: 60%; text-align: center; \"&gt;\n\n        &lt;p&gt;Primer paso&lt;\/p&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;\n\n&lt;div style=\"clear: both;\"&gt;\n    &lt;div style=\"float: left; border: 1px solid #000077; padding: 0.5%; margin: 0.9%; width: 5%; text-align: center; font-size: 300%; color: #000077;\"&gt;2&lt;\/div&gt;\n    &lt;div style=\"float: left; border: 1px solid #000077; padding: 1em; margin: 1em; width: 60%; text-align: center; \"&gt;\n\n        &lt;p&gt;Segundo paso&lt;\/p&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;\n\n&lt;div style=\"clear: both;\"&gt;\n    &lt;div style=\"float: left; border: 1px solid #000077; padding: 0.5%; margin: 0.9%; width: 5%; text-align: center; font-size: 300%; color: #000077;\"&gt;3&lt;\/div&gt;\n    &lt;div style=\"float: left; border: 1px solid #000077; padding: 1em; margin: 1em; width: 60%; text-align: center; \"&gt;\n\n        &lt;p&gt;Tercer paso&lt;\/p&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;\n\n&lt;div style=\"clear: both;\"&gt;\n    &lt;div style=\"float: left; border: 1px solid #000077; padding: 0.5%; margin: 0.9%; width: 5%; text-align: center; font-size: 300%; color: #000077;\"&gt;4&lt;\/div&gt;\n    &lt;div style=\"float: left; border: 1px solid #000077; padding: 1em; margin: 1em; width: 60%; text-align: center; \"&gt;\n\n        &lt;p&gt;Cuarto paso&lt;\/p&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<br>\n<div style=\"clear: both;\">\n    <div style=\"float: left; border: 1px solid #000077; padding: 0.5%; margin: 0.5%; width: 7%; min-width: 1em; text-align: center; font-size: 300%; color: #000077;\">1<\/div>\n    <div style=\"float: left; border: 1px solid #000077; padding: 1em; margin: 1em; margin-top: 0.13em; width: 60%; text-align: center; \">\n\n        <p>Paso 1<\/p>\n    <\/div>\n<\/div>\n\n<div style=\"clear: both;\">\n    <div style=\"float: left; border: 1px solid #000077; padding: 0.5%; margin: 0.5%; width: 7%; min-width: 1em;  text-align: center; font-size: 300%; color: #000077;\">2<\/div>\n    <div style=\"float: left; border: 1px solid #000077; padding: 1em; margin: 1em;  margin-top: 0.13em; width: 60%; text-align: center; \">\n\n        <p>Paso 2<\/p>\n    <\/div>\n<\/div>\n\n<div style=\"clear: both;\">\n    <div style=\"float: left; border: 1px solid #000077; padding: 0.5%; margin: 0.5%; width: 7%; min-width: 1em;  text-align: center; font-size: 300%; color: #000077;\">3<\/div>\n    <div style=\"float: left; border: 1px solid #000077; padding: 1em; margin: 1em;  margin-top: 0.13em; width: 60%; text-align: center; \">\n\n        <p>Paso 3<\/p>\n    <\/div>\n<\/div>\n\n<div style=\"clear: both;\">\n    <div style=\"float: left; border: 1px solid #000077; padding: 0.5%; margin: 0.5%; width: 7%; min-width: 1em;  text-align: center; font-size: 300%; color: #000077;\">4<\/div>\n    <div style=\"float: left; border: 1px solid #000077; padding: 1em; margin: 1em;  margin-top: 0.13em; width: 60%; text-align: center; \">\n\n        <p>Paso 4<\/p>\n    <\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Estoy trabajando en la carga de contenidos en una plataforma Moodle, y muchos\/as docentes me env\u00edan algunos cuadros en im\u00e1genes que podr\u00edan estar en texto. Por una cuesti\u00f3n de accesibilidad, siempre que el tiempo me alcanza, paso esos cuadros a c\u00f3digo. Voy a ir guardando en este posteo esos c\u00f3digos, para volver a usarlos yo &hellip; <a href=\"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/2023\/04\/06\/codigos-para-maquetado\/\" class=\"more-link\">Continuar leyendo<span class=\"screen-reader-text\"> &#8220;C\u00f3digos para maquetado&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-6824","post","type-post","status-publish","format-standard","hentry","category-educacion-tecnologia"],"_links":{"self":[{"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/posts\/6824","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/comments?post=6824"}],"version-history":[{"count":27,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/posts\/6824\/revisions"}],"predecessor-version":[{"id":6855,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/posts\/6824\/revisions\/6855"}],"wp:attachment":[{"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/media?parent=6824"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/categories?post=6824"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/tags?post=6824"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}