Acá les dejo algunas ideas y personajes que podrían seguir en twitter, que a mi juicio pueden ser interesantes para algunos.

Lo básico

Obviamente, a los primeros que hay que seguir es a todos nuestros amigos, familiares, conocidos, colegas, etc. Para eso basta con ir a la pestaña "find people" y utilizar los datos de nuestra cuenta de correo para que twitter encuentre (via email) a todos los que tenemos en nuestra lista.

Personajes por categorías

Si bien twitter nos recomienda algunos personajes que seguir, generalmente son personas que no nos interesan, sobre todo a los de habla hispana.

Como yo soy de Chile, algunos ejemplos que daré acá son para chilenos, sin embargo son extrapolables a los demás países. Basta con buscar (nuevamente en la pestaña "find people") y podrán encontrar a través del buscador.

Acá les dejo algunas cuentas que pueden ser interesantes:

Multimedia

• @peivem (yo, por supuesto)
• @optimizacion3D
• @Anieto2K (el famoso blogero español)
• @mootools
• @wwwhatsnew (del famoso blog español)
• @wordpress
• @fayerwayer (el famoso blog de tecnología)
  

Servicios

• @sismos_chile
• @meteo_stgo (meteorología de Santiago de Chile)
  
• @sismocr (sismos en costa rica)
• @InfoSismos (sismos y alertas volcánicas en el mundo)
• @EmergencyTweets (similar al anterior pero en inglés)
• @redforense (la comunidad forense de @geekbox - mi empresa)
• @comolohago (twitter de este excelente blog)
  

Fútbol

• @la_roja (selección chilena)
• @Mexico_Futbol (selección mexicana)

Ocio y divertidos

• @weoncagao (el personaje más "ahorrativo" que concerán)
• @que_prefieres (las típicas preguntas idiotas)
• @desmotivador (frases muy alentadoras)
• @Dios (el famoso personaje omnipresente)
• @cosas_que_odio
• @proverbia (proverbios varios)
  

Músicos y bandas

• @cerati
• @bjork
• @deftonesband
• @Silverchair

y más...

• @barak_obama (aunque no twittea)
• @DisneyPixar
• @lost (la famosa serie de TV)
• @Carabineros (Carabineros de Chile)
• @tuiters (agrupación de twitters chilenos)
  

La lista puede ser interminable: canales de televisión, diarios, revistas, personajes famosos, políticos. Obviamente acá hay algunos de ellos. Realmente la mayoría son las cuentas que yo sigo que creo que valen la pena o simplemente las publico por si a alguien le interesa conocer más cuentas en este #followfriday

San google apreciará mucho que utilicemos correctamente cada una de estas etiquetas y probablemente nos servirá bastante a la hora de posicionarnos.

Como siempre lo he dicho: si vamos a poner un título, no hay que utilizar p class="titulo", sino que utilizar la etiqueta H1.

