Hola mundo en Visual Basic .NET

Después de tener configurado el entorno para programar aplicaciones en .NET, tal y cómo se describe en el post Introducción a Visual Basic .NET, ya estamos listos para desarrollar nuestra primera aplicación denominada Hola Mundo!. Esta primera aplicación la desarrollaremos primero desde la consola de Windows y posteriormente desde Visual Studio.

Hola Mundo desde consola

Lo primero que debemos hacer es abrir un bloc de notas y escribir el siguiente código

Imports System

Module MyModule
   Sub Main()
      Console.WriteLine("Hola Mundo!")
      Console.ReadLine()
   End Sub
End Module

Es aconsejable no copiar el texto y pegarlo sino más bien teclearlo directamente guardando especial cuidado en separa los espacios con Tabs y no con la tecla espacio del teclado. Después de esto, guar-damos el archivo con "Archivo -> Guardar Como" y seleccionamos en Tipo la opción Todos los Archivos. Finalmente colocamos el nombre del archivo como HolaMundo.vb.

Después de guardar el archivo, debemos abrir una consola como administrador y navegar hasta el directorio en donde hemos guardado el archivo y tecleamos el comando:

vbc /out:HolaMundo.exe HolaMundo.vb

Recordemos que para que este comando funcione correctamente debe estar el directorio de binarios del .NET Framework correctamente configurado. Al terminar de ejecutar el comando, aparecerá un nuevo archivo en nuestro directorio denominado HolaMundo.exe el cual podemos ejecutar y deberá mostrar una salida similar a la siguiente.

Hola Mundo desde Visual Studio

Desde el Visual Studio seleccionamos "Archivo -> Nuevo Proyecto" y en plantillas buscamos Visual Basic y seleccionamos "Aplicación de Consola", posteriormente le damos el Nombre HolaMundo y damos clic en aceptar. El IDE nos creará un archivo base y nos mostrará el siguiente contenido:

Module Module1 
   Sub Main() 

   End Sub 
End Module

A partir del cual, nosotros debemos completar el código como se mostró en la sección anterior "Hola Mundo sin IDE" y finalmente damos clic en el icono verde de iniciar. Nuevamente, veremos una salida similar en consola pero esta vez desde el IDE Visual Studio.

También podemos compilar y ejecutar el código de forma similar presionando la tecla F5. A continuación, un video más detallado acerca de los primeros pasos en Visual Studio con VB.NET.

English




Referencias

- Visual Basic version of Hello, World. (2012). In MSDN, Microsoft Developer Network. Retrieved 05:07, July 10, 2015, from https://msdn.microsoft.com/en-us/library/3cf7t4xt(v=vs.110).aspx

Introducción a Visual Basic .NET

Visual Basic .NET es un lenguaje de programación de alto nivel que provee la plataforma .NET, considerado como el sucesor del antiguo lenguaje Visual Basic desarrollado por Alan Cooper. El IDE de desarrollo para este lenguaje es el conocido Visual Studio, el cual podemos instalar visitando el post Introducción a Microsoft .NET. Visual Basic es además, un lenguaje intuitivo y basado en Windows Forms, con una curva de aprendizaje demasiado alta a pesar de ser orientado a objetos. En este post, veremos como preparar el entorno para posteriormente desarrollar programas en este maravilloso lenguaje.

Configuración de la variable Path

Antes que nada, debemos configurar los binarios necesarios del .NET Framework para poder compilar codigo VB desde consola. Para esto debemos entrar a las configuraciones del sistema abriendo el navegador de archivos, dando clic derecho en "Equipo / Este Equipo" y seleccionando Propiedades. O bien, podemos utilizar el atajo del teclado Windows + Pausa.

Enseguida se abre la ventana de Sistema y debemos seleccionar en el panel izquierdo la opción "Configuración avanzada del sistema". Enseguida se abrirá la ventana de Propiedades del sistema en donde debemos seleccionar la pestaña "Opciones avanzadas" y dar clic en "Variables de entorno...".

Buscamos la variable Path en el cuadro de diálogo emergente y agregamos entre comillas dobles el directorio en donde por defecto debió ser instalado el .NET Framework. Según la versión instalada la ruta puede ser similar a la siguiente C:\Windows\Microsoft.NET\Framework\v4.0.30319. Guardamos los cambios dando clic en Aceptar a todas la ventanas y con esto ya ha debido quedar configurado los binarios del .NET Framework para ejecutar desde consola.

