En esta ocasión les traigo un artículo bastante instructivo y casi introductorio (hay mucho detrás de esto todavía) sobre una de nuestras “singulares” herramientas llamada tipografía, introduciéndonos en el tema del papel y la lectura que son de suma importancia como aprenderemos a la par a continuación.

El papel, al contrario que el tipo y la tipografía, no puede ser representado.

Algunos datos sobre el papel

El papel de impresión es una materia compleja. Algunas de sus características son las siguientes:

• Puede no contener fibras de madera, en cuyo caso se compone de celulosa.
• Puede contener madera, o sea, estar compuesto de fibra de madera.
• Puede ser más o menos traslúcido (ser transparente, o bien ser opaco).
• Puede ser de tonalidades distintas.
• Tiene pesos diferentes (desde 25 g/m² hasta 170 g/m²; si el peso es mayor, se habla de cartulinas y cartones).
• Puede tener más o menos volumen, esto es, contener más o menos aire.

Papel natural

• Se compone únicamente de la mezcla de sus fibras, con pocos aditivos.
• Su superficie puede ser:
  • Rugosa
  • Algo más suave (alisado mecánicamente)
  • Lisa (satinada)

Papeles estucados

• Se le da un acabado con una capa fina de sustancias minerales pastosas; puede ser:
  • Papel offset pigmentado
  • Papel cuché

Todas estas propiedades influyen sobre el carácter de un impreso. Algunas características son especialmente importantes para el diseño.

El papel es higroscópico, esto es, absorbe la humedad del aire y la vuelve a expulsar, por lo que su volumen se dilata y vuelve a encogerse. En el caso de una hoja suelta, esto no tiene importancia, pero sí la tiene en el caso de folletos y libros.

En el papel hay una dirección de la fibra. En la fabricación, la pasta de papel se vierte sobre un gran colador que se mueve a gran velocidad. Por eso las fibras se disponen todas en una misma dirección, la dirección de la fibra.

Dirección correcta. Las fibras de papel van paralelas al lomo del libro.

Dirección incorrecta. Las fibras de papel quedan perpendiculares al lomo del libro.

Las líneas delgadas marcan la posición de fibras y las flechas la dirección en la que se extienden.

En la dirección de fibra correcta, el papel tiene libertad para extenderse en el sentido de las flechas. En el caso opuesto, el papel tiende a ensancharse hacia arriba y hacia abajo, pero no puede porque se encuentra encolado al lomo del volumen. Al no poder doblarse o plegarse en sentido contrario a la fibra, se ondula y se arruga.

El papel utilizado para el libro de salmos evangélicos bávaro se cortó en la dirección incorrecta. Una organista dijo: No está tan mal. Cuando las hojas han dejado de crujir, sé que la gente ha encontrado la canción y puedo empezar.

Coloración, superficie y lectura

Los folletos de automóviles, de joyas o de inversiones financieras nos llegan repletos de brillos, mientras que en los libros especializados sobre medicina, óptica o arte se prima la fidelidad cromática. En este caso, se emplean papeles blancos con superficies aisladas y posiblemente brillantes.

Pero cuando se trata de que se lea un mensaje, imperan otros criterios: es el caso de un plano, del texto de una cajetilla, de una octavilla o de las notas de una tesis doctoral (por no hablar del propio libro).

El maestro dice: ¡Ya os habeís vuelto a pasar toda la tarde mirando la tele! Lo que sucede, sencillamente, es que el sol y el papel brillante del libro escolar son los culpables de todo este desorden.

Regla práctica: el papel muy blanco (que en realidad está tintado de azul) eclipsa un tipo de un negro intenso, y esto perjudica la legibilidad.

Cuando las reproducciones requieren un papel muy blanco, no deben utilizarse letras con un marcado contraste entre trazos gruesos y finos, y hay que evitar letras muy finas.

Lo mejor, en términos de legibilidad, es un papel con una superficie mate y un blanco ligeramente roto. El uso de papeles con tono marfil o de un amarillo claro no encuentra justificación en la cuestión de la legibilidad, sino razones estéticas.

El intento de suavizar el eclipsante contraste entre la tonalidad del papel y la letra imprimiéndola en un tono sepia, o similar, conduce fácilmente a un resultado un tanto descolorido con el que no se mejora la legibilidad.

Independientemente de la coloración, el papel con superficie lisa y brillante tiende a actuar de espejo, lo cual resulta perjudicial para la lectura.

Por lo general, los tipos impresos sobre papel reciclado se leen cómodamente, pero hay que cuidar de no imprimirlos con una intensidad demasiado leve ni excesivamente fuerte.

Cuando se usan papeles de colores pastel o de tonalidades intensas, se recomienda hacer antes unas pruebas de impresión para poder determinar qué tipos pueden soportar la combinación de colores.

En términos de legibilidad, resulta esencial la transparencia del papel. En papeles con poca opacidad, puede verse que hay impreso en el dorso o en la página siguiente, lo cual puede producir un efecto muy molesto. En este caso, la tipografía debe prepararse acorde con ello, para que las líneas del anverso y del reverso de una hoja coincidan; es lo que se llama mantener el registro.

Referencias

Esta información es extraída del libro:

Hans Peter Willberg / Friedrich Forssman, primeros auxilios en tipografía, consejos para diseñar con tipos de letra. Ed. Gustavo Gili, SL. México. p 32.

Antes que nada, definimos qué es un mensaje (de Wikipedia, me parecía una definición sencilla y justa):

Mensaje en el sentido más general, es el objeto de la comunicación. Está definido como la información que el emisor envía al receptor a través de un canal determinado o medio de comunicación (como el habla, la escritura, etc.); aunque el término también se aplica, dependiendo del contexto, a la presentación de dicha información; es decir, a los símbolos utilizados para transmitir el mensaje. Cualquiera que sea el caso, el mensaje es una parte fundamental en el proceso del intercambio de información. Bien, ahora veamos el mensaje desde el enfoque de la percepción.

Características del mensaje

• Contenido: Nuestro tema, el referente, de lo que estamos hablando.
• Argumento de Diseño: Traducción de las ideas o conceptos a los sistemas de signos pertinentes. Conversión de los datos en información traducida a lo visual.
• Tecnología de comunicación o Soporte. Impreso, multimedia, audiovisual, etc.

• Configuración. Construcciones formadas para adecuar el contenido al perceptor y al medio, a partir de la intencionalidad del emisor:

  • Estética. Disfrute a través de la forma.
  • Documental. Representación fiel de la realidad.
  • Apelativa. Inducir algún tipo de conducta en el perceptor.
  • Explicativa. Orientar para la comprensión del contenido.

Componentes de la forma del mensaje

• Objeto. Tema, aquello que quiere ser promovido.

  • Por su propia imagen o cualidades.
  • Por asociación, cuando el objeto no se puede o no se quiere representar por sí mismo.

• Soporte. Elementos que acompañan o soportan al Objeto.

  • Objetuales. Cosas que apoyan al objeto.
  • Ambientales. Naturales y artificiales.

  • Animados. Humanos, animales ó caricaturas en:

    • Exhibición. Sin dirigirse a nadie.
    • Presentación. Ofreciendo el producto.
    • Implicación. Dirigiéndose directamente al público.
• Variantes. Forma específica de presentar al objeto o a los soportes, eligiendo las alternativas que apoyen más al significado dándole una intencionalidad. Los elementos compositivos pueden variar en su: Tamaño, color, iluminación, textura, postura, vestido, gesto, características físicas (color de piel, pelo, estatura, peso, raza, nivel socio económico, etc.)

Construcciones visuales del mensaje

• Complementarias. No exigen esfuerzo del perceptor para su interpretación porque coinciden con su forma habitual de ver el mundo.
• Arbitrarias. Incluye elementos que se contraponen con sus hábitos perceptuales.

Agradecimientos

Todo este material es retomado de apuntes de la profesora y D.C.G. Laura Serratos Zavala de la UEA Diseño y Comunicación II

Debo admitir que en esta web jfastudios.com hago cambios al código directamente en el servidor que está en vivo, así que por favor, algunos niños que pudieran estar leyendo esto, NO lo intenten en sus casas, mejor instalen un servidor de pruebas localmente. Bien, ¿continuamos?

Date cuenta que omití toda una serie de pasos importantes que son el bocetaje o wireframe del sitio, la maquetación en Photoshop, Fireworks, incluso creo firmemente que en InDesign puedes hacer excelentes maquetaciones para web aunque no está pensado para esto; posteriormente la exportación de imágenes, hacer nuestros sprites, codificar el marcado (X)HTML, el CSS y si es el caso Javascript, es decir, todo el código que esté del lado del cliente. Y bueno, es de sentido común que para hacer programación del lado del servidor, ya tenemos un servidor instalado y funcionando, ya sea localmente o como en ocasiones hago yo: en el servidor en vivo (teniendo cuidado de no estropear las cosas o que no sea accesible para todo el mundo).

