Ulzurrun de Asanza i Sàez

Month: April 2010

Probando la Beta de iPhone OS 4

Ayer Apple presentó iPhone OS 4.0, y puso a disposición de los desarrolladores el SDK correspondiente y una Beta de esta versión del Sistema Operativo del iPhone. La cuestión es que, al estar registrado como desarrollador (a pesar de no haber desarrollado aún nada – estoy aprendiendo), he podido probar la Beta de iPhone OS 4.0, así que os comentaré las principales novedades que incluye.

Read more →


Sigue la keynote de Apple de esta tarde

A falta de apenas 3 horas para la presentación de iPhone OS 4.0, puede que estéis interesados en seguir el evento pero no sepáis cómo hacerlo. Pues bien, aunque no se puede seguir en vídeo en directo (los vídeos de las keynotes los suelen publicar unas horas después de acontecer o al día siguiente), se pueden ver fotos que van sacando los redactores de algunos blogs que están en el evento, acompañado con resúmenes de lo que van anunciando.

El caso es que se puede seguir el evento desde (entre otros):


Adiós WP Main Menu

Cuando se desarrolla un plugin para cubrir una necesidad básica de una aplicación, algo falla. Los plugins están para añadir funciones extra, no para añadir una función básica inexistente, y cuando un proyecto avanza como debe, estos plugins se ven reemplazados por una función nativa de la aplicación. Esto es lo que ha ocurrido con WP Main Menu.

La idea de WP Main Menu vino pensando en qué cosas me gustaría ver en WordPress 3.0. Tener un gestor de menús es algo necesario en un CMS como WordPress, que a pesar de haber sido concebido para blogs, ha llegado a un punto en el que se le puede considerar una alternativa más a cualquier CMS y por eso se ha añadido a WordPress 3.0, por lo que el plugin se ha hecho innecesario.

Por ese motivo he decidido dejar el desarrollo de WP Main Menu: los desarrolladores de WordPress pueden crear un sistema de menús mejor que el mío y con más rapidez y menos errores.

Aun así, podéis descargar, usar y modificar WP Main Menu, aunque yo no daré soporte. Sentíos libres también de usar WP Main Menu como punto de partida para otros plugins, lo único que os pediría en este caso es que me avisaseis, más que nada porque siento curiosidad por saber hasta dónde llega el código del plugin.


Introducción a los filtros y las acciones de WordPress

Nota: Este tutorial está pensado para aquellos que saben algo del desarrollo de plugins y themes para WordPress y de PHP. No está orientado a expertos, pero sí a iniciados.

Cuando se desarrolla una aplicación, se debe pensar también en un método para ampliarla, y en el caso de una aplicación de código abierto esto es mucho más importante. Pongámonos en el caso de WordPress, en el que por defecto no podemos disponer de (por poner un ejemplo) encuestas o carruseles. ¿Cómo añadimos esto? Podemos decantarnos en un principio por añadir estas funciones en nuevas versiones de WordPress, sin embargo hay una cantidad enorme de cosas que añadir y al final siempre habría alguna que no estaría disponible.

Así que hay que implementar una forma de extender la aplicación, y aquí es donde tenemos que pensar cómo hacerlo. En un principio la solución está clara: indico que código modificar para añadir la función y listo. Además se puede automatizar el proceso, de modo que el usuario sólo tendría que subir un archivo y darle a un botón y la nueva función estaría disponible. Esta solución nos puede servir al principio, pero ¿qué ocurre al actualizar la aplicación? Pues que todos los archivos modificados se reemplazan por los de la nueva versión, dejándonos en el mejor de los casos sin la función añadida y en el caso normal, con un montón de errores de llamdas a funciones inexistentes.

Esquema
Esquema

