Primeros pasos en el diseño web

por Walter E. Irahola

La idea de este artículo es dar un humilde consejo de cómo comenzar en el apasionante mundo del desarrollo de páginas web: que hacer previamente, que herramientas utilizar y consejos de como continuar aprendiendo; además de dar pequeñas anécdotas o experiencias personales relacionadas al tema.

Mis comienzos en la informática fueron a los dieciséis años en un instituto privado, y pude descubrir y experimentar por primera vez una computadora con una Pentium I de 233 Mhz y 32 de RAM; maquina que recién pude obtener en el segundo año de la carrera de Analista en Informática Aplicada en la Facultad de Ingeniería y Ciencias Hídricas, perteneciente a la Universidad Nacional del Litoral de la ciudad de Santa Fe (Argentina).

Previamente, para poder realizar las prácticas y trabajo final de las materias de primer año, tenía que ir a la Facultad a partir de las siete de la mañana, y en algunos casos quedarme hasta las diez de la noche. Sacrificios que valían la pena, porque mi premisa siempre fue: si voy a aprender algo, que sea bien, recuerdo que mi primer programa que desarrolle lo llame BIBLIOTK, y era un sistema que permitía administrar un biblioteca (un sistema casi común entre los primeros programadores) utilizando como lenguaje de programación Turbo Pascal v7.0.

Las características distintivas que puedo rescatar de ese sistema es que: - manejaba su información puro y exclusivamente por archivos y que su interface admitía el uso de ventanas y del ratón en un entorno en modo texto. Para poder llegar a eso me leí varios libros sobre fundamentos de programación, varios de Turbo Pascal en su versión 3, 5 y 7, y por ultimo la mini enciclopedia digital y super libro PC Interno, que tenia mucho código que permitía ampliar la imaginación de que es lo que se podía hacer con un lenguaje de programación.

Terminando esta anécdota personal, lo que quiero destacar y creo que termino siendo la actitud profesional que me caracterizó y que trato de transmitir a mis alumnos, es que para comenzar una idea o proyecto siempre hay que tener la mente abierta, leer e investigar todo lo relacionado al tema, experimentar constantemente y ser muy curioso. Esto último me ha llevado a aprender muchas cosas que no están escritas en los libros y a descubrir distintas técnicas de diseño y programación, no incursionadas en la Universidad.

Donde encontrar material de lectura sobre el diseño web? Primeramente recomiendo leer todo lo relacionado a HTML y CSS, que se puede encontrar principalmente en http://www.w3c.org, en su versión en ingles. Pero las primeras versiones en castellano que accedí lo pueden encontrar para HTML en http://html.conclase.net/w3c/html401-es/cover.html y para CSS en http://www.sidar.org/traduc/css/cover.html. Otro material interesante y que de paso me abrió más curiosidad por el tema fue la documentación en línea de Netscape Comunicator relacionado al HTML Dinámico. Ahora, lo último que estoy leyendo es Gecko DOM Reference, ubicado en http://developer.mozilla.org/en/docs/Gecko, el cual es material difundido por Mozila Firefox.

Algo que quizás no muchos saben, es que todas las versiones de Windows, hasta la versión Milenium, poseen un archivo de ayuda con el nombre HTMLREF.CHM sobre DHTML: objetos, propiedades, métodos, eventos y colecciones, y CSS y algo de JAVASCRIPT, todo en un solo archivo y bastante completo. Este archivo lo encontré por curiosidad en mi computadora con Windows 98, dentro de la carpeta donde se instalan todos los archivos de Office. Este archivo por cierto, me saco muchas dudas y me saca de apuros hasta hoy día.

Otro material que recomiendo, el cual descubrí hace un par de meses es el que publica Javier Eguíluz Pérez en su sitio http://www.librosweb.es, el cual posee material interesante, didáctico, preciso y actualizado sobre XHTML, CSS y JAVASCRIPT, entre otros temas interesantes.

Mis primeros pasos en el diseño de páginas web fueron con el diseño del sitio web del Centro de Estudiantes de la Facultad. Recuerdo que en una reunión de fin de año, donde se discutía que actividades realizar en el siguiente año de gestión, surge la idea de porque no tener el mismo Centro de Estudiantes una pagina web, y así brindar mayor información y servicios. Anteriormente ya había comenzado a leer algo de HTML, pero a partir de allí y antes del receso de fin de año comencé a buscar información en internet, a llevarme libros sobre el tema de la biblioteca y guardar páginas web en disquete para estudiar su código en casa. Luego me encerré en mi pieza, enero y febrero, a leer y experimentar con algo nuevo que quería aprender: el HTML, continuando con JAVASCRIPT y luego cayendo necesariamente en CSS. Y es así como a mediados de febrero ya tenia mi primer sitio web en línea, colgando del servidor de la Facultad.

La recomendación que puedo hacer en este punto es: sean organizados en toda la información que dispongan, ya sea de lenguajes de programación, servidores, bases de datos, tutoriales, trucos o ejemplos, dado que de esto dependerá la productividad que puedan lograr. Por ejemplo, yo dispongo una carpeta en mi computadora y en mi memory flash con el nombre de ?manuales_chm? donde tengo todo tipo de manuales y archivos de ayuda sobre HTML, DHTML, PHP, MySQL, CSS y JAVASCRIPT, que en algún momento me tome el tiempo de crear. Además tengo otra carpeta con el nombre ?diseño_web? donde tengo un editor HTML y un programa FTP, entre otros.