Para verificar que se ha realizado correctamente el proceso podemos abrir una consola como administrador y teclear el comando vbc. El comando debe enviar una salida similar a la siguiente:

Configuración del IDE

En algunos casos es necesario activar algunas funcionalidades que Visual Studio no tiene activadas por defecto. Una de ellas es la visualización de los números de línea que podemos activar en el menú "Tools > Options ..".

En la opción Text editor, seleccionamos All Languages, y finalmente en el panel derecho activamos la opción Line numbers. Con esto, activamos la opción de que en el código nos muestre los números de línea en todos los archivos. Finalmente, si se desea también se puede cambiar el idioma por defecto del IDE en la opción Environment > International Setings dentro del mismo menú de opciones.


Referencias

- Visual Basic .NET. (2015, July 4). In Wikipedia, The Free Encyclopedia. Retrieved 05:07, July 10, 2015, from https://en.wikipedia.org/w/index.php?title=Visual_Basic_.NET&oldid=669904061

- Microsoft Visual Studio. (2015, July 7). In Wikipedia, The Free Encyclopedia. Retrieved 05:08, July 10, 2015, from 

https://en.wikipedia.org/w/index.php?title=Microsoft_Visual_Studio&oldid=670299111

Introducción a Microsoft .NET

La plataforma .NET consta de una serie de librerías que nos ayudan a realizar desarrollos mucho más rápidos e intuitivos, en una plataforma que soporta múltiples lenguajes para múltiples propósitos. El marco de trabajo .NET Framework, provee un extenso conjunto de soluciones predefinidas para necesidades generales de la programación de aplicaciones, mientras que otras herramientas como Visual Studio integran un conjunto de herramientas y lenguajes de programación diseñados para realizar aplicaciones Windows.

Microsoft .NET Framework, está conformado por tres componentes principales, una biblioteca de clases base (BCL), un entorno común de ejecución para lenguajes (CLR) y un conjunto de lenguajes de programación, entre los que se incluyen C#, Visual Basic .NET, Delphi, C++, F#, J#, Perl, Python, Fortran y Prolog. Además de esto, contiene un entorno (código administrativo) que provee servicios automáticos al código que se ejecuta, e incluye los siguientes servicios.

- Cargador de clases
- Recolector de basura
- Motor de seguridad
- Motor de depuración
- Administrador de excepciones
- Soporte multiproceso (hilos)

Microsoft Visual Studio

Microsoft Visual Studio, es un entorno integrado de desarrollo (IDE) elaborado por Microsoft para la plataforma .NET. Este entorno incluye un editor de código inteligente que completa y refactoriza el código escrito, un diseñador de formularios para aplicaciones con interfaz gráfica, un diseñador de esquemas de bases de datos, entre otras herramientas que agilizan el desarrollo de aplicaciones. Para instalar el Visual Studio, basta visitar la página oficial de Visual Studio 2015 Editions, y descargar la versión apropiada que para la mayoría de nosotros será la versión libre, o community, que nos aporta lo necesario para conocer la plataforma y desarrollar programas en Windows.

Versiones de Microsoft Visual Studio

Después de descargar el instalador de la versión elegida, al ejecutarlo deberá salir el siguiente formulario.

Finalmente, damos clic en instalar y el programa descargará los archivos necesarios para instalar el Visual Studio. Después de la instalación se pedirá reiniciar la computadora, y enseguida de ello al iniciar el programa pedirá iniciar sesión con una cuenta Microsoft. Si no se dispone de una cuenta Microsoft simplemente damos en clic en Not now, maybe later.

Iniciar sesión con una cuenta Microsoft tiene ciertos beneficios en el entorno. Se guardarán las configuraciones y los servicios de desarrollo en cualquier dispositivo desde donde se acceda al Visual Studio y no solamente en el computador donde se instale por primera vez. Dependiendo del lenguaje que tengamos pensado explorar, y del tema que más se ajuste a nuestras preferencias, al finalizar el proceso tendremos la siguiente interfaz principal.

Interfaz principal de Microsoft Visual Studio 2015 - Dark theme