La solución rápida y efectiva para todos

No es mi intención hacerte leer un artículo tedioso que está lleno de detalles por todos lados, en cambio, se que lo único que necesitamos es un servidor web local que funcione como tal, sea fácil de instalar/desinstalar y que te permita configurarlo según las necesidades en un futuro. En pocas palabras, que lo saques de su caja y ya esté funcionando.

Gracias a nuestros amigos de Apache tenemos un servidor gratuito y poderoso, pero me refiero a éstos amigos de apache que han creado un paquete que hace justamente lo que describo en el párrafo anterior. Ellos han creado XAMPP que hace simplemente la magia correspondiente por nosotros y nos instala lo siguiente:

• Apache
• MySQL
• PHP + PEAR
• phpMyAdmin
• y mucho, mucho más…

Esto en todos sus sabores de Linux, Mac OS X, Windows y Solaris, y lo mejor de todo, ¡es gratuito! Y con una velocidad impresionante ya tenemos un servidor web, un motor de base de datos, un lenguaje de servidor (PHP, Pearl, etc.), phpMyAdmin para administrar fácilmente las bases de datos y repito, mucho, mucho más.

En los enlaces anteriores encontrarás las descargas, unas instrucciones mínimas pertinentes en varios idiomas incluido el español y que mejor que desde los propios creadores.

Notas adicionales y el porvenir

Cabe recalcar que el paquete XAMPP, aunque pudiera parecer apto para que montemos nuestro servidor en casa u oficina y utilizarlo “profesionalmente” NO es así. Por default, carece de una configuración segura pues su enfoque es práctico, para desarrollar, para pruebas locales y es justo lo que necesitamos pues realmente será para pruebas pues nuestro pequeño monstruo estará en un servidor profesional ya sea de nuestra propiedad o rentado (algunas empresas eso “dicen” y hay otras que lo cumplen). Moraleja, no lo recomiendo para usarlo profesionalmente, a excepción de que sepamos configurarlo para que sea seguro y nos brinde lo mejor de sí cada uno de sus componentes… además sale más caro esto a la larga.

Y con este artículo daré comienzo a la incursión a diversos temas como el nuevo lenguaje que estoy aprendiendo (Python, en proceso de agregarlo a mi cinturón de herramientas) y compartir mi experiencia de ello, algunos proyectos que tengo planeado hacer públicos y como punto de partida para publicar temas sobre el diseño y desarrollo web.

Si conoces alternativas similares, compártelas

Referencias

Algunos enlaces sobre términos usados en el artículo (I´m sorry, in english):

Wireframes: http://www.smashingmagazine.com/2009/09/01/35-excellent-wireframing-resources/

Sprites (CSS): http://css-tricks.com/css-sprites/

El hombre para comunicarse con su entorno básicamente ocupa tres sistemas con los que representa su propio mundo, estos son: El sistema visual, el sistema auditivo y finalmente el sistema kinestésico. Mediante estos sistemas de representación las personas nos moldeamos, pues a través de ellos percibimos el mundo exterior y forjamos nuestra experiencia; esto afecta directamente a todos los ámbitos de nuestra vida y repito, nos moldea como individuos. ¿Simple, no? (sarcasmo).

La materia prima de la neurolingüística son precisamente los tres sistemas: visual, auditivo y kinestésico, la neurolingüística es una disciplina relativamente nueva que está relacionada directamente con la forma en que las personas se comunican y el modo en como cambian; este enfoque resultó del análisis sistemático del lenguaje y los procedimientos utilizados por Fritz Perls, Virginia Satir y Milton Erickson, que son tres “magos” terapéuticos contemporáneos. En pocas palabras, este enfoque sistematiza la conducta humana.

La conducta humana es un proceso y es enseñable, por lo tanto, aprendible

¿Cuál es la importancia de esto? ¿Cómo se usa esta información en el diseño? ¿Por qué no sólo hago dibujos y ya? ¿Por qué no sólo aprendo Photoshop o Illustrator y ya? ¿Por qué me aburriste con todo lo anterior? Bueno, hay personas que piensan que el diseño gráfico es: “Llegas, haces dibujitos, letras, le pones color y te vas”, normalmente escribo “diseño” a secas porque aplica a distintas áreas dentro del mismo y no sólo al gráfico, bien, pues resulta ser que no es así de sencillo como parece; un buen diseñador debe tener la habilidad para comunicarse efectivamente y es por eso que en su formación no sólo se le enseña la parte técnica, la parte creativa, etc. sino además la parte que pareciera “aburrida” sobre los fundamentos del diseño y la comunicación.

El buen diseño comunica efectivamente

Lo maravilloso es que una vez que se es consciente de esto aprendes a percibir el mundo diferente, sino, checa algunos anuncios publicitarios de grandes marcas, un consejo, pon en alerta todos tus sentidos y trata de captar todo lo que puedas.

Algo subliminales ehhhh!!, unos más sutiles que otros, después de todo quizá sea por eso que son cosas de mucho consumo, de ahí su éxito… también ahí queda la cuestión de la ética del diseñador colgando en el aire lo cual da para otro artículo y será en otra ocasión. Bueno a excepción del último que mas bien quería compartirlo por la gran creatividad puesta en él y la manera de informar, de comunicar.

Buscando “publicidad” o “anuncios” o “comerciales” en YouTube verás cientos de anuncios y la gran mayoría utiliza mucho los enfoques de la comunicación, psicología, etc. No todo lo que brilla es oro despues de todo… y también no quiere decir que no haya diseñadores que por no haber estudiado no sean excelentes… sólo, las estadísticas hablan por sí solas.

El proceso es simple, sólo te relajas, cierras los ojos y a la vez que escuchas la música vas creando una historia en tu mente, incluso si se te facilita puedes traslapar tus sentidos aplicando la sinestesia: tu puedes sentir, tu puedes oler, tu puedes ver, tu puedes escuchar, tu puedes saborear… recuerdo que cuando hice por primera vez este ejercicio, la música de Morricone era totalmente nueva para mí y sentí un cosquilleo en mi espalda y podía ver imágenes donde volaba, con algo de lluvia en ocasiones, como en un atardecer o amanecer, en mi imaginación se formaba una escena de un ser que trascendía, que sobrepasaba dificultades, que conseguía la paz.

Finalmente, sólo agrupe las partes de modo coherente para dar con el resultado que se pretendía: un cartel. Nota que uso algo de tipografía para reforzar un mensaje que aparece implícito, ya que este cartel requiere que el espectador se detenga a verlo, a que ponga la imagen de sí mismo en la silueta del hombre en blanco (nada de cuestiones racistas) que lleva puesto un sombrero, el sombrero de la experiencia o sabiduría. Hay otros detalles más, pero no es mi intención extenderme, aquí les dejo el cartel y espero que les guste:

Créditos y notas finales

La imagen no tiene la calidad suficiente para una buena impresión, si quieres la imagen original (se imprimió digitalmente en tamaño tabloide) ponte en contacto conmigo. Puedes usarla como desees así como si quieres dar crédito o no, es tu elección.

Algunas imágenes son tomadas del sitio Stock.XCHNG, una web de intercambio de imágenes que recomiendo ampliamente. Incluso la mayoría de imágenes en los artículos son obtenidas de ahí, siempre cumpliendo con sus términos y condiciones.

Y bueno, ¿Qué hice?… para empezar, desde un punto de vista personal, para mí la creatividad es un proceso, ¡nada, nada! de que “la creatividad te llega así porque sí”, eso es esoterismo o charlatanerías. Sí, ya sé que hablé de conjuros y magia… pero para hacer un conjuro, necesitas de pócimas y por supuesto, la magia tiene su explicación.

Así que toma lápiz y papel para que anotes algunas pócimas que probablemente te pueden resultar efectivas para aumentar la creatividad.

La pócima de la relajación.

Así es, lo primero que hice esta mañana fue relajarme, olvidarme de todo por un momento, liberar la tensión, el estrés, la ansiedad. El relajarte físicamente aumenta inmediatamente tu capacidad de pensar, de sentir y lo más importante es que aumenta tu concentración y esto te permite enfocarte en algo. Tómate dos o tres minutos para realizar algún ejercicio de relajación o bien puedes intentar lo siguiente:

1. Respira profundamente, reduce la marcha de tu respiración y dite a ti mismo “estoy completamente relajado”. No importa si estás de pie, sentado o acostado, sólo trata de estar físicamente cómodo.
2. Mientras continúas bajando la marcha de tu respiración aprieta los músculos faciales y en seguida relájalos, así sucesivamente con el cuello, hombros, manos, espalda, estómago, etc. apriétalos y relájalos.
3. Toma un minuto para sentirte realmente relajado, controla tu respiración, usa la auto conversación para apoyar la relajación y visualízate haciendo fácilmente la tarea que estás por realizar.

Hecha un vistazo al artículo de Stephanie Falla Aroche en Maestros del Web titulado “Es viernes! que tal si te relajas”

La pócima de los dulces.

Después de relajarme un poco y dejar de forzarme a mí mismo decidí ir a buscar en la canasta de los dulces. Sinceramente no sé la explicación a ciencia cierta (si hay alguien que si lo sepa, por favor hágamela saber) pero los dulces al ser azucarados te brindan cierta energía, esto en mi experiencia ha resultado facilitar el proceso para generar ideas, para crear. Si no te agradan los dulces o ya te terminaste los de esta semana, o estas a dieta, entonces tienes la magnífica opción de la fruta: una manzana, una naranja, una pera, ciruelas, etc. o algún bocadillo siempre son muy efectivos.

La pócima de la pelota.

Una de las cosas que me gustan mucho en esto del diseño es que te diviertes bastante, incluso en ocasiones llego a sentirme como si estuviera otra vez en el jardín de niños. La gente creativa normalmente no sigue las reglas, bueno, ciertas reglas y le gusta mucho jugar con los objetos y con las ideas mismas. Otra de las “técnicas” (en esta ocasión, pócimas) que suelo usar son los juegos: agarro una pelota y juego unos minutos con ella, no importa su tamaño o si rebota, simplemente jugando descubres muchas cosas ¿Recuerdan a Gregory House de la serie Dr. House? pues ahora ya saben porque jugaba con su pelota favorita. Puedes intentar también con otros juguetes que tengas.

La pócima de la caminata.

Sal a dar un paseo a un lugar cercano. Simplemente saca tu trasero del lugar donde estés, ve afuera, toma un poco de aire fresco y aplica simultáneamente la pócima de la relajación y además usa la observación. Normalmente el cambiar de entorno nos brinda cosas nuevas, si salimos a la calle puede que veamos algo que detone las ideas, si no es así, al menos nos habremos relajado y habremos tomado un pequeño descanso. Cuando estoy en casa suelo salir al patio para disfrutar del aire fresco y si es antes del medio día y está despejado, disfruto además de un cielo azul y la energía del señor sol (soportable a esas horas).

La pócima del pizarrón

En mi lugar tengo un pizarrón blanco junto con algunos marcadores, el color negro de rigor y algunos de otros colores. Cuando me encuentro generando ideas suelo anotar palabras clave en el, sin ningún orden en especial inicialmente, me siento enfrente del pizarrón y anoto cosas relacionadas a lo que tengo que hacer. Cuando lleno el pizarrón anoto lo relevante en una hoja de papel o le tomo una fotografía, después borro todo y empiezo a ordenar las ideas (las palabras clave que escribí), las agrupo en categorías y hago una especia de mapa mental, agrego dibujos rápidos, flechas para vincular elementos… después otra fotografía o apunte rápido. Y así continuo puliendo las ideas hasta obtener algo definido que después pasará a ser boceto o maqueta hasta obtener finalmente un resultado: Una propuesta. Esta pócima va muy relacionada con la estrategia de abstracción que publique anteriormente.

Notas finales

Después de unos quince o veinte minutos ya tenía una idea maquinada y estaba bocetando, realizando pruebas de construcción y experimentando con el material. En realidad fueron 2 ideas a las que llegué pero aproveché la que usaba materiales que ya tenía a la mano y eso sí, muy importante: Guarda todas y cada una de las ideas que tengas, no tires a la basura ideas, bocetos o diseños que no utilizaste o entregaste porque puede pasar que tiempo después eso mismo lo puedas mejorar o que incluso te salve el pellejo.

Hasta aquí son algunas de las “pócimas” que suelo usar para facilitar el proceso creativo y Tú ¿Qué pócimas usas para llenarte de creatividad? Escribe un comentario y comparte tus experiencias o formas que usas para ser creativo.

Referencias

Algunas ideas sobre la relajación son retomadas del libro Autodisciplina en diez días de Theodore Bryant.

Trevor Davis en su blog nos cuenta la razón posible para no usar un plugin y parte de la inspiración y código salió de su artículo WordPress & jQuery Contact Form without a Plugin.

Si quieres ver un demo o bajar el código fuente lo tienes a continuación:

• Ver Demo
• Código Fuente

Procedimiento

1. Crear una plantilla personalizada de página para WP.
2. Crear una página en WP que use esa plantilla (nuestra página de contacto).
3. Crear campos personalizados en la página de contacto.

1. La plantilla de página personalizada WP

En esta plantilla está toda la magia y está apoyada por las siguientes librerias y scripts:

• Securimage CAPTCHA Librería para verificar que el usuario es humano.
• PHPMailer Librería para enviar el email usando Gmail/Google Apps o cualquier servidor SMTP
• contact-form.js Script para pre-validar con jQuery, para incluirse en el tema de WP
• functions.php Archivo PHP de las funciones de nuestro tema WP, se agregan unas funciones.

Entendiendo la estructura de la plantilla de contacto

En el siguiente código definimos una plantilla de página para WordPress, en ella está la estructura básica que conformará nuestra página de contacto. No es necesario copiar este código, sólo lo purgue de tal modo que se entienda lo que se está haciendo sin tanto detalle.

<?php
/*
Template Name: Pagina de Contacto
*/

//Si ha sido enviado el formulario
if(isset($_POST['submitted']))
{
	//Validar y limpiar los datos (codigo aqui)

	//Si no hay ningún error, enviar el email. (codigo aqui)

}

//Obtener el Header
get_header();

//El Loop de WordPress para obtener el contenido y poder usar campos personalizados
if (have_posts()):
	while (have_posts()) : the_post();

		//Si se envió el email, mostrar mensaje de notificación
		if(isset($emailSent) && $emailSent == true):
			# <!-- Mensaje de notificación -->

		//No se envió el email, hubo errores
		elseif(isset($hasError) OR isset($honeypotError) OR isset($captchaError)):
			# <!-- Mensaje de error -->

		//Se carga normalmente el contenido de la página
		else:
			the_content();
		endif;

		//Si no se ha intentado enviar el mensaje o hubo errores, carga el formulario
		if(!isset($emailSent) OR $emailSent == false)
			// <!-- Codigo del Formulario -->
		endif;

	endwhile;
endif;

//Obtener Sidebar (opcional)
get_sidebar();
//Obtener el Footer
get_footer();
?>

Lo que se hace es verificar si se ha enviado el formulario, si no, carga normalmente la página. Si ha sido enviado entonces se realizan las validaciones y si todo va bien se envía el email de notificación y se avisa al usuario. Si hay errores se despliegan ya sea con Javascript habilitado o no.

Validación

Este código primero verifica el Captcha, después la trampa (honeypot captcha) que básicamente se trata de un campo que no debe tener datos y se oculta al usuario con código CSS (más adelante el código CSS necesario), después verifica que cada campo del formulario tenga contenido y lo limpia de caracteres especiales con las funciones stripslashes y htmlspecialchars nativas de PHP. Finalmente comprueba que el campo oculto contactId sea numérico pues este se utiliza para obtener los datos de los campos personalizados y es el ID de la página para WP. En caso de haber cualquier error, se activa una variable $hasError.

<?php
//Checa si el codigo captcha es correcto
if ($securimage->check($_POST['ccode']) == false)
{
 $captchaError = true;
 $hasError = true;
}

//Checa si la trampa (honeypot captcha) está vacia
if($_POST['ageCheck'] !== '')
{
 $honeypotError = true;
 $hasError = true;
}

//Checa que no esté vacio el campo Nombre
if(trim($_POST['contactName']) === '')
{
 $nameError = 'Olvidaste escribir tu nombre.';
 $hasError = true;
}
else
 $name = trim($_POST['contactName']);

//Checa que sea una dirección email válida
if(trim($_POST['email']) === '')
{
 $emailError = 'Olvidaste tu direcci&oacute;n de email.';
 $hasError = true;
}
else if (!is_email(trim($_POST['email'])))
{
 $emailError = 'Direcci&oacute;n de email no v&aacute;lida.';
 $hasError = true;
}
else
 $email = trim($_POST['email']);

//Checa que hallan escrito un mensaje
if(trim($_POST['message']) === '')
{
 $messageError = 'Olvidaste escribir tu mensaje.';
 $hasError = true;
}
else
{
 if(function_exists('stripslashes') && function_exists('htmlspecialchars'))
 $message = htmlspecialchars(stripslashes(trim($_POST['message'])));
 else
 $message = trim($_POST['message']);
}
//Checa que la ID de la página "the_ID" sea numérica
if(is_numeric($_POST['contactId']))
 $contactId = $_POST['contactId'];
else
 $hasError = true;
?>

Envío de email

