Desarrollo Web (Web Development)

Olvidate del Loren Ipsum para tus textos de prueba en WordPress

2012-05-27T14:22:47Z

Normalmente, si eres diseñador o desarrollador, seguramente te hayas pasado muchas veces por la pagina de Loren Ipsum para copiar texto de ejemplo para tus diseños o desarrollos. La verdad que esto esta muy bien para estos temas, pero cuando necesitamos un verdadero texto de prueba para wordpress, Loren Ipsum no suele ser lo mas adecuado para un formato de texto enriquecido. Basicamente por que no utiliza el potencial que tiene el editor TinyMCE que viene incorporado en WordPress. Veamos como podemos enriquecer mucho mas nuestro texto de ejemplo con WPfillMe

Nos será útil para probar nuestras plantillas, nuestros desarrollo y nuestras maquetaciones; para ver si se desmaquetan con mucho texto, con alguna tabla, con listas de elementos,etc… Desde la propia web podrás generar simplemente pulsando un botón, una estructura completamente valida de texto de ejemplo que te sera mas útil que un simple Loren Ipsum

Aquí un pequeño ejemplo.

Cabeceras

Level One Heading

Level Two Heading

Level Three Heading

Level Four Heading

Level Five Heading

Level Six Heading

Texto en linea

This is a standard paragraph created using the WordPress TinyMCE text editor. It has a strong tag, an em tag and a ~~strikethrough~~ which is actually just the del element. There are a few more inline elements which are not in the WordPress admin but we should check for incase your users get busy with the copy and paste. These include citations, abbr, bits of code and variables, inline quotations, inserted text, text that is ~~no longer accurate~~ or something so important you might want to mark it. We can also style subscript and superscript characters like C0₂, here is our 2^nd example. If they are feeling non-semantic they might even use bold, italic, big or small elements too. Incidentally, these HTML4.01 tags have been given new life and semantic meaning in HTML5, you may be interested in reading this article by Harry Roberts which gives a nice excuse to test a link. It is also worth noting in the “kitchen sink” view you can also add underline styling and set text color with pesky inline CSS.

Additionally, WordPress also sets text alignment with inline styles, like this left aligned paragraph. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.

This is a right aligned paragraph. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.

This is a justified paragraph. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.

Finally, you also have the option of an indented paragraph. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.

And last, and by no means least, users can also apply the Address tag to text like this:

123 Example Street,
Testville,
West Madeupsburg,
CSSland,
1234

…so there you have it, all our text elements

Saber si una web está creada con WordPress

2012-05-27T14:38:58Z

Hay muchas maneras de saber si una web está creada con WordPress. Lo más sencillo sería si en alguna parte reconociera el software – gratuito y Open Source – que facilitó la creación de la web, pero como esto no es común hay otras maneras de saber si un sitio se creó con WordPress, algo cada día más difícil de adivinar.

Y es que WordPress es el rey de los CMS, y muchos diarios digitales, blogs, portales y webs de todo tipo usan ya WordPress, pero no siempre reconocen que están creados con este maravilloso software, a saber el motivo.

Vamos a ver algunas maneras de detectar si una web se creó con WordPress, y verás que es más sencillo de lo que parece:

Intenta acceder: añade “/wp-admin/” a la ruta del sitio. Por ejemplo, si la web es http://techcrunch.com quedaría así http://techcrunch.com/wp-admin/. Si te saluda la pantalla de acceso de WordPress ya lo sabes. Esto no siempre funciona porque puedes redirigir la ruta de acceso o incluso ocultarla con varios métodos.
Revisa el código fuente buscando la versión de WordPress: si el webmaster no hay ocultado la versión de WordPress encontrarás una línea que te “soplará” no solo que es WordPress sino hasta la versión. Esto lo localizarás con el “meta generator“, que se verá así: < meta name = "generator" content = "WordPress 3.3.2" / >. También, en este caso, es fácil ocultar la versión de WordPress que usas.
Busca el tema WordPress: uno de los métodos más seguros es buscar la ruta del tema utilizado, que (casi) siempre estará en /wp-content/themes/nombre_del_tema/
Busca el “readme”: Otro chivato de WordPress es el archivo de información de la versión, accesible en la ruta http://sitioweb.com/readme.html. Creo que huelga decir que es uno de los archivos de instalación que debes eliminar cuanto antes para no dar información gratis.
Examina la hoja de estilos: uno de los mayores chivatos de WordPress es la hoja de estilos del tema que uses. Aplicando el método 3 encontrarás la ruta a la hoja de estilos en el código fuente, algo como http://sitioweb.com/wp-content/themes/mitema/style.css, archivo que suele ser accesible directamente y ta da tanta información que asusta, entra la que está – como no – la ruta del autor, además de la típica estructura de cualquier tema WordPress. Puedes cambiar el autor, la url del tema y más cosas pero la estructura “cantará” que es un tema WordPress con elementos como el “Theme Name”, “URI” o “Author”.
Busca referencias a plugins: la popularidad de plugins como All in one SEO o Platinum SEO, que siempre añaden etiquetas al código fuente son elementos que descubren si un sitio está creado con WordPress. Si revisas el código fuente de una web y encuentras algo así sabes que WordPress está ahí: < ! -- All in One SEO Pack 1.6.14.3 by Michael Torbert of Semper Fi Web Design[427,449] -- >
XMLRPC: es muy común activar el protocolo XML-RPC para que WordPress se comunique con el mundo exterior (editores de escritorio o aplicaciones móviles) y cuando lo haces entonces se añade la ruta habitual al fichero PHP de la instalación de WordPress a tu código fuente, algo como
Y, para terminar, también puedes usar servicios web que te chivan si la url está creada con WordPress como Is it WordPress? o What WP theme is that?

