Instalación Software Gedit

Página 2
Consideraciones para el uso de Gedit

Página 5
Manual para elaboración Uso de etiquetas HTML

de materiales educativos
Página 6
multimedia
Adecuaciones específicas a páginas

CÓDIGO HTML Página 14

Equipo de Diseño Instruccional del Área de Gestión del Códigos que deben permanecer en todas las páginas
Conocimiento HTML
División de Innovación Educativa
Coordinación de Educación médica
Instituto Mexicano del Seguro Social Página 20
Elaboró Mario Mejía Valencia. Coordinador de Diseño Pedagógico Código de estructura

Página 23
Consideraciones para la generación de imágenes

Página 25
 Instalación Software Gedit

Paso 1

Revisar en el Panel de Control, el tipo de sistema para saber si

corresponde a 32 o 64 bits.

Ejemplo
 Paso 4
Paso 2

Aceptar los términos de la licencia y dar clic en “Next”.

Seleccionar el ejecutable a instalar.
Ejemplo
Ejemplo

Paso 5

Paso 3
Instalar el software, para ello debe dar doble clic en el ejecutable
adecuado, de acuerdo con el sistema del equipo de computo. Se
abrirá una ventana; en ella dar clic en “Next”.
Seleccionar la carpeta en donde se colocarán los archivos del
software. Regularmente se respeta la ruta que el software
proporciona. Posteriormente se da clic en “Next”.
Ejemplo

Ejemplo
 Paso 6 Paso 8

Dar clic en “Install”. Esperar a que el software instale los archivos necesarios.

Ejemplo Ejemplo

Paso 9
Paso 7
Una vez que el software finalice su instalación, dar clic en “Finsh”.
Dar permisos de autor, al software.
Ejemplo
Ejemplo
 Paso 10
Consideraciones para el
uso de Gedit
Verificar que el software esté instalado.

Ejemplo Gedit es un editor de texto que nos permite trabajar de manera

más fácil los códigos para la creación de páginas HTML .

El block de notas también puede hacer esta función; pero la

ventaja de gedit es que utiliza un código de colores que nos señala
si una etiqueta fue abierta o cerrada de manera incorrecta.

El color rosa señala recursos, atributos, referencias,

etcétera.

El color verde señala la apertura o cierre de una etiqueta.

El color azul, señala una nota, es decir, un contenido que no

afecta ni la estructura ni el funcionamiento de la página
HTML.

El color negro señala contenido que se mostrará en pantalla.

Si una etiqueta no se cierra adecuadamente, entonces, los códigos

de etiquetas, de recursos, atributos o referencias no se mostrarán
en el color correspondiente.
Cada que se realiza un cambio en el archivo, se marca un asterisco
en la pestaña; esto indica que se ha realizado un cambio pero no
se ha guardado.
Uso de etiquetas HTML

Todas las etiquetas se señalan mediante los siguientes signos <>.

Todas las etiquetas se abren y se cierran:

Apertura de una etiqueta: <>

Cierre de una etiqueta: </>

De acuerdo con el elemento a utilizar, será la nomenclatura que se

Todas las páginas se deben guardar con terminación “.html”. incluya entre los signos de las etiquetas, como se verá a
Existen páginas que siempre serán nombradas de la misma continuación.
manera; por ejemplo:
Etiquetas para colocar párrafos
• objetivo.html
• presentacion.html
• actividad.html Cuando se desea incluir un párrafo dentro del código de HTML (no
• conclusón.html en imagen), se debe utilizar la siguiente etiqueta:
• findeltema.html
• bibliografia.html <p> </p>
• glosaro.html
• creditos.html Cada nueva etiqueta “p” abre un nuevo párrafo, por lo que se da
• imss.html un salto de línea.

Las páginas de bienvenida, se nombrarán como “tema1.html”, Ejemplo

“tema2.html”, “tema3.html”, etcétera.
<p> Le damos la más cordial bienvenida al tema:</p>
Mientras que las páginas que corresponden a subtemas o
apartados se nombrarán como “subtema1.html”, “subtema2.html”, Las etiquetas pueden tener atributos.
“apartado1.html”, “apartado2.html”.
Si deseamos que este texto se muestre centrado, utilizaremos el
Si un subtema o apartado presenta más de una página HTML, siguiente código:
entonces dicho archivos se nombrará como “subtema1.2.html”,
“subtema1.2.html”, “apartado1.1.html.” Ejemplo

Las páginas se guardarán en la carpeta “desktop”, que se localiza <p class=“centrado”> Le damos la más cordial bienvenida al
en la siguiente ruta: tema:</p>

SCO_Tema - sco - content - 05_desktop

Si deseamos que tenga un color especifico, se señalizará en su
término en inglés y se utilizará el siguiente código:
Ejemplo
<p style="color:nombre en inglés"> Le damos la más cordial
bienvenida al tema:</p>
Podemos combinar atributos, es decir, puedo solicitar que el
párrafo se encuentre centrado y con un color distinto al resto del
texto. Para ello, separo los códigos con un ;.
Ejemplo
<p class="centrado"; style="color:red"> Le damos la más cordial
bienvenida al tema:</p>
Además de los atributos anteriores, podemos solicitar que ese
párrafo en particular se muestre en negritas. Para ello no
utilizaremos un código para un atributo, sino la etiqueta strong.
Ejemplo
<p class=“centrado”; style="color:nombre en inglés"> <strong>Le
damos la más cordial bienvenida al tema:</strong></p>
La etiqueta “strong” en este caso, se abre y se cierra dentro de la
etiqueta de párrafo “P”; con ellos se indica que se desea “afectar”
(que se muestre en negritas), ese párrafo en su totalidad.
Las etiquetas pueden tener atributos que afecten sólo una
parte del párrafo.
A diferencia del atributo “centrado”, que regularmente se utiliza
para afectar a la totalidad de un párrafo; el atributo de color de
fuente y la etiqueta “strong”, pueden afectar sólo una parte del
párrafo (es decir, solo un conceptos o una parte de la idea), pero
deben mostrarse de manera conjunta ya que el color de fuente por
sí misma no es una etiqueta.
Ejemplo
<p>Le damos la más <strong style="color:nombre en inglés">
cordial bienvenida </strong> al tema:</p>
Para colocar un concepto en cursivas, se utilizará la etiqueta “i”.
Ejemplo
<p>Le damos la más <i>cordial bienvenida </i> al tema:</p>
Al igual que en los casos anteriores, se puede combinar la etiqueta
“i” con otros atributos y la etiqueta “strong”.
Ejemplo
<p class="centrado">Le damos la más <strong
style="color:red">cordial <i>bienvenida</i></strong> al
tema:</p>
En el caso anterior, sólo la palabra bienvenida se verá afectada por
la etiqueta, lo que ocasionará que en la página HTML, esa palabra
se muestre en cursivas.
Un elemento muy común en los materiales educativos de la
división, es el uso de superíndices y subíndices. Estos elementos
se señalan mediante las etiquetas “sup” y “sub”.
Ejemplo
<p>Esencialmente, el objetivo del <i>triage</i> respiratorio
durante la pandemia de COVID-19 es^1,2:</p>
<p>La fórmula química del agua es H₂O</p>
Estas etiquetas, al igual que las etiquetas “strong” e “i”, se
muestran dejando “encerrado” al concepto o idea que queramos
afectar con sus atributos.
Etiquetas para colocar imágenes
Para este tipo de materiales, es muy frecuente utilizar imágenes.
Creamos estructuras (esquemas, mapas conceptuales, mapas
mentales, cajas de texto, botones, plecas de instrucciones,
etcétera) en algún software de creación de imágenes como puede
ser power point (el más frecuente) o illustrator. Una vez que
hemos creado dichas imágenes se colocan dentro de la carpeta
correspondiente y se señala la ruta mediante el uso de las
etiquetas correspondientes.
Cuando se desea incluir una imagen dentro del código de HTML, se
debe utilizar la siguiente etiqueta:
<p class="centrado"><a title="Ampliar imagen" class="ampliable"
target="_blank" href=“CARPETA EN DONDE SE ENCUENTRA LA
IMAGEN/NOMBRE DE ALA IMAGEN.htm"><img src=“CARPETA EN
DONDE SE ENCUENTRA LA IMAGEN/NOMBRE DE LA IMAGEN.TIPO
DE ARCHIVO" alt=""></a></p>
Ejemplo
<p class="centrado"><a title="Ampliar imagen" class="ampliable"
target="_blank" href="imagenes/image50.htm"><img
src="imagenes/image50.png" alt=""></a></p>
Como pueden observar, la etiqueta para incluir imágenes hace uso
de la etiqueta <p> con atributo de “centrado”. Esto debe ser así
en todos los casos.
El atributo de cambio de color de fuente y la etiqueta “strong”, no
es aplicable para imágenes, pues no las afecta.
Todas las imágenes que se elaboren y se coloquen en las páginas
HTML, deben ser guardadas en la carpeta de “imagenes”, la cual se
localiza en la siguiente ruta de la carpeta SCO:
SCO_Tema - sco - content - 05_desktop - imagenes
 Recomendaciones para el manejo de imágenes. Como observarán en el ejemplo, cualquier título de tercer nivel
