Publicando en Internet

¿Y un Blog?

• El diseño: es difícil hacer un blog diferente del resto estéticamente, todos son muy similares entre si.
• La gestión de los contenidos: normalmente se almacenan las entradas por fecha o etiquetas, y hay poca flexibilidad para crear otras formas de búsqueda/almacenamiento. Además de que se tiene una única página 'global', en lugar de poder tener varias subpáginas dedicadas a ciertos temas o contenidos específicos.
• La interactividad con los usuarios: queda limitada a la lectura/escritura de comentarios (no hay formularios, por ejemplo).
• El aprovechamiento de herramientas de HTML: como la potencia de Javascript o las hojas de estilos.

Cosillas Preliminares

Es decir, si compramos el dominio www.peachodominio.es, este se asigna a un número de IP único, como por ejemplo 192.33.45.128.
En el fichero al que acceden los DNSs, tendremos una entrada del tipo:

www.peachodominio.es 192.33.45.128

Y cualquier petición a una página dentro de ese dominio se dirigirá automáticamente a esa IP.

Vamos a echar un ojillo a esas páginas de alquiler de dominios.

Comprobad qué dominios están disponibles, intentad alquilar alguno de los que ya conozcais o parecidos (pero sin pagar, claro)... quien sabe, ¡lo mismo os podeis hacer de oro si a coca-cola se le ha olvidado comprar un subdominio!...

Probad también a acceder a páginas como "cococola.com" o "gooogle.com"... ¿existen?

Dónde alojar la página

En 'nuestro' servidor

Los pasos a seguir, una vez creada la página, pasan simplemente por copiar todos los ficheros de la misma (htmls, imágenes, estilos, etc) a un directorio que se encuentra en un servidor propio, dentro de nuestra cuenta de usuario, normalmente llamado public_html.
El fichero con la página principal (o inicial) de nuestra web podrá tener cualquier nombre, pero si se llama index.html, podremos omitirlo en la ruta de la web.

Si todo va bien, podremos acceder a nuestra página a través de la web de nuestro servidor, junto con nuestro nombre de usuario, según la forma: http://www.dominionuestroservidor.com/~nuestrousuario

El por qué de ese directorio en concreto es debido a que el programa que gestiona las páginas web (las sirve cuando se solicitan por la web), suele tener ese directorio configurado por defecto, pero podría ser cualquiera. Dicho programa es, en la gran mayoría de las veces, el archifamoso Apache.

Vamos a hacer un ejemplo y a aprender a publicar nuestra web, alojándola en un servidor propio.

Para ello seguid los pasos que se indican en el Ejemplo 1.

Comunidades virtuales

• Publicidad: casi todas las empresas que ofrecen alojamiento gratis, esperan algo a cambio y lo que hacen es meter publicidad (nada subliminal) en las páginas a las que ofrezcan alojamiento. Ahora bien, deberemos decidir dónde alojar la página en función de las características de dicha publicidad (no es lo mismo un pequeño banner arriba, que un gran banner en los laterales de todas la página con flash y muchas veces impidiendo visualizarla correctamente.
• Condiciones: Como en cualquier otro tipo de alojamiento vas a tener un espacio y una transferencia limitada, y una serie de condiciones a tener en cuenta. Algunos no dejan alojar páginas con contenido adulto, la mayoría no te dejaran alojar sitios web con contenido ofensivo, y otros no permiten alojar sitios destinados a la descarga de archivos o ponen un limite de un mega por archivo. Resumiendo, léete bien las condiciones del servicio que te ofrecen para elegir el que mejor se adapte a tus necesidades.
• Soporte técnico: Como es de esperar, no es muy boyante. Lo más común es que se ofrezca un soporte online mediante un foro en el que puedes plantear tus problemas e inquietudes o leer sobre problemas como el tuyo ya expuestos y resueltos anteriormente.

• Galeón - Hispavista
• GratisWeb
• Trypod - Lycos (Ahora Multimania)
• Angelfire - Lycos
• iEspana
• MiArroba
• FortuneCity

• FreeHostia
• Awardspace
• FreeWebs
• Newbiesite
• AtSpace

EJERCICIO:

Subid vuestra página web (o una de prueba) a uno de los servidores de alojamiento gratuitos comentados.

Si es posible, subidla a más de uno para comparar sus virtudes y defectos.

Servicios de las Comunidades virtuales

• Estadísticas y contadores, con infinidad de detalles de los accesos a nuestra página
• Soporte para PHP
• Soporte para bases de datos (no muy complejas), como MySQL
• Herramientas de creación o modificación de web, es decir, editores sencillos
• Herramientas para creación y análisis de encuestas o votaciones a/de los lectores de nuestra web
• Libros de visita, para que los usuarios nos dejen sus mensajes
• Nombres cortos para nuestra url

Alojamiento por parte de nuestro ISP

Algunos Ejemplos

- 50 Megas de espacio web
- acceso por FTP (con cliente que debemos instalar)

- Tu servidor web variará dependiendo del dominio de tu cuenta de correo:
@orange.es => ftp.orange.es
@orangemail.es => ftp.orangemail.es
@wanadoo.es => ftp.wanadoo.es
@eresmas.com => ftp.eresmas.com
@telepolis.com => ftp.telepolis.com

- Usuario: tu cuenta de correo completa
- Contraseña: la contraseña asociada a tu cuenta de correo
- La página personal estará en una url que dependerá también de nuestro dominio de correo:

Ejemplos:
juan2006@orange.es => http://perso.orange.es/juan2006
pedro2006@orangemail.es => http://perso.gratisweb.com/pedro2006
luis2006@wanadoo.es => http://perso.wanadoo.es/luis2006

Ono ofrece alojamiento, pero con un coste adicional de 2€. Sus características (algo escuetas) son:

- 100 Megas de espacio
- Contador de visitas
- Sin soporte para Bases de Datos

Además ofrece otras modalidades de hosting mucho más completas, pero a un precio más elevado.

Alojamiento de pago

• Precio: el precio medio suele ser del orden de los 30-60€ al mes para un alojamiento de calidad media (en cuanto a prestaciones, rendimiento y posibilidades), aunque dada la gran competencia que hay se pueden contratar alojamientos básicos por 3€ al mes, eso sí, con poco espacio y pocos servicios.
  En ese precio se incluye el espacio, mantenimiento de la dirección, y en general que todo funcione.
• Espacio: existen planes desde 50 Megas hasta Teras (1.000.000 de Megas), con el consecuente aumento de precio, por supuesto. En la actualidad se puede contratar casi cualquier capacidad (sin límite superior).
• Tráfico máximo: se suelen establecer límites de tráfico para evitar abusos; suelen estar alrededor de los 10 GB mensuales de media (que no es mucho si decides tener música o películas en tu sitio); lo mínimo suele ser unos 3 GB; y a partir de ahí, hay que pagar, evidentemente.
• Sistema operativo usado: el tener un proveedor permite poner los programas propios en la Web, tales como CGIs (Common Gateway Interface) y ASPs (Active Server Pages). La mayor parte de los servidores usan Linux u otro Unix (habitualmente Solaris o OS/X),muchos de ellos usan FreeBSD, y algunos usan Windows NT/2000/XP.
  Según el sistema operativo con el que uno tenga más familiaridad a la hora de programar, se elegirá uno u otro. La elección de un sistema operativo u otro (dentro de los habituales) no suele afectar mucho al precio, si bien los sistemas Linux, al ser éste de código libre/abierto, suelen ser un poco más económicos.
  El alojamiento Linux es el más adecuado si vamos a usar tecnologías como PHP, Perl, mySql y C ya que este tipo de lenguajes está optimizado para entornos Linux.
  Linux tiene fama de ser más estable y rápido, lo que significa que tendremos menos problemas de fiabilidad y de experimentar contratiempos con el servidor. Por otro lado Linux no es totalmente compatible con las tecnologías de Microsoft, por lo que si estas utilizando ASP, Access, SQL Server, .NET o Visual Basic entonces mejor escoger un alojamiento Windows.
• Acceso al servidor: Hay dos modalidades: usando FTP (transferencia remota de ficheros) o usando telnet/ssh (que permite trabajar directamente sobre el ordenador que aloja las páginas). La mayor parte ofrece solo FTP, pero el uso de Telnet/SSH (si la conexión es rápida) es mucho mejor a la hora de resolver un problema rápido, o depurar un programa en el propio ordenador en el cual se va a ejecutar. En la mayor parte de los casos, en vez de ofrecer telnet, ofrecen acceso seguro con SSH - SCP, que encripta la comunicación entre cliente y servidor.
• Programas instalados en el servidor: a la hora de diseñar páginas interactivas, se deben ejecutar ciertos programas en el servidor; cuantos más haya instalados, menos tendrá uno que instalar en su propia cuenta, y eso le permitirá ofrecer más servicios desde la página (y ocupar menos espacio). Hay algunos servidores que ofrecen servidores de bases de datos, tales como MySQL, PostgresSQL, o SQL Server (de Microsoft), lenguajes para programación de CGIs, tales como Perl o PHP, o interpretación de ASPs o de Cold Fusion. En otros casos ofrecen servicios basados en Java tales como Servlets o JSPs.
• Servicios adicionales: servidor de FTP, estadísticas y registro de usuarios, webmail, servidores de comercio electrónico o pasarela a algún servidor (una opción mucho más económica y segura), servidor seguro (que permite transacciones seguras, por ejemplo, que incluyan información confidencial tal como tarjetas de crédito).
  En la opción básica se suelen incluir estadísticas, correo web, servidor de FTP y varios de los servicios más utilizados (como PHP, CGI, ASP,...); los servicios adicionales cuestan más dinero y generalmente hay que adquirir un paquete Premium.
• Velocidad: aunque la velocidad es algo muy relativo, porque depende de donde se conecte uno, habrá que ver qué velocidad tiene desde donde uno espera que los usuarios se conecten; en muchos casos, los servidores están físicamente en Estados Unidos o el Reino Unido, y en otros muchos, están en Valdepeñas, pero van más lentos que si estuvieran el los USA. La velocidad no sólo es importante a la hora de que los usuarios vean las páginas, sino a la hora de subir uno nuevas páginas, o tener que conectarse para modificar algo sobre la marcha.
  Además, habrá que tener en cuenta la velocidad de los equipos, sobre todo a la hora de ejecutar programas, usar una tienda virtual o acceder a bases de datos; esto es importante sobre todo porque en muchos casos, un ordenador puede servir decenas o cientos de sitios.
  Lo mejor para saber qué empresa ofrece el alojamiento más rápido es leer opiniones de usuarios al respecto, dado que este factor no suele publicitarse (salvo en los casos que ofrezcan mucha velocidad, claro).
• Panel de Control: por último, también es importante saber qué tipo de herramienta de control nos ofrecerá la empresa de alojamiento, puesto que su facilidad, complejidad y rapidez de manejo dependerá en gran medida nuestra gestión del servidor. Un ejemplo de panel podría ser el que ofrece la empresa doominio.com: En el que podemos ver la cantidad de utilidades que podemos emplear para gestionar nuestro servidor de forma directa y sencilla.

Vamos a echar un ojillo a algunas empresas de alojamiento para ver sus tarifas.

Buscad empresas de hosting (nacionales o internacionales) y comprobad los precios y las posibilidades que ofrecen.

Alojamiento compartido

Alojamiento exclusivo

Alojamiento virtual privado

Housing

Los 5 Mejores sitios de alojamiento de pago

EJERCICIO:

Hacer una tablita de las 3 mejores empresas de alojamiento para vosotros (según vuestras necesidades o posibilidades) y señalar los servicios que ofrecen que os interesarían para publicar vuestra web.

Qué poner en la página

Utilidades varias

Contador de Visitas

Vamos a hacer un ejemplo en el que crearemos un contador y lo incluiremos en nuestra página web, (que ya debe estar alojada en algún sitio accesible para todo el mundo).

Para hacerlo nos registraremos en MiArroba.es, ya que es una de las páginas que ofrecen más herramientas altamente configurables y las cuales pueden ser configuradas y utilizadas fácilmente.

Una vez estemos registrados, nos iremos a Herramientas -> Contadores y allí crearemos un nuevo contador a nuestro gusto (asociándolo a nuestra web (usando la URL original/larga), eligiendo el tipo de contador, su diseño y colores, etc), y añadiéndolo finalmente al código de nuestra página web.

Es posible incluirlo en cualquier parte de la página, sin más que copiar el código html que se genera una vez configurado todo en el lugar que nos interese de la web.

Después, en este mismo sitio (MiArroba), podremos consultar datos estadísticos de nuestro contador.

Libro de Visitas

Podemos crear también un libro de visitas en MiArroba.es e incluirlo en nuestra web.

Usuarios Online

Podemos crear un contador de usuarios online nuevamente en MiArroba.es e incluirlo en nuestra web.

Estadísticas

Para utilizarlas deberemos darnos de alta en google (si tenemos gmail ya estamos dados de alta).

Una vez entremos en la web , iniciaremos el proceso de registro.

Introduciremos la URL de nuestra web (la original/larga), nuestra zona horaria y nuestros datos personales. Después aceptaremos el contrato.

A continuación se nos proporcionará un código HTML, que deberemos copiar y pegar justo antes del fin de la etiqueta HEAD de nuestra página web. Para concluir pulsaremos el botón "guardar y finalizar".

Nos aparecerá una pantalla con un informe completo relativo a nuestra web, la cual podremos consultar siempre que queramos.

Lo normal es que al rato empiecen a aparecer datos (si nuestra web recibe visitas, claro), pero se recomienda esperar 24 horas, por cuestiones de activación de la cuenta y demás.

Si queremos añadir más páginas web, pulsaremos el enlace de abajo "Añadir perfil de sitio web".

Google Maps

Insertar un Mapa con la API

Lo primero que hay que hacer es registrarse para usar la API (Application Program Interface o Interfaz de Aplicación de Programa) en nuestra página web, para lo cual iremos al enlace Registro de API.

Entre las condiciones se incluye que el número de visitas diarias debe ser menor de 500000 (esto lo cumplo), que no debemos atribuirnos el mapa como si lo hubiésemos hecho nosotros, etc.

Abajo deberemos introducir la URL de la web (la original/larga) en la que vayamos a incluir el/los mapa/s, así como aceptar las condiciones expuestas y pulsar el botón para conseguir una clave que vamos a necesitar.

Ahora nos vamos a nuestra web y copiamos antes del final de la etiqueta HEAD:

<script src="http://maps.google.com/maps?file=api&v=1&key=TUCLAVE" type="text/javascript"></script>

Luego, donde queramos que aparezca el mapa, copiamos:

<div id="map" style="width: 500px; height: 400px"></div>
<script type="text/javascript">
//<![CDATA[
var map = new GMap(document.getElementById("map"));
map.centerAndZoom(new GLatLng(37.173449, -3.757324), 8);
//]]>
</script>

Donde GLatLong es el punto en el que se ha centrado el mapa (dado en latitud/longitud) y el número de después es el nivel de Zoom. En este caso (si todo va bien) aparecerá centrado en Granada.

Para saber las coordenadas de un punto podemos buscarlo con GoogleMaps, activando previamente la opción de visualizar Latitud y Longitud (arriba, junto a Mi Perfil en el enlace "¡Nuevo!").
Otra opción es pulsar el icono de enlazar página.
En la variable "ll" de la url que aparece tenemos estas coordenadas.

Insertar una marca

Si queremos incluir una marca en algún sitio, basta con escribir:

map.addOverlay(new GMarker(new GLatLng(37.173449, -3.757324)));

Justo después del map.CenterAndZoom.

Añadir controles para visualización

Podremos añadir varios controles a nuestro mapa:

Tipo de mapa: map.addControl(new GMapTypeControl());
Control de Zoom grande: map.addControl(new GLargeMapControl());
Control de escala: map.addControl(new GScaleControl());
Vista pequeña: map.addControl(new GOverviewMapControl());

Crear un mapa personalizado y añadirlo a nuestra web

Es posible que lo que nos interese es crear un mapa 'estático' con ciertas marcas, zonas señaladas, rutas y comentarios. Esto es posible hacerlo sin tener que 'pelearnos' con la API de Google Maps, sino que podemos definirlo desde su misma web y luego incluirlo en la nuestra.

Para ello iremos a la web de Google Maps y tras acceder como usuarios de Google, pulsaremos sobre el enlace "Mis Mapas" (arriba a la izquierda).

Pulsaremos sobre el botón "Crear un Mapa Nuevo" y le asociaremos un nombre y una descripción al mismo. Elegiremos la opción "Público" en cuanto a la privacidad del mismo.

Ahora ya podremos editar el mapa, situándonos donde queramos e insertando marcas (con su correspondiente descripción), rutas (marcadas con líneas) o áreas. Cada elemento puede tener asociado texto, enlaces e incluso imágenes (pulsando la opción "texto enriquecido").
Las marcas podrán ser de muchos tipos. Para cambiar el icono de la misma se puede hacer pinchando sobre el recuadrito que sale a la derecha del globo con el texto de la marca.
Para cambiar el aspecto (color, opacidad, etc) de las líneas y áreas pincharemos igualmente en el pequeño recuadro que aparece a la derecha del globo de texto.

Cuando terminemos pulsaremos el botón "Guardar" y luego "Listo".

Ahora vamos a conseguir el código HTML del mapa para insertarlo en nuestra página. Para ello pulsamos el enlace "Enlazar" A la derecha del mapa y elegimos la opción "Personalizar y obtener vista previa del mapa".

Nos aparecerá un mapa centrado en Norte América, para el cual deberemos elegir un tamaño y centrar donde queramos. Una vez terminemos de ajustarlo, copiamos el código HTML que hay debajo del mismo.

Este es el código que insertaremos en nuestra web donde queramos visualizar dicho mapa.

Contenido

El dominio es importante

• un nombre indicativo o explícito: como es lógico, el nombre debería estar relacionado con el contenido de la página y ser lo más explícito posible (siempre que no sea excesivamente largo, como veremos). Si nuestra página vende algún producto, el nombre debe ser indicativo del mismo para atraer a posibles clientes y ser recordado por ellos.
• no muy largo, ni tampoco muy corto: la memoria de los seres humanos es limitada y la de los internautas en busca de páginas que no conocen es casi como la de una ameba, es decir, solo recuerdan nombres sencillos (salvo que la página les guste mucho, claro). Por tanto, cuanto más corto muchas veces será mejor (siempre que no sea demasiado críptico). Lo ideal está entre 7 y 15 letras.
• en el idioma principal de la página: si nuestra página está en español, el nombre del dominio debería estar en español (con la salvedad de los acentos y la eñe, aunque últimamente se están pudiendo crear dominios con ellos...). Además, deberíamos situarlo en un dominio de nivel superior .ES a ser posible, para facilitar su recuerdo. Si queremos llegar a más gente, entonces podríamos hacer la página en inglés y el dominio también.
• registrarlo en varios dominios de nivel superior: siguiendo el razonamiento de la poca memoria de los usuarios, siempre es una buena idea alquilar el nombre del dominio en varios dominios de nivel superior (.COM, .ES, etc), por si se confunden. Es lo que hacen las grandes empresas (con un dominio para cada idioma), y nosotros si tenemos presupuesto.
• un poco de humor o nombres chocantes: es una gran estrategia de marketing, ya que los nombres con cierta gracia, connotaciones, o con alguna controversia son más fáciles de recordar.
• que sea indicativo de lo que nos diferencia: el nombre debería incluir aquello que nos hace diferentes del resto de las webs dentro del mismo ámbito.

Un ejemplo de algunos de los peores dominios de empresas que hay por internet (aunque quizá los eligieron por la controversia, quien sabe):

Who Represents => www.whorepresents.com (whore <=> prostituta pero dicho en grosero)
Pen Island => www.penisland.net (la tierra de los penes)
Italian Power Generator => www.powergenitalia.com (se entiende)
Experts Exchange => www.expertsexchange.com (¿experto en cambio de sexo?)

Otros ejemplos de dominios mal elegidos son:

3.141592653589793238462643383279502884197169399375105820974944592.com (Imposible de recordar, a no ser que tengas una buena calculadora a mano)
www.llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch.com (¡¡¡Es de verdad!!! ¡¡¡Y por lo visto no son letras al azar!!!)
www.thelongestlistofthelongeststuffatthelongestdomainnameatlonglast.com (Tiene su sentido viendo la temática de la web)
www.buintierradefrutashermosasrosasbuenosvinosairepuroyverdescampos.com (El más largo en español)

Promocionar la Página en Buscadores

Indexación

• darla de alta en directorios web, como en Open Directory, Yahoo! o Vlib, en los que se agrupan las webs por temas.
• conseguir que el webmaster de una página indexada ponga un enlace a la nuestra, a ser posible en la página principal. Dicho enlace no debe ser un pop-up, porque Google no puede reconocerlos.

Posicionamiento

• Debemos cuidar la ortografía y la gramática de manera minuciosa.
• No meter paja: el contenido de la web debe ser conciso y claro, no escribir por escribir. Es preferible disponer de un par de párrafos interesantes que varias páginas.
• Debemos redactar la información de manera amena en las descripciones y ser precisos en los detalles técnicos.
• Incluir toda la información que nuestros clientes (o lectores) pueden demandar: precios, imágenes, enlaces relacionados, etc.
• Debemos cuidar la densidad del término a posicionar dentro de la página. Se debe procurar que la frase o el término por el que queremos ser encontrados aparezca dentro del contenido, aunque no hay que meterlo con calzador.
• Debemos utilizar sinónimos y palabras relacionadas con el término a posicionar.

• Debemos utilizar tags de cabecera H1, H2, H3…Hn para establecer un órden jerárquico en el documento. Google otorga mayor relevancia al texto cuanto menor el orden del tag H que la contiene. De esta manera deberíamos definir el título principal con H1, un subtitular con H2 y utilizar esta metodología para ordenar la información de todo el documento.
• Hay que incluir cada párrafo dentro de un tag <P> y evitar los saltos de línea innecesarios.
• Hay que destacar la información en la página con tags semánticos <STRONG> o <EM>. Se denominan tags semánticos porque otorgan un significado al texto. Strong (Fuerte) y emphasize (Enfatizar) se utiliza para indicar a Google que el texto tiene especial relevancia.
• Todas las imágenes deben tener un atributo ALT, con su descripción. Debemos tener en cuenta que Google no es capaz de reconocer la información visual.

• Hay que independizar contenido, diseño y funcionalidad. Google sólo indexará el contenido textual de su página, si ubica los estilos en hojas externas y el código javascript en archivos externos, estará facilitando su labor.
• Debemos intentar maquetar nuetsras páginas siempre en base a estilos css. La maquetación en base a estilos permite minimizar el código HTML destinado a posicionar los elementos en pantalla y maximizar por tanto la relación entre HTML y contenido.
• Hay que utilizar las tablas exclusivamente para mostrar tablas.
• Hay que evitar los frames, pues su contenido de un frame será invisible para Google.
• Debemos evitar las redirecciones, especialmente las realizadas en javascript.
• Debemos seguir los estándares al desarrollar la página

• Los textos y enlaces ocultos.
• crear páginas con contenido irrelevante.
• crear páginas ni subdominios con contenidos duplicados.
• intentar hacer cloaking, esto es ofrecer a los buscadores diferente contenido que a sus visitantes con la intención de mejorar su ranking.
• conseguir enlaces que provengan de webs especializadas en la venta de links y de spamers.
• utilizar programas para realizar altas masivas en buscadores.
• Sneaky Redirection: conjunto de entre 10 y 20 páginas sin contenido relevante que enlazan entre si. Al acceder a alguna de ellas redirecciona al usuario a otra página distinta.
• doorways: páginas creadas exclusivamente para los motores de búsqueda.

EJERCICIO:

Intentad que Google indexe vuestra página web. O al menos, aplicad los consejos y corregid los defectos de vuestras páginas.

Es recomendable hacer esto con una web más o menos 'seria' y/o definitiva.

Cómo hacer la página

Ya se ha visto dónde y cómo poner la página en la Web, y qué hacer para que la gente venga a ella; pero lo más importante no es que venga, sino que se queden y vuelvan y vuelvan, es decir, conseguir clientes de la página. Para ello, es evidentemente necesario que tenga contenido, que sea original y que sirva de referencia; pero también seguir una serie de reglas a la hora de diseñar la página y el sitio web completo, su navegación, su metáfora y todo lo demás.

Estructura de un sitio web

• Una página índice, que presente la estructura general del sitio, y cuáles son los apartados principales del mismo; esa página sirve para dirigir a los usuarios al resto de las páginas.
• Una página con un mapa, con enlaces a todas las páginas, y que refleje la estructura glogal del sitio. Ésta se hace también imprescindible si la web es suficientemente grande. Sin embargo, este tipo de páginas son difíciles de mantener a medida que añadimos páginas, por lo que, para sitios que cambian continuamente, no merece la pena ponerla (aunque existen herramientas que las generan de forma automática).
• Una herramienta/página de búsqueda, para eso, claro está, es necesario indexar previamente el sitio. Algunas webs tales como Atomz ofrecen un servicio de indexación y una herramienta de búsqueda integrable dentro de nuestro sitio gratuitamente.
• Una página con información sobre los autores, que diga quién la ha hecho, en qué organización está, la utilidad de la misma y demás. Poner una forma de contacto (e-mail, teléfono o dirección física) es también bastante común y recomendable.

Vamos a indexar nuestra web y a crear una herramienta de búsqueda para incluirla en la misma.

Para ello nos iremos a la web de Atomz, por ejemplo.

Nos registraremos dando nuestro correo y aceptando las condiciones y tras recibir el correo con nuestro password, nos identificaremos en la página.

Introduciremos los datos que se nos piden y la URL de nuestra web y esperaremos unos minutos a que se indexe (como solo hay una o dos páginas serán pocos segundos, claro). En la 'pestaña' "Index" podremos ver el estado del índice.

A continuación, en la pestaña "Search Form" tendremos disponible una muestra de la herramienta de búsqueda, así como un enlace al código HTML a insertar.

Lo copiamos y lo ponemos donde más nos guste en nuestra página web principal (si teneis varias).

Ahora podremos buscar lo que queramos dentro de nuestra web y nos aparecerá un formulario aparte con los resultados y los enlaces a las páginas con los mismos.

Podeis cambiar el nombre del botón, sustituyendo en el código HTML la palabra "Search" por la que querais.

Diseño para accesibilidad

• No usar demasiadas opciones. Esta regla se debería seguir siempre, pero más si uno quiere que la página sea accesible. Usar muchas opciones hace que el usuario al que se las "cuentan" olvide las primeras cuando ha llegado a las últimas.
• No usar gráficos que sean impresicindibles para comprender el texto, y si se hace, usar la opción ALT o la TITLE para describirlos.
• No usar una distribución complicada, con muchas columnas y filas, textos en diferentes posiciones, y mucho menos, hacer que todo ello sea imprescindible para comprender la página.
• No usar elementos avanzados de HTML; la mayoría de los navegadores para invidentes no los entienden.
• No usar FRAMES. Imposibilitan la comprensión por parte del invidente. En general, no se deben usar frames por otras muchas razones.
• No usar combinaciones de colores con bajo contraste, o con letras pequeñas, porque hará más difícil la navegación a personas con visibilidad reducida que usan programas que aumentan la pantalla para leerla.
• Usar enlaces con texto significativo; o sea, no poner esto o aquí, sino página que habla de la literatura del siglo XII, por ejemplo.

Pecados capitales del diseño

• El pecado de los 100 megas. Si pones en la página principal 50 GIFs animados, 40 iconos, un JPG de fondo de 3 Mb, un MP3 para reproducirlo mientras uno la ve, y luego pones todo lo que pillas de texto, al final tardará horas en cargarse, y probablemente la gente ni espere a que se acabe de cargar. Si irremisiblemente necesita poner uno todo eso, se puede poner en diversas páginas, o bien poner imágenes pequeñas, y que haya que pulsar para cargar la imagen completa. En general, una página principal no debería tener más de 300 o 500 Ks en total.
• El pecado del arcoiris: consiste en poner las letras de color azul, los menús de color verde, el fondo fucsia, tablas de color gris perla, títulos sepia, y cada uno de los demás elementos de un color diferente. Ah, y la siguiente página, colores totalmente diferentes para cada uno de los elementos. Los colores deben dar información, deben tener un uso consistente en todo el sitio, deben de tener tonos similares para los textos y los gráficos, y deben no ser demasiados. Además, deben tener contraste suficiente.
• El pecado de la página inquieta: si uno se mete en una página, y tiene un buzón que se abre y se cierra, un perrito que corre por abajo de la página, 7 flechitas animadas, varias letras parpadeando, y encima tiene una animación con HTML dinámico de una serie de ovnis que siguen el cursor, acaba tan de los nervios que deja la página tirando el ordenador por la ventana. Mejor usar los gráficos animados, Flash y HTML dinámico con juicio, y si es posible, no usarlos.
• El pecado de la cárcel virtual: consiste en poner muchas barras horizontales y verticales, espacios en blanco como fosos, bordes de tablas y demás elementos que no aportan nada a la página, y que estorban más que aportar información. Las tablas pueden usar colores (juiciosamente) para resaltar cabeceras, filas o columnas, las barras horizontales directamente no sirven para nada, y los espacios tampoco. Si se quiere separar un párrafo de otro, lo mejor es usar indentación, tal como se hace en este tutorial; para hacerlo sin que cueste demasiado trabajo, lo mejor es definir un estilo CSS (tal como se hace también en este texto). Tampoco sirven para nada los relieves que se usan en los botones (a no ser que, usando JavaScript, se pulsen de verdad esos botones).
• El pecado de las sardinas en lata: por mucho que sea necesario, no se puede poner todo en una página: gráficos, texto, menuses, títulos, ocupando hasta el último centímetro cuadrado de página. Es mejor ir presentando el contenido poco a poco, creando expectación, distribuyéndolo, y, por decirlo así, dosificando la experiencia de visitar el sitio web.
• El pecado de la buena vista: Se ve mejor en 800x600 con el Internet Explorer, o pulsa aquí para descargar el Flash o séase, tú, infeliz, que te has metido con el Netscape, te pueden ir dando. Una página debe diseñarse para que se vea con cualquier navegador, porque todavía hay gente que usa el Lynx (en modo texto), el Mosaic, e incluso navegadores en teléfonos móviles o dispositivos portátiles con pantallas de 320x200. Una vez más, si es estrictamente necesario usar un navegador específico o un plugin tal como el Flash, se deben proporcionar páginas alternativas; un par de líneas en JavaScript pueden detectar el navegador y servir una u otra página. En cuando a lo del tamaño, simplemente no tiene justificación. Nadie va a poner la ventana del tamaño que uno quiera; y si se ve fea, pues dejarán de verla. Se debe diseñar teniendo en cuenta esto. Conviene también tener diferentes navegadores y diferentes versiones instaladas, y probar las páginas con todas ellas; un errocillo de JavaScript puede hacer que un página no funcione, y en algunos casos puede hacer incluso que casque el navegador.
• El pecado del pero y las tijeras, En las Cruces de Mayo en Granada, nunca faltan un pero y unas tijeras. Lo del "pero" es para la gente que dice "pero", y las tijeras por la gente que dice "ylo que le falta"... pues para cortar el "ylo", las tijeras. A una cruz con un pero y tijeras no le falta de ná, y también hay páginas web a las que no le falta de ná. Tienen contador, estadísticas de acceso, chats, banners, pertenecen a webrings; lo único que le falta es contenido. No debe uno de obsesionarse por meterle a una página web todas las ultimas chuminás: lo mejor es preocuparse y cuidar el contenido, y todo lo demás que sirva al contenido, y no al revés.
• El pecado del usuario atrapado. Muchos sitios, sobre todos los que trafican con carne fresca, abren una página maximizada, que ocupa toda la pantalla, y no tiene menú, con lo cual no se puede cerrar salvo cargándosela, o cambiando de ventana. Aunque empezó ahí, se está extendiendo a otra serie de sitios; en general, no conseguirá lo que quiere, atrapar al usuario, y sí le joderá bastante, por lo cual no volverá al sitio nunca más (a no ser que realmente tenga ganas).

Cómo forrarse con una página web

• Por impresión: esta es la mejor forma: por cada visita, o más bien, por cada vez que se muestra el banner. Esta forma no se suele pagar muy bien (bueno, ninguna de ellas), y puede ser que te pagen menos de un centavo de dólar.
• Por click-through: esto ya es un poco más complicado: el cliente tiene que pulsar efectivamente el banner, para que te paguen algo. Por término medio, los banners se pulsan un 3 o 4 % de las veces (aunque tú y yo probablemente no lo hayamos hecho nunca), o sea que no esperes gran cosa. Por ser métodos más efectivos, se pagan unas 10 veces más caros: unos cuantos centavos.
• Por comisión; en este caso, se trata no sólo de que vea o pulse en el banner, sino que efectivamente se meta el cliente en el sitio y compre algo; puedes conseguir entre un 5 y un 10% de lo que compre. Aquí ya estamos hablando de una pasta, pueden ser un par de dólares por venta. Claro, que no todo el mundo que vea el banner se va a meter como loco a comprar lo que ofrezcas. Por ejemplo, Amazon tiene un programa de asociados que te ofrece un porcentaje de las ventas. Mi experiencia personal me suele decir que esto no suele dar ni un duro, porque la gente, por mucho que vea un sitio, no le entran ganas de comprar libros, y menos en este país, y menos con la pasta que cuesta un libro americano pagado en dólares y con gastos de envío, pero en fin, no estorba, y algo puede caer. En algunos casos, la comisión no depende de lo que se compre, sino de que la persona que ha entrado se haya hecho miembro del sitio, por ejemplo, solicitando una cuenta de correo electrónico (aunque de estos, que usamos inicialmente en este tutorial, ya no queda ninguno).

Referencias

Algunos sitios en internet y manuales que pueden servir para diseñar su presencia en Internet, sea para un sitio personal, de aficionado o corporativo:

• 50 Consejos para Webs , bastante razonables y de sentido común.
• Publicar en Internet, un manual paso a paso para la publicación de páginas en Internet, con consejos similares a los de esta página.
• Philip and Alex's Guide to Web Publishing, libro completo sobre la publicación de páginas en internet. Puedes leerlo en el web o comprártelo en Amazon si te apetece.
• Una guia de usabilidad en WebEstilo.

En casi cualquier área son recomendables los libros de O'Reilly. En este caso, recomendamos Web Design in a Nutshell, por Jennifer Niederst, que explica todos los elementos del diseño de un sitio web y da consejos sobre el uso de los gráficos. En los sitios donde esté disponible, se puede acceder al libro online usando el servicio Safari de O'Reilly. De la misma forma se puede comprar este libro en Amazon UK

Otra alternativa es Don't Make Me Think: A Common Sense Approach to Web Usability de Steve Krug, enfocado principalmente a temas de usabilidad; si te interesa el tema, el sitio de Jakub Nielsen es también una buena fuente (si uno se olvida de sus filias y fobias, claro). Este libro se puede comprar también en Amazon UK

Este trabajo tiene una licencia Creative Commons.