Con esto, ya tenemos instalado el entorno de desarrollo de Microsoft .NET. Por último, dejo a continuación dos videos más detallados sobre la instalación de Visual Studio, tanto en español como en inglés.

Español



English




Referencias

- Microsoft .NET. (2015, 7 de junio). Wikipedia, La enciclopedia libre. Fecha de consulta: 15:47, junio 28, 2015 desde https://es.wikipedia.org/w/index.php?title=Microsoft_.NET&oldid=83012185.

- Microsoft Visual Studio. (2015, June 26). In Wikipedia, The Free Encyclopedia. Retrieved 16:33, June 28, 2015, from 

https://en.wikipedia.org/w/index.php?title=Microsoft_Visual_Studio&oldid=668836562

Operable en el nivel AA

Dentro de la accesibilidad web, que un sitio sea operable en el nivel AA, significa que los componentes de interfaz de usuario deben ser operables y permitir la navegación sin ningún tipo de obstáculo. Para esto, es necesario tener en cuenta las siguientes cuatro pautas de operabilidad: accesible por teclado, tiempo suficiente, convulsiones, navegable.

PAUTA 1: Accesible por teclado

Objetivo: Asegurar la accesibilidad mediante el teclado o una interfaz de teclado.

Alcance: Personas con baja visión, con limitaciones técnicas, problemas de movilidad o invidentes.

Los contenidos de la página web deben poder ser accedidos a través del teclado. Muchos dispositivos no disponen más que del teclado para acceder a una web, este es el caso de los lectores de pantalla; debido a esto, debe garantizarse que la información sea accesible mediante este dispositivo de entrada. Además de esto, se debe garantizar que la página siga siendo operable con mouse.

Es necesario tener en cuenta las siguientes recomendaciones para garantizar esta pauta:

- Utilización de funciones de acceso por teclado para interactuar con enlaces, controles de formulario y otros elementos. 

- Si se utilizan eventos del mouse como onmouseup, onmouseover, u onmousedown, se debe agregar una funcionalidad equivalente mediante eventos semejantes del teclado como onkeydown, onkeyup y onfocus.

- En todas las veces en que sea posible situar el foco a un elemento de la interfaz mediante el teclado, también debe ser posible quitarlo mediante el teclado. 

PAUTA 2: Tiempo suficiente

Objetivo: Proporcionar a los usuarios el tiempo suficiente para leer,usar el contenido y no distraerse mientras se navega por la página.

Alcance: Personas con deficiencias técnicas, cognitivas o desórdenes de la atención.

Algunas personas requieren más tiempo para leer contenido o utilizarlo, debido a esto debe evitarse cualquier control de tiempo o limitación temporal que pueda impedir la correcta utilización del sitio. Así mismo, los contenidos que hacen parte de alguna animación, publicidad o demás elementos diseñados para llamar la atención no deben confundir al usuario dificultando la navegación.

Es necesario tener en cuenta las siguientes recomendaciones para garantizar esta pauta:

- El contenido no debe comenzar de forma automática y solo debe ser reproducido a petición de los usuarios.

- Permitir al usuario detener o reiniciar la reproducción de contenido con controles de interfaz.

PAUTA 3: Convulsiones

Objetivo: Impedir ataques fotosensitivos en cualquier usuario expuesto.

Alcance: Personas con trastornos fotosensitivos que puedan verse afectados por destellos de pantalla.

No se debe diseñar contenidos que puedan causar ataques de epilepsia fotosensitiva. Algunos cambios de luminosidad y destellos pueden provocar dichos ataques en pacientes con este tipo de patología.

Es necesario tener en cuenta las siguientes recomendaciones para garantizar esta pauta:

- La página no debe contener contenido que destelle más de tres veces por segundo (3Hz), o almenos el destello debe estar por debajo del umbral de destello general y de destello rojo.

- No deben generarse destellos en un cuadrado de más de 148 pixeles de lado o de más de 21.904 pixeles cuadrados de área.

PAUTA 4: Navegable

Objetivo: Ayudar al usuario a navegar de forma fácil por la página, encontrar contenido y saber en que parte se encuentra.

Alcance: Cualquier usuario en general, usuarios con lectores de pantalla o problemas de visión o cognitivos.

El usuario debe poder predecir el flujo general de la página, debe poder encontrar el contenido que necesite de forma simple e identificar en que parte de la página se encuentra.