Esta parte del código es la que utiliza los campos personalizados de WP. ¿Bueno, y para qué? En principio es para poder alterar los parámetros del servidor de correo SMTP desde el panel de administración de WP en la edición de la entrada/página y de este modo no tener que estar tocando el código PHP. La segunda es para manipular los datos del remitente del email (Nombre, Email, Asunto, Cuerpo del mensaje). La tercera es para poder usar una plantilla en el email con diseño en caso de que el usuario se envíe una copia a sí mismo y de este modo manejar el branding de nuestra empresa.

<?php
//Si no hay ningún error, envía el email.
	if(!isset($hasError))
	{
		$sendCopy = $_POST['sendCopy'];

		$keywords = array('%name%','%email%','%message%','%bloginfo%');
		$replace = array($name, $email, $message, get_bloginfo());

		$mail = new PHPMailer();
		$mail->IsSMTP();
		$mail->SMTPAuth = true;
		$mail->SMTPSecure = "ssl";
		$mail->Host = get_post_meta($contactId, "mailHost", true); #"smtp.gmail.com";
		$mail->Port = get_post_meta($contactId, "mailPort", true); #465;
		$mail->Username = get_post_meta($contactId, "mailUsername", true); #"contacto@tudominio.com";
		$mail->Password = get_post_meta($contactId, "mailPassword", true); #"password";

		$mail->From = get_post_meta($contactId, "mailFrom", true); #'noreply@tudominio.com'; #get_option('admin_email');
		$mail->FromName = str_replace($keywords, $replace, get_post_meta($contactId, "mailFromName", true)); #get_bloginfo();
		$mail->Subject = str_replace($keywords, $replace, get_post_meta($contactId, "mailSubject", true)); #'Contacto: ' . $name;
		$mail->AltBody = str_replace($keywords, $replace, get_post_meta($contactId, "mailText", true)); #"Envia: $name <$email>\n\n$message";
		$mail->MsgHTML(str_replace($keywords, $replace, get_post_meta($contactId, "mailHTML", true))); #"<p><strong>$name</strong>&lt;$email&gt;</p><p>$message</p>";

		$mail->AddBCC(get_post_meta($contactId, "mailUsername", true), get_bloginfo());

		if($sendCopy == true)
			$mail->AddAddress($email, $name);

		$mail->AddReplyTo($email, $name);
		$mail->IsHTML(true);
		$mail->AddCustomHeader('Mime-Version: 1.0\r\n');

		$emailSent = $mail->Send();
	}
?>

El formulario de contacto

Esta sección define el código del formulario HTML que incluye código PHP para rellenar los campos válidos, las notificaciones de error y los CAPTCHAS, además recordar que aquí se pone la ID de la entrada en un campo oculto.

<form action="<?php the_permalink(); ?>" id="contactForm" method="post">
<p><label for="contactName">Nombre</label><br/>
	<input type="text" name="contactName" id="contactName" value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>" class="requiredField" />
	<?php if($nameError != '') { ?>
		<span class="error"><?=$nameError;?></span>
	<?php } ?>
</p>
<p><label for="email">Email</label><br/>
	<input type="text" name="email" id="email" value="<?php if(isset($_POST['email']))  echo $_POST['email'];?>" class="requiredField email" />
	<?php if($emailError != '') { ?>
		<span class="alert"><?=$emailError;?></span>
	<?php } ?>
</p>
<p><label for="messageText">Mensaje</label><br/>
	<textarea name="message" id="messageText" class="requiredField" rows="2" cols="24"><?php if(isset($_POST['message'])) { if(function_exists('stripslashes')) { echo stripslashes($_POST['message']); } else { echo $_POST['message']; } } ?></textarea>
	<?php if($messageError != '') { ?>
		<span class="error"><?=$messageError;?></span>
	<?php } ?>
</p>
<p><input type="checkbox" name="sendCopy" id="sendCopy" value="true"<?php if(isset($_POST['sendCopy']) && $_POST['sendCopy'] == true) echo ' checked="checked"'; ?> /><label for="sendCopy">Enviar una copia a tu email.</label>
</p>
<p class="screenReader"><label for="checking" class="screenReader">Para enviar tu mensaje no llenes este campo</label><br /><input type="text" name="ageCheck" id="checking" class="screenReader" value="<?php if(isset($_POST['checking'])) echo $_POST['checking'];?>" />
</p>
<p><label for="ccode">Escribe el c&oacute;digo siguiente</label><br />
	<img id="captcha" src="<?php bloginfo('template_url'); ?>/includes/securimage/securimage_show.php" alt="CAPTCHA Image" style="margin: 3px;" /><br />
	<a href="#" onclick="document.getElementById('captcha').src = '<?php bloginfo('template_url'); ?>/includes/securimage/securimage_show.php?' + Math.random(); return false">Recargar c&oacute;digo</a><br />
	<input type="text" name="ccode" id="ccode" size="8" maxlength="4" /><br />
	<span>No se distingue entre may&uacute;sculas y min&uacute;sculas.</span>
</p>
<p class="buttons">
	<input type="hidden" name="contactId" id="contactId" value="<?php the_ID(); ?>" />
	<input type="hidden" name="submitted" id="submitted" value="true" />
	<input type="submit" name="submit" value="Enviar &raquo;" />
</p>
</form>

La pre-validación con jQuery

La pre-validación lo que hace es iterar sobre los campos del formulario que tengan la clase requiredField y sólo verifica que tengan contenido, también realiza una simple comprobación sobre el campo que tenga la clase email para checar si está bien formada (no es posible verificar que la dirección exista). Si todo va bien, permite que el formulario sea enviado, si no, se muestran los mensajes de error (los puedes modificar en las líneas resaltadas).

$(document).ready(function() {
	$('form#contactForm').submit(function()
	{
		$('#contactForm .alert, #contactForm .error').remove();

		var hasError = false;

		$('.requiredField').each(function()
		{
			if(jQuery.trim($(this).val()) == '')
			{
				var labelText = $(this).prev().prev('label').text();
				$(this).parent().append('<span class="error">Olvidaste '+labelText+'.</span>');
				hasError = true;
			}
			else if($(this).hasClass('email'))
			{
				var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
				if(!emailReg.test(jQuery.trim($(this).val())))
				{
					var labelText = $(this).prev().prev('label').text();
					$(this).parent().append('<span class="error">El '+labelText+'no es v&aacute;lido.</span>');
					hasError = true;
				}
			}
		});

		return !hasError;

	});
});

Insertando el script de pre-validación en la página de contacto

Para insertar el código Javascript de jQuery para pre-validar se añade código al archivo de funciones del tema WP (functions.php). Se trata de dos funciones, una para llamar directamente desde nuestra plantilla y otra que se llama automáticamente cuando WP obtiene el pie de página (footer) e inserta la línea de código que vincula con nuestro script.

<?php
/*
	Este bloque de código reemplaza al jQuery incluido en WP por el que está alojado en los
	CDN de Google
	Referencia: http://digwp.com/2009/06/use-google-hosted-javascript-libraries-still-the-right-way/
*/
if( !is_admin())
{
   wp_deregister_script('jquery');
   wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"), false, '1.3.2');
   wp_enqueue_script('jquery');
}
/*
	Esta función agrega una acción para que se inserte el script de pre-validación
	en el "footer" de nuestro tema WP
	Referencias: http://codex.wordpress.org/Function_Reference/add_action
*/
function prepara_pre_validacion()
{
	add_action('wp_footer', 'inserta_pre_validacion');
}
/*
	Esta función se ejecuta automaticamente cuando se manda llamar la función "wp_footer()"
	en nuestro tema WP e inserta el script para pre-validar con jQuery
*/
function inserta_pre_validacion()
{
?>
		<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/pre-valida-contacto.js"></script>
<?php
}
?>

Para instalar la plantilla en WP

Primero baja la librería Securimage CAPTCHA (yo uso la Version 2.0.1 BETA) mejorada respecto a la primer versión y viene con ejemplos y documentación.

La librería PHPMailer ya viene incluida en WP (al menos en versiones recientes), en el código de la plantilla se incluyen las clases necesarias.

Baja la plantilla con el código completo (pagina-contacto.php), el archivo de pre-validación en Javascript (pre-valida-contacto.js), copia el código PHP de functions.php en tu archivo functions.php del tema instalado, si no existe lo creas.

• Securimage
• pagina-contacto.php
• pre-valida-contacto.js
• functions.php

Los archivos deben quedar de la siguiente forma:

Extrae todos los archivos de Securimage dentro del directorio de tu tema WP y dentro de /includes/securimage/. El archivo Javascript (pre-valida-contacto.js) dentro de /js/. Como se muestra en seguida.

wordpress/wp-content/themes/directorio-tema/includes/securimage/
wordpress/wp-content/themes/directorio-tema/js/pre-valida-contacto.js
wordpress/wp-content/themes/directorio-tema/pagina-contacto.php
wordpress/wp-content/themes/directorio-tema/functions.php

Para configurar Securimage edita el archivo securimage_show.php ubicado en:

wordpress/wp-content/themes/directorio-tema/includes/securimage/securimage_show.php

Para más referencia te recomiendo la documentación oficial de Securimage, si no editas nada usa la configuración predeterminada, pero quizá te gustaría cambiar los colores, la tipografía, etc. pero esto ya es para otro artículo.

El código CSS necesario

El único código css que es necesario sirve para ocultar el campo del honeypot captcha, lo demás puede ser a gusto personal: colores, bordes, margenes, espacios, etc.

El siguiente código insertalo en la hoja de estilo del tema de Wordpress que estés usando.

#contactForm .screenReader		{ display:none; visibility:hidden; }

2. Crear una página en WP con nuestra plantilla.

Ya que subiste los archivos necesarios como se explicó anteriormente, hay que crear una página en WordPress con el editor de páginas y seleccionar “Pagina de Contacto” como nuestra plantilla para que la use, ponerle título, dirección y el contenido que queramos vea el usuario antes del formulario.

3. Crear los campos personalizados en la página de contacto

Posteriormente viene algo de magia, se crearán los siguientes campos personalizados (custom fields) para la página, respetando minúsculas/mayúsculas:

• mailHost: Dirección del servidor SMTP
• mailPort: Puerto del servidor SMTP
• mailUsername: Nombre de usuario de la cuenta de correo
• mailPassword: Contraseña de la cuenta de correo
• mailFrom: Dirección email que envía el correo electrónico
• mailFromName: Nombre del remitente del email
• mailSubject: Asunto del email
• mailText: Contenido del email en texto plano
• mailHTML: Contenido del email en HTML
• successMessage: Mensaje de notificación de que el email fue enviado

Aquí es necesario explicar algunos asuntos, primero los valores que hay que indicar para que esto funcione con cuentas de correo electrónico de Google Apps o Gmail y los valores de los demás campos para que contengan los datos que envía el usuario.

Configuración de Google Apps

La razón de usar PHPMailer y Google Apps (o cualquier servidor de correo SMTP) es que al enviar el email éste NO llega a la bandeja de SPAM tanto de nuestra propia cuenta así como en la del usuario que se envía a sí mismo una copia del mensaje. Es la razón principal, ya que la función mail() en algunos casos es imposible hacer que el correo no caiga en el spam.

Bien, los valores de los campos personalizados para Google Apps son:

• mailHost: smtp.gmail.com
• mailPort: 465
• mailUsername: tu_email@tu_dominio.com
• mailPassword: La contraseña de la cuenta

¡Eso es todo para Google Apps!

Configuración del cuerpo del mensaje

Después, para el mensaje en sí, tenemos los siguientes comodines (wildcards) que serán sustituidos por los datos que introdujo el usuario.

• %name%: Es sustituido por el nombre que introdujo el usuario.
• %email%: Es sustituido por el email que introdujo el usuario.
• %message%: Es sustituido por el mensaje que introdujo el usuario.
• %bloginfo%: Es sustituido por el nombre de tu blog.

De esta forma, en los campos personalizados restantes usamos esos comodines para que contengan la información correspondiente. El modo de usarlos lo muestro a continuación:

• mailFrom: noreply@tudominio.com
• mailFromName: %bloginfo%
• mailSubject: Contacto: %name%
• mailText: De: %name% <%email%>\n\n%message%
• mailHTML: (ver mas abajo)
• successMessage: (ver mas abajo)

Ejemplo de mailHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>%bloginfo%</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
	<div style="width:94%;padding:3%;margin:0 auto;font-family:Georgia; font-size:12px;">
	<h2 style="font-family:Arial,sans-serif;color:#AB7C00;">Gracias <span style="color:#CA412C;">%name%</span></h2>
	<p>Estar&eacute; en contacto muy pronto.</p>
	<h4>Tu mensaje</h4>
	<p>%message%</p>
	<p>&nbsp;</p>
	<p>&mdash;<br/>Atentamente,<br/>Julio Flores</p>
	<p>&nbsp;</p>
	<p><a href="http://jfastudios.com"><img src="http://jfastudios.com/blog/wp-content/themes/ArrowAttitude2/style/images/logo.png" alt="JFA Studios" style="border:none;outline:none;"/></a></p>
	<p>&nbsp;</p><hr/>
	<p style="font-family:Arial,Helvetica,sans-serif;"><small>La funci&oacute;n de este mensaje es &uacute;nicamente informativa. Las respuestas no se supervisar&aacute;n ni se contestar&aacute;n.<br />Para contactar puedes escribir al e-mail de <a href="mailto:contacto@jfastudios.com">contacto</a> o ingresar <a href="http://jfastudios.com/contacto">aqu&iacute;</a>.</small></p>
	</div>
</body>
</html>

Recuerden usar url’s completas para imágenes y estilos css de línea. También noten que aquí se usan los comodines.

Ejemplo de successMessage

<h3 class="archive">Gracias <span>%name%</span></h3>
	<p><strong>Tu mensaje ha sido enviado.</strong> Responder&eacute; a la brevedad posible.</p>
	<p>Si te enviaste una copia, por favor revisa en tu bandeja de <em>spam</em> ya que en ocasiones se filtra el email. Para evitar esto, agrega la direcci&oacute;n <tt>contacto@jfastudios.com</tt> a tu lista blanca o de contactos.</p>

En mailText noten los saltos de línea (\n) pues lo trata como cadena y PHP lo sustituye por el salto visible, en mailHTML nos valemos de párrafos y lo que les de la imaginación así que no es necesario. En successMessage se puede usar HTML ya que se inserta a mitad del Loop de WordPress sin el contenido de la página.

Notas finales

¡Eso es todo!, sólo publicamos la página y realizamos las pruebas. Quizá sea necesario ajustar algunas partes del código según el caso, para mayor facilidad en la instalación baja el código completo, descomprime y súbelo directamente al directorio de tu tema WP teniendo cuidado con el archivo functions.php (haz un respaldo previamente), si ya existe y tiene funciones, entonces sólo edítalo y agrega el código que viene en mi archivo functions.php.

En resumen

1. Sube los archivos de la plantilla de contacto.
2. Baja la librería Securimage, descomprime y coloca todos los archivos dentro del directorio del tema y en <directorio-tema>/includes/securimage/
3. Inserta el código CSS necesario.
4. Crea la página en el editor y especifícale la plantilla “Pagina de Contacto”.
5. Crea todos los campos personalizados y asígnales los valores correspondientes.
6. Publica la página.

Disfrútalo, haz un comentario, sugiere algo o si encontraste errores hazlo saber.

• Ver Demo
• Código Fuente

Enlaces de referencia

• http://trevordavis.net/blog/tutorial/wordpress-jquery-contact-form-without-a-plugin
• http://codex.wordpress.org/Pages
• http://codex.wordpress.org/Custom_Fields
• http://jquery.com/
• http://www.phpcaptcha.org/
• http://phpmailer.worxware.com/

La estrategia

1. Selección del pretexto
2. Conocimiento del mismo
3. Identificación de recursos de representación
4. Experimentación constructiva
5. Propuesta
6. Evaluación

Además de esto, nos podemos apoyar de tres aproximaciones hacia la abstracción:

1. Lingüística
2. Gráfica / Visual
3. Material / Constructiva

1. Selección del pretexto

Es necesario tener un motivo, un pretexto, la definición de un problema. Este es el punto de partida y sólo teniendo bien claro lo que queremos realizar podremos llevar a cabo un proceso que nos conduzca hacia la exploración de posibles soluciones basadas en la investigación de las propias características de nuestro pretexto. Esto se reduce a una sentencia por ejemplo elegimos abstraer algún objeto, cosa o animal: “Quiero hacer el modelo de un animal fantástico” o algo diferente: “Un cartel para una conferencia” o “Una página web para una tienda de ropa”.

2. Conocimiento del mismo

Esto va de la mano con las aproximaciones hacia la abstracción, aquí realizamos una definición formal de nuestro objeto-estudio: ¿Cómo es?, ¿Qué forma tiene? ¿Qué tamaño tiene?, ¿Qué color(es) tiene?, ¿Qué textura(s) tiene?, ¿Qué hace?, ¿Cómo lo hace?, ¿Para qué se usa?, ¿En dónde se usa?, ¿Cuánto pesa?, ¿Qué ruidos/sonidos hace?, ¿Qué olor tiene?, ¿Si tiene o tuviera sabor, a qué sabe?, ¿Es cálido/frío?, ¿Es brillante/opaco?, etc., etc., etc.

Por ejemplo el “Animal Fantástico”. Este ejemplo me gusta porque es algo inexistente, pero es aquí donde le definimos identidad (aunque ya tiene dos características: debe ser un animal y uno que no exista), si fuera algo que ya existe lo describimos al detalle, como nuestro pato pero exprimiendo todo lo que se nos ocurra.

Nuestro animal fantástico es uno que vuela, que es de fuego, que es ligero, que es astuto como un cuervo, que emana luz…

3. Identificación de recursos de representación

Realizamos la búsqueda de materiales para construir nuestro objeto basándonos en la definición que obtuvimos anteriormente, por eso es muy importante enlistar todo lo que se nos ocurra y extraer lo más relevante, lo que le daría la personalidad característica a nuestro objeto, lo que lo diferencia de otras cosas. Junto con el material exploramos texturas, colores, formas similares a nuestro objeto, etc. Además teniendo en cuenta el proceso de construcción ya que no es lo mismo manejar por ejemplo papel, que aluminio rígido o madera o acero y mucho dependerá del destino o ubicación que tendrá nuestro objeto y analizando las características del ambiente.

Por ejemplo nuestro modelo de Animal Fantástico lo queremos para ubicarlo en la sala de la casa por lo que estará hecho con papel común en colores amarillo, blanco y usaremos hilo transparente para poder colgarlo.

4. Experimentación constructiva

Como el título lo dice, empezamos a manipular el material elegido para conocer sus propiedades y posibilidades e incluso desventajas. Lo doblamos, lo torcemos, lo cortamos, lo pegamos, lo combinamos con otros materiales, etc. Una vez que conocemos sus posibilidades comenzamos a realizar los modelos o bocetos de nuestro objeto hasta lograr una aproximación a la solución y hacer una propuesta.

Para nuestro animal fantástico descubrimos que el papel es muy versátil, si se dobla adquiere rigidez, una desventaja es que si se moja se rompe fácilmente, es ligero, se puede cortar fácilmente y para el destino que tendrá (el interior en nuestra sala) funciona perfectamente. Experimentamos dobleces rectos y curvos…

5. Propuesta

Finalmente, pero no finalmente hacemos una propuesta de diseño, en este punto YA tenemos un modelo real de lo que inicialmente nos propusimos y me refiero a “casi finalmente” porque aquí no termina el proceso puesto que hay que evaluar tanto el resultado final así como los materiales y muy importante: el proceso constructivo. El objeto ya construido nos guiará a la determinación de un punto crítico que es si cumple o no con la función que se supone debe realizar, es decir: ¿Sí o No es la Solución?

6. Evaluación

¿Es fácil reproducirlo?, ¿Los materiales son fáciles de conseguir?, ¿Es caro o barato?, ¿Cumple su función? Son el tipo de preguntas que nos van a guiar a determinar si lo que hicimos es La Solución.

Aproximaciones hacia la abstracción

Estas aproximaciones nos sirven para poder abstraer ideas, objetos o modelos que sumándolas nos dará como resultado una síntesis que las contenga:

A. Aproximación lingüística

• Enlistar conceptos que definan al modelo/idea/objeto.
• Enlistar conceptos contrarios al modelo/idea/objeto.

B. Aproximación gráfica / visual

• Vincular el concepto con el trazo gráfico que lo represente.
• Capturar texturas.

C. Método constructivo

• Manipulación de los materiales.
• Combinación de los materiales.

A + B + C = Síntesis

Es preferible comunicarse directamente con el lobo, que con éste disfrazado de oveja.

A pesar de que no conozco profundamente la obra de Mario Benedetti, el hecho de que halla sido perseguido por decir las cosas como son (temas políticos), nos habla mucho de su persona. Realmente, en términos resumidos: Le interesaba la gente, y como prueba indiscutible por siempre tendremos su palabra incómoda.

Inspiración

Inspirado por un artículo publicado en La Jornada por Marcos Roitman Rosenmann

Enlace: Mario Benedetti: un luchador contra la hipocresía

La Sinestesia es la mezcla de impresiones de sentidos diferentes. La sinestesia puede implicar a cualquiera de los sentidos.

Una de las asociaciones más frecuentes en los sinestésicos es la de las letras o números coloreados, aunque también hay personas sinestésicas que oyen sonidos en respuesta a olores, que perciben olores en respuesta al tacto o que el concierto de violín de Beethoven le “sabe” a chocolate.

La sinestesia es una condición relativamente rara, cuya frecuencia se estima en una de cada dos mil personas. Algunos estudios muestran que se da más entre las mujeres que entre los hombres y con mayor frecuencia en individuos zurdos, aunque se desconoce la razón de estas diferencias. Se ha sugerido que la sinestesia podría tener un componente genético, ya que parece darse con relativa frecuencia en varios miembros de una misma familia.

Los receptores sensoriales o sensitivos, son células especialmente nerviosas y altamente especializadas, que se encargan de detectar cosas o estímulos similares y que representan la vía de entrada de la información que proviene del medio ambiente.

Estas células, son las encargadas de reconocer las diferentes formas de energía presentes en el medio ambiente exterior e interior y de convertirlas en señales bio-eléctricas que son transportadas a centros nerviosos específicos de nuestro cerebro.

Las características de estos receptores son:

• Excitabilidad: Es el nivel mínimo de estimulación necesario para detectar las reacciones químicas que movilizan el impulso hacia el cerebro y que genera una respuesta o sensación.
• Especificidad: Cada receptor responde o lo hace con más facilidad a un tipo de estímulo en particular.
• Adaptabilidad: En la medida en que un estímulo se mantiene constante, la excitabilidad va desapareciendo y se produce un “acostumbramiento”, una adaptación.

Según el tipo de estímulo que las excita, los receptores se clasifican en:

1. Receptores mecánicos: La fuente de información es de tipo mecánico; por contacto, texturas, presión (piel), vibraciones (oído), volumen (en pulmones, vesícula y vejiga), distensión (aparato digestivo).
2. Receptores químicos: La fuente de información son sustancias químicas (olfato y gusto).
3. Receptores térmicos: La fuente de información es la temperatura, frío o calor (piel).
4. Receptores visuales o fotoreceptores: La fuente de información es la energía electromagnética o luminosa (retina del ojo).

Los umbrales sensoriales son, los valores de magnitud mínima del estímulo que son necesarios para su detección. Cuando la magnitud es muy débil, no se produce una respuesta de detección y se dice que es subumbral o subliminal.

La percepción está determinada por:

• Un estímulo. Sin un estímulo que provenga del medio externo como color, sonido, olor, textura, etc., no hay sensación ni percepción.
• Un órgano sensorial. Si el estímulo no se adecua a la capacidad sensible del individuo, no hay sensación y esto está determinado por factores como una enfermedad, su edad o algún daño a nivel cerebral.
• La relación entre ambos.

Los estímulos son tipos y cambios de energía que llega a los sentidos, provocando excitación; pertenecen al mundo exterior y producen un primer efecto o sensación en la cadena del conocimiento; son de orden cualitativo como el frío, el calor, lo duro, lo gelatinoso, lo rojo, lo blanco…

Así, un estímulo es toda energía física, mecánica, térmica, química o electromagnética que excita o activa a un receptor sensorial. Un estímulo se modifica por: su intensidad, (el sistema visual, responde bien a cambios o contrastes en un estímulo y poco a los graduales, porque no hay un cambio significativo), su forma, su color, el movimiento, su contraste, la luminosidad, el ángulo de visión y el contexto en el que está situado.

Al conjunto de sensores que detectan cosas similares del exterior para enviarlas al cerebro y que sean procesadas se les llama sentidos.

Los sentidos son las vías de comunicación que tiene un organismo con el mundo exterior. También hay los que detectan cosas del interior y se les llama instintos (sed, hambre, miedo, tristeza). Esos “avisos”, se producen por medio de sensaciones que son los mecanismos que tiene el cuerpo para procesar todos los estímulos que llegan al cerebro en forma de luz, sonidos, olores sabores, consistencias, temperaturas, texturas, dolor, etc.

La Vista

El proceso de la visión consta de:

• Un objeto estímulo o estímulo distal.
• La imagen proyectada en la retina o estímulo proximal.
• Lo que realmente se percibe, o sea, la información que ya ha sido procesada y enviada al cerebro, produciendo la visión.

La visión es ojos y cerebro.

• Los estímulos luminosos, producen en la retina una imagen invertida del objeto y el tamaño de ésta, varía en relación a la distancia entre el objeto y el observador. Una vez en el cerebro la imagen se reinvierte.

A pesar de todas las variaciones que se dan en los objetos y el ambiente que nos rodea, nuestra imagen mental de los objetos es constante; no importa cuánto varíen su forma, color, tamaño, etc. Porque ya lo tenemos aprendido, existen “hechos conocidos”.

Con la percepción visual se transforman los objetos de características cambiantes, en representaciones de características constantes.

Constancias perceptuales

• Constancia de tamaño.Si se modifica el tamaño, lo relacionamos con la distancia, lo comparamos y lo ubicamos dentro de una escala. La distancia determina el tamaño y vis. La identidad de las cosas se conserva, a pesar de que cambie su tamaño.
• Constancia de forma.Cuando varía el ángulo de observación, la distancia o la iluminación, la forma es afectada; se afecta su tamaño, sus medidas y ángulos, sus proporciones, etc. Sin embargo, seguimos reconociendo los objetos porque “ya los conocemos”.
• Constancia de color.No importa cuánto se modifique el color de los objetos, gracias a esta constancia, los seguimos reconociendo.

La Percepción también depende de:

• La experiencia del perceptor. Su cultura, edad, sexo, país, ambiente, etc.
• Sus necesidades, intereses, sentimientos, expectativas y motivos. Las personas tienden a percibir más lo que necesitan que aquello que les parece irrelevante. También afecta su estado anímico o emocional. Sólo percibimos el 10% de los estímulos a que estamos expuestos.
• La defensa perceptual. Negamos los estímulos que causan conflicto a nuestras expectativas, los que no nos convienen o nos parecen dañinos y buscamos aquellos que nos resultan placenteros.
• El aspecto novedoso. Un mensaje nuevo, siempre se percibe mejor, porque rompe con los esquemas tradicionales ya existentes y contribuye a llamar más nuestra atención.

Agradecimientos

Todo este material es retomado de apuntes de la profesora y D.C.G. Laura Serratos Zavala de la UEA Diseño y Comunicación II

La verdad, es que una de las mejoras cosas que existen es el buen sueño, y hablo de sueño de calidad, de ese que al siguiente día te sientes literalmente lleno de energía y con las ganas suficientes para hacer tus actividades y mucho más. En este artículo, te comparto unos tips breves para mejorar la higiene del dormir y que de esta forma tus verdaderos sueños se hagan realidad.

Primero establece los hábitos apropiados, despues las condiciones para dormir bien, luego prepárate antes de la hora de dormir y finalmente lo que puedes hacer si no puedes dormir.

Establece Los Hábitos Apropiados

• Establece una rutina de horario y procura levantarte siempre a la misma hora.
• Intenta estar en sitios bien iluminados, sobre todo en la mañana.
• Evita recostarte o dormir durante el día.
• Elimina o disminuye el consumo de alcohol, cafeína y nicotina.

Las Condiciones Para Dormir Bien

• No vayas a la cama con hambre o sed, o después de comer o beber demasiado.
• Acuéstate en un colchón firme y con una almohada cómoda.
• El dormitorio deberá tener una temperatura adecuada, estar oscuro y en silencio.
• Evita el ejercicio poco antes de la hora de dormir, puedes tomar un baño de agua caliente.

Antes De La Hora De Dormir

• Establece un ritual relajante antes de acostarte.
• Vacía la vejiga antes de ir a dormir.
• Escribe tus pendientes, no los intentes resolver o planear en tu cama.
• La cama es principalmente para dormir. Evita leer o ver TV acostado.

Si No Puedes Dormir

• Levántate y haz algo relajante. Regresa a la cama sólo cuando estés somnoliento.
• No intentes dormirte, permite que el sueño te alcance.
• Una mala noche ocaional es normal, no te preocupes por ello.
• Se puede tomar ocasionalmente una pastilla para dormir.

Fuente

Estos tips son tomados de un folleto del Grupo farmacéutico sanofi~synthelabo y son meras recomendaciones, para tener información precisa es recomendable visitar una Clínica de Transtorno del Dormir (éxisten varias en la Ciudad de México y la República Mexicana) y recuerda: La salud es primordial

Esto no es una facultad particular de los humanos; desde los organismos unicelulares muy simples, hasta los vertebrados más desarrollados, tienen que mantener el contacto con su medio para lograr su adaptación a éste y asegurar su supervivencia en el mismo.

Las sensaciones son la materia prima entregada al cerebro, no conllevan significados sino que son experiencias inmediatas y básicas generadas por estímulos en forma de energía, son, de alguna manera, una respuesta de los sentidos.

Las sensaciones pueden clasificarse en:

Internoceptivas

Receptores internos localizados en los tejidos profundos, en la vía digestiva y en otros órganos y que registran los procesos internos del organismo, como los movimientos del aparato digestivo, la circulación de la sangre y el palpitar del corazón. Detectan los “malestares” de nuestro cuerpo.

Propioceptivas

Sensibles a los cambios que se originan por el movimiento y las posiciones del organismo. Responden al movimiento, la tensión y la contracción muscular, ayudando al organismo en la conservación de su situación corporal como el estar en equilibrio o el sentir “tensión muscular”.

Externoceptivas

Registran los estímulos que se generan en el mundo exterior. Son recibidas a través de la vista, el oído, el olfato, el tacto y el gusto.

El estímulo es algún tipo de energía que pertenece al mundo exterior y que produce un primer efecto o sensación en la cadena del conocimiento; es de orden cualitativo como el frío, el calor, lo duro, lo gelatinoso, lo rojo, lo blanco… Es toda energía física, mecánica, térmica, química o electromagnética que excita o activa a un receptor sensorial.

La percepción pertenece al mundo individual interior (experiencia del perceptor, necesidades, intereses, sentimientos, expectativas y motivos), al proceso psicológico de la interpretación y al conocimiento de las cosas y los hechos.

La sensación es la impresión del mundo exterior alcanzada exclusivamente por medio de los sentidos. La percepción es una interpretación significativa de las sensaciones.

El pensamiento y la cognición, no son un privilegio de procesos mentales muy sofisticados, ajenos a la percepción, sino algo esencial en la percepción misma.

La Percepción en la comunicación depende de:

• La experiencia del perceptor. Su cultura, edad, sexo, país, ambiente, etc.
• Sus necesidades, intereses, sentimientos, expectativas y motivos. Las personas tienden a percibir más lo que necesitan que aquello que les parece irrelevante. También afecta su estado anímico o emocional. Sólo percibimos el 10% de los estímulos a que estamos expuestos.
• La defensa perceptual. Negamos los estímulos que causan conflicto a nuestras expectativas, los que no nos convienen o nos parecen dañinos y buscamos aquellos que nos resultan placenteros.
• El aspecto novedoso. Un estímulo nuevo, siempre se percibe mejor, porque rompe con los esquemas tradicionales ya existentes y contribuye a llamar más nuestra atención.

Resumiendo

La sensación, es el punto de partida en el proceso de la percepción, un mecanismo receptor de información y un proceso elemental donde no hay significado.

La percepción, posee una naturaleza cognitiva, funcionando como un medio de conocimiento de las cosas.

La cognición, es ya, la función del pensamiento que nos permite el poder interpretar y comprender el mundo, haciendo una reflexión sobre la propia existencia y solucionando efectivamente las dificultades que impone el medio ambiente.

La Percepción es el conjunto de procesos y actividades relacionadas con:

• la estimulación que alcanza los sentidos, mediante los cuales obtenemos información del medio que nos rodea,
• las acciones que realizamos en él y
• nuestros propios estados internos.

Finalmente la percepción es Subjetiva, Selectiva y Temporal.

Agradecimientos

Todo este material es retomado de apuntes de la profesora y D.C.G. Laura Serratos Zavala de la UEA Diseño y Comunicación II

Sobre la Usabilidad

El termino usabilidad se compone de algunos elementos como la facilidad, funcionalidad, calidad y la utilidad de un objeto especifico, normalmente se le asocia con el termino accesibilidad. Pienso que en el diseño web esto es la piedra angular sobre la cual trabajar para que el resultado final (en este caso un sitio web) tenga éxito, es decir, éste es el factor que tiene mayor peso para determinar que el diseño es prometedor, incluso creo que un poco más que el contenido mismo.

Un concepto más acertado podría ser el grado en el que el diseño de un objeto facilita o dificulta su manejo y también le da sentido a su contenido y/o a su mensaje. Si enfocamos esto al diseño web con estándares tenemos que (sin introducirme en cuestiones técnicas) una página puede ser compatible con todos los navegadores web actuales y en sus versiones futuras (esto por supuesto idealmente), puede ser vista igual en una PC, en un dispositivo móvil, en un navegador aural y en todos estos aparatos dentro de 10 años, y puede llegar a convertirse en una herramienta muy útil y práctica como el caso del correo electrónico “webmail”, buscadores de información como el que encontramos en la biblioteca de la universidad, etc.

Principalmente el objetivo de la usabilidad en el diseño web desde mi perspectiva es la facilidad de aprendizaje para navegar e interactuar sobre el sitio, lograr que el usuario encuentre lo que busca en el menor tiempo posible, crear una experiencia para el usuario prácticamente.

Accesibilidad

Sé que la tecnología bien aplicada puede lograr cosas sorprendentes, como el uso de estándares para construir una página web, pues permite que el contenido llegue al mayor público posible sin importar las limitaciones que algún usuario particular pudiera tener (según las recomendaciones del Consorcio de estándares web):

• Visuales: Aquí por ejemplo puedo decir que el tamaño de la letra es un factor importante, los colores y la posición de los elementos.
• Motrices: Es importante, para personas que tienen problemas musculares o de parálisis, así se les permite usar una aplicación con el mínimo esfuerzo.
• Auditivas: Para personas con debilidad auditiva o completamente sordas.
• Cognitivas: Dificultades de aprendizaje o discapacidades que afecten a la memoria, la atención, las habilidades lógicas, etc.

Las siguientes son algunas de las tecnologías que usan los usuarios discapacitados para navegar en la web que encontré por Internet:

• Un programa lector de pantalla, que puede leer usando síntesis de voz, los elementos que se muestran en el monitor (de gran ayuda para los usuarios con dificultades de aprendizaje o lectura), o que puede leer todo lo que está pasando en el PC (utilizado por los usuarios ciegos y de visión reducida).
• Líneas Braille, que consiste en dispositivo hardware que convierte el texto en caracteres Braille.
• Un programa magnificador de pantalla que amplía lo que se muestra en el monitor de la computadora, haciéndolo más fácil de leer para los usuarios de visión reducida.

El grupo de trabajo Web Accessibility Initiative (WAI), que forma parte del organismo encargado de promover la accesibilidad World Wide Web Consortium (W3C) en 1999, se encarga de manejar cuestiones de accesibilidad y emitir documentos al respecto.

Mantenimiento, Costos y Otras Yerbas

Ya he hablado sobre la Usabilidad como pieza importante en el diseño web, de la Accesibilidad como un punto a considerar para que el impacto de lo que se diseña llegue a personas con limitaciones y finalmente tenemos el Mantenimiento, que sencillamente se trata de que a largo plazo un sitio web se pueda depurar de forma cómoda y sencilla permitiendo que no sólo el autor original, sino que algún otro desarrollador comprenda lo que se hizo (entiéndase que aquí los estándares actúan como un lenguaje universal y según la experiencia que tengo al respecto). Las cuestiones relacionadas a los Costos se basan en aspectos técnicos, por ejemplo, una página que utiliza estándares web deduzco que tiende a ser transmitida por la red más rápido, lo que significa que el tamaño de los datos es reducido, que a su vez implica poco espacio en los dispositivos de almacenamiento, uso menor de ancho de banda (aquí se ahorra en ambos sentidos, tanto quien provee la pagina, como quien la consume ya que los proveedores de Alojamiento Web cobran por la cantidad de datos transmitidos mensualmente y el usuario consumidor paga una renta a su proveedor de internet), un uso menor de energía para transmitir los datos (electricidad, combustibles, etc) y en consecuencia tener un impacto ecológico favorable de una forma muy, muy indirecta.

Jeffrey Zeldman es uno de los primeros impulsores del uso de estándares web, su coalición ha logrado persuadir a Microsoft y Netscape de hacer de sus navegadores un producto útil (dentro de lo que cabe, ya que en la actualidad Microsoft no ha logrado superar alternativas libres y mejores), desde sus comienzos ha publicado A List Apart “for people who make websites” que se ha convertido en una de las más respetadas e influyentes revistas electrónicas en el campo. En particular, ha tratado de destruir el mito de que los sitios web accesibles tienen que ser feos o aparentemente “sin diseño”. Sus libros y sitios web han ayudado a promover una mejora general de la técnica, diseño, usabilidad y accesibilidad de sitios web, mediante el uso de código XHTML[ii] y CSS[iii].

[i] World Wide Web Consortium (W3C)

Es un consorcio internacional que produce estándares para la World Wide Web. Está dirigida por Tim Berners-Lee, el creador original de URL (Uniform Resource Locator, Localizador Uniforme de Recursos), HTTP (Hypertext Transfer Protocol, Protocolo de Transferencia de Hipertexto) y HTML (Lenguaje de Marcado de Hipertexto) que son las principales tecnologías sobre las que se basa la Web.

[ii] XHTML

Acrónimo inglés de eXtensible Hypertext Markup Language (lenguaje extensible de marcado de hipertexto), es el lenguaje de marcado pensado para sustituir a HTML como estándar para las páginas web. En su versión 1.0, XHTML es solamente la versión XML de HTML, por lo que tiene, básicamente, las mismas funcionalidades, pero cumple las especificaciones, más estrictas, de XML. Su objetivo es avanzar en el proyecto del World Wide Web Consortium de lograr una web semántica, donde la información, y la forma de presentarla estén claramente separadas.

[iii] Hojas de estilo en cascada (Cascading Style Sheets, CSS)

Son un lenguaje formal usado para definir la presentación de un documento estructurado escrito en HTML o XML (y por extensión en XHTML). El W3C (World Wide Web Consortium) es el encargado de formular la especificación de las hojas de estilo que servirán de estándar para los agentes de usuario o navegadores. La idea que se encuentra detrás del desarrollo de CSS es separar la estructura de un documento de su presentación.

Hoy en día, se está produciendo una confluencia entre los objetivos del dibujo artístico y técnico. Esto es consecuencia de la utilización de las computadoras en el dibujo técnico, con ellos se obtienen recreaciones virtuales en 3d, que si bien representan los objetos en verdadera magnitud y forma, también conllevan una fuerte carga de sugerencia para el espectador.

Técnicas de Dibujo

El dibujo a mano alzada o dibujo libre se ha utilizado desde hace mucho tiempo empleando para ello todo tipo de materiales y soportes algunos de ellos se deben a la inventiva de grandes maestros como Leonardo, Filipo Lippi, Rembrand entre otros. Haremos mención de algunas de estas técnicas o por lo menos, las más conocidas.

Grafito y lápiz

Quizás uno de los medios para dibujar más difundidos.  Su nombre se origina del latín pencillus y posteriormente del francés antiguo pincel, pero ésta en realidad se trataba de una pequeña brocha hecha con pelo de camello.  Dado su tamaño igual al lápiz actual, se generalizó bajo ese nombre y así se patentó la mina de grafito envuelta en una barrita de madera  y que además produce una gran variedad de tonos según su dureza.

Carbón o carboncillo

En su forma más pura, se emplea al tiempo en que se descubrió como hacer fuego casi por accidente y esto lo podemos apreciar en la pintura rupestre de todos ya conocida. Posteriormente se emplea para hacer apuntes o bosquejos que servían como modelos para obras de mayor envergadura como en los frescos. Lo podemos apreciar en los cartones de Rafael,  el término Cartón (cartoon) lo emplea por primera vez el historiador alemán Oscar Fischel para describir esta técnica empleada por este artista que posteriormente transfería  a otros soportes.

Yeso y tizas naturales

Provenientes de tierras y materiales calcáreos tales como la calcita, ematita, carbón y otras tierras naturales creando una variedad de ocres, naranjas, negros y rojos que fueron utilizados por artistas del renacimiento.  A partir del siglo XVII se usa una tiza roja para dibujos de base que se conoce como sanguina  (termino francés) dado su color rojo fuerte.

Tinta china y plumilla

Muy empleados en la antigüedad especialmente en la caligrafía oriental y posteriormente en  varias latitudes. Las primeras tintas se elaboran con base de carbón tratado también con la bilis de ciertos moluscos (ácido tánico) así como de soluciones de sulfato de hierro y exudaciones  de algunas plantas y árboles. En su aplicación se empleaban varitas de bambú cortadas apropiadamente así como plumas naturales de algunas aves.  Ya industrialmente se elaboraron las conocidas plumillas con punta metálica de varios estilos.

Crayón

El termino crayón se usaba de una manera ambigua en  la antigüedad y parece ser que  ya Leonardo en el renacimiento hace mención de ellos al decir que la cera era un buen medio para la preparación de crayones.  La diferencia de estos  con las tizas y yesos es
que en estos se empleaba el spermaceti (cera de esperma de ballena) como medio aglutinante. Y es precisamente en 1797 en que aparece la primera formula de su preparación esto sucede en Hochhime’s. Luego se emplearía también en la elaboración de dibujos litográficos, partiendo del principio de que la grasa y el agua se repelen.

Conté Crayón

Inventado entre 1755-1805 por Nicolás Jacques Conté. Era una mezcla de arcilla y grafito refinado.  Debido al la guerra Napoleónica hubo escasez de grafito  y con el invento de Conté se mejoró el crayón el cual empleaba menos grafito y más arcillas, produciendo así diferentes durezas y tonos de color.  Georges Surat los empleó en  muchos de sus trabajos.

Trois Crayons

Estos también fueron otra técnica  empleada principalmente por Jean Antoine Watteau quien empleaba solamente tres colores de crayón rojo, negro y blanco.  Creando así dibujos con color y sombras en sus estudios.