El salón de clases

Blog de apoyo al uso de tecnologías para clases en TecMilenio

Uso de HTML en Blackboard


HTML (HyperText Markup Language) es uno de los “lenguajes” (de los más básicos, por cierto) para mostrar contenidos en WWW. A través de una serie de indicaciones incluídas en el “documento fuente” se da formato al texto que quiero presentar en una página Web.

De esta forma, cuando en el documento o archivo fuente escribo <strong>Fuerte</strong>, el resultado visto desde un navegador de WWW (Firefox, Explorer, Chrome o Safari) será Fuerte (en negritas o “bold”).

Actualmente muchas herramientas de software (Microsoft Office entre ellas), tienen la capacidad de convertir un documento propio en uno de HTML para que éste pueda ser visto desde un navegador de WWW sin la necesidad de contar con el programa en la computadora personal de quien lo ve, o simplemente, para que el nuevo documento convertido pueda ser visto en el WWW. De esta forma y para facilidad nuestra, estas herramientas hacen el trabajo por nosotros y evitan el tedio de colocar y escribir las indicaciones de formato por nuestra cuenta.

El lenguaje HTML, sin embargo, tiene varias versiones y, por si fuera poco, no está 100% estandarizado en la práctica por parte de quienes hacen software. Por ejemplo, en el caso de Word, la compañía Microsoft incluye en la conversión del formato de sus documentos (los que terminan en .doc ó .docx) una serie de instrucciones para mantener compatibilidad con su mismo programa Word. Dichas instrucciones pueden no ser correctamente interpretadas por otros programas, navegadores o servicios.

Así por ejemplo, un archivo salvado en Word, que se vea así en tu computadora:

DOCUMENTO DE PRUEBA.

Este es un documento de prueba, para utilizar los formatos más utilizados al entregar una tarea o publicar un aviso, un foro, una aportación dentro de Blackboard,

Los formatos mayormente utilizados son las negritas, la letra itálica, subrayada, los bullets, los subbullets.

Vamos a ejemplificar cada uno de los formatos para conocer como se traduce a HTML.

Este documento es solo una práctica con  algunos de los formatos disponibles en Microsoft Word.

  • Letras Bold
  • Letras en Itálica
  • Letras Subrayadas
  • · Letras Tachadas
  • · Subíndices
  • · Superíndices

Además se pueden utilizar los Bullets

  • Bullet con símbolo

o   Sub bullet

§  Sub- sub bullet

1. Bullet con número

1.1. Agregando subniveles

1.2. Otro Sub nivel

1.2.1. Un sub- sub nivel

Tiene como documento fuente, lo siguiente, en donde marcamos con color, aquel contenido que no es necesario para desplegar un HTML o bien que puede es interpretado distinto por MS Word (ejemplo los incisos o “bullets” son generados como espacios y no como listas).

<html>

<head>

<meta http-equiv=Content-Type content=”text/html; charset=windows-1252″>

