WiziApp es un servicio que, a partir de un plugin, permite convertir tu blog en una WordPress iPhone App. De este modo, el contenido de tu blog en WordPress estará disponible de manera más organizada y accesible para los usuarios del teléfono de Apple.

WordPress a iPhone

Tener una vista previa de tu App no tiene costo, sin embargo, para obtenerla y publicarla necesitar contratar uno de sus planes. El proceso de creación sencillo y rápido:

1. Instala el plugin de WiziApp. Puede ser directamente desde tu sección de plugins o de forma manual con FTP.

2. Ahora en tu panel de administración, puedes ir a la nueva sección llamada WiziApp para empezar la configuración y ver la previa de tu contenido.

En esta sección le pones nombre a tu App, personalizas el menú de pestañas, el fondo, la información a mostrar, el sistema de notificación y la monetización (vía Admob). Todo, viendo los cambios directamente en una previa del App.

3. El siguiente paso es el pago por la creación de la App.

Hay tres planes distintos, en todos ellos das un pago inicial y posteriormente un pago por mes. Por ejemplo, el plan básico Blog Personal, tiene un costo de apertura de $199 USD y posteriormente un pago mensual de $19.90 USD.

El pago te da derecho a soporte y actualizaciones para tu App (derivadas de WordPress o el iOS), notificaciones y estadísticas.

4. El último paso es publicar tu app en la App Store y hacerla disponible al mundo.

Solo debes rellenar la información de tu app, clasificar su contenido y subir el icono respectivo para identificarla.

Opinión

Para ofrecer contenido en dispositivos móviles hay principalmente dos formatos, uno vía App y otro vía navegador con versión móvil de un sitio web. Ambos ofrecen ventajas y desventajas y la falta de estándares hace difícil y costoso lograr compatibilidad a los principales sistemas móviles, tarea que esperemos cumpla HTML5.

Modificar una plantilla o theme es uno de los primeros retos de quienes inician un blog. Para hacerlo, nada nos libra de aprender lo básico de HTML y CSS, pero hay herramientas que pueden hacerlo más sencillo como Firebug, la extensión para Firefox y en versión Lite, para Chrome.

Una de las herramientas más simples, pero también más útiles de Firebug es Inspeccionar, como su nombre lo indica, permite navegar por cada elemento de un sitio web y conocer como esta configurado y como esta relacionado con otros elementos. Esta es la herramienta que puede ayudar a cualquiera a modificar una plantilla, sea Blogger o WordPress, sin mucha dificultad.

Esta pequeña guía se enfocará básicamente en modificar el CSS para adaptar un diseño a nuestras necesidades. En Blogger el CSS esta dentro de la misma plantilla, entre los códigos <b:skin> y </b:skin> y en WordPress en el archivo style.css en la carpeta del theme activo.

Modificar el CSS de un elemento con Firebug.

Para modificar cualquier característica de un elemento de una plantilla simplemente hay que:

1. Instala Firebug en tu navegador: Firefox o Chrome. Personalmente yo recomiendo usar la de Firefox, es más completa y rápida, pero a ambas aplica el contenido de este tutorial.

2. Dar clic en el botón de Firebug en la barra de herramientas , luego en el botón de Inspeccionar  y ubicar el cursor justo sobre el elemento a modificar, puede ser texto, imagen, video, flash o cualquier elemento, y dar clic en él.

3. En el cuadro de la derecha de Firebug, estando la pestaña “Estilo” activa, se muestran todos los estilos que afectan al elemento.

Se muestran tal como los tendríamos en una hoja de estilos CSS, sin embargo, Firebug ordena las propiedades alfabéticamente y las estandariza.

Es fácil reconocer las siguiente información: selectores, propiedades y la ubicación de dicho estilo (línea de código y archivo que lo contiene).

Aquellas propiedades que aparezcan con un tachado, implica que otra reglas CSS las ha sobrescrito y que por lo tanto no están siendo aplicadas.

4. Pruebas en vivo.

Algo muy interesante de Firebug es que puedes modificar cualquier propiedad CSS y ver los resultados directamente aplicados sobre la página. Para ello solo es necesario dar clic sobre la propiedad o valor para cambiarlo, y ver directamente que pasa en la página.

Para las propiedades que solo pueden tomar valores predeterminados, Firebug permite explorarlos con solo dar clic en el valor y usar las teclas de arriba y abajo del teclado.

Y muy similar para los valores numéricos:

Otra opción muy útil es la de desactivar propiedades para saber como se comporta un elemento sin ellos, basta dar clic en el circulo rojo a la izquierda de cada propiedad.

Encontrar la imagen de fondo de un elemento también es útil cuando se esta modificando una plantilla, para ello solo hay que colocarse sobre el elemento, dar clic y en el panel de “Estilo”, aparecerá el selector que contiene la imagen, normalmente en la propiedad background o background-image.

Y hay otras varias herramientas que pueden ver directamente en el manual oficial.

5. Usando los datos de las pruebas.

Una vez que sabes haz llegado al resultado deseado en las pruebas, es necesario aplicar esos mismo cambios a los estilos en tu plantilla. Firebug nunca guarda cambios, esta parte debes hacerla tu manualmente.

En otras palabras, si haz agregado una propiedad en Firebug, debes agregar esa misma propiedad a tu hoja de estilos; si haz hecho una modificación, esta debe hacerse también en los estilos de la plantilla.

Screencast

Con esta introducción, pueden ver Firebug en acción en el screencast de introducción.

Conclusión

Firebug es una herramienta muy intuitiva, así que algunas recomendaciones: Prueben y prueben, se aprende bastante de CSS y de la propia herramienta, pero sin riesgo de afectar nuestro código. Lean la guía oficial, donde se pueden aprender a sacar más provecho de la extensión. Y por último, aprendan al menos lo básico de CSS y HTML, hará cualquier tarea de diseño menos frustrante.

Para quien necesite estas páginas especiales para adjuntos puede crear un archivo attachment.php y darle formato y para quienes no las usamos, la mejor opción es redireccionarla al post padre. Esta tarea la cumple bien el siguiente snippet:

/**
 * Redirecciona los adjuntos al post padre, o bien, a la portada.
 */
function attachment_redirect()
{
	global $post;
	if ( is_attachment() )
    {
		if( $post->post_parent )
            wp_redirect( get_permalink($post->post_parent), 301 );
        else
            wp_redirect( home_url(), 301 );
        exit;
	}
}
add_action( 'template_redirect', 'attachment_redirect', 1 );

Esta función se puede agregar al archivo functions.php del theme activo.

Blackbox agrega una barra de depuración para el administrador con la siguiente información:

• Globals. Cookies, Get, Post, Session y Server.
• Profiler. Perfilador de rendimiento para alguna sección indicada con: apply_filters("debug", "My new checkpoint");
• SQL. Muestra el número de consultas totales y su tiempo de ejecución y también cada consulta con su respectivo tiempo de ejecución. Muy útil para encontrar consultas lentas y normalmente ineficientes.
• Errores. Muestras los errores y avisos en la ejecución, similar a habilitar WP_DEBUG.

Con un poco e PHP y MySQL se pueden mejorar bastante estos indicadores y reducir el número de errores, lo que tiene como beneficio menor carga al servidor y mayor velocidad para el lector.

Un plugin sin duda útil para desarrolladores de themes y plugins.

Descargar: Blackbox debug bar. / Miniguía de uso del autor.

Descargar

Blogger: Descargar | Demo
WordPress: Descargar | Demo

Instalación

Para instalarla consulta el videotutorial y nuestra miniguía de instalación. Además puedes leer nuestras preguntas frecuentes y enterarte de los problemas más comunes y su solución.

Configuración

1. Menú principal

Para agregar enlaces al menú, solo crea una página estáticas desde el panel.

2. Fecha

Cambia el formato de cabecera de fecha (Inicio → Configuración → Formato → Formato de cabecera de fecha) por la penúltima opción.

Licencia

Licenciado bajo GNU.

Google Analytics tiene una forma bastante sencilla de agregar esta información a nuestros informes.

1. En en el panel de entrada de Analytics, en la fila del sitio web de interés, columna de Acciones, clic en Editar.

Panel →Sitio web → Acciones → Editar

En el cuadro de Información del perfil del sitio web principal, clic en Editar.

Información del perfil del sitio web principal → Editar

En el formulario hay que activar Realizar seguimiento de la búsqueda del sitio y en parámetros de consulta colocar: Para Blogger: q. Para WordPress: s. Correspondientes a la variables de búsqueda de cada sistema.

2. Para tener el informe de búsquedas a mano, se puede agregar un gadget al panel. En ver informe, del sitio en cuestión, ir a Contenido en la barra lateral, después Contenido principal y en filtrar por Página agregar:

Para Blogger: \?q=

Para WordPress: \?s=

Y después ‘Añadir al panel’.

La información obtenida por este medio te ayudará a conocer mejor que buscan, literalmente, los lectores en tu página.

Servicios como Facebook o Twitter usan este formato y WordPress tiene una función sencilla para imprentarlo: human_time_diff().

Actualización: También puedes ver como hacer fechas amigables en Blogger

Fechas amigables en WordPress

Para usarla en los posts

Reemplaza la función que muestra la fecha en todos los archivos de tu theme por:

<?php echo 'Hace '.human_time_diff(get_the_time('U'), current_time('timestamp')); ?></a>

Las funciones que muestran la fecha en el post suelen ser: the_date(), get_the_date(), the_time() o the_modified_date() y suele encontrarse en los archivos: single.php, index.php, archive.php, search.php y page.php.

Para comentarios:

Reemplaza la función que muestra la fecha de los comentarios en el archivo comments.php o functions.php por:

<?php echo 'Hace '.human_time_diff(get_comment_time('U'), current_time('timestamp')); ?>

Y las funciones que suelen mostrar la fecha en los comentarios son: comment_date(), get_comment_date(), comment_time() y get_comment_time().

Con esto se habilitan las fechas relativas tanto en entradas como comentarios. En lo personal, solo lo implementé en single.php y functions.php, para comentarios.

Función PHP para obtener el tiempo entre dos fechas

La función que usa WordPress para mostrar el tiempo entre dos fechas en forma de texto es la siguiente:

function human_time_diff( $from, $to = '' ) {
    if ( empty($to) )
        $to = time();
    $diff = (int) abs($to - $from);
    if ($diff <= 3600) {
        $mins = round($diff / 60);
        if ($mins <= 1)
            $since = __('1 minuto');
        else
            $since = sprintf( __('%s minutos'), $mins);
    } else if (($diff <= 86400) && ($diff > 3600)) {
        $hours = round($diff / 3600);
        if ($hours <= 1)
            $since = __('1 hora');
        else
            $since = sprintf( __('%s horas'), $hours );
    } elseif ($diff >= 86400) {
        $days = round($diff / 86400);
        if ($days <= 1)
            $since = __('1 d&iacute;a');
        else
            $since = sprintf( __('%s d&iacute;as'), $days );
    }
    return $since;
}

Que puede usarse en cualquier otra aplicación PHP que recibe dos parámetros, correspondientes a las fechas de las que se desea conocer la diferencia en tiempo.

Las opciones de pantalla son suficientes cuando somos los únicos usuarios del blog y usualmente utilizamos la misma computadora, pero cuando esto no es así, deshabilitarlos directo desde el código es una mejor opción.

Y el código es bastante sencillo, solo se agrega al archivo functions.php, la siguiente función:

function remove_dashboard_widgets() {
	global $wp_meta_boxes;
	unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_incoming_links']); // Enlaces entrantes
	unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_right_now']); // Ahora puedes
	unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_recent_comments']); // últimos comentarios
	unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_plugins']); // Plugins
	unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_recent_drafts']); // últimos borradores
	unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_primary']); // Blog de desarrollo de WordPress
	unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_secondary']); // Diseño de pantalla
	unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_quick_press']); // Publicación rápida.
}

add_action('wp_dashboard_setup', 'remove_dashboard_widgets' );

Con este hook se deshabilitan todos los widgets, para dejar los que necesitas, solo borra la línea correspondiente a esos widgets.

Una panel más limpio es más útil.

Vía: WP Recipes.

Siempre he creído interesante el darle cierta animación a nuestros botones le den un plus gráfico, y hay, desde el enviar de manera automática un mail a alguien que se nos ha añadido en nuestra lista de lectores de nuestro RSS, y quizás un botón animado de agradecimiento puede ser también buena opción.

En esta ocasión haremos un ejercicio para crear un pequeño personaje desde el papel, pasando por Adobe illustrator, hasta llegar a la implementación en HTML y CSS. Al final, te dejamos las imágenes y el código en un archivo para que lo implementes en tu web si así deseas (Ver demo).

Vectores y la ilustración

Los vectores tienen grandes ventajas y las ultimas versiones de illustrator son sorprendentes, nuestro acabados serán muchos más que simples plastas de color.

No voy a negar que tener nociones de básicas de dibujo ayuda a poder hacer ilustraciones, pero definitivamente la web es un compendio muy amplio de imágenes para tomar ideas, para ver diferentes técnicas, para poder empezar nuestros proyectos, el dibujar ayuda, pero las buenas ideas siempre son mejores.

Bocetando y de ahí a illustrator

Empecemos por bocetar nuestro personaje, esto nos ayudara a tener una idea un poco más clara de como empezar. Como comento, puedes tomar ideas de ilustraciones que hayas visto y se te hagan interesantes.

Puedo mencionarles que prefiero hacer esto, bocetar aunque al final muchas veces trazo directo en illustrator pero al menos para mi me da una idea más clara y sé que haré, antes podía pasar horas en la computadora sin tener claro que dibujar y con ello perdía tiempo, unos momentos de boceto terminaron con eso.

Empezaremos con las formas básicas para la cabeza y las orejas, trazaremos tres círculos, juntos para luego aplicar el pathfinder (menu window-pathfinder) y aplicamos el efecto de sumar.

Trazaremos los ojos, dos círculos pequeños de color negro bastarán para hacerlo, colocamos y centramos, y después haremos el cabello.

Ahora solo ponerle color y unir las partes.

Esto solo es una guía, así que ustedes podrán hacer el personaje que quieran yo les muestro dos variantes de niño y niña.

Ahora viene la parte interesante, la sonrisa, la cual será una de las cosas que cambian. Para comenzar haremos la sonrisa con la boca cerrada, un medio circulo será suficiente, para después hacer la sonrisa de la boca abierta. duplicamos nuestro layer o capa con nuestro personaje con sonrisa cerrada y hacemos lo siguiente en el layer duplicado.

Feed rss y strokes de etiqueta.

Haremos nuestro feed RSS que es el pretexto para hacer esta ilustración, lo colocaremos detrás del niño y en la imagen el botón se verá más, y crearemos un efecto de movimiento.

Ahora hagamos el terminado de etiqueta, seleccionemos el personaje, le damos Unite con el pathfider lo rellenamos del color y le damos un stroke o borde para que se rebase la figura, aplicamos lo mismo al botón feed RSS.

Vamos a hacer un pequeño destello en la parte de atrás de nuestro personaje. Creamos un rectángulo vertical y aplicamos el efecto de transform o transformar, (menu effects/Distor & Transform).

Expandimos la forma creada (menu object- eExpand Appearance) le damos Unite con el pathfinder, ajustamos algunas puntas de nuestra figura y añadimos una degradado.

Solo agreguemos un pequeño texto para hacer más obvio nuestro cambio y listo tendríamos por separado en cada layer un archivo así:

Implementación del botón

Desde illustrator de exportan las imágenes, el resultado, dos imágenes un formato de imagen web, por ejemplo PNG8. Para poderlas usar en un hover, ambas deben tener el mismo alto y ancho y estar alineadas vertical y horizontalmente. En otras palabras, que si pones una sobre otra, la silueta de cara coincide.

Hemos unidos después estas dos imágenes en una sola, una sobre otra, para usarlas como sprite CSS:

Para el HTML basta con el siguiente código:

<a href='http://blogandweb.com/feed' class='botonrss'>Feed RSS</a>

El CSS será el encargado de hacer el efecto “hover“, es decir, que al pasar el puntero del mouse por encima se mostrará la segunda figura, dando la sensación de animación.

a.botonrss {
    width:166px;
    height:180px; /* Dimensiones de la imagen */
    text-indent:-9999px;
    overflow:hidden; /* Oculatando el texto del enlace */
    display:block;
    background:url(images/rss-boton.png) no-repeat 0 0; /* Poniendo la imagen como fondo */
}
a.botonrss:hover {
    background: url(images/rss-boton.png) no-repeat 0 -180px; /* Al hacer hover, ponemos la segunda imagen de fondo */
}

Ahora, solo resta ver el botón en funcionamiento.

Implementarlo en Blogger y WordPress

Implementarlo en Blogger y WordPress es bastante sencillo. El código HTML se puede agregar en un widget de HTML en el sidebar y el CSS, en WordPress va en el archivo style.css y en Blogger justo antes del código:

]]></b:skin>

No olvides cambiar la URL por la de tu feed en el HTML y la ruta de la imagen en el CSS.

Descargar

Descargar HTML e imágenes.

Conclusión

En este tutorial vimos como crear un botón “animado” iniciando desde el panel, aunque resulta en algo de trabajo, el resultado generalmente vale la pena.

Igualmente, si te gusto este botón para tu sitio web, descárgalo e impleméntalo. Nosotros lo liberamos bajo licencia Creative Commons, y si nos quieres dar un link por los créditos, te lo agradecemos desde ahora

Por cierto, este es el primer tutorial que hacemos en conjunto, Ulises y Francisco (principalmente el primero), esperamos te haya gustado tanto como a nosotros al escribirlo.

Por razones de rendimiento, no es buena idea iniciar tu estructura de links con la categoría, etiqueta, autor o el nombre del post. La razón es que estos son campos de texto, y al usarlos al inicio de la estructura de links, a WordPress le toma más tiempo distinguir la URL de tus posts de la URL de tus páginas (las cuales usan texto en la URL), y para compensarlo, WordPress almacena una gran cantidad de información extra en la base de datos (tanta, que en sitios grandes puede causar problemas).

De este modo, es recomendable usar una estructura de enlaces que empiece con un campo numérico, como es el año o el ID del post.

De este modo, los permalinks tipo:

• /%postname%/
• /%category%/%postname%/
• /%tag%/%postname%/

Pueden tener beneficios SEO, pero no son buenos para el rendimiento de tu sitio web, sobre todo si cuenta ya con una buena cantidad de posts.

Entonces ¿cuál puede ser una buena alternativa? Siguiendo la recomendación de WordPress y pensando en el SEO:

• /%year%/%postname%/
• /%post_id%/%postname%/
• /%year%/%category%/%postname%/
• /%post_id%/%category%/%postname%/

Ya hay un ticket de soporte para que WordPress corrija este error, pero si la versión 3.0 no lo incorpora, mudar a estructura más óptima para el rendimiento será algo muy provecho para sitios con muchas artículos o alto tráfico.