Rincon knd144

Podrán golpearme, romperme los huesos, matarme, tendrán mi cádaver, pero no mi obediencia.

martes, 2 de abril de 2013

DEMO II: AQuilesVania

Considerando que ya está terminada la mecánica del juego y sólo hace falta aumentarle "historia", libero una segunda DEMO funcional del AQuilesVania.

Sinopsis:
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.

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...

Capturas:

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.

Se puede poner el juego en "FullScreen" apretando 'F4' aunque la resolución disminuye.

Enlace de Descarga:
DEMO II
(Es necesario descomprimir el juego para jugarlo correctamente.)

viernes, 22 de marzo de 2013

Crear PDF con PHP [Dompdf]

Dompdf 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.

Su uso es muy sencillo, pondré un sencillo ejemplo de su uso básico:

Tenemos una página HTML con éste código:

<html>
<head>
<title>Archivo pdf</title>
</head>
<body>
<center>
<h1>Página renderizada a PDF</h1>
</center>
</body>
</html>

La página se llama "pagina1.html". (Se ve así: http://unrinconenlaweb.webcindario.com/programas/pdf/pagina1.html)
Ahora, para renderizarla a un PDF es necesario crear una página php con el siguiente código:

<?php
require_once("dompdf/dompdf_config.inc.php"); //Aquí se incluye la librería php del Dompdf
$file = file_get_contents("pagina1.html"); //Se "extrae" la página que se convertirá a PDF

$dompdf = new DOMPDF(); //Se crea un objeto del tipo DOMPDF
$dompdf->load_html($file); //Se le "carga" la página que convertiremos
$dompdf->render(); //Se manda a llamar el método para renderizar

header('Content-type: application/pdf'); //Ésta es simplemente la cabecera para que el navegador interprete todo como un PDF
echo $dompdf->output(); //Y con ésto se manda a imprimir el contenido del pdf
?>

El resultado será éste: http://unrinconenlaweb.webcindario.com/programas/pdf/ejemplo1.php
Como se nota, hay que abrir la página .php en lugar de la .html

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.
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.
Es éste ejemplo voy a poner 3 valores numéricos aleatorios en el PDF.
Para empezar, aquí está la página html (Se llama "pagina2.html")

<html>
<head>
<title>Archivo pdf</title>
</head>
<body>
<center>
<h1>Página renderizada a PDF</h1>
</center>
<br />
<br />
<li><b>Dato 1:</b> {#dato1}</li>
<li><b>Dato 2:</b> {#dato2}</li>
<li><b>Dato 3:</b> {#dato3}</li>
</body>
</html>

Se ve así: http://unrinconenlaweb.webcindario.com/programas/pdf/pagina2.html
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.
La página php contiene lo siguiente:

<?php
require_once("dompdf/dompdf_config.inc.php"); //Se incluye la librería Dompdf
$file = file_get_contents("pagina2.html"); //Se "extrae" la página a renderizar

$dato1=rand(1,100); //guardo en una variable un número random entre 1 y 100
$dato2=rand(101,200); //guardo en otra variable un número aleatorio entre 101 y 200
$dato3=rand(300,10000); // y guardo en una tercera variable un número aleatorio entre 300 y 10000
$dompdf = new DOMPDF(); //creo un objeto de la clase DOMPDF

/*En la siguiente función reemplazo las "palabras clave" por los valores aleatorios de las variables que creé arriba*/
$html = str_replace( //a la variable $html guardo lo que me arrija la función str_replace
array(
"{#dato1}","{#dato2}","{#dato3}" //éstas son las palabras claves a reemplazar
),
array(
$dato1,$dato2,$dato3 //éstos son los datos que sustituirán las palabras claves
),
$file //y se reemplazará de la página cargada en ésta variable, lo que hice más arriba
);
$dompdf->load_html($html); //Se carga la página que convertiremos ya con los reemplazos
$dompdf->render(); //mandamos a llamar el método para renderizar

header('Content-type: application/pdf'); //ponemos la cabecera para PDF
echo $dompdf->output(); //se imprime el documento PDF
?>

El resultado será así: http://unrinconenlaweb.webcindario.com/programas/pdf/ejemplo2.php
Cada vez que se recarga la página, se muestran 3 valores diferentes en los campos.

Para descargar los ejemplos y la librería, aquí está el enlace:
https://dl.dropbox.com/u/46960544/pdf.rar

jueves, 24 de enero de 2013

Buscador 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.

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.

Para nuestro ejemplo, vamos a considerar que tenemos una Base de datos "busqueda" con la tabla "post" que contiene los siguientes campos:

| id | titulo | contenido |
| 1 | | |

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:

Conectamos primero a la base de datos:
<?php

$dbhost = "localhost";
$dbuser = "root";
$dbpass = "";
$mysqli = new mysqli($dbhost,$dbuser,$dbpass,"busqueda");

?>

Luego comprobaremos si recibimos el parámetro de búsqueda por POST además de evitar que éste sea un espacio en blanco:

<?php

if(isset($_POST['parametro'])) //Verificamos que venga el parámetro vía POST
{
$parametro=trim($_POST['parametro']); //Limpiamos los espacios en blanco
if($parametro!="") //Comprobamos que no quede una cadena vacía
{
....

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:

<?php

$result = $mysqli->query("SELECT * FROM post WHERE titulo LIKE '%$parametro%' or contenido LIKE '%$parametro%';");
$resultados = array();
while ($row_errs = $result->fetch_array())
{
$resultados[]= $row_errs;
}
?>
<table>
<?php
foreach($resultados as $post):
?>
<tr>
<td>
<?php echo $post['titulo'].": "; ?>
</td>
<td>
<?php echo $post['contenido']; ?>
</td>
</tr>
<?php
endforeach;
?>
</table>
<?php

?>

El archivo de búsqueda quedaría así:
Visualizar archivo de busqueda.php

Ahora la página que ofrecerá la interfaz para la búsqueda (que puede ser un simple html).
Primero que nada se debe tener el archivo de JQuery e insertarlo en la página:

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

Ahora bien, lo único que necesitamos es un input tipo text en el cual introducir el texto a buscar y un div el cual mostrará los resultados arrojados por el archivo de busqueda.php :

<input type="text" id="parametro" />
<br />
<br />
<div id="resultado" style="border: solid black 1px;"></div>

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 búsqueda.php y se recarge el div con el resultado obtenido:

<script type="text/javascript">
$(document).ready(function() {
$("#parametro").keydown( //Evento de presionar una tecla en el campo cuyo id sea "parametro"
function(event)
{
var param = $("#parametro").attr("value"); //Se obtiene el valor del campo de texto
$("#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
}
);
});
$(document).ready(function() {
$("#parametro").keyup( //Evento de soltar una tecla en el campo cuyo id sea "parametro"
function(event)
{
var param = $("#parametro").attr("value"); //Se obtiene el valor del campo de texto
$("#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
}
);
});
</script>

Pues nada difícil realmente, gracias a la ayuda de JQuery.

Para ver cómo resultaría implementado éste "buscador" aquí un ejemplo con una base de datos que se le han introducido 5 registro:

http://unrinconenlaweb.webcindario.com/buscador/index.html

Para descargar el ejemplo, aquí el enlace de google drive:

https://docs.google.com/file/d/0B6J7PWBjtBf7NkdRUGpETER4Slk/edit

[Demostración] Extraer datos de una Web (SQL Injection)

Posiblemente sean pocos a los que no les haya llamado la atención éste tema.
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).

É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.

Por ejemplo, suponiendo que se busca un usuario cuyo nombre se encuentre en una variable que es rellenada por el usuario:

"Select * FROM usuario WHERE nombre='$nombre';"

Si el valor de la variable $nombre fuera normal, como por ejemplo darknet, la consulta sería:

"Select * FROM usuario WHERE nombre='darknet';"

Por ahora todo funcionaría correctamente, pero ¿Qué pasaría si no se filtran bien los valores introducidos en la variable $nombre?
La respuesta es que se puede deformar la consulta para obtener un resultado indeseado para el sistema pero correcto para el atacante.
En el mismo ejemplo, vamos a darle a la variable $nombre el valor de darknet' or nombre LIKE '%%; la consulta alterada sería:

"SELECT * FROM usuario WHERE nombre='darknet' or nombre LIKE '%%';"

De ésta forma la consulta traería los datos de TODOS los usuarios en lugar de sólo 1.
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.
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 '?'.
Por ejemplo, se tiene la siguiente URL:
http://www.paginaweb.com/index.php?search=123&status=2

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.
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.

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:

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: https://dl.dropbox.com/u/46960544/inyeccion%20SQL.mp4

Siendo ésto todo, me despido...

viernes, 4 de enero de 2013

[Demostración] Figuras sencillas en Blender

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.

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.

Las figuras que demuestro en el vídeo son 1 pino, arbol y una cabeza humana (de una mujer).
Uso la versión de BLender 2.64 y no utilizo ninguna herramienta adicional del programa únicamente las transformaciones (escalado, duplicado y rotación).

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).

Me despido.

miércoles, 19 de diciembre de 2012

Botó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.
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.
Para ello está este sencillo método: un "botón" que al pasar por 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.

Primero, tenemos el DIV en el cual se muestra la ayuda:

<div id="ayuda">
<b>
Instrucciones de uso:
<br />
.....
</b>
</div>

Lo importante es el "id" del div.
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:

visibility: hidden;
z-index: 5000;

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:

#ayuda{
border: solid gray 1px;
width: 250px;
background-color: white;
box-shadow: 6px 6px 5px #999;
-webkit-box-shadow: 6px 6px 5px #999;
-moz-box-shadow: 6px 6px 5px #999;
visibility: hidden;
z-index: 5000;
}

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:

function mostrarAyuda()
{
document.getElementById('ayuda').style.visibility = "visible";
}
function ocultarAyuda()
{
document.getElementById('ayuda').style.visibility = "hidden";
}

La función "mostrarAyuda" le asigna el valor "visible" al atributo "visibility" al div de ayuda. Lo cual hace que se muestre.
La función "ocultarAyuda" le asigna el valor "hidden" (oculto) al atributo "visibility" al div de ayuda. Lo cual hace que se oculte.
Y bueno, el enlace (que servirá de botón) para mostrar y ocultar la ayuda al pasar el cursor por encima:

<a id="boton" href="#" onmouseover="javascript:mostrarAyuda()" onmouseout ="javascript:ocultarAyuda()">Ayuda</a>

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".

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:

#boton {
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #d1d1d1) );
background:-moz-linear-gradient( center top, #ffffff 5%, #d1d1d1 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#d1d1d1');
background-color:#ffffff;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #dcdcdc;
display:inline-block;
color:#777777;
font-family:arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:1px 1px 0px #ffffff;
}
#boton:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d1d1d1), color-stop(1, #ffffff) );
background:-moz-linear-gradient( center top, #d1d1d1 5%, #ffffff 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d1d1d1', endColorstr='#ffffff');
background-color:#d1d1d1;
}
#boton:active {
position:relative;
top:1px;
}

El resultado se vería así:
http://unrinconenlaweb.webcindario.com/programas/boton_ayuda/pagina.html

Y pueden descargar los archivos, separado el CSS, JS y HTML para un manejo más sencillo :D

https://docs.google.com/open?id=0B6J7PWBjtBf7TUxzZEFkYVlvWjA

martes, 23 de octubre de 2012

Temporada de recitales ISMEV

TEMPORADA DE MÚSICA DE CÁMARA 2012

ANIVERSARIO X ISMEV (Instituto Superior de Música del Estado de Veracruz)

OCTUBRE

24.- Recital de cello y piano 18:00 hrs.
Invitados especiales: Makcim Fernández y Mónica Florescu.

31.- Recital de piano 18:00 hrs.
Invitados especiales: Teresita Jiménez y Aldo Tercero.

NOVIEMBRE

7.- Alumnos del maestro Abel Péres Pitón 18:00 hrs.

14.- Ensamble de maestros ISMEV 18:00 hrs.
Dir. Alfredo Hernández.

21.- Ensamble de percusiones ISMEV 18:00 hrs.
Maestros Jesús Reyes Y Eduardo Tellez.

28.- Dúo Karla y Rafael Jiménez 18:00 hrs.

DICIEMBRE

5.- Grupo de cámara, Maestros ISMEV, orquesta de cámara OSJEV 18:00 hrs.

Dir. Antonio Tornero.

10.- Recital de Trompeta 18:00 hrs.

Alumnos del maestro Tim Mckeown 18:00 hrs.

12.- Propedéutico en canto y artes escénicas 18:00 hrs.

Maestra Ana Luisa.

Imagen de cartelera