HTML: Formularios - Parte 2

En esta entrada continuaremos con la programación de formularios en HTML.

Select

Con <select> podemos definir en formularios listas desplegables y listas de selección múltiple. Entre sus atributos tenemos:

• name: Al igual que todos los controles que forman un formulario, <select> tiene este atributo. Es el nombre de la lista que se está definiendo.
• multiple: Con el atributo "multiple" estamos indicando que se pueden seleccionar varios elementos de la lista.

Option

Con <option> vamos a definir los elementos que componen nuestras listas. Esta es una etiqueta que tiene etiqueta de cierre. Su forma básica es la siguiente: 

<option value="valor">

     texto

</option>

• value: En este atributo se especifica el valor que será enviado cuando el usuario haya seleccionado este elemento. Cuando se despliegue la lista se mostrará el "texto" especificado entre las etiquetas de apertura y cierre.

Optgroup

Con <optgroup> podemos crear agrupadores de opciones. De esta forma le damos una mejor presentación a nuestra lista. Los elementos agrupadores se muestran en la lista; pero no son seleccionables.

<optgroup label="texto"

     <option value="valor">texto</option>
     <option value="valor">texto</option>

</optgroup>

• label: El "texto" indicado en este atributo es el que será mostrado en la lista desplegable, al principio de todos los elementos que agrupa.

Textarea.

Para poder agregar texto con más de una linea disponemos de la etiqueta <textarea>.

• name: Es el nombre del campo tipo <textarea>.
• cols: Permite indicar el ancho del control <textarea>. Por defecto es de 20 caracteres. 
• rows: Con "rows" especificamos el alto de nuestro control. Por defecto es de "2" filas.

Ejemplo:

<textarea name="observaciones" cols="40" rows="5"</textarea>

Label

La etiqueta <label> permite asociar un texto a un control, de tal manera que cuando el usuario haga click sobre este texto, el foco lo reciba su control asociado.

• for: Mediante este atributo se asocian el control especificado y el texto entre las etiquetas de apertura y cierre. 

<label for="nombres">Nombres: </label>

<input type="text" name="nombres" id="nombres" />

<br />

Estamos viendo que existe el atributo "id" que puede ser utilizado con las diferentes etiquetas que nos permiten definir controles del formulario. Este atributo define un identificador para el control, mediante el cual se puede utilizar para identificar el control. En este caso permite asociar la etiqueta <label> con la etiqueta <input>.

Fieldset

Permite agrupar distintos controles que tienen alguna relación entre sí. Por ejmplo podemos agrupar con un <fieldset> los datos personales y con otro <fieldset> los datos correspondientes a la educación de la persona. Dibuja un marco entre los componentes que estan entre las etiquetas <fieldset>....</fieldset>.

<fieldset>

     <input type="text" name="nombres" />

     <input type="text" name="apellidos" />

</fieldset>

Legend

Con <legend> podemos asignar un título a los elementos agrupados con <fieldset>. Estas etiquetas deben ir dentro de las etiquetas <fieldset></fieldset>

<fieldset><legend>Datos Personales</legend>

     <input type="text" name="nombres" />

     <input type="text" name="apellidos" />

</fieldset>

Consejos

• Usar <textarea> en lugar de <input type="text" /> cuando lo esperado es un texto de varias líneas.
• Cuando hayan más de dos opciones usar <select> en lugar de <input type="radio" ... />.
• Usar <label> para mejorar la usabilidad de los controles <input>.

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

HTML: Formularios - Parte 1

Un formulario web (en inglés web form) permite al usuario introducir datos para que sean enviados a un servidor web para que sean procesados.

Usamos formularios cuando ingresamos nuestros datos al registrarnos en un sitio web, al realizar búsquedas con un buscador, al realizar compras electrónicas. En fin los formularios están presente en prácticamente en todos los sitios web.

La intención de usar un formulario es proporcionar una forma en que nuestros usuarios puedan ingresar datos a nuestro sitio web. Los formularios actúan tanto del lado cliente (cuando el usuario ingresa los datos), como del lado servidor (cuando los datos son enviados para ser procesados o almacenados).

Etiquetas para formularios

Form