Y, nada, si se me ha pasado algún método nos lo cuentas en los comentarios y lo añado

WordPress cumple 9 años ¡Felicidades a tod@s!

2012-05-27T13:12:01Z

Hoy cumple 9 años WordPress que, desde su primera versión, poco a poco se ha convertido en el sistema de publicación online más utilizado y el CMS más consolidado.

En los próximos meses, no digamos años, WordPress se adaptará a los nuevos modos de navegación, apostando por diseños adaptables, navegación móvil y muchas novedades que disfrutaremos juntos, al menos otros 9 años más, y que te contaré aquí en Ayuda WordPress.

Hoy, como siempre, el “slogan” de WordPress es más cierto que nunca:

“WordPress nació del deseo de disponer de un sistema de publicación personal elegante, bien estructurado, creado con PHP y MySQL, bajo la licencia GPL. Es el sucesor oficial de b2/cafelog. WordPress es un software novedoso, pero sus raíces y desarrollo provienen desde 2001. Es un producto estable y maduro. Esperamos, enfocándonos en estándares web y la experiencia de usuario, crear una herramienta diferente de cualquier otra”

Las versiones, una a una, que nos han traído hasta hoy han sido todas estas:

Versión	Fecha emisión	Músico	Cambios	Anuncio
0.70	May 27, 2003		Changelog	Blog
0.71	June 9, 2003		Changelog	Blog
0.711	June 25, 2003		Changelog	Blog
0.72	October 11, 2003		Changelog	Blog
1.0	January 3, 2004	Miles Davis	Changelog	Blog
1.0.1	January 25, 2004		Changelog	Blog
1.0.2	March 11, 2004	Art Blakey	Changelog	Blog
1.2	May 22, 2004	Charles Mingus	Changelog	Blog
1.2.1	October 6, 2004		Changelog	Blog
1.2.2	December 15, 2004		Changelog	Blog
1.5	February 17, 2005	Billy Strayhorn	Changelog	Blog
1.5.1	May 9, 2005		Changelog	Blog
1.5.1.2	May 27, 2005		Changelog	Blog
1.5.1.3	June 29, 2005		Changelog	Blog
1.5.2	August 14, 2005		Changelog	Blog
2.0	December 26, 2005	Duke Ellington	Changelog	Blog
2.0.1	January 31, 2006		Changelog	Blog
2.0.2	March 10, 2006		Changelog	Blog
2.0.3	June 1, 2006		Changelog	Blog
2.0.4	July 29, 2006		Changelog	Blog
2.0.5	October 27, 2006	Ronan Boren	Changelog	Blog
2.0.6	January 5, 2007		Changelog	Blog
2.0.7	January 15, 2007		Changelog	Blog
2.0.8	February 8, 2007		Changelog	No Blog
2.0.9	February 21, 2007		Changelog	Blog
2.0.10	April 3, 2007		Changelog	Blog
2.0.11	August 5, 2007		Changelog	Blog
2.1	January 22, 2007	Ella Fitzgerald	Changelog	Blog
2.1.1	February 21, 2007		Changelog	Blog
2.1.2	March 2, 2007		Changelog	Blog
2.1.3	April 3, 2007		Changelog	Blog
2.2	May 16, 2007	Stan Getz	Changelog	Blog
2.2.1	June 21, 2007		Changelog	Blog
2.2.2	August 5, 2007		Changelog	Blog
2.2.3	September 8, 2007		Changelog	Blog
2.3	September 24, 2007	Dexter Gordon	Changelog	Blog
2.3.1	October 26, 2007		Changelog	Blog
2.3.2	December 29, 2007		Changelog	Blog
2.3.3	February 5, 2008		Changelog	Blog
2.5	March 29, 2008	Michael Brecker	Changelog	Blog
2.5.1	April 25, 2008		Changelog	Blog
2.6	July 15, 2008	McCoy Tyner	Changelog	Blog
2.6.1	August 15, 2008		Changelog	Blog
2.6.2	September 8, 2008		Changelog	Blog
2.6.3	October 23, 2008		Changelog	Blog
2.6.5	November 25, 2008		Changelog	Blog
2.7	December 10, 2008	John Coltrane	Changelog	Blog
2.7.1	February 10, 2009		Changelog	Blog
2.8	June 10, 2009	Chet Baker	Changelog	Blog
2.8.1	July 9, 2009		Changelog	Blog
2.8.2	July 20, 2009		Changelog	Blog
2.8.3	August 3, 2009		Changelog	Blog
2.8.4	August 12, 2009		Changelog	Blog
2.8.5	October 20, 2009		Changelog	Blog
2.8.6	November 12, 2009		Changelog	Blog
2.9	December 18, 2009	Carmen McRae	Changelog	Blog
2.9.1	January 4, 2010		Changelog	Blog
2.9.2	February 15, 2010		Changelog	Blog
3.0	June 17, 2010	Thelonious Monk	Changelog	Blog
3.0.1	July 29, 2010		Changelog	Blog
3.0.2	November 30, 2010		Changelog	Blog
3.0.3	December 8, 2010		Changelog	Blog
3.0.4	December 29, 2010		Changelog	Blog
3.0.5	February 7, 2011		Changelog	Blog
3.0.6	April 26, 2011		Changelog	No blog
3.1	February 23, 2011	Django Reinhardt	Changelog	Blog
3.1.1	April 5, 2011		Changelog	Blog
3.1.2	April 26, 2011		Changelog	Blog
3.1.3	May 25, 2011		Changelog	Blog
3.1.4	June 29, 2011		Changelog	Blog
3.2	July 4, 2011	George Gershwin	Changelog	Blog
3.2.1	July 12, 2011		Changelog	Blog
3.3	December 12, 2011	Sonny Stitt	Changelog	Blog
3.3.1	January 3, 2012		Changelog	Blog
3.3.2	April 20, 2012		Changelog	Blog