a: Origen o destino de un hiperenlace (puede ser link o ancla)
address: Información de contacto
area: Área para un mapa de imagen
b: Estilo de texto en negrita (bold)
big: Estilo de texto de tamaño grande
blockquote: Mención o cita extensa
body: Contenido del documento
br: Salto de línea
button: botón
caption: título de la tabla
cite: Referencia a la fuente de la cita
dd: Definición de la descripción asociada al término dt
dfn: Definición de un término
div: Contenedor genérico de bloque para especificar el lenguaje o el estilo
dl: Lista de definiciónes compuesta por dt y dd
dt: Término de definición
em: Para enfatrizar algún texto. Por defecto se muestra con cursiva (emphasis)
fieldset: Agrupación de elementos de un formulario por temática
form: formulario
frameset: División de la ventana en un conjunto de marcos
frame: Marco o sub-ventana
h1: Encabezado de primer nivel. El de mayor relevancia
h2: Encabezado de segundo nivel. Debe existir previamente un h1
h3: Encabezado de tercer nivel. Debe existir previamente un h2
h4: Encabezado de segundo nivel. Debe existir previamente un h3
h5: Encabezado de segundo nivel. Debe existir previamente un h4
h6: Encabezado de segundo nivel. Debe existir previamente un h5
head: Cabecera. Información sobre el documento
hr: Separador horizontal
html: Elemento raíz de un documento
i: Estilo de texto en cursiva (italic)
img: Imagen incrustada en el documento
input: Elemento de un formulario que se utiliza para recibir datos
label: Etiqueta asociada a un input
legend: Leyenda (titulo) del fieldset
li: Elemento que compone una lista ordenada o desordenada
map: Mapa de imagen (define zonas clickeables)
meta: Meta-información genérica
noframes: Contenedor alternativo para agentes que no soportan marcos
ol: Lista ordenada (con números o letras) compuesta por elementos li
option: Opción de un select que puede ser seleccionada
p: Párrafo
pre: Texto con formato predefinido (para mostrar código)
script: Sentencias escritas en lenguajes de script
select: Input en formato listado de opciones (combobox)
small: Estilo de texto de tamaño pequeño
span: Contenedor genérico en línea. Similar al DIV pero no se muestra como bloque
strong: Énfasis fuerte. Se usa para destacar un texto (generalmente en reemplazo de la etiqueta b
style: Información sobre el estilo del documento
sub: Subíndice
sup: Superíndice
table: Tabla
tbody: Cuerpo de la tabla, donde se encuentran los datos
td: Celda de datos
textarea: Campo de texto de varias líneas
tfoot: Pie de la tabla. Contiene filas de celdas
th: Celda que contiene información de cabecera
thead: Cabecera que contiene filas informativas
title: Título de la página
tr: Fila compuesta por celdas de datos o de cabecera
tt: Estilo de texto de teletipo o caracteres con separación uniforme
ul: Lista desordenada compuesta por elementos li

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 class="'titulo", 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.

HTML

El objetivo de un archivo HTML es contener solamente la información semántica, especificando el tipo de contenidos entre etiquetas. Su función es ver los objetos de manera estructurada, pero sin definir sus propiedades. Se ve que hay un párrafo, pero no se sabe sus características.

En estricto rigor, un texto que corresponda a un párrafo, debería ir entre las etiquetas P (paragraph); un texto destacado, debería ir entre EM (emphasis), etc. Lo ideal es que al ver el código fuente, no se vean las características o propiedades de los objetos, sino que sólo el contenido de manera estructurada.

El archivo CSS es el que define la apariencia de la página, especificando los estilos de cada uno de los componentes de la estructura HTML. Por ejemplo, es el que define de qué color van a ser los párrafos, cuanto ancho tendrá una columna, etc.

La utilización de ambos documentos en conjunto, generan una página Web completa que es vista correctamente en cualquier navegador.
El objetivo que debemos tener como empresa al realizar cualquier sitio es velar por mantener estos conceptos, evitando definir estilos y propiedades directamente en el código HTML, lo cual nos ayudará a todos a una comprensión mucho más fácil de los documentos.

CSS

La función del documento CSS es contener todas las propiedades de cada elemento HTML. Por esto, hay que tener en mente nunca escribir las especificaciones de estilo directamente en el código, sino que crear CLASES o ID’s.

Para aclarar los términos, el código HTML es un lenguaje compuesto por  etiquetas, las cuales definen el tipo de objeto que encierran. Por ejemplo:

párrafo

división

enfatizado

Estas etiquetas son llamadas en CSS directamente por su nombre:

p{
    acá van las propiedades para todos los elementos p de la página…
}
body{
    acá van las propiedades del body…
}

Cada elemento (definido a través de las etiquetas), puede tener un ID, que sirva para identificarlo del resto de los elementos y para llamarlo vía javascript. Este ID debe ser único en toda la página, y generalmente se le asigna ID a los objetos importantes y únicos, como al footer, al cuerpo, o la cabecera. Por CSS, los elementos que poseen ID, deben ser llamados anteponiéndole el signo #:

#cuerpo{
    acá van las propiedades del elemento "cuerpo"…
}

Adicionalmente, e independiente de si posee ID o no, cada elemento puede tener una o más clases (class) separadas por espacios. Las clases definen un tipo de objeto, por lo que pueden ser aplicadas a cualquier elemento de la página. Para definir propiedades de una clase en CSS, se antepone un punto:

.elemento_de_menu{
    acá van las propiedades para los elementos que sean
    de clase "elemento_de_menu"
}

Las definiciones de CSS funcionan por jerarquía, por lo que si un elemento tiene un ID aplicado (para este ejemplo, será el id "btn_finalizar"), se accede al elemento de la siguiente manera:

p#btn_finalizar{
    acá van las propiedades del elemento p que tiene el id "btn_finalizar"
}

Si el elemento p, con el id "btn_finalizar" se encuentra dentro de un div, se accede a él anteponiendo |div + espacio|, de la siguiente manera:

div p#btn_finalizar{
acá van las propiedades del elemento p que tiene el id "btn_finalizar"
}

En este caso, la separación a través de un espacio define que el objeto se encuentra “dentro”. Si no se utiliza un espacio, significa que es el mismo elemento el que posee el ID. Para el caso de las clases, la jerarquía se utiliza define de la misma manera.

En el caso de las clases, es posible utilizar varias clases en un mismo elemento, separándolas con espacios. Por ejemplo:

Para definir los términos que se utilizarán, los componentes de una definición de CSS son:

body{
    width: 600px;
}

Selector: body
Propiedad: width
Valor: 600
Unidad: px

Definición de nombres de IDs y clases

Por definición, las clases definen un tipo de objeto, por lo que se debe considerar no darles nombres de propiedades, como "texto_rojo", sino que intentar utilizar "alerta", o "texto_destacado". De esta manera, los nombres de estas clases serán claros y podrán ser utilizados en más de un tipo de elemento.

Para las clases y IDs, es muy importante evitar el uso de números en los nombres, como "tabla2", "banner1", etc., pues si dentro de un código hay 12 DIVs, no es posible distinguir con un número de cual estamos hablando.

Como recomendación (para unificar la forma de trabajo), los nombres de las clases se deberían ser creados utilizando guión bajo para separar las palabras: nombre_de_la_clase.

Para mantener una lógica de creación de nombres, todas las clases y IDs deberían ser creadas en un mismo idioma. Esto tiene como fin evitar tener nombres como "texto_bold" y "text_negrita". De esta manera, todos los desarrolladores podrán intuir como se llaman las clases.

Esto sucede porque todas las páginas en Internet están siempre siendo visitadas por los llamados "robots", que muchas veces son programas maliciosos que se dedican a buscar cualquier palabra que pueda parecer un email para almacenarlo en una base de dato y luego mandarles spam.

Con este simple truco hecho en javascript podremos evitar que los robots detecten nuestros correos, pues no estarán escritos en formato de correo para ellos, pero si para nuestros visitantes "humanos".

Lo que tenemos que hacer es escribir nuestro correo de la siguiente manera:

micorreo(arroba)misitio.com

Si se fijan, la @ está representada por la palabra "(arroba)", la cual está dentro de un span que tiene el ID "reemplazar". De esta manera:

• Los robots que visiten la página (al ver sólo el código) verán toda esa línea, y por lo tanto, es muy difícil que lo consideren como una dirección de correo válida.
• Los humanos (al no ver el código) verán micorreo(arroba)misitio.com, que para una persona común y corriente es completamente entendible.

El truco ahora está en aplicar la siguiente función de javascript.

var reemplazable=document.getElementById('reemplazar');
reemplazables[i].innerHTML="@";

La funcion toma el span que tiene el ID reemplazar y reemplaza su contenido (innerHTML) por una arroba. Y voila!, simple y eficiente. Ahora los visitantes (que tengan javascript habilitado porsupuesto) verán el email como cualquier email, e incluso lo podrán copiar/pegar.

