Imaginémonos que hacemos un catálogo (para lo que crearía un post-type nuevo de tipo “catalogo”) en el que son varios los usuarios que tienen permisos para poder añadir productos a este catálogo. Ya que estamos imaginándolo, imaginemos también que estos usuarios son empresas, que añaden sus productos que yo de alguna manera promociono. Nada raro, sino fuera porque los usuarios pueden ver tanto las imágenes subidas como los “productos” creados de los demás, independientemente de que no puedan editar los productos de otros, queda un poco feo además de poco ético, ya que los usuarios/empresa podrían aprovechar los recursos de los demás.

Para evitar esto, hay una pequeña función que añadida a nuestro functions.php evitará que los usuarios puedan ver elementos creados por si mismos como posts, productos, imágenes, etc.

function query_set_only_author( $wp_query )
{
    global $current_user;
    if ( is_admin() && !current_user_can('manage_options') )
    {
        $wp_query->set( 'author', $current_user->ID );
    }
}
add_action('pre_get_posts', 'query_set_only_author' );

Sencillo, verdad ?

Hace ya algún tiempo había creado un pequeño tutorial de como crear un sistema de pestañas independiente de frameworks Js. Para una iniciación no estaba mal, aunque tenía algúnas limitaciones que impedían añadir “subpestañas” o determinados tags usados en el script, lo que a la larga lo convertía en uno de tantos scripts que pasan al olvido.

Es por ello que decidí rehacer el código. Más sencillo, más claro y obviamente más útil. Este nuevo sistema permite añadir pestañas dentro de un panel, e incluso utilizar nuevos divs para el caso de que los contenedores a usar ya lo sean.

Empezamos creando el contenedor que tendrá nuestro sistema de pestañas. Un simple div nos valdrá.

<div id="panel"></div>

Dentro de este panel, añadiremos las pestañas. Al igual que en muchos sistemas, utilizaremos listas, aunque bien podríamos utilizar simples enlaces.

<ul id="tabs">
  <li>opción 1</li>
  <li>opción 2</li>
  <li>opción 3</li>
  <li>opción 4</li>
</ul>

Bien, ahora crearemos un panel donde se ubicarán las contenidos de cada pestaña. Una buena estructura sería una capa (div) principal, y otra tantas capa (div) por cada pestaña

<div id="paneles">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Todo junto nos quedaría así

<div id="panel">
  <ul id="tabs">
    <li>opción 1</li>
    <li>opción 2</li>
    <li>opción 3</li>
    <li>opción 4</li>
  </ul>
  <div id="paneles">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

Lo interesante es crear los estilos y no depender de imágenes. Estos estilos aplicarán las esquinas redondeadas de las pestañas al igual que en los sistemas windows, con excepción – como no – a los explorer, que no disponen de propiedad de “redondeo”.

/* tamaño y forma del panel principal */
#panel {
  position: relative;
  width:400px;
  height: 300px;
  margin: 100px 0px 0px 100px;
}
/* configuracion de las pestañas */
#tabs {
  position:absolute;
  left: 0px;
  top: 0px;
  margin:0;
  padding:0;
  width: 400px;
  overflow: hidden;
  z-index: 20;
}
#tabs li {
  float:left;
  */
  esto produce compatibilidad al redondear
  en los distintos navegadores
  /*
  -webkit-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  */
  esto impide seleccionar el contenido
  de las pestañas eliminando ese feo
  efecto de selección al clickar y
  arrastrar
  */
  user-select: none;
  list-style: none;
  margin: 1px 1px 0px 0px;
  display: block;
  height: 21px;
  line-height: 21px;
  padding: 0px 8px;
  outline: 0px none;
  font-family: arial;
  font-size: 10px;
  text-decoration: none;
  color: #000;
  border: 1px solid #91A7B4;
  border-bottom-width: 0px;
  background: #fff;
  border-radius: 4px 4px 0px 0px;
  cursor: pointer;
}
#tabs li.active {
  margin-top: 0px;
  height: 21px;
  line-height: 19px;
  border-top: 3px solid #324A62;
  cursor: default;
}
/* Configuración de los paneles */
#panel #paneles {
  position:absolute;
  left: 0px;
  top: 23px;
  width: 398px;
  height: 275px;
  border: 1px solid #91a7b4;
  border-radius: 0px 4px 4px 4px;
  background: #fff;
  overflow: hidden;
}
#panel #paneles > div{
  margin:10px;
  width: 378px;
  height: 255px;
  font-family: arial;
  font-size: 12px;
  text-decoration: none;
  color: #000;
  overflow: auto;
}

Y el javascript que hace que funcione todo esto

function cm_tabs(options)
{
  if((options.tab && options.tab != '') &&
     (options.container && options.container != ''))
  {
    var tabs		= document.getElementById(options.tab).children;
    var containers	= document.getElementById(options.container).children;

    for(var i=0; i< tabs.length; i++)
    {
      tabs[i].i = i;
      containers[i].style.display = 'none';

      tabs[i].onclick = function()
      {
        for(var e=0; e < containers.length; e++)
        {
          tabs[e].className = ''
          containers[e].style.display = 'none';
        }
        tabs[this.i].className = 'active';
        containers[this.i].style.display = 'block';
      }
    }

    if(options.active && options.active <= tabs.length && options.active != '')
    {
      tabs[(options.active-1)].className = 'active';
      containers[(options.active-1)].style.display = 'block';
    } else {
      tabs[0].className = 'active';
      containers[0].style.display = 'block';
    }
  }
  return false;
}

Finalmente ejecutamos el javascript con los parámetros que más nos convengan.

<script type="text/javascript">
  cm_tabs({tab : 'tabs', container : 'paneles', active : 1});
</script>

Donde la propiedad “tab” representa el ID del contenedor de las pestañas, “container” de los paneles que conforman el contenido de las pestañas. Esto nos permitiría dado el caso, colocar las pestañas en un lado y el contenedor en otro. Finalmente “active” representa la pestaña que queremos se muestre como activa el ejecutar el script. Así de sencillo.

El código completo y listo para funcionar lo podéis obtener de los siguientes enlaces:
[ ejemplo de pestañas ] [ otro ejemplo más complejo ] [ descargar ]

Tags: css,, javascript

Con gran ilusión actualizo un blog al recién sacado del horno Worpress 3.1 – eso si, en local, que las cosas hay que probarlas antes – y me llevo la primera sorpresa negativa. O soy yo que estoy pitoño o los listados de posts en el backend de WordPress no se ven como debiera. Mmmm, empezamos mal.

Si bien es cierto, esto tiene una sencilla solución y sin necesidad de tener que tocar css de la administración ni plugins ni cosas raras.

Abrimos nuestro archivo functions.php y añadimos la siguientes líneas

function extra_css_admin() {

    echo '<link rel="stylesheet" type="text/css" media="all" href="'.TEMPLATEURL.'/admin-css.css" />';
}
add_action('admin_head', 'extra_css_admin');

Con esto lo que conseguimos es añadir una nueva hoja de estilos a la zona de administración del wordpress y es aquí donde empieza la magia creando una hoja de estilos llamada “admin-css.css” – aunque también se puede llamar de otras formas – y dentro añadimos estas 3 declaraciones.

.posts {
     width: auto !important;
}
.fixed .column-comments.sortable a, .fixed .column-comments.sorted a {
     height: 16px;
}
.posts div {
     height: auto;
}

De esta manera sobreescribimos las css del propio wordpress mientras no sacan un parche que lo arregle.

Editado : Esto sólo ocurre con algunos plugins instalados.

Tags: wordpress,, css

Los navegadores modernos (olvidaros de explorer) y las css avanzadas, nos permiten modificar – en este caso – y sin utilizar javascript, los input de tipo “checkbox” y “radio” con la ayuda de las etiquetas “label”, pudiendo personalizarlos hasta límites inimaginables. Como siempre, el límite lo pone nuestra creatividad.

Esto lo conseguimos con esta estructura

<input type="checkbox" name="check_01" id="check_01" />
<label for="check_01">Opción</label>

Con una imagen similar a esta

Y estas pequeñas líneas de css

input[type=checkbox] {display: none;}
input[type=checkbox] + label {
    background: #fff;
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url(img/check_02.png) 0px 0px no-repeat;
    text-indent: -1000em;
}
input[type=checkbox]:checked + label {
background: url(img/check_02.png) 0px -16px no-repeat;
}

Las cuales tienen una explicación muy sencilla.
input[type=checkbox] nos permite seleccionar todos los campos “input” de tipo “checkbox“.

input[type=checkbox] + label nos permite seleccionar todos los campos “input” de tipo “checkbox” y además, el elemento “label” que se encuentre a continuación. No debe haber ningún otro elemento depués del campo “input“.

input[type=checkbox]:checked + label, nos permite seleccionar todos los campos “input” de tipo “checkbox” cuyo atributo “checked” sea igual a “checked” y además, el elemento “label” que se encuentre a continuación.

De esta manera, podemos hacer cosas similares a las que he montado en un ejemplo.

[ ejemplo ] [ descargar ejemplo ]

Ya se ha abierto la inscripción de SubFlash 2010, que se ha convertido en un clásico, como el Ramón de Carranza en la pretemporada, la ensalada de pasta en verano, que bello es vivir en navidades y los granos en primavera.

Como cada Agosto, tenemos a Marcos preparándolo todo a pesar de que lleve 3 años diciéndole que le voy a echar una mano para poder montarlo en Galicia (y suerte que no me haga caso).

Este año es en Bilbao,  y en un simpático post del blog de SubFlash, nos comenta de que van a hablar y de como puedes inscribirte.

Para ello nos da 9 razones de peso:

1. La gente guay.
2. Sé el buen amigo de tu bolsillo.
3. Igual hasta los 90 euros te los regalamos.
4. Los tacaños también tienen sitio.
5. Aprender.
6. Una experiencia.
7. El lugar.
8. Tú.
9. La experiencia.

Al igual que en los años anteriores, Marcos, te auguro nuevamente un gran éxito. Mucha suerte !

Subflash, 2005, 2006, 2007, 2008, 2009… y ahora te toca a ti en el 2010!

Tags: subflash, 2010

Esto nos permite poder moldearlos a nuestro antojo, permitiendo que en la gran mayoría de los navegadores se visualice de la misma manera.

Sin embargo, nuestro querido Firefox, se guarda una desagradable sorpresa y probablemente más de uno se haya dado cuenta. Y es que cuando tratamos de meter – por ejemplo – dentro de un elemento <button> una etiqueta – por ejemplo un <span>, este nos deja un pequeño padding que nos impide colocar el <span> a nuestro gusto por mucho padding que le quitemos, por lo que terminamos metiendo una posición absoluta y pasamos el trago.

No es una solución que me agrada, ya que un simple padding a cero, debería bastar. Para conseguir arreglar esto, debemos añadir la siguiente línea a nuestro reseteador.

<style>
   /** Eliminando el padding de los botones **/
   button::-moz-focus-inner { padding:0;border:none }
</style>

Ahora podemos maquetar a gusto dentro de los elementos <button> sin miedo a nuevas e inesperadas sorpresas … o no ?

Tags: css, tips

El ministerio de igualdad acaba de sacar un decreto en el que presentan un logo acompañado de la tipografía “Comic Sans“. No voy a emitir opinión alguna con respecto a la tipografía utilizada. Los que me conocen ya saben que opino. Si este logo lo sacan el 28 de Diciembre hubiera sido una muy buena inocentada

Dreamweaver CS4 viene con soporte de serie para Subversion, y reconozco que no consigo configurarlo como Dios manda para que funcione. El caso es que hay otra alternativa – creo que más sencilla – que además de afectar al DWCS4, nos permite disfrutar de Subversion en versiones anteriores (probado al menos hasta la versión 8 )

Cuales son los requisitos necesarios ?

Tener instalado un repositorio de Subversion en el servidor y un servidor Linux.

Y que Software necesitamos?

• Dreamweaver versiones 8 a CS4
• WinSCP
• SVN4Dw (Extensión para dreamweaver)
• TortoriseSVN
• Putty

Instalamos todo el software ya mencionado y extraemos el contenido de “putty.zip” en una carpeta (archivos de programa/putty)

Ejecutamos “putty“. Introducimos el host o la IP del servidor y un nombre para poder guardar la sesión, tratando de que sea distinto del host (p.ej SVN_Session). Guardamos la sesión y la volvemos a abrir.

Mediante la línea de comandos, nos logueamos en nuestra cuenta del servidor con el nombre y usuario (en caso de no disponer de una cuenta, habría que ponerse en contacto con el administrador de sistemas) y escribimos los siguientes comandos.

[~]$ ssh-keygen -t rsa

– Presionamos la tecla enter en cada prompt –

[~]$ chmod 700 .ssh
[~]$ cd .ssh
[~]$ cp id_rsa.pub authorized_keys
[~]$ chmod 600 authorized_keys
[~]$ chmod 711 ~
[~]$ exit

Abrimos ahora el WinSCP y añadimos el host o IP del servidor, nombre de usuario, contraseña y seleccionamos “SCP” como protocolo. Hacemos click en Login.
Ahora, en la carpeta “.ssh“, hay un archivo llamado “id_rsa“. Descarga este archivo a la carpeta “keys” de la carpeta en la que hayas descomprimido el “putty“. En caso de no existir esta carpeta, la creamos.

Dentro de la carpeta de Putty, ejecutamos “puttygen.exe“, y en el menú “conversions“, hacemos click en “import key“. Seleccionamos entonces la clave “id_rsa” que anteriormente descargamos con el WinSCP. Hacemos click en “open” y nos aseguramos de que “SSH-2 RSA” está seleccionado. Hacemos click en “Save private key”, y nuevamente hacemos click en “Yes” cuando nos pregunte si deseamos guardar sin contraseña. Guardamos el archivo con el mismo nombre de la sesión (SVN_Session)

Ejecutamos nuevamente putty.exe, seleccionamos la sesión guardada y hacemos click en “load > Connection > SSH > Auth“, clickamos en “Browse/Examinar” y seleccionado el archivo .ppk creado anteriormente. Hacemos scroll hacia arriba y seleccionamos la sesión. La guardamos y la abrimos. Escribimos el nombre de usuario cuando se nos solicite y debería aparecer un mensaje de la forma “Authenticating with public key…”. Si hay algún mensaje de error, comprueba que has seguido los pasos correctamente.

Estamos llegando al final. Nos vamos ahora a “Mi PC” y nos ubicamos en una unidad de disco (por ejemplo C:\). Hacemos click con el botón derecho del ratón y seleccionamos “SVN Checkout“. La Url del repositorio debería ser similar a “svn+ssh://nombredeusuario+SVN_Session/home/ruta al repositorio de tu servidor“.

Seleccionamos ahora un directorio donde ubicar el “Site” en Dreamweaver, hacemos click en “OK” y esperamos a que todos los archivos sean descargados.

Ahora abrimos Dreamweaver y creamos un nuevo Sitio web. Para la ruta local, seleccionamos el directorio que hemos seleccionado para descargar del repositorio.

Cada vez que modifiquemos un archivo, utilizamos el menú creado por la extensión antes instalada “SVN4Dw“, llamado “SVN“. Utilizamos los comandos “Commit” para añadir un archivo al repositorio (archivos modificados por nosotros) y “Update” para descargar los nuevos archivos (actualizados por otros usuarios).

Ya esta todo listo para poder utilizar el “SVN” desde Dreamveaver.

Por cierto, para simplificar estos pasos, es posible crear atajos de teclado desde el menú “Edición > Métodos abreviados de teclado” desde el propio Dreamaweaver.

Tags: svn, dreamweaver, subversion

En Javascript el objeto “location” tiene algunas propiedades más que útiles para poder llegar al resultado deseado sin tener que crear una función como la anterior.

Estas propiedades son las siguientes :

• href
  Es una cadena que contiene la URL completa.
• hash
  Cadena que contiene el nombre de la URL (aparece a la derecha de # en caso de tenerla)
• protocol
  Cadena que contiene el protocolo utilizado(dos puntos incluídos).
• host
  Cadena que contiene el nombre del host y el puerto.
• hostname
  Cadena que contiene el nombre de dominio o IP.
• pathname
  Cadena que contiene la URL sin nombre de dominio, protocolo y hash.
• port
  Cadena que nos devuelve puerto del servidor.
• search
  Cadena que guarda las variables que pasemos por la URL

Click para ver un ejemplo

Tags: javascript

La solución: capturar la url actual, separar el protocolo por un lado y el dominio junto con sus subdominios por otro lado (si los hubiere), y separar estos últimos, siendo el primier elemento resultante el nombre del dominio.

El resultado es algo así.

<script type="text/javascript">

function dominio_base()
{
    // capturamos la url
    url_site      = document.location.href

    // La separamos por la doble barra
    url_pos      = url_site.indexOf('//');

    // por un lado tenemos la url sin protocolos
    url_limpia   = url_site.substr(url_pos+2);

    // y por otro lado el protocolo usado
    url_prot    = url_site.substr(0,url_pos+2);

    // separamos todas las posibles carpetas
    url_split 	  = url_limpia.split('/');

    // y obtenemos el dominio actual
    url_base 	= url_prot + url_split[0];

return url_base;
}

</script>

Al llamar a la función, simplemente nos devuelve el dominio

<script type="text/javascript">
    // mostrarlo en un alert
    alert(dominio_base());

    // escribirlo en un documento
    document.writeIn('mi dominio es ' + dominio_base());
</script>

Tags: javascript