<meta name=Generator content=”Microsoft Word 12 (filtered)”><style> <!– /* Font Definitions */ @font-face {font-family:Wingdings; panose-1:5 0 0 0 0 0 0 0 0 0;}@font-face {font-family:”Cambria Math”; panose-1:2 4 5 3 5 4 6 3 2 4;}@font-face {font-family:Calibri; panose-1:2 15 5 2 2 2 4 3 2 4;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {margin-top:0cm; margin-right:0cm; margin-bottom:10.0pt; margin-left:0cm; line-height:115%; font-size:11.0pt; font-family:”Calibri”,”sans-serif”;}p.MsoListParagraph, li.MsoListParagraph, div.MsoListParagraph {margin-top:0cm; margin-right:0cm; margin-bottom:10.0pt; margin-left:36.0pt; line-height:115%; font-size:11.0pt; font-family:”Calibri”,”sans-serif”;}p.MsoListParagraphCxSpFirst, li.MsoListParagraphCxSpFirst, div.MsoListParagraphCxSpFirst {margin-top:0cm; margin-right:0cm; margin-bottom:0cm; margin-left:36.0pt; margin-bottom:.0001pt; line-height:115%; font-size:11.0pt; font-family:”Calibri”,”sans-serif”;}p.MsoListParagraphCxSpMiddle, li.MsoListParagraphCxSpMiddle, div.MsoListParagraphCxSpMiddle {margin-top:0cm; margin-right:0cm; margin-bottom:0cm; margin-left:36.0pt; margin-bottom:.0001pt; line-height:115%; font-size:11.0pt; font-family:”Calibri”,”sans-serif”;}p.MsoListParagraphCxSpLast, li.MsoListParagraphCxSpLast, div.MsoListParagraphCxSpLast {margin-top:0cm; margin-right:0cm; margin-bottom:10.0pt; margin-left:36.0pt; line-height:115%; font-size:11.0pt; font-family:”Calibri”,”sans-serif”;}.MsoPapDefault {margin-bottom:10.0pt; line-height:115%;}@page WordSection1 {size:612.0pt 792.0pt; margin:70.85pt 3.0cm 70.85pt 3.0cm;}div.WordSection1 {page:WordSection1;} /* List Definitions */ ol {margin-bottom:0cm;}ul {margin-bottom:0cm;}–></style> </head> <body lang=ES-MX>

<div> <p><b><u>DOCUMENTO DE PRUEBA.</u></b></p> <p>&nbsp;</p>

<p>Este es un documento de prueba, para utilizar los formatosmás utilizados al entregar una tarea o publicar un aviso, un foro, unaaportación dentro de Blackboard,</p>

<p>Los formatos mayormente utilizados son las negritas, la letraitálica, subrayada, los bullets, los subbullets.</p> <p>Vamos a ejemplificar cada uno de los formatos para conocercomo se traduce a HTML.</p> <p>&nbsp;</p> <p><b>Este documento es solo una práctica con  algunos de losformatos disponibles en Microsoft Word.</b></p>

<p style=’text-indent:-18.0pt’><spanstyle=’font-family:Symbol’>·<span style=’font:7.0pt “Times New Roman”‘>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></span>

<b>Letras Bold</b></p> <p style=’text-indent:-18.0pt’><spanstyle=’font-family:Symbol’>·<span style=’font:7.0pt “Times New Roman”‘>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></span>

<i>Letras en Itálica</i></p>

<p style=’text-indent:-18.0pt’><spanstyle=’font-family:Symbol’>·<span style=’font:7.0pt “Times New Roman”‘>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></span><u>Letras Subrayadas</u></p>

<p style=’text-indent:-18.0pt’><s><spanstyle=’font-family:Symbol’>·<span style=’font:7.0pt “Times New Roman”‘>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></span></s><s>Letras Tachadas</s></p>

<p style=’text-indent:-18.0pt’><sub><spanstyle=’font-family:Symbol’>·<span style=’font:7.0pt “Times New Roman”‘>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></span></sub>

<sub>Subíndices</sub></p> <p style=’text-indent:-18.0pt’><sup><spanstyle=’font-family:Symbol’>·<span style=’font:7.0pt “Times New Roman”‘>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></span></sup>

<sup>Superíndices</sup></p> <p style=’margin-left:18.0pt’>&nbsp;</p> <p>

<i>Además se pueden utilizar los Bullets</i></p>

<p style=’text-indent:-18.0pt’><spanstyle=’font-family:Symbol’>·<span style=’font:7.0pt “Times New Roman”‘>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></span>

<b>Bullet con símbolo</b></p> <p style=’margin-left:72.0pt;text-indent:-18.0pt’><spanstyle=’font-family:”Courier New”‘>o<span style=’font:7.0pt “Times New Roman”‘>&nbsp;&nbsp;</span></span>

<b>Sub bullet</b></p> <p style=’margin-left:108.0pt;text-indent:-18.0pt’><span style=’font-family:Wingdings’>§<span style=’font:7.0pt “Times New Roman”‘>&nbsp;</span></span>

<b>Sub- sub bullet</b></p> <p style=’text-indent:-18.0pt’><i>1.<spanstyle=’font:7.0pt “Times New Roman”‘>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></i>

<i>Bullet con número</i></p> <p style=’margin-left:57.6pt;text-indent:-21.6pt’>

<i>1.1.<spanstyle=’font:7.0pt “Times New Roman”‘>&nbsp;&nbsp;&nbsp; </span></i><i>Agregandosubniveles</i></p>

<p style=’margin-left:57.6pt;text-indent:-21.6pt’>

<i>1.2.<spanstyle=’font:7.0pt “Times New Roman”‘>&nbsp;&nbsp;&nbsp; </span></i>

<i>Otro Subnivel</i></p> <p style=’margin-left:79.2pt;text-indent:-25.2pt’>

<i>1.2.1.<spanstyle=’font:7.0pt “Times New Roman”‘> </span></i>

<i> Un sub- sub nivel</i></p> <p>&nbsp;</p>

<p>&nbsp;</p> </div> </body> </html>

De esta forma, es posible que el resultado de copiar directamente el archivo en HTML o bien directo de Word a Blackboard pueda ser visto de la siguiente forma (incluso distintos navegadores pueden distorsionar algunos formatos al interpretar el HTML resultante). En lo general, los problemas más comunes se dan con el manejo de listas, sobre todo si son numeradas y a múltiples niveles, así como el espacio entre las líneas de texto y entre párrafos, además de la visualización de los “bullets” (nótese que están fuera del texto).

<!–

–>

DOCUMENTO DE PRUEBA.

Este es un documento de prueba, para utilizar los formatos
más utilizados al entregar una tarea o publicar un aviso, un foro, una
aportación dentro de Blackboard,

Los formatos mayormente utilizados son las negritas, la letra
itálica, subrayada, los bullets, los subbullets.

Vamos a ejemplificar cada uno de los formatos para conocer
como se traduce a HTML.

Este documento es solo una práctica con algunos de los
formatos disponibles en Microsoft Word.

  • ·
    Letras Bold
  • ·
    Letras en Itálica
  • ·
    Letras Subrayadas
  • ·
    Letras Tachadas
  • ·
    Subíndices
  • ·
    Superíndices

Además se pueden utilizar los Bullets

  • ·
    Bullet con símbolo

o
Sub bullet

§
Sub- sub bullet

1. Bullet
con número

1.1. Agregando
subniveles

1.2. Otro Sub
nivel

1.2.1. Un sub- sub nivel

Con Office 2007, 2008 (Mac), 2010 y 2011 (Mac) se cuenta con la opción de generar, desde Word, archivos HTML “filtrados”, es decir, sin las instrucciones adicionales que normalmente incorporaría Microsoft, esto en la práctica tiene algunas implicaciones:

  • Los documentos conservan mejor el formato respecto al documento Word original, sin embargo siguen presentándose cambios en los bullets
  • Los tipos de letra por lo general se conservan así como las definiciones de colores
  • Sigue habiendo afectación en el espacio entre líneas de texto así como entre párrafos
  • En el caso de dispositivos móviles (iPod Touch, iPhone, etc.) la visualización de documentos HTML filtrados es más lenta en comparación con un documento HTML sin filtrar
  • Es posible copiar directamente desde Word y pegar en Blackboard, sin trabajar con HTML, sin embargo dependiendo de la complejidad del contenido (manejo de tablas muy grandes o que incluyan tablas dentro de tablas, documentos muy extensos, etc.) se podrían experimentar problemas en la visualización, especialmente en el caso de los dispositivos móviles

Dada esta situación tenemos algunas recomendaciones:

  1. Cuando el contenido que requieras incluir no exista previamente, esto es, lo vayas a incluir partiendo de cero en la plataforma y se trate de poca información (por ejemplo, menos de una cuartilla) lo recomendable es trabajar directamente con el editor de la plataforma.
  2. En el caso de que el contenido a incluir sea extenso, la recomendación es optar por trabajar con un editor de HTML
  3. Dado el incremento en el uso de dispositivos móviles, te recomendamos que el contenido en HTML que incorpores sea lo menos complejo posible, es decir, en la medida de lo posible no incluir tablas dentro de tablas, en caso de utilizar imágenes buscar que no sean demasiado grandes
  4. Evitar en la medida de lo posible generar HTML desde Word

 

Artículos relacionados

2 Respuestas a “Uso de HTML en Blackboard

  1. Pingback:Copiar contenido de MS Word a Blackboard « El salón de clases

  2. Pingback:Copiar contenido con imágenes de MS Word a Blackboard « El salón de clases

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: