Documentación Inclusion Code - Modo del editor HTML

Versión 2.5.1

Actualizado: 12 de julio de 2021

Introducción

Inclusion Code es un editor accesible que permite crear fácilmente contenidos en HTML o documentos en Markdown. Una vez en el editor, se puede ya sea escribir los correspondientes códigos manualmente, o utilizar los menús para generar los mismos automáticamente.

El interface de Inclusion Code es uno sencillo con barras de menús, que utiliza los controles estándares de Windows, por lo que resulta accesible a programas lectores de pantalla y líneas braille utilizados por personas ciegas.

Pantalla de inicio

Cuando Inclusion Code se inicia, saldrá una ventana con varias opciones que podemos seleccionar para abrir el editor. Las mismas son:

Si se selecciona HTML, el editor se abrirá en una pantalla en blanco, donde se podrá comenzar a insertar los códigos de las etiquetas HTML.
Si se selecciona Markdown, el editor se abrirá en una pantalla en blanco, donde se podrá comenzar a crear un documento utilizando las etiquetas de marcado de Markdown.
Si se selecciona Salir, se saldrá del programa.

Modo editor HTML

Esta documentación es la ayuda para la opción del editor HTML, también hay otra ayuda disponible con la documentación para la opción del editor markdown.

El modo del editor HTML en Inclusion Code, facilita el proceso de codificar al automatizar la creación de etiquetas básicas. El usuario selecciona el elemento deseado desde el menú, el programa generará los correspondientes códigos y los integrará en el editor. Por lo que se pueden crear contenidos en muy poco tiempo, sin tener que saber necesariamente HTML.

Igualmente, el que se puedan generar códigos automáticamente, permite también al usuario, ir aprendiendo los diferentes códigos de las etiquetas HTML. Cuando se aprende HTML, que es la base de los sitios webs, se podrá crear páginas en el Internet al igual que darle formato a contenidos para publicarlos en el web. Aunque hoy día hay muchas herramientas que permiten crear páginas webs sin tener que conocer de programación HTML, como por ejemplo Microsoft Word, dichos códigos HTML no son limpios.

Accesibilidad web

Inclusion Code promueve la creación de páginas webs que sigan las guías de accesibilidad tanto de la w3c WCAG (Internacional) como la Sección 508 (Estados Unidos).

La herramienta puede utilizarse por una persona ciega para mostrar a webmasters y programadores web, como usar las pautas de accesibilidad. Por ejemplo, cuando se añada una imágen desde el menú Insertar, Imágen, una vez se seleccione la misma, el programa pedirá se incluya una descripción en texto. Esto permite explicar que se requiere el uso de textos alternativos como prioridad en las guías de accesibilidad.

Nota importante al integrar audios, imágenes y videos

Cuando se añada un audio, imagen o video desde el menú de Insertar, el programa generará automáticamente el código necesario con las respectivas etiquetas HTML.

Sin embargo, dicho código asignará por defecto un directorio específico. Por ejemplo, /audio para contenidos de audio, /image para contenidos de imágenes y gráficos y /video para contenidos de videos.

Por lo que se requiere que todos éstos archivos de tipo multimedia, sean guardados en las carpetas correspondientes en la carpeta inicial de Inclusion Code. Esto es debido, a que si se interesa subir los contenidos a un servidor, utilizando FTP, puedan cargarse correctamente dichos contenidos, ya que estarán en el directorio correspondiente generado por el programa.

De no guardarse los archivos en dichas carpetas, no se podrán presentar en la página web.

Usos recomendados

Recomendamos el uso del modo del editor HTML en Inclusion Code para:

Características del editor HTML

Compatibilidad del programa

Inclusion Code es compatible con las siguientes versiones de Windows:
10/8/7 y con ambas arquitecturas 32 y 64 bits.

Igualmente, Inclusion Code no requiere instalación, ya que es un programa auto ejecutable, ideal para guardarlo en una unidad portable de memoria USB, y utilizarlo en cualquier computadora con Windows.

Nota importante al integrar audios, imágenes y videos

Cuando se añada un audio, imagen o video desde el menú de Insertar, el programa generará automáticamente el código necesario con las respectivas etiquetas HTML.

Sin embargo, dicho código asignará por defecto un directorio específico. Por ejemplo, /audio para contenidos de audio, /image para contenidos de imágenes y gráficos y /video para contenidos de videos.

Por lo que se requiere que todos éstos archivos de tipo multimedia, sean guardados en las carpetas correspondientes en la carpeta inicial de Inclusion Code. Esto es debido, a que si se interesa subir los contenidos a un servidor, utilizando FTP, puedan cargarse correctamente dichos contenidos, ya que estarán en el directorio correspondiente generado por el programa.

De no guardarse los archivos en dichas carpetas, no se podrán presentar en la página web.

Menús y comandos de teclado

A continuación, se presentan los menús del editor HTML, así como una descripción de como activarlos, utilizando comandos del teclado.

Menú Archivo

Nuevo

Limpia el editor para la creación de un nuevo documento.
Alt + a, n

Abrir

Se abrirá un archivo HTML previamente guardado. El mismo, se cargará en el editor. Importante: el editor de Inclusion Code apoya archivos con codificación ANSI. Para abrir un documento con codificación UTF-8 debe hacerse desde la opción Importar UTF-8.
Alt + a, a

Guardar

Guardará el archivo que está actualmente en el editor y que ya había sido previamente guardado. Se guardará con el mismo nombre. Importante: El editor Inclusion Code guarda los archivos con la codificación ANSI. Para guardar un documento con codificación UTF-8 debe hacerse desde la opción Exportar UTF-8.
Alt + a, g

Guardar como

Se utiliza para guardar un archivo HTML con la opción de cambiarle el nombre al mismo. Importante: El editor Inclusion Code guarda los archivos con la codificación ANSI. Para guardar un documento con codificación UTF-8 debe hacerse desde la opción Exportar UTF-8.
Alt + a, c

Importar UTF-8

Se abrirá un archivo HTML previamente guardado con codificación UTF-8. El mismo, se cargará en el editor. Importante: el editor de Inclusion Code convertirá los textos como ANSI. Para guardarlos como UTF-8, se debe ir a la opción de Exportar UTF-8.
Alt + a, i

Exportar UTF-8

Se utiliza para guardar el archivo HTML en el bloc de notas de Windows con la codificación UTF-8.
Alt + a, e

Imprimir

Enviar el código del el editor a la impresora. Alt + a, i

Salir del editor

Salir del editor y regresar al menú principal.
Alt + a, s

Menú Edición

Deshacer

Cancela la más reciente acción de edición.
Alt + e, d

Cortar

Corta texto seleccionado del editor y lo envía al portapapeles.
Alt + e, a

Copiar

Copia texto seleccionado del editor y lo envía al portapapeles.
Alt + e, c

Pegar

Coloca el texto del portapapeles en la posición del cursor en el editor.
Alt + e, p

Seleccionar todo

Selecciona todo el texto del editor.
Alt + e, s

Buscar/Reemplazar

Busca un texto especificado en el editor. Puede reemplazar el mismo, con otro texto.
Alt + e, b

Menú Insertar

Etiquetas generales HTML

Presentará una ventana con una lista de varias etiquetas básicas HTML. Se debe mover con flecha abajo o flecha arriba, y al presionar Enter, se insertará el código de la misma en la posición actual del cursor en el editor. Si la etiqueta requiere que se escriban textos, saldrá una ventana con un cuadro de edición y una vez escritos los textos, se debe presionar la tecla Enter para su integración en el editor.
Alt + i, g

Las etiquetas básicas que se podrán seleccionar son:

  • Párrafo
  • Enlace
  • 1 Encabezado 1
  • 2 Encabezado 2
  • 4 Encabezado 4
  • 5 Encabezado 5
  • 6 Encabezado 6
  • Nueva línea
  • Línea horizontal
  • Negrita
  • Enfasis
  • Comentario

Imagen

Se abrirá una ventana del explorador de archivo donde se podrá seleccionar un archivo en formato .jpg, .gif o .png. Una vez seleccionado, salrá una ventana con un cuadro de edición donde se debe de escribir la descripción en texto de dicha imágen que es el equivalente al atributo ALT. Dicha descripción en texto resulta accesible para las personas ciegas con sus programas lectores de pantalla.
Alt + i, i

Lista

Se presenta una ventana donde se debe seleccionar el tipo de lista, luego saldrá otra ventana para seleccionar el número de items y finalmente saldrán las ventanas con cuadros de edición para escribir los items de la lista.
Alt + i, l

Audio

Se abrirá una ventana del explorador de archivo donde se podrá seleccionar un archivo en formato .mp3. Una vez seleccionado, se generarán automáticamente los códigos HTML de un reproductor de audio que incluye botones para reproducir, pausa, subir y bajar volumen.
Alt + i, a

Video

Se abrirá una ventana del explorador de archivo donde se podrá seleccionar un archivo en formato .mp4. Una vez seleccionado, se generarán automáticamente los códigos HTML de un reproductor de video que incluye botones para reproducir y parar, además de un selector del porciento del video reproducido.
Alt + i, v

Estructura global HTML

Se cargará en el editor, el código de la estructura básica HTML.
Alt + i, h

Menú Código

Previsualizar en el navegador

Presenta el código HTML del editor, como página web en el navegador por defecto.
Alt + c, n

Info del documento

Saldrá una ventana con la información del número de líneas, caracteres y palabras de los textos en el editor.
Alt + c, i

Leer en voz alta

Leerá el contenido de la página web usando el motor de voz predeterminado por el sistema.
Alt + c, l

Detener lectura

Detiene la reproducción de la lectura actual por el motor de voz.
Alt + c, d

Menú opciones

Idioma

Se podrá seleccionar entre los idiomas de Inglés y Español. El programa se va a reiniciar, para que el cambio de idioma tenga efecto. Igualmente, se debe ir a la opción de configuración de texto a voz en Windows, para cambiar la voz SAPI5 del idioma seleccionado. Alt + o, i

Fuente

Se podrá seleccionar el tipo de fuente y su tamaño, que se utilizará en el editor.
Alt + o, f

Contrastes colores

Se podrán seleccionar colores de alto contraste (fondo negro y letras blancas) para utilizar en el editor.
Alt + o, c

Sonidos

Se podrá activar o desactivar la opción de los efectos de sonidos.
Alt + o, s

Preferencias texto a voz

Se podrá activar o desactivar la opción de los mensajes parlantes. También, se podrá ir a la pantalla de configuración de texto a voz de Windows, y seleccionar entre las voces SAPI5 instaladas en el sistema.
Alt + o, v

Menú Ayuda

Documentación

Se abrirá el documento de ayuda en el navegador.
Alt + u, d

Página web Inclusion Code

Se accederá a la página www.inclusioncode.com, se debe tener una conexión de Internet activa.
Alt + u, i

Acerca de

Se ofrece información de la versión actual de Inclusion Code. Así como los créditos del autor.
Alt + u, a

Créditos

Inclusion Code ha sido programado por José Manolo Alvarez, programador ciego profesor de la Universidad de Puerto Rico.
La versión 2.1, integra el modo del editor Markdown y se ha utilizado durante toda esta situación de una educación en línea por el COVID-19, como alternativa para que estudiantes ciegos redacten sus documentos en Markdown y los conviertan en formato Word accesible en Inclusion Code.

Página web Inclusion Code:
Inclusion Code

E-Mail:
manolo@manolo.net