Documentación Inclusion Code

Versión 2.0

Contenido

  • Introducción
  • Accesibilidad web
  • Compatibilidad del programa
  • Características del programa
  • Usos recomendados
  • Pantalla de inicio
  • Editor
  • Nota importante al integrar audios, imágenes y videos
  • Menús y comandos de teclado
  • Créditos
  • Introducción

    Inclusion Code es un editor HTML para Windows que 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 HTML en muy poco tiempo.

    Inclusion Code es una herramienta educacional para apoyar el aprendizaje de programación web. Debido a su diseño simple y accesible, el software resulta fácil de utilizar para el aprendizaje de los códigos básicos HTML.

    Cuando se aprende HTML, que es la base de los sitios webs, se podrá crear páginas en el Internet muy robustas y eficientes. Aunque hoy día hay muchas herramientas que permiten crear páginas webs sin tener que conocer de programación HTML, dichos códigos no son limpios. Los navegadores web entienden HTML, CSS y Javascript. Por lo que al final, cualquier otra herramienta transformará el código en HTML internamente.

    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.

    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 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.

    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.

    Características del programa

    Usos recomendados

    Recomendamos el uso de Inclusion Code para:

    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 Editor en blanco, el editor se abrirá en una pantalla en blanco, donde se podrá comenzar a insertar códigos HTML. Si se selecciona Estructura global HTML, el editor presentará las etiquetas básicas de las partes principales de una página HTML. Si se selecciona Mi plantilla, el editor cargará el archivo mytemplate.html que se encuentra en la carpeta mytemplate dentro de la carpeta principal de Inclusion Code. Dicho archivo puede ser editado y así presentar el contenido deseado por el usuario.

    Editor

    Una vez en el editor, se puede ya sea escribir los códigos manualmente, o utilizar los menús para generar los códigos HTML automáticamente.

    Todos los archivos guardados en Inclusion Code, tienen una codificación ANSI. Esto debido, a que la herramienta se utiliza en Windows. Si interesa publicar su página en el Internet, debe entonces cambiar la codificación a UTF-8. Puede desde el menú de código, seleccionar la opción de enviar el código al bloc de notas, y ahí guardarlo como UTF8.

    Por lo que recomendamos el uso de Inclusion Code para:

    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 programa, 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.
    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.
    Alt + a, g

    Guardar como

    Se utiliza para guardar un archivo HTML con la opción de cambiarle el nombre al mismo.
    Alt + a, c

    Imprimir

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

    Salir

    Salir del programa.
    Alt + a, s

    Recientes

    Revisar los tres archivos HTML más recientes que se han guardado. Se deben de utilizar las flechas direccionales de abajo o arriba para navegar la lista, y presionar Enter para cargar el archivo seleccionado.
    Alt + a, r

    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 a la papelera.
    Alt + e, a

    Copiar

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

    Pegar

    Coloca el texto de la papelera 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

    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

    Botón

    Se presenta una ventana para escribir la dirección URL del enlace del botón, y luego saldrá una ventana con un cuadro de edición para escribir el texto del botón.
    Alt + i, b

    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

    Menú Código

    Vista previa en navegador

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

    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

    Enviar código al bloq de notas

    Enviar el código actual en el editor al Bloc de notas.
    Alt + c, b

    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 del texto a voz, para cambiar la voz 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

    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

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