Me lo contaron y lo olvidé, lo leí y lo entendí, lo hice y lo aprendí.





sábado, 16 de agosto de 2014

Posicionar/Re-ordenar/Desplazar elementos de una página web [JQUERY,JavaScript,HTML]

Podría ser en ocasiones necesario que, dentro de una página web, el usuario pueda o tenga que ordenar una lista de elementos (enlaces, opciones, texto...) de manera vertical (u horizontal).
Teniendo una lista como:

1.- elemento a.
2.- elemento b.
3.- elemento c.
4.- elemento d.

Y que el usuario la pueda cambiar el orden:

2.- elemento b.
4.- elemento d.
1.- elemento a.
3.- elemento c.

Sea cual sea la razón, realizar este trabajo en web podría resultar confuso debido a la forma de posicionamiento en una página.
A mí me resultó bastante cómodo el no pensar acomodar directamente los elementos en la pantalla, sino más bien tener un arreglo en JavaScript que contenga en cada posición el "id" de cada elemento al cual el usuario podrá interactuar.
arreglo:

[0] = "elemento1";
[1] = "elemento2";
[2] = "elemento3";
[3] = "elemento4";

El usuario, mediante clics en imágenes, cambiará la posición de cada valor en el arreglo; me refiero a que si da clic en la imagen que "baja" de posición el valor "elemento2", el arreglo quedaría así:

[0] = "elemento1";
[1] = "elemento3";
[2] = "elemento2";
[3] = "elemento4";

Ya, teniendo el arreglo ordenado, es más sencillo posicionar los elementos (referidos con su id) dependiendo de la posición en el vector; algo como:

posición y = 100px + (posición en el vector * 20) px;

El método que diseñé funciona así:

http://unrinconenlaweb.webcindario.com/reordenar/desplazar_vertical.html

Por simple dejadez no me preocupé en diseñar el mismo funcionamiento con un botón para "subir" el elemento y otro para "bajar"; pero la mecánica es sencilla: Una función (evento clic) para desplazar el valor dentro del vector; y otra función para posicionar la coordenada 'Y' de los elementos según la posición de su 'id' (valor del vector) dentro del vector, la cual consiste en un simple bucle for.

Para descargar el ejemplo, está el enlace de abajo :P

desplazar verticalmente elementos HTML con JQuery

domingo, 25 de mayo de 2014

Eliminar Sweet Page (Chrome, Firefox, Internet explorer, toolbars)

El "Sweet Page" es un MalWare que afecta a los navegadores Web; aunque su función en meramente publicitaria, debido a que sólo provoca que al iniciar tu navegador Web te direccione a la página "sweet-page.com", es fastidioso no ver la página inicial que necesites (Y en mi caso, mi antivirus bloqueaba la página y me lanzaba una alerta).
La manera de actuar de este MalWare es algo ingenioso, para empezar altera los accesos directos de tus navegadores web para que, en lugar de ejecutar la página inicial del programa, ejecute la página "Sweet Page"; algo así:


Además de jugar con algunos valores del registro que, básicamente, funcionan igual (pasar de parámetro la URL al programa que se ejecuta, en el caso de que no se usen los accesos directos).
Este MalWare viene en archivos de "gestores de descargas" (Un gestor de descarga como el Softonic.com, que te descargan un programa que, a la vez, te descarga el programa real junto con varios complementos extras como parte publicitaria). Aunque se supone hay normas que regulan para que esto no sea un inconveniente e instales algo que no quieres, los programadores de estos servicios son astutos como para presentarte la descarga de complementos de una manera que no entiendas que estás aceptando la descarga en lugar de rechazarla (preguntas  inversas, confirmaciones escondidas, etc) y, en casos extremos pero reales, ignorar tu decisión e instalar los complementos de todas maneras.

Programas como el Anti-Malware y el Super-antispyware detectan entradas del registros como maliciosas, pero desconocen el resto de los métodos usados por el Malware debido a que son, de cierta manera, genuinos.

Afortunadamente encontré un vídeo en YouTube que da a conocer un buen programa para eliminar males de este tipo (Aseguro que varios MalWare más empezarán a usar éstos métodos de propaganda). Aquí está el vídeo que encontré (Y el enlace para verlo directo en YouTube http://youtu.be/F-VDAjrPPAw) :



Los enlaces de descargas que se encuentran en el vídeo son los siguientes:
http://dropcanvas.com/#5Q3Q8E6oL93Jzb
https://toolslib.net/downloads/viewdo...

(Aunque recomiendo entrar al enlace directo para que encuentren el programa más actual)

sábado, 17 de mayo de 2014

Far Flight, juego en HTML5 altamente adictivo

No cabe duda de que con Flappy Bird empieza (si no es que ya empezó) una oleada de juegos arcade con mecánica básica que, tanto por la simpleza y el nivel de dificultad que se le agrega, se vuelven altamente adictivos para los usuarios, desde los jugadores casuales hasta los más adeptos.

Far Flight es un juego en 3D con una vista en primera persona; eres una cosa avanzando en una habitación llena de columnas y tu misión es sortear esas columnas con la ayuda del mouse. A medida que avanzas, o por cada clic que das, el juego se va volviendo cada vez más rápido, lo que aumenta la dificultad pero a la vez obtienes más puntos por segundo.



El juego está programado en HTML5 por lo que corre en cualquier plataforma con un Navegador Web convencional (que lo soporte).



Prueba este adictivo juego y trata de conseguir el recorrido más largo que puedas

http://edwrodrig.github.io/farflight/

martes, 22 de abril de 2014

Libro gratuito (Formato Web) de JQUERY

JQuery es una librería de JavaScript; un conjunto de funciones que simplifican la interacción de documentos HTML, manipular elementos del árbol DOM, utilizar eventos, desarrollar animaciones web y facilita interactuar con AJAX (Lo que ha sido una Odisea para los desarrolladores web).
Su principal BOM es que conjunta en una función lo que en JavaScript "tradicional" ocuparía varias líneas de código. Además de ser de código libre ligado a dos licencias (Licencia MIT y Licencia Pública General de GNU v2) lo cual le permite ser usado tanto en proyectos libres como privados y está presente, actualmente, en desarrollo para plataformas móviles.

El libro (En formato WEB/HTML) "Fundamentos de JQUERY" provee un resumen de esta biblioteca y da conocer las funciones, inicialmente básicas y después más específicas para desarrollar proyectos webs de apariencia profesional.

http://librojquery.com/

jueves, 10 de abril de 2014

Alicia en el País de las Maravillas [Cómic Gótico]

La obra de Lewis Carol, Las aventuras de Alicia en el País de las Maravillas es una obra de la literatura clásica, la cual poco saben no es precisamente una historia dirigida a un público infantil e inmaduro; aunque no presenta mensajes "subliminales" o que afecten al lector, simplemente no es entendible en su totalidad sin cierto grado de perspicacia.

Lewis Carroll presenta un mundo que, posiblemente, a primera vista luzca infantil e inocente con personajes locos y situaciones ridículas sin sentido; sin embargo, lo que un lector "experimentado" podría notar es algo muy diferente: una historia que habla del subconsciente, un mundo que en ocasiones puede parecer desesperante y situaciones sutilmente tétricas.
Alicia se pregunta, en primera, las opiniones que la sociedad podría argumentar en las situaciones que ella presenta, se llega a cuestionar a sí misma sobre su personalidad y hasta se hacen comentarios a ciertos personajes que se presentan con aire tétrico (ya sea debido a la naturaleza del personaje a quien se dirige o a la situación que se presenta).



David Chauvel y Xavier Collette nos presentan un cómic con estilo gótico que nos brinda visualmente lo que la lectura original nos ofrece de manera sutil para el lector poco analista. Con los diálogos de la traducción original al castellano (no se ha cambiado el significado literal de ninguna frase) e ilustraciones con un exquisito toque tétrico (No macabro, enfermizo ni nada que rija algún tabú), matices oscuros y expresiones (un tanto) alterantes, este cómic es un verdadero tributo al mensaje real de la historia.
Les dejo el enlace de descarga del Cómic más abajo:



Enlace de Descarga

DATO DE TRIVIA: Se ha extendido varios rumores, mitos y teorías en base a varios aspectos de la historia de Alicia en el País de las Maravillas, especialmente que Lewis Carroll presentaba al lector la acción de consumir drogas debido a que Alicia cambia de tamaño al comer pedazos de hongos. La realidad es que se sabe que Lewis Carroll fue diagnosticado médicamente de sufrir un "extraño tipo de epilépsia", área médica que en ése tiempo no había sido muy tratada; en base a ésto y a biografías del autor se sabe entonces que el tipo de enfermedad producía convulsiones, movimientos clónicos y otros síntomas los cuales pueden producir como consecuencia los síndromes de Microscopía y Macroscopía. Éstos producen en quien los padece una alteración en la percepción: ver objetos y personas de un tamaño mayor (más grandes) o menor (pequeños) tanto de manera total o parcial (no respetando las proporciones del cuerpo: brazos más largos pero tronco normal, por ejemplo) e inclusive una percepción del tiempo distinta, pudiendo ver como si todo pasara en cámara lenta, inclusive sus movimientos. Debido a que tales síntomas se plasmaron durante la aventura de Alicia, también se le da el nombre de "Síndrome de Alicia en el país de las maravillas" a éste trastorno.
Un enlace con información más específica de estos trastornos: Síndrome de Alicia en el país de las maravillas

lunes, 6 de enero de 2014

Configuración FTP del KeyLogger Ardamax

Un keylogger es un tipo de software o dispositivo hardware que se encarga de registrar las pulsaciones del teclado en una computadora y almacenar el registro en la misma o enviar la información a través de Internet.
Actualmente su mayor uso es el robo de información de un usuario como cuentas de correo, contraseñas, cuentas bancarias, etc; aunque su fin inicial fue el tener un registro de lo realizado en una computadora (una especie de respaldo de información escrita, páginas web visitadas y demás).

Ardamax Keylogger es uno de los millones de programas que realizan esta función, y personalmente lo considero muy útil ya que permite enviar la información recolectada mediante internet por el protocolo FTP y por correo electrónico; aunque en ambos casos se requiere tener un servidor de cada tipo, y por correo electrónico no me refiero a sólo una cuenta de correo, sino tener una cuenta de administrador. Como es más sencillo conseguir un servicio FTP (gratuito) que tener un servidor SMTP (correo electrónico), enseñaré los sencillo pasos para usar el Ardamax Keylogger mediante FTP.

Primero a descargarlo, aquí les tengo dos enlaces de descarga directa:

Descarga desde google drive
Descarga desde webcindario

Para instalarlo hay que ejecutar el archivo setup_akl.exe (No hay contraseña para descomprimir el archivo).

NOTA: Tengo que dejar en claro que estos tipos de archivos son muy bien analizados por los antivirus, así que si al descargarlo les manda una alerta, desactívenlo por unos momentos; una vez descargado lo puede volver a activar (aconsejo poner la carpeta donde alojen el instalador en la lista de excepciones de su antivirus, igualmente pongan en excepciones la carpeta en donde se instaló el keylogger: C:\ProgramData\REF por defecto para Windows 7).

La instalación es sencilla, una vez instalado ejecuten el programa:


En la barra de tareas les debe de aparecer un ícono como este:


Para lo que sigue, necesitamos tener un alojamiento web con servicio FTP; repito que eso es muy se encuentra muy sencillo en internet. Yo uso webcindario.com, así que si pueden háganse una cuenta allí y, una vez creada, crean un "nuevo espacio". En mi caso tengo el espacio unrinconenlaweb.webcindario.com. O si no, sólo busquen en Google "alojamiento web ftp".

Ahora bien, regresemos al keylogger instalado en la computadora; en el ícono de la barra de tareas se da clic DERECHO para que aparezca un submenú y se selecciona "Options":



En la ventana emergente tenemos un menú desplegable a la izquierda, desplegamos (damos clic) "Delivery" y de las opciones damos clic en FTP:


Allí configuramos a qué dirección web nos enviará los registros que capture:

-> FTP host es la dirección web de nuestro servidor FTP. Por ejemplo, en mi caso es "ftp.webcindario.com" (Sin el http ni nada más).
-> Username es el usuario del servicio, comúnmente es el nombre de tu cuenta de usuario; en el caso de webcindario el "username" es también el nombre del dominio, o sea "unrinconenlaweb".
-> Password es la contraseña del usuario; en el caso de webcindario es la misma contraseña que la de mi cuenta.
-> Remote folder es la carpeta en donde se enviarán los registros; por ejemplo, en webcindario al conectarse por FTP primero tengo que entrar a la carpeta "web" y después a una de mis carpetas personales, tengo una carpeta llamada "logs" y allí quiero almacenar mis registros, así pues mi "remote folder" sería "web/logs".
-> Port es el puerto por el cual se conecta el keylogger, el 21 es el estándar y recomiendo dejarlo así. Mi configuración queda:


Le damos clic en el botón "test" para ver si se puede realizar el envío de los archivos:


Aquí se indica que la conexión fue exitosa, incluso se me envió un archivo de prueba en la carpeta de mi servidor FTP:


Hasta aquí sólo se configuró la conexión por FTP y sólo hace falta configurar el envío de los registros. Para ello, en el menú derecho entramos en la opción "Control" y configuramos las siguientes opciones:


-> Send Logs every: marcamos esta casilla para que se envíen los registros a nuestro alojamiento web. A la derecha de esta opción se elije cada cuánto se envían los registros; esta opción es personal, cada quién sabrá cuánto es necesario recibir los registros (Una computadora con poco uso tal vez necesite enviar cada hora, una con mucho uso cada 5 minutos).
->Delivery Method: por defecto se tiene marcado Email, se desmarca Email y se marca FTP, aquí se está indicado por qué medio enviará los registros.
-> Log Format: es el formato con el cual se enviarán y recibirán los registros, el formato HTML es el más cómodo.
-> Include: indicamos qué queremos que se registre, por defecto se tiene todo seleccionado (pulsaciones de teclas, registros web, registros de chat, registros de aplicaciones abiertas, capturas de pantalla, imágenes de webcam y registros de micrófonos).
-> Send Only if log size exceeds: aquí es si queremos checar el tamaño de los archivos antes en enviar, si los archivos pesan igual o más que el la cantidad marcada entonces se enviarán; esta opción es sólo por si queremos evitar recibir archivos vacíos (recomiendo marcarla y dejarla con esa con la cantidad defecto).
-> Clear logs after successful sendig: "limpiar registros después de enviar", se marca si queremos que, una vez enviados unos archivos, éstos se borren de la computadora con el keylogger. Sirve para no llenar de "basura" la computadora o para que no sea encontrado más sencillamente el keylogger.

Damos clic en ACEPTAR y listo, se tiene el keylogger configurado y funcionando.


Aquí se ven los registros que recibí mientras realizaba este artículo (De mi propia computadora, claro).


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