que se muestre con “h1” después del título del tema, subtema,
1. Guardar las imágenes siempre como “image” seguido del apartado o cualquier otra sección, deberá colocarse después de la
número. etiqueta:

2. Llevar un orden consecutivo en las imágenes, es decir, <div class="diapositiva">

comenzar con la imagen 1.

3. Guardar todas las imágenes en formato png, ya que suelen ser
menos pesadas. Por lo tanto en la última referencia que se
hace de la ruta de la imagen dentro de la etiqueta y en la cual
se solicita el tipo de archivo, siempre deberá colocarse “.png”
Ejemplo
image1.png
Image2.png
Etiquetas para colocar títulos de tercer nivel
Para colocar los títulos de primero y segundo nivel,
Ten en cuenta
Etiqueta div
Un “div” es un contenedor. A lo largo del código nos
encontraremos con varios “div” o contenedores que estructuran en
secciones invisibles la pantalla HTML; por medio de ellos,
determinamos cual es el espacio en el que se muestra el header, la
zona de contenido, ventanas emergentes o las barras de
navegación en donde se localizan los botones de navegación de
“Anterior” y “Siguiente”. Dentro de un div, podemos tener otros
div.
Excepto, para indicar contenido a mostrar en un botón o ula
descarga de un material complementario, nosotros no
debemos agregar ninguna etiqueta “div” nueva, ni eliminar
ninguna que ya está dada dentro del código de las páginas HTML

los cuales corresponden al título del tema y

secciones, tales como “Objetivo”, “Presentación”, en donde nosotros únicamente agregaremos contenido.
“Nombre del subtema”, “Nombre del apartado”,
“Actividad”, “Conclusión”, “Fin del tema”, Glosario”,
“Bibliografía”, “Créditos”, “IMSS”, existe una
estructura de código que está determinada, en la
cual sólo debemos cambiar los títulos
correspondientes. Se describirá la forma de
trabajar estos títulos más adelante.

En caso de encontrar un título de tercer nivel que se muestre al

inicio de la página HTML o en cualquier otra parte de la misma, se
utilizará la etiqueta ”h1”.

Ejemplo

<h3>Tema 1. Gestión para la prevención y control de COVID-19

en unidades médicas</h3><div
class="diapositiva"><h1>Antecedentes</h1>

(Ventana emergente)
El resultado de manipular de manera incorrecta un “div” es que la
pantalla pierde estructura; por lo que después se tiene que buscar, Etiqueta para realizar listas
entre todas las etiquetas “div” cuál se abrió o cerró de manera
inadecuada; lo que es un trabajo arduo que hace perder mucho
tiempo.
Existen dos tipos de listas ordenadas, con bullets o con signos
Ejemplo de página HTML con etiquetas “div” correctas (letras o números).

El primer tipo de lista utiliza la etiqueta “ul”, mientras que para el

segundo tipo de lista se utiliza la etiqueta “ol”; si se desea una
lista con letra se utilizará el atributo “type=“a”, en caso de utilizar
números, sólo se utiliza la etiqueta “ol”.

En ambos tipos de listas ordenadas, para señalar cada uno de los

ítems, se utiliza a su vez la etiqueta “li”.

Ejemplo

<ul><li>Verduras</li><li>Frutas</li><li>Agua</li></ul>

Ejemplo de página HTML con etiquetas “div” manipuladas

incorrectamente

<ol
type="a"><li>Verduras</li><li>Frutas</li><li>Agua</li></ol>

<ol><li>Verduras</li><li>Frutas</li><li>Agua</li></ol>

Como observarán, esta etiqueta es independiente a la etiqueta

«p»; es decir, para colocar una lista no es necesario abrir una
etiqueta <p> antes de <ul> u <ol>.

Etiqueta para colocar botones
El uso de este código es para eficientar tiempos de producción; por
lo que el código que se explica es básico, por lo tanto únicamente
se tiene la posibilidad de utilizar un tipo de botones. Esta
interactividad sólo permite colocar un listado vertical de botones,
que al dar clic en ellos desplegarán, al costado derecho de la
página HTML una ventana emergente, que puede ser tan larga
como el material lo requiera (por cuestiones pedagógicas no
utilizar ventanas muy extensas).
Ejemplo
Para indicar en el código la presencia, en la página, de botones, se
recurre al uso de la etiqueta “ul” (la misma que se utiliza para la
creación de listas ordenadas de bullets), con un atributo de
“class=“navigation”.
Al igual que en las etiquetas para listados, se utilizarán tantas
etiquetas “li” como ítems o botones se requieran. Estas etiquetas a
su vez, incluirán una etiqueta “p” en la que se incluye el atributo
de “centrado”, un “id” y “referencia” que relacionará al ítem o
botón con el contenido que debe mostrar y la imagen que debe
mostrarse como “botón”.
Una vez que se terminen de incluir los “li” o botones, se debe
cerrar la etiqueta “ul”
<ul class="navigation">
<li>
<p class="centrado"><a title="Más información" id=“e NÚMERO
CORRESPONDIENTE, COMENZANDO CON 1" class="animar;
ampliable" href="#NÚMERO CORRESPONDIENTE COMENZANDO
CON EL 1"><img src=“CARPETA EN DONDE SE ENCUENTRA LA
IMAGEN/NOMBRE Y TIPO DE IMAGEN" alt=""></a></p>
</li>
</ul>
Ejemplo
<ul class="navigation">
<li>
<p class="centrado"><a title="Más información" id="e1"
class="animar; ampliable" href="#1"><img
src="imagenes/image18.png" alt=""></a></p>
</li>
</ul>
Para colocar la imagen que será botón, deberán tomar en cuenta la
explicación y recomendaciones hechas en la sección “Etiquetas
para colocar imágenes”.
Ten en cuenta
En este punto, únicamente hemos colocado una
imagen con una función de botón, pero aún no
hemos indicado que información mostrará.
 Indicar que información mostrará.