Y aquí es donde entran los filtros y las acciones. El método que utiliza WordPress (entre otras aplicaciones) es permitir definir filtros y acciones. El fundamento de las acciones es bastante simple, definen ciertas posiciones en los archivos de la aplicación, y cuando se llega a esas posiciones, se cargan todas las funciones que estén en la lista de acciones a ejecutar en esa posición. Un ejemplo, imaginemos que yo defino el punto “antesdemostrarlostitulos”, pues bien, si yo añado una función que muestre el texto “El título es: ” a la lista de funciones a ejecutarse en el punto “antesdemostrarlostitulos”, cuando la aplicación llegue a ese punto, cargará mi función, y por tanto se mostrará el texto. Esto hace que aunque se actualicen los archivos originales, siempre se ejecutará, porque este punto siempre estará en el mismo lugar (a no ser, claro, que los desarrolladores lo eliminen). Con los filtros ocurre algo similar. Imaginemos que yo defino el punto “antesdemostrarelcontenido” y añado un filtro que altere el contenido de modo que muestre todo el texto en mayúsculas. Aunque más adelante se actualice la aplicación, el resultado del filtro se mantendrá constante. Tenéis un esquema a modo de resumen en la imagen de la derecha.

Los lugares de los filtros y las acciones los tienen que definir los desarrolladores de la aplicación, aunque veremos más adelante cómo crear nuestras propias posiciones para filtros y acciones, así que es conveniente tener a mano una lista de los filtros y las acciones que tiene la aplicación por defecto, ya que de lo contrario la única forma de conocerlos es buscarlos manualmente.

En este tutorial nos centraremos en la creación y el uso de filtros y acciones en WordPress, y dejaremos de lado los diversos filtros y acciones que tiene por defecto, que por cierto, podéis ver aquí.

Aplicar un filtro

Tenemos la variable $contenido que almacena el texto que genera nuestro plugin, y queremos añadir un filtro llamado mostrar_contenido_mi_plugin que permita a otros programadores modificar el contenido que mostrará nuestro plugin. Bien, recurriremos a la función apply_filters, que nos devolverá la variable tras pasar por todas las funciones que se hayan añadido al filtro. Veámoslo en código:

[php]
<?php
$contenido = la_funcion_de_mi_plugin(); // La variable ahora tiene el contenido devuelto por nuestro plugin
$contenido = apply_filters(‘mostrar_contenido_de_mi_plugin’, $contenido); // Pasamos el filtro, la primera variable es el nombre y la segunda el valor que se filtrará
echo $contenido; // Mostramos la variable, aunque también podríamos volver a modificarla nosotros o hacer lo que quisiéramos con ella
?>
[/php]

Aplicar una acción

Supongamos ahora que en lugar de filtrar nuestro contenido lo que queremos hacer es permitir que otros programadores puedan ejecutar sus funciones en la acción despues_de_mostrar_contenido_plugin, acción que se aplicará justo después de mostrar el contenido de nuestro plugin. Esto puede ser útil en mucho casos, como por ejemplo a la hora de hacer recuentos tras ocurrir cierto evento o para mostrar los enlaces para compartir al final de los artículos. En este caso usaremos la función do_action, quedando en código así:

[php]
<?php
$contenido = la_funcion_de_mi_plugin(); // La variable ahora tiene el contenido devuelto por nuestro plugin
echo $contenido; // Mostramos la variable
do_action(‘despues_de_mostrar_contenido_plugin’); // En este caso el único parámetro obligatorio es el nombre de la acción
?>
[/php]

Añadir y eliminar una función de un filtro

Ya tenemos el filtro creado, pero ahora queremos añadir nuestra función al filtro para modificar el resultado. ¿Cómo lo hacemos? Fácil, con la función add_filter.

[php]
function nuestro_plugin() {
$contenido = la_funcion_de_mi_plugin(); // La variable ahora tiene el contenido devuelto por nuestro plugin
$contenido = apply_filters(‘mostrar_contenido_de_mi_plugin’, $contenido); // Pasamos el filtro, la primera variable es el nombre y la segunda el valor que se filtrará
echo $contenido; // Mostramos la variable, aunque también podríamos volver a modificarla nosotros o hacer lo que quisiéramos con ella
}

function modificar_texto($texto) {
$texto = ‘<div id="contenido">’. $texto .'</div>’; // Modificando el texto
return $texto; // Devolvemos el texto
}

