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:
- HTML
- Markdown
- Salir
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:
- Para crear contenidos HTML rápidamente y copiar los mismos y pegarlos en herramientas como Wordpress.
- Como herramienta de aprendizaje de programación en HTML.
- Para crear páginas webs sencillas.
- Para que una persona ciega pueda demostrar la accesibilidad a webmasters.
Características del editor HTML
- El programa puede generar las etiquetas básicas HTML automáticamente del elemento seleccionado desde el menú, integrando los códigos en el editor.
- Los códigos se podrán visualizar como página web en el navegador web desde el mismo programa.
- Lectura en voz alta del contenido de la página web, así como los menús y mensajes del programa, pudiendo el usuario seleccionar cualquiera de las voces SAPI5 de Windows.
- Efectos de sonidos para las ventanas y los códigos generados automáticamente desde el menú.
- Seleccionar el tipo y tamaño de la fuente para utilizar en el editor.
- Seleccionar colores de alto contraste para el fondo y los textos del editor.
- Todas las opciones del programa, podrán ser utilizadas por comandos del teclado.
- Menús del programa disponibles en Español o Inglés.
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