La página debe tener algún mecanismo que permite saltar el contenido repetido en distintas páginas como por ejemplo el logo, menú  principal, barras laterales y pies de página. Muchos usuarios utilizan  lectores de pantalla con lo cual hacen un barrido lineal de la página y mucha información de la página se presenta nuevamente en cada carga. Un mecanismo para evitar esto, puede ser colocar un enlace al inicio de la página oculto con CSS, para saltar al contenido principal de la página.

Es necesario tener en cuenta las siguientes recomendaciones para garantizar esta pauta:

- Saltar contenido repetido centrándose en el principal

- Enlaces descriptivos respecto al destino, evitando palabras con poco contenido como "click aquí" o "ver más".

- Informar al usuario la sección en donde se encuentra

- Uso correcto de títulos, encabezados y etiquetas

- Proporcionar más de una forma para acceder a una página (utilización de un mapa de sitio)

- Uso correcto de la semántica en el elemento title

- Las interfaces operables por teclado deben proporcionar algún tipo de foco que resulta visible al usuario.

Referencias

- Accesibilidad a páginas web (NTC 5854). (2011, 15 de julio). Instituto Colombiano de Normas Técnicas y Certificación (ICONTEC), 2011, 15 de julio.
- Sidar. (2009). Web Content Accessibility Guidelines (WCAG) 2.0. Consultado el 10 de abril de 2014, en http://www.sidar.org/traducciones/wcag20/es/
- W3C. (2008). Web Content Accessibility Guidelines (WCAG) 2.0. Consultado el 10 de abril de 2014, en http://www.w3.org/TR/WCAG20/
- W3C. (2010). Al recibir el foco. Consultado el 10 de abril de 2014, en http://www.sidar.org/traducciones/wcag20/es/comprender-wcag20/consistent-behavior-receive-focus.html
- W3C. (2010). Encabezados y etiquetas. Consultado el 10 de abril de 2014, en http://www.sidar.org/traducciones/wcag20/es/comprender-wcag20/navigation-mechanisms-descriptive.html
- W3C. (2010). Evitar bloques. Consultado el 10 de abril de 2014, en http://www.sidar.org/traducciones/wcag20/es/comprender-wcag20/navigation-mechanisms-skip.html
- W3C. (2010). Múltiples vías. Consultado el 10 de abril de 2014, en http://www.sidar.org/traducciones/wcag20/es/comprender-wcag20/navigation-mechanisms-mult-loc.html
- W3C. (2010). Poner en pausa, detener, ocultar. Consultado el 10 de abril de 2014, en http://www.sidar.org/traducciones/wcag20/es/comprender-wcag20/time-limits-pause.html
- W3C. (2010). Propósito de los enlaces (en contexto). Consultado el 10 de abril de 2014, en http://www.sidar.org/traducciones/wcag20/es/comprender-wcag20/navigation-mechanisms-refs.html

Perceptible en el nivel AA

Dentro de la accesibilidad de sitios web,  que un sitio web sea Perceptible en el nivel AA, significa que toda información y componentes de interfaz no pueden pasar desapercibidos por los sentidos. Para esto, es necesario tener en cuenta las siguientes cuatro pautas de accesibilidad: alternativas textuales, medios tempo-dependientes, adaptable, distinguible.

PAUTA 1: ALTERNATIVAS TEXTUALES

Objetivo: Proporcionar al usuario contenido equivalente y accesible, en caso de que no se pueda mostrar otro tipo de contenido no textual.

Alcance: Personas con dificultades sensoriales, o que no cuenten con la tecnología apropiada.

Esta pauta hace referencia a la utilización de métodos alternativos para mostrar información no textual. Los elementos HTML que no muestran contenido textual como imágenes, applets, videos, audio, entre otros, entran dentro de esta categoría. a continuación veremos los métodos alternativos que podemos utilizar para que la información llegue al usuario sin importar las barreras sensoriales o la tecnología utilizada.

Imágenes

El elemento img es el elemento más utilizado para mostrar contenido no textual en la actualidad. Si la imagen que se quiere mostrar no pudo ser cargada se puede utilizar el atributo alt para especificar un texto alternativo que haga descripción al contenido de la imagen. Lo que se escriba en el atributo alt debe ser equivalente al contenido de la imagen textualmente.