add_filter(‘mostrar_contenido_de_mi_plugin’, ‘modificar_texto’); // Añadimos al filtro mostrar_contenido_de_mi_plugin la función modificar_texto

nuestro_plugin(); // Ejecutamos el plugin
[/php]

Ahora imaginemos que en un caso específico no queremos añadir cierta función al filtro, es decir, queremos eliminar la función del filtro en ciertas circunstancias. En este caso usaremos la función remove_filter, que funciona de forma contraria a add_filter:

[php]
function nuestro_plugin() {
$contenido = la_funcion_de_mi_plugin(); // La variable ahora tiene el contenido devuelto por nuestro plugin
$contenido = apply_filters(‘mostrar_contenido_de_mi_plugin’, $contenido); // Pasamos el filtro, la primera variable es el nombre y la segunda el valor que se filtrará
echo $contenido; // Mostramos la variable, aunque también podríamos volver a modificarla nosotros o hacer lo que quisiéramos con ella
}

function modificar_texto($texto) {
$texto = ‘<div id="contenido">’. $texto .'</div>’; // Modificando el texto
return $texto; // Devolvemos el texto
}

add_filter(‘mostrar_contenido_de_mi_plugin’, ‘modificar_texto’); // Añadimos al filtro mostrar_contenido_de_mi_plugin la función modificar_texto

if (se_dan_ciertas_circunstancias()) { // Supogamos que devuelve true cuando queremos eliminar la función del filtro
remove_filter(‘mostrar_contenido_de_mi_plugin’, ‘modificar_texto’); // Eliminamos del filtro
}

nuestro_plugin(); // Ejecutamos el plugin
[/php]

Añadir y eliminar una función de una acción

Volviendo a las acciones, supongamos que queremos añadir una función nuestra a la acción que hemos aplicado antes, así que tendremos que usar la función add_action.

[php]
<?php
function nuestro_plugin() {
$contenido = la_funcion_de_mi_plugin(); // La variable ahora tiene el contenido devuelto por nuestro plugin
echo $contenido; // Mostramos la variable
do_action(‘despues_de_mostrar_contenido_plugin’); // En este caso el único parámetro obligatorio es el nombre de la acción
}

function mostrar_texto() { echo ‘Ya se ha ejecutado mi plugin’; } // Esta función es la que añadiremos a la acción
add_action(‘despues_de_mostrar_contenido_plugin’, ‘mostrar_texto’); // Añadimos la función a la acción

nuestro_plugin(); // Ejecutamos el plugin
?>
[/php]

Y como antes, también podemos eliminar una función de una acción mediante remove_action:

[php]
<?php
function nuestro_plugin() {
$contenido = la_funcion_de_mi_plugin(); // La variable ahora tiene el contenido devuelto por nuestro plugin
echo $contenido; // Mostramos la variable
do_action(‘despues_de_mostrar_contenido_plugin’); // En este caso el único parámetro obligatorio es el nombre de la acción
}

function mostrar_texto() { echo ‘Ya se ha ejecutado mi plugin’; } // Esta función es la que añadiremos a la acción
add_action(‘despues_de_mostrar_contenido_plugin’, ‘mostrar_texto’); // Añadimos la función a la acción

if (se_dan_ciertas_circunstancias()) {
remove_action(‘despues_de_mostrar_contenido_plugin’, ‘mostrar_texto’); // Eliminamos la función de la acción
}

nuestro_plugin(); // Ejecutamos el plugin
?>
[/php]


Este jueves Apple presentará iPhone OS 4.0

Vía Applesfera descubro que Apple va a mostrar la nueva versión del Sistema Operativo del iPhone, iPod Touch e iPad: el iPhone OS 4.0.

Nada se sabe de lo que añadirá esta versión, así que de momento todo son especulaciones. Si tuviera que decidir qué novedades implementar, la primera sería la multitarea (sigo sin entender el motivo de no añadirla: ¿mucho consumo de batería? pues cierra las aplicaciones que no gastes y listo) y la segunda sería un gestor de archivos: cualquier móvil te permite copiar, renombrar y eliminar, además recibir y enviar cualquier tipo de archivo por Bluetooth mientras que en el iPhone el Bluetooth está de decoración, y el gestor de archivos brilla por su ausencia..

¿Será así Gnome 3.0?

Vía Genbeta descubro los primeros mockups de la interfaz de Gnome 3, versión que será liberada dentro de unos 6 meses (a finales de año). Esta versión vendrá cargada de novedades tanto a nivel interno como a nivel visual, correspondiéndole a este último los mockups que podéis ver a continuación.

En los mockups han optado por una combinación de blanco y negro, lo que facilita mucho la lectura, sin embargo espero que se pueda cambiar, porque si no todas las distribuciones de Linux que utilicen Gnome parecerán iguales…

WordPress 3.0 Beta 1

Ya está disponible la primera Beta de WordPress 3.0. De momento aún hay muchas cosas a medias en esta Beta, por ejemplo, el gestor de menús está incompleto y la interfaz cambiará en la segunda Beta (al igual que se añadirán más funciones). WordPress MU ya está integrado, aunque no se pueden crear nuevos blogs así como así. También quedan por añadir algunos cambios en la interfaz del Panel de Administración, que seguramente veremos en las próximas Betas.

De momento lo que sí que podemos probar al completo son los tipos de artículos personalizados y el nuevo theme por defecto, Twenty Ten.

Podéis descargar la Beta desde aquí.


Extiende el portapapeles de Mac OS X con Shadow

Shadow
Shadow

El portapapeles es sin duda un elemento importantísimo dentro de un Sistema Operativo. Seguramente las combinaciones Control+C (o Comando+C) y Control+V (o Comando+V) sean las más conocidas y usadas en el mundo de la informática. Sin embargo en muchas ocasiones el portapapeles se nos queda corto. ¿Cuántas veces os ha pasado que habéis copiado al portapapeles un texto y antes de pegarlo habéis copiado otro?

Como solución a este problema (entre otros) aparece Shadow, una estupenda aplicación para Mac OS X que amplía el portapapeles, permitiéndonos copiar varios textos (o archivos) al portapapeles, pudiendo seleccionar qué elemento pegar más adelante. El funcionamiento es muy simple y la aplicación es realmente útil. También permite compartir el portapapeles con otros Macs a través de la red vía Bonjour.

Además la aplicación está en fase de Beta pública (aunque yo no he tenido de momento ningún problema con ella) y es gratuita.


Diseñando nuestra web para el iPhone – Parte 4

Nota: Esta es la cuarta 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).

Pie de página de CooshAplicación iPod del iPhoneEn la parte anterior expliqué cómo crear cabeceras, pues bien, en esta parte me centraré en los pies de página. Utilizaré las mismas páginas para mostrar distintos tipos de pies de página. Podemos ver a la izquierda como Coosh trata de imitar la barra inferior de algunas aplicaciones nativas del iPhone (ver imagen de la derecha). Mientras, tanto Google como Yahoo muestran un pie de página algo “dejado caer”, es decir, sin estar demasiado adaptado al estilo del iPhone, así que en lugar de explicar cómo diseñar un pie de página así (algo realmente fácil), explicaré como diseñar un pie de página que siga las líneas de la cabecera del Yahoo (que expliqué como crear en la parte anterior).

Así que comenzaremos por imitar la interfaz del iPhone y después veremos cómo adaptar el estilo de la caebcera al pie.

Creando un pie de página que imite el de una aplicación nativa

En las dos imágenes anteriores podéis ver cómo es el menú inferior de algunas aplicaciones nativas del iPhone. No todas las aplicaciones muestran un menú así, pero sí algunas importantes. Básicamente este menú consiste en un fondo con un degradado de colores oscuros y diversos iconos distribuidos a lo largo del mismo.

Yo no voy a diseñar iconos para el menú en este tutorial, así que me limitaré a usar imágenes con un fondo distinto para que resalten un poco. Sobre la altura del menú, son 47px de alto más el borde superior (de un color gris más claro) que añade 1px, haciendo un total de 48px.

Resultado de imitar la interfaz de una aplicación nativa del iPhone El código HTML que usaríamos para este menú sería el siguiente:

[html]
<div id="footer">

<ul>
<li class="icon-circle selected"><a href="#">Categor&iacute;as</a></li>
<li class="icon-circle"><a href="#">P&aacute;ginas</a></li>
<li class="icon-circle"><a href="#">Etiquetas</a></li>
<li class="icon-circle"><a href="#">B&uacute;squedas</a></li>
</ul>

</div>
[/html]

Y el CSS sería el que tenéis a continuación:

[css]body, div, h1, ul { /* Reseteamos algunos estilos para que se ajuste correctamente el contenido */
margin:0;
padding:0;
}

#footer {
margin:312px 0 0 0; /* Para ajustarlo al final de la página, como en mi demostración no hay más contenido, esta línea es necesaria para posicionar el pie de página en el final de la página, así que si añadís contenido, eliminad esta línea */
border-top:1px solid #434343;
height:47px;
background: -webkit-gradient(linear, left top, left bottom, fr om(#2E2E2E), to(#000), color-stop(0.5, #151515), color-stop(0.5, #000));
}

#footer ul {
width:100%;
height:100%;
list-style:none;
text-align:center;
}

#footer ul li {
margin:1px 5px;
padding:0 5px;
height:45px;
font-family:Helvetica;
float:left;
font-size:11px;
}

#footer ul li.icon-circle { background:url(circle-iphone.png) top center no-repeat; }

#footer ul li.icon-circle a {
height:12px;
display:block;
text-decoration:none;
color:#969696;
padding:33px 2px 0 2px;
}

#footer ul li.icon-circle.selected a {
color:#FFF;
background:url(circle-iphone-selected.png) top center no-repeat;
}

#footer ul li.icon-circle.selected {
-webkit-border-radius:5px;
background:-webkit-gradient(linear, left top, left bottom, fr om(#494949), to(#252525), color-stop(0.5, #353535), color-stop(0.5, #252525));
}[/css]

Nota: Debido a un problema con WordPress, he tenido que modificar el código CSS para guardar el artículo. En algunas líneas veréis que pone “fr om”, pues bien, debería ir junto, sin el espacio entre “fr” y “om”.

Adaptando la cabecera para el pié de página

Hagamos memoria de la cabecera que habíamos diseñado basándonos en la de Yahoo.

El código HTML era el siguiente:
[html]
<div id="header">
<div id="logo_container">
<!– Aquí estará el logo –>
<h1>Miweb.com</h1>
</div>
<div id="menu_container">
<!– Aquí estarán las pestañas –>
<ul id="menu">
<li class="selected"><a href="#">Inicio</a></li>
<li><a href="#">Artículos</a></li>
<li><a href="#">Páginas</a></li>
</ul>
</div>
<div id="subheader">
<!– Aquí estará el buscador –>
</div>
</div>

[/html]

Y su CSS era:

[css]
body, div, h1 { /* Reseteamos algunos estilos para que se ajuste correctamente el contenido */
margin:0;
padding:0;
}

#header {
width:100%;
height:150px;
background: -webkit-gradient(linear, left top, left bottom, fr om(#75B856), to(#4C7A06));
}

#logo_container {
width:100%;
height:50px;
}

#logo_container h1 {
padding:8px;
font-family:Helvetica;
font-size:30px;
color:#FFF;
}

#menu_container {
width:100%;
height:50px;
}

#menu {
width:100%;
height:50px;
padding:0;
margin:0;
list-style:none;
}

#menu li {
height:38px;
margin:2px 5px 0 5px;
padding:5px;
float:left;
}

#menu li a {
height:28px;
padding:5px;
font-family:Helvetica;
font-size:20px;
color:#FFF;
text-decoration:none;
font-weight:bold;
display:block;
}

#menu li.selected {
background: -webkit-gradient(linear, left top, left bottom, fr om(#FFF), to(#FEFEFE));
-webkit-border-top-left-radius:6px;
-webkit-border-top-right-radius:6px;
}

#menu li.selected a {
color:#000;
}

#subheader {
width:100%;
height:50px;
background: -webkit-gradient(linear, left top, left bottom, fr om(#FEFEFE), to(#C0C0C0));
border-bottom:1px solid #666;
}

[/css]

Nota: Debido a un problema con WordPress, he tenido que modificar el código CSS para guardar el artículo. En algunas líneas veréis que pone “fr om”, pues bien, debería ir junto, sin el espacio entre “fr” y “om”.

Adaptar la cabecera al pie de página es un proceso bastante sencillo. Tan sólo deberíamos retirar el logotipo e invertir las posiciones del menú y el contenido inferior: ahora la parte gris debería estar en la zona superior y el menú inferior, adaptado a su vez las esquinas curvas de los enlaces y el degradado.

Pie de página para el iPhone Estos cambios ser verían reflejados en el código HTML y en el CSS. El HTML pasará a ser así:
[html]<div id="footer">
<div id="prefooter">
<!– Aquí estará el buscador –>
</div>
<div id="footer_menu_container">
<!– Aquí estarán las pestañas –>
<ul id="footer_menu">
<li class="selected"><a href="#">Inicio</a></li>
<li><a href="#">Artículos</a></li>
<li><a href="#">Páginas</a></li>
</ul>
</div>
</div>[/html]

Y el CSS, así:[css]body, div, h1 { /* Reseteamos algunos estilos para que se ajuste correctamente el contenido */
margin:0;
padding:0;
}

#footer {
margin:256px 0 0 0;
width:100%;
height:100px;
background: -webkit-gradient(linear, left top, left bottom, fr om(#75B856), to(#4C7A06));
}

#footer_menu_container {
width:100%;
height:50px;
}

#footer_menu {
width:100%;
height:50px;
padding:0;
margin:0;
list-style:none;
}

#footer_menu li {
height:38px;
margin:-1px 5px 2px 5px;
padding:5px;
float:left;
}

#footer_menu li a {
height:28px;
padding:5px;
font-family:Helvetica;
font-size:20px;
color:#FFF;
text-decoration:none;
font-weight:bold;
display:block;
}

#footer_menu li.selected {
background: -webkit-gradient(linear, left top, left bottom, fr om(#C0C0C0), to(#999));
-webkit-border-bottom-left-radius:6px;
-webkit-border-bottom-right-radius:6px;
}

#footer_menu li.selected a {
color:#000;
}

#prefooter {
width:100%;
height:50px;
background: -webkit-gradient(linear, left top, left bottom, fr om(#FEFEFE), to(#C0C0C0));
border-bottom:1px solid #666;
}
[/css]

Nota: Debido a un problema con WordPress, he tenido que modificar el código CSS para guardar el artículo. En algunas líneas veréis que pone “fr om”, pues bien, debería ir junto, sin el espacio entre “fr” y “om”.

Y esto es todo de momento. Tan sólo me gustaría hacer un apunte: los links que pongamos en el pie de página no tienen por qué ser los mismos que pondríamos en la versión completa de la web. Me explico, generalmente se pone en el pie de página un enlace a la parte superior de la web, sin embargo, pulsando la barra de título de Mobile Safari ya nos lleva a la parte superior, con lo cual no es necesario añadir este enlace en nuestro pie de página.


Hotmail permitirá previsualizar documentos adjuntos de Word, Excel y PowerPoint

Vía Genbeta descubro que Hotmail integrará a partir de agosto la previsualización de documentos adjuntos en formatos Office 97-2003 (doc) y Office 2007-2010 (docx), a través de Office Web Apps. De momento sólo se podrán previsualizar documentos de Word, Excel y PowerPoint (seguramente los que más se suelen enviar como adjunto, a excepción de archivos comprimidos e imágenes).

La verdad es que esto me ha sorprendido. Dejé de utilizar Hotmail hace bastante (desde que me pasé a Gmail) y tenía la impresión de que esta opción ya la habrían implementado, ya que Gmail permitía desde hace bastante ver online los archivos adjuntos en estos formatos.