Es la etiqueta que contiene el formulario. Todo lo que se desea enviar al servidor debe estar entre las etiquetas <form> y </form>. Atributos:

• action: Es un atributo requerido en la etiqueta <form>. En "action" podemos especificar la "url" o ruta destino que va a procesar el formulario. Se puede utulizar una ruta absoluta o una ruta relativa.
• method: Es un atributo opcional. Especifica el método de envío del formulario. Puede tener dos opciones que son "GET" que es la opción por defecto de no especificarla y "POST". 
• GET: Cuando especificamos "GET", los datos son enviados al servidor unas parejas del tipo "nombre = valor" que se agregan a la url y son visibles. Esta forma de envío está limitada, cuyo límite depende del navegador usado o del sistema operativo del servidor. Usamos GET cuando la información no es importante y en formularios básicos o sencillos.
• POST: De esta forma, los datos no son visibles y se envían de una forma más segura. Por otro lado no hay limitaciones en el tamaño del envío, por lo que inclusive pueden ser enviados archivos. 
• accept-charset: Para especificar una lista de juegos de caracteres separados por comas. Los más usados son UTF-8 e ISO-8859-1 (alfabeto latino).
• enctype: Especifica el tipo de codificación.
• application/x-www-form-urlencoded: los espacios son reemplazados con signos más ("+") y los caracteres especiales son convertidos a valores HEX. Este es el valor por defecto.
• multipart/form-data: no se aplica ninguna codificación. Este valor es necesario para la subida de archivos.
• text/plain: solo los espacios son reemplazados por signos más ("+").

Input

Con <Input> podemos definir los diferentes campos de entrada de datos con los que va a contar nuestro formulario. La etiqueta <input> no tiene etiqueta de cierre. Por lo que su formato será de la siguiente forma: 

<input ....   />

Atributos de <Input>:

• name: Es el nombre del campo que va a recibir los datos ingresados por el usuario. Para campos independientes debe ser único dentro del formulario. En el caso de campos tipo "checkbox" o "radio", todos los componentes del mismo grupo deben compartir el mismo valor de "name".
• type: Define el tipo de entrada de datos. Puede tomar los siguientes valores:
• text: define un control para ingresar texto en una sola línea. Si se omite el atributo "type", por defecto se asume que el control es de tipo "text".
• checkbox: define un control de tipo casilla de verificación.
• radio: define un control de tipo casilla de opciones.
• file: muestra un botón que abrirá una ventana para que el usuario seleccione la ubicación y el archivo que se desea enviar. Es importante acotar que si deseamos permitir el envío de archivos a través de un formulario el atributo "enctype" de la etiqueta "form" debe ser iniciado a "multipart/form-data".
• password: define un control para entrada de contraseñas. Lo que se ingrese se muestra enmascarado. Todos los atributos que aplican para los campos tipo "text" funcionan con campos de este tipo.
• hidden: define un control oculto. En este tipo de controles el usuario no puede ingresar datos. Es útil para mantener valores de estado o ciertos valores útiles durante la ejecución del formulario. En los campos de este tipo sólo son útiles los atributos "name" y "value".
• button: mostrará un botón para realizar alguna acción. La utilidad de este control la podemos apreciar con el uso de JavaScript. para definir eventos intrusivos (código dentro de la página html) o no-intrusivos (ejecución de funciones en librerías externas).
• submit: por defecto mostrará un botón con el texto "Enviar" (depende del idioma del equipo cliente) que al seleccionarlo, ejecutará el envío del formulario según lo indicado en los atributos "action" y "method" de la etiqueta "form".
• image: mostrará un botón con una imagen que al seleccionarla, ejecutará el envío del formulario según el método indicado. Se desaconseja su uso y se recomienda sea sustituido por elementos de CSS.
• reset: mostrará un botón especial que al seleccionarlo, borrando los datos que haya ingresado el usuario; reiniciará el formulario.
• disabled: Este atributo deshabilita el campo. El campo se muestra; pero no puede ser utilizado ni modificado por el usuario. Para cumplir con estándares se debe colocar lo siguiente: disabled = "disabled".
• readonly: Parecido a "disabled". Con "readonly" indicamos que el contenido del campo se puede copiar para ser pegado en otro lugar.>
• value: Dependiendo del campo o control puede tener varios significados. 
• Para campos tipo "text" o "password", se almacena el valor que el campo tiene en algún momento y será desplegado en pantalla.
• Para botones tipo "checkbox" o "radio" especifica el valor que tendrá cuando éste haya sido seleccionado. Por defecto es "on".
• Para los botones, submit y reset, se utiliza para indicar el texto que será mostrado en el botón.
• Para campos tipo "hidden", "value" va a contener un valor que será enviado al servidor; pero que no se desea que el usuario vea.
• maxlength: Funciona con los campos tipo "text". En este atributo se puede indicar la cantidad máxima de caracteres que el usuario puede ingresar en el control. El valor debe ser un número entero.
• size: Es el tamaño del rectángulo o área de entrada de datos que se despliega en la pantalla. Por defecto es 20 caracteres. Se desaconseja se uso para ser reemplazado por las hojas de estilos (CSS).
• checked: Este atributo aplica para campos tipo "checkbox" y "radio". Indica que el campo está seleccionado. Para los controles que incluyan varias opciones del tipo "checkbox" cada una de ellas es independiente de la otra; de tal manera que todas pueden estar seleccionadas, algunas o ninguna. En el caso de controles tipo "radio" sólo una de las opciones del grupo puede ser seleccionada. Al seleccionar una se desmarcará la opción que tenía la marca.
• accept: Este atributo funciona para controles tipo "file" y determina el tipo de archivo que se permite seleccionar. No está implementado en todos los navegadores.
• alt: Se utiliza para botones tipo "image" para indicar un texto alternativo.
• alt: Se utiliza para botones tipo "image" para indicar la ruta de la imagen.

