Por otro lado, la documentación para usuarios está a medias. La versión en español ya está disponible, son dos vídeos que están alojados en Youtube, próximamente subiré los vídeos a alguna web de alojamiento de archivos para que cualquiera pueda descargarlos en la máxima calidad posible. La versión de los vídeos subtitulada en inglés estará disponible en unos días, puede que incluso mañana mismo (eso sí, será más bien por la tarde en todo caso).
Por lo que respecta a WP Carousel 0.5, el plugin ya está terminado. Tan sólo queda añadir los vídeos a la pestaña de ayuda (cosa que no podré hacer hasta que termine la versión en inglés de los vídeos). Le he envido una versión preliminar del plugin a EURL Wolforg, quien ya tradujo la versión 0.4 al francés (juntamente con Portal Colorido). En resumen, WP Carousel 0.5 estará disponible muy pronto, es probable que esta misma semana.
This post was published 13 years ago so it may be outdated.
Email de Apple
Vía Applesfera descubro que la última versión del SDK del iPhone no soporta iPhone OS 2, de hecho ninguna futura versión del SDK lo hará. En principio puede parecer una tontería, teniendo en cuenta que tanto iPhone OS 3 como iOS 4 son gratis, y que el primero es compatible con todos los modelos de iPhone y iPod Touch que ha lanzado Apple, pero no lo es.
iOS 4 no es compatible con los primeros modelos de iPhone y de iPod Touch, y si en la próxima versión de iOS se actualiza el SDK y se elmina el soporte para iPhone OS 3, estos primeros modelos se quedarán sin aplicaciones de la AppStore, al menos nuevas aplicaciones, si Apple no retira las existentes.
This post was published 13 years ago so it may be outdated.
Con la salida de WordPress 3.0 decidí que el diseño de Sumolari.com necesitaba una puesta al día, una pequeña renovación de alguna de sus partes y alguna que otra optimización. Además, durante el desarrollo del tutorial de diseño web para el iPhone fui diseñando una versión para iPhone / iPod Touch de Sumolari.com, que quería poner online en cuanto fuese posible. Por úlimo, aprovechando que ya he terminado el desarrollo de WP Carousel 0.5 (aunque aún tengo que redactar la documentación antes de liberarla) he dedicado la mañana a actualizar el diseño del blog y del foro, juntamente con la versión de WordPress del blog y los plugins.
Los principales puntos en los que me he centrado han sido:
Unificar el foro, el portafolio y el blog bajo un mismo diseño totalmente unificado
Si os fijáis, el portafolio ha desaparecido y se ha vuelvo a unir al blog. La idea de separarlos no era mala, pero la verdad es que se me hacía algo incómodo tener que mantener dos diseños tan diferentes y las diferencias entre el portafolio y el blog contribuían a hacer que pareciesen páginas diferentes.
La solución que se me ocurrió fue usar el mismo diseño que en el blog pero con algunas variaciones, en este caso de color. Para ello he transformado todos los fondos en fondos semitransparentes, de modo que el blog funciona con tan sólo 3 colores básicos, aplicados sobre fondos con degradados blancos y negros cuya opacidad varía y que crean los degradados de colores que hay por la página. También he aprovechado para usar un color diferente en las páginas de contacto y de información sobre el blog.
El siguiente paso fue qué poner en la página de plugins y temas. En el portafolio había un listado de proyectos, pero no me convencía mucho, así que he optado por eliminar esta página, y al hacer clic en el enlace, mostrar un menú con un listado de mis proyectos. Este menú es accesible desde cualquier página, de modo que para acceder a la página de un plugin sólo es necesario hacer dos clics, estés donde estés, y cargar una única página, estés donde estés.
Con el foro sucedía algo similar: el menú del foro sustituía al del blog al entrar al foro, lo que podía ocasionar alguna que otra confusión. Tras haber encontrado un modo de mostrar menús de una forma más eficaz (el listado de proyectos), decidí aplicar lo aprendido juntamente con lo descubierto trasteando con SMF para mostrar el menú completo del foro en cualquier página. Aunque eso sí, decidí sustituir el buscador del blog por el del foro cuando se navega por el foro.
Buscador totalmente renovado
El nuevo buscador
El buscador que había en Sumolari.com me gustaba bastante como concepto, pero tenía fallos en la puesta en práctica. Es genial que se muestren los resultados sin salir de la página actual, pero ¿por qué limitarse a buscar artículos? ¿Por qué no buscar categorías, páginas y etiquetas? Busqué y busqué y la verdad es que nada de lo que encontré me convenció, así que pensé: “Si vas a hacer algo, hazlo bien”, y rediseñé por completo el buscador.
Hasta ahora usaba un plugin para mostrar los resultados, pero para optimizar decidí dejarlo de lado (no usaba jQuery, sino Prototype, de hecho era el único script del blog que usaba Prototype) y crear yo mismo la carga con AJAX (partiendo de lo aprendido durante el desarrollo de la nueva interfaz de WP Carousel 0.5) y dándole un diseño más bonito.
Finalmente ha salido lo que podéis ver en la parte derecha del menú principal: un buscador inspirado en Spotlight, capaz de buscar en páginas, etiquetas y categorías, que se carga en la misma página con jQuery y que se puede cerrar en cualquier momento haciendo clic en el icono con forma de cruz que aparece cuando se busca algo.
Versión para iPhone / iPod Touch
Versión para iPhone de Sumolari.com
Otra de las novedades es que he rediseñado el blog en la versión para iPhone / iPod Touch. El diseño está especialmente pensado para ser cómodo y poder leer el blog de forma simple. La página de inicio muestra los últimos artículos (se pueden cargar más vía AJAX) o un listado de páginas si se toca la pestaña de páginas. También tiene un buscador, pero más sencillo que el de la versión para navegadores de escritorio.
De todos modos, esta versión está pensada únicamente para iPhone / iPod Touch, para las demás ocasiones la versión estándar es mucho mejor.
Otros cambios
Además de estas novedades, también he cambiado algunas cosas más. Por ejemplo, ahora los menús tienen un fondo degradado y no sólido como antes. También he cambiado el logo, poniendo una nueva tipografía y reemplazando el color anterior por uno más neutro (a favor de las posibles gamas de colores del blog). He puesto la rueda dentada que había en el logo del portafolio (animada con jQuery) y he eliminado la pestaña de RSS del pie de página para poner el icono en el menú principal.
Y estas son todas las novedades respecto al diseño del blog.
This post was published 13 years ago so it may be outdated.
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.
La lista básica tendría el siguiente código HTML:
[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>
[/html]
El código CSS para imitar el resultado de la segunda imagen de la izquierda es el siguiente:
[css]
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;
ul.post-list li a span.post-dates {
font-size:13px;
font-weight:normal;
color:#666;
display:block;
}
[/css]
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.
This post was published 13 years ago so it may be outdated.
El curso ya se ha acabado, y estos últimos días he estado fuera de viaje de fin de curso con mis compañeros para celebrarlo. Ahora bien, durante estos días aunque no he podido actualizar el blog ni continuar el desarrollo de ninguno de mis proyectos, he estado pensando nuevas funciones que añadir a WP Carousel 0.5, y he encontrado una novedad realmente interesante en la que he estado trabajando desde ayer hasta ahora, y que ya está completa.
Se trata de la Integración Externa, un sistema para integrar carruseles creados con WP Carousel. El sistema vendría a ser un modo “compartido”, en el cual el administrador de la web permite que otros administradores puedan mostrar el contenido íntegro de sus carruseles, siempre que aquellos administradores que quieran mostrarlo tengan habilitada la opción para compartir sus propios carruseles (si quieres que te presten algo, deberás prestar algo).
Esta idea no sólo sirve para carruseles de otras páginas web, sino que también se puede aplicar para mostrar un mismo carrusel varias veces en la página web. Además, un carrusel externo no es más que un contenido más, así que se puede crear un carrusel con contenido propio y contenido externo, con contenido de varios carruseles externos o con cualquier combinación (a excepción de integrar un carrusel a sí mismo, lo que provoca un bucle infinito – algo más que lógico). Realmente se podría incluso integrar un carrusel de WP Carousel en cualquier página web independientemente de si usa o no WP Carousel.
Esta novedad ya está lista y funciona a la perfección. Ahora tan sólo queda desarrollar el resto de novedades que aún están a medias, pero bueno, a partir de ahora tendré prácticamente todo el día para ponerme a ello, así que el desarrollo será bastante rápido.
This post was published 13 years ago so it may be outdated.
A la hora de montar una comunidad una de las cosas más importantes es hacer que todo el contenido quede bien relacionado, de modo que a pesar de usar diferentes scripts para el foro y el portal, el usuario tenga la sensación de que todo está perfectamente unido y sincronizado. Cosas como mostrar en el portal la lista de último temas del foro o los cumpleaños del día contribuyen a la cohesión de la comunidad.
Trasteando esta semana con Simple Machines Forum, me dio por curiosear el funcionamiento del archivo SSI.php, que según los desarrolladores de SMF nos permite enlazar el foro con el resto de la página web y vaya, no exageran, de hecho permite mucho más que enlazar: permite crear el foro entero en cualquier otro lugar de la página.
Pero vayamos paso a paso. Lo básico antes de comenzar es hacer un require al archivo SSI.php del foro para poder tener acceso a todas las funciones y variables que necesitamos.
[php]
require("ruta/al/foro/SSI.php");
[/php]
Con esto tendremos acceso a variables como $context (la matriz principal de SMF, que almacena cosas como los links del menú, el navegador desde el que se accede, información acerca del usuario actual, etc. También tenemos acceso a funciones más que interesantes, como la de mostrar el formulario de inicio de sesión o de búsqueda, la última encuesta, los mensajes más recientes, los foros con más popularidad, el usuario con más mensajes publicados, el último usuario registrado, los usuarios online, los cumpleaños del día, etc.
[php]
// Para mostrar los últimos temas
ssi_recentTopics($num_recent = 8, $exclude_boards = null, $include_boards = null, $output_method = ‘echo’);
// Para mostrar los últimos mensajes
ssi_recentPosts();
// Para mostrar la última encuesta
ssi_recentPoll();
// Para mostrar los foros con más mensajes
ssi_topBoards();
// Para mostrar los mensajes más vistos
ssi_topTopicsViews();
// Para mostrar la encuesta con más votos
ssi_topPoll();
// Para mostrar el usuario con más mensajes
ssi_topPoster();
// Para mostrar el último usuario registrado
ssi_latestMember();
// Para mostrar un usuario al azar cada día
ssi_randomMember(‘day’);
// Para mostrar los usuarios online en el foro
ssi_whosOnline();
// Para mostrar los usuarios online en el foro y en páginas que usen SSI
ssi_logOnline();
// Para mostrar el formulario de inicio de sesión (si no ha iniciado sesión)
ssi_login();
// Para mostrar el link para cerrar la sesión (si ha iniciado sesión)
ssi_logout();
// Para mostrar un mensaje de bienvenida
// Un mensaje como "Hola, sumolari, tienes 10 mensajes, 0 son nuevos."
ssi_welcome();
// Para mostrar todos los eventos del calendario del foro y los cumpleaños
ssi_todaysCalendar();
// Para mostrar sólo los cumpleaños
ssi_todaysBirthdays();
// Para mostrar las fiestas de hoy (si es que hay alguna en el calendario)
ssi_todaysHolidays();
// Para mostrar los eventos de hoy del calendario
ssi_todaysEvents();
// Para mostrar los eventos recientes
ssi_recentEvents();
// Para mostrar estadísticas del foro
ssi_boardStats();
// Para mostrar las últimas noticias del foro
ssi_news();
// Para mostrar los últimos temas del foro de noticias
ssi_boardNews();
// Para mostrar la barra de menús
// También se puede recorrer la matriz $content[‘menu_buttons’] para obtener el mismo resultado
ssi_menubar();
// Para mostrar el buscador del foro
ssi_quickSearch();
// Para mostrar un listado de los últimos archivos adjuntos subidos al foro
ssi_recentAttachments();
[/php]
This post was published 13 years ago so it may be outdated.
En muchas ocasiones necesitamos comprar dos archivos de texto para ver qué diferencias hay entre ellos, como por ejemplo si queremos ver las diferencias entre dos versiones de un script PHP. Vale, cuando son scripts de un par de centenares de líneas no hay problema, pero, ¿qué me decís si queréis comparar dos archivos de varios miles (o decenas de miles) de líneas de código? Hacerlo “manualmente” no tiene sentido, y es aquí donde entra FileMerge.
Buscando FileMerge
FileMerge es una de las aplicaciones que vienen con el disco de instalación de Mac OS X, y se instala juntamente con Xcode y todo el entorno de desarrollo de Mac OS X, así que por defecto no la encontraréis instalado. Una vez tengáis instalado Xcode bastará con que busquéis con Spotlight “FileMerge” y lo ejecutéis.
Interfaz de FileMerge
La interfaz es muy intuitiva: se arrastra un archivo al recuadro de la izquierda y otro al recuadro de la derecha y a continuación se hace clic en “Compare”. Esperamos unos segundos (dependiendo de los archivos) a FileMerge acabe de encontrar las diferencias y finalmente veremos una ventana dividida en dos partes. Cada parte tiene el contenido de un archivo y las diferencias aparecen marcadas en ambos lados. También nos ofrece un recuento de diferencias.
Es realmente útil para comparar dos versiones diferentes de un archivo y ver qué cambios se han realizado de forma más cómoda y rápida. Se acabó el tener que ir línea a línea buscando diferencias, con FileMerge el trabajo se hace mucho más sencillo.
This post was published 13 years ago so it may be outdated.
Ya está disponible para su descarga la versión final de WordPress 3.0. Las novedades más importantes ya las he ido comentando por el blog, pero a modo de resumen (y saltándome muchísimos cambios de esta versión) son:
Integración de WordPress MU
Nuevo theme por defecto
Gestor de menús
Os dejo a continuación el vídeo de presentación de WordPress 3.0.
This post was published 13 years ago so it may be outdated.
Nuevo Mac Mini
Vía Applesfera descubro que Apple ha renovado el Mac Mini, dándole un nuevo aspecto basado en una única pieza de aluminio (unibody), con lo que ha reducido el tamaño del equipo y ha dado espacio suficiente para alojar en su interior la fuente de alimentación.
En cuando a hardware, el procesador sigue siendo un Core 2 Duo de 2.4 ó 2.66 Ghz, 2 GB de memoria RAM (ampliables hasta a 8 GB), disco duro de 320 ó 500 GB, una Nvidia GeForce 320M con 256MB DDR2 de memoria de vídeo y con salida Mini Display Port y HDMI (el Mac Mini incluye un adaptador HDMI -> DVI) y un lector de tarjetas SD.
El precio de salida es de 779€, algo caro teniendo en cuenta que por “tan sólo” 270€ más podemos comprar un iMac con pantalla de 21.5″, mejor procesador, el doble de memoria RAM, más capacidad de disco duro y teclado y ratón inalámbricos.
This post was published 13 years ago so it may be outdated.
Desde el sábado pasado está disponible la tercera RC de WordPress 3.0. Cada día queda menos para que vea la luz la versión final. Los cambios entre esta RC y la anterior son casi en la totalidad bugs detectados en versiones anteriores arreglados. Esta será seguramente la última versión candidata antes de la versión final, así que es más que probable que antes de julio se libere WordPress 3.0.
