Aspectos básicos del Diseño Web
23 08 2007
Desarrollar sitios web, como todas las cosas, requiere de una serie de conocimientos y habilidades, en el transcurso de este articulo hablaremos un poco de que se necesita para empezar a desarrollar sitios web, y en temas a futuro, podemos hablar mas a fondo sobre ellos.
Primero comenzaremos por hablar sobre los tipos de páginas que podemos desarrollar para la web, posiblemente los términos los hayan escuchado o leído en algún lugar, en fin, los tipos de páginas son dos: estáticas y dinámicas.
Las paginas estáticas, como su nombre lo indica, son paginas que no cambian, no tienen interactividad con el usuario, y si la tiene es mínima, en este tipo de paginas, es el webmaster quien se encarga de estar realizando cambios, subiendo contenidos, etc.
En cambio las paginas dinámicas, la interacción con el usuario es fundamental, el usuario personaliza y aporta contenidos a la página, cabe mencionar que para elaborar este tipo de páginas, se ocupan conocimientos de programación y base de datos, por lo que su elaboración es más compleja.
Según el tipo de página a elaborar, varían las herramientas y conocimientos a utilizar, el objetivo de este artículo es dar a conocer de forma breve estos requerimientos, empezando por:
Conocimientos de HTML
Es el lenguaje base para todas las páginas de la web, no importa si es dinámica o no, necesariamente tienen como base el HTML (Hyper Text Markup Lenguaje - Lenguaje de Marcas de Hiper Texto). No es estrictamente un lenguaje de programación, si no de marcación, en el cual se va “etiquetando” cada elemento para darle características propias de la etiqueta. Veamos el siguiente código en HTML:
‹em›Este es un ‹strong›texto‹/strong› de ejemplo.‹/em›
El resultado una vez interpretado por un navegador web seria el siguiente:
Este es un texto de ejemplo
Toda la línea aparece en cursiva, ya que la etiqueta em envuelve toda la línea de texto, por lo tanto esta obtiene la característica de em, que es poner en cursiva el texto, la palabra “texto” aparece en negrita, ya que este englobada por la etiqueta strong, y su función es poner en negrita lo encerrado por ella.
Y así como em y strong hay muchas mas etiquetas que hacen diferentes cosas, pero para efectos de este articulo no serán cubiertas, si quieres aprender mas de HTML puedes checar el siguiente enlace:
http://es.wikipedia.org/wiki/HTML
Un ejemplo de código HTML con coloreado de sintaxis.
Manejo de un editor de páginas web.
Según la experiencia y gustos del desarrollador web, se puede optar por un editor especializado para estructurar y desarrollar paginas web como Dreamweaver o el común y corriente Bloc de Notas.
Para los “newbies”, les recomiendo ampliamente Dreamweaver, ya que para un novato es fácil de usar además, proporciona funciones y herramientas poderosas para usuario avanzados.
Para un poco más de información sobre Dreamweaver, puedes revisar su entrada en Wikipedia:
http://es.wikipedia.org/wiki/Adobe_Dreamweaver

Área de trabajo de Dreamweaver CS3
Conocimiento o nociones de diseño grafico.
Parte fundamental del éxito de un sitio web es lo que este aporte al usuario, y en segunda instancia esta el aspecto o el diseño.
Hacer un sitio web es relativamente fácil con las herramientas de hoy en día, pero hacer un diseño agradable a la vista es algo un poco mas complicado y difícil de enseñar, ya que cada persona tiene estilo y gustos propios, lo que le gusta a una persona puede no gustarle a otras.

Siguiendo las tendencias de diseño actuales, recomiendo diseños sencillos (para dar mas protagonismo a la funcionalidad de la página) con colores neutros o de baja intensidad y textos grandes fáciles de leer.
Manejo de software de edición de imágenes.
Para plasmar tus ideas en forma de imagen digital, es necesario software especializado, yo en lo personal me manejo con dos programas: Adobe Photoshop y Adobe Fireworks (antes Macromedia Fireworks).

Área de trabajo de Adobe Fireworks CS3
Photoshop es el software de edición de imágenes por excelencia, en el realizo un preview o teaser del documento web, que muestro a los clientes, sobre este prediseño aportan sugerencias o me hacen saber modificaciones, una vez aprobado el diseño, lo paso a Fireworks para seccionar la imagen, agregar menús desplegables, optimizar la imagen y demás.

Área de trabajo de Adobe Photoshop CS3
Para desarrolladores avanzados, es recomendable:
Conocimientos de CSS
Las hojas de estilo en cascada (Cascadying Style Sheets) permiten efectos imposibles de realizar con HTML puro, como especificar tamaño de texto en píxeles, posicionar imágenes con precisión de píxeles en cualquier lugar de la ventana, además de que las páginas desarrolladas con CSS son más ligeras de cargar, más fáciles de actualizar, entre algunas virtudes.
Además, permiten algo muy importante, separar el diseño del contenido, para ahondar un poco mas en el tema, puedes revisar el siguiente enlace a muchos textos sobre estándares y CSS:
http://sentidoweb.com/2006/09/05/los-mejores-textos-sobre-css-y-estandares-web-en-castellano.php
Conocimientos de lenguajes de programación de lado del servidor
Desarrollar una pagina dinámica implica tener conocimientos de algún lenguaje del lado del servidor (es decir, que el servidor procese la programación y devuelva al usuario el resultado del proceso) como PHP, ASP, JSP, Ruby, PERL, CFM entre otros.
En la actualidad son PHP y ASP los lenguajes más utilizados para hacer páginas dinámicas.
Conocimientos de base de datos
La gran mayoría de páginas dinámicas hace uso extenso de una base de datos, esto es para almacenar la información de los usuarios y la información que estos generen.
Las bases de datos más utilizadas son MySQL (como alternativa Open Source) y SQL Server (de Microsoft) ya que cada una de ellas se complementa muy bien con PHP y ASP respectivamente.
Los dos puntos anteriores, son fundamentales para desarrollar paginas dinámicas, además se necesita:
Servidor que procese el lenguaje de lado del servidor utilizado
En el caso de que se desarrolle en ASP se utiliza Internet Information Services de Microsoft o IIS (viene incluido con Windows XP Professional) y si se desarrollara en PHP, se puede instalar PHP para funcionar con IIS (es mas lento) o instalar Apache (como alternativa Open Source), que funciona de maravillas con PHP y MySQL.
Sobre instalación y uso de estos servidores se hablara más a fondo en temas posteriores.
Por el momento es todo, espero y este articulo despierte interés en este tema y empiecen a participar en el foro, repito, estos temas se irán desarrollando mas adelante, o a como vaya surgiendo interés.
Escrito por: Lic. Alonso Gómez Avila
Nickname en el foro: soulfire
Comenta sobre el tema en el foro:
http://www.lsiaug.net/lsia/foros/viewtopic.php?p=885





