El problema con las funciones anteriores es que, si bien funcionan perfecto, están programadas para realizarse onEnterFrame, y por lo tanto, el objeto al que necesitamos aplicarle la función, debe estar consultando cada frame si es que la ejecuta o no. Mientras sea un archivo pequeño, todo funciona de maravillas, pero si trabajamos con 30 movieclips al mismo tiempo y si algunos de ellos contienen imágenes, tenemos que pensar que vamos a estar haciendo consultas 30 veces en cada fotograma (entre 15 y 30 veces por segundo), y eso a la larga revienta cualquier computador.

Entonces: la solución, es utilizar la clase tween para animar, la cual es una clase que viene "pre-programada" en flash y que nosotros debemos importarla para poder utilizarla. Esto quiere decir que la clase "está ahí, en alguna parte de flash, pero no se carga a menos que se lo solicitemos".

Para utilizarla debemos llamarla (antes del momento en que la vayamos a utilizar) con la siguiente línea:

import mx.transitions.Tween;

De esta manera, le decimos a flash que importe esta clase y la mantenga en memoria para utilizarla.

Ahora el tema es "como la utilizamos". Para generar una animación, basta con crear una nueva instancia de la clase, entregándole los siguientes parámetros:

new Tween(objeto, propiedad_a_modificar, tipo_de_animacion, valor_inicial, valor_final, tiempo, utilizar_segundos);

Esto quiere decir que si necesitamos hacer desaparecer un objeto que está en _root y tiene como nombre de instancia "mi_mc", debemos hacerlo de la siguiente manera:

new Tween(_root.mi_mc, "_alpha", mx.transitions.easing.Strong.easeOut, 100, 0, 1, true);

Así el objeto _root.mi_mc animará su propiedad _alpha con el tipo de animación "strong" y con easing al final de la animación, desde 100 a 0 en un segundo.

Lo bueno de utilizar esta función es que podemos animar cualquier propiedad de cualquier objeto, o incluso podemos hacer funciones adicionales que ejecuten varias tareas a la vez. Lo otro bueno es que no tendremos que llamarla onEnterFrame, sino que podremos llamarla cada vez que necesitemos y que con un solo llamado se ejecuta la animación completa, independiente de los fotogramas que estemos utilizando, pues está basada en el tiempo. Así nuestra película no le pedirá muchos recursos al computador y se verá todo mucho más fluido.

Acá hay un ejemplo de una función para hacer un fadeIn a cualquier objeto:

function fadeIn(obj){
    new Tween(obj, "_alpha", mx.transitions.easing.Strong.easeOut, obj._alpha, 100, 1, true);
}

Como verán esta función reemplaza a la que mencionaba en el post anterior y ocupa menos recursos también.

Descargar el archivo de ejemplo

Este post es para comentarles que en GEEKBOX hemos lanzado este nuevo sitio que pretende ser un gran aporte a la comunidad 3D de habla hispana: http://www.optimizacion3d.info.

El objetivo principal del sitio es poder dar a conocer el trabajo que realizamos en nuestra tesis y poder ir publicando constantemente noticias acerca del mundo 3D y de como poder optimizar nuestros trabajos.

Espero que este sitio sea un gran aporte y que cooperen con todo el contenido que puedan para que generemos algo en grande.

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.

Mientras preparo mi próximo post, los invito a conocer el blog que tengo para poder mostrar la música que hago (que hacía): http://musica.peivem.com.

Espero poder retomar la música pronto, pero la he tenido que dejar de lado para poder hacer otro tipo de proyectos en mi vida, como lo son mi familia y GEEKBOX.

Espero sus comentarios!.

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.