Cómo publicar un sitio web: Alojamiento (hosting) (3/3)

Siguiendo la discusión de los criterios que se deben evaluar a la hora de contratar un servicio de alojamiento web, tenemos:

Velocidad de Transferencia

También conocida como Ancho de Banda o Bandwith, es la cantidad de datos que se puede enviar a través de un canal de comunicación por unidad de tiempo. Se miden en Kilobits o Megabits por segundo.

El ancho de banda generalmente se garantiza para los planes mas costosos. El ancho de banda máximo es el valor asociado al plan contratado con nuestro proveedor de servicios a internet.

El ancho de banda para un sitio no es un valor único, ya que depende de la cantidad de usuarios que están conectados a nuestro sitio web. Por ejemplo, si tenemos contratado 512Kbps y solo tenemos un usuario conectado a nuestro sitio, el ancho de banda para ese usuario en ese momento sería el valor nominal de la conexión a internet. Si por el contrario, tuviésemos cinco usuarios conectados, tendríamos un ancho de banda de apenas de 102.4 Kbps.

Al igual que el almacenamiento, algunos proveedores ofrecen de un ancho de banda ilimitado; pero como ya hemos explicado antes, eso no es cierto. Para un ancho de banda de 512kbps ese sería la mayor velocidad que podría tener.  

El tiempo de descarga de una página lo podríamos calcular dividiendo el tamaño de la página entre el ancho de bsnda. Si por ejemplo, la página tiene una tamaño de 2500Kb, al dividirlo por 512 kbps, obtendríamos 4.88seg.

Lenguajes de Programación

Con los lenguajes de programación, podemos desarrollar nuestras aplicaciones web. Se debe contratar un servicio de alojamiento que sea compatible con nuestro lenguaje de programación usado.

De no contar el servicio de alojamiento con el lenguaje usado por nosotros, no tendría la capacidad de interpretar nuestra aplicación web.

El lenguaje de programación usado depende de los conocimientos que tengan los desarrolladores web, ya que todos los lenguajes ofrecen la misma potencia y están en capacidad de poder realizar las mismas actividades.

Bases de Datos

El sistema gestor de base de datos, es el software que permite almacenar y posteriormente recuperar los datos de los usuarios en nuestro sitio web de forma rápida, segura y estructurada.

El servicio de alojamiento debe contar con un sistema gestor de base de datos compatible con la versión utilizada para el desarrollo de nuestro sitio, a fin de evitar errores o problemas durante las operaciones de almacenaje o recuperación de los datos.

Dominios y Sub-dominios

El dominio (Domain name) es el nombre mediante el cual los visitantes van a acceder a nuestro sitio web.

A un sitio web, se puede llegar mediante el uso de varios nombres de dominio. Usar varios nombres de dominio para llegar a una misma página es considerada una estrategia para garantizar que el visitante tenga más opciones para llegar a nuestro sitio web.

Algunos proveedores de servicios de alojamiento ofrecen cantidades de dominios y subdominios ilimitados. 

Los Sub-dominios permiten crear divisiones dentro del dominio principal. Como por ejemplo de podrían crear sub-dominios según las necesidades del usuario.

Otros, Cuentas de Correo Electrónico

Otros aspectos a considerar serían la cantidad de cuentas de correo que se pueden crear y cuyo costo esté incluido en el plan contratado. 

De igual forma se debe identificar si están incluidos las transferencias de archivos y SSH. La disponiblidad de plantillas disponibles para personalizar nuestro sitio.

Nos conviene identificar también, los diferentes scripts y librerías disponibles para el desarrollo del site.

Facilidad de uso del panel de control a través del cual vamos a administrar nuestro sitio web.

Es bueno determinar si dentro del plan contratado se generar Estadísticas y las opciones de consulta de los archivos de registro (logs).

Importante también es identificar si en las opciones se ofrece la realización de copias de seguridad.

Disponibilidad de crear procesos en segundo pano que se ejecuten automáticamente para realizar alguna acción en el servidor.

Disponibilidad de establecer conexiones seguras SSL.

Disponibilidad de poder incluir en nuestro sitio streaming de video y audio.

Precio

Ya por último, tenemos que evaluar el precio del plan ofrecido por el proveedor y si está acorde con los beneficios que ofrece.

Un factor que tiene incidencia en el precio de la forma de pago, que puede ser mensual, trimestral, semestral o inclusive anual.

Se ha indicado anteriormente que los alojamientos de páginas web basados en servidores linux son 30% más económico de uno Windows.

Conviene no contratar al principio largos períodos de alojamiento. Se contrata por un período corto y evaluar la relación precio/calidad para decidir si continuar o no con el servicio contratado.

De tener varios sitios web, conviene tener varios proveedores de servicio de alojamiento.

Para mayor información puede consultar el siguiente vídeo:

Cómo publicar un sitio web: Alojamiento (hosting) (2/3)

En este apartado se analizarán algunos de los criterios que deben ser tomados en cuenta a la hora de contratar un servicio de alojamiento web.

Calidad

La calidad de algo es la percepción que se tenga una vez que se ha probado. Este criterio es difícil de analizar a la hora de contratar; pero es el primer criterio a la hora de evaluar si continuar o no con el servicio.

Para tratar de determinar un valor objetivo de calidad podemos evaluar los siguientes aspectos o indicadores:

• Cumplimiento del proveedor de lo ofrecido en el plan
• Resolución de problemas a la brevedad posible
• Alta disponibilidad y fiabilidad de nuestro sitio web
• Excelente calidad de la página web del proveedor podría indicar que es un proveedor que se preocupa por ofrecer servicios de calidad alta
• Clientes y sus opiniones sobre los servicios del proveedor 
• Tiempo que tiene la empresa ofreciendo el servicio, indicaría el grado de experiencia que tiene en el negocio de alojamiento
• Nivel de soporte técnico ofrecido, documentación en línea, sección de preguntas más frecuentes
• Nivel de atención al cliente, tiempo de respuesta en resolución de fallas técnicas o administrativas
• Comprobar los medios de comunicación con el proveedor, números telefónicos, chat, correo electrónico

Sistema Operativo

Casi la totalidad de las opciones de alojamiento se ofrecen para Linux y para Windows. Los alojamientos con servidores Linux son desde un 30% a 40% más económicos que los alojamientos basados en servidores con sistema operativo Windows.

La selección de qué tipo de sistema operativo debe tener nuestro servidor, principalmente depende del lenguaje de programación usado para el desarrollo de nuestro sitio web.

• Linux
• Servidor Web: Apache
• Lenguajes de programación: PHP, Python, Perl o Java Server Pages (JSP)
• Bases de Datos: MySQL, PostgreSQL