Inmediatamente después de que se ha cerrado la etiqueta “ul”,
debemos abrir, los únicos “div” que nos corresponden.
En estas etiquetas “div” debemos colocar los “id” de referencia; en
otras palabras, se deben relacionar los botones con el contenido
que se mostrará en cada uno de ellos, y eso se logra mediante los
“id”, que son los “identificadores” (el botón con id=1, debe mostrar
el contenido del div con el id=1, y así sucesivamente cuántos
botones se tengan).
<p class="centrado"><a title="Ampliar imagen" class="ampliable"
target="_blank" href="imagenes/image24png.htm"><img
src="imagenes/image24.png" alt=""></a></p><p
class="centrado"><a title="Ampliar imagen" class="ampliable"
target="_blank" href="imagenes/aviso-modalpng.htm"><img
src="imagenes/aviso-modal.png" alt=""></a><br><a
title="Ampliar imagen" class="ampliable" target="_blank"
href="imagenes/aviso-modal.htm"></a></p>
</div>
</div>
</div>

El código a utilizar será el siguiente:

<div id=“NÚMERO QUE LE CORRESPONDA DE ACUERDO CON EL

ID DEL BOTÓN" class="panel" >
<div class="cont">
<div class="contcerrar">
<img title="Cerrar" class="crr" src="css/img/cerrar.jpg">
</div>
<div class="caja" >
<p><strong>TÍTULO QUE CORRESPONDE (DEBE SER EL MISMO
QUE MUESTRA LA IMAGEN DEL BOTÓN)</strong></p>
<p class="centrado"><a title="Ampliar imagen" class="ampliable"
target="_blank" href=“CARPETA EN LA QUE SE ENCUENTRA LA
IMAGEN CON EL CONTENIDO/TÍTULO Y TIPO DE
IMAGEN.htm"><img src=“CARPETA EN LA QUE SE MUESTRA LA
IMAGEN CON EL CONTENIDO/TÍTULO Y TIPO DE IMAGEN"
alt=""></a></p><p class="centrado"><a title="Ampliar imagen"
class="ampliable" target="_blank" href="imagenes/aviso-
modalpng.htm"><img src="imagenes/aviso-modal.png"
alt=""></a><br><a title="Ampliar imagen" class="ampliable"
target="_blank" href="imagenes/aviso-modal.htm"></a></p>
</div>
</div>
</div>

Ejemplo
Los texto mostrados en turquesa “imagenes/aviso-modal.png”
<div id="1" class="panel" > corresponden a una imagen que se incluye siempre en la carpeta
<div class="cont"> “imágenes” y que, por criterio se muestra en la parte final de todas
<div class="contcerrar"> las ventanas emergentes, por lo que no deben manipular esa
<img title="Cerrar" class="crr" src="css/img/cerrar.jpg"> referencia.
</div>
<div class="caja" > Recomiendo que el contenido a mostrar, dentro de una ventana
<p><strong>Logísticos</strong></p> emergente, se muestre mediante una imagen, cuya estructura del
contenido se haga en un programa como power point o illustrator.

Etiqueta para descargas
Pueden incluirse descargas de materiales complementarios dentro
de una página HTML o dentro de una ventana emergente. En
ambos se abrirá una etiqueta “div” con un atributo de “descarga”.
En ella se colocará la ruta en la que se encuentra el material a
descargar (este puede ser en formato pdf o png), así como el texto
que tendrá el atributo de “botón”. Puede incluir un texto que
indique lo que se va a descargar.
<div class="descarga"><p>TEXTO
CONECTOR</p><p><strong><a
onClick="tamanoIframe('300%');" target="_blank"
href=“CARPETA EN LA QUE SE ENCUENTRA EL ARCHIVO/NOMBRE
Y TIPO DE ARCHIVO">TÍTULO DEL DOCUMENTO A DESCARGAR Y
QUE SERÁ QUIEN TENGA LA FUNICÓN DE BOTÓN</a>
</strong></p></div>
Ejemplo
<div class="descarga"><p>A continuación se muestra una
síntesis de lo estudiado en:</p><p><strong><a
onClick="tamanoIframe('300%');" target="_blank"
href="enlaces/Info_T1_U1_COVID19TSPM.pdf">Tema 1. Gestión
para la prevención y control de COVID-19 en unidades
médicas</a> </strong></p></div>
Por cuestiones de organización, todos los materiales que se
descarguen deben incluirse en la carpeta “enlaces”, cuya ruta es la
siguiente:
SCO_Tema - sco - content - 05_desktop – enlaces
El formato de los materiales descargables deberá ser PDF.
Cuando se desee incluir un material descargable en una ventana
emergente, el código a utilizar será el mismo, pero deberá
localizarse, en el código de la ventana emergente, antes de indicar
la aparición de la imagen “aviso-modal.png” y después de la
imagen que muestra el contenido de estudio..
Así mismo, el color de fuente del texto conector deberá cambiar a
“black”; para ello se recurrirá al atributo “style="color:black“.
<div id=“1" class="panel" >
<div class="cont">
<div class="contcerrar">
<img title="Cerrar" class="crr" src="css/img/cerrar.jpg">
</div>
<div class="caja" >
<p><strong>Logísticos</strong></p>
<p class="centrado"><a title="Ampliar imagen" class="ampliable"
target="_blank" href="imagenes/image26png.htm"><img
src="imagenes/image26.png" alt=""></a></p>
<div class="descarga"><p style="color: black">A continuación se
muestra una síntesis de lo estudiado en:</p><p><strong><a
onClick="tamanoIframe('300%');" target="_blank"
href="enlaces/Info_T1_U1_COVID19TSPM.pdf">Tema 1. Gestión
para la prevención y control de COVID-19 en unidades
médicas</a> </strong></p></div>
<p class="centrado"><a title="Ampliar imagen" class="ampliable"
target="_blank" href="imagenes/aviso-modalpng.htm"><img
src="imagenes/aviso-modal.png" alt=""></a><br><a
title="Ampliar imagen" class="ampliable" target="_blank"
href="imagenes/aviso-modal.htm"></a></p>
</div>
</div>
</div>

Adecuaciones
específicas a páginas
Como todo Objeto Virtual de Aprendizaje (OVA), éste cuenta con
una serie de pantallas que son indispensables, y cuya estructura es
continua. Entre estas pantallas se encuentran.
• Tema (bienvenida).
• Objetivo.
• Actividad.
• Fin del tema.
• Bibliografía.
• Glosario.
• Créditos.
• IMSS (página de los derechos de autor).
Por esta razón las adecuaciones a sus códigos son mínimas, y
siempre cumplen con los mismos elementos. A continuación se
indican los ajustes a realizar en los códigos de cada una de ellas.
Tema (bienvenida)
En esta página HTML se muestra el texto estandarizado “Le damos
la más cordial bienvenida al tema: NOMBRE DEL TEMA”, y
posteriormente una imagen reforzadora del mismo.
El nombre del tema siempre se mostrará en un título con etiqueta
“h5”.
Por esta razón el código a mostrar siempre será:
<p class="centrado">Le damos la más cordial bienvenida al
tema:</p><p><h5 class="centrado">NOMBRE DEL
TEMA</h5></p><p class="centrado"><a title="Ampliar imagen"
class="ampliable" target="_blank" href=“CARPETA EN DONDE SE
LOCALIZA LA IMAGEN/NOMBRE DE LA IMAGEN.htm"><img
src=“CARPETA EN DONDE SE LOCALIZA LA IMAGEN/NOMBRE Y
TIPO DE LA IMAGEN" alt=""></a></p>
Ejemplo
<p class="centrado">Le damos la más cordial bienvenida al
tema:</p><p><h5 class="centrado">Gestión para la prevención
y control de COVID-19 en unidades médicas</h5></p><p
class="centrado"><a title="Ampliar imagen" class="ampliable"
target="_blank" href="imagenes/image50.htm"><img
src="imagenes/image50.png" alt=""></a></p>
Objetivo
En esta página HTML se muestra el texto estandarizado “Al
finalizar el tema, usted será capaz de:” y posteriormente el
objetivo, que suele mostrarse en imagen.
Por esta razón el código a mostrar siempre será:
<p class="centrado">Al finalizar el tema, usted será capaz
de:</p><p class="centrado"><a title="Ampliar imagen"
class="ampliable" target="_blank" href=“CARPETA EN LA QUE SE
LOCALIZA LA IMAGEN/TÍTULO DE LA IMAGEN.htm"><img
src=“CARPETA EN LA QUE SE LOCALIZA LA IMAGEN/TÍTULO Y
TIPO DE IMAGEN" alt=""></a></p>
Ejemplo
<p class="centrado">Al finalizar el tema, usted será capaz
de:</p><p class="centrado"><a title="Ampliar imagen"
class="ampliable" target="_blank"
href="imagenes/image1.htm"><img src="imagenes/image1.png"
alt=""></a>

Actividad
El código para la “programación” de las preguntas es más extenso.
Para su explicación, su código se dividirá en:
• Presentación de instrucciones (imagen).
• Presentación de preguntas y opciones de respuesta.
• Presentación de realimentaciones.
• Programación de respuestas correctas.
Para incluir las instrucciones de la actividad, se hará uso de una
imagen. Para ello se utilizará en primera instancia el siguiente
código:
<p class="centrado"><a title="Ampliar imagen" class="ampliable"
target="_blank" href=“CARPETA EN LA QUE SE LOCALIZA LA
IMAGEN/TÍTULO DE LA IMAGEN.htm"><img src=“CARPETA EN LA
QUE SE LOCALIZA LA IMAGEN/TÍTULO Y TIPO DE IMAGEN"
alt=""></a></p>
Ejemplo
<p class="centrado"><a title="Ampliar imagen" class="ampliable"
target="_blank" href="imagenes/image59png.htm"><img
src="imagenes/image59.png" alt=""></a></p>
Para la presentación de las preguntas y opciones de respuesta se
utilizará una etiqueta de formulario “form”, en el cual, cada opción
de respuesta corresponderá a una etiqueta “p” y la correcta se
señalará mediante un atributo “class=“correcta”. El código se
estructurará de la siguiente manera:
<form id="myform">
<!--Inicio Pregunta NÚMERO DE LA PREGUNTA-->
<p><strong>NÚMERO Y PREGUNTA</strong></p>
<div style="width:400px;float:left;">
<p><input type="radio" name="preguntaNÚMERO" value="A"
class="radial"><strong>a) </strong>OPCIÓN DE
RESPUESTA.<br/></p>
<p class="correcta"><input type="radio"
name="preguntaNÚMERO" value="B" class="radial"><strong>b)
</strong>OPCIÓN DE RESPUESTA.<br /><p>
<p><input type="radio" name="preguntaNÚMERO" value="C"
class="radial"><strong>c) </strong>OPCIÓN DE
RESPUESTA.<br/></p>
<p><input type="radio" name="preguntaNÚMERO" value="D"
class="radial"><strong>d) </strong>OPCIÓN DE
RESPUESTA.<br/></p>
</div>
<!--Fin Pregunta NÚMERO DE LA PREGUNTA-->
Ejemplo
<form id="myform">
<!--Inicio Pregunta 1-->
<p><strong>1. ¿Cuál de los siguientes pacientes se debe
considerar de alto riesgo para el desarrollo de complicaciones por
COVID-19?</strong></p>
<div style="width:400px;float:left;">
<p><input type="radio" name="pregunta1" value="A"
class="radial"><strong>a) </strong>Femenino de 4 años sin
enfermedades crónicas.<br/></p>
<p class="correcta"><input type="radio" name="pregunta1"
value="B" class="radial"><strong>b) </strong>Masculino de 39
años con obesidad grado III.<br /><p>
<p><input type="radio" name="pregunta1" value="C"
class="radial"><strong>c) </strong>Femenino de 28 años con
ingesta crónica de antidepresivos.<br/></p>
<p><input type="radio" name="pregunta1" value="D"
class="radial"><strong>d) </strong>Masculino de 55 años que
labora como enfermero.<br/></p>
</div>
<!--Fin Pregunta 1-->
Como pueden observar, en este ejemplo, la opción B es la opción
correcta, el atributo “class=“correcta” se debe incluir sólo en la
etiqueta “p” de la opción de respuesta que sea la adecuada.
Ten en cuenta
Sin embargo, aún es necesario confirmar que la
opción señalada con el atributo “class=“correcta” es
la opción adecuada; para ello se debe señalar
nuevamente más adelante.
Una vez presentada la pregunta, sus opciones de respuesta y
señalada en un primer momento la opción correcta, se debe
señalar la realimentación a mostrar. Para ello se recurrirá a la
presentación de la realimentación mediante una imagen. El código
a utilizar será el siguiente:
<!--Inicio Resultado Pregunta NÚMERO-->
<div id="preguntaNÚMEROCorrecta" class="resultado">
<img style="width:500px" src=“CARPETA EN LA QUE SE
LOCALIZA LA IMAGEN/TÍTULO Y TIPO DE IMAGEN"/>
</div>
<div id="preguntaNÚMEROIncorrecta" class="resultado">
<img style="width:500px" src=“CARPETA EN LA QUE SE
LOCALIZA LA IMAGEN/TÍTULO Y TIPO DE IMAGEN"/>
</div>
<div style="clear: both"></div><br/><hr/><br/>
<!--Fin Resultado Pregunta NÚMERO-->
Ejemplo
<!--Inicio Resultado Pregunta 1-->
<div id="pregunta1Correcta" class="resultado">
<img style="width:500px" src="imagenes/correcto1.png"/>
</div>
<div id="pregunta1Incorrecta" class="resultado">
<img style="width:500px" src="imagenes/incorrecto.png"/>
</div>
<div style="clear: both"></div><br/><hr/><br/>
<!--Fin Resultado Pregunta 1-->
Recomendaciones para el manejo de imágenes de las
realimentaciones.
• Sólo guarden, en la carpeta “imágenes”, una imagen para la
realimentación incorrecta. De esta manera, para todas las
realimentaciones incorrectas de todas las preguntas siempre se
utilizará la misma imagen. De esta forma se optimiza el peso del
paquete SCO.
• Para las realimentaciones correctas, se debe guardar una
imagen por cada pregunta.
Por último, y una vez que se han mostrados todas las preguntas,
opciones de respuesta y realimentaciones, se procede a validar las
opciones de respuesta correcta por cada pregunta, es decir, las
variables se corroboran. Para ellos se hará uso del siguiente
código:
$(window).load(function() {
$(".resultado").hide();
});
var conteo=0;
$( "#evaluar" ).click(function() {
$("#evaluar").hide();
$(".radial").hide();
$(".correcta").css("color","#425662");
Este código no se altera, debe permanecer como se muestra.
Posteriormente, se muestran las variables por cada pregunta,
mismas que deben coincidir con la opción de respuesta correcta
que se señaló en la etiqueta “p” de la opción de respuesta
correspondiente de cada pregunta, mediante el atributo
“class=“correcta”
//Inicio Pregunta NÚMERO retroalimentación
if($('#myform
input[name=preguntaNÚMERO]:checked').val()===“LETRA DEL
INCISO CON LA OPCIÓN CORRECTA"){//Correcto
$("#preguntaNÚMEROCorrecta").show(); //show es mostrar
conteo++;
}
else{//Incorrecto
$('#myform
input[name=preguntaNÚMERO]:checked').parent().css( "color",
"#425662" );
$("#pregunta1Incorrecta").show();
} El código a utilizar será el siguiente:
//Fin Pregunta NÚMERO retroalimentación
Ejemplo
//Inicio Pregunta 1 retroalimentación
if($('#myform
input[name=pregunta1]:checked').val()==="B"){//Correcto
$("#pregunta1Correcta").show(); //show es mostrar
conteo++;
} onClick="tamanoIframe('300%');" target="_blank"
else{//Incorrecto
$('#myform input[name=pregunta1]:checked').parent().css(
"color", "#425662" );
$("#pregunta1Incorrecta").show();
} Ejemplo
//Fin Pregunta 1 retroalimentación
De esta manera se concluye con la presentación y programación
del formulario.
Fin del tema
En esta pantalla se muestra el texto estandarizado que indica al
alumno que cumplió satisfactoriamente con el objetivo y estudio
del tema, y se le invita a descargar la infografía correspondiente.
Para ello se hace uso de una imagen que muestra de manera
atractiva visualmente el mensaje al alumno y de un div con
atributo de “descarga”, mediante el cual se proporciona la
infografía descargable.
<p class="centrado"><a title="Ampliar imagen" class="ampliable"
target="_blank" href=“CARPETA EN DONDE SE LOCALIZA LA
IMAGEN/TÍTULO DE LA IMAGEN.htm"><img src="CARPETA EN
DONDE SE LOCALIZA LA IMAGEN/TÍTULO Y TIPO DE IMAGEN"
alt=""></a></p>
<div class="descarga"><p>TEXTO
CONECTOR</p><p><strong><a
href=“CARPETA EN DONDE SE LOCALIZA EL ARCHIVO/TÍTULO Y
TIPO DE ARCHIVO">TÍTULO DEL ARCHIVO QUE TENDRÁ FUNCIÓN
DE BOTÓN</a> </strong></p></div>
<p class="centrado"><a title="Ampliar imagen" class="ampliable"
target="_blank" href="imagenes/image64.htm"><img
src="imagenes/image64.png" alt=""></a></p>
<div class="descarga"><p>A continuación se muestra una
síntesis de lo estudiado en:</p><p><strong><a
onClick="tamanoIframe('300%');" target="_blank"
href="enlaces/Info_T1_U1_COVID19TSPM.pdf">Tema 1. Gestión
para la prevención y control de COVID-19 en unidades
médicas</a> </strong></p></div>
Al igual que todos los materiales descargables que se incluyan a
los largo del SCO del tema, el tipo de archivo de la infografía
deberá ser PDF.
 Ejemplo

<li style="word-wrap: break-word;">Dirección General de Calidad

y Educación en Salud. Triage respiratorio en atención primaria.
[Internet]. México: SEGOB; 2020. Disponible en: <a
target="_blank"
href="https://cutt.ly/zt1M1mq">https://cutt.ly/zt1M1mq</a></li
>

Bibliografía

La bibliográfica comenzára con una etiqueta “ol” de lista numérica,

para ello, como atributo se le indica que comenzará la lista con 1
“start=1”.

<ol start="1">

Posteriormente se colocan tantos ítems “li” como referencias

bibliográficas se incluyan en el apartado “Bibliografía” del guion
narrativo (GN).
Como pueden observar, en el segundo código, la liga de internet
Existen dos códigos distintos para cada ítem “li”. Uno de ellos
que se proporciona en la referencia bibliográfica del GN, se coloca
corresponde a las referencias bibliográficas de libros, publicaciones
dos veces, estos se debe a que en una primera referencia se indica
o artículos que no fueron tomados de la web, por lo que carecen
la referencia, es decir, el código indica que se deberá abrir una
de la indicación “Disponible en:”.
nueva ventana de internet con la dirección que se le proporciona, y
en la segunda indicación se señala que, al dar clic en esa liga, se
<li style="word-wrap: break-word;">REFERENCIA BIBLOGRÁFICA
abrirá la ventana de internet correspondiente.
</li>

Ejemplo Glosario

<li style="word-wrap: break-word;">Dirección General de Calidad

y Educación en Salud. Triage respiratorio en atención primaria.
Para la estructura del glosario se utiliza únicamente la eqtiqueta
México: SEGOB; 2020. </li>
“p” y como atributo la etiqueta “strong”.

Todos los conceptos deberán mostrar la segunda etiqueta:

Mientras que los segundos sí muestran la liga de la página web
<p><strong>CONCEPTO</strong></p>
consultada.
Ejemplo
<li style="word-wrap: break-word;">REFERENCIA BIBLIOGRÁFICA
Disponible en: <a target="_blank" href=“LIGA DE
<p><strong>Caso confirmado de COVID-19</strong<</p>
INTERNET">LIGA DE INTERNET</a></li>
Mientras que la definición del concepto, únicamente se mostrará
entre etiquetas “p:

<p>DEFINICIÓN</p>

Ejemplo

<p>Persona que cumpla con la definición operacional de caso

sospechoso y que cuente con diagnóstico de laboratorio
confirmado por la Red Nacional de Laboratorios de Salud Pública
reconocidos por el InDRE.</p>

Cabe mencionar, que algunos términos de la definición pueden

solicitarse en cursivas o en negritas, por lo que se haría uso de las
etiquetas correspondientes para afectar dichos términos (strong, i,
etcétera).

Créditos
IMSS
Los créditos usualmente se colocan en imagen; esto para tener la
facilidad de dar una presentación visual de los mismos; por esta
Esta página contiene un mensaje estandarizado de la División de
razón siempre se usará una etiqueta para insertar imagen.
Innovación Educativa, en el cual se estipula el uso y finalidad de
estos materiales educativos.
<p class="centrado"><a title="Ampliar imagen" class="ampliable"
target="_blank" href=“CARPETA EN LA QUE SE LOCALIZA LA
En el código de dicha página no debe modificarse nada (excepto
IMAGEN/TÍTULO DE LA IMAGEN.htm"><img src=“CARPETA EN LA
los títulos del tema, lo cuál veremos más adelante).
QUE SE LOCALIZA LA IMAGEN/TÍTULO Y TIPO DE IMAGEN"
alt=""></a></p>
Sólo en caso de proponer plecas para las instrucciones, que sean
específicas para el curso a desarrollar, se sustituirá la imagen de la
Ejemplo
pleca con la instrucción “Dé clic en Salir del menú para cerrar el
tema.”
<p class="centrado"><a title="Ampliar imagen" class="ampliable"
target="_blank" href="imagenes/image67png.htm"><img
src="imagenes/image67.png" alt=""></a></p>

Esta imagen se sustituiría en la siguiente carpeta:

SCO_Tema - sco - content - 05_desktop – css - img

El archivo a sustituir sería “fintema” (no cambiar el nombre de este

archivo.
 Para incluir cintillos en los títulos de las pantallas
En lugar de colocar el nombre de la pantalla en texto, se puede
incluir la imagen del cintillo a utilizar con el texto correspondiente.
Para ello se debe ajustar el código de la siguiente manera:
< div class="texto"><h3>< img src="CARPETA EN LA QUE SE
LOCALIZA LA IMAGEN/TÍTULO DE LA IMAGEN.png”
alt="Bienvenida"></ h3><div class="diapositiva">
Ejemplo
<div class="texto"><h3><img src="imagenes/cintillo1.png"
alt="Bienvenida"></h3><div class="diapositiva">
Código para incluir vídeo
Para incrustar un vídeo en una página, se procederá a utilizar el
siguiente código:
<br clear="all">
<div style="position:relative; border:red 0px solid; width:100%,
height:100%; display: flex; justify-content: center; " >
<iframe width="560" height="315"
src="https://www.youtube.com/embed/hNoJPXHfd6k"
frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
En este código sólo se modificará la información señalada en rojo y
negritas. Dicha información la proporciona el equipo multimedia
una vez que ha colocado el vídeo en la plataforma youtube.

Códigos que deben permanecer en
todas las páginas HTML
Todas las páginas HTML, deben contener un listado de códigos
genéricos, que son los que permiten que el material corra
adecuadamente, se vincule entre sí y reporte el avance del alumno
en la plataforma institucional.
Estos códigos no deben eliminarse y sólo se modificarán puntos
muy específicos como son el nombre del tema, los nombres de las
secciones, la secuencia de la estructura del material educativos (la
secuencia lineal de las páginas), el tamaño del div de contenido y
la navegación mediante los botones “Anterior” y “Siguiente”.
Para su descripción, tales secuencias de código se agruparán de la
siguiente manera:
A /><p></p></div><div class="modulo"><div
B
C
D content="IE=edge,chrome=1"><title>Tema 1. Gestión para la
Dentro de estos bloques se encuentran el uso de los títulos
de primero y segundo nivel.
Grupo A
En este código se abre la indicación que se trata de un archivo
HTML, se abre nuestro “body” (todo lo que integrará la página
HTML) y algunos div. En él, sólo modificaremos el nombre de la
sección de la página y el nombre del tema.
<!DOCTYPE html><html lang="es"><head><meta charset="UTF-
8" /><meta http-equiv="X-UA-Compatible"
content="IE=edge,chrome=1"><title>NOMBRE DE LA
PÁGINA</title><meta name="viewport" content="width=device-
width, initial-scale=1.0"><meta name="description"
content="Material generado con CourseMedia propiedad de Felipe
Samblás Miras - todos los derechos reservados" /><meta
name="keywords" content="CourseMedia" /><meta
name="author" content="Felipe Samblás Miras" /><link
rel="stylesheet" type="text/css" href="css/estilo.css"><link
rel="stylesheet" type="text/css" href="css/esquema.css"><script
type="text/javascript"
src="js/modernizr.custom.04022.js"></script><script
src="js/jquery-1.10.2.js" type="text/javascript"></script><script
src="js/cm-ajuste.js" type="text/javascript"></script><script
src="api.js" type="text/javascript"
language="JavaScript"></script><script src="scormapi.js"
type="text/javascript" language="JavaScript"></script><script
type="text/javascript" language="JavaScript">var scoreMin =
0;var scoreMax = 0;var masteryScore = 0;var questionCount =
0;var questionScores = new Array(questionCount +
1);initArray(questionScores,0);</script><script>parent.liberar();
</script></head><body onload="loadPage()"
onunload="unloadPage()" onbeforeunload="unloadPage()"><div
class="fondo">&nbsp;</div><div class="fnd fondoimss"><div
class="cabecera"><div class="logo"><img alt=""
class="imagenlogo" src ="css/img/logoecm00.png"
class="cabecera1">&nbsp;</div><h1>NOMBRE DEL
TEMA</h1><div class="cabecera3">&nbsp;</div>
Ejemplo
<!DOCTYPE html><html lang="es"><head><meta charset="UTF-
8" /><meta http-equiv="X-UA-Compatible"
prevención y control de COVID-19 en unidades
médicas</title><meta name="viewport" content="width=device-
width, initial-scale=1.0"><meta name="description"
content="Material generado con CourseMedia propiedad de Felipe
Samblás Miras - todos los derechos reservados" /><meta
name="keywords" content="CourseMedia" /><meta
name="author" content="Felipe Samblás Miras" /><link
rel="stylesheet" type="text/css" href="css/estilo.css"><link
rel="stylesheet" type="text/css" href="css/esquema.css"><script
type="text/javascript"
src="js/modernizr.custom.04022.js"></script><script
src="js/jquery-1.10.2.js" type="text/javascript"></script><script
src="js/cm-ajuste.js" type="text/javascript"></script><script
src="api.js" type="text/javascript"
language="JavaScript"></script><script src="scormapi.js"
type="text/javascript" language="JavaScript"></script><script
type="text/javascript" language="JavaScript">var scoreMin =
0;var scoreMax = 0;var masteryScore = 0;var questionCount =
0;var questionScores = new Array(questionCount +
1);initArray(questionScores,0);</script><script>parent.liberar();
</script></head><body onload="loadPage()"
onunload="unloadPage()" onbeforeunload="unloadPage()"><div
class="fondo">&nbsp;</div><div class="fnd fondoimss"><div
class="cabecera"><div class="logo"><img alt=""
class="imagenlogo" src ="css/img/logoecm00.png"
/><p></p></div><div class="modulo"><div
class="cabecera1">&nbsp;</div><h1>Tema 1. Gestión para la
prevención y control de COVID-19 en unidades médicas</h1><div
class="cabecera3">&nbsp;</div>
Grupo B
En este código se indica la estructura o el esquema de
organización del SCO, es decir, se indica la secuenciación de las
páginas HTML que conforman este material. En él debemos colocar
el nombre del archivo y el título de la página.
Este código debe modificarse, sólo cuando se ha terminado
de estructurar todas las páginas HTML y se conoce la
secuencia y el título de las páginas.
<!--<h2>NOMBRE DEL TEMA</h2>--><p><a title="Ver en PDF"
href="TemaPDF.pdf" target="_blank"><img alt="Ver en PDF"
src="css/img/pdf.jpg"></a></p><div class="cnmenu"><img
title="Mostrar menú" alt="Mostrar menú" class="omenu oculto"
src="css/img/menu_cerrado.jpg" /></div></div></div><div
class="izquierda"><div class="aliz"><img title="Ocultar menú"
alt="Ocultar menú" class="omenu btnmenu1"
src="css/img/menu_abierto.jpg"/></div><ul
class="mvertical"><li><a href=“NOMBRE DE LA PÁGINA CON
TERMINACIÓN HTML">NOMBRE DE LA SECCIÓN</a></li><li><a
href=" objetivo">Objetivo</a></li><li><a href="
presentacion">Presentación</a></li><li><a href=" NOMBRE
DE LA PÁGINA CON TERMINACIÓN HTML "
class="subelemento">NOMBRE DE LA SECCIÓN</a></li><li><a
href="actividad.html" class="subelemento">Actividad de
aprendizaje</a></li><li><a href="conclusion.html"
class="subelemento">Conclusión</a></li>
<li><a href="findeltema.html" class="subelemento">Fin del
tema</a></li><li><a href="bibliografia.html"
class="subelemento">Bibliografía</a></li><li><a
href="glosario.html"
class="subelemento">Glosario</a></li><li><a
href="creditos.html"
class="subelemento">Créditos</a></li><li><a
href="imss.html"
class="subelemento">Aviso</a></li></ul></div><div
class="apartado">
Ejemplo
<!--<h2>Tema 1. Gestión para la prevención y control de COVID-
19 en unidades médicas</h2>--><p><a title="Ver en PDF"
href="TemaPDF.pdf" target="_blank"><img alt="Ver en PDF"
src="css/img/pdf.jpg"></a></p><div class="cnmenu"><img
title="Mostrar menú" alt="Mostrar menú" class="omenu oculto"
src="css/img/menu_cerrado.jpg" /></div></div></div><div
class="izquierda"><div class="aliz"><img title="Ocultar menú"
alt="Ocultar menú" class="omenu btnmenu1"
src="css/img/menu_abierto.jpg"/></div><ul
class="mvertical"><li><a href="tema1.html">Tema 1. Gestión
para la prevención y control de COVID-19 en unidades
médicas</a></li><li><a
href="objetivo.html">Objetivo</a></li><li><a
href="presentacion.html">Presentación</a></li><li><a
href="subtema1.html" class="subelemento">Subtema
1</a></li><li><a href="apartado1.html"
class="subelemento">Apartado 1</a></li><li><a
href="subtema2.html" class="subelemento">Subtema
2</a></li><li><a href="subtema3.html"
class="subelemento">Subtema 3</a></li><li><a
href="actividad.html" class="subelemento">Actividad de
aprendizaje</a></li><li><a href="conclusion.html"
class="subelemento">Conclusión</a></li><li><a
href="findeltema.html" class="subelemento">Fin del
tema</a></li><li><a href="bibliografia.html"
class="subelemento">Bibliografía</a></li><li><a
href="glosario.html"
class="subelemento">Glosario</a></li><li><a
href="creditos.html"
class="subelemento">Créditos</a></li><li><a
href="imss.html"
class="subelemento">Aviso</a></li></ul></div><div
class="apartado">

Grupo C
Este grupo de código, indica el div en el que se incluirá el
contenido, es decir, dentro de este div quedarán todas las
etiquetas de recursos de párrafos, imágenes, interactivos,
etcétera. Es por ello que sólo se modificará el nombre de la
sección.
<div class="texto"><h3>NOMBRE DE LA SECCIÓN</h3><div
class="diapositiva">
Ejemplo
<div class="texto"><h3>Bienvenida</h3><div
class="diapositiva">
Grupo D
En este grupo de código se da el cierre de muchas etiquetas que
se abrieron en los grupos anteriores. Además, en el se incluyen la
navegación lineal del material (que página GTML va antes y cuál
después).
<p class="centrado"><a title="Ampliar imagen" class="ampliable"
target="_blank" href="imagenes/image67png.htm"><img
src="imagenes/image67.png" alt=""></a></p></div>
<div class="btnav"><a title="Anterior" href=“NOMBRE DEL
ARCHIVO CON TERMINACIÓN. HTML"><img alt="Anterior"
src="css/img/ant.png"></a> <a title="Siguiente" href=“NOMBRE
DEL ARCHIVO CON TERMINACIÓN HTML"><img alt="Siguiente"
src="css/img/sig.png"></a></div></div></div><div
class="pie">Instituto Mexicano del Seguro Social
(IMSS)</div><div class="transparen">&nbsp;</div><script
src="js/produccion.js" type="text/javascript"></script></body>
Ejemplo
<p class="centrado"><a title="Ampliar imagen" class="ampliable"
target="_blank" href="imagenes/image67png.htm"><img
src="imagenes/image67.png" alt=""></a></p></div>
<div class="btnav"><a title="Anterior"
href="apartado2.html"><img alt="Anterior"
src="css/img/ant.png"></a> <a title="Siguiente"
href="conclusion.html"><img alt="Siguiente"
src="css/img/sig.png"></a></div></div></div><div
class="pie">Instituto Mexicano del Seguro Social
(IMSS)</div><div class="transparen">&nbsp;</div><script
src="js/produccion.js" type="text/javascript"></script></body>
Los textos señalados en turquesa hacen referencia a la imagen de
la pleca de instrucción “Dé clic en Siguiente para avanzar”.
Sugiero que esta imagen siempre e corresponda al archivo
“image67.png”. Si desean cambiar el estilo de la pleca, se puede
realizar, sólo sustituyendo el archivo en la carpeta “imágenes”.
La página HTML con el nombre del tema “tema#.html”
(corresponde a la bienvenida), al ser la primera página HTML, sólo
tendrá el botón “Siguiente”:
<p class="centrado"><a title="Ampliar imagen" class="ampliable"
target="_blank" href="imagenes/image67png.htm"><img
src="imagenes/image67.png" alt=""></a></a></p>
</p></div><div class="btnav"><a title="Siguiente"
href="objetivo.html"><img alt="Siguiente"
src="css/img/sig.png"></a></div></div></div><div
class="pie">Instituto Mexicano del Seguro Social
(IMSS)</div><div class="transparen">&nbsp;</div><script
src="js/produccion.js"
type="text/javascript"></script></body></html>
Así mismo, la página HTML “imss”, al ser la última página de la
secuencia, no cuenta con el botón “Siguiente”, y el anterior
siempre llevará a la página “creditos”.
</p><br><a title="Ampliar imagen" class="ampliable"
target="_blank" href="imagenes/fintema.htm"><img
src="css/img/fintema.png" alt=""></a></div></div><div
class="btnav"><a title="Anterior"
href="creditos.html"><img alt="ant.png"
src="css/img/ant.png"></a></div>
</div></div><div class="pie">Instituto Mexicano del Seguro
Social (IMSS)</div><div
class="transparen">&nbsp;</div><script src="js/produccion.js"
type="text/javascript"></script><script src="js/produccion.js"
type="text/javascript"></script></body></html>

Código de estructura
Una vez que se encuentran estructuradas todas las páginas HTML
y vinculadas correctamente mediante los botones de navegación
“Anterior” y “Siguiente”; se procede a indicar la estructura del
paquete SCO para su correcto funcionamiento en la plataforma
institucional. Para ello deberán abrir el archivo XML, con el nombre
“structure”. Este archivo se encuentra en la siguiente ruta:
SCO_Tema - sco – xml – structure
En él se debe modificar el nombre de la Unidad, los títulos de los
archivos HTML que indican la ruta, así como los réditos de los
especialistas y de los diseñadores instruccionales que elaboran el
material. El código es el siguiente:
<tema titulo=“NOMBRE DE LA UNIDAD">
<pagina titulo=“NOMBRE DE LA SECCIÓN" archivo=“NOMBRE DEL
ARCHIVO CON TERMINACIÓN HTML" navegacion="si"
estilo="color" />
<pagina titulo="Objetivo" archivo="objetivo.html"
navegacion="si" estilo="color" />
<pagina titulo="Presentación" archivo="presentacion.html"
navegacion="si" estilo="color" />
<pagina titulo=“NOMBRE DE LA SECCIÓN" archivo=“NOMBRE DEL
ARCHIVO CON TERMINAIÓN HTML" navegacion="si" estilo="color"
/>
<pagina titulo=“NOMBRE DE LA SECCIÓN" archivo=“NOMBRE DEL
ARCHIVO CON TERMINAIÓN HTML" navegacion="si" estilo="color"
/>
<pagina titulo="Actividad de aprendizaje"
archivo="actividad.html" navegacion="si" estilo="color" />
<pagina titulo="Conclusión" archivo="conclusion.html"
navegacion="si" estilo="color" />
<pagina titulo="Fin del tema" archivo="findeltema.html"
navegacion="si" estilo="color" />
<pagina titulo="Bibliografía" archivo="bibliografia.html"
navegacion="si" estilo="color" />
<pagina titulo="Glosario" archivo="glosario.html"
navegacion="si" estilo="color" />
<pagina titulo="Créditos" archivo="creditos.html"
navegacion="si" estilo="color" />
<pagina titulo="IMSS" archivo="imss.html" navegacion="si"
estilo="color" />
</tema>
<glosario>
<palabra titulo="" descripcion=""/>
</glosario>
<creditos>
<!--Autoridades-->
<autoridad nombre="Dra.Carolina del Carmen Ortega Franco"
cargo="Titular de la Coordinación de Educación en Salud"/>
<autoridad nombre="Dra. Ana Laura Cajigas Magaña"
cargo="Titular de la División de Innovación Educativa"/>
<!--Expertos-->
<experto nombre="Dra. Priscila Angélica Montealegre
Ramírez" cargo="Líder Normativo del Proyecto"/>
<experto nombre=“NOMBRE DEL EXPERTO" cargo="Experto
Temático"/>
<!--Equipo-->
<equipo nombre="Dra. Priscila Angélica Montealegre"
cargo="Jefa del Área de Gestión del Conocimiento"/>
<equipo nombre="Dr. Rogelio Jiménez González"
cargo="Coordinador de Diseño Educativo"/>
<equipo nombre="Dra. Carla América González Guzmán"
cargo="Coordinadora de Desarrollo de Contenidos"/>
<equipo nombre="Lic. Mario Mejía Valencia"
cargo="Coordinador de Diseño Pedagógico"/>
<equipo nombre=“NOMBRE DEL DISEÑADOR INSTRUCCIONAL"
cargo="Diseño Instruccional"/>
<equipo nombre="Mtro. Ricardo Mora Torres"
cargo="Coordinador de Integración y Diseño Gráfico"/>
<equipo nombre="Lic. Felipe Ezequiel Soto Barraza"
cargo="Coordinador de Calidad y Estilo"/>
<equipo nombre=“NOMBRE DEL CORRECTOR DE ESTILO"
cargo="Corrección de Estilo"/>
</creditos>
<bibliografias>
<bibliografia referencia=""/>
</bibliografias>
Ejemplo
<tema titulo="Temas selectos de prevención de COVID-19">
<pagina titulo="Tema 1. Gestión para la prevención y control de
COVID-19 en unidades médicas" archivo="tema1.html"
navegacion="si" estilo="color" />
<pagina titulo="Objetivo" archivo="objetivo.html"
navegacion="si" estilo="color" />
<pagina titulo="Presentación" archivo="presentacion.html"
navegacion="si" estilo="color" />
<pagina titulo="Subtema. Área de Triage respiratorio"
archivo="subtema1.html" navegacion="si" estilo="color" />
<pagina titulo=" > Apartado 1. Ruta de atención en triage
respiratorio" archivo="apartado1.html" navegacion="si"
estilo="color" />
<pagina titulo="Subtema. Área de Aislamiento"
archivo="subtema2.html" navegacion="si" estilo="color" />
<pagina titulo="Subtema. Gestión del personal de salud"
archivo="subtema3.html" navegacion="si" estilo="color" />
<pagina titulo=" > Apartado 2. Precauciones para evitar brotes
dentro de una Unidad Médica" archivo="apartado2.html"
navegacion="si" estilo="color" />
<pagina titulo="Actividad de aprendizaje"
archivo="actividad.html" navegacion="si" estilo="color" />
<pagina titulo="Conclusión" archivo="conclusion.html"
navegacion="si" estilo="color" />
<pagina titulo="Fin del tema" archivo="findeltema.html"
navegacion="si" estilo="color" />
<pagina titulo="Bibliografía" archivo="bibliografia.html"
navegacion="si" estilo="color" />
<pagina titulo="Glosario" archivo="glosario.html"
navegacion="si" estilo="color" />
<pagina titulo="Créditos" archivo="creditos.html"
navegacion="si" estilo="color" />
<pagina titulo="IMSS" archivo="imss.html" navegacion="si"
estilo="color" />
</tema>
<glosario>
<palabra titulo="" descripcion=""/>
</glosario>
<creditos>
<!--Autoridades-->
<autoridad nombre="Dra. Carolina del Carmen Ortega Franco"
cargo="Titular de la Coordinación de Educación en Salud"/>
<autoridad nombre="Dra. Ana Laura Cajigas Magaña"
cargo="Titular de la División de Innovación Educativa"/>
<!--Expertos-->
<experto nombre="Dra. Priscila Angélica Montealegre
Ramírez" cargo="Líder Normativo del Proyecto"/>
<experto nombre="Dr. Mauricio Franco Posadas" cargo="Experto
Temático"/>
<experto nombre="Dra. Elizabeth García Cortés" cargo="Experta
Temática"/>
<experto nombre="Dr. Raúl Aguilar Espejel" cargo="Experto
Temático"/>
<experto nombre="Dr. Benjamin Alejandro Ramírez Pascualli"
cargo="Experto Temático"/>
<!--Equipo-->
<equipo nombre="Dra. Priscila Angélica Montealegre"
cargo="Jefa del Área de Gestión del Conocimiento"/>
<equipo nombre="Dr. Rogelio Jiménez González"
cargo="Coordinador de Diseño Educativo"/>
<equipo nombre="Dra. Carla América González Guzmán"
cargo="Coordinadora de Desarrollo de Contenidos"/>
<equipo nombre="Lic. Mario Mejía Valencia"
cargo="Coordinador de Diseño Pedagógico"/>
<equipo nombre="Lic. Mariana Cecilia Reyna Arias"
cargo="Diseño Instruccional"/>
<equipo nombre="Mtro. Ricardo Mora Torres"
cargo="Coordinador de Integración y Diseño Gráfico"/>
<equipo nombre="Lic. Felipe Ezequiel Soto Barraza"
cargo="Coordinador de Calidad y Estilo"/>
<equipo nombre="Lic. Haydé Karina Guerra Avelino"
cargo="Corrección de Estilo"/>
</creditos>
<bibliografias>
<bibliografia referencia=""/>
</bibliografias>
Si un subtema o aparado muestra más de una página, entonces se
referenciarán de la siguiente manera:
<pagina titulo="Subtema. Gestión del personal de salud"
archivo="subtema1.html" navegacion="si" estilo="color" />
<pagina titulo="Subtema. Gestión del personal de salud. Página 1"
archivo="subtema1.1.html" navegacion="si" estilo="color" />
<pagina titulo="Subtema. Gestión del personal de salud. Página 2"
archivo="subtema1.2.html" navegacion="si" estilo="color" />
 Consideraciones para la
generación de imágenes
Las imágenes se realizarán considerando los criterios que se
establezcan para cada curso (paleta de colores, elementos visuales
estandarizados, iconos, etcétera); sin embargo se deben tomar a
consideración algunos puntos para la adecuada visualización del
texto que se incluya como imagen.

Tamaño de las imágenes

Al guardar las imágenes de plecas de instrucciones, éstas deben

ser de:

0.91 cm de alto por 8.63 cm de ancho

Lo anterior se debe, a que esta medida se puede ver

Al guardar imágenes de botones, éstas deben ser de:
1.32 cm de alto por 8.04 de ancho
afectada al incluir elementos, como el médico señalando la
caja (en el ejemplo), o cualquier otro elemento que reduzca
el espacio del texto.
Las imágenes que se mostrarán dentro de ventanas emergentes,
tendrán un ancho aproximado de 10.06 cm (el alto no se indica,
pues dependerá de la extensión de la información).

Con respecto a imágenes que correspondan a cajas de texto,

esquemas, o cualquier otro elemento con contenido; se deberá
observar en la página HTML si su visualización es adecuada, y a
partir de ello jugar con el tamaño de la imagen. Para una
referencia de tamaño se podría utilizar la siguiente medida:

8.05 cm de alto por 9.52 de ancho

Las realimentaciones deberán tener una medida de: La imagen de los créditos, deberá tener una medida de:

3.18 cm de alto por 9.24 de ancho 12.81 cm de alto por 6.81 cm de ancho

La imagen del fin del tema, debe ser más amplia pues es el único
elemento que se muestra en la pantalla correspondiente. Debe
tener una medida de:

8.97 cm de alto por 11.13 cm de ancho

Consideraciones

Al utilizar cualquier tipo de imagen, ya sea de personajes, objetos,

espacios, paisajes, etc., se debe trabajar cuidando sus
proporciones; de lo contrario perderá su calidad y se observará
poco estética.
Se alguna imagen se manipulará; es decir, se editará para crear
alguna expresión específica, actitud, postura, etc., se debe cuidar
que la edición sea bien lograda y no se observen detalles que
ocasionen que la imagen una vez más pierda calidad.

No recomiendo utilizar una imagen para colocar imagen a la

izquierda y texto a la derecha, o viceversa; esto porque si el texto
no muestra un fondo de color, pierde nitidez como imagen dentro
de la página HTML.

En ese caso, o bien colocar una caja de texto como fondo de la

imagen, o colocar el texto en la parte superior como código de
HTML y la imagen debajo.