domingo, marzo 08, 2015

¡Preloader estilo Google!

Finalmente -y luego de mucho buscar y no encontrar- me decidí a crear mis propias "sprites" de preloaders tipo Google, y aquí se las dejo ... con algunas clases en LESS para ejemplo de uso.


LESS:  ---  ver http://lesscss.org
.cargando {
 -webkit-animation: animar-cargando 2.5s steps(38) infinite; /* Chrome, Safari, Opera */
 animation: animar-cargando 2.5s steps(38) infinite;
 background-size: auto 100%;
 &.amarillo{
  background-image: url(../img/cargando_sprite_Am.png);
 }
 &.azul{
  background-image: url(../img/cargando_sprite_Az.png);
 }
 &.rojo{
  background-image: url(../img/cargando_sprite_Rj.png);
 }
 &.blanco{
  background-image: url(../img/cargando_sprite_Bl.png);
 }
 &.gris{
  background-image: url(../img/cargando_sprite_Gs.png);
 }
 &.negro{
  background-image: url(../img/cargando_sprite_Ng.png);
 }
}
@t_ico:48px; // puede cambiar según se desee
.icono_48x48{
 width: @t_ico;
 height: @t_ico;
}
@-webkit-keyframes animar-cargando { /* Chrome, Safari, Opera */
    0%{
     background-position: 0px 0;
    }
    100%{
     background-position: @t_ico*-38 0;
     -webkit-transform: rotate(359deg);
    }
}
@keyframes animar-cargando {
    0%{
     background-position: 0px 0;
    }
    100%{
     background-position: @t_ico*-38 0;
     -webkit-transform: rotate(359deg);
    }
}

HTML:
<div class="cargando azul icono_48x48"></div>


Que las disfruten.
--
jjy

sábado, mayo 03, 2014

Crea hermosos botones planos con sombra tipo "long flat shadow" ...

Después de buscar largo rato en la web como obtener o generar mis propios íconos o botones del tipo "Long Flat Shadow" y toparme con muchas opciones "de pago", decidí embarcarme en el reto de generar mis propios íconos usando simplemente HTML y algo de jQuery y CSS.

Aquí les dejo una muestra de los resultados y el link para descargar los ejemplos.

Ir al artículo con el código fuente para descargar.

viernes, julio 20, 2012

Llamar a un procedimiento almacenado (stored procedure, SP) creado en MySQL, desde phpmyadmin o desde PHP (II parte)

Han pasado muchos años desde que creé el primero de 2 artículos en los que trataría de explicar de manera completa pero sencilla, cómo crear y ejecutar procedimientos almacenados en MySQL.
Gracias a los comentarios recibidos hasta el día de hoy, aún después de tanto tiempo inactivo este tópico, he decidido completarlo finalmente :) .
Para la creación de los códigos siguientes asumiremos tener una base de datos llamada "wpdemo" que posee una tabla llamada "wp_posts" con al menos dos campos: `post_excerpt`y `post_type`. Esta es en realidad una base de datos típica de WordPress, quienes conocen este framework para CMS, conocen de que se trata.
Si no tienes forma de probar en una base de datos de WordPress, basta con modificar los códigos fuente del ejemplo para darle sentido usando tus propias tablas y campos.

CREACIÓN DEL STORED PROCEDURE DE PRUEBA: (siguiendo las indicaciones del artículo anterior de esta serie)
DROP PROCEDURE `miSegundoProcedimientoAlmacenado` //
CREATE
DEFINER=`root`@`localhost`
PROCEDURE `miSegundoProcedimientoAlmacenado`(tipoPost varchar(20))
BEGIN Set names utf8;
SELECT * FROM `wp_posts` 
WHERE trim(`post_excerpt`) != "" AND `post_type` = tipoPost;
END //

Llegado a este punto y si todo está ok, deberemos tener en la base de datos una "Rutina" o procedimiento almacenado llamado miSegundoProcedimientoAlmacenado que podremos verificar haciendo clic en el enlace "+Rutinas" en la parte inferior de explorador de las tablas en phpMyAdmin.
El procedimiento que hemos creado espera recibir un parámetro que internamente hemos llamado "tipoPost" que modificará las condiciones de la consulta que traerá los datos.

LLAMANDO AL PROCEDIMIENTO ALMACENADO EN PHPMYADMIN
Para probar / ejecutar el procedimiento almacenado desde la pestaña de Consultas de phpMyAdmin usamos la siguiente consulta:

CALL miSegundoProcedimientoAlmacenado('post');

NOTA: Presta atención en la forma en que se pasan los parámetros al SP, usando comillas simples y paréntesis para encerrar los valores pasados.
Como verás, el resultado es un grupo de registros que cumplen con las condiciones definidas por el parámetro pasado al procedimiento y desde luego la consulta misma de la que consta el SP.

LLAMANDO AL PROCEDIMIENTO ALMACENADO DESDE PHP 
Para llamar o ejecutar el procedimiento almacenado desde php debemos realizar los pasos de conexión normales para acceder a mysql y las demás instrucciones siguientes:

$sql="call miSegundoProcedimientoAlmacenado('post');";
$res=@mysql_query($sql, $cnx) or die('Error en el query: '.mysql_errno($cnx).' - '.mysql_error($cnx));

NOTA: hay diferentes maneras de conectar y ejecutar queries en php, usa la manera que más te parezca conveniente, para efectos de este emplo, he usado una manera sencilla aunque de la vieja escuela :)
Así pues que si quieres crear el ejemplo completo y funcionando, debes crear un archivo en php con el código siguiente (o pareceido según los valores de tu servidor, base de datos, tablas, etc.)

ejemploSP.php

<!DOCTYPE html>
<html> 
<body> 
<pre> 
<?php
   $cnx=mysql_connect('localhost','root','321321'); // remplaza los datos de acceso por tus propios datos
   $db=mysql_select_db('wpdemo'); // remplaza el nombre de la base de datos por la tuya
   $sql="call miSegundoProcedimientoAlmacenado('post');";
   $res=@mysql_query($sql, $cnx) or die('Error en el query: '.mysql_errno($cnx).' - '.mysql_error($cnx));
   $c=0;
   while($reg=@mysql_fetch_assoc($res)){
      // coloca aquí el código de lo que desees hacer con los resultados 
      echo "Reg $c:\r";
      foreach($reg as $campo=>$valor){
         echo "\t$campo = ".utf8_decode($valor)."\r";
      }
      $c++;
   }
?>
</pre>
</html> 

Y bueno ... listo: la salida debe ser simplemente algo como esto:
Reg 0:
 ID = 3
 post_author = 1
 post_date = 2012-05-08 04:27:54
 post_date_gmt = 0000-00-00 00:00:00
 post_content = 
 post_title = Borrador automático
 post_excerpt = 
 post_status = auto-draft
 comment_status = open
 ping_status = open
 post_password = 
 post_name = 
 to_ping = 
 pinged = 
 post_modified = 2012-05-08 04:27:54
 post_modified_gmt = 0000-00-00 00:00:00
 post_content_filtered = 
 post_parent = 0
 guid = http://localhost/wordpress/?p=3
 menu_order = 0
 post_type = post
 post_mime_type = 
 comment_count = 0
Reg 1:
 ID = 1
 post_author = 1
 post_date = 2012-05-08 04:27:35
 post_date_gmt = 2012-05-08 04:27:35
 post_content = Bienvenido a WordPress. Esta es tu primera entrada. Edítala o bórrala, ¡y comienza a publicar!.
 post_title = ¡Hola mundo!
 post_excerpt = 
 post_status = publish
 comment_status = open
 ping_status = open
 post_password = 
 post_name = hola-mundo
 to_ping = 
 pinged = 
 post_modified = 2012-05-0804:27:35
 post_modified_gmt = 2012-05-08 04:27:35
 post_content_filtered = 
 post_parent = 0
 guid = http://localhost/wordpress/?p=1
 menu_order = 0
 post_type = post
 post_mime_type = 
 comment_count = 1
<< fin de la salida.

CONCLUSION 
Finalmente, el resultado debería ser igual o muy similar en los diferentes lenguajes (incluído Java), ya que el procesamiento de SP lo hace el manejador de base de datos y la manera de acceder a él es mediante un consulta sencilla, y (pese a que en otras versiones anteriores de php o mySQL parecía haber otro formato de resultados) con las versiones actuales el resultado de dicha consulta es una coleccion de registros, campos y valores igual que en una consulta habitual de mySQL.
Espero que con esto haya quedado cerrado el círculo pendiente de los procedimientos almacenados en mySql y su acceso desde php :-) 
Esta es sólo la punta del iceberg ... desde luego lo que logres hacer con esta potente herramienta y técnica depende sólo de tu ingenio y destreza con el lenguaje.

Éxitos y nos vemos en otro artículo.
--
jjyepez

sábado, abril 30, 2011

Recuperar o restaurar el password de root en MySQL

Sencillo (una vez que lo sabes ;) ):

Paso 1: Detener los servicios de MySQL.
mysqld -stop

Paso 2: Iniciar MySQL (mysqld) con la opción --skip-grant-tables para que no te pida el password.
mysqld -start --skip-grant-tables

Paso 3: Conectar a mysql server como root
mysql -u root.

Paso 4: Configurar el nuevo password de mysql para la cuenta root.
mysql> use mysql;
mysql> update user set password=PASSWORD("NEW-ROOT-PASSWORD") where User='root';
mysql> flush privileges; <- depende de la versión de mysql mysql> quit

Paso 5: Salir y reiniciar MySQL server.
mysqld -start

miércoles, abril 28, 2010

Google inicia liberación de nueva interfaz de búsqueda ...

Al parecer Google ha iniciado la liberación poco a poco de su mejorada y actualizada "nueva" intefaz que incluye un refrescado "nuevo" logo ...
Aquí les dejo algunos screenshots:
Home page ...


Y la página de resultados ahora tiene más funcionalidades ... parecidas a la de búsqueda de imágenes.



Al parecer la liberación ha sido paulatina y hasta me atrevería a decir que un poco "aleatoria" ya que me han reportado que no siempre es posible acceder y ver la nueva versión ... sino que a veces se ve la nueva y casi siempre la que ya todos conocemos.

Saludos.
jj

Buscar este blog