Antología del desarrollo web

Servicios gratis de hosting, diseño usando tablas, css en línea y muchas ingredientes más son lo que componen esta antología que reune buenos y educativos recuerdos.

Lejos quedaron esos años 90’s en donde los sitios webs se construían usando tablas, gifs y el WebMaster era un perfil profesional. Y aunque en estos años los sitios no se destacaban por su diseño, no podemos renegar de ellos, pues son la base de los sitios web que conocemos ahora.

Así que para comenzar esta antología partiré por rememorar a esos grandes sitios webs que nos dieron mucho a cambio de nada, o casi nada. Sitios dedicados a entregar un poco de su propio espacio para que uno subiera un sitio en HTML recién hecho en Frontpage 98. Me refiero a los servicios de hosting gratuito, el puntapié inicial para cualquier WebMaster.

Servicios de hosting gratuito

Los servicios de hosting gratuito eran la entrada a ese extraño mundo llamado HTML. En lo personal, tratar de entender lo que la palabra HTML significaba ya era un tema, y de ahí a llegar a hacer uno era mucho más pedir. Por suerte para mi, el interés llegó a través de un amigo que me pasó un diskette con un tutorial de HTML en 20 archivos. Abrí los archivos 1 a 1 y lo primero que noté fue que htm era una extensión y que al abrirlo con Internet Explorer 5 se podía ver un sitio web.

Esperen. ¿Tengo internet? — Me pregunté al abrir el archivo y para mi desgracia, no. Hubiese sido extraño igual porque la cuenta de CTC Reuna que me habia conseguido había cambiado la contraseña y el Tutopia aún no existía.

El cuento es que por primera vez veía un sitio web fuera de Internet. Ahí fue cuando entendí que los sitios webs se creaban en base a archivos y que cuando guardaba un sitio y lo editaba, los resultados no se veían en línea. Entonces ahí me vino la pregunta ¿Y cómo subo mi sitio web? y así llegué a los servicios hosting gratuito.

1. Geocities

Geocities fue (es) un servicio que compró Yahoo y que era uno de los más conocidos y visitados. Su concepto se basaba en dividir los sitios en barrios o ciudades los cuales separan los contenidos en temas. Por ejemplo, en el barrio Tokyo estaban los sitios de animé (ahí cree mi sitio de Rurouni Kenshin) mientras que en TimesSquare estaban los de videojuegos.

Lo entretenido de Geocities era que no tenías que saber usar un FTP (a pesar de tener la posibilidad) para subir tu sitio, solo debías pegar tu código HTML y tu sitio comenzaba a tener vida.

En ese tiempo, creo que el espacio máximo para un sitio era de 15 Mb y solo se podía subir contenido estático, nada de base de datos. Además, te ofrecían para edición visual (WYSIWYG), templates, entre otras magias interesantes.

Si quieren ver como era el home, miren acá: https://web.archive.org/web/20000301234253/http://geocities.yahoo.com/home

2. Tripod / Lycos

Tripod es otro servicio que fue importante en su tiempo. A diferencia de Geocities, este estaba enfocado a generar comunidad. Con este servicio fue que conocí el CuteFTP y fue la primera vez que utilicé una librería JavaScript para hacer un simple hover.

Tripod permitía subir hasta 15 megas de contenido y también programar cosas en PERL, algo que no pude lograr en ese tiempo. La idea era utilizar PERL como lenguaje dinámico para hacer CGIs de envío de formularios por ejemplo, entre otras locuras. ¿Recuerdan el sendmail.cgi?

Tripod fue la segunda compañia que compró Lycos (al parecer) y está funcional hasta el día de hoy. Lo interesante de Tripod es que comenzó a abrirse al mundo hasta llegar en español a través de tripod.es.

3. AngelFire / Lycos

Angelfire fue un servicio que también fue comprado por Lycos por el año 98. Tenía la característica de que tenía más espacio que Geocities y Tripod, ¡hasta 30 megas! (un hit para la época)

Las características eran similares a Tripod: Editor HTML, FTP, Scripts en PERL y librerías de JavaScript. ¿La diferencia? Llegó antes que todos. Era competencia directa de Geocities y Lycos lo compro solo para hacerle frente a Geocities.

4. FortuneCity

Dentro de todo lo que pasaba entre Lycos, Tripod y Geocities, desde no tan atrás aparecía uno de los servicios con más banners que he visto en mi vida y que de seguro, le sacó el jugo al modelo de publicidad en la época de las punto com. Me refiero a FortuneCity, un servicio inspirado en New York.

Este servicio partió el año 97 y el 98 llegó a la bolsa. Sus servicios comenzaron con 6 megas de espacio y llegaron hasta los 100mb para el año 2000. Si querías hacer un sitio web con mucho contenido, debías elegir a FortuneCity. Al igual que tripod, también llegaron en español a través de fortunecity.es

5. MiArroba

Para el año 2000, muchos de estos servicios ya se habían replegado por el mundo y en España existía uno de los servicios más útiles que he conocido. MiArroba.com era el primer hosting de sitios webs que supe que ofrecía una base de datos MySQL y PHP4 totalmente gratis. El espacio no era mucho (25 MB) pero el soporte PHP y la base de datos era suficiente como para hacer sitios y pruebas básicas en PHP4.

Aparte de eso, los de amigos MiArroba.com te regalaban una casilla de email que podías guardar al lado de tu @latinmail y el @hotmail.

Este servicio fue uno de los más importantes para mi carrera pues me permitió crear uno de mis primeros sitios con Guestbook.

Herramientas para sitios web

Después de que nuestro sitio se llenaba de contenido, colores y banners (muchos banners), venía la parte en que debíamos agregar interacción al sitio. Y para lograr esto, existían muchas herramientas que nos permitían incluir funcionalidades que solían ser un estándar en ese tiempo.