• Windows
• Servidor Web: Internet Information Server (IIS)
• Lenguajes de programación: APS, ASP.Net
• Bases de Datos: Access, SQL Server

Almacenamiento

El almacenamiento, conocido también como espacio web o espacio en disco, es un criterio importante. Se mide en Gigabytes (GB) o Terabytes (TB). Debemos estimar el espacio que ocupa nuestro sitio web, tanto la parte estática que la conforman las páginas web (estáticas y dinámicas) considerando incrementarlo en un 20% o 30% para futuros cambios y ampliaciones y la parte dinámica conformada por los datos y archivos de los usuarios a un determinado plazo (seis meses o un año).

Hay que tener cuidado con las ofertas de los proveedores. Unos ofrecen espacios de almacenamientos muy grandes; pero que a lo mejor no necesitamos. El espacio en disco es lo más económico en cuanto a la estructura de costos del proveedor de servicios de alojamiento.

También debemos estar atentos con espacios muy pequeños, ya que podríamos alcanzar rápidamente el límite máximo contratado y luego tener que pagar tarifas adicionales por cada megabyte/mes adicional. Muy importante analizar bien lo relacionado con las tarifas adicionales por estos conceptos.

Otro aspecto importante es identificar bien el alcance del espacio web, ya que podría incluir el espacio requerido para el sitio web, bases de datos, buzones de correo y archivos de registro (logs), lo que podría dejar poco espacio para el sitio o la base de datos.

Hemos hablado de estimar el tamaño de nuestro sitio web. Una vez que nuestro sitio está desarrollado no tenemos problema en determinarlo; pero si no es así tenemos que usar alguna técnica que nos permita estimar con buen grado de exactitud el tamaño que podría ocupar nuestro sitio web.

Una forma podría ser multiplicando la cantidad de páginas que tendrá nuestro sitio web por el tamaño promedio de las páginas que lo forman. Aquí también tenemos el inconveniente de no poseer el tamaño promedio de cada página si aún no hemos finalizado el desarrollo del sitio. 

El tamaño de una página es el resultado de la sumatoria del código html, la hoja de estilos CSS, el código de JavaScript (o del lenguaje utilizado), las imágenes y otros objetos.

Para obtener esta sumatoria tenemos varias opciones. Si deseamos conocer cual es el tamaño del código html de una página, lo podemos obtener pulsando botón derecho del mouse sobre una zona vacía y seleccionamos "Ver Información de la página", que abre una ventana donde se muestra sólo el tamaño del código html.

Para conocer el tamaño completo, una opción sería instalar la barra de herramientas "Web Developer Tool Bar" y seleccionar la herramienta "Información" y luego "Ver tamaño del documento". Al hacer esto se abre una página en nuestro explorador con la discriminación del tamaño de cada componente y la sumatoria total o tamaño completo de la página.

También podemos guardar la página en una carpeta local, seleccionando "Guardar como..." del menú "Archivo" de nuestro explorador. Luego mediante el explorador de archivos del sistema opertivo, ubicamos la carpeta donde se guardó la página y mediante la opción de "Propiedades" de la carpeta podemos ver el tamaño de su contenido.

Transferencia

El volumen de transferencia o tráfico (file transfer o site transfer) es el volúmen de datos intercambiado en un período  de tiempo. La unidad de medida es Gigabytes/Mes (GB/Mes).

Este es un valor de suma importancia y es muy difícil de calcular. Al igual que el almacenamiento, debemos leer bien las condiciones del servicio y las tarifas adicionales que se aplican cuando nos excedemos del máximo contratado, a fin de no generar costos exagerados.

También es importante identificar el alcance del tráfico, ya que pudiera incluir el tráfico propio del sitio web (visitas de los usuarios), tráfico de correo electrónico y transferencias de archivos (FTP).

En ocasiones los proveedores ofrecen "Transferencias Ilimitadas" o "Tráfico Ilimitado". Hay que aclarar que esas opciones serían válidas si el ancho de banda fuera dedicado y aún así, el ancho de banda multiplicado por la cantidad de tiempo que tiene un mes (en segundos) nos daría la cantidad máxima de datos que podríamos transferir en ese tiempo. Siendo que el ancho de banda es compartido, la cuantificación de la transferencia es menor. Como sea, el calificador "ilimitado" es una utopía y mas bien podría esconder la incapacidad del proveedor por contabilizar el tráfico del sitio.

Una manera vaga de estimar el tráfico, podría ser multiplicar el número de visitantes esperados en un día por la cantidad de páginas que un visitante podría visitar, multiplicado por el tamaño promedio de una página y finalmente por 30 días que tiene el mes:

Tráfico = Nro. Visitas x Nro. Paginas por visita x Tam. prom. Página x 30 días

Para mayor información puede consultar el siguiente vídeo:

Cómo publicar un sitio web: Alojamiento (hosting) (1/3)

Si ya hemos registrado nuestro nombre de dominio, lo siguiente es publicar nuestro sitio web. Aunque esto no es del todo cierto, conviene tener registrado el nombre de dominio antes de iniciar el desarrollo del sitio web.

La publicación de un sitio web inicia desde su fase de desarrollo cuando hemos configurado un servidor web privado donde podamos hacer pruebas del funcionamiento de nuestra página o aplicación web. Esto implica que es deseable, sino más bien obligatorio, tener conocimientos sobre cómo configurar servidores web, ya que esto nos ayudará cuando nuestro sitio esté publicado en la web.

Una vez culminado el desarrollo de nuestro sitio, procederemos a publicarlo en un servidor, que puede ser propio (o privado) o contratar los servicios de alojamiento (hosting) ofrecidos por terceros. 

Dependiendo de la complejidad y de la información que manejará nuestro sitio debemos decidir si alojarlo en un servidor propio o en uno de un tercero. Algunas de las consideraciones a tener en cuenta a la hora de tomar esta decisión son:

• Sitio web complejo
• Requiere de gran espacio de almacenamiento y gran volumen de transferencia
• Configuración especial muy particular
• Presupuesto suficiente para la compra del servidor, equipos de redes, cuarto especialmente acondicionado donde instalar todos los equipos
• Personal capacitado para configurar el servidor y todos los equipos necesarios
• Vigilancia y seguridad del servidor, sitio web, datos, etc.

Como se puede observar son muchos los aspectos que se requieren a la hora de mantener un servidor propio, por lo que hay empresas especializadas que se dedican preparar servidores y ofrecer servicios de alojamiento. Se recomienda la contratación de un plan de alojamiento que nos libere de todas las actividades de mantener operativo un servidor en línea y nos permita dedicarnos a mejorar y mantener actualizado nuestro sitio web.