¿Y si no tengo javascript habilitado?, se preguntarán muchos. A esta altura todos los navegadores modernos (e incluso IE6, jaja) tienen soporte para javascript, y es muy raro que una persona navegue sin javascript habilitado.

A los que probablemente si les afecte es a los que navegan desde un teléfono móvil, pero de todas formas, ellos y esos extrañísimos casos que navegan sin javascript habilitado, verán micorreo(arroba)misitio.com, lo cual no debería ser un problema.

Acá veremos algunas formas de tener los sitios en el servidor y URL final y que sólo podamos verlo nosotros para desarrollar lo que falte y configurar los últimos detalles antes de hacerlo público.

Redireccionar por IP

Una de las maneras más simples es redireccionar a todos los otros visitantes a alguna dirección específica mientras se desarrolla el sitio. Para esto, utilizaremos nuestra IP, para que el sitio nos reconozca y a los demás usuarios los envíe a la dirección especificada.

La dirección IP es el número único que asigna la red a cada conexión de internet.

Para reconocer una IP, hay que fijarse en su formato: xxx.xxx.xxx.xxx (por ejemplo, 200.20.50.125).

Para saber tu IP puedes utilizar una de las tantas herramientas que hay en internet.

Para utilizar este sistema, es necesario escribir este código en la primera línea de la página principal:

    header("Location: http://www.sitio-alternativo.com/");
} ?>

El código utilizado dice básicamente lo siguiente: si(la IP del visitante es distinta a "xxx.xxx.xxx.xxx") entonces { llévalo a http://www.sitio-alternativo.com/ }.

Por supuesto que en esta línea hay que cambiar xxx.xxx.xxx.xxx por tu IP y http://www.sitio-alternativo.com/ por el sitio al que quieres que sean reenviados.

Como el código utilizado es PHP debemos tener claro que el archivo debe ser algo así como index.php (.html no servirá) y que el servidor debe soportar PHP.

Otra alternativa es que, en vez de que redirija a algúna otra URL, muestre una trozo de código HTML, que puede ser un mensaje o una página completa:

    include("aviso.html");
    exit();
} ?>

De esta manera, si no es la IP especificada, le mostrará el contenido del archivo aviso.html (que debe estar en el mismo servidor). El exit() que viene al final de esa línea es para que no se haga nada más que mostrar el archivo aviso.html.

Hay que tener cuidado porque como el número es asignado por conexión y no por computador, si tienes una conexión compartida (por ejemplo en tu oficina o casa), todos los demás usuarios de esa misma conexión podrán ver tu sitio.

.htaccess

Esta es otra manera de conseguir lo mismo: utilizar el archivo .htaccess que está en la raíz del servidor (si no está en tu servidor lo puedes crear).
Para poder realizar la redirección con este archivo es necesario utilizar el siguiente código:

ErrorDocument 403 http://www.sitio-alternativo.com/
Order deny,allow
Deny from all
Allow from xxx.xxx.xxx.xxx

De esta manera, le diremos al servidor que solo le muestre a la página a los visitantes de la IP xxx.xxx.xxx.xxx y al resto que los reenvíe a la URL especificada.

Nombre de usuario y contraseña

Este sistema requiere de dos archivos: .htaccess y .htpasswd (ambos en la raíz de nuestro sitio). Si queremos utilizar este sistema necesitaremos de mucha más paciencia (a menos que ya tengamos experiencia), pues es un poco más complejo.

Mi idea no es generar un post enorme, y creo que con las dos opciones anteriores basta y sobra. Sin embargo, para los que quieran averiguar como hacerlo, acá les dejo un buen tutorial.

Otro dato que se debe tener en cuenta en que muchas veces los servidores (a través del panel de control), permiten automatizar la tarea de crear estos dos archivos. Basta con configurar unas cuantas cosas y listo, asique les recomiendo que partan por ahí primero.

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.