Partamos por los clásicos contadores de sitios webs, que fueron creados para llevar un conteo y análisis de las visitas del sitio. Estos posteriormente fueron reemplazados por mejores herramientas de análisis pero en su tiempo fueron muy comunes no solo para ostentar las visitas, sino que también para trackearlas.

Los libros de visita o guestbooks eran otra herramienta común en los sitios webs. Era la forma en que las personas que ingresaban al sitio, dejaban su comentario o saludo. No me atrevo a decir que fue la primera vez que conocí a los trolls o a los "choros de computador"; pero la fue una de las primeras instancias en las que tuve que aplicar criterio para moderar comentarios.

La música de fondo era otro ingrediente que en ciertos sitios no podía faltar. Recuerdo que el primer sitio que hice fue de Rurouni Kenshin y le agregué un archivo MIDI del primer OP. Se podía utilizar la forma simple:

<bgsound src="op1.mid">

Y también existía la forma más avanzada, que era usando un player embedido como Java Applet o Macromedia Flash Player.

En ese entonces, Flash estaba entrando a la web con fuerza y los que se estaban quedando atrás eran los Java Applets. En este mismo sitio fue que implementé un Java Applet que me robé de otro sitio. El efecto que hacia era poner una imagen reflejada sobre una fuente de agua y que cuando le pasabas el mouse, esta se movía naturalmente. Algo muy cool para la época.

Sin embargo, la parafernalia de Flash y sus movimientos naturales (easing) fue la que hizo evolucionar el diseño y sus estándares en una época en que los applets lo eran todo.

Aquellos estándares de diseño

Hacer sitios web con tablas no era una casualidad en ese tiempo. El CSS no estaba en su mejor versión y lo máximo que aprendí a hacer era utilizar ":hover" para tus links. Para mi fue un gran descubrimiento aprender a utilizar el text-decoration: none; para los links, así que imaginen como fue mi asombro cuando creé links usando Macromedia Dreamweaver MX, que se tenían efecto porque era Flash y sin tener que poner ningún código (en realidad se cargaban muchos javascripts, pero era algo asumido).

En cuánto al "dinamismo" o "interactividad", conceptos comunes en el lenguaje de nuestros clientes, siempre acudíamos a los mismo: GIFS ANIMADOS. No voy a hacer mayor presentación, solo les quiero mostrar los que más usaba:

En cuanto a la estructura de un sitio web existían dos opciones: 1) Usar frames y 2) No usar frames. La primera permitía tener un header y un sidebar fijo para el menu, y la segunda era tener una página plana con scroll.

Un sitio con frames se creaba así:

<frameset rows="100,*">
    <frame name="top" src="top.html">
    <frameset cols="150,*">
        <frame name="side" src="side.html">
        <frame name="content" src="content.html"> 
    </frameset>
</frameset>

Y se veía así:

En esos años, los divs no existían (es decir, sí existían pero eran invisibles para el ojo del webmaster) y por eso es que todo lo que se diseñaba, se hacía mediante tablas. A veces podíamos encontrar un tag div o span pero eran como magia negra que nadie entendía a cabalidad que era.

Cuando alguien quería diseñar en cajas simplemente pensaba en una gran tabla que contenía a todo el sitio y a punta de colspan y rowspan se podían diseñar genialidades. Pasó mucha agua bajo el río, hasta el 2006 cuando A List Apart publicó el santo grial del CSS, pero aún así, muchos sitios siguierón diseñandose usando tablas.

Hay que hacer notar que en ese tiempo, los estándares no eran tan altos como hoy en día (aunque hoy tenemos flexbox y seguimos usando grillas). En ese tiempo utilizar el atributo style en línea era algo común. Esto ocurría porque no existía una oferta de exploradores como ahora, ni mucho menos tanto dispositivo que soportar (de dar soporte, no de aguantar). Internet Explorer era la meca del diseño y si se veía bien ahí, el trabajo estaba listo.

Incluso, llegamos hasta darle diseño a los scrollbars, ¿se acuerdan? Era algo como así:

body{
  scrollbar-base-color: #C0C0C0;
  scrollbar-base-color: #C0C0C0;
  scrollbar-3dlight-color: #C0C0C0;
  scrollbar-highlight-color: #C0C0C0;
  scrollbar-track-color: #EBEBEB;
  scrollbar-arrow-color: black;
  scrollbar-shadow-color: #C0C0C0;
  scrollbar-dark-shadow-color: #C0C0C0;
}

La cosa es que ahora, eso ya quedó en el olvido porque nos preocupamos más de la semántica y los contenidos que del diseño. Hoy existen perfiles marcados : Diseñadores, Frontenders, etc. Los diseñadores ya no usan el Photoshop y el Fireworks para maquetear, se van directo al HTML (estamos en el año 2015, hay celulares del porte de un reloj ¡cómo no van a saber HTML!). Sin embargo, todo lo que nos dejó el HTML4, el CSS2 nunca nos lo van a poder arrebatar.

Conclusiones

Para quienes nacimos temprano en Internet, conocer estos sitios fue la mejor herramienta pedagógica. Tirarse a la piscina y aprender HTML fue el primer empujón para decidir si realmente queríamos ser Web Masters o Desarrolladores Web.

El tener que lidiar a diario con manuales en inglés, exploradores especiales y poca información (como IE5.5 que tenía más bugs que el mismo Windows Me), nos entregó las suficientes herramientas para potenciar el autoaprendizaje y así hacer frente al ritmo en que hoy aparecen las nuevas tecnologías.

Estoy seguro que haber llegado antes a Internet nos ayudó no solo para alimentar nuestro conocimiento sino que tambien que para formar el método en que aprendemos.

Blog, Random
7 minutos