Artículos de la categoría Tutoriales

Comparte en Tuenti tus artículos de WordPress

Botones para compartir en TuentiHace algunos días Tuenti anunció un botón para compartir páginas web en la red social. La pega es que este botón no es tan automático como el de Twitter, y requiere algo más de esfuerzo añadirlo en nuestras páginas web, aunque no es para nada complicado. El botón es básicamente un enlace que contiene una imagen, creado con el siguiente código HTML:

<a href="http://www.tuenti.com/share?url=[URL_DE_NUESTRO_ARTICULO]" target="_blank">
<img src="[IMAGEN_DEL_BOTON]" />
</a>

La URL del enlace apunta a la página de compartir de Tuenti, donde [URL_DE_NUESTRO_ARTICULO] debe ser reemplazado por la URL de nuestro artículo codificada, o bien mediante la función Javascript encodeURIComponent() o bien mediante la función PHP urlencode().

La imagen del botón podemos elegirla nosotros, lo recomendable es usar algunas de las que ofrece Tuenti para no confundir a los usuarios, aunque también podemos crear las nuestras. Por último, los desarrolladores de Tuenti recomiendan que el enlace se abra en una nueva ventana, aunque quizás sería mejor abrir la ventana dentro de una ventana modal en nuestro propio blog, para así evitar tener que abrir una nueva pestaña.

Para añadir el botón de compartir a todos nuestros artículos basta con editar el archivo single.php de nuestro theme de WordPress y añadir en el lugar que queramos mostrar el enlace:

<a href="http://www.tuenti.com/share?url=<?php echo urlencode(get_permalink()); ?>" target="_blank">
 <img src="http://estaticosak1.tuenti.com/layout/web2-Zero/images/corporate/3_share_es_dark.59917.png" />
 </a>

El código simplemente muestra el enlace con el permalink del artículo cofidicado. La URL de la imagen que aparece en el código anterior es la misma que aparece en la página de desarrolladores de Tuenti, así que podéis usar esa o cambiarla por otra. No os recomiendo usar la que hay en el código de ejemplo porque tal vez la ruta a esa imagen cambien en algún tiempo y entonces os dejen de funcionar los botones de compartir.

También podéis añadir el botón a vuestras páginas, no sólo a los artículos, mediante el mismo código.

Convierte tus PDF en ePub

Parece que Apple está interesada en que sus dispositivos con iOS (iPhone, iPod y iPad) tengan acceso a iBooks, una aplicación que nos permite gestionar y leer libros. Desde la versión 1.1 podemos leer PDF desde la misma aplicación, sin embargo hay ciertas opciones que no podemos configurar al leer PDF y sí al leer ePub, como el tamaño de la letra, lo que hace que leer, por ejemplo, el manual de usuario de iOS 4 sea realmente incómodo al tener que hacer zoom cada dos por tres.

Afortunadamente tenemos una alternativa: podemos convertir nuestros PDF en ePub. Hay muchas aplicaciones para hacer esto, tanto online como offline, pero en este artículo sólo me centraré en una aplicación. Calibre (así es como se llama la utilidad que nos permitirá convertir nuestros PDF en ePub) es totalmente gratutia y está disponible tanto para Windows como para Linux y Mac OS X.

Aprende a multiplicar y dividir en binario

Hace tiempo expliqué cómo sumar y restar en binario, y ahora es el turno de explicar cómo multiplicar y dividir en binario. Para ello partiré de lo explicado hasta ahora y tomaré como voluntarios para las operaciones los número 12 (1100 en binario), 15 (1111), 37 (100101) y 42 (101010).

Detectar el último artículo del loop de WordPress

A veces nos interesa saber cuándo se está mostrando el primer o el último artículo del blog de WordPress para, por ejemplo, mostrar una línea de división en todos los artículos menos el último o destacar el primer artículo sobre los demás. Hay varias formas de contar los artículos que ya se han mostrado en el loop de WordPress, en este artículo me voy a centrar en la forma más sencilla que conozco: mediante $wp_query.

$wp_query es un objeto que contiene diversos métodos (funciones) y atributos (variables) acerca de las consultas a la Base de Datos (realmente contiene mucha información). Entre estos atributos hay dos que son los que utilizaremos y que nos facilitan mucho la tarea, se trata de: current_post y post_count. El primero indica cuál es la iteración (repetición) actual del bucle, mientras que el segundo indica el total de artículos que se mostrarán. Es decir, el primero nos dice cuántos artículos se han mostrado ya y el segundo nos indica el total de veces que se ejecutará el bucle.

Con ambos datos tenemos suficiente como para saber cuándo se está mostrando el primer y el último artículo. Lo único que tenemos que tener en cuenta es que current_post comienza en 0, mientras que post_count es el total de artículos que se mostrarán (partiendo de 1). Esto quiere decir que si vamos a mostrar 10 artículos en el bucle, al mostrarse el último artículo el atributo current_post valdrá 9, mientras que el atributo post_count valdrá 10.

A continuación os dejo un bucle de ejemplo para que entendáis mejor lo que quiero decir:

if (have_posts()): while (have_posts()): the_post();

if ($wp_query->current_post == 0)
{
echo 'Este es el primer artículo del bucle';
}

if (($wp_query->current_post + 1) == $wp_query->post_count)
{
echo 'Este es el último artículo del bucle';
}

if ($wp_query->current_post > 0)
{
echo 'Este no es el primer artículo del bucle';
}

if (($wp_query->current_post + 1)  < $wp_query->post_count)
{
echo 'Este no es el último artículo del bucle';
}

if (($wp_query->current_post > 0) && (($wp_query->current_post + 1)  < $wp_query->post_count))
{
echo 'Este no es ni el primer artículo del bucle ni el último';
}

endwhile; endif;

Realmente no tiene mucha complicación y facilita bastante el detectar cuándo se muestra el primer o el último artículo.

Diseñando nuestra web para el iPhone – Parte 5

Nota: Esta es la quinta parte del tutorial Diseñando nuestra web para el iPhone. Si no has leído las partes anteriores, es muy recomendable que lo hagas, comenzando por la primera. También os aviso de que si bien voy a explicar cómo diseñar para el iPhone, para comprender estos tutoriales son necesarios unos mínimos conocimientos de HTML y CSS, siendo recomendable tener alguna idea de Javascript (tampoco es necesario ser experto, ya que yo mismo soy un novato).

Hasta ahora hemos visto cómo crear cabeceras y pies de página, pero no hemos visto nada del contenido. En esta parte me centraré en imitar las listas que aparecen en diversos lugares de iOS, pero haciendo un par de añadidos.

Lista de contactos en iOS

Lista de artículos imitando la lista de contactos de iOS

La lista básica tendría el siguiente código HTML:

<ul class="post-list">
<!-- Post 1 -->
	<li>
  <a href="#">
    <span class="post-comments">
     <span class="post-comments-number">0</span>
    </span>
    Nombre del artículo
    <span class="post-dates">27 - 6 - 2010</span>
   </a></li>
<!-- Post 2 -->
	<li>
  <a href="#">
    <span class="post-comments">
     <span class="post-comments-number">6</span>
    </span>
    Nombre del artículo 2
    <span class="post-dates">26 - 6 - 2010</span>
   </a></li>
<!-- Etc --></ul>

El código CSS para imitar el resultado de la segunda imagen de la izquierda es el siguiente:

ul.post-list li a {
	min-height:40px;
	padding:14px 10px;
	font-family:Helvetica;
	font-size:20px;
	font-weight:bold;
	border-bottom:1px solid #D9D9D9;
	color:#000;
	text-decoration:none;
	display:block;
}

ul.post-list li a span.post-comments {
	margin:0 0 0 10px;
	min-width:18px;
	height:28px;

	color:#FFF;
	text-align:center;
	border:2px solid #FFF;
	-webkit-box-shadow: 0 0 5px #888;

	float:right;
	display:block;
	-webkit-border-radius:14px;
}

ul.post-list li a span.post-comments span.post-comments-number {
	padding:3px 5px;
	min-width:18px;
	height:22px;

	background: -webkit-gradient(linear, left top, left bottom, from(#DE7B7E), to(#CB2A29), color-stop(0.5, #D76368), color-stop(0.5, #CF2A27));
	color:#FFF;
	text-align:center;

	float:right;
	display:block;
	-webkit-border-radius:14px;
}

ul.post-list li a span.post-dates {
	font-size:13px;
	font-weight:normal;
	color:#666;
	display:block;
}
Estilo de una lista en iOSEstilo de una lista con esquinas curvas en iOS

Si analizáis el código veréis que no me he limitado a hacer una copia idéntica de las listas, sino que he modificado el código para (dejando de lado el círculo que indica, por ejemplo, los comentarios) que se ajuste a cualquier longitud del texto y que permita mostrar una pequeña descripción del contenido bajo el título (en la imagen aparece en forma de fecha de publicación).

Por último, tan sólo querría dar algunos consejos a la hora de diseñar una web para el iPhone / iPod Touch:

  • El iPhone y el iPod Touch carecen de ratón, por lo que nuestros dedos son el puntero. Los elementos como los enlaces deben ser lo suficientemente grandes como para que un dedo pueda pulsarlos sin tocar ningún otro elemento.
  • El scroll vertical no está mal, pero el horizontal es muy molesto. Es recomendable tratar de evitar siempre que se pueda hacer que la página exceda el ancho de la pantalla.
  • Siempre es más cómodo tenerlo todo en una página que ir saltando de página en página. Siempre que sea posible sería conveniente usar AJAX para dar una sensación de ligereza, rapidez y unidad a la página, para que parezca más una aplicación nativa que una página web.
  • Aprovechemos el motor Webkit de Mobile Safari y ahorrémonos imágenes: las imágenes requieren más transferencia que algo de código CSS3, así que siempre que sea posible hacer algo con CSS3 y no con imágenes, para el iPhone sería conveniente hacerlo así.
  • CSS3 es el futuro, no lo olvidemos, así que si es posible usar una propiedad de CSS3 en lugar de un truco al estilo de -webkit-etc, es mejor usar la propiedad de CSS3, así otros navegadores que soporten CSS3 podrán mostrar correctamente la página.

Y con esto doy por terminado el tutorial de diseño web para el iPhone. Me gustaría unir todas las partes y distribuirlo en formato PDF, pero antes tengo algunas otras cosas a medias, así que eso tendrá que esperar.

Espero que os haya gustado y os sirva para tener algo más en esos momentos en los que nos atascamos durante el diseño de una web.

Control remoto en Mac OS X y Windows con VNC

Controlando Mac OS X desde Windows

Tenemos una red local y carpetas y archivos compartidos entre nuestros equipos. ¿Cuál es el siguiente paso? Controlar un equipo desde el otro. Quizá en principio la utilidad parezca poca (te ahorras levantarte, ir al otro equipo, encender la pantalla y ponerle las pilas al ratón), pero una vez te acostumbras, se hace difícil dejarlo de lado, sobretodo cuando se trata de una combinación de sobremesa y portátil.

Veamos ahora cómo controlar de forma remota un ordenador con Windows y un Mac con Mac OS X mediante el protocolo VNC. Para esto necesitaremos dos aplicaciones diferentes: un cliente VNC y un servidor VNC. El servidor VNC habilita el control remoto del equipo en el que está instalado, mientras que el cliente VNC permite a un equipo controlar un ordenador que tenga instalado un servidor VNC.

Mac OS X incorpora un cliente y un servidor VNC (de los que hablaré más adelante), así que tan sólo tendremos que instalar el paquete de cliente y servidor en Windows. Hay multitud de paquetes diferentes, pero yo me centraré en UltraVNC, que es de momento el que mejor que me ha funcionado hasta ahora y que además es totalmente gratuito (podéis descargarlo aquí). Una vez descargado e instalado, tendremos que ejecutar la aplicación UltraVNC Server, que como su nombre indica, es el servidor VNC de UltraVNC. El cliente VNC se llama UltraVNC Viewer.

UltraVNC Server

UltraVNC Server

Una vez ejecutado el servidor en Windows, veremos una ventana como la de la imagen de la izquierda. Hay bastantes opciones que podemos personalizar, aunque la que más nos interesará en principio es la contraseña para acceder al equipo: no queremos que cualquiera con un cliente VNC y nuestra IP pueda acceder a nuestro equipo.

Entre otras cosas más o menos útiles, podemos hacer que el invitado sólo pueda ver la pantalla, sin poder modificada nada o eliminar los efectos de Aero de Windows y el fondo de pantalla al conectarse un invitado (para mejorar el rendimiento).

Compartir Pantalla

Compartir Pantalla

Habilitar el servidor VNC en Mac OS X es muy sencillo. Basta con ir a Preferencias del Sistema, dentro a Compartir. La segunda opción de la lista de la izquierda es Compartir Pantalla, que se traduce en Habilitar Servidor VNC. El servidor VNC incorporado en Mac OS X tiene menos opciones que UltraVNC, pero para el uso diario nos vale. Podéis ver la pantalla en cuestión en la imagen de la derecha.

Con el servidor VNC ejecutándose en ambos equipos, sólo necesitamos utilizar el cliente VNC para poder controlarlos de forma remota. El cliente VNC de UltraVNC, como he comentado antes, se llama UltraVNC Viewer, así que lo ejecutamos.

Controlando Windows desde Mac OS X

Controlando Windows desde Mac OS X

Nos pedirá la IP del ordenador al que nos vamos a conectar (también se puede utilizar el nombre del equipo) y nos permite escoger entre diversas opciones de velocidad de la red (que básicamente reduce la calidad de la imagen que veremos pero a cambio ganaremos rendimiento), acceder en modo “sólo visión” (es decir, sin poder interactuar con el equipo, sólo pudiendo ver lo que hace), activar el auto escalado, etc. A continuación nos pedirá la contraseña del servidor (si la hay).

En Mac OS X nos podemos conectar a un servidor VNC desde el Finder. Para ello vamos a Ir -> Conectarse al servidor (o pulsamos la combinación de teclas Cmd + K). Se abrirá una ventana pidiéndonos la dirección del servidor, done introduciremos vnc://<IP_DEL_SERVIDOR>. Nos pedirá la contraseña del servidor (si la hay) y a continuación tendremos acceso vía VNC al otro equipo.

También se puede controlar un equipo con una distribución de Linux desde Windows y Mac OS X (y éste puede controlar a los otros) o incluso desde un iPhone (basta con instalar alguna aplicación que haga de cliente VNC para poder controlar otros equipos).

Restaurar un Mac desde una copia de seguridad de Time Machine

Una de las cosas que más me sorprendieron de Mac OS X fue Time Machine. Se trata de un sistema de copias de seguridad que permite restaurar cualquier archivo de nuestro disco duro a una versión anterior del mismo (o restaurar archivos que borramos de nuestro disco duro). Time Machine guarda copias horarias del disco duro de las últimas 24 horas, copias diarias del último mes y copias semanales de todo lo que tenga más de un mes de antigüedad hasta que se acabe el espacio en el disco duro donde se almacena la copia, en cuyo caso te propondrá borrar las copias anteriores para poder seguir añadiendo archivos.

Lo bueno de Time Machine es que no sólo permite restaurar archivos, sino todo el sistema operativo: aplicaciones, preferencias, documentos, cuentas, etc. Pongamos por ejemplo, que cambiamos el disco duro de nuestro Mac y reinstalamos Mac OS X. Pues bien, podemos evitarnos tener que configurar todo el equipo e instalar todas las aplicaciones si tenemos a mano una copia de Time Machine. Además, el proceso de restauración es la mar de sencillo.

Lo primero que tenemos que hacer es instalar como de costumbre Mac OS X. Cuando haya finalizado la instalación nos mostrará un vídeo de bienvenida y nos preguntará por el idioma. Disculpad la calidad de las imágenes: estaba restaurando mi MacBook (he cambiado el disco duro por uno de 500GB y tenía que reinstalar Mac OS X) y no he podido sacar mejores fotos.

Pantalla de bienvenida

Selección de idioma

A continuación nos preguntará acerca de si tenemos una copia de seguridad. Básicamente nos ofrece 4 opciones: La primera es que si tenemos otro Mac, restauremos a partir de él; la segunda es restaurar a partir del contenido de otro disco duro del Mac en el que se está instalando Mac OS X (supongo que también valdrá para particiones); la tercera es restaurar desde una copia de seguridad de Time Machine (la que debemos seleccionar) y la cuarta es comenzar de 0 y no restaurar nada.

Opciones de migración

Lo siguiente que nos pedirá Mac OS X es el volumen donde está almacenada la copia de Time Machine. Dependiendo de si está conectado por cable (sea Ethernet, USB o Firewire) o si se accede de forma inalámbrica (creo que el único método que permite es WiFi, aunque no estoy seguro), habrá más pasos intermedios o no. Yo he realizado la restauración desde una Time Capsule conectada por el cable Ethernet, con lo cual el siguiente paso ha sido directamente seleccionar el volumen (Data) y seleccionar el contenido a restaurar (en mi caso todo).

Seleccionamos el volumen donde está el backup

Seleccionamos el contenido a restaurar

Por último, Mac OS X comenzará la restauración. El proceso es muy lento, en mi caso, para restaurar menos de 120GB, Mac OS X ha necesitado algo más de 2 horas. Aunque las ventajas superan con creces el tiempo necesario, ya que con esto nos evitamos tener que reinstalar todas las aplicaciones, configurar las preferencias y copiar nuestros documentos.

No está nada mal, ¿no creéis?

Modifica la pestaña de ayuda de WordPress

Ayuda contextual modificada

Ayuda contextual modificada

En WordPress 2.7 se añadió un nuevo elemento al Panel de Administración: la pestaña de ayuda / ayuda contextual. Esta pestaña ofrece algo de información en las páginas de edición de artículos o en el escritorio, pero no sirve de mucho en las páginas de los plugins. Esto se debe a que para poder dar ayuda sobre nuestro plugin debemos recurrir a los filtros, sin embargo el filtro que afecta a la ayuda contextual no aparece en la documentación.

No obstante, una vez conocemos el nombre del filtro, que por cierto es contextual_help, es realmente fácil modificar el contenido, aunque debemos tener cuidado y prestar atención a las ocasiones en las que añadimos nuestra función al filtro, ya que nos descuidamos podemos hacer que la ayuda de nuestro plugin aparezca en todas las páginas, y esto no es lo que queremos.

Para añadir nuestra función sólo cuando se accede a la página de nuestro plugin debemos recurrir a una acción, llamada load-X, donde X es la página de nuestro plugin (en realidad puede ser cualquier página del Panel de Administración). El valor de X debe ser el que devuelve la función add_submenu_page (o add_N_page) para que se aplique correctamente la función.

Dicha la teoría, pasemos a la práctica:

// Añadimos un enlace al menú
$pagina = add_submenu_page('wp-carousel', 'Carousel Z', 'Carousel Z', 'administrator', 'edit-carousel', 'wp_carousel_carousel_options_page');

// Modificamos la pestaña de ayuda
add_action('load-'.$pagina, 'wp_carousel_custom_help_tab'); 

// Esta función añade la segunda función al filtro
function wp_carousel_custom_help_tab() {
// Añadimos al filtro
add_filter('contextual_help', 'wp_carousel_custom_help_tab_filter');
}

// Esta función cambia el contenido que se muestra
function wp_carousel_custom_help_tab_filter($help) {
echo "<h5>".__('WP Carousel\'s Quick Help', 'wp_carousel')."</h5>"; // Nuevo contenido
echo "<p>".__('You can find help here, here and here', 'wp_carousel').".</p>"; // Nuevo contenido
printf ("<p>".__('Please, fill up <a href="%s">this survey</a> in order to improve WP Carousel', 'wp_carousel').".</p>", WP_CAROUSEL_SURVEY); // Nuevo contenido
echo $help; // Imprimos también el contenido que hay por defecto
}

Como podéis ver, el funcionamiento es bastante sencillo.

PD: Sí, este código es parte de WP Carousel 0.5. Hacer uso de la pestaña de ayuda contextual es una de las novedades de la próxima versión, aunque es una de las novedades menos interesantes…

Artículos sólo para usuarios registrados en WordPress (Mejorado)

Ayer modifiqué un poco el script de AyudaWordPress, pero se quedó medio cojo: los artículos salían en el Feed y en el loop de WordPress, así que realmente no cumplía del todo su objetivo. Sin embargo lo he actualizado y he solventado ambas carencias, ahora funciona perfectamente. Y el uso es idéntico: se crea un artículo y se le añade el campo personalizado “login” con el valor “1″ para que se oculte.

El código se debe añadir en el archivo functions.php del theme.

	// Nuestra funcion para forzar el inicio de sesion
	function forzar_login()
	{

		if (is_single())
		{

			global $post; // Obtenemos la informacion respecto al articulo actual

			if (get_post_meta($post->ID, 'login', true) == '1') // Comprobamos el valor del campo personalizado login
			{
				// Para ver este articulo tiene que estar registrado
				if (!is_user_logged_in()) // Comprobamos si el usuario ha iniciado sesion
				{
					// No ha iniciado sesion, redirigimos
					auth_redirect();
				}
				else
				{
					// Ha iniciado sesion, luego puede ver el articulo
				}
			}
			else
			{
				// Puede ver este articulo tranquilamente porque no esta bloqueado
			}

		}
		else
		{
			global $wp_query; // Obtenemos la consulta
			$wp_query->query_vars['meta_key'] = 'login'; // Modificamos la nueva consulta para buscar articulos con proteccion

			$posts_a_excluir = array(); // En esta matriz almacenamos los articulos a ocultar

			while ($wp_query->have_posts()) : $wp_query->the_post();
				if (get_post_meta($wp_query->post->ID, 'login', true) == '1') // Comprobamos el valor del campo personalizado login
				{
					// El articulo es solo para registrados, lo guardamos
					$posts_a_excluir[] = $wp_query->post->ID;
				}
			endwhile;

			$wp_query->query_vars['meta_key'] = ''; // Limpiamos modificaciones

			if (!is_user_logged_in()) $wp_query->query_vars['post__not_in'] = $posts_a_excluir; // Excluimos los articulos que se deben ocultar, solo si no ha iniciado sesion
			$wp_query->query($wp_query->query_vars); // Repetimos la consulta
			return;
		}
	}
	add_action('wp', 'forzar_login'); // Añadimos la funcion a la accion

Como antes, el archivo listo para ser usado como plugin lo podéis descargar aquí.

Publica artículos sólo para usuarios registrados en WordPress

Ayer comenté que intentaría mejorar un poco el script que descubrí vía AyudaWordPress. Pues bien, ya está modificado y con él tan sólo es necesario añadir el campo personalizado “login” con el valor “1” al artículo que se quiera bloquear para permitir el acceso sólo a usuarios registrados. El código es el que tenéis a continuación, y básicamente impide acceder a los artículos que tengan dicho campo personalizado con el valor 1 si el usuario no ha iniciado sesión, sin embargo sí que es visible en el índice del blog o en el archivo (al igual que en el feed).

El código está comentado, explicando qué hace cada cosa, espero que os sirva de ayuda. Para utilizarlo basta con ponerlo en el archivo functions.php de vuestro theme, o podéis descargar este archivo y subirlo a la carpeta de plugins y activarlo como un plugin más, tiene el mismo resultado.

<?php

	// Nuestra funcion para forzar el inicio de sesion
	function forzar_login()
	{

		if (is_single())
		{

			global $post; // Obtenemos la informacion respecto al articulo actual

			if (get_post_meta($post->ID, 'login', true) == '1') // Comprobamos el valor del campo personalizado login
			{
				// Para ver este articulo tiene que estar registrado
				if (!is_user_logged_in()) // Comprobamos si el usuario ha iniciado sesion
				{
					// No ha iniciado sesion, redirigimos
					auth_redirect();
				}
				else
				{
					// Ha iniciado sesion, luego puede ver el articulo
				}
			}
			else
			{
				// Puede ver este articulo tranquilamente porque no esta bloqueado
			}

		}
		else
		{
			// Esta viendo el articulo desde una pagina de archivo o el index del blog, se podria ocultar aqui tambien, pero la idea es que el usuario pueda ver el articulo en las listas pero para poder leerlo al completo tenga que iniciar sesion, asi que dejaremos esto tal cual
			return;
		}
	}
	add_action('wp', 'forzar_login'); // Añadimos la funcion a la accion

?>