Consejos

• Todas los campos que desees enviar al servidor deben estar entre las etiquetas <form></form>. Los que no estén se desplegarán y funcionarán; pero no serán enviados.
• En una definición de campo "input" siempre colocar el atributo "type". Ejemplo: <input type="text" ...>
• Siempre colocar un botón "submit" para enviar el formulario. Ejemplo: <input type="submit" ...>
• Separar estructura y contenidos de los estilos. Todo lo relacionado con la parte visual del control dejarlo en la definición de CSS. Esto facilitará el mantenimiento de la página web.

Para mayor información y ejemplos consulte el siguiente video.

HTML5: Computación en la nube

Computación en la nube es un paradigma que está muy de moda a la hora de publicar esta entrada. Realmente no es nada nuevo ya que, desde la aparición de internet, se trata de ofrecer servicios a través de la web.

Poco a poco y  a medido que la web ha ido evolucionando se han ido incorporando a la web servicios cada vez más complejos orientados a cubrir una amplia gama de necesidades.

Ya no solo se habla de ofrecer un servicio específico, como la de gestionar nuestras cuentas bancarias mediante la web, sino la de trasladar toda nuestra infraestructura, computadores, servidores y nuestro más preciado activo, la información o datos, a la web.

Es decir, computación en la nube, implica que tanto las aplicaciones que usamos y los datos residen en servidores de la web y ya no necesitamos instalar en nuestro computador, por ejemplo, las herramientas de office (Word, Excel, Powerpoint, etc); sino que ingresas a un sitio web donde ofrecen el acceso a dichas herramientas y un espacio donde puedes almacenar tus archivos.

Muchos de los sitios que conocemos utilizan para implementar la computación en la nube la tecnología DHTML, que está conformada por una combinación de HTML, CSS, JavaScript y DOM, entre otras. Pero como siempre ha ocurrido desde su creación, la web sigue evolucionando. Aparece luego AJAX que permite que las aplicaciones sean servidas por el servidor y ejecutadas en el navegador cliente del usuario sin necesidad de recargar la página, mejorando la interactividad, velocidad y usabilidad de estas aplicaciones manteniendo una comunicación asíncrona en segundo plano con el servidor.

Para impulsar e implementar nuevas características de la computación en la nube (cloud computing) se ha desarrollado HTML5, que es la última versión al momento de HTML.

Entre las ventajas que tenemos de adoptar el paradigma de computación en la nube, tenemos:

• Movilidad total. Acceso a las aplicaciones y datos desde cualquier sitio donde tengas un computador con un navegador conectado a internet.
• Siempre actualizados. Ya no es nuestra tarea, la de estar atentos de las últimas versiones de las aplicaciones que utilizamos, ni de instalarlas y realizar conversiones a nuestros archivos. El proveedor del servicio se encarga de actualizar las aplicaciones a la última versión, así como las correspondientes conversiones que se requieran para que nuestros archivos y datos sean compatibles con dichas versiones. 
• Independencia de Hardware y Software. Ya no estamos atados a utilizar un determinado equipo o dispositivo con un sistema operativo específico. Podemos utilizar computadoras, tablets, teléfonos celulares inteligentes, etc. para acceder a nuestras aplicaciones y datos mediante el navegador conectado a internet.
• Mínima inversión. Con la computación en la nube no necesitamos comprar un computador. Desaparece el concepto de computador personal en el que teníamos nuestras aplicaciones y datos. Si nuestro equipo tenía alguna falla corríamos el riesgo de perder nuestra información. Ahora ya no tenemos que preocuparnos por fallas o daños, ya que cualquier computador o dispositivo con un navegador y conectado a internet es nuestro computador personal. Si se daña, nada pasa a nuestras aplicaciones y datos que están en la nube.
• Bien respaldados. Tampoco tenemos que preocuparnos por realizar respaldos o copias de seguridad de nuestras aplicaciones y datos. Nuestro proveedor se encarga de ello.
• Totalmente inmunes. Al estar nuestras aplicaciones en la nube, es tarea de nuestro proveedor mantener su plataforma protegida de virus y otras amenazas que atenten contra las aplicaciones y datos.

Como en todo, nada es totalmente perfecto. Así como hay muchas ventajas, el principal obstáculo a la hora de decidir a adoptar este paradigma, es la seguridad e integridad de nuestros datos. Las empresas proveedoras de servicios bajo este paradigma ofrecen servicios con mecanismos de protección muy sofisticados; pero siempre existe la posibilidad de romper estas barreras de seguridad.

En ocasiones estos sistemas fallaron y miles de usuarios se vieron afectados en la pérdida de su información. Tal es el caso de Facebook que en el año 2010 unos 150.000 usuarios perdieron los datos de sus contactos y fotos que habían publicado en su cuenta. También en Octubre del 2010, se publicó que alguien con pocos conocimientos era posible hackear una cuenta de Facebook. También en Febrero de 2011, miles de usuarios se vieron afectados al perder sus correos en sus cuentas GMail; servicio ofrecido por Google.

Un aspecto de suma importancia al considerar si trasladarnos a este paradigma es evaluar la disponibilidad del servicio de internet que se presta en nuestra zona de operaciones, ya que para empresas físicamente establecidas es necesaria tener una alta disponibilidad del servicio, cercana al 99.99% y más. Para contextos personales o pequeños grupos de trabajo que no tienen un asentamiento físico esto no es tan crítico, ya que con movilizarnos a otra zona que haya conectividad habremos resuelto nuestro problema y podemos acceder a nuestros datos mediante las aplicaciones que residen en la nube.

Para mayor información puede consultar el siguiente video.

Cómo se publica un sitio web en Internet (3): cliente FTP online

En este apartado se mostrará un ejemplo de cómo subir nuestro sitio web a un servicio de alojamiento usando el servicio ftp on line ofrecido el proveedor.

Se procederá a publicar el sitio web en Hostinger, quienes ofrecen entre sus herramientas de administración el servicio on line de ftp net2ftp.

Aquí la interfaz nos muestra el contenido del servidor de producción (hosting) y las diferentes funciones que se ofrecen para subir o descargar archivos, manipular directorios y archivos y hasta asignar permisos.

En el vídeo se muestra un ejemplo en vivo. Vamos a verlo.

Cómo se publica un sitio web en Internet (2): cliente FTP

En el siguiente vídeo se muestra un ejemplo del uso del cliente FTP FileZilla para copiar nuestro sitio web del servidor de desarrollo al servidor de producción.

El servidor de producción en este caso es el servicio de alojamiento Hostinger, el cual es gratuito y podemos usar para realizar pruebas.

