lunes, 1 de octubre de 2012

Cristalab

Cristalab

Agregar y eliminar campos de perfil en Wordpress

Posted: 01 Oct 2012 02:28 AM PDT

En muchas ocasiones estamos trabajando con algún tipo de web en la que necesitamos agregar campos de perfil adicional en wordpress que por defecto nos proporciona muy poca información sobre el usuario, sólo nos brinda información directa del usuario como Nombre, Apellido, etc.

El perfil de wordpress trae por defecto tres grupos de opciones que el usuario puede completar (Nombre, Información de contacto y acerca de ti), Con el siguiente código podemos agregar otros grupos de opciones, ejemplo (Campos adicionales), para ello sólo debemos agregar la siguiente función dentro el archivo function.php y editar esta función a nuestro gusto, agregando o eliminando los campos que deseemos.

Agregar grupo de opciones al perfil de usuario


Código :

  /*---------------------------------------------------*/  /* Agregar Grupo de opciones al perfil de usuario  /*---------------------------------------------------*/  add_action( 'show_user_profile', 'extended_user_profil_fields' );  add_action( 'edit_user_profile', 'extended_user_profil_fields' );     function extended_user_profil_fields( $user ) { ?>    <h3><?php _e("Campos Adicionales", "blank"); ?></h3>     <table class="form-table">     <tr>        <th><label for="direccion"><?php _e("Direccion"); ?></label></th>        <td>           <input    type="text" name="direccion" id="direccion"                  value="<?php echo esc_attr( get_the_author_meta( 'direccion', $user->ID ) ); ?>"                  class="regular-text" /><br />           <span class="description"><?php _e("Inserta tu direccion."); ?></span>        </td>     </tr>     <tr>        <th><label for="ciudad"><?php _e("Ciudad"); ?></label></th>        <td>           <input type="text" name="ciudad" id="ciudad"                  value="<?php echo esc_attr( get_the_author_meta( 'ciudad', $user->ID ) ); ?>"                  class="regular-text" /><br />           <span class="description"><?php _e("Inserta tu ciudad."); ?></span>        </td>     </tr>  </table>    <?php }     add_action( 'personal_options_update', 'save_extended_user_profil_fields' );  add_action( 'edit_user_profile_update', 'save_extended_user_profil_fields' );    //Función que guarda los cambios   function save_extended_user_profil_fields( $user_id ) {     if ( !current_user_can( 'edit_user', $user_id ) ) { return false; }     update_usermeta( $user_id, 'direccion', $_POST['direccion'] );  update_usermeta( $user_id, 'ciudad', $_POST['ciudad'] );  }

En la función anterior utilizamos los siguientes ganchos o hook de wordpress.
Todos estos hook tienen una misma función dentro de wordpress y es la de modificar los datos de perfil de usuarios en wordpress.

Este será el resultado cuando agregues la función anterior en tu archivo function.php.


Agregar y eliminar campos de perfil en wordpress


También tenemos la opción de agregar o eliminar campos de perfil de los grupos de campos que trae wordpress por defecto, cuando hablo de grupos de campos de refiero a (Nombre, Información de contacto y acerca de ti). Por ejemplo podemos querer cambiar el AIM por Google+, pues lo que debemos hacer es eliminar el AIM y agregar el campo de Google+.

Con la siguiente función agregaré tres nuevos campos al grupo información de contacto (Facebook, Twitter y LinkedIn), además eliminaré Jabber, y AIM, para lograr esto sólo debemos agregar el siguiente código en el archivo function.php:

Código :

/*---------------------------------------------------*/  /* Agregar campos adicionales al perfil de usuario  /*---------------------------------------------------*/    //Agregar nuevos campos  function extended_contact_info($user_contactmethods) {       $user_contactmethods = array(        'twitter' => __('Twitter'),        'fb' => __('Facebook'),        'linkedin' => __('LinkedIn+')     );         return $user_contactmethods;  }    //Eliminar campos de usuarios  function remove_profil_info($removeInfo){     unset($contactmethods['aim']);     unset($contactmethods['jabber']);               return $removeInfo;  }  add_filter('user_contactmethods', 'extended_contact_info');  add_filter('user_contactmethods', 'extended_contact_info');

Así quedará el perfil después de agregar y eliminar los campos antes mencionados.


Cómo llamar desde tu plantilla estos nuevos campos de perfil


Para hacer llamada a la información que tienen los usuarios en su perfil de wordpress, utilizamos la función the_author_meta() y get_user_meta() con estas funciones podemos llamar la información que tiene cada usuario en su perfil.

Por ejemplo llamaremos los campos que agregamos antes utilizando la función the_author_meta()pasándole como parámetro el nombre que agregamos al campo de perfil personalizado, o bien el nombre de uno de los campos de perfil que utiliza wordpress que podemos ver un listado aquí.

Utilizamos la función the_author_meta() por que estamos llamando estos datos desde la página single.php en este caso mostraremos la información del autor de la entrada.

Código :

//Muestra un enlace a la web del usuario  <a href="<?php the_author_url();?>">Pagina web</a>    //Muestra un enlace al Twitter del usuario        <a href="https://twitter.com/<?php the_author_meta('twitter');?>" rel="Twitter">Twitter</a>    //Muestra un enlace al Facebook del usuario  <a href="https://www.facebook.com/<?php the_author_meta('fb');?>" rel="Facebook">Facebook</a>    //Muestra un enlace al LinkedIn del usuario  <a href="<?php the_author_meta('linkedin');?>" rel="LinkedIn+">Google+</a>


Conclusión


Con ayuda de la función the_author_meta() y otras funciones de wordpress que hacen referencia al perfil de usuario, podemos crear en nuestro blog una página de perfil personalizada que muestre muchos datos de los usuarios de nuestro blog, esto ya es cosa de cada uno, la imaginación que le ponga y lo que necesite cada web.

Próximamente realizaré un tutorial de como crear una pagina de perfil personalizada, donde mostraré información de los usuarios, número de entrada, número de comentarios, información de contacto etc.

Espero que le sirva de ayuda este tutorial, Saludos.

Enviar comentario

Animación fluida con CSS3

Posted: 01 Oct 2012 02:13 AM PDT

Hace un tiempo creé un ejemplo de lo que se podría hacer con animaciones con simples puntos y ahora os quiero mostrar que con animation de CSS3 podemos crear movimientos bastante "naturales" con rotaciones, que sean fluidos (en el ejemplo se puede ver a lo que me refiero).
En este artículo daré por hecho que todos sabemos como funcionan las animaciones, y si no es así os invito a ver este manual de como hacerlas.



Crear la fluidez


Tenemos varios ejemplos, el del Balancín, el de subir una escalera y el de la biela manivela, en los tres jugamos con las rotaciones, pero en elementos que están por debajo del anterior. Por ejemplo, en el balancín tenemos 3 barras, y una está dentro de otra, lo que significa que al girar la primera la siguiente también lo hará y que a su vez gira.

Puede ser un poco difícil de explicar y de entender, pero si nos fijamos en el primer ejemplo vemos este efecto, girando la barra azul y por otro lado las que están dentro (más abajo con el código se ve claro cómo surge este efecto).

Cómo funciona


Como he comentado antes tenemos que crear el efecto de fluidez, pero antes de esto tenemos que crear la estructura, que simplemente son tres etiquetas DIV, una dentro de la otra.

Código :

  <div>      <div>          <div>          </div>      </div>  </div>


El balancín

La estructura del código HTML es la misma en los tres ejemplos, lo que varía son los @keyfreme. El @keyfreme de la barra central hace un balanceo simple sin rotar y las 2 interiores tienen el mismo (simplemente una rotación que en cierto punto vuelve) y la diferencia de los recorridos de ellas está en que lo hacen en distinto tiempo.

Este es el @keyfreme de este ejemplo:

Código :

/* Es el @keyfreme de la barra con el borde azul */  @keyframes balanzin_principal {      0%{transform:rotate(60deg)}      50%{transform:rotate(-60deg)}      100%{transform:rotate(60deg)}  }  /* Es el @keyfreme de la barra con el borde azul */  @keyframes balanzin_principal {      0%{transform:rotate(40deg)}      50%{transform:rotate(-600deg)}      100%{transform:rotate(40deg)}  }

En el momento que establecemos el @keyfreme de la animación podemos probar la velocidad para que se ajuste a un movimiento más o menos realista.

Escalera y biela manivela

En estos dos ejemplos se diferencian del primero (balancín) en que la rotación empieza en el extremo de la etiqueta que lo contiene, y esto se hace con una propiedad que afecta a todas las transformaciones que se crean con transform llamada transform-origin, donde establecemos desde dónde empieza a rotar.

Código :

<!-- En el ejemplo de la escalera y de la biela manivela tomamos como origen la parte superior y el medio -->     transform-origin:top;

Esta es una forma con la que podemos animar varias cosas con CSS3 (por ejemplo se podría recrear el movimiento de una serpiente o un árbol que lo mueve el viento) y podríamos crear cosas parecidas a las que se podían crear con flash, simplemente hay que saber sacar partido a lo que actualmente tenemos.


Ver ejemplos: Xitrus

Enviar comentario

Ruta de respaldo en Redes OSPF

Posted: 07 Sep 2012 08:32 AM PDT

Generaremos una ruta de respaldo, denominada también backup, en nuestra última topología de Red, ajustada y enrutada en un videotutorial anterior, con el protocolo dinámico OSPF, para implementar en la red, un camino adicional que impedirá que perdamos la conectividad en esa porción, aunque se produzcan problemas físicos en el hardware o la desconexión del cableado de uno de los caminos.

Añadiremos un nuevo router en la topología, para generar el nuevo camino, asignándole direccionamiento y enrutándolo correctamente, para después crear la asignación bilateral de la ruta redundante y evitar el balanceo de carga, gracias al ajuste del ancho de banda, bandwidth.



Saludos.

Enviar comentario

Múltiples áreas en Redes OSPF con Packet Tracer

Posted: 06 Sep 2012 08:43 AM PDT

Tal y como comentamos en videotutoriales anteriores, aunque nos alejemos un poco del nivel de esta primera serie, vamos a realizar una ligera introducción al trabajo con múltiples áreas de OSPF en la topología del laboratorio que hemos venido usando en anteriores episodios, para realizar las conexiones y configuraciones necesarias, buscando la convergencia de la Red y la comunicación entre las diferentes áreas.

Usaremos Packet Tracer para realizar el laboratorio, en el que empezaremos borrando las configuraciones anteriores de los dispositivos y colocando nuevamente el protocolo OSPF, añadiéndole identificadores específicos y generando las diferentes redes con sus áreas, que conectaremos para obtener convergencia a través de enlaces virtuales entre las externas y el área 0.



Saludos.

Enviar comentario
Publicado por en

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)