Según wikipedia, el alojamiento web (hosting) es el servicio que provee a los usuarios de internet un sistema para poder almacenar información, imágenes, vídeo o cualquier contenido accesible via web.

Según el costo, existen los servicios de alojamiento gratuito y los contratados bajo un plan de pago.

Los servicios de alojamiento gratuitos se pueden utilizar en los siguientes casos: cuando se trate de páginas web personales, cuya información mostrada no se gran relevancia o no afecte a otras personas; para hacer pruebas; no queremos gastar mucho dinero o no contemos con suficientes recursos. La desventaja de utilizar los servicios de alojamientos gratuitos es que las prestaciones que ofrecen son muy limitadas, como por ejemplo que no garantizan la continuidad del servicio las 24 horas, baja calidad en recuperación de fallas, lentitud en la conexión, procesamiento de bajo tráfico, inclusión de publicidad, entre otras.

Los servicios de alojamiento de pago se ofrecen bajo las siguientes modalidades:

• Servidor web compartido
• Servidor virtual privado
• Servidor web dedicado
• Housing
• En la Nube

El Servidor web compartido, es aquella solución donde un servidor físico aloja diferentes sitios web de uno o más clientes. Es una solución a bajo costo orientada a pequeños y medianos clientes. Es una buena relación precio/calidad.

El Servidor virtual privado, es una máquina virtual que se crea en un servidor físico, mediante un software especial. Esta máquina o servidor virtual se comporta exactamente igual que un servidor físico. Lo que se hace es que en el servidor físico se crean múltiples máquinas virtuales a las que se les asignan una porción de la memoria ram y almacenamiento (disco duro). Las ventajas de contratar un servidor virtual, es que los clientes tienen control total sobre las opciones de configuración del mismo y al solo estar alojado su sitio web (en el servidor virtual) no se ven afectados de las posibles fallas que pudieran ocasionar otros sitios alojados en el servidor compartido. Los clientes que contratan estos servicios son clientes avanzados con conocimientos en configuración de servidores.

Contratar un servidor dedicado es la solución ideal para sitios complejos y que requieran de grandes volúmenes de transferencia y alto tráfico. El cliente tiene control completo del servidor. Es la solución más costosa. Algunas de las actividades de mantenimiento y configuración son realizadas por el proveedor del servicio y otras de administración podrían ser realizadas ya sea por el cliente o por el proveedor. 

Contratar un servicio de housing es una solución intermedia, donde el proveedor alquila un espacio físico con las condiciones ambientales adecuadas de temperatura y garantizan el servicio eléctrico y la conectividad a internet. El cliente es quien aporta su servidor físico y según el plan, los equipos de redes y se encarga de instalarlos y conectarlos a la plataforma del proveedor. El cliente también se encarga de configurar completamente su servidor de acuerdo a sus necesidades.

Por último, el servicio de alojamiento en la nube (cloud hosting) es aquel donde el sitio web queda almacenado en diferentes servidores que actúan como si fueran un único servidor. Es la solución más segura, ya que al haber varios servidores, nuestro sitio va a estar siempre en línea, ya que si hay una falla en uno de los servidores, los otros serán capaces de manejar la falla hasta que el servidor caido se recupere o sea sustituido por otro. También es la solución mas flexible, ya que se pueden ampliar o disminuir los servicios según las necesidades. 

Como recomendación, para clientes pequeños y medianos, la mejor opción es contratar un servicio de alojamiento web compartido y luego pasar a otras soluciones según la demanda.

Los siguientes son algunos de los criterios que debemos tener en cuenta a la hora de contratar un alojamiento web:

• Calidad de Servicio y Soporte durante la configuración de los servicios y problemas que pudiesen ocurrir una vez que nuestro sitio esté en línea
• Sistema operativo del servidor
• Espacio de almacenamiento
• Límites mensuales de transferencia
• Velocidad máxima de transferencia
• Lenguajes de programación web instalados
• Manejadores de Bases de Datos instalados y cantidad de bases de datos que se pueden crear
• Dominios y Subdominios
• Cuentas de Correo que se pueden crear, plantillas disponibles para la creación de sitios
• Precio del plan

Si deseas más información, puedes consultar el siguiente vídeo:

Cómo comprar un dominio de Internet

Ya sea que hayas desarrollado tu sitio web, lo estés construyendo o pienses en hacerlo, tienes que ir pensando en la URL que tendrá para que puedan visitarlo. Recuerda que mientras más corta y sencilla de recordar, mejor.

Una parte importante de la URL es el dominio. El primer paso es decidir si va a ser un dominio de primer nivel o segundo nivel. El dominio se "compra" en cualquiera de los registradores de dominio autorizados por la ICANN. 

Para dominios de primer nivel debemos ir a la página del registrador (puedes hacer una búsqueda en Google de la palabra "whois" y obtener una larga lista de ellos). Una vez en la página, debemos ubicar el buscador y escribir en dicho campo el nombre del dominio deseado. El resultado de la búsqueda nos dirá si el dominio está diponible o no. En caso de estar reservado no mostrará una información sobre quien es la persona o empresa contacto y otros datos. Caso contrario nos indicará que el dominio está disponible.

Para dominios de segundo y tercer nivel, el proceso es igual, sólo que el registrador generalmente es un ente gubernamental (también autorizado por la ICANN) que coloca sus propias normas para el registro de nuevos dominios.

Si el dominio está disponible, nos queda definir por cuanto tiempo queremos reservarlo y proceder a realizar el pago por el servicio de registro (generalmente con una tarjeta de crédito).

Es recomendable hacer esta búsqueda en varios registradores y seleccionar el adecuado. Verifica el tiempo de reserva y su costo, tanto para el primer año, como para los años siguientes. Puede que un registrador te cobre el primer año 10USD$ pero luego el segundo 25USD$. También hay que comparar el plan ofrecido por un registrador contra los recibidos por otros. Es posible que unos planes sean más costosos que otros debido a que incluyen servicio de hosting, cloud, etc.

Cuando estés comprando tu dominio conviene activar la opción de de whois anónimo. Con esta opción activa los interesados comprar tu dominio tendrán que contactar primero a un representante para luego hacerlo contigo.

Después de registrado el dominio, hay que esperar un lapso de tiempo hasta que nuestra url se haya propagado a los diferentes servidores DNS que permitirán sea traducido a una dirección Ip. Este proceso puede tener una duración de 24 a 48 horas, aunque dependiendo del caso puede ser de solo algunas horas.

Luego de vencido el lapso de alquiler del dominio (los domnios no se compran, solo se alquilan) se debe renovar el alquiler o reserva del dominio, realizando los mismos pasos que se ejecutaron cuando se registró.

Para mayor información puedes consultar el siguiente vídeo:

HTML: tres errores típicos

Saltos de Línea

Para agregar saltos de línea al contenido se utilizan las etiquetas <br></br>. Es una etiqueta vacía que no puede tener contenido. Por ser vacía no se utiliza de esa forma; sino que dependiendo de la versión de HTML se utiliza de la siguiente manera:

• HTML 4/HTML5: <br>
• XHTML/HTML5: <br /> 

Se recomienda usar la forma <br /> porque es la que ofrece mayor compatibilidad.

Según la especificación oficial de la etiqueta <br /> en HTML, la etiqueta debe ser utilizada cuando sea necesario insertar saltos de línea que sun parte del contenido. De otra manera se debe utilizar las etiquetas <p>...</p>, que definen párrafos independientes, o la que aplique.

Por ejemplo, la inclusión de saltos de línea para separar campos de formulario en líneas independientes es incorrecta:

      <p><label>Nombres:<input type="text" /></label><br />

      <label>Apellidos:<input type="text" /></label></p>

Siendo lo correcto, colocarlos en párrafos independientes:

      <p><label>Nombres:<input type="text" /></label></p>

      <p><label>Apellidos:<input type="text" /></label></p>

Espacios en Blanco

Los espacios en blanco (agregados con la tecla <espacio> desde el teclado, como los saltos de línea, no son significativos. Para agregarlos se utiliza la siguiente notación: &nbsp;.

Se recomienda no usar esta notación ya que hace menos legible el código. Se recomienda el uso de CSS para agregar espacios en blanco dentro de un párrafo.

Referencias de Caracteres

Es la manera en que podemos incluir ciertos caracteres "especiales" en un texto. HTML dispone de tres formas para agregar estos caracteres:

• Referencias de caracteres con nombre: "&nombre;"

      Donde "nombre" es un valor que hace referencia a un carácter especial. En HTML hay una tabla de caracteres especiales con sus referencias. Por ejemplo el valor "nbsp" hace referencia al carácter "espacio en blanco", "aacute" hace referencia a la "á". También tenemos: "amp" para "&", "quot" para "comillas dobles", "apos" para "comillas simples", "lt" para "menor que" y "gt" para "mayor que" entre otros.

• Referencias de caracteres con números decimales: "&#nnnn;"

      Donde "nnnn" es código unicode representado en un valor decimal que hace referencia a un carácter especial. En la tabla de caracteres especiales HTML además de las referencias con nombre están las referencias con códigos unicode. Ejemplo: con "&#0225" podemos representar la "á".

• Referencias de caracteres con números hexadecimales: "&#xnnnn;" ó "&#XNNNN;"

      Donde "x" o "X" indican que el valor numérico está expresado en el sistema hexadecimal o base 16 y "nnnn" o "NNNN" es el código unicode expresado con dígitos del "0" al "9" y letras desde la "A" hasta la "F" (mayúsculas o minúsculas).

Usar cualquiera de estas tres notaciones no generar error; pero hace que el código HTML sea más difícil de leer o mantener. Por ejemplo:

      <p>Este c&oacute;digo HTML est&aacute; escrito con referencias de caracteres con

     nombres y es muy dif&iacute;cil de leer<p>

      <p>Este c&#243;digo HTML est&#225; escrito con referencias de caracteres con

      n&#250;meros decimales y es muy dif&#237;cil de leer<p>

      <p>Este c&#xF3;digo HTML est&#xE1; escrito con referencias de caracteres con

      n&#xFA;meros hexadecimales y es muy dif&#xED;cil de leer<p>

Para mayor información puede consultar el siguiente vídeo:

Evaluación de Editores de Páginas Web

El objetivo de este curso es que aprendamos a crear páginas web. Para lograr esto no es necesario un editor de páginas web especializado, podemos usar en Windows el Notepad o Bloc de Notas. Si bien lo anterior es muy cierto, también lo es que realmente sí necesitamos de un editor de páginas web si vamos a desarrollar páginas web de manera profesional, por lo que necesitamos que ciertas funciones estén disponibles para que seamos productivos.

Este artículo corresponde a la actividad 15 del módulo 2, del curso Introducción al Desarrollo Web I. Consideré importante agregarlo al blog, ya que las actividades generalmente las he publicado en el foro del curso.

Parafraseando un poco esta actividad, debemos buscar varios editores, los debemos probar y debemos decidir con cuál nos encuentramos más cómodos. Y luego publicamos en el foro del curso los resultados de nuestra búsqueda.

Realmente evaluar editores en nuestro nivel de conocimientos es muy arriesgado.

Haciendo la salvedad de que soy un novato en el tema, aportaré mis apreciaciones:

Actividades

1. La lista de editores de páginas web que has evaluado.

Luego de hacer una búsqueda en la web sobre los editores más renombrados, ubiquélos siguientes (ya Notepad++ había sido descargado y usado en actividades previas):

• Notepad++ v7.5.6
• Atom v1.25.1 
• Sublime 3.0 Build 3143 
• Kompozer 0.7.10 

2. Las ventajas y desventajas de cada uno.

     Notepad++

• Es muy liviano, fácil de descargar e instalar
• Es muy intuitivo 
• Fácil de configurar, todo por opciones como cualquier aplicación que hayamos usado antes en Windows 
• No está pre-configurado para HTML, por lo que hay que hacer algunas configuraciones para que se activen ciertas características que en otros editores ya están activas y pareciera que el editor es superior a Notepad++ 
• Muestra las etiquetas HTML en colores, así como también otros elementos 
• Tiene opción de autocompletar 
• Tiene opción de apertura/cierre de etiquetas, que coloca la de cierre automáticamente cuando se coloca la de apertura 
• No tiene vista en tiempo real de lo que presentaria el navegador; pero si dispone de una opción en el menú que al seleccionarla abre la página en una pestaña de nuestro navegador predeterminado 

     Sublime

• Es muy liviano, fácil de descargar e instalar
• No es muy intuitivo, es necesario consultar documentación para poder conocer cómo funciona el editor y realizar las tareas que queremos hacer 
• No es que sea dificil configurarlo; pero necesitamos consultar en la web la forma cómo editar los archivos de configuraciones. Seguramente esta característica lo hace más extensible; pero para usuarios novatos lo hace más complicado 
• Entre las carácterística que como editor HTML tiene 
• Muestra las etiquetas HTML en colores, así como también otros elementos 
• Tiene opción de autocompletar 
• Tiene opción de apertura/cierre de etiquetas, esta opción funciona mejor que en los otros editores evaluados. Puede colocar el cierre de las etiquetas de forma automática si las seleccionas al autocompleta. Además al tratar de cerrar una etiqueta previamente abierta, automáticamente cierra la última que se abrió, cosa que me parece muy cómodo cuando copiamos y pegamos el contenido de la página que estamos editando 
• No tiene vista en tiempo real de lo que presentaria el navegador; pero si dispone de una opción en el menú contextual, que abrimos en el área de edición, que al seleccionarla abre la página en una pestaña de nuestro navegador predeterminado 

      Atom

• No es tan liviano como los anteriores, tarda un poco pero en descargar e instalar
• No es muy intuitivo, es necesario consultar documentación para poder conocer cómo funciona el editor y realizar las tareas que queremos hacer 
• No es que sea dificil configurarlo; pero necesitamos consultar en la web la forma cómo instalar y activar los paquetes de configuración. Al igual que Sublime esta característica lo hace más extensible; pero para usuarios novatos lo hace más complicado de usar 
• Entre las carácterística que como editor HTML tiene 
• Muestra las etiquetas HTML en colores, así como también otros elementos 
• Tiene opción de autocompletar 
• Tiene opción de apertura/cierre de etiquetas, que coloca la de cierre automáticamente cuando se coloca la de apertura 
• No tiene vista en tiempo real de lo que presentaria el navegador; pero si dispone de una opción en el menú contextual, que abrimos en el área de edición, que al seleccionarla abre la página en una pestaña de nuestro navegador predeterminado 

      Kompozer

• Es muy liviano, fácil de descargar y no requiere instalarlo. Se baja en un archivo comprimido y se descarga en el directorio deseado
• No es muy intuitivo, es necesario consultar documentación para poder conocer cómo funciona el editor y realizar las tareas que queremos hacer 
• No tiene muchas opciones de configuración ni extensión. La versión obtenida data del 2007, por lo que no está a la par de los otros editores en cuanto a esta característica 
• Entre las carácterística que como editor HTML tiene 
• Muestra las etiquetas HTML en colores, así como también otros elementos 
• No tiene opción de autocompletar 
• No tiene opción de apertura/cierre de etiquetas. Posee un editor de etiquetas HTML que es una vista del código; pero con elementos HTML. Puedes editar el código y al mismo tiempo en el editor HTML se verán los objetos etiquetas HTML y viceversa 
• Tiene vista en tiempo real de lo que presentaria el navegador Mozzila 

3. El editor de páginas web que has seleccionado. 

      El editor que utilizaré es: Notepad++

4. Las razones que te han llevado a tomar esa decisión.

• Por ahora hace lo que el curso ha exigido
• Es liviano y rápido 
• Configuré autocierre automático de etiquetas. Aunque el de Sublime me parece mejor 
• Es el que se usa en el curso 

Espero haber sido objetivo y que los aspectos que tomé en cuenta sean los mínimos necesarios para  para una evaluación muy básica de estos editores.

HTML: problemas con los editores

Elegir un buen editor de HTML es algo que depende de cada quien. Depende de que tan cómodo te sientas con el editor, ya que la mayoría hacen lo mismo. Algunos tienen más funciones que otros por lo que tal vez podrían ser más versátiles y útiles. De acuerdo a las características que ofrecen unos son gratuitos y otros no.

Para editar HTML no se requiere de grandes editores especializados. Bajo Windows se puede utilizar el editor Notepad o Bloc de Notas; mientras que en Linux o Unix se puede utilizar el Vi.

Si usamos Notepad, hay que tener cuidado de guardar el archivo con extensión ".html", de lo contrario el navegador no lo procesará correctamente.

Problemas similares pueden suceder con otros editores y en otros sistemas operativos. Hay que verificar la configuración del editor utilizado y ajustar ciertos parámetros.

Para mayor información puede consultar el siguiente vídeo:

HTML: enlaces

Hipertexto

Ya vimos que con el hipertexto podemos leer un documento de una forma no-secuencial. El hipertexto está compuesto por:

• Nodos o secciones, que es la parte del hipertexto que contiene información accesible para los usuarios, las páginas web.
• Enlaces o hipervínculos, son las uniones, relaciones o vínculos entre los nodos. Es decir son los caminos o puentes que se construyen y que nos permiten saltar entre una página web y otra.
• Anclajes, son los puntos de activación de los enlaces.

Enlaces

Los enlaces intra-documentales son aquellos que hacen referencia a un punto dentro de la página que lo contiene.

Los enlaces extra-documentales son aquellos que hacen referencia a otra página html o a un punto de otra página html.

La etiqueta que se utiliza en HTML para definir los enlaces es <a href="#nombre">enlace</a>.

En la página se muestra el texto "enlace" y es el punto activo que el usuario debe seleccionar para activarlo e ir al destino especificado.

En el atributo href se especifica el destino del enlace, que puede ser una página externa o un punto interno dentro del documento actual.

Para definir el punto específico de un enlace intra-documento tenemos:

• Con el atributo "name" en la etiqueta "<a>": <a name="nombre">texto</a>. Donde "nombre" es el mismo valor utilizado en el atributo "href"
• Con el atributo "id" en cualquiera de las etiquetas HTML:
• <h1 id="nombre">...</h1>
• <p id="nombre">...</p>

En una página web se pueden definir varios enlaces hacia un mismo destino. Lo que no se puede hacer es crear varios destinos con el mismo nombre.

Los enlaces extra-documentales tienen la forma <a href="url">enlace</a>. Donde "url" es la ruta completa de la página web.

La URL es la forma estándar de acceder a un archivo o recurso en la web. Recordemos la sintaxis de una url:

<servicio>://<usuario>:<contraseña>@<host>:puerto/<ruta>/<recurso>

donde:

• <servicio>: es el protocolo usado
• <usuario> y <contraseña>: son las credenciales necesarias para acceder al <host>
• <host>: equipo al que se accede y donde reside el <recurso>
• <puerto>: canal donde se realiza la conexión
• <ruta>: ubicación del <recurso> en el <host>
• <recurso>: archivo o recurso al que se está accediendo

Ejemplos de url:

• http://idesweb.es/temario
• ftp://ftp.ua.es/pub/software/listado.txt
• mailto:pedro.perez@gmail.com

Sugerencias al definir un enlace:

• Escribir los nombres en minúsculas.
• Usar caracteres del alfabeto inglés, el guión "-" y el carácter subrayado "_".
• No almacenar paginas cuyos nombres incluyan espacios en blanco y menos usarlos en la definición de enlaces.
• No utilizar rutas físicas o que apunten a rutas locales de tu computador, ya que los enlaces fallaran cuando la página se publique en la web.

Para mayor información puede consultar el siguiente vídeo:

HTML: listas (1)

Existen en HTML 4 y HTML5 tres tipos de listas:

• Las listas no ordenadas que se definen con las etiquetas <ul>...</ul>. "ul" es el acrónimo de "unordered list". Los elementos de este tipo de listas se indican con símbolos (círculos, cuadrados, rombos, etc.).
• Las listas ordenadas que se definen con las etiquetas <ol>...</ol>.  "ol" es el acrónimo de "ordered list". Los elementos de este tipo de listas se indican una secuencia (números, letras, números romanos, etc.)
• Las listas de descripción que se definen con las etiquetas <dl>...</dl>. "dl" es el acrónimo de "descriptión list". Los elementos de este tipo de listas se indican con un aumento del margen izquierdo.

Dentro de las etiquetas de cada tipo de lista se definen los elementos que la componen:

• Los elementos de las listas no ordenadas y ordenadas se definen con las etiquetas <li>...</li>. "li" es el acrónimo de "list item".
• Los elementos de las listas de descripción se definen con las etiquetas:
• <dt>...</dt> definen los términos de la lista.
• <dd>...</dd> definen descripciones de cada término. Puede haber cero o más descripciones de términos por cada término.

Lista No-Ordenada

Definición:

   <ul>

      <li>Elemento 1</li>

      <li>Elemento 2</li>

      <li>Elemento 3</li>

   </ul>

Muestra:

• Elemento 1
• Elemento 2
• Elemento 3

Lista Ordenada

En HTML 4 y HTML 5 existen varios atributos que permiten cambiar el comportamiento por defecto de las listas:

• start: Indica el inicio de la secuencia.
• type: Indica el formato de la secuencia:
• A: Letras mayúsculas
• a: Letras minúsculas
• I: Números romanos en mayúsculas
• i: Números romanos en minúsculas

En HTML 5 se especificó el atributo booeano "reversed" para indicar que la secuencia es descendente.

Definición de una lista ordenada descendente:

   <ol reversed="reversed">

      <li>Elemento 1</li>

      <li>Elemento 2</li>

      <li>Elemento 3</li>

   </ol>

Muestra:

   3. Elemento 1
   2. Elemento 2
   1. Elemento 3

Lista de Descripción

Definición:

   <dl>

      <dt>HTML</dt>

         <dd>HyperText Markup Language</dd>

      <dt>HTTP</dt>

         <dd>HyperText Transfer Protocol</dd>

      <dt>URL</dt>

         <dd>Uniform Resource Locator</dd>

   </dl>

Muestra:

   HTML

             HyperText Markup Language

   HTTP

             HyperText Transfer Protocol

   URL

             Uniform Resource Locator

Listas Anidadas

Definición:

   <ul>

      <li>Elemento 1 - Lista de Nivel 1</li>

         <ul>

            <li>Elemento 1 - Lista de Nivel 2</li>

            <ul>

               <li>Elemento 1 - Lista de Nivel 3</li>

            </ul>

            <li>Elemento 2 - Lista de Nivel 2</li>

         </ul>

      <li>Elemento 2 - Lista de Nivel 1</li>

      <li>Elemento 3 - Lista de Nivel 1</li>

         <ul>

            <li>Elemento 1 - Lista de Nivel 2</li>

            <li>Elemento 2 - Lista de Nivel 2</li>

         </ul>

   </ul>

Muestra:

• Elemento 1 - Lista de Nivel 1
• Elemento 1 - Lista de Nivel 2
• Elemento 1 - Lista de Nivel 3
• Elemento 2 - Lista de Nivel 2
• Elemento 2 - Lista de Nivel 1
• Elemento 3 - Lista de Nivel 1
• Elemento 1 - Lista de Nivel 2
• Elemento 2 - Lista de Nivel 2

Para mayor información puede consultar el siguiente vídeo:

HTML: conceptos básicos (parte 4)

Las siguientes son algunas reglas básicas que se deben seguir a la hora de desarrollar páginas web:

• Las etiquetas siembre deben estar cerradas. No se deben dejar elementos cuya definición comience con una etiqueta y no se coloque la respectiva etiqueta de cierre. Ejemplo:

<p>Esto es incorrecto. Falta la etiqueta de cierre.

<strong>Esto también es incorrecto. Falta la etiqueta de cierre.

<p>Esto es correcto. Tiene la etiqueta de apertura y la de cierre.</p>

<strong>Esto también es correcto.<strong>

• Los elementos anidados también deben estar correctamente definidos. Al anidar elementos colocamos una etiqueta de apertura y debemos cerrar esta definición antes de cerrar una definición previa. La última etiqueta de apertura debe ser la primera en cerrar.

<p>Esto es incorrecto. <strong>Las etiquetas de cierre están invertidas.</p></strong>

<p><strong>Esto es correcto.</strong> Las etiquetas de cierre están en el orden correcto.</p>

• Se recomienda que las etiquetas sean escritas en minúsculas. Esto es algo opcional; sin embargo, según mi percepción, la mayoría las usa en minúsculas, por lo que será más cómodo y natural para otra persona que necesite consultar el código, si las etiquetas están en minúscula. Pero, como indiqué, queda a criterio del desarrollador.

<p>Etiquetas en minúscula</p>

<strong>Etiquetas en minúscula</strong>

<P>Etiquetas en mayúscula</P>

<STRONG>Etiquetas en mayúscula</STRONG>

• Se recomienda que los valores de los atributos siempre estén entre comillas simples o dobles. Aunque hay versiones de HTML que permiten que los atributos no lleven comillas, la página web podría ser procesada por un navegador cuya versión de HTML sí lo requiera y los resultados no sean los esperados.

<p class=no_recomendable>

<p class="recomendable">

<p class='recomendable'>

• Se recomienda que para nombrar a nuestras páginas web hagamos uso de los caracteres del "0" al "9", letras mayúsculas "A" a la "Z", letras minúsculas de la "a" a la "z", el guión "-" y el carácter de subrayado "_". Se podrían usar otros caracteres; pero en algunas versiones de HTML no están permitidos y lo que se desea es que nuestra página web funcione sin problemas en la mayor cantidad posible de navegadores.

• La extensión a usar en las páginas web debe ser ".htm" o ".html".

• Ya se indicó el uso obligatorio de las etiquetas <title>....</title>. Con ellas especificamos el título de la páginas. Es importante y necesario colocar  un título acorde con el contenido de la página por las siguientes razones.
• El título es usado por los navegadores para identificar los resultados de una búsqueda.
• Un buen título ayuda a mejorar el posicionamiento de la página en la web.
• El título de la página se  muestra en las pestañas de nuestro navegador cuando tenemos varias páginas abiertas.
• El título de la página se usa como valor por defecto cuando queremos almacenar la dirección de la página web en la sección de marcadores o favoritos de nuestro navegador. Un buen título ayuda a identificar rápidamente la página web de entre los marcadores y favoritos almacenados.

Para mayor información puede consultar el siguiente vídeo:

HTML: conceptos básicos (parte 3)

Existen muchos editores de texto para escribir el código de una página web. Notepad++ es un editor de texto muy poderoso y liviano, que nos permite crear más fácilmente una página web.

Con Notepad++ tenemos una variedad de herramientas que facilita la actividad de escribir el código de una página web. Así tenemos que las etiquetas las muestra con otro color diferente al texto o contenido. Adicional a las herramientas que posee, podemos también instalar unos complementos o pluggins que nos habilita otras que no vienen originalmente con el instalador del software.

Para una demostración en vivo de como podemos editar nuestras páginas web, usando Notepad++, pude consultar el siguiente vídeo:

HTML: conceptos básicos (parte 2)

En este artículo se utilizará el bloc de notas para construir una página web sencilla. Este es el código de nuestra primera página web que puede escribir o copiar y pegar en el bloc de notas:

<html>

   <head>

      <title>El Lenguaje HTML</title>

   </head>

   <body>

      <h1>El Lenguaje HTML</h1>

      <h2>Nacimiento de HTML</h2>

      <p>HTML fue desarrollado por <strong>Tim Berners-Lee</strong> cuando por vez primera se</p>

      <p>conectó a un servidor web en 1990.</p>

      <h2>Estandarización de HTML</h2>

      <p><strong>El World Wide Web Consortium (W3C)</strong> es el encargado del desarrollo y</p>

      <p>estandarización de HTML. Actualmente <em>HTML 5</em> es su última versión.</p>

   </body>

</html>

Una vez que haya ingresado el código anterior, o lo que usted desee, tomando el código anterior como una guía, proceda a guardarlo, teniendo en cuenta que la extensión del archivo debe ser ".html". Esto se logra seleccionando en el menú "Guardar como..." y en la ventana "Guardar como" debe indicar el nombre del archivo seguido de la extensión ".html", seleccionar "Todos los archivos (*.*)" en el campo "Tipo" y hacer click en el botón "Guardar". Seleccione también antes de guardar la codificacion "UTF-8".

Para una demostración en vivo puede consultar este vídeo:

HTML: conceptos básicos (parte 1)

El lenguaje HTML está formado por etiquetas encerradas entre los signos "<" y ">". Este es un ejemplo de una etiqueta: <etiqueta>. La última versión de HTML está compuesto por más de 100 etiquetas.

Las páginas web están compuestas en su forma más atómica por elementos. Un elemento de una página web se define entre dos etiquetas, una de abertura, que da inicio a la definición del elemento y otra de cierre, que como su nombre lo indica cierra o concluye la definición de dicho elemento. La etiqueta de cierre es como la etiqueta inicial, con la diferencia que incluye una barra inclinada colocada inmediatamente después del carácter "<". Ejemplos de etiquetas: <body>...</body>.

  <p class="nombre_de_clase">Este texto es el contenido del elemento que estamos definiendo</p>

Lo anterior es un ejemplo de un elemento que define un párrafo. Los párrafos se definen con las etiquetas <p>...</p>. Las etiquetas de apertura pueden contener atributos (en el ejemplo anterior "class" es un atributo) que pueden contener un valor ("nombre_de_clase"). Entre las etiquetas de apertura y cierre está el contenido del elemento, el cual puede ser un texto u otras etiquetas. Las etiquetas de cierre no tienen atributos.

Existe en los navegadores una opción para ver el código html de una página web. Se puede seleccionar esta opción haciendo click con el botón derecho del mouse sobre un área de la página que no contenga ningún elemento activo o desde el menú principal, generalmente está ubicado dentro de la opción "Ver" o "Herramientas", según el navegador usado.

Los elementos que se definen en una página web se escriben ciertas reglas gramaticales que facilitan su lectura para otros desarrolladores y para poder realizar futuros cambios o corregir errores. Por ejemplo, los elementos se pueden indentar y anidar. Es decir, podemos definir elementos dentro de otros elementos.

   <p><strong>Este texto se mostrará en negrita</strong>. Este texto no se mostrará en negrita.<p>

El elemento anterior, en su todo está definido entre las etiquetas <p>...</p>. Se puede observar que dentro también está definido otro elemento entre las etiquetas <strong>...</strong>. Como lo indican las oraciones, una parte del párrafo se mostrará en negrita y la otra no. El resultado del elemento anterior podría ser algo como:

                  Este texto se mostrará en negrita. Este texto no se mostrará en negrita.

Como se puede apreciar, las etiquetas no se muestran, sino que además de definir el elemento realizan alguna acción sobre él y definen su comportamiento.

Como todo lenguaje, HTML, está formado por un vocabulario compuesto de palabras que tienen un significado y de una gramática compuesta por reglas que indican la manera como se pueden combinar las palabras del vocabulario para formar oraciones, sentencias y párrafos.

Etiquetas Básicas de HTML

<html>: Es la etiqueta raíz o principal. Solo puede haber una. La página web se debe escribir entre estas etiquetas.

<head>: Define la primera parte de una página web, la cabecera. Lo que aquí se coloca, generalmente no se muestra cuando visualizamos la página web en un navegador. Aquí se especifican los metadatos, que suministran información de la página web o indican instrucciones sobre cómo debe procesarse.

<title>: Esta es una etiqueta obligatoria, sólo puede haber una, y debe escribirse anidada, dentro de la etiqueta <head>. Se utiliza para especificar el título de la página web.

<body>: Esta etiqueta define la segunda parte de la página web, el cuerpo. Lo aquí especificado es el contenido de la página web que es mostrado por el navegador.

<h1>, <h2>, ... , <h6>: Son etiquetas para indicar títulos y encabezados dentro del cuerpo de la página. Estas etiquetas indican ciertos niveles de relevancia o importancia, siendo <h1> el de mayor importancia y <h6> el menos importante. Se utilizan para definir títulos de primer, segundo, tercer nivel, etc.

<p>: Define párrafos de texto.

<strong>: Se utiliza para resaltar o destacar un texto, oración o párrafo en negrita.

<em>: Define un texto enfatizado.

Para mayor información puede consultar el siguiente vídeo:

Historia de HTML

HTML nace en Noviembre de 1990 cuando Tim Berners-Lee hizo su primera conexión a una página web creada con este lenguaje. HTML se desarrolló a partir del estándar SGML (por sus siglas en inglés de Standard Generalized Markup Language) o lenguaje de marcado generalizado estándar, que, según Wikipedia,  es un estándar, ISO 8879 de 1986, para definir lenguajes de marcado generalizados para documentos. 

Desde 1990 hasta 1993, las versiones de HTML no estaban estandarizadas. La primera especificación de HTML se realiza con la publicación de  HTML Tags realizada por Tim Berners-Lee. 

En Junio de 1993, Tim Berners-Lee publica HTML 1.0, el primer estándar de HTML. 

Entre Julio a Noviembre de 1993, se desarrolló la especificación HTML+, la cual no se logró estandarizar; pero sí logró importantes avances. Incluía entre sus características: encabezados, párrafos, listas, figuras, tablas, formularios, texto preformateado y fórmulas matemáticas. 

En Noviembre de 1995, IETF (Internet Engineering Task Force) publica HMTL 2.0 que fue el primer estándar de HTML. 

W3C publica su primera versión estandar de HTML en Enero de 1997, HMTL 3.2. Esta revisión incorpora los últimos avances de las páginas web desarrolladas hasta 1996, tales como applets de java.

El 24 de Abril de 1998 W3C publicó HTML 4.0 y supone un gran salto desde las versiones anteriores. Entre sus novedades más destacadas se encuentran las hojas de estilos CSS, la posibilidad de incluir pequeños programas o scripts en las páginas web, mejora de la accesibilidad de las páginas diseñadas, tablas complejas y mejoras en los formularios. Esta versión fue revisada y en Diciembre de 1999 fue publicado HTML 4.01.

Luego de esto, W3C se concentró en desarrollar un meta-lenguaje que sirviera de marco para el desarrollo de nuevos lenguajes, el XML. En Diciembre de 2000 se publicó XHTML, que es HTML 4.01 bajo las especificaciones de XML 1.0. Es decir, XHTML 1.0 utiliza las mismas etiquetas de HTML 4.01; pero con reglas más estrictas en la validación de los documentos definidos. En Agosto de 2002 se publicó una revision de XHTML, la versión 1.01.

Siendo que HTML cumplía bien su función, ¿para qué complicarnos con XHTML?. La comunidad de desarrolladores web continuó usando HTML y como W3C lo había abandonado para desarrollar XHTML, motivaron en el 2004 a Apple, Mozilla y Opera a crear el grupo WHATWG (Web Hypertext Application Technology Working Group) para retomar el desarrollo de HTML y crear el nuevo estándar HTML 5. Como XHTML no tuvo el éxito esperado, W3C canceló el proyecto y en Marzo de 2007 se integró a WHATWG para participar en el desarrollo de HTML 5.

W3C publicó HTML 5 en Octubre 2014. Se especificaron dos sintaxis, la clásica HTML5 y una variante  XHTML, llamada XHTML5.

Si desea obtener mayor información puede consultar los siguientes recursos:

HTML 5

Breve historia de HTML

Prototipado: wireframes, mockups y prototipos

Según Jesse James Garret, en su libro "Los Elementos de la Experiencia de Usuario", un Arquitecto de Información es el encargado de:

• Identificar los objetivos del proyecto.
• Identificar las necesidades de los usuarios.
• Especificar los requerimientos y las funcionalidades de la aplicación web.
• Definir y diseñar los sistemas de navegación, organización, etiquetado y búsqueda.
• Generar un prototipo de la aplicación web.

Los Arquitectos de Información se apoyan en la diagramación y prototipado para especificar la organización, estructura, navegación y funcionamiento de la aplicación o sitio web.

Los planos elaborados por los Arquitectos de Información se les llama blueprint, diagramas de contenido o flujo o  mapa web.

La diagramación de una aplicación web, debe ser clara, precisa y comprensible. Debe reflejar la estructura, el flujo de navegación y la relación entre los elementos que componen la página o sitio web. Existen diferentes propuestas de lenguajes o vocabularios de diagramación.

Otro elemento utilizado en el diseño web son las Maquetas. Las Maquetas son diagramas de presentación, cuya finalidad es crear una referencia visual de la estructura, organización e interacción a nivel de página. Pueden ser: Prototipos de baja fidelidad y Prototipos de alta fidelidad.

Los prototipos de baja fidelidad son dibujos estáticos. Se denomina Sketching a la técnica que usamos para elaborar un boceto rápido e informal con lápiz y papel con la intención de mostrar o transmitir una idea o concepto con rapidez y claridad. Se utiliza en las reuniones iniciales con el cliente, en reuniones o tormentas de ideas con el equipo de trabajo. Con el sketching podemos rápidamente proponer varias ideas o alternativas sin gastar muchos recursos y tiempo.

Los Wireframes son diagramas más elaborados y especifican cuál es el contenido que debe tener cada página. Se muestran cabeceras, títulos, enlaces, listas, formularios, etiquetado de los títulos, el layout de la página (ubicación, distribución o agrupación de los elementos de la página, estrategia de navegación y priorización de contenidos en la página. En los wireframes también se colocan notas asociadas a los elementos para indicar ´como deben mostrarse o definir su comportamiento funcional. Una secuencia de Wireframes se conoce como StoryBoard.

Los prototipos funcionales son prototipos de alta calidad que permiten detallar el proceso interactivo de una o varias tareas. También denominados como Mockups. Son prototipos o maquetas dinámicas en HTML que simulan funciones del sitio. Tienen implementados o simulan parte de la página web a desarrollar.

Es importante el prototipado y tiene las siguientes ventajas:

• El equipo y el cliente se centran en el diseño de contenidos e interacción.
• El cliente ve y comprende cómo será su aplicación.
• Evita confusiones y malos entenidos entre el Proveedor y el cliente y entre los mismos miembros del equipo.
• Ayuda a especificar los requerimientos 
• Es un complemento de gran valor en el análisis.
• El prototipo se puede modificar con facilidad y rápidez.
• Con el prototipo se busca detectar problemas con anticipación y evitar modificaciones que serían mucho más costosas cuando la aplicación se esté o haya sido implementada.
• Se reducen costos y tiempos de desarrollo.
• Permiten hacer pruebas de usabilidad y test con usuarios.
• Se busca obtener aplicaciones web más fáciles de entender y usar que se ajustan a las necesidades de los usuarios

En resumen, con el prototipado se busca:

• Menor tiempo de desarrollo posterior.
• Mayor calidad del resultado final.
• Obtener mayor satisfacción del cliente y del usuario final.

Caracteríticas de un buen prototipo:

• Deben ser Sencillos y claros.
• No usuar colores llamativos, preferiblemente en blanco ynegro.
• Representa los tamaños y proporciones de los bloques de contenido.
• Tomar en cuenta las pautas de accesibilidad y usabilidad.
• El prototipo debe estar orientado hacia los usuarios.

Para mayor información puede consultar el siguiente vídeo: