Agregar editor de texto HTML [TinyMCE]

Un editor de texto HTML es un campo de texto (textarea) que permite a un usuario crear un texto en formato HTML. En páginas webs como blogs, fotos, chats y diarios de visitas son un ejemplo de su uso.
TinyMCE es un editor de texto para HTML de código abierto que funciona en su totalidad con JavaScript y se distribuye bajo la licencia LGPL. Permite, básicamente, convertir un campo tipo "textarea" en un complejo editor HTML para el usuario.

Primero hay que descargarlo de su página oficial www.tinymce.com/
De preferencia el fichero "development package" que contiene la mayoría de los plugins existentes, lenguajes y demás. Aunque para estos ejemplos estoy usando el paquete básico.

Su forma más simple de uso consiste en agregarlo a nuestra página:

<script type="text/javascript" src="js/tinymce.min.js"></script>

Agregar uno o varios "textareas" a la página:

<textarea id="texto" name="texto" rows="15" cols="80"></textarea>

y, para "convertir" los textareas en editores HTML se agrega otro código de JavaScript a la página:

<script type="text/javascript">
tinyMCE.init(
{
mode: "textareas", //Todos los textareas se verán afectados
theme: "simple" // Es estilo del editor será el más simple
}
);
</script>

Como se lee en el código, se manda a llamar la función init() con los parámetros mode de valor "textareas", lo cual indica que se afectarán a todos los campos textareas de la página, y theme con valor "simple", lo cual indica que se usará el editor sencillo.
El resultado es el siguiente:

Editor simple

Ahora, si lo que quieres es que sólo un campo textarea, o sólo algunos en específico, obtengan la propiedad de ser editores HTML se cambia el valor del parámetro mode por "exact" y se agrega el parámetro elements con la lista de los id's de los textareas que queremos convertir en editores de texto; digamos que tenemos los siguientes textareas:

<textarea id="texto1" name="texto1" rows="10" cols="80"></textarea>
<br />
<textarea id="texto2" name="texto2" rows="10" cols="80"></textarea>
<br />
<textarea id="texto3" name="texto3" rows="10" cols="80"></textarea>

y sólo queremos que el textarea "texto1" y "texto3" sean editores HTML, entonces la función init se invoca:

<script type="text/javascript">
tinyMCE.init(
{
mode: "exact", //Indica que sólo algunos textareas tendrán el formato de editor html
elements: "texto1, texto3", //lista de id's de los text áreas que obtendrán el formato de editor
theme: "simple" //El tema será el más simple que hay
}
);
</script>

Y el resultado obtenido es el siguiente:

discriminar textareas

Como se ve, sólo 2 de los 3 textareas son editores HTML, aquellos que indicados en el parámetro element.

TinyMCE tiene un modo avanzado, el cual incluye bastantes más herramientas y es mucho más personalizable.

Empecemos con lo sencillo, para usar el modo avanzado sólo basta con cambiar el valor del parámetro theme por "advanced". Una vez hecho esto, se pueden agregar más parámetros a la función init(), inicialmente lo recomendable es que la barra de herramientas no se encuentre abajo, sino arriba, ya que se incluirán más botones, para ello se agrega el siguiente parámetro:

theme_advanced_toolbar_location: "top", // La barra de herramientas vanzadas la colocamos en la parte superior

También se puede manipular la orientación de los botones (izquierda,derecha o centrados). En fin, el código JavaScript por ahora puede quedar así:

<script type="text/javascript">
tinyMCE.init(
{
mode: "textareas", //Afectará a todas las textareas
theme: "advanced", //El tema será el avanzado
theme_advanced_toolbar_location: "top", // La barra de herramientas vanzadas la colocamos en la parte superior
theme_advanced_toolbar_align: "center", // Indicamos hacia qué lado se alinearán los "botones" de la barra de herramientas (left,right,center)

}
);
</script>

Como mencioné, agregué un quinto argumento para indicar que los botones se centrarán en las barras de herramientas. El resultado es el siguiente:

Editor avanzado

Básicamente así se puede quedar nuestro editor, más sin embargo podemos considerar que son muchas herramientas las que se ven, o son pocas; el modo avanzado es para personalizar el editor. Podemos agregar plugins, los cuales dan funcionalidades extras, podemos cambiar el orden de nuestros botones y agruparlos por "barras de herramientas".
Primero con los plugins, éstos se encuentras almacenados en la subcarpeta "plugins" del archivo que descargamos, también podemos ir descargando nuevos plugins de la misma página (http://www.tinymce.com/download/plugins.php). Para usarlos primero hay que agregar el parámetro plugins a la función init() con una lista de los plugins que queremos agregar.
ejemplo:
plugins: "style,table,save,emotions"

Para administrar los botones por barras de herramientas, agregamos un parámetro por cada barra con el nombre theme_advanced_buttons# (el # indica el número de la barra, 1, 2, 3...) y de valor la lista de los botones que le queremos agregar, también podemos poner el caracter '|' (barra vertical) para poner un separador en los botones.
Del mismo modo, una vez que se llamaron los plugins en su parámetro, hay que meterlos a una barra para que aparezca su botón de uso, el nombre del botón es el mismo que el nombre del plugin.
Ejemplifico lo anterior con el siguiente ejemplo:

<script type="text/javascript">
tinyMCE.init(
{
mode: "textareas", //Afectará a todas las textareas
theme: "advanced", //El tema será el avanzado
plugins: "style,table,save,emotions", //agregamos algunos de los plugins que vienen en la carpeta plugins, se puedes descargar más de http://www.tinymce.com/download/plugins.php
theme_advanced_toolbar_location: "top", // La barra de herramientas vanzadas la colocamos en la parte superior
theme_advanced_toolbar_align: "center", // Indicamos hacia qué lado se alinearán los "botones" de la barra de herramientas (left,roght,center)
/*Creamos las 3 barras y le agregamos los botones que le queremos dar*/
theme_advanced_buttons1: "bold,italic,underline,strikethrough,|,justyleft,justycenter,justyright,justyfull,formatselect,bullist,numlis,outdent,indent", //formato de letra (negritas,cursiva,subrayada,justificado a la izquierda,centrado,derecha....)
theme_advanced_buttons2: "link,unlink,anchor,image,|,undo,redo,clanup,code,sub,sup,charmp", // herramientas para crear link, deshacer link, anchor, agregar imágen, deshacer,reacer,limpiar...
theme_advanced_buttons3: "style,|,table,|,save,|,emotions",//Aquí le agregamos los botones para que se activen los plugins (Los botones se llaman igual que los plugins :P)
theme_advanced_resizing: true, // Le permite al usuario cambiar el tamaño del textarea
height: "200px", // También podemos determinar la altura de la textarea
width: "600px" //Y lo largo
}
);
</script>

El resultado sería el siguiente:

Editor avanzado personalizado

Se observa que se tienen menos botones que el ejemplo anterior, y agregué la línea theme_advanced_resizing: true la cual permite que el usuario pueda cambiar el tamaño del textarea.

Una forma casi completa del textárea es con el siguiente código:

<script type="text/javascript">
tinyMCE.init(
{
mode : "textareas",
theme : "advanced",
//Los plugins que trae por defecto
plugins : "autolink,lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist,autosave,visualblocks",

// Agregando las barras de botones
theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak,restoredraft,visualblocks",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
}
);
</script>


El resultado es este

Usando la paquetería completa, se puede obtener un editor mucho mejor.

Ejemplo completo de TinyMCE con el tema reciente

En el enlace anterior les aparece el código para obtener un editor HTML completo y usando la explicación de este post pueden depurarlo y hacerlo a su gusto, igual aquí tienen los ejemplos que hice en el blog.

Descarga los ejemplos

NOTA: para un conocimiento aún mayor del TinyMCE, está si documentación

9 acertijos de lógica [+ 1 de matemáticas]

Los acertijos lógicos son pasatiempos o juegos que consisten en hallar la solución a un "problema hipotético" planteado.
Todos estos juegos (acertijos) tienen una base lógica, matemática o una mezcla de ambas (Y no requiere la posesión de conocimientos determinados).

Traigo 9 acertijos lógicos (y uno más de matemática) que he encontrado en Internet, una ligera recolección de diversos libros clásicos (la isla de los caballeros y escuderos, el mercado de Venecia, inferencias lógicas...) , para permitirles pasar un rato ejercitando el cerebro y la lógica.
(Al final se encuentra el enlace a las respuestas de los acertijos con su explicación):


1er acertijo de lógica:

3 personas, cualquiera puede ser un mentiroso o un sincero. La primera persona dice algo que no entiendes. La segunda persona dice que la primera dijo ser un mentiroso. La tercera persona dice que la segunda miente.

Ignorando a la primera persona ¿Qué persona es qué (mentiroso o sincero)?

2° acertijo de lógica:

En el mercado de Venecia de Shaquespare, Porcia tenía 3 cofres, uno de oro, uno de plata y otro de plomo, y en uno de ellos estaba su retrato.

El pretendiente de Porcia tenía que escoger un cofre, y si hubiera sido tan afortunado o sabio de escoger aquel con el retrato, habría podido pedir la mano de Porcia.

Porcia hizo esculpir sobre los cofres las siguientes inscripciones:

Oro: El retrato esta en este cofre.
Plata: El retrato no esta en este cofre.
Plomo: El retrato no esta en el cofre de oro.

Porcia explicó al pretendiente, que cuando mucho una de las 3 afirmaciones era verdadera.

¿Cuál de los cofres contenía el retrato?.

3er acertijo de lógica:

El pretendiente escogió de forma correcta y se casaron y vivieron felices y contentos por lo menos por un cierto tiempo, un día Porcia hizo el siguiente razonamiento: "podemos decir que mi esposo mostró poseer una cierta inteligencia al escoger el cofre correcto, pero el problema no era muy difícil. Hubiera tenido que hacerlo más arduo para poder tener un esposo verdaderamente inteligente." Así se divorcio inmediatamente para poder escoger un esposo más inteligente, esta vez hizo esculpir las siguientes inscripciones:

Oro : El retrato no está en el cofre de plata
Plata: El retrato no está en este cofre
Plomo: El retrato está en este cofre.

Porcia explico al pretendiente que por lo menos una de las tres afirmaciones era verdadera y que por lo menos una era falsa.
¿En cual de los cofres está el retrato?


4° acertijo de lógica:

En la isla de los "caballeros y escuderos" los caballeros siempre dicen la verdad y los escuderos siempre mienten...

Una vez, cuando visité la isla de los caballeros y escuderos, encontré a dos habitantes descansando bajo un árbol. Le pregunté a uno de ellos, "¿Es alguno de vosotros un caballero?". Él me respondió, y con su respuesta pude saber la solución a mi pregunta.

¿Qué es la persona a la que dirigí mi pregunta, caballero o escudero?; y, ¿Qué es el otro? Puedo asegurar que he suministrado información suficiente para resolver este problema.

5° acertijo de lógica:

Siguiendo la regla de que los caballeros dicen la verdad y los escuderos mienten...

Tenes enfrente a 2 personas ('A' y 'B').
'A' dice, "O yo soy un escudero o B es un caballero".
¿Qué son A y B?

6° acertijo de lógica:

En una isla cercana habitan caballeros (siempre dicen la verdad), escuderos (siempre mienten) y normales (a veces mienten y a veces dicen la verdad). Estamos antes tres personas, A, B, C, una de las cuales es caballero, otra escudero, y otra normal (aunque no necesariamente en este orden). Dicen lo siguiente:
A: Yo soy normal.
B: Eso es verdad.
C: Yo no soy normal.

¿Qué son A, B y C?

7° acertijo de lógica:

Te encuentras habitación que tan solo tiene dos puertas: una conduce a la salvación y la otra a la perdición. Cada puerta está custodiada por un guardián. Sabes que un guardián siempre dice la verdad mientras que el otro siempre miente, pero no sabes cuál es cuál. Sólo tienes una oportunidad.

¿Qué pregunta le formularías a uno solo de los dos guardianes para saber cuál de las dos puertas te permitirá salvarte?

(Aclaración: Que un guardia diga la verdad no quiere decir que la puerta que custodia sea la de la salvación).

8° acertijo de lógica:

Alicia y el día de la semana

Alicia, tras atravesar el espejo, se encuentra vagabundeando por el Bosque del Olvido, donde es incapaz de recordar qué día de la semana es. En el bosque viven el León y el Unicornio. El León miente los lunes, martes y miércoles. El Unicornio miente los jueves, viernes y sábados. En todas las demás ocasiones, ambos personajes dicen siempre la verdad. Alicia les pregunta y el León dice: "ayer me tocó mentir", mientras que el Unicornio asegura: "a mí también me tocó mentir ayer".
¿Qué día de la semana es hoy?

9° acertijo de lógica:

En la Isla de los Zombis, los humanos siempre dicen la verdad y conviven con los zombis, que siempre mienten y no se pueden distinguir externamente de los humanos. Para complicar la cosa, en el idioma de la isla, las preguntas que normalmente se contestarían con un "sí" o un "no" se responden con las palabras "bal" o "da", pero el visitante no sabe cuál significa "sí" ni cuál significa "no".

Supongamos que el visitante pregunta a un lugareño si "bal" significa "sí" y que éste responde: "bal"; no se puede saber lo que significa "bal", pero sí puede saber si le ha preguntado a un Zombie o a un Humano ¿a qué le ha preguntado?

Acertijo matemático:

Si una rana se cayó en un pozo de 30 metros y al intentar salir brinca 3 metros en el día y de noche resbala 2 ¿ cuántos días se tardará en salir?

Lee las respuestas a los acertijos

Configurar una conexión en MySQL WorkBench

MySQL WorkBech es una herramienta visual que sirve para el diseño, manutención y administración de bases de datos en MySQL (aunque se puede usar con otros manejadores) y, algo muy importante, es de código abierto.

Crear una conexión es el primer paso para cualquier trabajo que se pretenda realizar con esta herramienta: diseñar y crear una base de datos, hacer consultas, hacer respaldos, usar las herramientas administrativas y un largo etcétera.

Antes de iniciar la configuración de la conexión se debe tener corriendo el servicio de MySQL (a mí me gusta usar el XAMPP para los trabajos en mi computadora personal):

Ya estando en la interfaz del WorkBench, inicialmente tenemos 3 paneles (de izquierda a derecha):

• Desarrollo SQL (realizar las consultas, transacciones y cambios en una base de datos existente)
• Diseño de la base de datos
• Administración de servidores

Para crear una conexión es en el panel de la izquierda (Desarrollo SQL / SQL Development), en la opción "new connection".

Se abrirá la siguiente ventana:

Los campos a rellenar son:

• Connetion name: un nombre para identificar la conexión.
• Connection method: el método (o protocolo) de conexión a la base de datos; por defecto es una el TCP/IP al menos que el servidor esté configurado para aceptar otro tipo de conexiones.
• Hostname: el nombre del host o dirección IP, puede ser el nombre del dominio (www.servidorsql.net) o la dirección IP (135.23.2.1)
• Port: puerto de conexión, por defecto se usa el 3306.
• username: el usuario de la base de datos.
• Password (Opcional): la contraseña a la base de datos, se puede omitir este dato sólo que cada vez que se quiera usar esa conexión se pedirá que se introduzca la contraseña.
• Default Schema (Opcional): Base de datos por defecto, cada que se utilice esa conexión se empezará a usar una base de datos por defecto, si no se llena este campo entonces se usará la última base de datos usada (No hay problema, abierta la conexión se puede elegir la base de datos que se usará en ese momento).

Un ejemplo de cómo llenarla:

Se puede hacer clic en el botón "Test Connection" para comprobar si los parámetros introducidos son correctos (funcionará aunque no se haya introducido contraseña debido a que sólo comprueba la existencia de la Base de Datos y si permite conexiones con el método y el puerto indicado).

Se guarda la configuración (OK) y se visualizará la nueva conexión en el panel de "Desarrollo SQL" (Izquierda) de la ventana inicial.

Siendo ésto todo lo necesario para configurar la nueva conexión; inmediatamente podemos empezar a usarla haciendo doble clic sobre el nombre de la conexión, se abrirá una pestaña con la consola para hacer consulta a nuestra(s) base(s) de datos:

[Vídeo] Presentación de "Les Twins"

Les Twins es un Dúo del baile moderno "Raindance" compuesto por los gemelos idénticos Laurent y Larry Bourgeois. Sus espectáculos rebasan las simples coreografías dando pequeñas interpretaciones y actuaciones desde cómicas hasta actuar una pelea.

Les Twins tiene poco tiempo de darse a conocer fuera de su país (Francia), aún así se les ha visto ya en varios espectáculos y concursos internacionales; lo que le ha dado cabida en vídeos como el de "Play Hard" de David Guetta.
Les presento una de sus primeras actuaciones en el Tour "World Of Dance" en San Diego 2012:




Para ver su aparición en "Play Hard": http://youtu.be/5dbEhBKGOtY?t=2m53s

Unidad de CD - Portavasos

Debido al cada vez menor uso de las unidades lectoras de CD, se ha bromeado en que su uso ya sólo radica que ser usadas como porta-vasos. Sin embargo hay quienes se han tomado muy enserio esta cuestión, de allí el siguiente vídeo:

La vida de los programadores informáticos [Vídeo]

Aunque exagerado, un vídeo que tampoco se aleja de la realidad para la vida de un programador informático; casi parece que genéticamente estamos destinados para hacer cosas absurdas con tal de reducir el estrés, ser ignorados por la mayoría de los departamentos y hasta hacer un festejo por que (por fin) nuestro programa compiló.
Disfruten del cómico e ilustrativo vídeo:

Monólogo informático [Humor]

Les muestro un vídeo corto pero muy gracioso que tiene de tema principal: La informática. Sinceramente me causó mucha risa y a mi parecer no es necesario ser informático para entender los chistes que el comediante, Nacho García, nos cuenta en estos breves 2:26 minutos: