tag:blogger.com,1999:blog-62523136760336312732024-03-19T11:44:21.430-07:00Rincon knd144knd144http://www.blogger.com/profile/02561972998748075660noreply@blogger.comBlogger82125tag:blogger.com,1999:blog-6252313676033631273.post-75571964333846127732017-09-22T12:55:00.002-07:002017-09-22T13:01:34.054-07:00[JavaScript] Usar checkbox en Kendo Grid con valores booleanosIntroducción<br />
<br />
El grid de KendoUI soporta datos del tipo booleano, pero su funcionalidad de edición para el usuario se representa en forma de un campo "select" (DropDown) con las opciones de "verdadero" y "falso". De forma nativa no permite poner un "CheckBox" que realice esta función y si se quiere hacer uso del template para poner el "CheckBox" éste no actualiza por sí solo la información del campo en el grid.<br />
Para términos de la explicación<br />
<br />
En los ejemplos de esta explicación se tiene el siguiente ambiente:<br />
<br />
<ul>
<li>Un grid con ID: "div-monitor-data-grid"</li>
<li>El grid tiene como "DataSource" un arreglo llamado "resultadoFlujo".</li>
<li>Los objetos del DataSource tienen un atributo llamado "Seleccionada", el cual es el "booleano" que se quiere manipular con el checkbox; éste deberá ser sustituido por el atributo que se desea manipular en sus propios casos.</li>
<li>Los objetos del DataSource tienen un atributo que les sirve de llave primaria: IdDetalle; éste deberá ser reemplazado por el o los atributos que identifiquen de manera única los objetos en sus propios casos.</li>
</ul>
<br />
Solución<br />
<br />
Debido a que la única forma (Hasta ahora conocida) de agregar un campo tipo CheckBox a un GRID en kendo es mediante del Template se hará uso de éste, poniendo una condición para que cuando el campo tenga el valor "true" el input esté seleccionado y deseleccionado para el caso contrario:<br />
<br />
<div class="kndcode">
{<br />
title: "Seleccionar",<br />
field: "Seleccionada",<br />
template: "#if(Seleccionada){#<div class='text-center'><input type='checkbox' class='chkSeleccionada' checked/></div>#}else{#<div class='text-center'><input type='checkbox' class='chkSeleccionada'/></div>#}#",<br />
},</div>
<br />
Como se aprecia, el checkbox contiene una clase (En este caso: "chkSeleccionada"), la cual servirá para capturar el evento de éste al ser "clickeado" por el usuario; ésta función se "amarrará" al grid donde se encuentre el input, además de que se realizará en una función "anónima" para que se ejecute en cada momento:<br />
<br />
<div class="kndcode">
$(function () {<br />
$('#id-del-grid').on('click', '.chkSeleccionada', function () { //Como se ve, el evento se da a la clase "chkSeleccionada"<br />
.......<br />
});<br />
});</div>
<br />
La lógica dentro del evento debe ser la siguiente:<br />
Obtener el valor del checkbox (Si está o no seleccionado).<br />
Recuperar el objeto del grid del cual obtendremos el objeto de la tupla que corresponde al checkbox clickeado.<br />
Recorremos la lista que funge de "DataSource" para el "Grid". En cada iteración se compara con el objeto de la tupla seleccionada; y de ser ésta la tupla, al objeto del arreglo se le da el valor del checkbox (True o false).<br />
Se refresca el grid al terminar de iterar.<br />
El código final de ésta función quedaría así:<br />
<br />
<div class="kndcode">
$(function () {<br />
$('#div-monitor-data-grid').on('click', '.chkSeleccionada', function () {<br />
var checked = $(this).is(':checked'); //Se obtiene el valor del checkbox<br />
var grid = $('#div-monitor-data-grid').data().kendoGrid; //Se obtiene el objeto del grid<br />
var dataItem = grid.dataItem($(this).closest('tr')); //Se obtiene la tupla que corresponde al checkbox<br />
for (var i = 0; i < vm.resultadoFlujo.length; i++)<br />
{ //Se itera el datasource<br />
if (vm.resultadoFlujo[i].IdDetalle == dataItem.IdDetalle)<br />
{ //Se pregunta si es el mismo objeto del checkbox<br />
vm.resultadoFlujo[i].Seleccionada = checked; //Se edita el valor del atributo por el del checkbox<br />
}<br />
}<br />
grid.dataSource.read(); // Se vuelve a "leer" el dataSource del grid.<br />
grid.refresh(); //Se refresca el GRID.<br />
});<br />
});
</div>
knd144http://www.blogger.com/profile/02561972998748075660noreply@blogger.com0tag:blogger.com,1999:blog-6252313676033631273.post-55769908370424897652017-01-03T21:20:00.000-08:002017-01-04T07:18:24.686-08:00[JavaScript][Jquery] Convertir todas las cadenas de un objeto (O cualquier variable) a mayúsculasComo anécdota personal, en mi trabajo se hacen llamados a servicios web desde JavaScript enviando objetos con los cuales se interactuará en la base de datos; la norma es que toda cadena que se envía a la base de datos debe de estar formateada a mayúsculas, y es un gran lío pasar atributo por atributo (o campo por campo) a mayúsculas de forma manual.<br />
Ante ésto me di la ligera tarea de crear una función que usando la recursividad, y testeando el tipo de datos con el cual trabaja en cada iteración, recorra todos los elementos del objeto y, cada cadena con la que se interactua es convertida a mayúsculas.<br />
Ahora les comparto tal función para su uso personal, aunque eso sí, se ha de incluir la librería de JQuery al sitio donde trabajan, debido a que se hace uso de su función "type()" para saber con qué tipo de dato se está trabajando.<br />
<br />
Les presento el código:<br />
<br />
<div class="kndcode">
<br />
<br />
<b>function objectUpperCase(objeto)</b><br />
<b>{</b><br />
<b><span class="Apple-tab-span" style="white-space: pre;"> </span>if(jQuery.type(objeto) == "string")</b><br />
<b><span class="Apple-tab-span" style="white-space: pre;"> </span>{</b><br />
<b><span class="Apple-tab-span" style="white-space: pre;"> </span>return objeto.toUpperCase();</b><br />
<b><span class="Apple-tab-span" style="white-space: pre;"> </span>}</b><br />
<b><span class="Apple-tab-span" style="white-space: pre;"> </span>if(jQuery.type( objeto ) == "array")</b><br />
<b><span class="Apple-tab-span" style="white-space: pre;"> </span>{</b><br />
<b><span class="Apple-tab-span" style="white-space: pre;"> </span>var arreglo = [];</b><br />
<b><span class="Apple-tab-span" style="white-space: pre;"> </span>for(var i=0;i<objeto.length;i++)</b><br />
<b><span class="Apple-tab-span" style="white-space: pre;"> </span>{</b><br />
<b><span class="Apple-tab-span" style="white-space: pre;"> </span>arreglo.push(objectUpperCase(objeto[i]));</b><br />
<b><span class="Apple-tab-span" style="white-space: pre;"> </span>}</b><br />
<b><span class="Apple-tab-span" style="white-space: pre;"> </span>return arreglo;</b><br />
<b><span class="Apple-tab-span" style="white-space: pre;"> </span>}</b><br />
<b><span class="Apple-tab-span" style="white-space: pre;"> </span>if(jQuery.type( objeto )=="object" || jQuery.type( objeto )=="function")</b><br />
<b><span class="Apple-tab-span" style="white-space: pre;"> </span>{</b><br />
<b><span class="Apple-tab-span" style="white-space: pre;"> </span>for (var atributo in objeto) {</b><br />
<b><span class="Apple-tab-span" style="white-space: pre;"> </span>objeto[atributo] = objectUpperCase(objeto[atributo]);</b><br />
<b><span class="Apple-tab-span" style="white-space: pre;"> </span>}</b><br />
<b><span class="Apple-tab-span" style="white-space: pre;"> </span>}</b><br />
<b><span class="Apple-tab-span" style="white-space: pre;"> </span>return objeto;</b><br />
<b>}
</b><br />
<br /></div>
<br />
<br />
Como mencioné anteriormente, se testea el tipo de dato con el que se trabaja y dependiendo de ésto (cadena, array, objeto, función...) se hace uso de la recursividad para interactuar con sus elementos (en caso de que sea un objeto o arreglo), se convierte a mayúsculas (En caso de que sea directamente una cadena) o se ignora en cualquier caso que no requiera interacción. De esta forma se garantiza que aún usando objeto "complejos", todos las cadenas que se manejen serán convertidas a mayúsculas estén en la profundidad que estén.<br />
<br />
La única desventaja de este método es la recursividad misma en JavaScript, debido a que los navegadores limitan el uso de memoria así como de llamadas recursivas de forma interna. Lo que nos limita a una profundidad no mayor de 8 o 10 (dependiendo del navegador a utilizar).knd144http://www.blogger.com/profile/02561972998748075660noreply@blogger.com0tag:blogger.com,1999:blog-6252313676033631273.post-13119885411927695742017-01-03T20:43:00.000-08:002017-01-17T10:32:09.950-08:00[JavaScript] Llenar cadena de ceros (o cualquier caracter) a la izquierdaEn ocasiones se requiere formatear a una cadena con una longitud estática, rellenando con un carácter (Comúnmente ceros 0s) a la izquierda las posiciones faltantes; por ejemplo, si se requiere tener una cadena de longitud 6 y se tiene la cadena "123", será necesario convertirla a "000123".<br />
<br />
JavaScript no cuenta con una función nativa para "rellenar" una cadena con un carácter específico para que ésta tenga una longitud determinada; y las mayorías de las soluciones a este problema consiste en bucles y condicionales que se extienden más allá de la simpleza del problema. La solución que propongo en esta ocasión consiste en un método que genera una cadena tal que, al concatenarla con el texto que ya se tiene, se obtenga un "String" con la longitud determinada.<br />
<br />
La solución sería la siguiente:<br />
<br />
<div class="kndcode">
<br />
<b>caracter.repeat(longitud- String(cadena).length).concat(cadena);</b>
<br />
<br /></div>
<br />
<br />
O, expresado a una función:<br />
<br />
<div class="kndcode">
<br />
<b>function llenarCadena(cadena,longitud,caracter)</b><br />
<b>{</b><br />
<b> //Siendo "cadena" el texto a completar</b><br />
<b> //"longitud" el largo de la cadena deseada</b><br />
<b> //"caracter" el símbolo con el cual se llenarán los espacios faltantes</b><br />
<b><span class="Apple-tab-span" style="white-space: pre;"> </span>return caracter.repeat(longitud- String(cadena).length).concat(cadena);</b><br />
<b>}
</b>
<br />
<br /></div>
<br />
<br />
La lógica es sencilla; como expliqué arriba, consiste en crear una cadena de caracteres (<b><span style="font-size: x-small;">caracter.repeat</span></b>) con la longitud necesaria (<b><span style="font-size: x-small;">longitud- String(cadena).length</span></b>), tal que al concatenarla con la cadena original, nos dé un texto con la longitud deseada.<br />
En pocas palabras, usando el ejemplo inicial; la parte del código "caracter.repeat(longitud- String(cadena).length)" generará la cadena "000" el cual, al concatenarse con la cadena original, dará un texto de longitud 6.<br />
<br />
Pues bien, sería todo. Espero les sea de utilidadknd144http://www.blogger.com/profile/02561972998748075660noreply@blogger.com0tag:blogger.com,1999:blog-6252313676033631273.post-41191037145968907612016-05-22T10:28:00.000-07:002016-05-22T15:16:01.720-07:00Agregar AdFly a los enlaces de tu web [y monetizarlos]<a href="https://adf.ly/" target="_blank">AdFly</a> es esencialmente un <a href="https://es.wikipedia.org/wiki/Acortador_de_URL" target="_blank">acortador de URL</a> cuyo funcionamiento es simple: pasa por una página intermedia (Del dominio de AdFly) antes de redirigir a la página original, pero que da la opción de crearse una cuenta y obtener dinero cada vez que alguien utiliza uno de tus enlaces personalizados.<br />
<div>
La forma más sencilla de hacer esto es <a href="https://adf.ly/#join" target="_blank">crear una cuenta</a> (Obviamente) y usar la herramienta de "acortar", la cual siempre se situará en la parte superior de la página de AdFly; pegas en "link" que quieres personalizar y le das en "Acortar", se te generará el nuevo enlace el cual podrás colocar en tu página y, al ser usado, se te abonará una pequeña cantidad de dinero.</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAMzJ_KeTpyc7EyqXqhceh-1BH8KesuMvsNlCC8-_tn9mRNMEcS31G2Q1KyBPdmDMi7ev1_Uw1hXqWV8g_UFZMwufGzybBoY2OlW3W1JpXw88mdbF4qSelPeUpXi27u84hG2JG9nu6bfTA/s1600/acortar.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="93" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAMzJ_KeTpyc7EyqXqhceh-1BH8KesuMvsNlCC8-_tn9mRNMEcS31G2Q1KyBPdmDMi7ev1_Uw1hXqWV8g_UFZMwufGzybBoY2OlW3W1JpXw88mdbF4qSelPeUpXi27u84hG2JG9nu6bfTA/s640/acortar.PNG" width="640" /></a></div>
<div>
<br /></div>
<div>
Eso implicaría que a cada enlace que quieras utilizar para obtener ganancias de él tendrás que hacerlo pasar por este proceso; más tenemos la opción de afectar, automáticamente, a todos los enlaces de nuestra página, a los enlaces en nuestra página con excepción de ciertos dominios o sólo a los enlaces de nuestra página que contengan algunos dominios determinados.</div>
<div>
<br /></div>
<div>
Para realizar ello, una vez teniendo creada la cuenta en <a href="http://adf.ly/" target="_blank">AdFly</a> (Inicialmente no es necesario introducir datos bancarios, sino hasta el momento de cobrar las ganancias) ir a la sección de <b>Herramientas:</b> </div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiKZzkDs4lPod_FVJZ-UwmeOsnj6EvXIOMB3YlIiXaCOnuEcSv2JBBn3d-TKRt5QRNUewkySNxe3qOXAUFLdf7sSrjoPginktbTtgxbmwbpGAX50id1kYZ3EBzWTeXlLDMPD_OnwG5Pw3h/s1600/herramientas.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="184" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiKZzkDs4lPod_FVJZ-UwmeOsnj6EvXIOMB3YlIiXaCOnuEcSv2JBBn3d-TKRt5QRNUewkySNxe3qOXAUFLdf7sSrjoPginktbTtgxbmwbpGAX50id1kYZ3EBzWTeXlLDMPD_OnwG5Pw3h/s640/herramientas.PNG" width="640" /></a></div>
<div>
</div>
<div>
Y, en el panel izquierdo, elegir la opción <b>Documentación de la API,</b> se nos mostrará la información que utilizaremos para implementar AdFly en nuestra web, más precisamente el "ID de usuario" y la "llave pública de API"; únicamente necesitaremos el "ID de Usuario":</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7fJjzYSUnEVvLbNTasD8al9C9iTrKj5_LuUsXX6IT6ALFsdlhcfOjzrtznb2cfUP7bewg9qrMZF35yuxZMKVL2ViM3dDs7jZ2bU2pv3ZOLhdN-c8Onr4mSWBscSVoJ78ibNpwPEgYQgwO/s1600/Id.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="220" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7fJjzYSUnEVvLbNTasD8al9C9iTrKj5_LuUsXX6IT6ALFsdlhcfOjzrtznb2cfUP7bewg9qrMZF35yuxZMKVL2ViM3dDs7jZ2bU2pv3ZOLhdN-c8Onr4mSWBscSVoJ78ibNpwPEgYQgwO/s640/Id.PNG" width="640" /></a></div>
<div>
<br /></div>
<div>
Ahora procederemos a insertar un código en JavaScript en nuestra web, preferentemente entre las etiquetas "<head>" y "</head>".</div>
<div>
Para que todos los enlaces se vean afectados por el Script solo es cuestión de poner el siguiente código:</div>
<div>
<br /></div>
<div class="kndcode">
<div>
<div>
<script type='text/javascript'></div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>var adfly_id = <b>{Tu ID de usuario}</b>; </div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>var adfly_advert = 'int'; </div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>var popunder = false; </div>
<div>
</script></div>
<div>
<script src='https://cdn.adf.ly/js/link-converter.js'/> </div>
</div>
</div>
<div>
<br /></div>
<div>
Sólo es cuestión de reemplazar el valor "<b>{Tu ID de usuario}</b>" por el Id que se te mostró en la opción "<b>Documentación de la API</b>"; ahora bien, para que la API no afecte a los enlaces de determinado dominio (Como el de nuestra propia web) se debe agregar una variable extra: "<i>exclude_domains</i>" la cual obtendrá una lista de los dominios que deben ser excluídos, por ejemplo: ['blogspot','youtube','plus.google','youtu.be','wikimapia.org'].</div>
<div>
Quedando el ejemplo de la siguiente forma:</div>
<div>
<br /></div>
<div class="kndcode">
<div>
<div>
<script type='text/javascript'></div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>var adfly_id =<b> {Tu ID de usuario}</b>; </div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>var adfly_advert = 'int'; </div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>var popunder = false; </div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>var exclude_domains = ['blogspot','youtube','plus.google','youtu.be','wikimapia.org']; </div>
<div>
</script></div>
<div>
<script src='https://cdn.adf.ly/js/link-converter.js'/> </div>
</div>
</div>
<div>
<br /></div>
<div>
O bien, si se quiere hacer lo contrario: que el <i>Script</i> sólo afecte a los enlaces de cierto dominio, en lugar de agregar la variable "<i>exclude_domains</i>" se agrega una simplemente llamada "<i>domains</i>" con la lista de los dominios que se quiere que afecte; por ejemplo: ['depositfiles.com','rapidshare.com','vip-file.com'].</div>
<div>
Quedando el ejemplo así:</div>
<div>
<br /></div>
<div class="kndcode">
<div>
<div>
<script type='text/javascript'></div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>var adfly_id = <b>{Tu ID de usuario};</b> </div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>var adfly_advert = 'int'; </div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>var popunder = false; </div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>var domains = ['depositfiles.com','rapidshare.com','vip-file.com'];</div>
<div>
</script></div>
<div>
<script src='https://cdn.adf.ly/js/link-converter.js'/> </div>
</div>
</div>
<div>
<br /></div>
<div>
Ahora sólo unas aclaraciones de configuración:</div>
<div>
<br /></div>
<div>
<ul>
<li>Se pueden agregar banner publicitarios extra nuestras páginas por medio del mismo script (Agrega la publicidad en la parte inferior de la pantalla y genera unas ganancias extra) cambiando el valor de "<i>var popunder = false;</i>" por "<i>var popunder = true;</i>".</li>
<li>También se puede cambiar el tipo de publicidad en el momento de redirección; originalmente se muestra en toda la pantalla, más se puede cambiar a que solo sea un simple banner (Menos intrusivo pero también menos dinero) cambiando la variable "<i>var adfly_advert = 'int';</i>" por el valor "banner".</li>
</ul>
<div>
<br /></div>
</div>
<div>
También en las opciones de cuenta:</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs6UWrSxfXfyjFwn-pqwTioUes1Cz25NBvmhvF4UCgrQVc_o56525UqdmpbasPRDwsdB8CR4iR2j6gXrYg6dG77uFMUOPHMrN7YSZHJ983EPDWarhlrLZ_fFzXRbG1SD6uijTy-_hHJshF/s1600/cuenta.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs6UWrSxfXfyjFwn-pqwTioUes1Cz25NBvmhvF4UCgrQVc_o56525UqdmpbasPRDwsdB8CR4iR2j6gXrYg6dG77uFMUOPHMrN7YSZHJ983EPDWarhlrLZ_fFzXRbG1SD6uijTy-_hHJshF/s400/cuenta.PNG" /></a></div>
<div>
<br /></div>
<div>
En la parte inferior se encuentran las siguientes tres opciones:</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ1aTtkaPfafIILd0dgnXxGd68wmOufCoV0ldTPTtJshu65YpsoIUQB4umBgGQ3rYBTMY_Jn7rjzgC3o0EWBVk9TE0vDyrvkIZXzUNOEk90seDk3wN6tv5549wNJUWQ6ZkVq5SdOLZMiFG/s1600/opciones.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="158" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ1aTtkaPfafIILd0dgnXxGd68wmOufCoV0ldTPTtJshu65YpsoIUQB4umBgGQ3rYBTMY_Jn7rjzgC3o0EWBVk9TE0vDyrvkIZXzUNOEk90seDk3wN6tv5549wNJUWQ6ZkVq5SdOLZMiFG/s400/opciones.PNG" width="400" /></a></div>
<div>
<br /></div>
<div>
<ul>
<li><b>Anuncios de aplicaciones móviles</b>: Habilita y deshabilita la publicidad en los dispositivos móviles al momento de redireccionar. Se puede deshabilitar para minimizar la cantidad de megas que se consumen.</li>
<li><b>"Skip Ad" adverts</b>: da la opción (De estar activada) de saltarse la publicidad en la redicción de forma instantánea; normalmente hay que esperar de 5 a 10 segundos para que el usuario tenga esa opción (Habilitarla puede minimizar los ingresos obtenidos).</li>
<li><b>Stop Adblock user</b>: De estar habilitada, la aplicación detecta si el navegador tiene el plugin "AdBlock" activado y, de estar activado, solicita al usuario desactivarlo para poder continuar a la página destino.</li>
</ul>
<div>
La cantidad de ganancias obtenidas varían dependiendo de la configuración que se tenga: una configuración más intrusiva (y agresiva) generará más ganancias, pero sin duda resultará más molesto para el usuario, cosa que bien hay que tener en cuenta</div>
</div>
knd144http://www.blogger.com/profile/02561972998748075660noreply@blogger.com0tag:blogger.com,1999:blog-6252313676033631273.post-65690842453742864682016-05-20T22:27:00.000-07:002018-01-03T14:57:05.467-08:00Obtener arreglo desde una lista de "CheckBox" con AngularJs<a href="https://angularjs.org/" rel="nofollow" target="_blank">AngularJs</a> es <a href="https://es.wikipedia.org/wiki/AngularJS" target="_blank">un Framework de JavaScript de código abierto</a>, mantenido por google. Su existencia es más que una simple curiosidad, ya que permite a desarrolladores crear aplicaciones web de "una sola página" (Single Page Applications). Este framework nos da la facilidad de manipular datos entre el "DOOM" de HTML y las variables en JavaScript sin tener que usar código intermedio para mantener este "puenteo" (binding) que siempre nos ha costado líneas de código adicionales y, sobre todo, extensas en nuestros ficheros de JavaScript.<br />
<div>
Aunque, por muy hermoso que sugiere ser la herramienta, siempre existirán casos específicos los cuales tendremos que resolver por nuestra propia cuenta; tal es el caso del tema que abordo en esta publicación y que, seguramente, te habrás topado (o te toparás): querer obtener un arreglo de una lista de "CheckBox", usando AngularJs claro.</div>
<div>
Aunque varios programadores han creado sus propias directivas que el framework permite configurar, la propuesta que presento se destaca por su simpleza en el código.</div>
<div>
<br /></div>
<div>
Para esta función me base en tres elementos técnicos:</div>
<div>
<br /></div>
<div>
<ol>
<li>AngularJs crea (Y elimina) elementos de JavaScript según sea necesario. Aunque no declares un objeto o atributo en el controlador de Angular, si lo utilizas en la vista HTML el framework automáticamente lo creará en cuando el usuario interactue con él.</li>
<li>En un campo de formulario declarado como <b>Requerido</b> (REQUIRED) no existen o se eliminan si éste no contiene un valor (O uno inválido).</li>
<li>La función "$.map" de JQuery que interactúa con varios items y devuelve un arreglo de éstos (En este caso, se interactúa con los atributos de un objeto).</li>
</ol>
<div>
<br /></div>
</div>
<div>
Primero vamos a preparar el archivo HTML de nuestro ejemplo:</div>
<div>
<br /></div>
<div class="kndcode">
<div>
<div>
<html ></div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span><head></div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span><meta charset="UTF-8"></div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span><title>Checkbox array list AngularJS</title></div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script></div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script></div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span><script src="controller.js"></script></div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span></head></div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span><body></div>
<div>
<br /></div>
</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span></body></div>
<div>
</html></div>
</div>
<div>
<br /></div>
<div>
Como ven, importo las librerías de <b>Jquery</b> y <b>Angular</b> (desde las apis de Google). Además de que haré uso de un archivo de JavaScript llamado <b>controller.js</b> el cual tendrá el código de AngularJs.</div>
<div>
<br /></div>
<div>
Justo en el archivo <b>controller.js</b> pondré el siguiente código de prueba:</div>
<div>
<br /></div>
<div>
<div class="kndcode">
<div>
var app = angular.module('myApp', []);</div>
<div>
app.controller('indexController', function($scope) {</div>
<div>
var vm = this;</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>vm.lista = [</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>{id:1,valor:"Juanito Alcachofa"},</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>{id:2,valor:"Padro Alcántara"},</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>{id:3,valor:"María Mercedez"},</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>{id:4,valor:"Romero Romerío"},</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>{id:5,valor:"Susana Nollores"},</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>];</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span></div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>vm.seleccionados={};</div>
<div>
});</div>
</div>
</div>
<div>
<br /></div>
<div>
Creo la App: "myApp", y en controller: "indexController".</div>
<div>
Aquí declaro dos variables que formarán parte del controller:</div>
<div>
<ul>
<li>vm.lista: nos servirá para desplegar la lista de los checkbox.</li>
<li>vm.seleccionados: Será el objeto donde se "almacenarán" los checkbox seleccionados y que, posteriormente, convertiremos en un arreglo.</li>
</ul>
<div>
Quiero aclarar que para cuestiones de espacio, declaro la variable "vm = this" para hacer referencia al "$scope" de una forma más corta, nada más.</div>
</div>
<div>
<br /></div>
<div>
Ahora, volveremos al archivo HTML para desplegar la Interfaz; dentro del "BODY":</div>
<div>
<br /></div>
<div class="kndcode">
<div>
<div>
<div ng-app="myApp" ng-controller="indexController as vm"></div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span><p ng-repeat="elemento in vm.lista" > </div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span><input type="checkbox" ng-model="vm.seleccionados[elemento.id]" required/>{{elemento.valor}} </div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span></p></div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span><p>{{vm.seleccionados}}</p></div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span><p><button ng-click="vm.obtenerSeleccionados();">Mostrar arreglo</button></p></div>
<div>
</div></div>
</div>
<div>
<br /></div>
</div>
<div>
<ul>
<li>Creo un "DIV" en el cual hago instancia de la app y del controller (A este último le vuelvo a dar un alias: vm, para hacer una referencia corta al controlador).</li>
<li>Creo una etiqueta "P" en la cual uso la directiva "ng-repeat" para iterar la lista que declaramos en el controlador "indexController. </li>
<li>Dentro de la etiqueta "P" creo los "checkbox"; note que en la directiva "ng-model" le indico "vm.seleccionados[elemento.id]" lo que quiere decir que al objeto "vm.seleccionados" le estaremos modificando el atributo dado por "elemento.id" el cual, aunque nosotros no lo hayamos declarado, el mismo AngularJs lo irá creando o destruyendo conforme se vaya necesitando.</li>
<li>Por último, observe que los "checkbox" tiene el atributo "required", o sea que la variable indicada por "ng-model" (En este caso "vm.seleccionados[elemento.id]") existirá sólo si se marca el imput.</li>
<li>Tenemos un párrafo con la directiva {{vm.selccionados}} únicamente con fines de "debugeo" en tiempo real.</li>
<li>Finalmente, tenemos un botón que, al ser presionado, llama a la función "obtenerSeleccionados()" la cual declararemos hasta el final.</li>
</ul>
<div>
¿Qué nos da eso como resultado? muy simple, el objeto "vm.seleccionado" se le añadirá el atributo "elemento.id" si y solo si se marca el checkbox correspondiente. Por ejemplo, si están seleccionados los checkbox cuyo Id sean "1,4 y 5" entonces el objeto vm.seleccionados tendrá los atributos: {1:true,4:true,5:true}. Se le asigna el valor "true" debido a que por defecto los "checkbox" trabajan con valores booleanos.</div>
</div>
<div>
<br /></div>
<div>
Por último, crearemos la función obtenerSeleccionados() la cual nos regresará el arreglo de con los valores de los "checkbox" seleccionados; la función contendrá lo siguiente:</div>
<div>
<br /></div>
<div class="kndcode">
<div>
<div>
return $.map(</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>vm.seleccionados, function (value, index) { if(value){ return [index];} }</div>
<div>
);</div>
</div>
<div>
<br /></div>
</div>
<br />
<div>
Como ven, es una simple línea que regresa el resultado de $.map; a esta función se le pasa como primer parámetro el objeto o arreglo que iterará, en el segundo parámetro se le pasa la función (con dos argumentos de valor e índice que representa cada elemento del objeto) la cual indicará qué nos regresará en cada índice del arreglo resultante, en este caso sólo nos regresará el índice (Que será el Id de cada elemento de la lista). Así pues, el archivo JS termina de la siguiente forma:</div>
<div>
<br /></div>
<div class="kndcode">
<div>
<div>
"use strict";</div>
<div>
<br /></div>
<div>
var app = angular.module('myApp', []);</div>
<div>
app.controller('indexController', function($scope) {</div>
<div>
var vm = this;</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>vm.lista = [</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>{id:1,valor:"Juanito Alcachofa"},</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>{id:2,valor:"Padro Alcántara"},</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>{id:3,valor:"María Mercedez"},</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>{id:4,valor:"Romero Romerío"},</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>{id:5,valor:"Susana Nollores"},</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>];</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span></div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>vm.seleccionados={};</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span></div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>vm.obtenerSeleccionados = function()</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>{</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>return $.map(</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>vm.seleccionados, function (value, index) { return [index]; }</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>);</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>}</div>
<div>
});</div>
</div>
<div>
<br /></div>
</div>
<br />
<div>
El ejemplo funcional sería el siguiente (La función "obtenerSeleccionados" fue modificada para que lanzara un "alert" con el contenido del arreglo resultante):</div>
<div>
<br /></div>
<div>
<a href="http://unrinconenlaweb.webcindario.com/checkbox_array_angularjs/index.html" target="_blank">Ejemplo</a></div>
<div>
<br /></div>
<div>
Y el enlace de descarga directa desde Google Drive</div>
<div>
<br /></div>
<div>
<a href="https://drive.google.com/open?id=0B6J7PWBjtBf7b0d4bGFnOGlXUms" target="_blank">DESCARGA</a></div>
knd144http://www.blogger.com/profile/02561972998748075660noreply@blogger.com0tag:blogger.com,1999:blog-6252313676033631273.post-7456389252948970392016-05-04T22:04:00.001-07:002016-05-04T22:05:32.276-07:00Consejos para escribir historias cortas [Por hobby]<span style="color: white;"><span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;">Hola.</span><br style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;" /><span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;">Justamente quiero compartir varios de los puntos que, de forma indirecta, me sirven de guía para cuando escribo algo. Hago énfasis en "historias cortas" debido a que para mí escribir una historia larga y completa es una hazaña que no me atrevo a realizar (No por que no pueda, sino por que soy muy "dejado" en proyectos a tan largo plazo); también el "mecanismo" y los puntos a considerar son muy diferentes. Y lo de "por hobby"... lo explicaré (tal vez) en algún punto más adelante.</span><br style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;" /><br style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;" /><span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;">Eso sí, antes de empezar con los consejos mencionaré dos normas </span><strong style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;">obligatorias</strong><span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;"> a la hora de escribir.</span><br style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;" /></span><br />
<ul class="bbc_list" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;">
<li><span style="color: white;">Correcta ortografía</span></li>
</ul>
<span style="color: white;"><br style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;" /><span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;">Una mala ortografía no es simplemente algo molesto e incorrecto, una incorrecta forma de escribir invalida cualquier cosa que expreses.Este punto no es nada difícil; usar un editor de texto como Word, o el mismo navegador "Google Chrome" ayudará a corregir los HORRORES de escritura. En cuestión de dudas o desconocimiento de la correcta escritura de una palabra (Por su significado, por parentesco a otras palabras o la razón que sea) tal vez les sea anticuado consultar un diccionario, pero al menos se tiene al "mágico" buscador Google, sólo escriben una palabra seguida de "significado" y les arrojará como resultado cientos de páginas que sirven como diccionarios. </span><br style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;" /></span><br />
<ul class="bbc_list" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;">
<li><span style="color: white;">Aprendan a redactar</span></li>
</ul>
<span style="color: white;"><br style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;" /><span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;">Otro punto fácil y necesario para que, aquello que desean expresar, sea entendido lo más fielmente en la medida de lo posible. La redacción es el acto de estructurar un texto de la forma adecuada, así sin más. No es lo mismo: </span></span><br />
<div class="quoteheader" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: x-small; font-weight: bold; line-height: 17.472px; padding: 0px 0.3em;">
<div class="topslice_quote">
<span style="color: white;">Citar</span></div>
</div>
<blockquote class="bbc_standard_quote" style="background-attachment: initial; background-clip: initial; background-image: url("../images/theme/quote.png"); background-origin: initial; background-position: 0.1em 0.1em; background-repeat: no-repeat; background-size: initial; border-bottom-color: rgb(214, 214, 214); border-bottom-style: solid; border-bottom-width: 2px; border-top-color: rgb(214, 214, 214); border-top-style: solid; border-top-width: 2px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: x-small; line-height: 1.4em; margin: 0.1em 0px 0.3em; overflow: auto; padding: 1.1em 1.4em;">
<span style="color: white;">Escribir algo que se este usando de mal los signos esos de puntuación o que no se usen.</span></blockquote>
<div class="quotefooter" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;">
<div class="botslice_quote">
</div>
</div>
<span style="color: white;"><span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;">Comparado con</span></span><br />
<div class="quoteheader" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: x-small; font-weight: bold; line-height: 17.472px; padding: 0px 0.3em;">
<div class="topslice_quote">
<span style="color: white;">Citar</span></div>
</div>
<blockquote class="bbc_standard_quote" style="background-attachment: initial; background-clip: initial; background-image: url("../images/theme/quote.png"); background-origin: initial; background-position: 0.1em 0.1em; background-repeat: no-repeat; background-size: initial; border-bottom-color: rgb(214, 214, 214); border-bottom-style: solid; border-bottom-width: 2px; border-top-color: rgb(214, 214, 214); border-top-style: solid; border-top-width: 2px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: x-small; line-height: 1.4em; margin: 0.1em 0px 0.3em; overflow: auto; padding: 1.1em 1.4em;">
<span style="color: white;">Un uso adecuado de los signos de puntuación y el manejo correcto de las palabras en el lugar y tiempo adecuado.</span></blockquote>
<div class="quotefooter" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;">
<div class="botslice_quote">
</div>
</div>
<span style="color: white;"><br style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;" /><span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;">De momento dejen a un lado si quieren parecer o no expertos, ésto es para lograr que los lectores entiendan el mensaje correcto y sigan el "hilo" de la historia. Manejar una redacción decente es muy sencillo: lean; claro, no basta con leer lo que cualquiera escribe: lean libros, revistas, blogs profesionales, lean las instrucciones de cómo programar su reloj despertador; en fin, lean textos escritos por personas que saben escribir (Dentro de la medida de la decencia, no es necesario leer a Cervantes o Edgar Allan Poe).</span></span><br />
<hr style="border: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; height: 1px; line-height: 17.472px;" />
<span style="color: white;"><br style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;" /><span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;">Ahora sí, mis consejos para escribir historias (Consejos aplicables para mí; cada quién, y a medida que se va desarrollando en la escritura, aplicará sus propias reglas):</span><br style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;" /></span><br />
<ul class="bbc_list" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;">
<li><span style="color: white;">Primero tengan la idea y después deseen escribirla</span></li>
</ul>
<span style="color: white;"><span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;">Un error es querer escribir y forzarse en captar cualquier idea para hacerlo; la llamada "inspiración" es necesaria para convencerte de lo que quieres escribir: si te esfuerzas por una idea ésta no terminará de convencerte y vagarás mucho en tu historia, la irás alterando y desviándote del punto de partida y tu historia no tendrá coherencia consigo misma. En cambio, tener una idea que te haya convencido te mantendrá enfocado en la esencia de tu historia y, aunque los detalles vayan cambiando conforme escribes, sabrás cómo quieres que fluya tu relato, el impacto que deseas tener e incluso el final. La inspiración puede ser cualquier cosa: Un personaje que te agradaría crear, una escena que te parecería interesante relatar y creas toda una historia que conlleve a esa escena, un sentimiento que te gustaría provocar en el lector, describir un lugar o una mitología que te llegó a la mente... cualquier cosa puede ser una inspiración, pero debe de surgir de forma natural.</span><br style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;" /></span><br />
<ul class="bbc_list" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;">
<li><span style="color: white;">Define los detalles sobre los cuales se fundamentará tu historia, la lógica del por qué empieza/ocurre</span></li>
</ul>
<span style="color: white;"><span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;">Éste es un punto muy importante y, para varios, muy tedioso. Se tiene ya la inspiración: se quiere describir una escena entre guerreros espaciales con rayos láser enfrentándose a dinosaurios con armadura de </span><em style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;">adamantium</em><span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;">. Bien pero ¿por qué ocurre ésto? Responder esta pregunta universal resolverá la lógica de tu relato, ya que tal vez en tu mente esa escena sea majestuosa, pero un lector que llegue sin preparación a tal idea que te inspiró podrá rechazarla al no encontrarle lógica, si no hay un reto, un castigo, un ser inteligente detrás de todo o algún capricho que justifique el suceso simplemente será una idea hecha a medias. Para resolver la pregunta se deberán plantear otras preguntas más "pequeñas" que fomenten la base de tu idea y, por desgracia, para cada idea se necesitan resolver diferentes preguntas:</span><br style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;" /><span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;">Si pretendes relatar las aventuras de un grupo de amigos en una mazmorra deberás responder preguntas como ¿por qué están allí? ¿por qué simplemente no salen de allí? ¿ocurrirá algo si fallan? ¿Qué es lo que aumenta la tensión como para que sea interesante el que estén en la mazmorra?</span><br style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;" /><span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;">Si pretendes narrar el cómo un cazador murió intentando atrapar a su presa las preguntas podrían ser ¿y por qué quiere cazar justamente a esa presa? ¿de qué forma explicarías la obsesión o necesidad selectiva sobre esa presa? ¿cómo justificarías que, aún pasados tantos sucesos, el cazador siga persiguiendo a la criatura? ¿qué ventajas y/o desventajas tiene cada quién y cómo las usarías para que el relato dure lo que dure y no termine en 5 minutos?</span><br style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;" /><span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;">En fin, el lector debe entender por qué está ocurriendo lo que ocurre y por qué no sucede lo contrario. Se pueden usar todo tipo de recursos: miedo, locura, orgullo, ambición, etc; siempre y cuando logres expresarlo durante tu relato y en el tiempo justo (Explicar que el cazador era un orgulloso hasta el final de la historia no es oportuno).</span><br style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;" /></span><br />
<ul class="bbc_list" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;">
<li><span style="color: white;">No uses palabras rebuscadas/rimbombante/poco conocidas</span></li>
</ul>
<span style="color: white;"><span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;">Principalmente debes de entender que, en esta situación, no eres un maestro del idioma y tampoco un escritor profesional, mantenerse al usar palabras simples y que la mayoría entienda es mejor que querer adornar los textos con palabras exageradas. No solo puede limitar la cantidad de gente que lea el texto, sino que algo tan rebuscado llega a perder el sentido y resulta más complicado de usar: Las palabras "elegantes" llegan a ser muy específicas y un mal uso de ellas (por más mínimo que sea) puede deformar el significado del texto o, peor aún, enfurecer al lector cuando éste entienda, en primera instancia, una idea diferente a la que deba.</span><br style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;" /></span><br />
<ul class="bbc_list" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;">
<li><span style="color: white;">Evita repetir la misma palabra de manera consecutiva</span></li>
</ul>
<span style="color: white;"><span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;">Una norma muy recurrente en la escritura: en la medida de lo posible no repitas la misma palabra de manera consecutiva dentro de una oración. No es algo muy sencillo, claro está, pero por algún motivo cuando se lee un texto y una palabra se menciona muy seguido resulta de gran disgusto para el lector, más aún si el texto se narra el voz alta. Una guía general propone separar una misma palabra por lo menos cada tercera oración; claro está, no siempre es posible hacer ésto, pero en la mayoría de los casos ésta regla se puede cumplir incluso con una separación de un párrafo o más. </span><br style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;" /><span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;">No todas las palabras aplican a esta norma, sino las más importantes y que destacan (Artículos, monosílabas y demás quedan descartados).</span><br style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;" /><span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;">Pondré de ejemplo éste mismo texto, las palabras que destacan son:</span><br style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;" /><span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;">Idea, texto, historia y (para este punto) palabra.</span><br style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;" /><span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;">La palabra "PALABRA" es difícil de sustituir por un sinónimo que aplique, así que lo que opté fue tratar de separar una de otra cambiando la estructura de las oraciones.</span><br style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;" /><span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;">Para "texto" e "historia" busqué otras palabras y rotarlas, como "relato" y "escrito".</span><br style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;" /><span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;">En un punto la palabra "inspiración" me sirvió como sustituto de "idea".</span><br style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;" /></span><br />
<ul class="bbc_list" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;">
<li><span style="color: white;">Define tus recursos literarios y estandarízalos</span></li>
</ul>
<span style="color: white;"><span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;">Algo muy importante para que el lector sepa qué está leyendo. Los recursos se usan para hacer énfasis sobre algo y que se sepa sobre qué se está enfatizando. Por ejemplo, los diálogos son muy importantes en las historias. Cuando hablamos de "estandarizar" nos referimos a que durante todo el relato el mismo recursos se muestre igual y, del mismo modo, ningún otro recurso comparta la misma representación. Con el ejemplo de los diálogos, se acostumbran a que éstos empiecen en un renglón aparte y que se encuentren dentro de guiones medios ("-"). Para ejemplificar:</span></span><br />
<div class="quoteheader" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: x-small; font-weight: bold; line-height: 17.472px; padding: 0px 0.3em;">
<div class="topslice_quote">
<span style="color: white;">Citar</span></div>
</div>
<blockquote class="bbc_standard_quote" style="background-attachment: initial; background-clip: initial; background-image: url("../images/theme/quote.png"); background-origin: initial; background-position: 0.1em 0.1em; background-repeat: no-repeat; background-size: initial; border-bottom-color: rgb(214, 214, 214); border-bottom-style: solid; border-bottom-width: 2px; border-top-color: rgb(214, 214, 214); border-top-style: solid; border-top-width: 2px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: x-small; line-height: 1.4em; margin: 0.1em 0px 0.3em; overflow: auto; padding: 1.1em 1.4em;">
<span style="color: white;">-Alto allí.- Gritó maría.<br />-No, para nada.- Pedro respondió y siguió corriendo; ante tal evento María no tuvo de otra más que decir:<br />-Ya verás cuando te atrape.-</span></blockquote>
<div class="quotefooter" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;">
<div class="botslice_quote">
</div>
</div>
<span style="color: white;"><br style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;" /><span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;">También se pueden usar los pensamientos de los personajes como recursos, y aquí podemos ser creativos. Hay quienes suelen usar las comillas dobles para dar a conocer ésto: </span></span><br />
<div class="quoteheader" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: x-small; font-weight: bold; line-height: 17.472px; padding: 0px 0.3em;">
<div class="topslice_quote">
<span style="color: white;">Citar</span></div>
</div>
<blockquote class="bbc_standard_quote" style="background-attachment: initial; background-clip: initial; background-image: url("../images/theme/quote.png"); background-origin: initial; background-position: 0.1em 0.1em; background-repeat: no-repeat; background-size: initial; border-bottom-color: rgb(214, 214, 214); border-bottom-style: solid; border-bottom-width: 2px; border-top-color: rgb(214, 214, 214); border-top-style: solid; border-top-width: 2px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: x-small; line-height: 1.4em; margin: 0.1em 0px 0.3em; overflow: auto; padding: 1.1em 1.4em;">
<span style="color: white;">Se encontraba en un pasillo largo y escaso de luz, "Si no hubiera visto tantas películas de terror ésto no me parecería tal difícil" fue lo que pensó nuestro personaje al empezar a avanzar.</span></blockquote>
<div class="quotefooter" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;">
<div class="botslice_quote">
</div>
</div>
<span style="color: white;"><span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;">Como ven, no sólo se encerró el pensamiento del personaje entre comillas dobles (" " ), sino que también el mismo texto explicó que se trataba de un pensamiento; ésto es útil para ir "domesticando" al lector que debe de aprender que tal recurso se verá representado de ésta forma, además de que se llegan a usar las comillas dobles para otros recursos literarios (Como dar un sentido figurado a las palabras). </span><br style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;" /><span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;">Los sonidos/onomatopeyas, descripciones de las sensaciones, citas o referencias a otras obras pueden ser un recurso literario y el escritor es libre de representarlos como guste.</span><br style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;" /><span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;">Un ejemplo real fue de "Cassandra Clare" quien en los primeros libros de su serie "Cazadores de sombras" hacía uso de estilos de pintores y músicos para describir las escenas, tales comparaciones las solía poner entre comillas dobles "" o en letras </span><em style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;">cursivas</em><span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;"> para educar al lector de que tales expresiones no son literales sino que subjetivas a lo que transmitían esas obras.</span><br style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;" /><span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;"> </span></span><br />
<ul class="bbc_list" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;">
<li><span style="color: white;">Revisa tu texto</span></li>
</ul>
<span style="color: white;"><span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;">Muy importante, una vez terminada tu historia léela no una ni dos ni tres veces: las veces que sean necesarias hasta que ya no encuentres un solo error. Además de que no es recomendable leerla únicamente al terminar de escribirla, lo correcto es finalizarla, leer un par de veces, hacer las correcciones, esperar un par de horas y volver a leer. Ésto debido a que, mientras escribimos solemos retener la historia y los detalles en mente así que, a la hora de leer de forma inmediata, seguimos teniendo tales imágenes y sentimos que la idea se expresa correctamente (Así como pasamos por alto algunas expresiones que damos por sentado están bien escritas). Al dejar pasar un tiempo olvidamos los detalles importantes, así que al volver a leer estaremos reconstruyendo la historia conforme a lo que leemos y no a lo que creemos que escribimos. (Por ejemplo, doy por sentado que hay varios errores de expresión en este artículo y, debido a que es media noche, no lo leeré y tendrán que leer un párrafo varias veces para entender qué quería decir </span><img alt=":P" class="smiley" src="https://foro.minecrafteo.es/Smileys/akyhne/tongue.gif" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px; vertical-align: bottom;" title="Lengua" /><span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;"> ).</span><br style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;" /></span><br />
<ul class="bbc_list" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;">
<li><span style="color: white;">Respeten la naturaleza de su historia y sus personajes</span></li>
</ul>
<span style="color: white;"><span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;">Un error muy común es tener una buena idea, empezar a plasmarla en escrito y justo a medio relato querer cambiar los acontecimiento simplemente por que parece más "cool" algún otro final. Debido a que has estado encaminando la historia, los personajes, su carácter y las decisiones a una vertiente obvia, el cambiar por completo el rumbo llega a dar esa sensación de "falsedad" o incoherencia que se da en varias publicaciones incluso profesionales.</span><br style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;" /><span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;">Si un personaje está destinado a morir, éste deberá morir. Si el villano debe ganar, entonces ha de ganar; te has esforzado en que cada paso de tu historia desemboque en un punto y dejarlo a un lado es mandar todo tu trabajo a la basura y tener que rehacer todo de nuevo (Encaminar tu historia al nuevo rumbo y pensar en los detalles de la nueva vertiente); recuerden el tercer punto: "no eres un maestro del idioma y tampoco un escritor profesional".</span><br style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;" /></span><br />
<ul class="bbc_list" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;">
<li><span style="color: white;">Mantente en el formato de Historia corta</span></li>
</ul>
<span style="color: white;"><span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;">Una historia corta no es un relato: un relato contiene pocos detalles y es muy breve, generalmente conciso y no requiere muchas explicaciones del por qué ocurre cada evento; una historia, en cambio, requiere ser justificada en los eventos importantes (Por lo menos). Además de que requiere más recursos literarios. Pero recuerda también que es breve, de 3 a 20 páginas es un rango aceptable (Aunque realmente no hay un estándar de duración de una historia corta).</span><br style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;" /></span><br />
<ul class="bbc_list" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;">
<li><span style="color: white;">Lo haces por hobby</span></li>
</ul>
<span style="color: white;"><span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;">Esto implica dos cosas:</span></span><br />
<ul class="bbc_list" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px; list-style-type: decimal;">
<li><span style="color: white;">No te debes apegar a las tendencias actuales. Generalmente estamos rodeados de mercadotecnia "genérica" sobre los temas de moda, así que lo normal es que busquemos ideas sobre las cosas que están de moda: anime, vídeo-juegos, películas actuales, etc. Sin embargo, al ser temas forzados (primer punto) fallamos en el compromiso que tenemos con nuestra historia y terminamos haciendo un revoltijo de elementos ensamblados a la fuerza.</span></li>
<li><span style="color: white;">Haz un compromiso. Si es por hobby entonces te deberá agradar terminarla ¿no? Así que otro motivo de que sean historias cortas el tema de este escrito es que éstas se pueden escribir en menos de una semana; así, si te propones a escribir diario (de 30 minutos a 2 horas) la puedes escribir antes de que te fastidies y la dejes a la mitad.</span></li>
</ul>
<span style="color: white;"><br style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;" /></span><br />
<ul class="bbc_list" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;">
<li><span style="color: white;">Limita las descripciones</span></li>
</ul>
<span style="color: white;"><span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;">Algo que frecuentemente se busca es describir lo más posible un personaje, escena o escenario; sin embargo ésto es un arma de doble filo: si bien es cierto que una amplia descripción mejora el ambiente y entendimiento del tema, alargarse más de 4 o 6 líneas para describir un solo elemento resulta fastidioso. Hay varios recursos a los cuales pueden recurrir:</span><br style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;" /><span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;">1.- Usen generalizaciones y ambigüedades para describir: no es necesario detallar centímetro por centímetro una escena, escenario o personaje. Hacer un par de comentarios generales bien pueden servir para describir algo, si no es implícitamente necesario detallarlo. Por ejemplo:</span></span><br />
<div class="quoteheader" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: x-small; font-weight: bold; line-height: 17.472px; padding: 0px 0.3em;">
<div class="topslice_quote">
<span style="color: white;">Citar</span></div>
</div>
<blockquote class="bbc_standard_quote" style="background-attachment: initial; background-clip: initial; background-image: url("../images/theme/quote.png"); background-origin: initial; background-position: 0.1em 0.1em; background-repeat: no-repeat; background-size: initial; border-bottom-color: rgb(214, 214, 214); border-bottom-style: solid; border-bottom-width: 2px; border-top-color: rgb(214, 214, 214); border-top-style: solid; border-top-width: 2px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: x-small; line-height: 1.4em; margin: 0.1em 0px 0.3em; overflow: auto; padding: 1.1em 1.4em;">
<span style="color: white;">Una habitación polvorienta, descuidada y con varios muebles recostados sobre las paredes; la escasa luz le daba un ambiente lúgubre.</span></blockquote>
<div class="quotefooter" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;">
<div class="botslice_quote">
</div>
</div>
<span style="color: white;"><span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;">Aquí no detallé cómo era exactamente la habitación, si embargo el lector puede darse una buena idea de cómo es.</span><br style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;" /><br style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;" /><span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;">2.- Solo hacer énfasis en los detalles importantes. Complementando el punto anterior; sólo en aquellos casos que se requiere, hacer hincapié en los detalles que lo necesiten. Por ejemplo:</span></span><br />
<div class="quoteheader" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: x-small; font-weight: bold; line-height: 17.472px; padding: 0px 0.3em;">
<div class="topslice_quote">
<span style="color: white;">Citar</span></div>
</div>
<blockquote class="bbc_standard_quote" style="background-attachment: initial; background-clip: initial; background-image: url("../images/theme/quote.png"); background-origin: initial; background-position: 0.1em 0.1em; background-repeat: no-repeat; background-size: initial; border-bottom-color: rgb(214, 214, 214); border-bottom-style: solid; border-bottom-width: 2px; border-top-color: rgb(214, 214, 214); border-top-style: solid; border-top-width: 2px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: x-small; line-height: 1.4em; margin: 0.1em 0px 0.3em; overflow: auto; padding: 1.1em 1.4em;">
<span style="color: white;">Una habitación polvorienta, descuidada y con varios muebles recostados sobre las paredes, una mesa redonda, algo carcomida por el tiempo, reposaba en el centro de la instancia y sobre ella se hallaban un sobre al lado de un tintero antiguo; la escasa luz le daba un ambiente lúgubre.</span></blockquote>
<div class="quotefooter" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;">
<div class="botslice_quote">
</div>
</div>
<span style="color: white;"><span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;">Aquí agregué el detalle de la mesa con sus objetos; ya de ésta manera el personaje podrá interactuar con ellos, tal vez por que necesite del sobre, o por que en un futuro haga uso del tintero para (tal vez) arrojarlo; en fin, solo describir específicamente los objetos que se requieran usar.</span><br style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;" /><br style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;" /><span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;">3.- Divide las descripciones largas. Hay ocasiones en las que los personajes (Y algunos escenarios) son muy complejos y se requiere dar a conocer todos esos detalles; sin embargo hay que evitar el describirlos en su totalidad en un solo texto.</span><br style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;" /><span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;">-Puedes ir describiendo al personaje conforme se vaya necesitando; así como un escenario mediante se vaya avanzando en él y los personajes de fijen en aquello que los rodea.</span><br style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;" /><span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;">-Una descripción no sólo se puede dar directamente de las palabras del escritor, también se puede hacer uso de diálogos y/o pensamientos de los personajes para complementar las descripciones. Una recomendación personal es hacer uso de los pensamientos, ya que éstos no necesariamente deben de tener concordancia con lo que está sucediendo. Sin embargo, cada diálogo debe de tener relación con el contexto actual</span><br style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;" /><br style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;" /><span class="bbc_size" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14pt; line-height: 1.4em;"></span></span><br />
<div align="center" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.48px; line-height: 17.472px;">
<strong><span style="color: white;">Emociónate por cada capítulo o escena que vas a describir, por cada acción que tus personajes ejecutarán y por cada emoción que desprenderás del lector.</span></strong></div>
knd144http://www.blogger.com/profile/02561972998748075660noreply@blogger.com0tag:blogger.com,1999:blog-6252313676033631273.post-38015314360578547392014-08-16T21:16:00.002-07:002014-08-16T21:31:35.506-07:00Posicionar/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).<br />
Teniendo una lista como:<br />
<br />
<span style="background-color: #7f6000;">1.- elemento a.</span><br />
<span style="background-color: #7f6000;">2.- elemento b.</span><br />
<span style="background-color: #7f6000;">3.- elemento c.</span><br />
<span style="background-color: #7f6000;">4.- elemento d.</span><br />
<br />
Y que el usuario la pueda cambiar el orden:<br />
<br />
<span style="background-color: #7f6000;">2.- elemento b.</span><br />
<span style="background-color: #7f6000;">4.- elemento d.</span><br />
<span style="background-color: #7f6000;">1.- elemento a.</span><br />
<span style="background-color: #7f6000;">3.- elemento c.</span><br />
<br />
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.<br />
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.<br />
arreglo:<br />
<br />
<span style="background-color: #7f6000;">[0] = "elemento1";</span><br />
<span style="background-color: #7f6000;">[1] = "elemento2";</span><br />
<span style="background-color: #7f6000;">[2] = "elemento3";</span><br />
<span style="background-color: #7f6000;">[3] = "elemento4";</span><br />
<br />
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í:<br />
<br />
<span style="background-color: #7f6000;">[0] = "elemento1";</span><br />
<span style="background-color: #7f6000;">[1] = "elemento3";</span><br />
<span style="background-color: #7f6000;">[2] = "elemento2";</span><br />
<span style="background-color: #7f6000;">[3] = "elemento4";</span><br />
<br />
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:<br />
<br />
<span style="background-color: #7f6000;">posición y = 100px + (posición en el vector * 20) px;</span><br />
<br />
El método que diseñé funciona así:<br />
<br />
<a href="http://unrinconenlaweb.webcindario.com/reordenar/desplazar_vertical.html" target="_blank">http://unrinconenlaweb.webcindario.com/reordenar/desplazar_vertical.html</a><br />
<br />
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.<br />
<br />
Para descargar el ejemplo, está el enlace de abajo :P<br />
<br />
<a href="https://drive.google.com/file/d/0B6J7PWBjtBf7d1Z6TjRiZ3lmdzA/edit?usp=sharing" target="_blank">desplazar verticalmente elementos HTML con JQuery</a>knd144http://www.blogger.com/profile/02561972998748075660noreply@blogger.com0tag:blogger.com,1999:blog-6252313676033631273.post-48076251228988362842014-05-25T21:36:00.000-07:002014-05-25T21:43:32.321-07:00Eliminar 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 "<i>sweet-page.com"</i>, 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).<br />
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í:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht4s497WIK4KdYqKSgHEkwAXiBTAdZ5OudmBgUN-mwUeyI4FBaDjJMNj0GSDR0q5aSaIVwMC1ryiYCZQkJZF4bi2A84Ar5KTNQcqdyGU8LNiWusgjG2NafGFvadQHLZeL0VUiibm43wDa8/s1600/algo+as%C3%AD.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht4s497WIK4KdYqKSgHEkwAXiBTAdZ5OudmBgUN-mwUeyI4FBaDjJMNj0GSDR0q5aSaIVwMC1ryiYCZQkJZF4bi2A84Ar5KTNQcqdyGU8LNiWusgjG2NafGFvadQHLZeL0VUiibm43wDa8/s1600/algo+as%C3%AD.JPG" height="400" width="277" /></a></div>
<br />
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).<br />
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.<br />
<br />
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.<br />
<br />
Afortunadamente encontré un vídeo en <a href="http://www.youtube.com/" target="_blank">YouTube</a> 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 <a href="http://youtu.be/F-VDAjrPPAw">http://youtu.be/F-VDAjrPPAw</a>) :<br />
<br />
<iframe allowfullscreen="" frameborder="0" height="360" src="//www.youtube.com/embed/F-VDAjrPPAw" width="640"></iframe><br />
<br />
Los enlaces de descargas que se encuentran en el vídeo son los siguientes:<br />
<a href="http://dropcanvas.com/#5Q3Q8E6oL93Jzb">http://dropcanvas.com/#5Q3Q8E6oL93Jzb</a> <br />
<a href="https://toolslib.net/downloads/viewdownload/1-adwcleaner/">https://toolslib.net/downloads/viewdo...</a><br />
<div>
<br /></div>
<div>
(Aunque recomiendo entrar al <a href="http://youtu.be/F-VDAjrPPAw" target="_blank">enlace directo</a> para que encuentren el programa más actual)</div>
knd144http://www.blogger.com/profile/02561972998748075660noreply@blogger.com0tag:blogger.com,1999:blog-6252313676033631273.post-85886919405609048492014-05-17T20:02:00.002-07:002014-05-17T20:02:33.988-07:00Far Flight, juego en HTML5 altamente adictivoNo cabe duda de que con <a href="http://es.wikipedia.org/wiki/Flappy_Bird" target="_blank">Flappy Bird</a> empieza (si no es que ya empezó) una oleada de juegos <i>arcade </i>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.<br />
<br />
<a href="http://edwrodrig.github.io/farflight/" target="_blank">Far Flight</a> es un juego en 3D con una vista en <i>primera persona</i>; eres una <i>cosa</i> avanzando en una habitación llena de columnas y tu misión es sortear esas columnas con la ayuda del <i>mouse</i>. 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.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj74NKaWhTK4zUGBj5hJESemLEwkICTipfjk6Q0b4FpjNF1W9lYqH30VB7uqWxnjqv2M7IHTqkbxJBAE4ikrd_QAVmKf_JDItiZ5SKKedGAcjzXMCJrUDkjr8FtE4Fw8aipBMKcWcyktmbF/s1600/far+flight.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj74NKaWhTK4zUGBj5hJESemLEwkICTipfjk6Q0b4FpjNF1W9lYqH30VB7uqWxnjqv2M7IHTqkbxJBAE4ikrd_QAVmKf_JDItiZ5SKKedGAcjzXMCJrUDkjr8FtE4Fw8aipBMKcWcyktmbF/s1600/far+flight.JPG" height="476" width="640" /></a></div>
<br />
<br />
El juego está programado en HTML5 por lo que corre en cualquier plataforma con un Navegador Web convencional (que lo soporte).<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLbNV_nHTn8yzn687VEN02z5rmXJcGXR-1IIGaD7TtShjgxDz_xCjz8IZZW-c_wdrZmBBoncCgo5w7pG_xxOG1SV2U_dh6PcbdhcphfExa3fExbjK_iJXD_oPOA4WosVjFDJY6DZNPbaQ7/s1600/record.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLbNV_nHTn8yzn687VEN02z5rmXJcGXR-1IIGaD7TtShjgxDz_xCjz8IZZW-c_wdrZmBBoncCgo5w7pG_xxOG1SV2U_dh6PcbdhcphfExa3fExbjK_iJXD_oPOA4WosVjFDJY6DZNPbaQ7/s1600/record.JPG" height="482" width="640" /></a></div>
<br />
<br />
Prueba este adictivo juego y trata de conseguir el recorrido más largo que puedas<br />
<br />
<a href="http://edwrodrig.github.io/farflight/" target="_blank">http://edwrodrig.github.io/farflight/</a>knd144http://www.blogger.com/profile/02561972998748075660noreply@blogger.com0tag:blogger.com,1999:blog-6252313676033631273.post-80687633871486507242014-04-22T17:04:00.001-07:002014-05-13T19:50:46.907-07:00Libro gratuito (Formato Web) de JQUERYJQuery 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).<br />
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.<br />
<br />
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.<br />
<br />
<a href="http://librojquery.com/" target="_blank">http://librojquery.com/</a>knd144http://www.blogger.com/profile/02561972998748075660noreply@blogger.com0tag:blogger.com,1999:blog-6252313676033631273.post-87425309235507721252014-04-10T19:26:00.000-07:002016-05-04T22:28:48.812-07:00Alicia 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.<br />
<br />
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.<br />
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).<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8RszPwklIWjGJoGEn77M-xcwvS20wKwYKipU0y09O9OTI6ltPgSxfq7lgIYrHKca3NqM1GQu25E4vt5E83iQ_twadMMjiBtOFsGbvG_dvm0lOeo1K0RgQPz9_pj0T2p5o-bTcLixaT2s1/s1600/Alicia_02.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8RszPwklIWjGJoGEn77M-xcwvS20wKwYKipU0y09O9OTI6ltPgSxfq7lgIYrHKca3NqM1GQu25E4vt5E83iQ_twadMMjiBtOFsGbvG_dvm0lOeo1K0RgQPz9_pj0T2p5o-bTcLixaT2s1/s1600/Alicia_02.jpg" width="480" /></a></div>
<br />
<br />
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.<br />
Les dejo el enlace de descarga del Cómic más abajo:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivlrvQzdfHy_Sm3MhbbOLofkPjKu32WtAO8lS8k3edM0dFM_nQKfwZGwkC-TVUAzSGcQr7sj3ACt2NP4yQYVUkU4w0_88YLGpwSLoKfztY4HXnC7hr-imc-AF0qC6gGc6pvoDgdbTivVr_/s1600/Alicia_05.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivlrvQzdfHy_Sm3MhbbOLofkPjKu32WtAO8lS8k3edM0dFM_nQKfwZGwkC-TVUAzSGcQr7sj3ACt2NP4yQYVUkU4w0_88YLGpwSLoKfztY4HXnC7hr-imc-AF0qC6gGc6pvoDgdbTivVr_/s1600/Alicia_05.jpg" width="481" /></a></div>
<br />
<br />
<a href="https://drive.google.com/file/d/0B6J7PWBjtBf7NHA3NEw0OC1IWlU/edit?usp=sharing" target="_blank">Enlace de Descarga</a><br />
<br />
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.<br />
Un enlace con información más específica de estos trastornos: <a href="http://salud.uncomo.com/articulo/como-detectar-el-sindrome-de-alicia-en-el-pais-de-las-maravillas-3724.html" target="_blank">Síndrome de Alicia en el país de las maravillas</a>knd144http://www.blogger.com/profile/02561972998748075660noreply@blogger.com0tag:blogger.com,1999:blog-6252313676033631273.post-88276770593851477542014-01-06T21:48:00.000-08:002014-04-21T12:11:17.135-07:00Configuración FTP del KeyLogger ArdamaxUn 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.<br />
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).<br />
<br />
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 <b>Ardamax Keylogger</b> mediante FTP.<br />
<br />
Primero a descargarlo, aquí les tengo dos enlaces de descarga directa:<br />
<br />
<a href="https://drive.google.com/folderview?id=0B6J7PWBjtBf7REJZRnYtQVU4OTg&usp=sharing" target="_blank">Descarga desde google drive</a><br />
<a href="http://unrinconenlaweb.webcindario.com/programas/Ardamax%20Keylogger%204.0.4%20Full.rar" target="_blank">Descarga desde webcindario</a><br />
<br />
Para instalarlo hay que ejecutar el archivo setup_akl.exe (No hay contraseña para descomprimir el archivo).<br />
<br />
NOTA: <i>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).</i><br />
<i><br /></i>
La instalación es sencilla, una vez instalado ejecuten el programa:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikwi0ANgUMN-nmP14n7bBqVLs_6ZbJdW67PL0s6aC1MWnT9geRBbbjO6X2LiyRJKPMFZkc4dRJg3R8F0xm6n_rFboYmDoO1GCaLIXhuyBx1GEvPQP2R-TyDJDTnhUHSTODvLYZMK-bddFc/s1600/instalado.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikwi0ANgUMN-nmP14n7bBqVLs_6ZbJdW67PL0s6aC1MWnT9geRBbbjO6X2LiyRJKPMFZkc4dRJg3R8F0xm6n_rFboYmDoO1GCaLIXhuyBx1GEvPQP2R-TyDJDTnhUHSTODvLYZMK-bddFc/s1600/instalado.PNG" height="244" width="320" /></a></div>
<br />
En la barra de tareas les debe de aparecer un ícono como este:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPg9EsFYErX1cSgCF0bBkH5-KN2jY4rahEokpCq0DtwbVkxXx0UZxrdBgnCTiRp6Aoxov76SSPqN55_l2ZP9hp7N4wKodJn4jKnkZAGXuLn-7q00_x_tBCo4Wh9oFvuMzDACzeYJIPVjkb/s1600/icono.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPg9EsFYErX1cSgCF0bBkH5-KN2jY4rahEokpCq0DtwbVkxXx0UZxrdBgnCTiRp6Aoxov76SSPqN55_l2ZP9hp7N4wKodJn4jKnkZAGXuLn-7q00_x_tBCo4Wh9oFvuMzDACzeYJIPVjkb/s1600/icono.PNG" height="224" width="320" /></a></div>
<br />
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 <a href="http://www.webcindario.com/" target="_blank">webcindario.com</a>, 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".<br />
<br />
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":<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4QO2EcLlWMObUMs-KvWK_BU_vi0lMoYJoawuTg3Zsp2WD_EhVerQgLtfc2cSuADRkqo6HMMYk0wrFXBQwkCG1uVi-0ap3Ga9VwcSBehIbP9HTjrr0q9-F6lGN4G7PaR8n1c-kAVfnlBt6/s1600/options.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4QO2EcLlWMObUMs-KvWK_BU_vi0lMoYJoawuTg3Zsp2WD_EhVerQgLtfc2cSuADRkqo6HMMYk0wrFXBQwkCG1uVi-0ap3Ga9VwcSBehIbP9HTjrr0q9-F6lGN4G7PaR8n1c-kAVfnlBt6/s1600/options.PNG" height="320" width="284" /></a></div>
<br />
En la ventana emergente tenemos un menú desplegable a la izquierda, desplegamos (damos clic) "<i>Delivery</i>" y de las opciones damos clic en FTP:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt_8lcCOxQKFvl2bxw94xJz0ZzC3dGZWqhim6AkJa0y4nJbvv-SsO3yHPKuAsGISzmSdqLXVPz_G7apbqmQ4C2pAzW1xOyPrgLCijbMTciiaObAKVnULjOqB7GE30W_wDNFTZdZY8JjIPJ/s1600/delireve.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt_8lcCOxQKFvl2bxw94xJz0ZzC3dGZWqhim6AkJa0y4nJbvv-SsO3yHPKuAsGISzmSdqLXVPz_G7apbqmQ4C2pAzW1xOyPrgLCijbMTciiaObAKVnULjOqB7GE30W_wDNFTZdZY8JjIPJ/s1600/delireve.PNG" height="412" width="640" /></a></div>
<br />
Allí configuramos a qué dirección web nos enviará los registros que capture:<br />
<br />
-> 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).<br />
-> 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".<br />
-> Password es la contraseña del usuario; en el caso de webcindario es la misma contraseña que la de mi cuenta.<br />
-> 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".<br />
-> 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:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4wmIpbXeNQiyPFQOf73_7o9iJoS1hYFdb6LnqbW1YL7QPTnbcbcw0C-PFfoLFjtNnnZficz0nxDr5YIbRup05jt6PJ7rGuEFb-s97gMw_7stWcLjFraHsSm64VvXbiVFzzRUjs6Y6CMi8/s1600/configuracion.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4wmIpbXeNQiyPFQOf73_7o9iJoS1hYFdb6LnqbW1YL7QPTnbcbcw0C-PFfoLFjtNnnZficz0nxDr5YIbRup05jt6PJ7rGuEFb-s97gMw_7stWcLjFraHsSm64VvXbiVFzzRUjs6Y6CMi8/s1600/configuracion.PNG" height="414" width="640" /></a></div>
<br />
Le damos clic en el botón "test" para ver si se puede realizar el envío de los archivos:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS-85ifVz7Rl5i6SlalJuenWjcDoAGVjP-zFYvxFzpHGhLYn0nEMHwZNFpQmrovjqGvutRsFkcVNVwnZ9bRSP3jgn5FlU4r79ljAMWSW8r94of7IuIYZM1itf3BSkAFGZ3zToAUsznX0IA/s1600/test.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS-85ifVz7Rl5i6SlalJuenWjcDoAGVjP-zFYvxFzpHGhLYn0nEMHwZNFpQmrovjqGvutRsFkcVNVwnZ9bRSP3jgn5FlU4r79ljAMWSW8r94of7IuIYZM1itf3BSkAFGZ3zToAUsznX0IA/s1600/test.PNG" height="328" width="640" /></a></div>
<br />
Aquí se indica que la conexión fue exitosa, incluso se me envió un archivo de prueba en la carpeta de mi servidor FTP:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBHw4IHF9zpbcIs39S4mahf67shS3wGnLwc2bW6eoNL7KSdH1CVfvug7m67YSMOcjq9eB3gqybTlDZ7XHfGvjiUiQmNpMfCPNH_wLie667psFMfm-oG2YNcvh2LY6uN3eEkhI3qIFmiv44/s1600/respuesta.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBHw4IHF9zpbcIs39S4mahf67shS3wGnLwc2bW6eoNL7KSdH1CVfvug7m67YSMOcjq9eB3gqybTlDZ7XHfGvjiUiQmNpMfCPNH_wLie667psFMfm-oG2YNcvh2LY6uN3eEkhI3qIFmiv44/s1600/respuesta.PNG" height="386" width="640" /></a></div>
<br />
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:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR-Y-Y8jG1Wj3J8xtEen1Ca3C6VST-nmdb1fQ7gSsiiiJoGoWIlwIY4j4OPpQ82Sa7jg4gryZEqrOuXExG4KWnxc8enK-pEGwjv8tgEgN5461QZZ6xbTsXmIzrgn1akQv0tnE7_uvgNUUq/s1600/configurar+envio.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR-Y-Y8jG1Wj3J8xtEen1Ca3C6VST-nmdb1fQ7gSsiiiJoGoWIlwIY4j4OPpQ82Sa7jg4gryZEqrOuXExG4KWnxc8enK-pEGwjv8tgEgN5461QZZ6xbTsXmIzrgn1akQv0tnE7_uvgNUUq/s1600/configurar+envio.PNG" height="414" width="640" /></a></div>
<br />
-> 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).<br />
->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.<br />
-> 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.<br />
-> 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).<br />
-> 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).<br />
-> 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.<br />
<br />
Damos clic en ACEPTAR y listo, se tiene el keylogger configurado y funcionando.<br />
<br />
<br />
Aquí se ven los registros que recibí mientras realizaba este artículo (De mi propia computadora, claro).<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhta5jKoXqDpEFxv8VoXutWCq_zyl8k7XsEVQDhVp8aPlKNsyw04xcDmSeJ-mT17A5raP-xlb9-3aXHHAsb_Zwro1w5QNYq36lPBkRfbbvh-96EhRLEb6u13QJkd9ThY-cCQboOU6P_LD2B/s1600/ejemplo.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhta5jKoXqDpEFxv8VoXutWCq_zyl8k7XsEVQDhVp8aPlKNsyw04xcDmSeJ-mT17A5raP-xlb9-3aXHHAsb_Zwro1w5QNYq36lPBkRfbbvh-96EhRLEb6u13QJkd9ThY-cCQboOU6P_LD2B/s1600/ejemplo.PNG" height="340" width="640" /></a></div>
<br />knd144http://www.blogger.com/profile/02561972998748075660noreply@blogger.com0tag:blogger.com,1999:blog-6252313676033631273.post-22520143457508362412014-01-06T20:23:00.000-08:002014-01-06T20:23:56.553-08:00Agregar 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.<br />
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.<br />
<br />
Primero hay que descargarlo de su página oficial <a href="http://www.tinymce.com/download/download.php" target="_blank">www.tinymce.com/</a><br />
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.<br />
<br />
Su forma más simple de uso consiste en agregarlo a nuestra página:<br />
<br />
<span style="background-color: #7f6000;"><script type="text/javascript" src="js/tinymce.min.js"></script></span><br />
<br />
Agregar uno o varios "textareas" a la página:<br />
<br />
<span style="background-color: #7f6000;"><textarea id="texto" name="texto" rows="15" cols="80"></textarea></span><br />
<br />
y, para "convertir" los textareas en editores HTML se agrega otro código de JavaScript a la página:<br />
<br />
<span style="background-color: #7f6000;"><script type="text/javascript"></span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>tinyMCE.init(</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>{</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>mode: "textareas", //Todos los textareas se verán afectados</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>theme: "simple"<span class="Apple-tab-span" style="white-space: pre;"> </span>// Es estilo del editor será el más simple</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>}</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>);</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span></script></span><br />
<br />
Como se lee en el código, se manda a llamar la función <i>init()</i> con los parámetros <b>mode</b> de valor "textareas", lo cual indica que se afectarán a todos los campos textareas de la página, y <b>theme</b> con valor "simple", lo cual indica que se usará el editor sencillo.<br />
El resultado es el siguiente:<br />
<br />
<a href="http://unrinconenlaweb.webcindario.com/tiny_mce/simple.html" target="_blank">Editor simple</a><br />
<br />
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 <b>mode </b>por "exact" y se agrega el parámetro <b>elements</b> con la lista de los id's de los textareas que queremos convertir en editores de texto; digamos que tenemos los siguientes textareas:<br />
<br />
<span style="background-color: #7f6000;"><textarea id="texto1" name="texto1" rows="10" cols="80"></textarea></span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span><br /></span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span><textarea id="texto2" name="texto2" rows="10" cols="80"></textarea></span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span><br /></span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span><textarea id="texto3" name="texto3" rows="10" cols="80"></textarea></span><br />
<br />
y sólo queremos que el textarea "texto1" y "texto3" sean editores HTML, entonces la función init se invoca:<br />
<br />
<span style="background-color: #7f6000;"><script type="text/javascript"></span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>tinyMCE.init(</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>{</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>mode: "exact", //Indica que sólo algunos textareas tendrán el formato de editor html</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>elements: "texto1, texto3", //lista de id's de los text áreas que obtendrán el formato de editor</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>theme: "simple" //El tema será el más simple que hay</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>}</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>);</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span></script></span><br />
<br />
Y el resultado obtenido es el siguiente:<br />
<br />
<a href="http://unrinconenlaweb.webcindario.com/tiny_mce/algunos.html" target="_blank">discriminar textareas</a><br />
<br />
Como se ve, sólo 2 de los 3 textareas son editores HTML, aquellos que indicados en el parámetro <b>element.</b><br />
<b><br /></b>
TinyMCE tiene un modo avanzado, el cual incluye bastantes más herramientas y es mucho más personalizable.<br />
<br />
Empecemos con lo sencillo, para usar el modo avanzado sólo basta con cambiar el valor del parámetro <b>theme</b> por "advanced". Una vez hecho esto, se pueden agregar más parámetros a la función <i>init(), </i>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:<br />
<br />
<span style="background-color: #7f6000;">theme_advanced_toolbar_location: "top", // La barra de herramientas vanzadas la colocamos en la parte superior</span><br />
<span style="background-color: #7f6000;"><br /></span>
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í:<br />
<br />
<span style="background-color: #7f6000;"><script type="text/javascript"></span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>tinyMCE.init(</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>{</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>mode: "textareas", //Afectará a todas las textareas</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>theme: "advanced", //El tema será el avanzado</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>theme_advanced_toolbar_location: "top", // La barra de herramientas vanzadas la colocamos en la parte superior</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>theme_advanced_toolbar_align: "center", // Indicamos hacia qué lado se alinearán los "botones" de la barra de herramientas (left,right,center)</span><br />
<span class="Apple-tab-span" style="background-color: #7f6000; white-space: pre;"> </span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>}</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>);</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span></script></span><br />
<br />
Como mencioné, agregué un quinto argumento para indicar que los botones se centrarán en las barras de herramientas. El resultado es el siguiente:<br />
<br />
<a href="http://unrinconenlaweb.webcindario.com/tiny_mce/avanzado.html" target="_blank">Editor avanzado</a><br />
<br />
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".<br />
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 (<a href="http://www.tinymce.com/download/plugins.php">http://www.tinymce.com/download/plugins.php</a>). Para usarlos primero hay que agregar el parámetro <b>plugins </b>a la función <i>init()</i> con una lista de los plugins que queremos agregar.<br />
ejemplo:<br />
<span style="background-color: #7f6000;">plugins: "style,table,save,emotions"</span><br />
<br />
Para administrar los botones por barras de herramientas, agregamos un parámetro por cada barra con el nombre <i>theme_advanced_buttons# </i>(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.<br />
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.<br />
Ejemplifico lo anterior con el siguiente ejemplo:<br />
<br />
<span style="background-color: #7f6000;"><script type="text/javascript"></span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>tinyMCE.init(</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>{</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>mode: "textareas", //Afectará a todas las textareas</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>theme: "advanced", //El tema será el avanzado</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>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</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>theme_advanced_toolbar_location: "top", // La barra de herramientas vanzadas la colocamos en la parte superior</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>theme_advanced_toolbar_align: "center", // Indicamos hacia qué lado se alinearán los "botones" de la barra de herramientas (left,roght,center)</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>/*Creamos las 3 barras y le agregamos los botones que le queremos dar*/</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>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....)</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>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...</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>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)</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>theme_advanced_resizing: true, // Le permite al usuario cambiar el tamaño del textarea</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>height: "200px", // También podemos determinar la altura de la textarea</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>width: "600px" //Y lo largo</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>}</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>);</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span></script></span><br />
<br />
El resultado sería el siguiente:<br />
<br />
<a href="http://unrinconenlaweb.webcindario.com/tiny_mce/avanzado_personalizado.html" target="_blank">Editor avanzado personalizado</a><br />
<br />
Se observa que se tienen menos botones que el ejemplo anterior, y agregué la <span style="background-color: #7f6000;">línea theme_advanced_resizing: true</span> la cual permite que el usuario pueda cambiar el tamaño del textarea.<br />
<br />
Una forma casi completa del textárea es con el siguiente código:<br />
<br />
<span style="background-color: #7f6000;"><script type="text/javascript"></span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>tinyMCE.init(</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>{</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>mode : "textareas",</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>theme : "advanced",</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>//Los plugins que trae por defecto</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>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",</span><br />
<span style="background-color: #7f6000;"><br /></span>
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>// Agregando las barras de botones</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>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",</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak,restoredraft,visualblocks",</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>theme_advanced_toolbar_location : "top",</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>theme_advanced_toolbar_align : "left",</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>theme_advanced_statusbar_location : "bottom",</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>theme_advanced_resizing : true,</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>}</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>);</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span></script></span><br />
<br />
<br />
<a href="http://unrinconenlaweb.webcindario.com/tiny_mce/avanzado_semicompleto.html" target="_blank">El resultado es este</a><br />
<br />
Usando la paquetería completa, se puede obtener un editor mucho mejor.<br />
<br />
<a href="http://www.tinymce.com/tryit/full.php" target="_blank">Ejemplo completo de TinyMCE con el tema reciente</a><br />
<br />
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.<br />
<br />
<a href="https://drive.google.com/folderview?id=0B6J7PWBjtBf7S000d2tuV29KalU&usp=sharing" target="_blank">Descarga los ejemplos</a><br />
<br />
NOTA: para un conocimiento aún mayor del TinyMCE, está si <a href="http://www.tinymce.com/wiki.php" target="_blank">documentación</a>knd144http://www.blogger.com/profile/02561972998748075660noreply@blogger.com0tag:blogger.com,1999:blog-6252313676033631273.post-67878778151838959322013-12-08T20:09:00.000-08:002015-09-04T16:29:13.263-07:009 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.<br />
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).<br />
<br />
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.<br />
(Al final se encuentra el enlace a las respuestas de los acertijos con su explicación):<br />
<br />
<br />
<span style="font-size: large;">1er acertijo de lógica:</span><br />
<br />
<span style="font-family: Courier New, Courier, monospace;">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.<br /><br />Ignorando a la primera persona ¿Qué persona es qué (mentiroso o sincero)?</span><br />
<div>
<br /></div>
<div>
<br /></div>
<div>
<span style="font-size: large;">2° acertijo de lógica:</span></div>
<div>
<br /></div>
<span style="font-family: Courier New, Courier, monospace;">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.<br /><br />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.<br /><br />Porcia hizo esculpir sobre los cofres las siguientes inscripciones:<br /><br />Oro: El retrato esta en este cofre.<br />Plata: El retrato no esta en este cofre.<br />Plomo: El retrato no esta en el cofre de oro.<br /><br />Porcia explicó al pretendiente, que cuando mucho una de las 3 afirmaciones era verdadera.<br /><br />¿Cuál de los cofres contenía el retrato?.</span><br />
<div>
<br /></div>
<div>
<br /></div>
<div>
<span style="font-size: large;">3er acertijo de lógica:</span></div>
<div>
<br /></div>
<span style="font-family: Courier New, Courier, monospace;">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:<br /><br />Oro : El retrato no está en el cofre de plata<br />Plata: El retrato no está en este cofre<br />Plomo: El retrato está en este cofre.<br /><br />Porcia explico al pretendiente que por lo menos una de las tres afirmaciones era verdadera y que por lo menos una era falsa.<br />¿En cual de los cofres está el retrato?</span><br />
<br />
<br />
<span style="font-size: large;">4° acertijo de lógica:</span><br />
<div>
<br /></div>
<span style="font-family: Courier New, Courier, monospace;">En la isla de los "caballeros y escuderos" los caballeros siempre dicen la verdad y los escuderos siempre mienten...<br /><br />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.<br /><br />¿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.</span><br />
<div>
<br /></div>
<div>
<br /></div>
<div>
<span style="font-size: large;">5° acertijo de lógica:</span></div>
<div>
<br /></div>
<span style="font-family: Courier New, Courier, monospace;">Siguiendo la regla de que los caballeros dicen la verdad y los escuderos mienten...<br /><br />Tenes enfrente a 2 personas ('A' y 'B').<br />'A' dice, "O yo soy un escudero o B es un caballero". <br />¿Qué son A y B?</span><br />
<div>
<br /></div>
<div>
<br /></div>
<div>
<span style="font-size: large;">6° acertijo de lógica:</span></div>
<br />
<span style="font-family: Courier New, Courier, monospace;">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:<br />A: Yo soy normal.<br />B: Eso es verdad.<br />C: Yo no soy normal.<br /><br />¿Qué son A, B y C?</span><br />
<div>
<br /></div>
<div>
<br /></div>
<div>
<span style="font-size: large;">7° acertijo de lógica:</span></div>
<div>
<span style="font-family: Courier New, Courier, monospace;"><br /></span></div>
<span style="font-family: Courier New, Courier, monospace;">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.<br /><br />¿Qué pregunta le formularías a uno solo de los dos guardianes para saber cuál de las dos puertas te permitirá salvarte?<br /><br />(Aclaración: Que un guardia diga la verdad no quiere decir que la puerta que custodia sea la de la salvación).</span><br />
<div>
<br /></div>
<div>
<br /></div>
<div>
<span style="font-size: large;">8° acertijo de lógica:</span></div>
<div>
<br /></div>
<span style="font-family: Courier New, Courier, monospace;">Alicia y el día de la semana<br /><br />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". <br />¿Qué día de la semana es hoy?</span><br />
<div>
<br /></div>
<div>
<br /></div>
<div>
<span style="font-size: large;">9° acertijo de lógica:</span></div>
<div>
<br /></div>
<span style="font-family: Courier New, Courier, monospace;">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".<br /><br />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?</span><br />
<div>
<br /></div>
<div>
<br /></div>
<div>
<span style="font-size: large;">Acertijo matemático:</span></div>
<div>
<br /></div>
<div>
<span style="font-family: Courier New, Courier, monospace;">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?</span></div>
<div>
<br /></div>
<div>
<a href="http://unrinconenlaweb.blogspot.mx/p/aqui-les-explicare-las-respuestas-del.html" target="_blank">Lee las respuestas a los acertijos</a></div>
knd144http://www.blogger.com/profile/02561972998748075660noreply@blogger.com0tag:blogger.com,1999:blog-6252313676033631273.post-8784679412677874442013-10-13T17:50:00.001-07:002013-10-13T18:22:25.867-07:00Configurar una conexión en MySQL WorkBenchMySQL WorkBech es una herramienta visual que sirve para el diseño, manutención y administración de <b>bases de datos</b> en MySQL (aunque se puede usar con otros manejadores) y, algo muy importante, es de código abierto.<br />
<br />
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.<br />
<br />
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):<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNiLiXyeA-cLGaf-jpUgGx9Rg_uKcLd3ozeLC6DQK_dgK337UlYt_aSH2viUMxZF6ax6NAjcifiEuszNHnrX0xxLm385Iv8nQCMLvK1WvggPK_gjm5Qw5Vbzr9HGUatlErzR_mvwS3sWxd/s1600/proceso+MySQL.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="280" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNiLiXyeA-cLGaf-jpUgGx9Rg_uKcLd3ozeLC6DQK_dgK337UlYt_aSH2viUMxZF6ax6NAjcifiEuszNHnrX0xxLm385Iv8nQCMLvK1WvggPK_gjm5Qw5Vbzr9HGUatlErzR_mvwS3sWxd/s640/proceso+MySQL.PNG" width="640" /></a></div>
<br />
Ya estando en la interfaz del WorkBench, inicialmente tenemos 3 paneles (de izquierda a derecha):<br />
<br />
<ul>
<li>Desarrollo SQL (realizar las consultas, transacciones y cambios en una base de datos existente)</li>
<li>Diseño de la base de datos</li>
<li>Administración de servidores</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwspnJyIKVcPkxNMU2_y5J6aYiLqaS1uVvq9atmD9XGqK5eZfVZNCG5YDl52vphFcoKbEfC86GhdmOnQmgwUiqoD-1rCPoSxSqr2V3n7bY02_ty-px1rv7XAnbh_oGTfk-GirCFu-LMO6B/s1600/paneles.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="205" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwspnJyIKVcPkxNMU2_y5J6aYiLqaS1uVvq9atmD9XGqK5eZfVZNCG5YDl52vphFcoKbEfC86GhdmOnQmgwUiqoD-1rCPoSxSqr2V3n7bY02_ty-px1rv7XAnbh_oGTfk-GirCFu-LMO6B/s400/paneles.PNG" width="400" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
Para crear una conexión es en el panel de la izquierda (Desarrollo SQL / SQL Development), en la opción "new connection".</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKXftqR4eAgJFAQIkAVXEd2VW30H51VsuhW1ufNEF-rxUuUFnQGTysYWTvM_6QABLsKDVu76h6afHbuXQC2pzHfK_zynGOsH2Rmn-mPtY-xWxHnturFEs8Ue9BPSre3nLxUG5aclOdUgaO/s1600/new+connection.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKXftqR4eAgJFAQIkAVXEd2VW30H51VsuhW1ufNEF-rxUuUFnQGTysYWTvM_6QABLsKDVu76h6afHbuXQC2pzHfK_zynGOsH2Rmn-mPtY-xWxHnturFEs8Ue9BPSre3nLxUG5aclOdUgaO/s320/new+connection.PNG" width="294" /></a></div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div>
<br /></div>
<div>
Se abrirá la siguiente ventana:</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI_YaBxbWivBzjXYaIOBzwnJ66hYJz7ablExC9gxeKhMCa4fYiHMaR7FQesJ4cLxTvD6e7qKjQ_d4Ih6D7YdmWzwoVdIFLWeuFCV0BwOK58TfSSMPxq3Mz2PcCzwwn1-Hrmf9JvqoRX1I6/s1600/panel+1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="402" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI_YaBxbWivBzjXYaIOBzwnJ66hYJz7ablExC9gxeKhMCa4fYiHMaR7FQesJ4cLxTvD6e7qKjQ_d4Ih6D7YdmWzwoVdIFLWeuFCV0BwOK58TfSSMPxq3Mz2PcCzwwn1-Hrmf9JvqoRX1I6/s640/panel+1.PNG" width="640" /></a></div>
<div>
<br /></div>
<div>
Los campos a rellenar son:</div>
<div>
<br /></div>
<div>
<ul>
<li>Connetion name: un nombre para identificar la conexión.</li>
<li>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.</li>
<li>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)</li>
<li>Port: puerto de conexión, por defecto se usa el 3306.</li>
<li>username: el usuario de la base de datos.</li>
<li>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.</li>
<li>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).</li>
</ul>
<div>
Un ejemplo de cómo llenarla:</div>
</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZViD-7srlD9eLyr3WVDVAGUHjBrMoo2YhCRmtwT3bp_VZrtytNjM0lYblKMbdod6i8XpDyytzDawyhDqHugAUigVWbPzUODuNhf_OzzB49iFPFyy4Pp-DkWWoss4mpobs8HCWbfQKK4-w/s1600/ejemplo+configuracion.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZViD-7srlD9eLyr3WVDVAGUHjBrMoo2YhCRmtwT3bp_VZrtytNjM0lYblKMbdod6i8XpDyytzDawyhDqHugAUigVWbPzUODuNhf_OzzB49iFPFyy4Pp-DkWWoss4mpobs8HCWbfQKK4-w/s640/ejemplo+configuracion.PNG" width="640" /></a></div>
<div>
<br /></div>
<div>
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).</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP_ap6o3XJvmCg9EErZgcF27XVFS6A3aoLEO-AqEkfFzgks2VHVcuLe2cq5_lZa6kxjJvPho8jo3W_7YfZ7oG5swQ60UfqL6SG40dRHquFv2vKqkRUt4wzW-M3_ed1iiLPWJdFdQHEqrB4/s1600/prueba+test.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="153" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP_ap6o3XJvmCg9EErZgcF27XVFS6A3aoLEO-AqEkfFzgks2VHVcuLe2cq5_lZa6kxjJvPho8jo3W_7YfZ7oG5swQ60UfqL6SG40dRHquFv2vKqkRUt4wzW-M3_ed1iiLPWJdFdQHEqrB4/s320/prueba+test.PNG" width="320" /></a></div>
<div>
<br /></div>
<div>
Se guarda la configuración (OK) y se visualizará la nueva conexión en el panel de "Desarrollo SQL" (Izquierda) de la ventana inicial.</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlGrCEVy8tfd-tTRLA-zi5pZdot4Zs6oLV-fSBV1hlhlaWXNBKby83Xvw-P3yKhIAWHUBuArWa_rDDifTiVNuMrbj_f31lbdUssFJO19xIGPlozxfOMGzcWBD9N6aGDBtFyf2mNQzAaS8N/s1600/nueva+conexion.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlGrCEVy8tfd-tTRLA-zi5pZdot4Zs6oLV-fSBV1hlhlaWXNBKby83Xvw-P3yKhIAWHUBuArWa_rDDifTiVNuMrbj_f31lbdUssFJO19xIGPlozxfOMGzcWBD9N6aGDBtFyf2mNQzAaS8N/s320/nueva+conexion.PNG" width="267" /></a></div>
<div>
<br /></div>
<div>
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:</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjzqu3FN5Hxaf_eLGxm-bbo1oIy_EY8336a1dRJ9sTszfpXi-U8jc7JdYAuYEdV1q5MKKH42HcfZOHo6rY5wljMxMHYpaqddOd7wFZPTrd9d2JOhX5et2dpWHgzHGQrtW3b1Aw-7fOfpOb/s1600/consola.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="404" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjzqu3FN5Hxaf_eLGxm-bbo1oIy_EY8336a1dRJ9sTszfpXi-U8jc7JdYAuYEdV1q5MKKH42HcfZOHo6rY5wljMxMHYpaqddOd7wFZPTrd9d2JOhX5et2dpWHgzHGQrtW3b1Aw-7fOfpOb/s640/consola.PNG" width="640" /></a></div>
<div>
<br /></div>
knd144http://www.blogger.com/profile/02561972998748075660noreply@blogger.com1tag:blogger.com,1999:blog-6252313676033631273.post-84279395630993626532013-09-24T09:29:00.000-07:002013-09-24T09:36:59.748-07:00[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.<br />
<br />
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.<br />
Les presento una de sus primeras actuaciones en el Tour "World Of Dance" en San Diego 2012:<br />
<br />
<iframe allowfullscreen="" frameborder="0" height="360" src="//www.youtube.com/embed/_XLGYxeL1iQ" width="640"></iframe><br />
<br />
<br />
Para ver su aparición en "Play Hard": <a href="http://youtu.be/5dbEhBKGOtY?t=2m53s">http://youtu.be/5dbEhBKGOtY?t=2m53s</a>knd144http://www.blogger.com/profile/02561972998748075660noreply@blogger.com0tag:blogger.com,1999:blog-6252313676033631273.post-63310441798674684412013-08-18T16:39:00.002-07:002013-08-18T16:39:53.154-07:00Unidad 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:<br />
<br />
<iframe allowfullscreen="" frameborder="0" height="480" src="//www.youtube.com/embed/gR4VrgPmv3k" width="640"></iframe>knd144http://www.blogger.com/profile/02561972998748075660noreply@blogger.com0tag:blogger.com,1999:blog-6252313676033631273.post-35520069469258436402013-08-18T12:08:00.000-07:002013-08-18T12:08:11.734-07:00La 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ó.<br />
Disfruten del cómico e ilustrativo vídeo:<br /><br /><iframe allowfullscreen="" frameborder="0" height="480" src="//www.youtube.com/embed/LvAO2_Foxnc" width="640"></iframe>knd144http://www.blogger.com/profile/02561972998748075660noreply@blogger.com0tag:blogger.com,1999:blog-6252313676033631273.post-53848376847043306672013-08-18T11:46:00.000-07:002013-08-18T11:46:02.628-07:00Monó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:<br />
<br />
<iframe allowfullscreen="" frameborder="0" height="480" src="//www.youtube.com/embed/T9fYPsBmsNs" width="640"></iframe>knd144http://www.blogger.com/profile/02561972998748075660noreply@blogger.com0tag:blogger.com,1999:blog-6252313676033631273.post-52953879434934621232013-04-02T09:08:00.000-07:002013-04-02T09:20:18.927-07:00DEMO II: AQuilesVaniaConsiderando que ya está terminada la mecánica del juego y sólo hace falta aumentarle "historia", libero una segunda DEMO funcional del AQuilesVania.<br />
<br />
<b>Sinopsis:</b><br />
AquilesVania es un juego del género de plataformas ambientado en el clásico de konami Castlevania, pero le quita seriedad a la historia y el drama para darle énfasis a un aspecto cómico haciendo uso de frases “típicas” y elementos de la electrónica.<br />
<div>
Aquiles es un electrónico psicópata con creencia en los vampiros; para él, cualquier cosa viviente (y no viviente) es un vampiro: personas, fantasmas, perros, esqueletos... ¿candelabros?.Ésta es una de las alucinaciones nocturnas en la cual él se introduce al castillo de Drácula tratando de erradicar la maldad del planeta; cosa no tan sencilla considerando su obsesión con la comida que le da por ingerir cualquier cosa que se encuentre...<br />
<br />
<b>Capturas:</b><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsmMhlcvRzn5Qsv_-h05mBF_4sngYuqMSSlmNuUNCbEqLT4fwQg-vQKDpu-ab51FQHIrL55S5ijYVm6xHeEECFWzSN2rzcNhiln5LebKoHes8QWFcd_SwMVJ7keBHhxDGLtbb5Bec7Lcx5/s1600/screenshot99.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsmMhlcvRzn5Qsv_-h05mBF_4sngYuqMSSlmNuUNCbEqLT4fwQg-vQKDpu-ab51FQHIrL55S5ijYVm6xHeEECFWzSN2rzcNhiln5LebKoHes8QWFcd_SwMVJ7keBHhxDGLtbb5Bec7Lcx5/s400/screenshot99.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFkz0nuhZYLVwi3-aYCn-FPHV-jsee8OVUcOBePKnY4BjGL-VUdYilpdZ8sRgNCDFYBzBgFwbJPRwCMn1IpWOXEcwqAWuL5jwUZF3mqpniG7Lus832RvL5u-PObzOL_w9ojbE0rFGVqea9/s1600/screenshot100.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFkz0nuhZYLVwi3-aYCn-FPHV-jsee8OVUcOBePKnY4BjGL-VUdYilpdZ8sRgNCDFYBzBgFwbJPRwCMn1IpWOXEcwqAWuL5jwUZF3mqpniG7Lus832RvL5u-PObzOL_w9ojbE0rFGVqea9/s400/screenshot100.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjAvmhBPRslyLMf4w9oV-9cmdGs9BuAlu920e9rXHArRVeB5nZg6FUfpdHseUUqfmFQKmr_Jg-BVKQmdUOdMp2n8ogLdPHwDyTJt6fAN1QKspmTyPoqAa70EQNaCm2_nq_aMT8_U0baemO/s1600/screenshot101.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjAvmhBPRslyLMf4w9oV-9cmdGs9BuAlu920e9rXHArRVeB5nZg6FUfpdHseUUqfmFQKmr_Jg-BVKQmdUOdMp2n8ogLdPHwDyTJt6fAN1QKspmTyPoqAa70EQNaCm2_nq_aMT8_U0baemO/s400/screenshot101.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8y8sGhPoDlAAsjfAq9gX8JT0r1IU-REeZ98cnflREimp3yYTGqJk2E8ytVJyrvJyyZgbcPR9fxVSYnF_xRYp3sk54HA5H-1bRW990ZB2TTmzdCdHpJ7mLu63SS-4c60oxJfj0TOmLRFT_/s1600/screenshot1004.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="255" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8y8sGhPoDlAAsjfAq9gX8JT0r1IU-REeZ98cnflREimp3yYTGqJk2E8ytVJyrvJyyZgbcPR9fxVSYnF_xRYp3sk54HA5H-1bRW990ZB2TTmzdCdHpJ7mLu63SS-4c60oxJfj0TOmLRFT_/s400/screenshot1004.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUz79cwszeLZd74Ve5JeBJ9vvPvKhmsW-F31anCqzMOMi7EdpIV8G72dnfNc9XuvYpp8i8piDlGvSxNcWQWrfF7ttCatY8OTKz5kukTHBacW7Roxz9-5-nU8GHYV0CpGfm4rdwXowfAY0V/s1600/screenshot100.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUz79cwszeLZd74Ve5JeBJ9vvPvKhmsW-F31anCqzMOMi7EdpIV8G72dnfNc9XuvYpp8i8piDlGvSxNcWQWrfF7ttCatY8OTKz5kukTHBacW7Roxz9-5-nU8GHYV0CpGfm4rdwXowfAY0V/s400/screenshot100.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijm-HrQiDTskS4m2dySMbRIrL4yJOHF1XtfNUAEE2zOfZ39mqCGRiNdw4lN-I-UxKkjN_2ryvOTEY52ouNChRnRpuxCW0vjVeXeBGCozy540cB42TTHAtVFnMMiydLeg6l1cAGW6DnIE0v/s1600/screenshot100+(2).png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="255" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijm-HrQiDTskS4m2dySMbRIrL4yJOHF1XtfNUAEE2zOfZ39mqCGRiNdw4lN-I-UxKkjN_2ryvOTEY52ouNChRnRpuxCW0vjVeXeBGCozy540cB42TTHAtVFnMMiydLeg6l1cAGW6DnIE0v/s400/screenshot100+(2).png" width="400" /></a></div>
<br />
En la DEMO anterior, el personaje iniciaba con varias armas secundarias, ahora sólo inicia con dos: las cruces y la ohm (Búmeran) que son suficientes para pasar la DEMO, posteriormente daré la posibilidad de obtener los frascos de agua bendita (se usaban como bombas) y fuego para el lanzallamas.<br />
<br />
Se puede poner el juego en "<b>FullScreen</b>" apretando 'F4' aunque la resolución disminuye.<br />
<br />
Enlace de Descarga:<br />
<a href="https://drive.google.com/folderview?id=0B6J7PWBjtBf7UlRJelJUc2dEekU&usp=sharing" rel="nofollow" target="_blank">DEMO II</a><br />
(Es necesario descomprimir el juego para jugarlo correctamente.)</div>
knd144http://www.blogger.com/profile/02561972998748075660noreply@blogger.com1tag:blogger.com,1999:blog-6252313676033631273.post-81375909916907496512013-03-22T21:39:00.005-07:002013-12-15T15:34:17.351-08:00Crear PDF con PHP [Dompdf]<b>Dompdf</b> es una librería de PHP que permite tomar una página HTML y renderizarla (convertirla) a un PDF; aunque realmente no se crea un archivo PDF pero para el usuario de la página web se verá un auténtico archivo de éste tipo y podrá imprimirlo, guardarlo y tratarlo en su totalidad como uno.<br />
<br />
Su uso es muy sencillo, pondré un sencillo ejemplo de su uso básico:<br />
<br />
Tenemos una página HTML con éste código:<br />
<br />
<br />
<span style="background-color: #7f6000;"><html></span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span><head></span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span><title>Archivo pdf</title></span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span></head></span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span><body></span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span><center></span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span><h1>P&aacute;gina renderizada a PDF</h1></span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span></center></span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span></body></span><br />
<span style="background-color: #7f6000;"></html></span><br />
<br />
<br />
La página se llama "pagina1.html". (Se ve así: <a href="http://unrinconenlaweb.webcindario.com/programas/pdf/pagina1.html" target="_blank">http://unrinconenlaweb.webcindario.com/programas/pdf/pagina1.html</a>)<br />
Ahora, para renderizarla a un PDF es necesario crear una página php con el siguiente código:<br />
<br />
<br />
<span style="background-color: #7f6000;"><?php</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>require_once("dompdf/dompdf_config.inc.php"); //Aquí se incluye la librería php del Dompdf</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>$file = file_get_contents("pagina1.html"); //Se "extrae" la página que se convertirá a PDF</span><br />
<span class="Apple-tab-span" style="background-color: #7f6000; white-space: pre;"> </span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>$dompdf = new DOMPDF(); //Se crea un objeto del tipo DOMPDF</span><br />
<span style="background-color: #7f6000;"> $dompdf->load_html($file); //Se le "carga" la página que convertiremos</span><br />
<span style="background-color: #7f6000;"> $dompdf->render(); //Se manda a llamar el método para renderizar</span><br />
<span style="background-color: #7f6000;"> </span><br />
<span style="background-color: #7f6000;"> header('Content-type: application/pdf'); //Ésta es simplemente la cabecera para que el navegador interprete todo como un PDF</span><br />
<span style="background-color: #7f6000;"> echo $dompdf->output(); //Y con ésto se manda a imprimir el contenido del pdf</span><br />
<span style="background-color: #7f6000;">?></span><br />
<br />
<br />
El resultado será éste: <a href="http://unrinconenlaweb.webcindario.com/programas/pdf/ejemplo1.php" target="_blank">http://unrinconenlaweb.webcindario.com/programas/pdf/ejemplo1.php</a><br />
Como se nota, hay que abrir la página .php en lugar de la .html<br />
<br />
Ahora, en más de la mitad de las ocasiones se requerirá que la información a mostrar en el PDF varíe, como puede ser una fecha, el nombre del usuario o cualquier otro dato.<br />
Para eso, hay que poner en la página .html palabras "claves" que después serán reemplazadas por los valores dinámicos a la hora de renderizar.<br />
Es éste ejemplo voy a poner 3 valores numéricos aleatorios en el PDF.<br />
Para empezar, aquí está la página html (Se llama "pagina2.html")<br />
<br />
<span style="background-color: #7f6000;"><html></span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span><head></span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span><title>Archivo pdf</title></span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span></head></span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span><body></span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span><center></span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span><h1>P&aacute;gina renderizada a PDF</h1></span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span></center></span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span><br /></span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span><br /></span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span><li><b>Dato 1:</b> {#dato1}</li></span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span><li><b>Dato 2:</b> {#dato2}</li></span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span><li><b>Dato 3:</b> {#dato3}</li></span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span></body></span><br />
<span style="background-color: #7f6000;"></html></span><br />
<br />
<br />
Se ve así: <a href="http://unrinconenlaweb.webcindario.com/programas/pdf/pagina2.html" target="_blank">http://unrinconenlaweb.webcindario.com/programas/pdf/pagina2.html</a><br />
Como se puede notar, están escritas "{#dato1}" "{#dato2}" y "{#dato3}" que en éste caso servirán de "palabras clave" que reemplazaré por número generados aleatoriamente.<br />
La página php contiene lo siguiente:<br />
<br />
<br />
<span style="background-color: #7f6000;"><?php</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>require_once("dompdf/dompdf_config.inc.php"); //Se incluye la librería Dompdf</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>$file = file_get_contents("pagina2.html"); //Se "extrae" la página a renderizar</span><br />
<span class="Apple-tab-span" style="background-color: #7f6000; white-space: pre;"> </span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>$dato1=rand(1,100); //guardo en una variable un número random entre 1 y 100</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>$dato2=rand(101,200); //guardo en otra variable un número aleatorio entre 101 y 200</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>$dato3=rand(300,10000); // y guardo en una tercera variable un número aleatorio entre 300 y 10000</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>$dompdf = new DOMPDF(); //creo un objeto de la clase DOMPDF</span><br />
<span style="background-color: #7f6000;"> </span><br />
<span style="background-color: #7f6000;"> /*En la siguiente función reemplazo las "palabras clave" por los valores aleatorios de las variables que creé arriba*/</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>$html = str_replace( //a la variable $html guardo lo que me arroja la función str_replace</span><br />
<span style="background-color: #7f6000;"> array(</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>"{#dato1}","{#dato2}","{#dato3}" //éstas son las palabras claves a reemplazar</span><br />
<span style="background-color: #7f6000;"> ), </span><br />
<span style="background-color: #7f6000;"> array(</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>$dato1,$dato2,$dato3 //éstos son los datos que sustituirán las palabras claves</span><br />
<span style="background-color: #7f6000;"> ), </span><br />
<span style="background-color: #7f6000;"> $file //y se reemplazará de la página cargada en ésta variable, lo que hice más arriba</span><br />
<span style="background-color: #7f6000;"> );</span><br />
<span style="background-color: #7f6000;"> $dompdf->load_html($html); //Se carga la página que convertiremos ya con los reemplazos</span><br />
<span style="background-color: #7f6000;"> $dompdf->render(); //mandamos a llamar el método para renderizar</span><br />
<span style="background-color: #7f6000;"> </span><br />
<span style="background-color: #7f6000;"> header('Content-type: application/pdf'); //ponemos la cabecera para PDF</span><br />
<span style="background-color: #7f6000;"> echo $dompdf->output(); //se imprime el documento PDF</span><br />
<span style="background-color: #7f6000;">?></span><br />
<br />
<br />
El resultado será así: <a href="http://unrinconenlaweb.webcindario.com/programas/pdf/ejemplo2.php" target="_blank">http://unrinconenlaweb.webcindario.com/programas/pdf/ejemplo2.php</a><br />
Cada vez que se recarga la página, se muestran 3 valores diferentes en los campos.<br />
<br />
Para descargar los ejemplos y la librería, aquí está el enlace:<br />
<a href="https://dl.dropbox.com/u/46960544/pdf.rar">https://dl.dropbox.com/u/46960544/pdf.rar</a>knd144http://www.blogger.com/profile/02561972998748075660noreply@blogger.com10tag:blogger.com,1999:blog-6252313676033631273.post-34098834687360060682013-01-24T22:21:00.001-08:002014-04-24T08:43:17.759-07:00Buscador dinámico [AJAX, JQuery]Un "diseño" interesante para un buscador podría ser uno que, al momento de teclear en el campo de búsqueda, se fueran mostrando en "tiempo real" los resultados en el espacio correspondiente.<br />
<br />
Una buena forma de hacerlo es mediante JQuery que tiene un mejor manejo de los eventos y brinda un sencillo método para manejar AJAX.<br />
<br />
Para nuestro ejemplo, vamos a considerar que tenemos una Base de datos "busqueda" con la tabla "post" que contiene los siguientes campos:<br />
<br />
<u>| id | titulo | contenido |<br />| 1 | | |</u><br />
<u><br /></u>
Crearemos primero nuestro archivo .php que será el que realizará la búsqueda en la base de datos y mostrará los resultados en una tabla:<br />
<br />
Conectamos primero a la base de datos:<br />
<span style="background-color: #7f6000;"><?php</span><br />
<br />
<span style="background-color: #7f6000;">$dbhost = "localhost";</span><br />
<span style="background-color: #7f6000;">$dbuser = "root";</span><br />
<span style="background-color: #7f6000;">$dbpass = "";</span><br />
<span style="background-color: #7f6000;">$mysqli = new mysqli($dbhost,$dbuser,$dbpass,"busqueda");</span><br />
<br />
<span style="background-color: #7f6000;">?></span><br />
<br />
Luego comprobaremos si recibimos el parámetro de búsqueda por POST además de evitar que éste sea un espacio en blanco:<br />
<br />
<span style="background-color: #7f6000;"><?php</span><br />
<span style="background-color: #7f6000;"><br /></span>
<br />
<span style="background-color: #7f6000;">if(isset($_POST['parametro'])) //Verificamos que venga el parámetro vía POST</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>{</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>$parametro=trim($_POST['parametro']); //Limpiamos los espacios en blanco</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>if($parametro!="") //Comprobamos que no quede una cadena vacía</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>{</span><br />
<span style="background-color: #7f6000;">....</span><br />
<br />
Ahora lo sencillo, realizar la búsqueda en la base de datos buscando tanto en el campo "título" como en el campo "contenido" coincidencias con respecto al parámetro buscado y lo metemos todo a una tabla:<br />
<br />
<span style="background-color: #7f6000;"><?php</span><br />
<span style="background-color: #7f6000;"><br /></span>
<br />
<span style="background-color: #7f6000;">$result = $mysqli->query("SELECT * FROM post WHERE titulo LIKE '%$parametro%' or contenido LIKE '%$parametro%';");</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>$resultados = array();</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>while ($row_errs = $result->fetch_array()) </span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>{ </span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>$resultados[]= $row_errs; </span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>}</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>?></span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span><table></span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span><?php</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>foreach($resultados as $post):</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>?></span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span><tr></span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span><td></span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span><?php echo $post['titulo'].": "; ?></span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span></td></span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span><td></span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span><?php echo $post['contenido']; ?></span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span></td></span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span></tr></span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span><?php</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>endforeach;</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>?></span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span></table></span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span><?php</span><br />
<br />
<span style="background-color: #7f6000;"><br /></span>
<span style="background-color: #7f6000;">?></span><br />
<br />
El archivo de búsqueda quedaría así:<br />
<a href="https://docs.google.com/viewer?pid=explorer&srcid=0B6J7PWBjtBf7NkdRUGpETER4Slk&docid=cadafacf1f5b96b99814ce33807d66c3%7C4f3ffe3453fcc4fbebdb9c2d1a20633e&chan=EQAAAA8LvA02xaV5oHkEJEKrOnrSwmkYEVNd9SrNBPnFb8lA&a=v&rel=rar;r1;busqueda.php" target="_blank">Visualizar archivo de busqueda.php</a><br />
<br />
Ahora la página que ofrecerá la interfaz para la búsqueda (que puede ser un simple html).<br />
Primero que nada se debe tener el <a href="http://jquery.com/" target="_blank">archivo de JQuery</a> e insertarlo en la página:<br />
<br />
<span style="background-color: #7f6000;"><script type="text/javascript" src="jquery-1.3.2.min.js"></script></span><br />
<br />
Ahora bien, lo único que necesitamos es un <i><u>input </u></i>tipo <u><i>text</i></u> en el cual introducir el texto a buscar y un <i><u>div</u></i> el cual mostrará los resultados arrojados por el archivo de <u><i>busqueda.php</i></u> :<br />
<br />
<br />
<span style="background-color: #7f6000;"><input type="text" id="parametro" /></span><br />
<span style="background-color: #7f6000;"><br /></span><br />
<span style="background-color: #7f6000;"><br /></span><br />
<span style="background-color: #7f6000;"><div id="resultado" style="border: solid black 1px;"></div></span><br />
<br />
Y, por último, la "magia" de JQuery, con JavaScript se hará una función que, tanto al presionar una tecla como al soltarla mientras se esté escribiendo en el campo de texto, se extraiga el contenido del input, se envíe por POST a <i><u>búsqueda.php</u></i> y se recarge el <u><i>div</i></u> con el resultado obtenido:<br />
<br />
<br />
<span style="background-color: #7f6000;"><script type="text/javascript"></span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>$(document).ready(function() {</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>$("#parametro").keydown( //Evento de presionar una tecla en el campo cuyo id sea "parametro"</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>function(event)</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>{</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>var param = $("#parametro").attr("value"); //Se obtiene el valor del campo de texto</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>$("#resultado").load('busqueda.php',{parametro:param}); //Y se envía por vía post al archivo busqueda.php para luego recargar el div con el resultado obtenido</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>}</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>);</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>});</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>$(document).ready(function() {</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>$("#parametro").keyup( //Evento de soltar una tecla en el campo cuyo id sea "parametro"</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>function(event)</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>{</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>var param = $("#parametro").attr("value"); //Se obtiene el valor del campo de texto</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>$("#resultado").load('busqueda.php',{parametro:param}); //Y se envía por vía post al archivo busqueda.php para luego recargar el div con el resultado obtenido</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>}</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>);</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>});</span><br />
<span style="background-color: #7f6000;"></script></span><br />
<div>
<br /></div>
<div>
Pues nada difícil realmente, gracias a la ayuda de JQuery.</div>
<div>
<br /></div>
<div>
Para ver cómo resultaría implementado éste "buscador" aquí un ejemplo con una base de datos que se le han introducido 5 registro:</div>
<div>
<a href="http://unrinconenlaweb.webcindario.com/buscador/index.html" target="_blank">http://unrinconenlaweb.webcindario.com/buscador/index.html</a></div>
<div>
<br /></div>
<div>
Para descargar el ejemplo, aquí el enlace de google drive:</div>
<div>
<br /></div>
<div>
<a href="https://docs.google.com/file/d/0B6J7PWBjtBf7NkdRUGpETER4Slk/edit" target="_blank">https://docs.google.com/file/d/0B6J7PWBjtBf7NkdRUGpETER4Slk/edit</a></div>
<br />
<br />knd144http://www.blogger.com/profile/02561972998748075660noreply@blogger.com7tag:blogger.com,1999:blog-6252313676033631273.post-68200904263942267422013-01-24T10:37:00.000-08:002013-01-25T08:55:24.226-08:00[Demostración] Extraer datos de una Web (SQL Injection)Posiblemente sean pocos a los que no les haya llamado la atención éste tema.<br />
La inyección SQL (SQL injection o SQLi) es la forma más sencilla de lograr extraer los datos de un sistema, entre otras cosas, y la más común (debido al mismo caso).<br />
<br />
Éste método consiste en alterar una consulta original que se realiza a la base de datos introduciendo un texto extra, que debe ser correcto, con el cual le indicamos qué queremos obtener.<br />
<br />
Por ejemplo, suponiendo que se busca un usuario cuyo nombre se encuentre en una variable que es rellenada por el usuario:<br />
<br />
<span style="background-color: #7f6000;">"Select * FROM usuario WHERE nombre='$nombre';"</span><br />
<br />
Si el valor de la variable $nombre fuera normal, como por ejemplo darknet, la consulta sería:<br />
<br />
<span style="background-color: #7f6000;">"Select * FROM usuario WHERE nombre='</span><span style="background-color: #274e13;">darknet</span><span style="background-color: #7f6000;">';"</span><br />
<span style="background-color: #7f6000;"><br /></span>
Por ahora todo funcionaría correctamente, pero ¿Qué pasaría si no se filtran bien los valores introducidos en la variable $nombre?<br />
La respuesta es que se puede deformar la consulta para obtener un resultado indeseado para el sistema pero correcto para el atacante.<br />
En el mismo ejemplo, vamos a darle a la variable $nombre el valor de <span style="background-color: #274e13;">darknet' or nombre LIKE '%%</span>; la consulta alterada sería:<br />
<br />
<span style="background-color: #7f6000;">"SELECT * FROM usuario WHERE nombre='</span><span style="background-color: #274e13;">darknet' or nombre LIKE '%%</span><span style="background-color: #7f6000;">';"</span><br />
<br />
De ésta forma la consulta traería los datos de TODOS los usuarios en lugar de sólo 1.<br />
Ahora bien, ya que se entiende el funcionamiento de una inyección, el método que se utiliza (en este caso) para obtener los datos de una página Web es manejando los parámetros GET de la página.<br />
Los parámetros GET son aquellos que se observan en la URL del sitio y que, por lo general, van después del signo de '?'.<br />
Por ejemplo, se tiene la siguiente URL:<br />
http://www.paginaweb.com/index.php?search=123&status=2<br />
<br />
Los parámetros GET de la URL son: search=123&status=2; como cada parámetro está separado por el signo &, así pues tenemos 2 parámetros: search y status, cuyos valores son '123' y '2' respectivamente. Éstos parámetros llegan a ser usados por los programadores para hacer consultas a la base de datos, como por ejemplo en las páginas de noticias o blogs en donde utilizan un parámetro para buscar el Id de la nota que se va a mostrar.<br />
Claro que, aunque se usen los parámetros GET ésto no quiere decir que la página sea vulnerable ya que se pueden filtrar los valores obtenidos en los parámetros y ver si son legítimos o no.<br />
<br />
Pero bien, al tener entendido cómo funciona ésta mecánica les presento un vídeo en donde se hace una demostración a la hora de indagar y extraer datos de una Base de datos en una página vulnerable:<br />
<br />
<br />
<iframe allowfullscreen="" frameborder="0" height="480" src="http://www.youtube.com/embed/KDwoUJv4WcM" width="640"></iframe>
<br />
Por si la resolución del vídeo a la hora de subirlo a YouTuBe no es muy apreciable, aquí les dejo el enlace de descarga directa: <a href="https://dl.dropbox.com/u/46960544/inyeccion%20SQL.mp4">https://dl.dropbox.com/u/46960544/inyeccion%20SQL.mp4</a><br />
<br />
Siendo ésto todo, me despido...knd144http://www.blogger.com/profile/02561972998748075660noreply@blogger.com0tag:blogger.com,1999:blog-6252313676033631273.post-8794658067423537492013-01-04T12:28:00.000-08:002013-01-04T12:32:36.215-08:00[Demostración] Figuras sencillas en Blender<br />
El modelado en 3D, sea el programa que sea, fácilmente se complica para la mayoría de los usuarios debido a que es un entorno precisamente en 3 dimensiones. Pero la mayoría de las complicaciones no se dan por el programa que se esté utilizando sino en la forma de pensar del usuario que casi siempre espera encontrar formas pre-determinadas o tutoriales para realizar las figuras que requiere, o simplemente el entorno de desarrollo le agobia sin permitirle usar la creatividad para realizar las figuras más sencillas a partir de las formas y herramientas más básicas.<br />
<br />
El vídeo que presento es precisamente una demostración (y no un tutorial de ¿Cómo crear un(a)...?) de lo sencillo que es crear figuras simples a partir de las formas básicas.<br />
<br />
Las figuras que demuestro en el vídeo son 1 pino, arbol y una cabeza humana (de una mujer).<br />
Uso la versión de BLender 2.64 y no utilizo ninguna herramienta adicional del programa únicamente las transformaciones (escalado, duplicado y rotación).<br />
<br />
<iframe allowfullscreen="allowfullscreen" frameborder="0" height="315" src="http://www.youtube.com/embed/bWJOFs7C-c8" width="420"></iframe><br />
<br />
Espero que el video sea una buena demostración que para hacer trabajos no profesionales no se requiere de una gran cantidad de herramientas ni de tiempo, es sólo cuestión de creatividad y de usar las figuras como un rompecabezas. Espero en breve hacer una demostración de figuras un poco más complejas utilizando herramientas más interesantes (distorción de nodos y operaciones booleanas).<br />
<br />
Me despido.knd144http://www.blogger.com/profile/02561972998748075660noreply@blogger.com0tag:blogger.com,1999:blog-6252313676033631273.post-42071322960344938982012-12-19T18:55:00.001-08:002015-06-03T07:57:50.323-07:00Botón para mostrar ayuda [HTML, CSS, JavaScript]La idea es muy simple, se quiere dar al usuario la opción de ver, en una página web, la ayuda o información que tal vez quiera saber.<br />
Aunque es seguido que se quiere "llenar" espacio en una página, hay ocasiones en las que no se cuenta con mucho espacio o no se quiere amontonar elementos en la interfaz.<br />
Para ello está este sencillo método: un "botón" que al pasar el cursor por encima de éste se muestra un div con la información que se desea mostrar; al quitarse el cursor la información también se oculta.<br />
<br />
Primero, tenemos el DIV en el cual se muestra la ayuda:<br />
<br />
<br />
<span style="background-color: #7f6000;"><div id="ayuda"></span><br />
<span style="background-color: #7f6000;"> <b></span><br />
<span style="background-color: #7f6000;"> Instrucciones de uso:</span><br />
<span style="background-color: #7f6000;"> <br /></span><br />
<span style="background-color: #7f6000;"> .....</span><br />
<span style="background-color: #7f6000;"> </b></span><br />
<span style="background-color: #7f6000;"></div></span><br />
<span style="background-color: #7f6000;"><br /></span>
Lo importante es el "id" del div.<br />
Ahora, lo esencial es que inicialmente esté oculto y que, cuando se muestre, esté encima de todos los demás elementos de la página. En sí, sólo hace falta los siguientes 2 atributos CSS:<br />
<br />
<br />
<span style="background-color: #7f6000;">visibility: hidden;</span><br />
<span style="background-color: #7f6000;">z-index: 5000;</span><br />
<br />
Más, para mi gusto, se vería bien que estuviera sombrado y con esquinas redondeadas. Ésto es opcional claramente, pero el CSS del div sería:<br />
<br />
<br />
<span style="background-color: #7f6000;">#ayuda{</span><br />
<span style="background-color: #7f6000;"> border: solid gray 1px;</span><br />
<span style="background-color: #7f6000;"> width: 250px;</span><br />
<span style="background-color: #7f6000;"> background-color: white;</span><br />
<span style="background-color: #7f6000;"> box-shadow: 6px 6px 5px #999;</span><br />
<span style="background-color: #7f6000;"> -webkit-box-shadow: 6px 6px 5px #999;</span><br />
<span style="background-color: #7f6000;"> -moz-box-shadow: 6px 6px 5px #999;</span><br />
<span style="background-color: #7f6000;"> visibility: hidden;</span><br />
<span style="background-color: #7f6000;"> z-index: 5000;</span><br />
<span style="background-color: #7f6000;"> }</span><br />
<br />
Después el botón, que realmente no será un botón sino un enlace; pero antes, mencionaré las funciones en JavaScript para ocultar y mostrar el DIV de ayuda:<br />
<br />
<br />
<span style="background-color: #7f6000;">function mostrarAyuda()</span><br />
<span style="background-color: #7f6000;">{</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>document.getElementById('ayuda').style.visibility = "visible";</span><br />
<span style="background-color: #7f6000;">}</span><br />
<span style="background-color: #7f6000;">function ocultarAyuda()</span><br />
<span style="background-color: #7f6000;">{</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>document.getElementById('ayuda').style.visibility = "hidden";</span><br />
<span style="background-color: #7f6000;">}</span><br />
<br />
La función "mostrarAyuda" le asigna el valor "visible" al atributo "visibility" al div de ayuda. Lo cual hace que se muestre.<br />
La función "ocultarAyuda" le asigna el valor "hidden" (oculto) al atributo "visibility" al div de ayuda. Lo cual hace que se oculte.<br />
Y bueno, el enlace (que servirá de botón) para mostrar y ocultar la ayuda al pasar el cursor por encima:<br />
<br />
<span style="background-color: #7f6000;"><a id="boton" href="#" onmouseover="javascript:mostrarAyuda()" onmouseout ="javascript:ocultarAyuda()">Ayuda</a></span><br />
<br />
Ahí, el evento onmouseover (cuando se le pasa el cursor por encima) manda a llamar la función "mostrarAyuda". Caso contrario con el evento "onmouseout" llama la función "ocultarAyuda".<br />
<br />
Y finalmente, el estilo del enlace que hará de botón. Como es muy complejo el estilo CSS para darle un buen toque elegante, además de que cambie según el cursor se encuentre encima o no, sólo les pongo el código CSS:<br />
<br />
<br />
<span style="background-color: #7f6000;">#boton {</span><br />
<span style="background-color: #7f6000;"> -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;</span><br />
<span style="background-color: #7f6000;"> -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;</span><br />
<span style="background-color: #7f6000;"> box-shadow:inset 0px 1px 0px 0px #ffffff;</span><br />
<span style="background-color: #7f6000;"> background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #d1d1d1) );</span><br />
<span style="background-color: #7f6000;"> background:-moz-linear-gradient( center top, #ffffff 5%, #d1d1d1 100% );</span><br />
<span style="background-color: #7f6000;"> filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#d1d1d1');</span><br />
<span style="background-color: #7f6000;"> background-color:#ffffff;</span><br />
<span style="background-color: #7f6000;"> -moz-border-radius:6px;</span><br />
<span style="background-color: #7f6000;"> -webkit-border-radius:6px;</span><br />
<span style="background-color: #7f6000;"> border-radius:6px;</span><br />
<span style="background-color: #7f6000;"> border:1px solid #dcdcdc;</span><br />
<span style="background-color: #7f6000;"> display:inline-block;</span><br />
<span style="background-color: #7f6000;"> color:#777777;</span><br />
<span style="background-color: #7f6000;"> font-family:arial;</span><br />
<span style="background-color: #7f6000;"> font-size:15px;</span><br />
<span style="background-color: #7f6000;"> font-weight:bold;</span><br />
<span style="background-color: #7f6000;"> padding:6px 24px;</span><br />
<span style="background-color: #7f6000;"> text-decoration:none;</span><br />
<span style="background-color: #7f6000;"> text-shadow:1px 1px 0px #ffffff;</span><br />
<span style="background-color: #7f6000;"> }</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>#boton:hover {</span><br />
<span style="background-color: #7f6000;"> background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d1d1d1), color-stop(1, #ffffff) );</span><br />
<span style="background-color: #7f6000;"> background:-moz-linear-gradient( center top, #d1d1d1 5%, #ffffff 100% );</span><br />
<span style="background-color: #7f6000;"> filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d1d1d1', endColorstr='#ffffff');</span><br />
<span style="background-color: #7f6000;"> background-color:#d1d1d1;</span><br />
<span style="background-color: #7f6000;"> }</span><br />
<span style="background-color: #7f6000;"><span class="Apple-tab-span" style="white-space: pre;"> </span>#boton:active {</span><br />
<span style="background-color: #7f6000;"> position:relative;</span><br />
<span style="background-color: #7f6000;"> top:1px;</span><br />
<span style="background-color: #7f6000;"> }</span><br />
<br />
<br />
El resultado se vería así:<br />
<a href="http://unrinconenlaweb.webcindario.com/programas/boton_ayuda/pagina.html" target="_blank">http://unrinconenlaweb.webcindario.com/programas/boton_ayuda/pagina.html</a><br />
<br />
Y pueden descargar los archivos, separado el CSS, JS y HTML para un manejo más sencillo :D<br />
<br />
<a href="https://docs.google.com/open?id=0B6J7PWBjtBf7TUxzZEFkYVlvWjA" target="_blank">https://docs.google.com/open?id=0B6J7PWBjtBf7TUxzZEFkYVlvWjA</a><br />
<br />
<br />
<br />knd144http://www.blogger.com/profile/02561972998748075660noreply@blogger.com0