<img src="logo_wikipedia.png" alt="Wikipedia" />

En las versiones anteriores a HTML5 también se podía utilizar el atributo longdesc para brindar una descripción más completa de la imagen. Sin embargo, este atributo hoy en día está en desuso.

Objetos Flash y Applets

En caso de que el navegador de el usuario no soporte el uso de estas etiquetas, o el elemento no haya podido cargarse, puede colocarse un texto alternativo dentro de las etiquetas para informar al usuario el contenido temático del elemento.

Dado que el elemento applet ya está en desuso, se puede utilizar el elemento object para cargar contenidos desarrollados en Java. La forma correcta de hacerlo especificando su contenido alternativo textual es la siguiente:

<object type="application/x-java-applet">
   <param name="code" value="ClaseJava">
   <p>Contenido alternativo</p>
</object>

La carga de elementos Flash, se realiza de la siguiente forma:

<object type="application/x-shockwave-flash" data="swf/video_flash.swf" height="200" width="300">
Contenido alternativo
</object>

O también se puede realizar mediante el elemento embed.

<embed src="catgame.swf">
Contenido alternativo
</embed>

Controles de formularios

Al maquetar formularios, suele utilizarse el elemento label para etiquetar cada control del formulario. Podemos hacer esto básicamente de dos formas, la primera es colocar el control de formulario dentro del elemento label y la segundo es relacionar el control del formulario mediante el atributo for.

Ejemplo 1: Control del formulario dentro del label.

<label>Primer nombre: <input type="text" name="primernombre"></label>

Ejemplo 2: Relación mediante el atributo for.

<label for="primernombre">Primer nombre:</label> <input type="text" id="primernombre" name="primernombre">

Deben utilizarse el elemento label para los controles de formulario textarea, select e input del tipo text, checkbox, radio, file y password.

No se debe usar para los siguientes elementos:

- button: Su contenido funciona como etiqueta.
- input de tipo image: El atributo alt funciona como etiqueta.
- input de tipo submit y reset: El atributo value funciona como etiqueta.

CAPTCHA

Debe proporcionar alternativa de reproducción de audio y una opción textual que indique a la persona cómo utilizar el mismo.

Hojas de estilos CSS

Las imágenes que no aportan información al usuario tales como fondos, decoraciones, entre otras, deben ir especificadas en las hojas de estilos y no en el código HTML.

PAUTA 2: MEDIOS TEMPO-DEPENDIENTES

Objetivo: Proporcionar formatos alternativos al contenido pregrabado (audio, video).

Alcance: Usuarios con dificultad para percibir la información visual o auditiva.

Son todos aquellos medios que proporcionan información en función del tiempo. Un video, audio, o una animación son ejemplos de medios tempodependientes puesto que proporcionan fragmentos de información en cada instante de tiempo.

Se recomienda que este tipo de contenido tenga descripciones textuales para que el usuario no pierda la idea de que se trataba si no se pudo renderizar el contenido. Esto además, mejora el posicionamiento web debido a que los motores de búsqueda no indexan audio o video. Es conveniente seguir las siguientes recomendaciones.

- Realizar subtítulos para grabaciones de audio
- Realizar audiodescripción para videos
- Implementar interpretación en lengua de señas

PAUTA 3: ADAPTABLE

Objetivo: Presentar la información de diferentes formas sin perder información o estructura. 

Alcance: personas con limitaciones sensoriales.

Esta pauta hace referencia a la presentación de información en distintos dispositivos y con distintos software de renderizado, plugins u otros medios que pueden en los que se puede presentar la información de distintas formas. Por ejemplo, presentar la información en forma de tablas para representar datos atómicos, visualizar la página desde un dispositivo diferente (table, mobile), utilizar utilizar software desactualizado (web browsers), entre otros.

Encabezados

La utilización de encabezados da una jerarquía al documento web. Mediante los encabezados especificamos que títulos son más jerárquicos que otros, además que da orden y facilita la lectura a dispositivos lectores de pantalla.

Tablas

En primera instancia, recordar que las tablas existen para mostrar información tabular y no para maquetar la estructura o layout de un sitio web. Una tabla es una tabla, partiendo de este principio, cada tabla deberá tener un resumen y un título, proporcionados respectivamente por el atributo summary y el elemento caption. Además de esto, cada celda debe estar asociada con su columna correspondiente y esto se realiza a través del atributo headers, el cual debe ser el mismo que el id de la celda de título.

A continuación se presenta un ejemplo de una tabla accesible.

<table summary="En la siguiente tabla se presenta una lista de personajes que han marcado hito en la evolución de la informática"> 
 <caption>Personajes históricos en la informática</caption>
 <tr>
  <th id="nombre">Nombre</th>
  <th id="apellidos">Apellidos</th>
 </tr>
 <tr>
  <td headers="nombre">Steave</td>
  <td headers="apellidos">Jobs</td>
 </tr>
 <tr>
  <td headers="nombre">Bill</td>
  <td headers="apellidos">Gates</td>
 </tr>
</table>

Cabe hacer énfasis, en que la tabla debe tener el título definido mediante el elemento caption y no mediante otras etiquetas.

Formularios

Para el desarrollo de formularios se debe terner en cuenta lo siguiente:

- Utilizar labels para etiquetar los controles del formulario

- Agrupar controles del formulario mediante los elementos fieldset y legend

- Agrupar elementos de menú con optgroup en la medida en que sea necesario

- Utilizar  los atributos accesskey y tabindex

Un método para verificar que una página es adaptable consta en desactivar las hojas de estilos y cargar la página sin ellas. El usuario deberá poder navegar por la página sin ningún problema.

PAUTA 4: DISTINGUIBLE

Objetivo: Facilitar la visualización y escucha de todo tipo de contenido.

Alcance: Personas con limitaciones de visión o problemas de percepción del color

Esta pauta hace referencia a la correcta utilización del contraste, la teoría del color y la no contaminación auditiva. Debe haber una correcta separación entre el primer plano de una página web y el fondo, así como también el color de todo tipo de contenido textual. En cuánto a los archivos de audio, deben en lo posible claros, sin ruidos externos que dificulten la escucha del mismo. Si un archivo de audio suena por más de tres segundos debe existir un mecanismo para pausar, detener o controlar el volumen del mismo. Esto con el fin de no interferir con el sintetizador de voz por parte del lector de pantalla.

Es necesario tener en cuenta las siguientes recomendaciones:

- Uso adecuado del color semántico (color que transmite información).

- Relación adecuada de contraste y brillo.

- Tamaño del texto configurable.

- Formato del texto configurable.

La presentación de texto o imágenes de texto, debe tener una relación de contraste, de al menos, 4:5:1, excepto en los siguientes casos:

- Textos grandes: Estos debe tener una relación de contraste de, al menos, 3:1.

- Incidental: Textos o imágenes de texto que son usados como simple decoración, o que hacen parte interactiva de la interfaz de usuario, no tienen requisitos de contraste:

- Logotipos: El texto que forma parte de un logo no tiene requisitos mínimos de contraste.

Finalmente, la relación de brillo entre el primer plano (texto) y el fondo debe ser superior a 125 y la relación de contraste superior a 500. Debe evitarse a toda costa la utilización de imágenes como texto.

Referencias

- W3C. (2015). 4.7 Embedded content -- HTML5. Consultado el 31 de marzo de 2015, en http://www.w3.org/TR/2014/REC-html5-20141028/embedded-content-0.html#the-img-element
- W3C. (2015). 11 Obsolete features -- HTML5. Consultado el 31 de marzo de 2015, en http://www.w3.org/TR/2014/REC-html5-20141028/obsolete.html#the-applet-element
- W3C. (2015). 4.7 Embedded content -- HTML5. Consultado el 31 de marzo de 2015, en http://www.w3.org/TR/2014/REC-html5-20141028/embedded-content-0.html#the-embed-element
- W3C. (2015). 4.7 Embedded content -- HTML5. Consultado el 31 de marzo de 2015, en http://www.w3.org/TR/2014/REC-html5-20141028/embedded-content-0.html#the-object-element
- W3C. (2015). 4.10 Forms -- HTML5. Consultado el 31 de marzo de 2015, en http://www.w3.org/TR/2014/REC-html5-20141028/forms.html#the-label-element

- Accesibilidad a páginas web (NTC 5854). (2011, 15 de julio). Instituto Colombiano de Normas Técnicas y Certificación (ICONTEC), 2011, 15 de julio.

- Ministerio de Tecnologías de la Información y las Comunicaciones. (2011). Manual 3.0 para la Implementación de la Estrategia de Gobierno en Línea En las Entidades del Orden Nacional de la República de Colombia. Bogotá, Colombia: Ministerio de Tecnologías de la Información y las Comunicaciones.

- Sidar. (2009). Web Content Accessibility Guidelines (WCAG) 2.0. Consultado el 10 de abril de 2014, en http://www.sidar.org/traducciones/wcag20/es/
- Visión Australia. (2012). Color Contrast Analyser 2.2 para Páginas Web. Consultado el 10 de abril de 2014, en http://www.visionaustralia.org/digitalaccess-cca
- W3C. (2008). Web Content Accessibility Guidelines (WCAG) 2.0. Consultado el 10 de abril de 2014, en http://www.w3.org/TR/WCAG20/
- W3C. (2010). Audiodescripción o Medio Alternativo (grabado). Consultado el 10 de abril de 2014, en http://www.sidar.org/traducciones/wcag20/es/comprenderwcag20/
media-equiv-audio-desc.html
- W3C. (2010). Audiodescripción o Medio Alternativo (grabado). Consultado el 10 de abril de 2014, en http://www.sidar.org/traducciones/wcag20/es/comprenderwcag20/media-equiv-audio-desc.html
- W3C. (2010). Información y relaciones. Consultado el 10 de abril de 2014, en http://www.sidar.org/traducciones/wcag20/es/comprender-wcag20/contentstructure-separation-programmatic.html

Configurar router para publicar web

En nuestro anterior post Publicar sitio web IIS en internet, aprendimos como habilitar las conexiones remotas en IIS mediante el Firewall de Windows para que nuestro sitio web pueda ser accedido desde cualquier parte del mundo. Sin embargo, no solamente basta con realizar este procedimiento, también debemos tener en cuenta que por defecto, los routers que nos brinda nuestro proveedor de servicios de internet (ISP) no tienen habilitados los puertos necesarios para permitir que el servidor pueda procesar peticiones externas, es por esto, que debemos abrir al menos un puerto en el router mediante el cual nuestro sitio web pueda ser accedido. Además de esto, es útil configurar una dirección estática en el equipo que funciona como servidor, pues muy seguramente la dirección IP del servidor pueda cambiar si se tiene habilitado DHCP.

Configurar dirección estática en el servidor

1. Lo primero que debemos hacer, es averiguar algunos datos sobre nuestra conexión. Para esto, basta con abrir una consola de Símbolo del sistema, y teclear el comando ipconfig.

2. Observamos los datos del adaptador configurado y anotamos la Dirección IPv4, Máscara de subred y puerta de enlace predeterminada. En seguida, abrimos el Centro de redes y recursos compartidos, y en el panel izquierdo seleccionamos Cambiar configuración del adaptador.

3. Damos clic derecho en el adaptador configurado y seleccionamos propiedades.

3. En el formulario emergente, en la pestaña Funciones de red seleccionamos Protocolo de Internet versión 4 (TCP/IPv4), y damos clic en el botón propiedades.

4. Configuramos manualmente la conexión, y colocamos en dirección IP la misma que anotamos en el paso 2, esta dirección IP será estática en la red local para nuestro servidor. Colocamos la misma máscara y puerta de enlace, y el primer DNS debe ser la misma puerta de enlace del router. Damos clic en aceptar y reiniciamos la conexión.

Abrir puertos en el router para aceptar peticiones externas en el servidor

Dada la gran cantidad de routers se hace imposible explicar el procedimiento para cada uno de los diferentes modelos en el mercado. Sin embargo, en la mayoría de routers el proceso es muy similar,  y solamente hay que encontrar la opción adecuada y seguir los pasos que se describen a continuación. El siguiente proceso fue realizado en un router Billion BiPAC 5200G R5.

1. Abrimos una ventana del navegador y en la dirección URL colocamos la puerta de enlace predeterminada que ya obtuvimos en el paso 1 del anterior procedimiento. Al entrar a esta dirección, el navegador mostrará un formulario o cuadro de diálogo en el cuál debemos ingreso el usuario y contraseña de administrador del router.