Y lo que está por venir, de momento, es esto:

Versión	Fecha prevista
3.4	Mayo 2012
3.5	2012
3.6	2013

Enlaces de Twitter de 2012-05-27

2012-05-27T07:30:00Z

"Tucked Corners" en CSS | webintenta blog http://t.co/MpSUrP95 #
Anieto2k: jQuery.ascensor.js, plugin jQuery que lleva el scrollTo() a otro nivel http://t.co/YdMYPA4J #
Anieto2k: JavaScriptSQL, motor de base de datos comentamente en Javascript http://t.co/EFKsNK1g #
5 Useful CSS Tricks for Responsive Design http://t.co/kKINjxqf #
SASS vs. LESS | CSS-Tricks http://t.co/TTwhaBgT #
Modificación de la Ley 34/2002 que obliga al consentimiento expreso del usuario para el uso de cookies http://t.co/JbTE0y6r #
Usabilidad e internacionalización http://t.co/XGJwbV52 #
Exclusive Freebie: 50 Crisp Web UI Icons | Webdesigntuts+ http://t.co/ukoKOBZz #

Otras entradas que pueden interesarte:

¿Quieres hasta 6 meses de hosting gratis? Utiliza el cupón RCwebmasterlibre al contratar cualquier plan con RedCoruna - más información

Enlaces de Twitter de 2012-05-27 was first posted on mayo 27, 2012 at 9:30 am.

Energy System ya tiene sus tablets Android

2012-05-26T20:09:00Z

Energy System queria atender las necesidades de los usuarios para esta navidad, por lo que no vio mejor idea que presentar tres nuevas tablets con pantallas de entre 7 y 8 pulgadas. Las tablets llevan el nombre de Energy Tablet i724 Dark Iron, Energy Tablet i824 Dark Iron y Energy Tablet i828 HD Black, todas [...]

Jawbone Up lo nuevo para iPhone

2012-05-26T14:21:00Z

El JawBone Up esta listo para comprar en la tienda de accesorios de AT&T; para que los curiosos usuarios del iPhone de Apple se aventuren con este nuevo gadget. Se preguntarán que hace o como funciona este nuevo dispositivo. Su funcionamiento se basa en un sistema de monitoréo que colocado en la muñeca envía datos [...]

Favicons Next To External Links

2012-05-26T17:28:26Z

I've had this JSFiddle from CSS Wizardry open for like 2 weeks in my browser. I kept thinking about it, because before that I got an email from someone asking about essentially the same thing and it stuck in my head. They were wanting to insert a favicon next to links and use only CSS to do it. Unfortunately I haven't found a way to do exactly that, but using some jQuery we can do it pretty easily.

The "I Wish" CSS Only Technique

What would be nice is if you had simple semantic HTML like this:

<a href="http://github.com">GitHub</a>

And then you could access everything you needed to insert a background image of the favicon using a service like getFavicon.

/* Fair warning, this doesn't work */

a[href^="http"]:before {
  content: url(http://g.etfv.co/ + attr(href) + );
}

Maybe the syntax wouldn't be exactly like that, but something like it. The point is, you can't mix up the url() syntax into parts like that in CSS.

Google's Favicon Service

Google has it's own favicon service you can use. For example:

http://www.google.com/s2/u/0/favicons?domain=css-tricks.com

The trick is you need just the host name and TLD and nothing else. I searched around and found a simple regex for getting that from any URL. We'll need that because links aren't always (or even usually) the root of sites.

function getDomain(url) {
   return url.match(/:\/\/(.[^/]+)/)[1];
}

Using these things, and jQuery, we'll find all links and apply the favicon as a background image. The external link checking is pretty rudimentary, but there are more robust methods here if need be.

$("a[href^='http']").each(function() {
    $(this).css({
        background: "url(http://www.google.com/s2/u/0/favicons?domain=" + getDomain(this.href) +
        ") left center no-repeat",
        "padding-left": "20px"
    });
});

Then @travis reminded me that you can just use this.hostname instead of the fancy regex. So:

/* Nothing else needed */
$("a[href^='http']").each(function() {
    $(this).css({
        background: "url(http://www.google.com/s2/u/0/favicons?domain=" + this.hostname +
        ") left center no-repeat",
        "padding-left": "20px"
    });
});

I'm not sure what the browser support is for hostname, whether it's just as good as href or less so, not sure.

getFavicon Method

@seanodotcom showed me another similar service galled getFavicon. It's hosted by Google AppEngine, but it's not Google's own service. I did find it a bit slower. But the advantage being that you don't need to deal with host names at all, you just give them the full URL.

So then it becomes:

$("a[href^='http']").each(function() {
    $(this).css({
        background: "url(http://g.etfv.co/" + this.href + ") left center no-repeat",
        "padding-left": "20px"
    });
});

View Demo

Performance?

As I'm sure you know, the number of HTTP requests a page makes is a huge deal in performance. Each little image in these techniques are one page request each.

@yuritkanchenko pointed out to me a cool favicon service that can automatically sprite the favicons for you so you can keep it to one request.

For instance:

http://favicon.yandex.net/favicon/google.com/yandex.ru/css-tricks.com

I'm afraid I didn't go the extra mile here and write the JavaScript needed to find all links, concatenate the domains, make the request, and then apply the images as a sprite, but I'm sure you could whip that up pretty quick if you really needed it.

Favicons Next To External Links is a post from CSS-Tricks

Grabación del evento jQuery Mobile

2012-05-26T17:16:08Z

Grabación de la introducción a jQuery Mobile emitida en directo el pasado viernes.

Nuevo iPhone para el 4 de Octubre, es oficial

2012-05-26T13:00:00Z

Ayer hablábamos del posible lanzamiento del iPhone 4S, hoy Apple envia a la prensa una invitacion para un evento poco usual, y como tarjeta de presentación dan ni mas ni menos que la imagen de la nota. Destinada para el 4 de Octubre, a las 10 a.m hora local, posiblemente en Cupertino. Seguramente en esta [...]

Circle Management la nueva función Google+

2012-05-26T13:00:00Z

Circle management, en su versión beta, ayudará especialmente a los usuarios que tienen muchos círculos, y que a la hora de añadir contactos directamente, cuesta un poco buscar, bajar scroll, etc. Gracias a circle management, la cosa se nos simplifica notablemente. Esta extensión para Chrome, añade un formulario de búsqueda en la parte superior (donde [...]

The Sandbox: Juega a ser un dios en tu iPhone/iPod/iPad

2012-05-26T16:42:38Z

¡Hoy decidimos tomarnos un descanso del diseño web y entretenernos unas horas con el diseño… del mundo! Así es, en The Sandbox tomarás el rol de aprendiz de dios, y crearás tu propio universo a través de diversos elementos como electricidad, barro, arena, vidrio… ¡Y muchos más! Creado por Pixowl Games y BulkyPix, en The Sandbox [...]

Aumenta la seguridad de tu WordPress

2012-05-26T14:22:08Z

Siendo WordPress el CMS más popular hace que también sea el más atacado por los hackers. Ya sea para obtener datos confidenciales o por tener el control de nuestra web y poder publicar contenido que quieran.

No te pienses que estás fuera de riesgo por ser un blog con pocas visitas, muchos de los ataques que se realizan hoy día por internet son exploits automatizados que usan para atacar a todos los dominios que se encuentren por delante. Si quieres conocer cómo proteger tu blog ante ataques de hackers sigue leyendo:

Usa datos de acceso fuertes

Hasta hace poco cuando instalabas un WordPress te generaba el usuario admin como administrador del blog, y así se quedaba. Actualmente ya te permite configurar un nombre de usuario administrador distinto al típico de WordPress. Si todavía tienes admin como super usuario, sepas que los hackers ya tienen el 50% de los datos que necesitan para acceder a tu WordPress como administrador.

Si al usuario admin le añadimos una contraseña fácil de adivinar, o que uses en otros sitios, estarás más expuesto a posibles accesos por terceros. Huye de tu fecha de cumpleaños, tu matrícula del coche, tu número de teléfono… opta por alguna contraseña más compleja. Por ejemplo, usa tu apellido (Sánchez), cambia las vocales por números (S4nch3z) y ahora añade alguna mayúscula entre medio (S4ncH3Z), ya tienes una contraseña fácil de recordar y compleja a la vez.

Protege tu base de datos

Si tienes instalado tu WordPress en un servidor propio lo mejor es que consultes con tu proveedor de hosting y les comentes que necesitas proteger tu base de datos con el archivo .htaccess, una barrera útil a la hora de protegerte contra ataques de hackers no muy avanzados.

Otro de los errores más comunes, al igual que lo del usuario admin, es el tener la base de datos con el prefijo wp_, el que viene por defecto al instalar WordPress. Para subsanar este error puedes instalar WP Prefix Table Changer.

Actualizado siempre a la última versión

Puede parecer una tontería, pero conozco a mucha gente que se instaló WordPress en su servidor propio y ya no lo han actualizado desde entonces. Tener WordPress, los plugins y sobre todo los temas actualizados es muy importante. La mayoría de updates son por corrección de errores de seguridad. ¡Hay que estar siempre a la última!

Seguro que alguno de estos consejos no te habías parado a pensarlos. ¿Tienes algún truco para proteger mejor tu WordPress? Puedes dejarlo en los comentarios, todos podemos aportar ideas :)

Artikel in JavaSPEKTRUM 03/12

2012-05-26T09:49:00Z

In Ausgabe 3/2012 der Fachzeitschrift JavaSPEKTRUM wurde kürzlich ein Artikel mit dem Titel "SOA-basierte NoSQL-Lösung im Mobile-Umfeld" veröffentlicht, dessen Co-Author ich bin. Er beschreibt, wie eine mobile Java-Applikation mittels kreativer Ansätze und einem Mix aus moderner und altbewährter Technik zum Erfolg gebracht wurde.

Der Volltext kann entweder im Browser auf der codecentric Homepage unter der Rubrik Kompetenzen/Publikationen gelesen werden, steht aber auch als PDF zum Download bereit.

PlanetMySQL Voting: Vote UP / Vote DOWN

Detecta si estás online con HTML5

2012-05-26T08:36:43Z

Una de las nueva capacidades de la programación web es la capacidad de hacer que nuestras aplicaciones web puedan trabajar en modo offline, pero esto, nos obliga a controlar en todo momento si disponemos de conexión para volcar los cambios producidos, actualizar ciertos datos,...

`navigator.onLine`

El objeto navigator se modifica y añade esta nueva variable con el estado en formato boolean para conocer el estado de la conexión del usuario.

if(navigator.onLine){
alert('Online');
} else {
alert('Offline')
}

Así, podemos condicionar ciertas tareas que tendrán que realizarse exclusivamente en el navegador del usuario y otras que se encargarán de trabajar directamente con el servidor de aplicaciones.

Compatibilidad

Actualmente está disponible en la mayoría de navegadores modernos, al parecer, incluso IE7 dispone de esta capacidad.

The Elder Scrolls V: Skyrim

2012-05-25T13:00:00Z

En la era mitológica la paz no reina por mucho tiempo, tras el asesinato del rey Skyrim en tierras ancestrales, se desencadeno una guerra civil que genero la ira del dios Alduin, que llega para vengarse en la forma de un dragón infernal. Ya tiene fecha de lanzamiento la quinta entrega del conocido juego de [...]

Disney y Apple la nueva generación de juegos infantiles

2012-05-25T13:00:00Z

Muchas empresas trabajan en conjunto para armar una puesta en común, dos polos completamente distintos como lo son Apple y Disney se unen para dar inicio a una nueva era donde los jóvenes son los protagonistas. Por su parte utilizando como terminal al iPad 2 ahora podremos disfrutar de la magia de Disney utilizando a [...]

El último proyecto de Steve Jobs no fue el iPhone 4S

2012-05-25T18:44:00Z

Todos creerían que el ultimo proyecto de Steve Jobs fue el recientemente presentado iPhone 4S, pero no es así, se estima que ya estaba listo desde hace varios meses. El ultimo proyecto del cofundador de Apple fue ni mas ni menos que el iPhone 5, antes de dejar este mundo. Técnicamente no se sabe si [...]

WordPress 3.0 para IOS disponible

2012-05-26T00:08:27Z

Acaba de salir la versión 3.0 de WordPress para IOS, con menos novedades de lo esperado, y curiosamente poniendo los dientes largos con la versión 3.1. Aún estoy estupefacto.

Perdón por el lado crítico, las novedades son estas:

Avisos Push para blogs en WordPress.com: Para que la app te avise de nuevos comentarios y así poder aprobarlos antes. De momento solo para sitios alojados en WordPress.com
Barra de herramientas de moderación deslizando: Si deslizas el dedo sobre un comentario sale una barra de moderación, como en la aplicación de correo del iPad o iPhone.
Mejoras de rendimiento, especialmente para iPad: Se ha tratado de ofrecer la versión más estable posible, solucionando hasta 44 fallos.
Traducciones al Chino (Taiwan), Húngaro, y Polaco

Y ¿por qué decía lo de la versión 3.1?, pues porque estas novedades, comparadas con lo que se anuncia para la siguiente versión no es nada, donde en el post del blog oficial se nos anuncia que incorporará lo siguiente:

Paneles deslizantes para el iPad que permitirán una gestión más rápida y efectiva de la aplicación, tanto en entradas, como en páginas, estadísticas, etc..
Menú deslizante para iPhone/iPod Touch para acceder rápidamente a toda la aplicación
Formatos de entrada en el editor para cambiar el aspecto de cada entrada, algo fundamental bajo mi punto de vista en una aplicación móvil, donde la mayoría las veces no es precisamente una entrada normal lo que se publica.
Mejoras en la pantalla de bienvenida, que hacen falta, la verdad
Mejores estadísticas en el iPad.
Ajustes de imagen en el editor, para definir título, descripción, alineación, tamaño, etc
Editor visual para formatear los textos de manera sencilla (POR FAVOR)
Galerías
Mejoras en la vista previa
Acceso más rápido y sencilla a la hora de guardar borradores y los ajustes de publicación
Tags y categorías para la “Foto rápida”
Avisos Push para todos los WordPress, también los alojados
Soporte de imágenes destacadas

¿Tenía yo razón?, vale, la 3.0 mola pero … espero ansiosamente la 3.1

The Month Movie: Pitch Black

2012-05-25T20:04:09Z

A principios de año cree el grupo The Month Movie en Flickr, un grupo en el que elegimos una película que mediante una fotografía intentaremos representar durante ese mes. Este mes, Sergio Gardoki eligió Pitch Black (o Las crónicas de Riddick) como película a representar y este ha sido el resultado.

(Ver Imagen)

Este mes lo he pasado yo peor que los protagonistas de esta película. Primero la cámara murió, tuvo que pasar por el servicio de atención al cliente y lograron resucitarla, así que vuelve a estar entre nosotros, pero he estado una semana con el corazón en un puño y los ojos sobre una nueva 5D MK2 :P Tambien he de decir que esta película me ha parecido especialmente dificil de representar, no estaba dispuesto a afeitarme la cabeza para la foto:D, y aprovechando la temática fantástica de la película he pensado en volverme loco con el Photoshop y aprovechar este acercamiento de Saturno que pudimos disfrutar el otro día :P Para ello, he usado unas imágenes de otro collage de fotos sacadas por el Hubble de Jules Stoop y el suelo es de la playa de Palma de Mallorca con un Ojo de pez que me dejó Fran Lara para hacer esta toma justo en el atardecer para colocar el Sol en el punto donde está.

10 Things I Learned While Interning at YUI

2012-05-25T19:54:57Z

For eight months, I had the opportunity to intern with the YUI Team at Yahoo, while I was completing my engineering degree. Today, I’d like to share the top ten things that I learned from my experience with YUI.

A Bit of Background

The YUI Team is primarily responsible for the development and maintenance of the YUI Library. The library is a collection of user-interface components, class management tools, and utilities written in JavaScript and CSS that make it easier for developers to create web applications. Unlike other libraries, YUI is not just about DOM manipulation; it has a rich set of class management tools and a robust event system that makes it easier to develop in JavaScript.

Apart from that, the YUI Team is also responsible for YUI Theater, a very popular resource for web developers, along with a myriad of smaller tools such as YUI Builder, YUI Compressor, YUI Test and more.

My role at the team was to primarily help develop components for the library, although I helped out a little bit with YUI Theater as well.

1. Understanding the Library

When I walked into Yahoo on my first day, I had zero real-world experience with YUI. I was familiar with JavaScript, jQuery, HTML/CSS and PHP, but that was basically it when it came to web programming. I’m sure many of you are or have been in the same boat as me.

My first task was to learn the syntax and architecture behind YUI3. Fortunately, I had a good understanding of raw JavaScript, and this helped immeasurably. A lot of front-end engineers know certain libraries really well, but many don’t know how they works under the hood. To build plugins or modules on top of a library (such as YUI3 or jQuery), it’s useful to have a fundamental understanding about how that library works, and in this case, how JavaScript as a language works.

What I learned: Having a fundamental understanding of raw JavaScript (no libraries) forces you to understand the language better and makes you a better developer in the long run.

Think about it. Each JavaScript library is different and has its own idiosyncracies. The only commonality is that they are rooted in JavaScript. Doesn’t it make sense to understand the idiosyncracies of JavaScript first? Take some time out to build something small without using a library. You’ll be glad you did.

Js Fundamentals Links

2. Using Git in a Team

The YUI Team relies on Git as their primarily version control system and the project is hosted on Github. Previous to my internship at YUI, I used Git for my own small projects, and this generally consisted of the following steps:

git pull origin master
git add "<insert a large number file>"
git commit -m "<insert some general comment>"
git push origin master

I’m sure many of you have done what I just described. Generally, as the project time gets longer, the commits get harder to understand! However, in a large team with a dozen developers, this method breaks down really fast. Firstly, master in YUI3 (and many other large projects) is considered to be stable code that has been unit-tested, so commits generally do not go there until a later stage. Generally, each developer works on a separate branch and merges into master once they are confident in their code.

What I learned: You don’t have to be a guru, but understanding the basics of Git (branching, merging, reverting and solving merge conflicts) can go a long way to keeping your repos clean and organized.

A lot of things are possible to do with Git and I’ve found that, rather than learning them ahead of time, it’s more useful to research when you need to do something in particular. More importantly, my experience has taught me to be careful when experimenting with Git. It’s better to ask someone when trying a new command or trying it on a mock repo instead of messing up the commit history of the live repo. :)

Git Basics Links

3. Modular Architecture for Web Apps

Separating code into different JavaScript files to maintain a modular architecture can be painful for new developers. As a result, we often see large JavaScript files with hundreds of lines of code in them.

<DOCTYPE html>
<html>
    <head>
    <script>
        //My entire application's JS right here in one single spot. Uh oh.
    </script>
    ...

This introduces tight coupling between objects and isn’t good practice when it comes to object-oriented programming. Even worse, you may have global variables that makes your app fail in unexpected ways. We’ve all been guilty of this in the past. Luckily, libraries like YUI can help you with this.

What I learned: When writing an entire web application in JavaScript, it’s very important to have well-organized code; maintaining a spaghetti-coded project will only cause you headaches and nightmares.

One of the most important aspects of YUI3 is its modular nature. As a developer, you only pull down the code that you need. This reduces coupling, keeps file sizes small, and improves your code’s readability.

For instance, you could do this in a file called counter.js:

YUI.add("counter", function(Y) {

    //Write code specific to my counter object

}, '1.0', {requires: ['node']); //Say what my counter object code needs to run. YUI will pull these in first.

And then in a separate JS file, such as app.js:

YUI_config = {
    modules: {
        'counter': { fullpath: 'path/to/counter.js', requires:['node'] }
    }
};

YUI().use('counter', function(Y) { //Pull down my counter module.
    var counter = new Y.Counter({…}); //Create a counter instance
});

Instead of having one big file called app.js, we’ve split it up based on functionality into counter.js and app.js.

4. NodeJS and YUI on the Server

The growing popularity of NodeJS made me want to start building some stuff with it. Being a front-end engineer, I like being able to use JavaScript on the server. Although NodeJS is not suitable for everything, it’s worth learning.

JS on the server does not have the same limitations as client-side JS because there is no DOM, but a library such as YUI can still help you with software architecture on the server – things such as class and object management, and custom events.

What I learned: YUI 3 is not all about DOM manipulation — it also contains a robust set of class/object management tools, not to mention our powerful custom events. All of these tools are immediately useful in server-side programming.

Being on the YUI Team, I was able to explore Dav Glass’ NodeJS-YUI3 module, which wraps up YUI functionality for use in a NodeJS environment. Remember that, apart from web sites, NodeJS is a useful tool for creating command-line utilities as well. Having good software architecture is always a big plus!

It comes down to code management

If you aren’t a YUI3 user, I still recommend finding a set of tools to help organize your JavaScript on the server. Due to the inherent async nature of JavaScript and its propensity for callbacks, you need to be careful or you’ll quickly end up with spaghetti-code.

5. Hacking Using YUI

What I learned: Stay focused and keep hacking.

Hacking is one of my favourite things to do when I am trying to learn something new. When trying to learn a new tool, there’s nothing like sitting down and building something with it.

Similar to jQuery, YUI3 has a distinct set of widgets, utilities and CSS frameworks. On one of the Yahoo Hack Days, I had the chance to sit down and try some of these out. As I’m a fan of cricket, I made a mobile web app called Crictainment. Let me outline some of the parts of YUI that I found to be particularly useful for hacking.

Y.ScrollView

Hacking a web app using YUI is pretty straightforward. For example, if you want a scrollview that is flickable with your fingers:

YUI().use("scrollview", function(Y) {

    var scrollview = new Y.ScrollView({
        srcNode:"#scrollable",
        height:"20em"
    });

});

And in the HTML:

<div id="scrollable" class="yui3-scrollview-loading">
<ul>
    <li>AC/DC</li>
    <li>Aerosmith</li>
    <li>Bob Dylan</li>
    <li>Bob Seger</li>
    ...
</ul>
</div>

The scrollview module figures out whether it should be horizontal or vertical based on the width and height of its container. More information on the YUI3 scrollview is here.

Y.Anim

Another useful utility when hacking something is the Animation utility. It helps to spruce up your application with some nice animation that leverages CSS on capable browsers, and defaults to JS timer-based animations on older browsers.

var myAnim = new Y.Anim({
    node: '#demo',
    to: {
        width: 0,
        height: 0
    }
});

myAnim.on('end', function() {
    myAnim.get('node').addClass('yui-hidden');
});

Y.YQL

Another really important tool that is great for hacking is YQL – Yahoo Query Language. I’m sure most of you have used it, but for those who haven’t, think of it as a way to access a whole host of different APIs using a standard syntax. YUI and YQL work really well together through the Y.YQL module. For instance, here we are getting the recent activity from Vimeo:

YUI().use('yql', function(Y) {

    Y.YQL('select * from vimeo.activity.everyone where username="basictheory"', function(r) {
        //r now contains the result of the YQL Query
    });

});

Try out this query here. I use YQL regularly to access different APIs in a consistent manner.

Regardless of whether you are using YUI, jQuery, or any other library, building something with it is a great way to become familiarized with your development toolbox. When hacking, don’t worry too much about the technical details – just set a time limit and just build it!

6. YUI App Framework

One of the newer additions to YUI has been the App Framework. It’s similar to Backbone.js, but with YUI’s sophisticated event infrastructure under the hood. The App Framework made it easy for me to build MVC-style web applications.

Just like any other tool, I built something with the App Framework to understand how it worked. Once again, I can’t stress the benefits of hacking on products. For the App Framework, I built TopForty with a friend of mine.

The Model

The YUI App Framework is built on the MVC design pattern. Let’s start with the model. If you aren’t familiar with MVC, take a look at this tutorial.

For TopForty, we were able to get a large JSON array of the most talked-about songs from Twitter. Each object in the array looked like this:

{
    "title": "PayPhone",
    "position": 1,
    "video_id": "5FlQSQuv_mg",
    "song_id": 627,
    "artist": "Maroon 5",
    "duration": 232,
    "images": […]
}

We wrapped this up in a Y.Model subclass called Y.SongModel. Here’s the class definition:

Y.SongModel = Y.Base.create('songModel', Y.Model, [], {

    initializer: function (config) {
        ...
    }
}, {
    ATTRS: {
        title: {},
        artist: {},
        images: {
            value: []
        },
        nowPlaying: {
           ...
        }
        ...
    }
});

This allowed us to listen for events whenever one of the ATTRS in the model changed and take appropriate action. For example, if the current song being played was changed:

//When the model's isPlaying attribute changes, call the handleIsPlayingChange function.
this.model.after('isPlayingChange', this.handleIsPlayingChange, this);

The View

Each model was represented visually by a View, which is essentially just HTML. For TopForty, we had a SongView that looked something like this:

<div class="song yui3-u" id="songModel_2">
            <img class="song-img" src="...">
            <div class="song-desc">
                <div class="song-number">2</div>
                <div class="song-movement">
                    <img class="movement-icon" src="...">
                </div>
                <div class="details">
                    <h4 class="song-name">Turn on the lights</h4>
                    <p class="artist-name">Future</p>
                </div>
            </div>
</div>

We wrapped this up in a Y.View subclass called Y.SongView. Each View requires a render() method that is called when displaying the view on the page, and a initializer() method where events are subscribed. If you want, you can establish a relationship between your view and a Model or Model List instance by attaching event handlers to them in a custom initializer() method like we see below:

Y.SongView = Y.Base.create('songView', Y.View, [], {
    initializer: function (config) {
            var model = this.get("model");
            model.after('change', this.render, this);
            model.after('destroy', this.destroy, this);
    },
    render: function() {
        ...
    },

    destroy: function() {
        ...
    },

    showSongOverlay: function() {
        ...
    }
},{
    ATTRS: {
        container: Y.one("#songContainer")
    }
});

By doing this, we were able to have songview specific methods such as displayNowPlayingIndicator() and showSongOverlay() on the Y.SongView instance rather than as separate functions.

The Router

The Router, formally known as the Controller, is what makes everything connect and work. Remember that in classical MVC, all user actions traditionally go through the controller. In web apps, the router uses HTML5 history to change URLs and controls the state of the application.

For example, in TopForty clicking on a song changes the URL to the song’s ID. The URL change is picked up by the router, which loads the YouTube video for the song in question:

Y.AppRouter = Y.Base.create('appRouter', Y.Router, [], {
  // Default route handlers inherited by all CustomRouter instances.
  index: function (req) {
    // ... handle the / route, load up the UI, etc.
  },

  loadSongFromUrl: function (req) {
    // ... handle the /song/:songId' route ...
    //Get the youtube video from the model with an id of :songId and play it.
  }
}, {
  ATTRS: {
    // The specific routes that we are interested in listening to:
    routes: {
      value: [
        {path: '/',    callback: 'index'},
        {path: '/song/:songId'', callback: 'loadSongFromUrl'}
      ]
    },
  }
});

What I learned: Leveraging the MVC design pattern can help you create anything from simple non-interactive views to rich applications.

I hope I have been able to give you a taste of what is possible with the YUI App Framework. For a more thorough walkthrough, I recommend the following links. If you aren’t a fan of the App Framework, I recommend you look into the equivalent jQuery alternatives. Backbone.js in particular has a large following with good documentation.

7. Test Driven Development and YUI Test

For developers, writing code is often the easy and fun part. The hard part is figuring out how old, buggy code works and trying to fix past errors. To minimize this, a lot of organizations including Yahoo emphasize the importance of Test Driven Development (TDD). With TDD, you write the tests first, then add the functionality until all your tests pass. Want to add a new feature? Write a new test, then code the feature.

I was new to TDD when I joined the YUI team. Unfortunately, JS does not have the best testing suite. User interactions in particular are hard to test. Furthermore, we have to test in all the major browsers.

One of the primary ways we conduct unit-testing is through YUI Test.

What I learned: Following test-driven development principles makes you more productive as a programmer.

YUI Test is a complete testing framework for JavaScript and Web applications. You can use the simple JavaScript syntax to write unit tests that can be run in web browsers or on the command line, as well as functional tests to be run in web browsers.

Here’s how you set it up:

// Create a new YUI instance and populate it with the required modules.
YUI().use('test', function (Y) {
    // Test is available and ready for use. Add implementation
    // code here.

});

Now, we can start writing some unit tests!

var testCase = new Y.Test.Case({

    name: "TestCase Name",

    //---------------------------------------------
    // Setup and tear down
    //---------------------------------------------

    setUp : function () {
        this.data = { name : "Tilo", age : 23 };
    },

    tearDown : function () {
        delete this.data;
    },

    //---------------------------------------------
    // Tests
    //---------------------------------------------

    testName: function () {
        Y.Assert.areEqual("Tilo", this.data.name, "Name should be 'Tilo'");
    },

    testAge: function () {
        Y.Assert.areEqual(23, this.data.age, "Age should be 23");
    }
});

YUI Test supports equality assertions (areEqual()) which uses ==, sameness assertion (areSame()) which uses ===, special value assertions such as isFalse(), isNotUndefined(), mock objects and more.

After writing our tests, we can run it as shown below. The results of the test can be outputted as XML, JSON, jUnitXML, or TAP.

Y.Test.Runner.add(testCase);
Y.Test.Runner.run();

Don’t forget to test, regardless of what you use.

If you don’t use YUI Test, that’s fine. However, I want to stress the importance of testing your code. I’m guilty even today of writing code without writing tests and it’s probably okay if it’s your own small personal project. All of us cut corners sometime. However, if you’re programming for a client or an organization, following TDD principles will save you (and your clients) from a headache.

8. Minifying and Linting Your JavaScript

Serving up JavaScript files without any minification or lint step can be risky. Minification can often compress the file-size by over 30%, making your page load faster for the end-user. Linting is a good way to ensure your JavaScript follows good coding practices so that errors are minimized.

During my time at Yahoo, we used YUI Compressor and YUI Builder to compress and build our code. The build step includes concatenation and linting through JSLint. I’m sure most of you have used JSLint at some stage, and I do believe it helps improve your coding style.

What I learned: Ask yourself if a certain practice reduce your possibility of errors and if so, follow it.

Now, I’m not going to talk in depth about YUI Compressor and Builder because those may not be the tools of your choice. Usually for my own projects, I use the JSLint NPM Module to check my code.

What I want to stress on is the need to perform these steps prior to pushing code out to production. As JavaScript does not have a compilation step, many developers are accustomed to pushing their JavaScript out to production, comments and all included. Again, this is okay for small projects, but perhaps you should consider minifying and linting your code to ensure users get the best experience.

Additional Reading

9. Coding with the User in Mind

The YUI Team has a great following of friendly, active, and knowledgable developers just like most large open-source projects. As developers working on open-source software, I learned that I can’t sit under a rock and code all day, even if I want to. Developing is as much about writing code as it is about making sure the code you write is actually helping someone solve a problem.

This took me a while to learn, but it’s an important lesson. When writing software, the goal isn’t to use the coolest technology or the latest stack or the hottest language. It’s about the user. When writing OSS, the users are often other developers who build on top of your product. Small things such as weekly updates, tweets, and IRC communication can actually help you more than hours of coding.

What I learned: It’s not about the technology or the stack or the language, it’s about the user.

In my first month of interning at YUI, I wrote about 500 lines of code which I had to scrap because most of it was repetitive and did not address the end goal. I was guilty of coding too early without figuring out the requirements of the project. A good rule is to spend a third of your time gathering requirements, a third of your time writing tests and the final third implementing your software.

10. “When all you have is a hammer, everything looks like a nail.”

I want to conclude by sharing the most important thing that I think I learned in my internship. I consider it to be more important than any technical knowledge that I gained. By working on a library that is not the most popular, I realized the importance of diversifying my skills and being flexible as a developer. I’ve seen how much work it takes to maintain an open-source project and have gained a lot of respect for everyone who release their well-written code for free.

What I learned: Choose a library because it’s the right one for the job, not because it’s your favourite. Understand that different pieces of software serve different purposes, and sometimes understanding the difference is tough.