Mucha gente no sabe bien que hacer antes de partir con el desarrollo de un sitio Web. Tienen la idea de lo que quieren, pero una cosa es tener una idea y la otra es tenerlo CLARO.

Acá voy a intententar ayudar a definir lo básico que hay que pensar antes de comenzar con un sitio Web, en base a mi experiencia. Espero que les sirva…

Conceptos generales

Lo primero es plantearse objetivos y definir a quien estará enfocado el sitio. Con esto en mente, se podrá tomar desiciones a futuro dándole prioridades a los objetivos y sabiendo que cosas enfatizar cuando sea necesario.

• Objetivo principal del sitio (vender, mostrar la empresa, servir de intranet, generar una base de datos de clientes, etc.)
• Objetivos secundarios (lo mismo que el principal, pero con menos importancia)
• A quién está enfocado el sitio (tratar de caracterizar una personas. Inventarle un nombre ficticio incluso… algo así como “José Andrés. El vive en el barrio alto. Vive con su mamá y su papá y tiene 3 hermanas mujeres. Lee el diario los domingos y estudia Arquitectura en la Universidad XXXX. Cuando egrese va a manejar la empresa del padre, etc.”. Con eso se define el tipo de persona “ideal” a la que quiero apuntar y a futuro se podran tomar desiciones de marketing, comerciales y desiciones respecto al contenido del mismo sitio Web y la forma de comunicarse.
• Definir a los otros públicos que podrían visitar el sitio (la competencia, mis propios empleados, los extranjeros, etc.)
• El impacto que quiero producir sobre los distintos públicos (quiero que la competencia vea mi sitio y sienta envidia. Que los extranjeros vean que mi sitio es tan avanzado como el de ellos, quiero ganar premios en concursos de diseño, etc.)
• Conceptos generales del sitio (fácil uso, limpieza visual, tecnológico, harto movimiento, etc. Deberían ser los 2 ó 3 más importantes).
• Referencias (quiero que mi sitio sea como xxxxx. La idea es saber hacia donde tiene que apuntar el diseño y desarrollo).

Conceptos logísticos

El sitio tiene que ir acompañado por todo un contexto humano detrás:

• Quién será el encargado del desarrollo del sitio por parte de la empresa (tiene que haber una única persona que nos comunique las desiciones que se van a tomar. Si esa persona tiene que discutir con 20 personas detrás de ella, da lo mismo, pero lo importante es que haya un UNICO canal de comunicación entre la empresa que desarrolle y el cliente)
• Cada cuanto tiempo se actualizará el sitio (esto se debe hacer en base a la REALIDAD de la empresa. Si no hay una persona que pueda crear banners o textos y no se pretende contratar a alguien para ese trabajo, hay que saberlo de antemano para ver que desiciones tomar en los puntos siguientes)
• Quién va a administrar el sitio (cuanta gente, cantidad de experiencia en computación, etc.)
• ¿El sitio va a tener un administrador de contenidos o un equipo de trabajo detrás? (esto varía en relación a la complejidad de contenido que deberá ser administrado y lo que quieren que pase con el sitio. Al final esto es consecuencia de los puntos anteriores)
• ¿Se aceptará alguna forma de contacto con el sitio?. ¿Quién responderá esos correos de contacto?
• ¿Quién redactará los textos inciales del sitio?

¿Y si quiero hacer una tienda online?

Las tiendas online son un tema aparte, debido a su complejidad, y requieren pensar cosas adicionales como:

• Cuál será el beneficio de la tienda por sobre las demás formas de venta? (¿porqué la gente va a preferir comprar en esta tienda y no en una tienda física, donde pueda tocar y ver los productos?, ¿los productos que se ofrezcan tendrán precios más bajos que las tiendas físicas?, ¿el despacho será gratis?, etc.)
• ¿Con quién se van a realizar los despachos? (la empresa que se contrate tendrá la capacidad de aguantar la cantidad de carga y llegará a todas partes?, ¿los precios de esta empresa son razonables en base a los tipos de producto que se deban despachar?)
• ¿El costo de despacho va a estar cargado al público o corre por cuenta de la empresa?
• ¿Como se mantendrá actualizado el sistema de stock (manualmente, existe una base de datos de los productos, a través de un excel, etc.)
• ¿Existirá una bodega REAL para la tienda? (¿será una tienda más con su stock propio?)
• ¿Como será la ficha genérica para ingresar productos (debe ser una ficha que sirva para ingresar datos básicos y opcionales para TODOS los productos. Una única ficha que sirva para cualquier tipo de producto)
• ¿Existirán productos “madres” e “hijos”, o sólo productos? (¿cada producto “madre” tendrá variaciones de productos “hijos”?. Hay que ver si para el tipo de tienda eso es viable)

Creo que eso es lo escencial. El resto de las desiciones se toman en la etapa de planificación del sitio en base a los conceptos generales que se hayan definido para el sitio.

1. Brasil gano la copa mundial en 1994, antes que eso, ganaron el mundial en 1970.
Sumen 1970 + 1994= 3964

2. Argentina ganó su última copa mundial en 1986, antes que eso ganaron el mundial en 1978.
Sumen 1978 + 1986= 3964

3. Ale mania ganó su última copa mundial en 1990, antes que eso, ganaron el mundial en 1974.
Sumen 1974 + 1990= 3964

4. El mundial 2002 Brasil repitió el campeonato, y es lógico, ya que si sumamos 1962 (donde Brasil fue campeón) + 2002= 3964 , por lo tanto, Brasil debía ser el campeón, y así fue.

5. Y si se quiere pronosticar el campeón para Sudafrica 2010.
Resten 3964 – 2010= 1954… Ese año el campeón mundial fue Alemania, así que se escuchan pronósticos para el 2010…

Y LO MÁS IMPACTANTE

Los fanáticos chilenos tenemos también motivo para alegrarnos, ya que seguramente ganaremos el mundial en el año 3964.
Porque 0 + 3964 = 3964

O sea que ya sólo tenemos que esperar 488 mundiales para ser campeones! Eso equivale a 1958 años. En 1958 Brasil fue campeón del mundo. Así que la final va a ser contra los brasileños… ni se imaginan los pobres huevones la media goleada que les vamos a dar.

¡¡¡Pobrecitos!!!!

Un ejemplo claro de esto lo podemos ver en la frase “el perro ladró”, que claramente significa que “el animal del tipo perro ha realizado el acto de ladrar”, y sea donde sea que mencione eso significará lo mismo. La metainformación entonces está presente en COMO y CUANDO digo esta frase, es decir, en el contexto en que se presenta. Por ejemplo:

• Si deseamos saber quién fue el que despertó al bebé con un sonido de ladrido, puedo decir “EL PERRO ladró”, para “acusarlo” de que él fue quién lo hizo.
• Si el perro es muy pequeño y nunca en su vida había ladrado, y hoy por primera vez lo hizo, puedo decir “el perro ladró!!!” para expresar la emoción del momento.
• Si el perro ladra porque quiere avisarnos algo, podemos decirle a alguien “el perro ladró”, así como contándole que vaya a ver que quiere el perro, pues acaba de ladrar.

Ahí tenemos tres ejemplos distintos de la misma frase, que significa lo mismo, pero que dependiendo del contexto donde se menciona se refiere a distintas cosas. Eso es “metainformación”, pues el contexto me entrega información adicional a la que se ve a simple vista. Lo mismo pasa con las expresiones corporales, por ejemplo, pues una levantada de cejas o una entonación distinta puede variar notoriamente una frase.

Ahora… como aplicamos esto a la Web?

Los sitios Web siempre intentan comunicar algo, y generalmente esta comunicación debe ser transmitida a través de imágenes o palabras. En ambos casos es muy importante escoger bien la manera de comunicarse, porque cada frase o imagen tiene algo de metainformación implícita.

Un ejemplo claro es si quiero hacer un sitio para participar en algo y ganar un premio. Hay que ser muy cuidadoso porque dependiendo de la frase que escoja y la manera de comunicarme con las personas voy a conseguir distintas cosas. Lo que tengo que hacer es invitarlos a participar, pero es muy distinto decir “juega con nosotros” que “participa con nosotros”, aunque en la práctica quiero expresar el mismo concepto. “Juega” es mucho más “diversión”, podría decirse incluso que “para niños”. En cambio “participar” es algo mucho más formal y sobrio. Es algo muy sutil, pero que va a decir mucho de nosotros .

Una foto en blanco y negro y una a color pueden contener exactamente lo mismo, pero por el solo hecho de ser en blanco y negro ya me está diciendo otras cosas que la que a color no hace: habla de arte, talvez de antiguedad, de recuerdos, etc.; al igual que una foto en color sepia me habla de melancolía, desgaste o algún otro concepto similar.

Otro ejemplo está en el código fuente. Yo puedo armar dos sitios que se vean iguales en cualquier navegador, y si veo el código fuente de ambas páginas es igual. Sin embargo lo que los diferencia es que un código está perfectamente ordenado y tabulado y el otro no. Técnicamente ambos dicen lo mismo y cumplen la misma función, pero el código ordenado me va a transmitir que la persona que hizo el sitio hace las cosas bien. El que no es ordenado me va a decir que la persona es desordenada. Tal vez incluso crea que se demoró más en lograr el mismo trabajo porque me da la impresión que no tiene claro lo que hace.

La metainformación es algo de lo que hay que preocuparse mucho, aunque no se vea en una primera mirada.

Cómo funciona en general el sistema de los sitios Web?

Para que un sitio web se vea en internet, debe contar de dos elementos:

1. Una URL (tudominio.com o algo así)
2. Un servidor (donde se almacenarán los archivos de tu sitio)

La URL es lo que escriben las personas en su navegador. Es algo así como la dirección de la casa o del negocio de alguien. Una cosa es tener la dirección, pero que pasa si llego allá y no hay nada?…un terreno vacío?. Bueno, eso suele suceder. Aunque les suene increíble, hay quienes no saben que un sitio ocupa un espacio “físico”. Consta de archivos y esos archivos deben ser almacenados en algún espacio en Internet. Algo así como tener un “disco duro” en alguna parte de Interntet. Esa parte es un “servidor”.

En Internet todos los servidores o computadores que se conectan se identifican en base a las direcciones IP (“Internet Protocol”). Algo así como la cédula de identidad de cada persona (similar a 123.456.789.123). Al momento de encender un computador y conectarse a internet, a este computador se le asigna una dirección IP. Y al servidor, al ser un computador real ubicado en alguna parte del mundo, al momento en que lo encienden, también se le asigna una dirección IP.

Por lo tanto, si tengo mis archivos en un servidor, y este servidor tiene su dirección IP, puedo ir a “la dirección de su casa” a ver los archivos que tiene dentro. Probablemente si ingreso en mi navegador su dirección IP pueda ver el sitio, sin necesidad de que esté asociado a una URL. Podría entonces ir a la página web http://123.456.789.123/ y ver el sitio que estoy buscando. Como ejemplo de esto, para ingresar a google yo puedo ir a http://www.google.com o a http://209.85.195.104.

Entonces nos acabamos de dar cuenta que la URL es sólo un “acceso directo”. El dominio es SOLAMENTE un “ayuda memoria” para tener que recordar una palabra y no un número.

La cosa ahora es “¿cómo asociar mi URL a mi servidor?”. Fácil. Al comprar un dominio (o URL) me van a solicitar, junto con todos mis datos, que ingrese los DNS del servidor al que lo quiero asociar. Estos DNS corresponden a direcciones IP (estos números que los identifican en internet) o a otras URL (que previamente fueron asociadas al servidor). Estos DNS son proporcionados por la propia empresa con que contraté mi servidor (generalmente uno recibe un correo con esta información) y debo ingresarlos en el formulario correspondiente. De esta manera le estoy diciendo a mi URL que cuando alguien escriba http://www.midominio.com en su navegador, el sistema internamente lo lleve a http://123.456.789.123, y pueda ver mi sitio web.

Obviamente, para que mi sitio se vea, tengo que haber subido previamente los archivos de mi página web a mi servidor.

Por otro lado el servidor es algo más que un simple computador. En el hosting se almacena todo lo que sea almacenable de mi sitio, como los archivos, las bases de datos, las cuentas de correo. Además el servidor es configurable por el usuario a través del “panel de control”. El problema es que todos los paneles de controles son distintos para cada hosting, asique no puedo hablar mucho acerca de eso.

Los archivos, por ejemplo, se almacenan en el “hosting” de nuestro servidor. Para acceder a mi hosting tengo que ingresar (con un nombre de usuario y una contraseña) a una cuenta FTP (“file transfer protocol” o “protocolo de transferencia de archivos”). Para eso tengo que utilizar un programa que me permita hacer esta conexión, y que, una vez conectado me va a mostrar a un lado el disco duro de mi computador y al otro el disco duro de mi servidor, para que yo pueda “subir” los archivos.

Las bases de datos, por otro lado, se almacenan en el sistema de bases de datos, al cual también debo acceder a través de un nombre de usuario y contraseña, a través de una página Web. En las bases de datos no hay archivos que subir. Lo que hay es información, la cual igual ocupa un espacio y debe ser almacenada en alguna parte de nuestro servidor.

Y el sistema de correos electrónicos también se almacena en alguna otra parte de nuestro servidor. Desde el panel de control de nuestro servidor podremos crear cuentas y asignarles contraseñas para que sean usadas como todos sabemos. El tema es que todos los correos que llegan también ocupan un espacio que debe ser reservado en nuestro servidor para esto.

Por lo tanto, si contratamos un servidor con 200 MB de espacio, tenemos que considerar que estos 200 megas deberán ser divididos entre nuestros archivos (cuenta FTP), nuestra base de datos y nuestros correos.

En el fondo, el resumen de todo esto es que el dominio SOLAMENTE aputa hacia un servidor. En el dominio no se configura nada excepto hacia donde se apunta, para lo cual debemos tener un nombre de usuario y contraseña generalmente (o sólo una contraseña en algunos casos). En el servidor (a través de su panel de control) podremos configurar todo el resto de las cosas, como cuentas ftp, bases de datos, cuentas de correo, tipos de usuario, etc.

Y entonces… ¿cómo podemos “ahorrar espacio”?

Existe una posibilidad para almacenar los correos FUERA de nuestro servidor. Por ejemplo, Google ofrece su servicio Google Apps, que permite administrar y almacenar los correos.  Para eso nosotros tenemos que configurar nuestro servidor modificando algo llamado “Registros MX” (hay que considerar que no todos los servidores permiten cambiar los Registros MX).

Al modificar estos registros le vamos a estar diciendo a nuestro servidor que cuando reciba un correo no se preocupe por él sino que deje que el nuevo servidor que especificamos reciba, procese y almacene el correo. Esto quiere decir que se puede tener un sitio alojado en un servidor en un lugar y los correos administrarlos en otro servidor en otro lugar del mundo. Si se cae el servidor del sitio no va a afectar al servidor de los correos y viceversa.

Tipos de servidores

Existen dos tipos: los servidores compartidos y los servidores privados.

Un servidor privado es “privado”, como su nombre lo indica. Esto quiere decir que el computador donde se almacenan los datos es exclusivo para nostoros. En ese computador solamente va a haber archivos e información nuestra. Vamos a poder configurarlo a nuestro gusto y POR SUPESTO es muchísimo más caro que un servidor compartido.

En los servidores compartidos, el computador en el que está alojado nuestro sitio, aloja muchos otros sitios (de gente que no conocemos). Es decir, que nos venden un trozo del pastel. Esto implica que si nosotros tenemos muchas visitas, vamos a “afectar” al resto de nuestros vecinos.

Los servidores compartidos son los que muchos de nosotros utilizamos. Los privados generalmente se ocupan en sitios grandes y que tienen miles de visitas por día.

El problema que surge acá es el siguiente: a cada computador (servidor en este caso) conectado a internet recibe una dirección IP única. Supuestamente si ponemos como URL esa dirección IP vamos a poder ver nuestro sitio. Pero ¿que pasa cuando un servidor es compartido?… bueno, en ese caso no se puede acceder a él por IP porque el servidor no sabe cual de los sitios que tiene alojado debe mostrar. Por ejemplo, el servidor donde tengo alojado este sitio es compartido, y si intentan acceder por IP (este link se abre en una ventana nueva) verán que sale un error.

En los casos en que el servidor es compartido, el sistema funciona de otra manera. El servidor es configurado para que lea la URL a través de la cual se accede. Si la URL que están solicitando es http://www.sebastianbarria.com, el servidor va a mostrar el contenido alojado en una cuenta (carpeta) específica. Si la URL es otra, va a mostrar el contenido de otra carpeta y así. El dominio APUNTA al servidor (llama internamente a la IP que le dijimos) y el servidor entonces discrimina que archivos mostrar o donde almacenar la información de correos correspondiente.

Cabe destacar que un servidor no es más que un computador común y corriente. Talvez con un poco más de memoria o de velocidad, pero es básicamente eso. Un computador con algún sistema operativo específico instalado.

Tipos de dominios

Existen tres tipos de dominios que debemos manejar:

1. El dominio principal (midominio.com)
2. Los subdirectorios (midominio.com/blog, midominio.com/mail, etc.)
3. Los subdominios (blog.midominio.com, mail.midominio.com, etc.)

El dominio principal es la base de todo. Es el que compré y que ahora está asociado a mi servidor.

Los subdirectorios son reflejo de la raíz de mi dominio. Si en mi dominio hay una carpeta que se llama “carpeta”, entonces automáticamente va a ser accesible a través de midominio.com/carpeta.

Y los subdominios son considerados como dominios independientes. Puedo tener un sitio en un dominio y otro completamente distinto en un subdominio de él. Esto se debe configurar a nivel de servidor y en el fondo se asigna una carpeta específica a la que debe apuntar cada subdominio. También se puede configurar para que un subdominio apunte a la carpeta raíz y de esa manera si ingreso desde el dominio o subdominio, pueda ver el mismo sitio, como es el caso de midominio.com (sin “www”) y www.midominio.com (con “www”).

Hay sitios que están mal configurados a nivel de servidor y en los que si ingreso el dominio con www veo algo y sin www veo el correo o simplemente una página de error. Este es un error importantísimo de corregir pues hace perder toda la credibilidad del sitio en cuestión.

Como consejo, siempre es bueno configurar una de las dos alternativas (con “www” y sin “www”) para que sea la principal y que la otra apunte a ella. Esto se puede hacer a través de servidor o desde el archivo .htaccess (tema para otro artículo).

Bueno, creo que con eso basta por ahora… al parecer es mucha información junta… Ojalá les sirva para aclarar algunas dudas al respecto.

¿Creen ustedes que esto pasa en la vida “real”?… y si no pasa en la vida “real”, porqué si debería pasar en la vida “virtual”, con todas las pegas relacionadas a la creatividad, el arte, o el diseño?.

Click here to view the embedded video.

Supongo que la próxima vez que un cliente les hable así por “un trabajito” que necesitan que les haga lo van a pensar dos veces…

Más que “¿cuánto cobrar?” creo que la pregunta sería “¿cómo cobrar?”, porque el costo de cada desarrollo varía mucho según una serie de factores, por lo tanto dar un valor específico a cada tarea es un poco azaroso.

Como un claro ejemplo de esto, pueden ver esta página, donde el autor muestra una tabla con los valores mínimos fijos para algunos diseños en particular.

Pero la gran duda de todo este asunto está en “como llegar a esos valores”, y para conseguirlo tendremos que tener en cuenta varios factores:

El valor hora/hombre

Cada uno de nosotros tiene un valor por su trabajo. Probablemente no sepamos cuanto es, y la idea es que aprendamos a definirlo.

La manera más simple de definir este valor/hora es pensando ¿cuanto quiero ganar al mes?. A partir de ese valor podemos deducir un valor hora razonable.

Para este ejemplo, supongamos que yo soy un diseñador gráfico con 5 años de experiencia. Digamos que en el mercado, alguien como yo gana actualmente $600.000. Si un mes tiene aproximadamente 22 días laborales, y cada día tiene 8 horas de trabajo, mi valor hora debería ser:

$600.000 / 22 / 8 = $3.410

Es decir que mi valor hora debería ser de $3.410. ¿Así de fácil?… pues no.

Veamos otro factor a considerar.

Las horas trabajadas al mes versus las que podría trabajar

Obviamente, por mucho que queramos, no vamos a poder trabajar TODAS las horas que tenemos consideradas en el mes, probablemente porque tendremos otras cosas que hacer o porque no tendremos, al menos en un principio, tanto trabajo. Por lo mismo, vamos a tener que prever que de las 176 horas que consideramos trabajar en un mes, probablemente trabajemos cerca de 120. Talvez más, talvez menos.

Con respecto a este factor tendremos que tomar una desición: lo consideramos como una pérdida asumida (y ganamos menos hasta que nos afirmemos con la cantidad de trabajo) o lo cobramos como un factor adicional en nuestro valor/hora. Si lo queremos cobrar, tendremos que subir el valor de nuestro trabajo. Digamos a $5.000 / hora ($600.000 / 120 horas).

Costos adicionales

A menos que trabajemos colgados de la corriente y del internet, es obvio que de alguna manera vamos a tener que pagar esos gastos. Por lo tanto, tendremos que asumir ese gasto también en nuestra fórmula, que hasta este minuto se resumiría en lo siguiente:

Sueldo deseado / horas trabajadas + (costos adicionales)= valor hora

El tema es que: ¿que tantas cosas debo considerar en como costos adicionales?. Pues varias, por ejemplo:

• Luz
• Internet
• Agua
• Teléfono
• Depreciación del computador
• Costos de seguro social, ahorro previsional, etc.
• Arriendo de oficina o del lugar donde esté trabajando (incluyendo gastos comunes)
• Insumos (tinta de impresora, cd, lápices, hojas para imprimir, cuadernos, etc.)
• Gastos de aseo

Puede sonar a que estamos considerando demasiadas cosas, pero si alguna de estas (todas) se aplican, deberán considerarlas como un valor adicional. Podrían no hacerlo en un principio, pero a la larga, de una u otra manera, terminarán considerándolo.

Con respecto a la depreciación del computador (que es el caso más extraño de los que hay arriba), hay que considerar que un computador va quedando obsoleto con el tiempo, y después de algunos meses o años, será necesario mejorar la tarjeta de video, la ram o lo que sea necesario según el trabajo que hagamos. Por lo tanto, para no llevarnos la sorpresa de tener que gastar de nuestra ganancia (los $600.000 iniciales) en eso, debemos considerarlo.

Para hacer esta sumatoria de “costos adicionales” debemos, de alguna manera, pensar en cuanto será lo que gastaremos en cada uno de los items (probablemente mensual o anualmente) y luego dividirlo en los meses y/u horas que correspondan para obtener nuestro “valor hora”, igual como lo hicimos con nuestro sueldo deseado. Luego sumamos todos esos valores y tendremos nuestro “costo adicional”.

Y ahora si que llegamos al final: es hora de sumar. Supongamos que mi costo adicional por hora es de $1.800. Con esto, nuestro valor hora sería de $6.800, por lo cual TEÓRICAMENTE, al mes estaríamos ganando $1.196.800 ($6.800 x 176 horas mensuales).

¡¡¡WOOOOW!!!

Que número!…se ve hermoso!…pero no se emocionen mucho, porque ahora vienen dos factores adicionales que no debemos olvidar!

Factores adicionales

El primero está en su capacidad de poder “autoadministrar” su dinero, pues si no pueden guardar el dinero que sea necesario para pagar los gastos fijos que tengan, terminarán consumidos por su propia ambición.

El segundo factor está en que el cliente acepte nuestro valor/hora. Pues claro, que pensaban, ¿que todo era color de rosas?. JA!. Lo que pasa es que ahora entran en juego varias cosas que determinan el éxito que tengamos:

• ¿Qué tan bien hacemos nuestro trabajo con respecto a las demás personas del rubro que cobran menos?
• ¿Somos capaces de negociar y de convencer a algún cliente de que nuestro trabajo vale lo que pedimos? ¿o tendremos que conformarnos con lo que nos quieran pagar?
• ¿Tenemos contactos, o sabemos donde ofrecer nuestro trabajo, o “vamos a ver que pasa”?
• ¿Tenemos el valor y la voluntad de “luchar” por nuestro elaborado valor/hora?

Por supuesto que estos factores no son desicivos a la hora de definir nuestro valor/hora, pero si serán importantísimos cuando comencemos a ofrecer nuestro trabajo a ese precio. Será difícil, pero debemos estar seguros de que lo valemos.

Y ahora si es posible llegar a preguntarse:

¿Como cobrar?

Fácil:

1. Le preguntamos al cliente que es lo que necesita
2. Hacemos un estimado de las horas que demorará cada tarea
3. Preparamos el presupuesto, considerando las horas a trabajar y nuestro valor hora

De esta manera, nuestro presupuesto dirá cuanto deberíamos cobrar por nuestro trabajo. Luego viene el juego del regate y el descuento, pero eso ya es harina de otro costal.

Al momento de maquetear un sitio Web es necesario fijarse en varios aspectos, que no siempre son atendidos por los desarrolladores. Algunas veces por descuido, otras por no saber.

Acá les dejo este checklist que puede servir de ayudamemoria para los que maquetean. La idea no es hacer una buena maqueta, sino una profesional:

Código HTML

El código debe ser limpio y claro. Debe estar hecho con DIVs y no tablas. La idea es que se usen las etiquetas correctas en los lugares correctos: si vamos a poner un título que no sea div, sino que sea un H1, H2 o H3 (dependiendo de su importancia); si ponemos un input en un formulario, el texto asociado debe ir dentro de una etiqueta LABEL y debe tener el atributo FOR indicando al ID del input; etc.

Además de todo esto, el código debe ser validado por la w3c.

CSS

Los estilos CSS deben estar correctamente ordenados (ordénenlos como quieran, ¡pero ordénenlos!). Deben fijarse en que no hayan atributos innecesarios ni duplicados, ni estilos que no se estén usando. Por supuesto que deben estar bien tabulados y deben ser lo más compacto posible (para ahorrar espacio).

También deben estar validados por la w3c.

Codificación

Este tema es probablemente de los más complejos y desconocidos. En realidad no es tan complejo si se explica claramente, pero siempre cuesta entenderlo. Asique para ahorrarme palabras les dejo esta excelente explicación. En resumen, la idea es siempre utilizar UTF-8 como codificación ya que es más universal, y de esa manera se asegurarán que al momento de integrar la maqueta con algún lenguaje de programación (php, asp, etc.) todo va a funcionar perfecto. Sino, mejor ni les digo el problemita que van a tener con las “ñ”, los acentos y algunos otros caracteres.

Tamaño de texto y deformidades

Generalemente, la maqueta se debe hacer respecto a algún diseño (probablemente un PSD). Lo que digo con respecto al tamaño del texto es que deben asegurarse que los tamaños de texto que aparezcan el los PSD deben ser EXACTAMENTE IGUALES al que se ven en sus maquetas (de hecho la maqueta debe ser EXCATAMENTE igual que el diseño: esa es la idea de un buen maqueteo, sino ¿para qué entregar un diseño?).

Si se fijan también, los navegadores (no todos) hacen crecer el texto de la página al girar la rueda del mouse presionando la tecla CTRL. En esos casos, debemos asegurarnos que los textos que vayan creciendo no se salgan de sus espacios y que no se monten sobre otros textos. Generalemente este problema surge cuando se dan alturas fijas a los DIVs, y la solución se consigue utilizando algunos trucos que ya he mencionado (Divs expandibles).

Png’s transparentes en IE6

El típico problema, que aunque todos los desarrolladores estemos en contra, vamos a tener que solucionar hasta que este famoso navegador (y no por ser bueno) esté fuera del mercado.

Debemos cerciorarnos de que las transparencias se vean bien en IE6.

Correcta visión en todos los navegadores

Antes de comenzar el desarrollo (o durante) debemos tener claro para que navegadores debemos maquetear. Idealmente es para todos, pero por lo menos hay que regirse por los 4 más populares: Firefox, Internet Explorer (6,7 y 8), Safari y Chrome.

Como lo he mencionado varias veces, el objetivo es que se vea EXACTAMENTE IGUAL en todos los navegadores, incluyendo espacios separaciones, fondos, transparencias, tamaños, etc. Se puede, incluso sin usar los típicos hacks de CSS que andan dando vueltas por internet.

Tabulación y eliminación de espacios

Una vez que nuestra maqueta está terminada, tenemos que mirar su código.

Debemos fijarnos que esté correctamente tabulada (con tabs y no con espacios) y que no tenga saltos de linea adicionales. Por ejemplo, si utilizamos Dreamweaver, debemos cerciorarnos que en OPCIONES / FORMATO DE CODIGO esté marcado “indentar con 1 tab”. Si no lo hacemos así, tendremos miles de caracteres adicionales que pueden hacer incluso que una página pese un 25% o 30% adicional (y cuando hablamos de sitios con muchas visitas eso cuenta).

Limpieza de CSS y JS

Lo mismo que comenté antes de los CSS. Debemos realizar una limpieza final a los CSS y JS que hayamos utilizado para que no sobre nada y para que estén correctamente ordenados.

Ortografía

Cae de maduro, pero no para todos. Hay que fijarse en que la ortografía de nuestra maqueta o desarrollo sea correcta. He visto sitios por ahí que llegan a ser vergonzosos, y eso dice mucho de una empresa o persona.

JS y CSS de la cabecera

Debemos fijarnos que los CSS y JS que forman parte de nuestro desarrollo estén incluídos dentro de la etiqueta HEAD. La única excepción que podríamos hacer es en los casos de JS o CSS adicionales, como por ejemplo, los de Google Analytics, que idealmente deberían ir al final (para permitir que la página se cargue primero).

Debemos fijarnos también que no hayan funciones o estilos escritos en el código HTML (¿por qué?).

Links, hover y visted

Otro detallito más que muchas veces pasa desapercibido. Debemos fijarnos que no existan links rotos y también que pasa con nuestros links al momento de ser visitados. Los colores de los :visited y :hover deben estar definidos en nuestros estilos CSS.

Navegación

Una vez que está todo listo, es hora de navegar nuestro sitio, y probar que todo esté en orden. Es mejor que nos demos cuenta de cualquier detalle antes de lanzar un sitio a que se den cuenta nuestros visitantes de los errores.

De todas formas, creo que está bien que haya gente que hace ese tipo de sitios, pues no todos los clientes necesitan tener un sitio Web llamativo, o hecho especialmente para ellos. Muchos necesitan (se conforman) con un sitio hecho a partir de una plantilla y que sea económico.

En fin. Pero para aquellos clientes que SI consideran que su sitio Web es una inversión y no un gasto, será necesario desarrollarles un sitio Web innovador, personalizado, bien diseñado y bien armado, y es ahí donde aplicaremos el proceso creativo.

¿Qué es el proceso creativo?

Como su nombre lo indica, es un “proceso”. Eso de la inspiración y de que hay que tener el “don” para poder hacer buenos sitios o crear algo es una vil mentira. Cualquier persona puede crear un buen sitio (aunque no necesariamente un buen diseño), y depende en parte de que siga estos pasos al pie de la letra:

Debo aclarar que este proceso está basado en mi experiencia en el desarrollo Web y en los estudios que he tenido al respecto. El proceso creativo es un concepto genérico que es aplicado en diseño, arquitectura, arte y todas esas especialidades que dicen ser artísticas (a pesar de que lo primero que te enseñan es la “técnica” de crear y que todo buen trabajo requiere 80% de sudor y 20% de inspiración).

Paso 1: Obtener la información

El primer paso del proceso creativo consiste en obtener la información acerca de nuestro cliente. Necesitamos saber principalmente lo siguiente:

• Quién es nuestro cliente (que hace, que ofrece, años en el mercado, etc.)
• Cuál es su público objetivo
• Qué quiere conseguir con su sitio Web (visitas, vender, recopilar datos de sus clientes, etc.)
• Qué es lo que necesita destacar (para dar énfasis a eso en el diseño)
• ¿Tiene un sitio Web actualmente? (¿qué es lo bueno y lo malo de ese sitio?)
• etc.

Con estas simples preguntas es posible hacerse una idea de nuestro cliente y de lo que espera que desarrollemos.

Probablemente nuestro cliente no sepa muchas o ninguna de estas respuestas. Por lo mismo, tenemos que considerar que el cliente “no siempre tiene la razón” y que muchas veces quiere algo que no es necesario o que está mal pensado, y para eso estamos nosotros para poder asesorarlos y aconsejarles según nuestra experiencia.

Paso 2: Analizar la información

¿Qué hacemos con toda esa información?: pues analizarla.

Lo primero que debemos hacer es armarnos un mapa (mental o dibujado) de quién es nuestro cliente y cual será su objetivo en Internet. Debemos pensar cuál será la mejor manera de poder llegar a su público objetivo y por lo tanto, cómo debemos enfocar el sitio que desarrollemos:

• Si el público objetivo son los jóvenes, probablemente debamos enfocar el sitio a potenciar las comunidades y la fidelidad de los visitantes mediante registros y  concursos, creación de perfiles, foros, etc., es decir, darle vida mediante la interacción de las mismas personas.
• Si el público objetivo son las mujeres, probablemente debamos enfocar el sitio a la simplicidad en su uso y a la claridad de los contenidos y en cuanto al diseño, a explotar la fotografía y colores del sitio.
• Si el público son las personas que trabajan en empresas, el sitio puede estar enfocado a potenciar la comunicación inter-empresarial; a integrar servicios para empresarios y trabajadores, ser un sitio sobrio y elegante, etc.

En torno a todas esas variables debemos definir finalmente que tipo de sitio debemos crear y a que tipo de diseño debemos apuntar. Como verán, las mismas respuestas que nos entregue el cliente nos dirán a donde tenemos que ir.

Paso 3: Proponer algo novedoso

Una vez que tengamos definido hacia donde tenemos que ir, es nuestra labor realizar la propuesta final. Esta propuesta (dependiendo del tipo de sitio) puede incluir cosas innovadoras y experimentales, o puede centrarse en la sobriedad y hacer “lo correcto”. Pero debemos tener claro que la propuesta deberá ser basada en la información y análisis que hemos recopilado.

Obviamente para poder proponer cosas innovadoras, debemos estar al día con todo lo que está pasando actualmente en Internet, para lo cual debemos estar siempre revisando sitios Web, galerías con “los mejores sitios”, conocer las últimas tecnologías, estar suscrito a los feeds de blogs que nos parezcan interesantes y que nos aporten a este tipo de conocimiento.

Por regla general, debemos tener un blog y tener cuenta en todos los servicios que están de moda (flickr, twitter, facebook, dropbox, linkedIn, gravatar, youtube, etc.) para saber como funcionan los servicios existentes y como manejar un sitio, saber que está pasando y poder generar ideas “nuevas” o proponer ideas que sean aplicables al sitio en cuestión (sino no tendríamos la experiencia necesaria como para asesorar o proponer).

Como siempre, la mejor manera de generar este tipo de ideas nuevas es con un brainstorming y conversando con otros diseñadores o desarrolladores que nos puedan aportar.

Paso 4: Definir el contenido

Este paso es algo mecánico. Debemos preguntarle al cliente cuál es el contenido que él tiene en mente para el sitio. Según lo que nos diga, debemos proponerle y asesorarlo para poder definir en conjunto el mejor contenido a mostrar en el sitio para que cumpla con los objetivos que tenemos planteados.

También es muy importante definir la arquitectura de la información que utilizaremos en nuestro sitio (definir la estructura de contenidos, mapa del sitio, wireframes y la manera en que organizaremos los menús y destacaremos las cosas importantes del sitio).

Paso 5: Manos a la obra

En este paso definiremos la cara del sitio. Debemos realizar una propuesta gráfica (diseño) que sea acorde al resultado del análisis que hemos obtenido en el paso anterior. Si el cliente ya había aprobado nuestros wireframes, no quedaría otra cosa que hacer que “pintarlos” para obtener el resultado final.

Una vez que nuestro cliente vea y apruebe las maquetas gráficas de nuestro sitio (que a esta altura ya contienen toda la información real o simulada que irá en el sitio y podrán previsualizar su resultado final), estamos listos para pasar a la etapa de desarrollo, donde le daremos vida a nuestra creación.

Si no somos diseñadores como para asegurarnos poder desarrollar un buen diseño para web, debemos al menos conocer algunas reglas básicas de diseño (que tipos de líneas usar en que situación – rectas o curvas -, que tipografía – con serif o sin serif -, que paleta de colores, etc) y otras reglas de composición (subdividir la página en 9 cuadrantes, cuando y como utilizar grillas, tener nociones de como proporcionar elementos dentro de la página, etc.). Y si tenemos poca experiencia en el diseño específico para Web, debemos conocer estas pautas para diseño web en photoshop.

El desarrollo y todo lo demás

Para que nuestro cliente quede contento, no sólo tenemos que haber cumplido con todos los pasos anteriores, sino que también tenemos que priorizar lo que viene ahora: el desarrollo que hagamos tiene que ser acorde a la calidad de nuestro servicio. Debemos desarrollar el sitio EXACTAMENTE igual a como fue propuesto y aceptado por el cliente. Los espacios, las tipografías, los tamaños de las imágenes y todo debe ser fiel reflejo de nuestra propuesta.

Además tenemos que pensar que el cliente será el usuario final del sitio. Si hay paneles de administración tenemos que pensar en que sean lo suficientemente amigables y funcionales como para que el cliente pueda hacer todo lo que necesite. Si el sitio no posee un sistema de autoadministración debemos proponerle una manera simple de actualizar el contenido y debemos dejar claro todo antes de la primera actualización o perderemos credibilidad como desarrolladores.

Pero la cosa es simple: si se siguen los pasos necesarios correctamente, el cliente siempre estará contento con nuestro trabajo, y por lo tanto estará contento con el resultado final.

Así que recuerden: “Todo buen trabajo requiere 80% de sudor y 20% de inspiración“.

Entonces en ese minuto uno se pregunta: “¿será que para este cliente su sitio web es un gasto más que una inversión?”. Porque si el sitio fuera una inversión, el dinero que pague por mejorar su sitio será devuelto con creces (o por lo menos devuelto) por el mismo sitio web (ya sea en beneficios, en publicidad o incluso en ventas).

Pero probablemente, para este cliente, ocupar su dinero en su sitio web sea un gasto, porque no tiene claro para que lo quiere realmente, o incluso para que lo necesita; y tampoco tiene claro como sacarle partido para que pase de ser un gasto a una inversión.

Acá planteo una serie de preguntas que todo desarrollador web debería hacerle a sus clientes cuando se ven en una situación similar:

¿Creen que el sitio es una inversión o un gasto?
Esta es la gran pregunta

¿Cuánto vale un sitio web barato y uno caro para ustedes? (¿por qué?)
Generalemente los clientes tienen una noción distorcionada de este concepto porque para ellos – al no saber técnicamente – hacer un sitio web es bajar unas plantillas y apretar unos botones y listo. Muy probablemente crean que uno se aprovecha y le cobra cosas que uno nunca hace (al igual que lo que practicamente todos creemos de los servicios técnicos o los mecánicos de autos).

¿Qué es más importante para ustedes: Web o revistas?
En este minuto estamos viviendo un gran cambio tecnológico y las revistas ya están quedando obsoletas. Incluso los medios escritos más importante están pasando del papel a web, principalmente porque es más barato y es mucho más fácil llegar a un público objetivo específico.

¿Para que quieren el sitio (cuál es el objetivo del sitio)?

• Promocionar
• Vender
• Tener presencia (tener un sitio porque todos los demás tienen)
• Marcar diferencia (ser un referente y la envidia de la competencia)
• Etc.

Según sea el objetivo de cada cliente, talvez haya que modificar o potenciar partes del sitio; o talvez haya que sacarle cosas al sitio porque tiene funciones de más que nunca van a ser usadas o vistas.

¿Qué es lo más importante en el sitio actualmente para ustedes?

• Blog
• Contacto
• Catálogo y promociones
• Suscribir/registrar usuarios
• Etc.

Y eso que es lo “más importante”: ¿está siendo destacado actualmente en la home?

¿Cuántas visitas diarias esperan llegar a tener?

• Actualmente reciben entre XXX y XXX visitas (¿lo sabían?)
• ¿Creen que su sitio pueda triplicar las visitas actuales?

Por supuesto, todo esto se debe hacer pensando en el público objetivo. Si el cliente vende ropa para abuelitos (que probablemente ninguno usa internet) y actualmente tienen pocas visitas diarias, no deberían esperar poder aumentar tanto la cantidad de visitas (por lo menos no sin hacer un cambio sustancial en el sitio).

¿Cuál es su expectativa del sitio de aquí a un año?

• Seguir como está
• Aumentar las visitas
• Hacer uno nuevo
• Bajarlo de Internet
• Etc.

La idea de esta pregunta es saber “cuales son sus metas a corto plazo con el sitio”. Talvez el cliente quiera algo utópico o talvez espere mucho menos de lo que puede conseguir: y ahí entra en juego la experiencia y soporte que le puede entregar el desarrollador.

¿Les ha sido útil registrar o suscribir usuarios?

• ¿Cuantos suscritos y registrados hay?
• ¿Envían mails a los suscritos?

No todos los sitios tienen sistemas de suscripción, pero es una buena estrategia a implementar. Incluso con herramientas gratuitas y completas como las que ofrece feedburner.

¿De que manera promocionan el sitio?

• Tarjetas de presentación
• Haciendo promociones
• En las etiquetas de los productos
• Documentos, boletas y facturas
• En la misma tienda
• En los correos? (usando los @midominio.com)

Si el cliente no promociona su propio sitio, es difícil que la inversión retorne, y por ende “si o si” el sitio será un gasto.

¿Le están sacando partido a los medios digitales?

• Facebook
• Twitter
• Mailing

No todos los medios digitales son efectivos. Por supuesto que depende de cada cliente: si su público objetivo no usa twitter, sería una pérdida de tiempo utilizarlo.

¿Tienen pensado invertir dinero y tiempo en el sitio?

• ¿Es siquiera una posibilidad?
• ¿Cuánto dinero dedicarían al sitio?
• ¿Creen que gastar ese dinero valdrá la pena?

Aunque queramos que un sitio aumente sus visitas considerablemente, si no hay inversión de por medio es muy difícil conseguirlo. Un sitio no se promociona solo y tampoco se hace conocido si la persona que lo administra no entiende bien del tema (muchas veces pasa que el sitio lo administra alguien que no sabe nada de de diseño, de sitios web o de internet).

¿Les interesa / pueden vender a través de Internet?
Si la empresa puede y quiere vender por internet, se le puede dar un gran giro al sitio. Pero claro, todo depende de si el cliente está dispuesto a invertir en ella.

¿Están dispuestos a facilitar premios para organizar un concurso?
Si el cliente tiene productos que pueda facilitar para hacer concursos, es ideal que se pueda organizar algo para darle vida al sitio. Con una idea creativa no se necesita gastar mucho dinero para implementar algún tipo de concurso que motive a la gente a visitar el sitio y comprar productos de nuestro cliente.

¿Reciben comentarios del sitio actualmente?

• ¿Cuales?
• ¿En la tienda, vía web, o por facebook?

Si el cliente no recibe comentarios de su sitio, probablemente se deba a que: o es un sitio ni bueno ni malo, o talvez a que casi nadie ingresa al sitio (probablemente sea esto último).

¿Cuánto tiempo diario o semanal dedican al sitio?

• Ver que está pasando en el sitio
• Ver cuantos usuarios suscritos / registrados hay
• Renovar contenido y cambiar las fotos de la home

Si el cliente dice “una vez a la semana”, entonces la cosa está mal (dependiendo del sitio de todas maneras). Pero un cliente que está preocupado por su sitio, está siempre atento a lo que pasa. A lo menos una ve al día.

¿Cada cuanto tiempo actualizan el sitio?
No es lo mismo “dedicarle tiempo al sitio” que actualizarlo. Generar nuevos (e interesantes) contenidos y publicarlos. Dependiendo de la necesidad de los visitantes, el sitio debería entregarles contenidos nuevos, pues el visitante necesita ver cosas nuevas en nuestro sitio para que vuelva.

¿Consideran las estadísticas del sitio?

• ¿Les preocupa que tenga pocas visitas?
• ¿Les llama la atención algo en particular?
• ¿En que circunstancias es más visitada la página? (cuando la actualizan, a principios de mes, etc.)

Entonces nuevamente: ¿Creen que el sitio es una inversión o un gasto?

Probablemente el cliente les diga “es que no tengo tiempo para estar metido en el sitio”, y eso significa que el cliente no valora o no conoce el potencial que implica tener un sitio. Y por supuesto, que como desarrollador/proveedor/asesor tenemos que ofrecerle a nuestros clientes alternativas a estos problemas: planes de mantención semanal (del sitio y de las herramientas de comunicación que el sitio maneje).

Sobre este tema, nuestro principal enemigo son los clientes “analfabetos digitales” (esos que preguntan “¿y para qué quiero yo un sitio web?”). a estos clientes hay que asesorarlos e instruirlos, pero principalmente, lo que hay que hacer es generar alguna estrategia para lograr convencerlo de que su sitio web puede llegar a ser una inversión y no un gasto.

Generalmente los clientes no tienen idea de lo que es WordPress o de lo que es una plantilla para WordPress. Ellos sólo la piden, y cuando les preguntas tampoco sabes realmente que ofrecerles.

Acá vamos a hablar un poco del tema.

1.0: Lo básico

Los elementos más básicos de una plantilla de WordPress son los posts. Por lo tanto, las páginas elementales son:

• plantilla de un listado de posts
• plantilla de detalle de un post (la página a la que se llega al hacer click en el link “ver más” de cada post)

La gracia es que los posts pueden ser usados como posts (obviamente), como noticias, e incluso como catálogo de productos o elementos de un portafolio. Lo importante es tener claro como funcionan los posts y como queremos organizar nuestro sitio.

En torno a estos elementos es posible ir creando un sinfín de otras páginas que permitan hacer la página más completa y amigable.

2.0: Las demás cosas necesarias

Por supuesto que lo otro que es bastante necesario en un blog (pero no escencial) son las páginas de contenido estático y los formularios.

Las páginas de contenido son prácticamente iguales al detalle de un post. La principal diferencia es que la mayoría de las veces no permiten que la gente opine sobre ellas.

Los formularios de contacto están prácticamente en todos los sitios. Lo más importante a considerar es que estos pueden ser diseñados y programados a mano, o pueden ser instalados como un plugin.

Los plugins de formularios de contacto generalmente funcionan con esta lógica:

• Se instala y activa el plugin.
• Se crea una página de WordPress llamada “Contacto” y en el cuerpo de esa página se agrega un texto específico que indica el plugin. Generalemente se hace en la parte HTML del cuerpo y es algo como o [contact-form].
• En la sección de configuración del plugin se indica todo lo necesario para que funcione correctamente.

Entonces, las páginas que tenemos que considerar para estos elementos son:

• plantilla de página tipo (página de contenido estático)
• plantilla de formulario de contacto

En caso de tener que diseñar cada una de estas plantillas, hay que considerar diseñar todos los elementos que deberían ir en cada una:

• Listado de posts
  • Imagen
  • Título
  • Autor
  • Fecha de publicación
  • Resumen
  • Cantidad de comentarios
  • Etiquetas (tags) y/o categorías asociadas
  • Paginador (entradas anteriores, entradas siguientes)
• Detalle del post / Página de contenido estático
  • Título
  • Autor
  • Fecha de publicación
  • Texto completo
    • imágenes
    • párrafos (texto normal, destacado, cursiva)
    • blockquote
    • tablas
    • listas con bullets
    • listas con números
    • trozos de código (etiqueta pre, cuando sea necesario)
  • Cantidad de comentarios
  • Etiquetas (tags) y/o categorías asociadas
  • listado de comentarios (imágen del autor, título del comentario, nombre del autor, fecha y hora, texto del comentario)
  • formulario de comentarios (nombre, email, mensaje, botón de envío)
• Formulario de contacto
  • Puede tener tantos campos como sea necesario. Pero cuidado, porque los usuarios se espantan cuando los campos son muchos. Sólo pidan lo necesario.

3.0: Lo adicional

Una de las gracias que ofrece WordPress es permitir el uso de páginas “especiales”, que se basen en una plantilla (esta plantilla o “template” se escoge al momento de crear una nueva página).

De esta manera podemos crear páginas específicas para cualquier contenido, sin necesidad de que estas páginas utilicen la misma estructura de WordPress o incluso páginas especiales que realicen funciones especiales.

Un dato adicional que se puede tener en consideración es el uso de permalinks para nuestras URL. Para dejar los permalinks más “bonitos”, se debe ir a la sección de permalinks, escoger “Custom” y poner lo siguiente en el campo de texto: “%category%/%postname%“. De esta manera, los usuarios podrán ver nuestras url de la manera misitio.com/contacto en vez de misitio.com/pageid=7, por ejemplo, y el linkeo en nuestro HTML también será más fácil.

Lo bueno del uso del motor de WordPress es que nuestro sitio puede ser complementado con varios plugins que permiten interactuar con muchas redes sociales y hacer una infinidad de cosas. Por ejemplo, se puede instalar un plugin que envíe nuestros nuevos post a twitter, o que lea nuestra cuenta de twitter y publique nuestro último tweet. O podemos utilizar plugins para mostrar imágenes de nuestra cuenta de flickr, youtube, etc. Todo está en encontrar el plugin correcto.

En resumen, lo principal que hay que tener en mente es saber como funciona WordPress y como funcionan los plugins que necesitaremos utilizar, para diseñar y maquetear lo que sea necesario para su correcta utilización.