2. Después de haber iniciado sesión correctamente, nos dirigimos a la pestaña Advanced Setup, y buscamos alguna opción llamada NAT. Dentro de NAT, seleccionamos Virtual Sever y enseguida nos debe aparecer un formulario similar al siguiente.

Lo que debemos hacer ahora, es agregar los registros necesarios en la tabla de reglas. Rule Index, en este caso, hace referencia al número de registro en la tabla de reglas, Application, simplemente es el nombre del registro, que puede ser opcional. Existe un campo de selección en el cual deben elegir HTTP Server, o Web Server según sea.

En el protocolo, si no aparece la opción ALL, deben agregar dos registros, uno con TCP y el otro con UDP. Las opciones que tienen Port Number, deben ir con el número de puerto en el cual tienen funcionando el servidor. Este puerto, en la mayoría de los casos debe ser el 80, pero si tienen otros servicios muy seguramente tendrán el servidor en el 8080 u otro. Finalmente, la dirección IP local debe ser la misma que se configuró en el equipo servidor en el primer procedimiento.

3. Después de agregar las reglas necesarias, nuestro servidor web podrá ser accedido desde cualquier lugar del mundo mediante la dirección IP pública que nos arroje nuestro ISP.

Nota: Para saber cuál es nuestra dirección IP pública, podemos entrar a la página http://www.cual-es-mi-ip.net/ la cual nos muestra dicha dirección. En una próxima ocasión veremos cómo suministrar un nombre de dominio a nuestro servidor web.


Referencias

- Configurar una dirección IP estática. (2009, Mayo). In Microsoft TechNet: Recursos para profesionales de TI. Retrieved 05:02, March 23, 2015, from https://technet.microsoft.com/es-es/library/dd894437%28v=ws.10%29.aspx

Publicar sitio web IIS en internet

Después de haber instalado correctamente el servidor web IIS de Microsoft (Ver instalación), solamente nos queda habilitar la publicación por Internet para que cualquier persona en cualquier parte del mundo pueda ver nuestro sitio web al ingresar nuestra dirección IP o nomobre de dominio en el navegador. Este proceso consta de dos partes bien diferenciadas, la primera es simplemente abrir los puertos necesarios en el router proporcionado por nuestro proveedor de servicios de Internet (ISP), y la segunda es configurar el propio servidor para hacerlo público en Internet. Este post está centralizado solamente en cómo configurar el servidor IIS de Microsoft mediante el firewall para aceptar peticiones HTTP, y HTTPS remotas; si desea saber cómo configurar un router para hacerlo visible en internet visite nuestro post Configurar router para publicar web.

Configuración del servidor IIS en Windows 7/8

1. Vamos a inicio y digitamos "Firewall", y seleccionamos la opción Firewall de Windows. Enseguida, seleccionamos en el panel izquierdo Configuración avanzada.

2. Seleccionamos en el panel izquierdo Reglas de entrada, y buscamos en el panel frontal las opciones Servicios de World Wide Web (Entrada de tráfico HTTP) y ... HTTPS tal y como lo muestra la siguiente imagen.

3. Después de seleccionar simultáneamente las dos opciones, damos clic en Habilitar regla en el panel derecho.

Otras opciones útiles en nuestro servidor pueden ser las siguientes (opcionales):

- Recuperación de contenido BrachCache (HTTP de entrada)
- Servidor de caché hospedada de BrachCache (HTTP de entrada)
- Media Center Extenders - Transmisión por secuencias de HTTP (TCP de entrada)
- Windows Peear to Peear Collaboration Foundation (PNRP de entrada)

4. Finalmente, vamos a inicio y digitamos "inetmgr" y presionamos la tecla enter o seleccionamos la opción Administrador de Internet Information Services (IIS).

5. Damos clic en Reiniciar en el panel derecho y si todo ha salido bien, tu servidor ya está disponible para ser accedido desde redes locales. Ahora, si has configurado tu servidor con algún servicio de redireccionamiento como noip.com, todo el mundo podrá entrar a tus páginas con teclear el nombre de tu dominio.


Referencias

- Allowing Remote Connections in IIS on Windows 8. (2012, October 12). In Kiyoshi's Blog. Retrieved 05:02, March 23, 2015, from http://weblogs.asp.net/kiyoshi/allowing-remote-connection-in-iis-on-windows-8