Que herramientas utilice? En su momento comencé experimentando con un simple editor de texto: el Bloc de Notas para el diseño e Internet Explorer como navegador de pruebas. Luego, comencé a incursionar y curiosear desde el FrontPage, HomeSite, UltraEdit, decenas de programas de diseño y editores, hasta descubrir Dreamweaver y finalicé utilizando Edit+ (http://www.editplus.com/) como complemento para el diseño y programación.

Esta última herramienta me resulta de gran utilidad, dado que permite la codificación de cualquier lenguaje de programación, además de todo lo relacionado al diseño web: CSS, JAVASCRIPT, VBSCRIPT, PHP, ASP, JSP, etc. Entre otras ventajas que encuentro es su sintaxis mediante colores y su potente autocompletar de código, que permite desarrollar y diseñar de una manera muy rápida y además personalizarlo a piacere. He probado muchas herramientas de este tipo, pero el Edit+ es rápido, potente y fácil de llevar e instalar.

Para poder visualizar los diseños y experimentos que surgían utilice el Internet Explorer como navegador web. Pero muchos pecamos por lo próximo y fácil de comenzar, el utilizar el Internet Explorer, pero con el tiempo, debido a la experiencia que uno adquiere, a los dolores de cabeza que provocan algunos y a la búsqueda de compatibilidad de los diseños con todos los navegadores que existen hoy en día, es preferible utilizar como mínimo tres navegadores al momento de diseñar. Yo recomiendo, en su orden de prioridad para mi, utilizar Mozilla FireFox (http://www.mozilla.com), Opera e Internet Explorer. Pero para poder llegar a esta conclusión tienen que leer y experimentar mucho, pero yo les acorto el camino un poco.

Mozilla FireFox es un navegador potente y rápido, además que tiene un depurador de código CSS y JAVASCRIPT incorporado, con la denominación de Consola de error, muy útil.

Con el devenir del tiempo, surge la necesidad de utilizar un servidor web, dado que tenia la necesidad de poder navegar por todas la paginas que diseñaba, y entonces comencé a experimentar con el Internet Information Server (IIS), dos o tres más que no recuerdo su nombre y terminar con el Apache (http://www.apache.org).

Llego un momento en que los requerimientos de diseño ameritaban la necesidad de programar procesos o diseños repetitivos, y allí entran las páginas dinámicas, y comencé a estudiar ASP y PHP (http://www.php.net). Este último, me convenció porque era de distribución libre, tenía la documentación en línea mas completa y tenía una programación estructurada, fácil de entender y depurar. Recuerden que yo vengo de la escuela de Turbo Pascal, programación sencilla y estructurada.

Y seguía incursionando, hasta que comencé a cursar la materia Base de Datos con el Ing. Maximo Mendez, un profesor que no iba o llegaba tarde a clases, pero que cuando lo hacia no muchos lo entendían (me incluyo), pero luego de leer el tema que había tocado, la verdad, habría la imaginación, dado que permitía, y se debía, utilizar otra visión en el manejo de la información. Costo entender su forma pedagógica, pero me produjo un clic cuando debíamos diseñar un sistema de base de datos en grupos, junto a Lorena Baroni y Gustavo Galoppo. Recuerdo que un día se puso a revisar cada trabajo presentado, llevándole mas de media hora por grupo el entender de que se trataba y que es lo que querían lograr con el, pero me llamo mas la atención las preguntas que nos hacia y la forma en que llevaba el análisis del sistema de base de datos, eso me hizo entender definitivamente el tema y comprender luego porque le llevaba tanto tiempo entender cada trabajo presentado, cosa que con el tiempo me paso lo mismo con mis alumnos.

Y a partir de esto último y sumado a que había comenzado a trabajar como encargado de la página web de la Facultad, es que comencé a incursionar en bases de datos para aplicaciones de escritorio y para sistemas en línea. Pasando desde Access, Interbase y MySQL (http://www.mysql.com), entre otros. Fue allí que nació la idea de diseñar XPANEL, desarrollar un sistema que permita administrar un sitio web desde cualquier parte del mundo, en cual presente en un evento de jóvenes investigadores organizado por la Universidad.

Cuando uno comienza a diseñar, se da cuenta que la interface y su entorno grafico juega un rol importante, ya que los visitantes solo evalúan lo que ven y que tan rápido obtienen lo que desean, y no les importa que lenguaje de programación utilizaste, que tan bien estructura esta tu archivo CSS, tu base de datos o tu archivo HTML. Y es por eso que allí entran los programas de diseño grafico como Corel Draw, Fireworks, Phothoshop y Flash (este no es específicamente de diseño grafico, pero puede ser utilizado como tal). Fue tan el afán de aprender estos programas que diseñe un sitio completo con Fireworks y otro con Flash. Este ultimo me llevo un mes entender todo su entorno y lenguaje.

Como conclusión, puedo resumir que las herramientas necesarias para desarrollar páginas web son:

  • manuales, libros, artículos, trucos, ejemplos, etc.,
  • servidor web
  • editor HTML
  • navegador web
  • programas de diseño gráficos
  • lenguaje de programación
  • sistema manejador de base de datos

Y como continuar aprendiendo? Siendo curioso, no quedarse con las dudas, leer lo más que se pueda y todo lo que se pueda, ser autodidacta, tener la imaginación abierta y, por sobre todo, tomar nota de todas las ideas que surgen, porque en algún momento se pueden hacer realidad.


http://emailcashpro.com