Jun 10th

Plugin para wordpress. Tercer entrega del tuto…

  • Posted in Sin categoría
  • Comments 0

Siguiendo la línea del tutorial hoy les voy a mostrar cómo crear su propio plugin de Slide de imágenes con jquery.

Primero que nada, vamos a comenzar de “0”, creamos una carpeta en el wp-content/plugins con el nombre “miplugin”, dentro creamos 2 carpetas mas: “js” e “images”. De modo que nos quede el árbol de la siguiente manera:

Wp-content

Plugins

miplugin

js

images

Dentro de “miplugin” creamos un archivo php para nuestro plugin llamado “miplugin.php” y colocamos en la carpeta “js” el archivo simplegallery.js y las siguientes imágenes:


Con todo esto ya comenzamos con el código y la explicación va en los comentario:

<?php

/*
Plugin Name: Mi Plugin de Slide
Plugin URI:
http://www.claudiomarrero.com.ar
Description: Este es un ejemplo de cómo crear un plugin para slide de fotografías
Author: Claudio Adrian Marrero – Ultima Milla S. A.
Version: 1.3
Author URI: http://www.claudiomarrero.com.ar/
*/

//Definimos la ubicación de nuestros archivos js

define(‘JS’,get_bloginfo(‘url’).’/wp-content/plugins/miplugin/js/’);

//Definimos la ubicación de nuestras imágenes para el slide

define(‘IMAGES’,get_bloginfo(‘url’).’/wp-content/plugins/miplugin/images’);

// cargando jquery de google en wordpress

function miplugin_jquery() {

if (!is_admin()) {
wp_deregister_script(‘jquery’);
wp_register_script(‘jquery’,
http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js’, false, ’1.3.2′);
wp_enqueue_script(‘jquery’);

}
}
add_action(‘init’, ‘miplugin_jquery’);

//Cargamos a la función wp_head(); el archivo simplegallery.js

function miplugin_simpleGalery(){
echo ‘<script  type=”text/javascript” src=”‘.JS.’simplegallery.js” />’;
}
add_action(‘wp_head’, ‘miplugin_simpleGalery’);

//Buscando las imágenes para el slide
function miplugin_imagenes(){
//En vez de buscar un directorio, puedes cargar las imágenes en un array
$dir_imagenes = ‘wp-content/plugins/miplugin/images’; //Ubicación absoluta       $dir_imagenes_relativas = “/wp-content/plugins/miplugin/images”; // Ubicación relativa
$comienza_solo = “true”; //Si deseas que comience en forma automática
$pausa = 2500; //Tiempo de espera
$transicion = 500; //Transicion entre imagen e imagen.
$maximo_ancho = false;
$maximo_alto = false;
if($ver_imagen = opendir($dir_imagenes)){
while (false !== ($imagen = readdir($ver_imagen))) {
if ($imagen != “.” && $imagen != “..”) {
$array_imagenes .= ‘["'.$dir_imagenes_relativas.'/'.$imagen.'","",""],’;

list($ancho, $alto) = getimagesize(“$dir_imagenes/$imagen”);

if($ancho > $maximo_ancho){$maximo_ancho = $ancho;}

if($alto > $maximo_alto){$maximo_alto = $alto;}

}

}

closedir($ver_imagen);

}

$array_imagenes = substr($array_imagenes,0,-1);

echo ‘<script>
var mygallery = new simpleGallery({
wrapperid: “miplugin_slide”,
dimensions: ['.$maximo_ancho.','.$maximo_alto.'],
imagearray: ['.$array_imagenes.'],
autoplay: ‘.$comienza_solo.’,
persist: false,
pause: ‘.$pausa.’,
fadeduration: ‘.$transicion.’,
oninit:function(){
},
onslide:function(curslide, i){
}
})
</script>

>’;
}
add_action(‘wp_head’, ‘miplugin_imagenes’);

//Function que muestra en el theme de wordpress el slide;
function miplugin_slide(){
echo ‘<div id=”miplugin_slide”></div>’;
}

?>

Bueno con todo esto ya tienes para hacer el plugin que quieras, en la cuarta entrega, vamos a ver como hacer para cargar las imagenes directamente desde el panel de administracion, para que tu plugin sea totalmente administrable.

Si quieres puedes descargar el plugin completo desde aqui

Saludos

Jun 9th

La casa del futuro… Internet en todos lados

La verdad flor de cagaso me pego si me llega a perseguir una mesa…

Esto es ideal para las “Espiritistas”…

Ikea Robotics – “marketing” video from adam lassy on Vimeo.

Jun 9th

Crear un plugin en wordpress segunda parte

  • Posted in Sin categoría
  • Comments 0

Siguiendo el tutorial de cómo crear un plugin hoy voy a ser un poco más aburrido:

Definición de WordPress Plugin:

Un plugin de WordPress es un programa, o un conjunto de una o más funciones, escrita en PHP, que agrega un conjunto específico de funciones o servicios de WordPress.

WordPress Plugins permiten una fácil modificación, personalización y mejora de su WordPress. En lugar de cambiar la programación núcleo de WordPress, puedes agregar funcionalidades con plugins.

Cosas a tener en cuenta antes de comenzar a programar:

Darle una identidad única:

Es posible que si estas creando un plugin luego quieras compartirlo en la comunidad de wordpress por ende, debes intentar colocarle un nombre original, un nombre que identifique perfectamente a lo que hace el plugin que has creado.

Definir un prefijo para las funciones:

Si eres programador en php, esto ya lo sabrás, pero si no ten en cuenta que no puedes definir dos veces una misma función, por ende cuando creamos las funciones es importante para evitar conflictos futuros, utilizar un prefijo, por ejemplo, si tengo una función de carga de un formulario y mi plugin se llama “miplugin”, entonces la función la llamare miplugin_formCarga();, de esta manera evitas cualquier tipo de conflicto con otros plugins o con el mismo núcleo de wordpress.

A lo práctico:

En el último post sobre plugins de wordpress explicaba cómo crear un menú en el panel de administración de wordpress y un par de cosas más, ahora te mostrarte como crear submenúes:

Sub menú de wordpress:

Para crear un submenú le agregaremos a la función que creamos antes de miplugin_menu() la función add_submenu_page();

Así nos quedaría la función:

function miplugin_menu(){

add_menu_page(miplugin, ‘Mi Plugin’, 8, ‘ miplugin ‘, ‘miplugin_funcion’);

add_submenu_page( ‘miplugin’, ‘Sub Menú’, ‘ Sub Menú ‘, 9, ‘page-sub-menu’, ‘miplugin_subfunction’);

}

En el próximo tutorial, viene como eliminar elementos del menú del panel de administración, y como crear un slider de fotografías con jquery autoadministrable.

Sigue pendiente subir mis plugins para que los puedan descargar…

Jun 8th

Did you Know?…

Excelente video visto en el facebook de Fabricio Mena

Jun 8th

Crear un plugin en wordpress

WordPress esta divido en 3 carpetas wp-admin, wp-content, wp-includes

Abrimos la carpeta wp-content, dentro del mismo encontramos 2 carpetas, plugins y themes, y si tu wordpress está en español seguramente encontremos la carpeta languajes.

Abrimos la carpeta plugins, creamos una carpeta con el nombre que le queramos dar al plugin en este caso usaremos miplugin…

Dentro de la carpeta creamos un archivo miplugin.php que contendrá todo el código de nuestro plugin.

Decirle a wordpress que esto es un plugin:

Abrimos el archivo miplugin.php y colocamos:

<?php

/*

Plugin Name: Mi Plugin

Plugin URI: http://www.claudiomarrero.com.ar

Description: Este es mi primer plugin.

Author: Claudio Adrian Marrero – Ultima MIlla S. A.

Version: 1.0

Author URI: http://www.claudiomarrero.com.ar/

*/

?>

Estas líneas le dicen a wordpress todo lo que tiene que saber sobre el plugin en cuestión, autor, versión, web donde se encuentra alojad, etc.

Todo lo que sigue a continuación se basa solamente en conocer un poco el core de wordpress y tener un conocimiento avanzado en php, aunque si eres principiante, esto te dará una gran ayuda:

//Agregar un menú al panel de administración.

function miplugin_menu(){

add_menu_page(miplugin, ‘Mi Plugin’, 8, ‘ miplugin ‘, ‘miplugin_funcion’);

}

add_action(‘admin_menu’, ‘ miplugin_menu ‘);

//Ahora creamos la función que llamamos desde el menú

function miplugin_funcion(){

echo ‘Este es mi plugin’;

}

Esta función la podemos llamar desde el theme, o cómo ves en este ejemplo, en el mismo administrador de wordpress.

Y listo ya tenemos un plugin creado, ahora claro, esto mucho no nos sirve, solo hay que dejarse llevar por la imaginación y crear lo que nos sintamos capaces, prácticamente no existen límites a la hora de crear un plugin para wordpress.

En los próximos post, explicare como crear submenúes y con algún ejemplo más práctico, dejo pendiente subir mis propios plugins que ido creando a medida que voy desarrollando aplicaciones para wordpress.

Jun 8th

El nerdo siempre va a ser mejor que el deportista

Excelente video donde se puede apreciar claramente que la inteligencia vence al deportista…

3×3 from Nuno Rocha on Vimeo.

Jun 8th

El camino de los geeks enamorados

Aunque Internet, Hollywood y la sociedad en general quieran hacernos ver lo contrario con sus sátiras y estereotipos, los geeks también se enamoran, y no siempre involucra un holograma o algún tipo de conjuro de amor. De hecho, las situaciones más cómicas y delirantes provienen del mundo real, cuando un geek, nerd, o como prefieran llamarlo, ingresa en una relación romántica, con todo lo que esto misma implica. Estos son algunos momentos que un geek puede vivir cuando encuentra a su chuchu, cualquier parecido con la realidad es meracausalidad.

  • Por supuesto, las relaciones geek tienen muchas probabilidades de empezar en la nube, y no hablo en términos metafóricos sobre el amor, sino en la nube de servidores de Internet. Twitter, Facebook, MSN Messenger, Google Talk.. ¡hasta el mismo Google puede darnos una grata sorpresa! todo es válido para conocer a nuestra media naranja (o manzana, para los maqueros).
  • Durante la primera cita, el geek debería resistir la necesidad de sacar su gadget del bolsillo (móvil, no piensen mal) de la forma compulsiva que lo hace habitualmente, ni hablar de hacer un chek-in en un restaurante.. ¡y menos agregar su casa a Foursquare!
  • Signos de evolución: no hay miedo en entrar a debatir entre Mac y PC, tienen su propia carpeta compartida enDropbox, y crean sus propios hashtags.
  • Crece la confianza: puedes usar tu pendrive en su laptop sin preguntar, no tiene miedo de dejar sus cuentas de email o redes sociales abiertas, etc
  • Los tiempos cambian: en vez de dejar el cepillo de dientes, ella deja (o te invita a dejar) un cargador USB, en vez de enviarle una tarjeta de amor le envías una invitación para una aplicación web.
  • Se solidifica la relación: cambian los estados de Facebook, las charlas incluyen lo nuevo que presentó Steve en la última keynote, concurren juntos a algún evento geek o relacionado con Internet.
  • El dulce desenlace: descubrir que nuestra pareja nos quiere por quienes somos, sin importar lo geek. Bonus para los afortunados: nuestra pareja también es geek, o al menos geek-friendly.

Visto en: http://alt1040.com/2010/06/geeks-enamorados

Jun 7th

Mini Post: Funcion para conectar mysql

  • Posted in PHP
  • Comments 0

Si si, lo se, se que esto muchos lo saben hacer, pero me decidi a postearlo por que es algo que muchos amigos que recién se inician me han estado preguntando…

Para conectarte una base de datos mysql:

Archivo: conexion.php

function conectar()
{
$bd= “base_de_datos”;
$host= “Servidor_suele_ser_localhost”;
$user= “usuario_de_la_bd”;
$pass= “password_dela_bd”;
mysql_connect(“$host”, “$user”, “$pass”);
mysql_select_db($bd);
}
//desconectar la base de datos
function desconectar()
{
mysql_close();
}
Asi de sencillo, ahora solo debes agregar al archivo donde quieras conectarte…
include(‘conexion.php’);
//para conectarte
conectar();
//Aquí los querys a la bd
//para desconectarte
desconectar();
Y listo, así de sencillo
Jun 6th

Maquetación con CSS, centrar DIVS en el medio del navegador.

Esto es algo sencillo primero el código, después explico cómo funciona:

Index.html

<div id=”hoja” class=”hoja”>

Esto va centrado

</div>

Como verán en el HTML es solo un div llamando a la clase del style “.hoja”.

Style.css

.hoja

{

Position: absolute;

Width: 980px;

Height: 500px;

Left: 50%

Margin-left:-490px;

Border: #000000 solid thin;

}

Explicando la clase:

Posición absoluta para que podamos ubicarla libremente dentro de la hoja, le damos un tamaño con width y height, luego ubicamos el div en el centro de la pagina con el left: 50% y le quitamos la mitad del tamaño del width con margin-left… listo, tenemos un div centrado en el medio de la pagina, ahora solo falta maquetar la web dentro del div y listo…