Primero debemos ubicar el nombre del servidor ftp y los datos de usuario y contraseña, que vamos a usar para realizar la conexión al servidor de producción. Estos datos los suministra la empresa que ofrece el servicio de alojamiento.

Una vez efectuada con éxito la conexión, vamos a ver en nuestra pantalla cuatro paneles. Dos de estos corresponden a la estructura de directorio y contenido del servidor de desarrollo (local) y dos que corresponden al servidor de producción (hosting).

Podemos realizar el copiado, seleccionando los archivos a copiar y luego seleccionando la opción de "Subir archivos" o arrastrándolos desde el panel del servidor de desarrollo (local) hasta el panel del servidor de producción (hosting).

Muy importante es ubicar la carpeta que va a contener el sitio web, ya que si lo copiamos en otra ubicación, el sitio no se va a publicar y nadie tendrá acceso a él. En el ejemplo el sitio se copiará dentro de la carpeta "public_html".

Otro aspecto importante, es que dependiendo del servicio de hosting, la primera página de nuestro sitio web podría tener un nombre específico. En Hostinger, la primera página a mostrar debe ser "index.html". Si no se llama así, el servicio mostrará la página por defecto.

Para una explicación en vivo ver el siguiente video:

Cómo se publica un sitio web en Internet (1)

Crear un sitio web tiene un propósito. Ya sea que el sitio vaya a ser solo informativo, de gestión, e-commerce, etc., la intención es ofrecer un servicio. Para ello el sitio web debe estar en internet.

Cuando comenzamos su desarrollo, si el sitio web es pequeño, usamos generalmente nuestro computador personal. Para desarrollos mas complejos, donde participan varios profesionales donde cada integrante del grupo tiene una función, se utiliza un servidor en el cual todos tienen acceso para compartir información y ver, manipular o modificar los componentes del sitio. En ambos casos, el computador donde está alojado el sitio web durante su construcción o desarrollo, lo llamamos así, servidor de desarrollo.

El servidor de desarrollo generalmente no está configurado para mostrar páginas en internet. Para los desarrollos pequeños en un computador personal no requiere mayor configuración que tener las herramientas o software necesario para crearlo. Un servidor de desarrollo si requiere de cierta configuración para que solo tengan acceso los integrantes del equipo de desarrollo (permisología), configuración de intranet (tcp/ip), dns, etc. En el servidor de desarrollo hacemos todo lo necesario para crear nuestro sitio web.

Finalmente, cuando ya estamos satisfechos con nuestro trabajo y se cumplan los requerimientos funcionales del cliente procedemos a su publicación en la web. El computador que aloja nuestro sitio y que sí está conectado a internet para servir a las peticiones de los usuarios, se le denomina servidor de producción.

Podríamos configurar un servidor de producción propio. Esto implica que debemos tener amplios conocimientos sobre la configuración y mantenimiento de servidores. Debemos manejar temas de seguridad, sistemas operativos para servidores (Windows Server/Linux), recuperación ante caidas, etc. Como ya hemos visto existen empresas dedicadas a ofrecer los servicios de alojamiento (hosting) de sitios web, por lo que lo más recomendable es la contratación de uno de estos servicios que se ofrecen.

Ya vemos entonces que al menos tenemos dos equipos en los cuales está alojado nuestro sitio web. El servidor de desarrollo, donde se construye y el servidor de producción donde se ejecuta y está disponible en la web para el uso de nuestros usuarios.

Para publicarlo en la web, necesitamos copiar nuestro sitio web del servidor de desarrollo al servidor de producción. Para realizar esto podemos utilizar el protocolo FTP.

Requerimos tener instalado en nuestro servidor de desarrollo un cliente FTP, que nos permita conectarnos al servidor de producción y realizar el copiado del sitio web. Existen varias alternativas en clientes FTP. Windows tiene un cliente ftp por línea de comandos, que lo puedes usar conociendo los comandos de FTP. También existen otras opciones más sencillas. Para windows tenemos winscp que es gratuito y smartftp que es de pago y con 30 días de prueba sin costo. Como servicio en la web, podemos usar net2ftp, presente en muchas empresas de alojamiento.

Para mayor información puedes consultar el siguiente video:

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: