Erwin Andrés

Drafts

noreply@blogger.com (Erwin Andrés) — Mon, 05 Mar 2018 07:53:00 +0000

Inconforme con el editor de entradas de Blogger decidí crear mi propio editor. El resultado: un simple editor de texto enriquecido con opciones para escribir en texto plano en HTML o Markdown al que nombré «Drafts».

Está echo con React basado en react-rte que usa el plugin Draft.js que sirve para crear este tipo de editores de texto fácilmente y con una bella interfáz. Tiene todas las funciones básicas de un RTE: negrita, cursiva, subrayado, tachado, código, listas, citas, enlaces, encabezados, deshacer y rehacer; excepto insertar imagen o video. Además le agregué las funciones de guardar y eliminar borradores para poder seguir editando entre sesiones y todo sin salirse del navegador.

Integración con Blogger

La idea era reemplazar con Drafts el editor de Blogger a la hora de escribir mis entradas. Planeaba usar la api de Blogger para poder subir las entradas directamente desde Drafts, pero nunca supe cómo subir imágenes usando la api de Blogger, lo que me hizo abandonar el proyecto.

A veces utilizo Drafts para escribir borradores de entradas y simplemente, cuando está listo el borrador voy a la pestaña «Plain» y copio el HTML y lo pego en el editor de Blogger.

TO-DO

Dentro de la lista de funciones que no tiene Drafts y me gustaría que tuviera están:

La integración con Blogger de la que ya hablé.
Opción para hacer backups o guardar en el pc.
Contador de palabras.
Insertar imágenes.
Insertar video.

Enlaces

Mira la aplicación funcionando o descarga el código fuente y modificala a tu gusto.

Anatomía de un post

noreply@blogger.com (Erwin Andrés) — Thu, 22 Feb 2018 08:26:00 +0000

La anatomía del post es el esqueleto que lo conforma y le da formato y sentido al contenido de éste dentro de tu blog y para los buscadores y lectores de texto.

Ejemplo de la estructura de un post.

Contenedor

Según la especificación oficial de HTML5 los posts deben estar contenidos en un elemento <article>. Aquí adentró ira todo el texto bien marcado, la cabezera del articulo, las secciones del texto, el footer del artículo, y los comentarios.

Header

No solo el blog tiene un header general si no que también cada post debe tener su propio header que comúnmente contiene el título, la fecha, las etiquetas y el autor del post. El elemento para el header debe ser, por supuesto, un <header>.

Título

El título debe ir en un elemento <h1>, como lo expliqué en una entrada anterior, aunque hay quienes prefieren usar <h2>.

Fecha, etiquetas y autor

Los metadata del post como la fecha, el autor y las etiquetas deben estar antes o después del título pero en un elemento diferente, ya que no hacen parte de éste, pero dentro del header.

Pueden tener cada uno su propio contenedor, o pueden estar todos en el mismo bloque en linea.

Cuerpo

El cuerpo es todo el contenido actual del artículo: texto, imágenes, y todo lo que le quieras poner. Debe estar preferiblemente dentro de un elemento <section>.

Secciones

Cada Sección dentro del cuerpo del post debe estar marcada con un elemento <section> (obviamente) y debe empezar con un subtítulo.

Las secciones se usan para agrupar semanticamente contenido relacionado, en este caso las usamos para agrupar el texto con su título o subtítulo.

<section>
    <h1>Este es el título</h1>
    <p>Este es el texto que pertenece al título h1 y todo lo que esté dentro de esta sección también.</p>
    <section>
        <h2>Este es un subtítulo</h2>
        <p>Este texto pertenece al anterior subtítulo.</p>
    </section>
</section>

Párrafos

Los párrafos deben estar contenidos en elementos <p> y separados entre ellos únicamente por este mismo elemento y no con la etiqueta <br>.

Imágenes

Las imágenes van dentro de elementos <figure> y dentro se debe usar el elemento <figure> cuando se quiera agregar un pie de foto.

Footer

Si se quiere se puede agregar un footer al post con el elemento <footer>. Éste puede contener información adicional del post, como el nombre del autor, la fecha, las etiquetas, enlaces de compartir, enlaces de navegación entre artículos, etc… cada uno en su propio contenedor preferiblemente.

Resultado

Poniendo en práctia esta información, la estructura HTML de tu post debe verse más o menos así:

Redactor de entradas de Blogger

noreply@blogger.com (Erwin Andrés) — Sat, 17 Feb 2018 07:49:00 +0000

Captura del redactor de entradas de Blogger

Como sabrán, el editor de entradas de Blogger tiene dos opciones: Redactar y HTML. La primera te muestra un editor de texto enriquecido o RTE (Rich Text Editor) y la segunda te muestra un editor de texto plano donde puedes escribir tu HTML directamente.

Yo hace años dejé de usar la pestaña redactar y recomiendo a todo el mundo dejar de usarla porque está dañada, siempre lo ha estado y al parecer siempre lo estará. ¡NO SIRVE!

El HTML resultante

Cuando usas el RTE de Blogger (o cualquier RTE para web) todo lo que escribes tiene que ser transfomrado al final en HTML. Pero el HTML generado por el redactor de entradas de Blogger es horrible, tiene un formato antiguo y no es nada semántico.

Los párrafos deberían ser párrafos

Cáda párrafo en tu entrada, en tu blog, en tu página, o en cualquier parte de la web debería estar correctamente contenido en sus etiquetas <p></p>, y la separación entre párrafos debería darse únicamente por estas etiquetas a menos que se quiera otro elemento en medio.

El editor de Blogger separa los párrafos con una o varias etiquetas <br>(dependiendo de cuántas veces presiones enter) y no usa en ningún momento la etiqueta <p>.

Negritas y cursivas

Las negritas en el redactor de Blogger están marcadas con <b> y las cursivas con <i>. Esto hace rato dejo de ser así. Debería ser <strong> y <em> respectivamente. Es un poco más largo, pero es lo correcto.

Aunque esto no es tan grave como lo de los párrafos pero también debería ser corregido.

Estilos en linea

Los botones Fuente, Tamaño de fuente, Color del texto y Color de fondo de texto agregan estilos en linea, por eso siempre debes evitar usarlos.

Los estilos en linea no son la manera correcta de darle estilo al texto ni a ningún elemento ya que representan un dolor de cabeza en materia de mantenibilidad.

Imagina que tienes la costumbre de resaltar lineas destacadas en tus entradas, y siempre lo haces dándole un fondo amarillo al texto que quieres resaltar. Pero un día se te dio por rediseñar el blog y ahora el texto con fondo amarillo no va con tu nuevo diseño sino que quieres un que el texto resaltado tenga ahora un fondo verde claro como en Medium.

Aquí si has estado usando estilos en linea tienes dos opciones: aceptas que tus viejas entradas no van a coincidir con el nuevo diseño de tu blog, o te pones en la tarea de editar tus entradas una por una para cambiar el amarillo por el verde. Ojalá no tengas muchas entradas.

La forma correcta de lidear con esto es agregando en el html una clase para el texto resaltado y darle los estilos en el CSS, luego cuando cambies el diseño simplemente tienes que dirigirte al CSS de tu blog y cambiar las propiedades de esta clase.


<style>
  .destacado {
    background-color: #e9fdf0;
  }
</style>

<p>En este texto de ejemplo <span class="destacado">esta parte está resaltada</span> y el resto no.</p>

Imágenes

El problema a la hora de insertar imágenes es que te genera un div de clase separator también con estilos en linea para alinear el bloque de la imagen mas una link <a> con un attributo fantasmón imageanchor="1" que solo entiende blogger y también con estilos en linea, mas el elemento de la imagen <img> con el desactualizado atributo border="1", y si todo eso no te parece lo suficientemente feo le puedes agregar una leyenda a la imagen para encontrarte en el html con que tu imagen y leyenda ahora hacen parte de una horrible tabla. Todo esto me parece un poco arcaico.

Mi concejo es que agreges las imagenes estando en el editor de texto plano (la pestaña «HTML») y cuando salga el cuadro de opciones le des en aliniacion ninguna y tamaño original. Luego borras lo que no necesitas y la encierras dentro de un elemento <figure> y para tu leyenda agregas un elemento <figcaption>. Listo, ahí tienes tu imagen con marcado moderno y semántico.

Soluciones y alternativas

La única solución real aquí es que Blogger arregle su editor de entradas. Mientras tanto, puedes buscar alternativas como escribir en markdown o escribir directamente el html de tus entradas en el editor de texto plano como nosotros los barbáricos.

Que no te de miedo modificar tu plantilla

noreply@blogger.com (Erwin Andrés) — Mon, 05 Feb 2018 06:05:00 +0000

Cuando entro a algún foro o blog de ayuda de bloggers, de esos que te ayudan a modificar tu plantilla con trucos y códigos, nunca falta el típico mensaje «No olvides hacer un backup de tu plantilla antes de guardar cualquier cambio», o parecido.

Este mensaje tiene mucha validez ya que es muy fácil para los nuevos dañar la plantilla al tratar de hacer un cambio aún teniendo un tutorial en la mano. Pero la realidad es que esto puede estar creando un efecto negativo espantando a los principiantes.

Pongamos este ejemplo: entras a un blog buscando ayuda para modificar la plantilla, encontraste un bonito gadget nuevo que quieres agregar al sidebar de tu blog, la entrada del blog que estás leyendo explica con todos los detalles paso a paso lo que debes hacer para agregar este exótico nuevo gadget, que al parecer es un proceso muy simple. Pero antes de poner manos a la obra te encuentras con el terrorifico mensaje que mencioné antes y aquí es dónde el lector se llena de miedo e inseguridades.¿Es peligroso esto que quiero hacer? ¿Qué pasa si cometo un error en alguno de los pasos? ¿Se dañará mi blog? ¿Perderé todo mi trabajo y no podré recuperarlo nunca? ¿Me cerraran la cuenta de Blogger?

No, no pasará nada grave. Y si dañas algo siempre podrás arreglarlo. Lo peor que puede pasar es que tengas que usar una plantilla nueva y pasar horas modificándola para que se vea como la anterior. Ok, eso es un poco grave, pero es divertido y se puede hacer… no es el fin del mundo.
Lo que hay que tener claro aquí es que todas tus entradas y tus otros blogs estan a salvo de cualquier modificación que le hagas a la plantilla.

Modifica tu plantilla sin miedo. Si quieres saber para qué sirve esa linea de código que no entiendes, simplemente borrala, guarda y mira qué pasa. Experimenta, daña y repara; y si algo sale mal copia el mensaje de error que genera Blogger y búscalo en Google, en foros, o en algún otro blog. Así aprendí yo y creo que es la mejor forma de entender las plantillas de un servicio tan cerrado como Blogger.

Por último, las copias de seguridad siempre son buenas, pero que no te exclavisen. Haz regularmente copias de seguridad de tu plantilla, digamos una vez al mes, y con más frecuencia haz copias de seguridad de tus entradas que son lo más importante.

Tudú

noreply@blogger.com (Erwin Andrés) — Tue, 30 Jan 2018 06:44:00 +0000

Captura de pantalla de Tudú.

Tudú es una pequeña y simple aplicación web para crear listas TO-DO de manera rápida y efectiva.

La creé hace poco más de un año como proyecto para aprender a crear aplicaciones web progresivas y el resultado fue muy satisfactorio para mí. No es la mejor, está incompleta, le faltan algunas mejoras y quedan un par de bugs por corregir, pero es bastante buena para ser la primera aplicación web que publico.

Captura de pantalla de la vista de una lista de Tudú en móvil.

Sé que hay muchas aplicaciones de este tipo en el mercado, de todos los colores y de todos los sabores, pero no estaba nada satisfecho con esas aunque son bastante completas. La razón es que son muy pesadas, en la mayoría necesitas registrarte para poder usarlas y además consumen mucha batería sincronizandose con la nube. Todo eso es muy frustrante para solo crear una simple lista.

En Tudú puedo crear mis listas rápidamente sin necesidad de crear una cuenta y todos los datos quedan almacenados en mi dispositivo y eso es básicamente todo lo que necesito de una app TO-DO.

El logo y el diseño de la intefaz son creaciones de Kenyi Larios inspirado en el Material Design de Google.

Vayan y pruébenla (agreguenla al escritorio para que vivan la experiencia completa de una app progresiva) y luego me dan sus opiniones.

Página de la app | Código fuente

textCSS

noreply@blogger.com (Erwin Andrés) — Thu, 23 Feb 2017 08:48:00 +0000

He creado esta pequeña librería CSS para facilitarme la configuración del texto al momento de desarrollar páginas web o blogs a la que nombré «textCSS» (¿cómo más?).

El código está en Github para que cualquiera que quiera lo pueda ver, usar, adaptar y mejorar libremente.

Captura de pantalla de una página que utiliza textCSS con lineas de guía.

Notas sobre el código

textCSS es el resultado de una pequeña investigación que hice sobre tipografía en la web, leyendo libros, artículos y haciendo algunas pruebas; con el fin de obtener texto legible que responda a diferentes tamaños de pantalla.

Web safe font-stack

El font-stack que utilicé es un conjunto de las mejores y más populares fuentes de cada sistema operativo, asegurándome así que mi página siempre tendrá una buena fuente en cualquier dispositivo.

Es el mismo que utilizan en Medium con un muy buen resultado. De echo, Medium me sirvió mucho de inspiración para crear textCSS

html {
  font-family: -apple-system,
               BlinkMacSystemFont,
               "Segoe UI",
               Roboto,
               Oxygen-Sans,
               Ubuntu,
               Cantarell,
               "Helvetica Neue",
               sans-serif;
}

También utilicé un stack aparte de fuentes web safe monoespaciadas para el texto de código.

pre, code {
  font-family: Consolas,
               Monaco,
               'Andale Mono',
               'Ubuntu Mono',
               monospace;
}

Tamaños de fuente

El texto inicia con un tamaño de 150% en el html (24px con la fuente inicial a 16px) para pantallas grandes. El resto del texto usa medidas relativas a este tamaño, haciendo que todo el texto se escale con solo cambiar este valor inicial.

Este tamaño puede parecer muy grande al principio, pero es porque uno no está acostumbrado a ver este tipo de tamaños en páginas. La realidad es que este tamaño es cómodo para pantallas grandes ya que el usuario normalmente las utiliza a una mayor distancia de la que utiliza, por ejemplo, un celular.

En pantallas medianas el tamaño de fuente disminuye a 125% (20px con fuente inicial de 16px) y en pantallas pequeñas tipo smartphone, el texto se reduce al 100% (16px con la fuente inicial a 16px).

Ritmo vertical

Para componer un buen ritmo vertical se necesita crear un sistema de lineas base. esto se logra configurando el alto de linea para que siempre tenga el mismo valor o múltiplos de ese valor.

En el caso de textCSS este valor es 1.5, o bien, 1.5 veces el valor del tamaño base de la fuente.

Por ejemplo: si el tamaño del texto base es de 24px el alto de linea será de 36px (1.5*24).

Si en algún caso como en el de un título o un subtitulo (que comúnmente son más grandes que el texto base) el texto sobrepasa el alto de la linea base, se utiliza un múltiplo del tamaño del alto linea base. Por ejemplo: para un subtitulo de tamaño 60px se necesita que el alto de linea para este subtitulo sea de 72px o sea, dos lineas de 36px. Fácil ¿no?.

Para guiarme mejor y asegurarme de que mi linea base no se rompía creé un patrón de fondo con CSS dándole el aspecto de cuaderno de colegio a la página de pruebas.

body {
  background-color: #fff;
  background-size: 100% 1.5em;
  background-image: -webkit-linear-gradient(to bottom,rgba(0,170,255,.3) 1px,transparent 1px);
  background-image: -moz-linear-gradient(to bottom,rgba(0,170,255,.3) 1px,transparent 1px);
  background-image: linear-gradient(to bottom,rgba(0,170,255,.3) 1px,transparent 1px);
  background-position: left top;
  background-repeat: repeat;
}

Qué sigue

Estoy planeando utilizar tipografía fluida (fuild type) para que el texto se escale con la página y no en ciertos puntos como lo hace actualmente.
También quiero hacer que la linea que subraya los enlaces se vea que está debajo del texto para mejorar la legibilidad.

Nuevo diseño del blog

noreply@blogger.com (Erwin Andrés) — Mon, 23 Jan 2017 00:08:00 +0000

Captura de pantalla del nuevo diseño del blog.

Legibilidad, agilidad y espacio en blanco son las principales características de la versión 3 de la plantilla.

Aún no está completa al 100%, le faltan algunos detalles y está llena de bugs que iré corrigiendo con el tiempo mientras siguen apareciendo otros, pero estoy muy satisfecho con el resultado hasta ahora y quiero compartirlo con todos aquí.

¿Qué tenía de malo el anterior diseño?

Captura de pantalla del anterior diseño.

La verdad es que le anterior diseño nunca me gustó y hace tiempo quería cambiarlo. Era una mezcla de experimentos y viejos bugs que nunca me decidí a corregir.

Era lento, pesado, las fuentes no combinaban, el menú no tenía buen aspecto, usaba un montón de librarías innecesariamente y lo peor de todo era la tonta animación que le había agregado a las entradas, una efecto «reveal» simulando la aparición de la entrada de abajo hacía arriba que solo lograba que la página pareciera aún más lenta.

Por todo esto decidí que en lugar de arreglar estos errores uno por uno mejor los corregía todos a la vez eliminando la plantilla y arrancando de cero.

La plantilla base

Para poder tener el mayor control posible de mi nueva plantilla decidí eliminar todo lo innecesario que traen las plantillas de Blogger como el CSS por defecto y removiendo classe's e id's que sabía no iba a usar. También modifiqué algunos elementos mejorando el HTML para que sea más semántico.

La cabecera

Las cabeceras «no rectangulares» y se me antojó tener una. Con unas pocas lineas en svg creé una sutil curva al final del header que le da el toque moderno al blog y queda bien con el menú debajo alineado a la derecha.

El menú

El menú lo hice lo más sencillo que pude. Con letras grandes en negrita que lo hacen fácil de encontrar y de entender, a diferencia del anterior que casi no se veía y estorbaba la lectura en pantallas pequeñas.

Letra legible

Para el texto estuve investigando un poco sobre tipografía en la web para tratar de hallar el tamaño perfecto para cada pantalla y poder hacer que el texto de las entradas sea legible y responsivo. Decidí crear mi propia librería CSS especial para textos que llamé textCSS (cómo más), luego la incluí en el CSS del blog adaptándola un poco. ¿Un poco grande tal vez? Yo creo que está bastante bien por ahora.

Bloques de código

He optado por cambiar la librería de resaltado de sintaxis. Anteriormente utilizaba Prettify que funciona muy bien pero me parece un poco pesada. La elegida para remplazarla fue Prism.js que es mucho más ligera, moderna y personalizable.

Lo complicado de esto es ahora tener que adaptar manualmente a Prism.js el código de los posts anteriores que usan Prettify.

Imágenes del post

En las imágenes utilicé la librería zoom.js que encontré de casualidad hace poco. Simplemente crea una especie de lightbox minimalista al estilo de Medium y es justamente lo que necesitaba.

Enlaces sociales

Esta es una parte importante para el rendimiento del blog. Los botones sociales que utilizaba antes (tuitear, me gusta y plusone) le agregaban una carga extra bastante pesada al blog (o tres cargas extras en este caso). Esto sin mencionar lo que pasaría si por alguna razón alguno de los servidores de estos servicios se caía o en el peor de los casos se caían los tres.

Decidí simplemente crear los enlaces manualmente, sin librerías, sin pesados sdk's, sin depender de servidores externos. Así, si alguno de los servicios falla, simplemente el enlace, que se abre en una pestaña emergente, no funcionaría y eso sería todo.

Sección de comentarios

Captura de pantalla de la sección de comentarios del blog

Por allá en 2012 cuando Blogger presentó por primera vez su sistema de comentarios anidados solo estaba disponible para los blogs que utilizaban las plantillas más nuevas en esa época. Por suerte para el resto de nosotros ahí estaba Felipe Calvo, quién creó un script que implementaba el sistema de comentarios anidados para todo aquel que lo quisiera en su blog. Cuatro años después he vuelto a preferir este script por encima del sistema original de Blogger simplemente porque no me da el control que necesito sobre el código para modificarlo y adaptarlo a mi gusto.

Accesibilidad

Colores

Intenté no variar mucho los colores del diseño anterior, simplemente los oscurecí un poco para dar mayor contraste y hacerlo más visible para personas con problemas de visión, tratando de cumplir con las recomendaciones de la WCAG 2.0 al menos para el nivel AA.

Navegación con teclado

La navegación con teclado es comúnmente ignorada por los desarrolladores web y yo quise dejar de ignorarla y alentar a los demás a que no la ignoren tampoco. Es el 2017 y todos los usuarios tienen un mouse, y los que no tienen seguramente es porque están viendo la página desde un móvil, pero la realidad es que este no siempre es el caso. Algunas veces el mouse se te puede dañar en algún momento que no puedes salir corriendo a comprar otro o no hay nadie que te preste uno, o en otros casos se puede tratar de un usuario con problemas motores que le cuesta mucho usar el mouse y por eso prefiere el teclado.

En este blog simplemente le di un borde grueso de un color rojo oscuro al elemento señalado con el teclado para que sea fácil de identificar.

Velocidad

Vista en «cascada» de los resultados de la prueba de velocidad.

La velocidad de carga de la página era el aspecto más importante para mí. Planeé todo el diseño en base al rendimiento del sitio tratando de hacerlo lo más ligero posible, como ya mencioné antes. El resultado: 450kb en 1.340 segundos con un SpeedIndex de 681… ¡Misión cumplida!

Claro, todavía se puede mejorar, pero está más que bien para ser un blog de Blogger.

Nota rápida sobre el logo

Logo del blog.

Letras del mismo color, lowerCamelCase y un punto al principio tratando de simular un selector CSS. Creo que se entiende bastante, ¿no?

Lo que he estado haciendo

noreply@blogger.com (Erwin Andrés) — Sat, 14 Jan 2017 00:12:00 +0000

Un año y tres meses pasaron para que por fin me decidiera a publicar una entrada en este blog. Tanto tiempo en abandono mataría a cualquier otro blog y obligaría a su irresponsable creador a renunciar a la blogosfera para siempre. Pero aquí sigo, aún sin rendirme y tratando de levantar este pobre blog nuevamente.

Aunque no hay excusa justificable para tal abandono, aquí hay un breve resumen de las tareas que me mantuvieron alejado del blog durante este año y que no voy a volver a usar como escusa para no bloguear.

Back-end

Aprendiendo NodeJs

Tenía la tarea de aprender NodeJs hace rato. Este año le dediqué un buen tiempo para aprenderlo mejor leyendo un poco, siguiendo algunos tutoriales y creando un par de proyectos personales.

MongoDB

Para poder sacarle el mayor provecho a NodeJs era necesario aprender a crear base de datos con MongoDB. El curso gratuito en la página oficial fue un buen punto de partida.

Creé un CMS

Continuando con la parte del back-end pero ahora utilizando otras tecnología que ya conocía: PHP y MySQL, creé un CMS completo para portafolios web inspirado en WordPress pero muchísimo más sencillo y ligero.

Front-end

Reforzando JavaScript

Pasando al front-end, estuve mejorando mis conocimientos de JavaScript, aprendiendo ES6 (principalmente para NodeJs), revisando algunos frameworks y creando un par de videojuegos.

Esta última parte fue a la que le dediqué más tiempo, la creación de videojuegos es mi parte favorita de la programación, de echo, fue la razón por la cuál empecé a programar.

Creando páginas

Me metí oficialmente en el negocio del desarrollo web. Hice unos cuantos trabajos pequeños, que me permitieron conocer mejor el negocio.

Aplicaciones Web Progresivas

Si quiero ser un desarrollador web tengo que estar al día con las nuevas tecnologías y las Progressive Web Apps son lo nuevo. Aplicaciones móviles ligeras que no necesitas descargar y funcionan igual y hasta mejor que las aplicaciones nativas son lo que el mundo necesitaba. Sobre todo gente como yo que vive en un país subdesarrollado y que tienen un celular de gama media-baja con una conexión lenta (cuando tienen). Por eso puse manos a la obra y recientemente terminé mi primera aplicación web progresiva.

Optimización de rendimiento

Cada byte cuenta al momento de cargar un sitio web, por eso he dedicado una gran parte de mi tiempo a mejorar el proceso de optimización de rendimiento en mi flujo de trabajo como desarrollador web. Para ponerlo en práctica participé en el concurso 10k Apart en el que la regla principal era crear un sitio totalmente funcional en menos de 10 kilobytes. No gané y creo que ni siquiera estuve cerca, pero al menos cumplí con todas las reglas.

Accesibilidad en la web

La accesibilidad en la web es un problema que hasta hace poco desconocía. Leyendo un poco sobre el tema, me puse la tarea de mejorar la accesibilidad en todos mis proyectos web, incluso en este blog.

Blogger

Repasando el código de las plantillas de Blogger

El código de las plantillas de Blogger no ha cambiado mucho desde la primera vez que vi uno, y aunque entiendo la mayor parte, siempre han habido grandes bloques de código que son un misterio para mí. Esta vez decidí acabar con eso y me dediqué a estudiarlo minuciosamente, y aunque aún no lo entiendo al 100% cada vez estoy más cerca.

Rediseñando el blog

Me tomé el trabajo de rediseñar mi querido blog, tal vez buscando la inspiración y la motivación que necesito para volver a escribir, y también para aplicar en la plantilla todos mis nuevos conocimientos sobre desarrollo web que he adquirido durante el largo tiempo que lo tuve en abandono. Pronto estará lista para aplicarla al blog.

Ocio

Jugando Zelda

Lo sé, lo sé, pero era una tarea que tenía pendiente. Así que descargue un emulador de GBC y uno de GBA para mi celular y gasté mi hermoso tiempo jugando varios títulos de la serie The Legend of Zelda. De echo fue bastante gratificante, poder volver a jugar mi juego favorito y terminar algunos títulos que antes no había podido.

Link's Awakening
Oracle of Ages
Oracle of Seasons
The Minish Cap
Ocarina of Time

Los tres primeros de la lista nunca antes los había podido jugar, The minish Cap no lo había podido terminar por un frustrante error de el emulador y Ocarina of Time es mi favorito, ya no recuerdo cuantas veces lo he jugado.

En resumen

Aunque estuve mucho tiempo alejado del blog no me he alejado de este mundo, al contrarío: me he acercado más que nunca. Ha sido un largo año de aprendizaje y aunque todavía queda mucho que aprender trataré de que esta vez mis estudios y proyectos personales no se interpongan entre mi blog y yo.

Nueva entrada

noreply@blogger.com (Erwin Andrés) — Wed, 11 Jan 2017 07:16:00 +0000

Ahora escribo en Markdown

noreply@blogger.com (Erwin Andrés) — Mon, 08 Aug 2016 18:12:00 +0000

Escribir en markdown ha agilizado mi proceso de escritura significativamente. Hace tiempo que conozco muy bien el markdown pero nunca había querido utilizarlo para escribir mis posts porque no lo creía necesario. ¿Para qué escribir en markdown cuando puedes escribir en html directamente en el editor de blogger? Y es que sirve bastante como para no perder la práctica escribir en html pero me aburrí. Me aburrí de andar abriendo y cerrando etiquetas. Etiquetas para cada párrafo, etiquetas para negrita, etiquetas para itálica, etiquetas para las listas… ¡Oh, las listas!

Un día me atreví a escribir un post en markdown y me quedó gustando tanto que ahora lo utilizo no solo para los posts sino para cualquier cosa que tenga que escribir. Realmente creo que todos deberían usar markdown para escribir, sobretodo aquellos que no les gusta o no conocen bien el html.

Blogger y Markdown

Realmente me gustaría un editor markdown en Blogger, facilitaría mucho las cosas, pero esto no es ningún impedimento. Basta con copiar el código generado por el editor markdown y pegarlo en el editor html de Blogger.

Hay una gran variedad de editores markdown disponibles en internet. Yo ahora mismo utilizo Haroopad principalmente porque me gustaron lo temas intercambiables parecidos a los de Sublime Text.

También existen editores online como Stack Edit que incluso permiten publicar directamente a Blogger. Lo único malo es que no puedes etiquetar el post ni otras funciones de Blogger como descripción de búsqueda a menos que edites la entrada después.

Guía básica de SEO para Blogger: Imágenes

noreply@blogger.com (Erwin Andrés) — Sun, 06 Sep 2015 05:59:00 +0000

Para las imágenes de entradas lo más importante es agregar los atributos titley alt y nombrar de manera correcta y legible la imagen.

Las imagenes son una buena fuente de tráfico. Es muy común que las personas encuentren tu blog a travez del buscador de imágenes de Google y tener imágenes optimizdas facilitará las cosas.

Nombre del archivo de imagen

Lo primero es nombrar la imágen en tu ordenador antes de subirla a tu blog tratando de darle un nombre legible que describa la imágen con palabras claves que ayuden a encontrarla en los buscadores.

No subas imágenes con nombres como “ae0VNWq_460s.jpg” o “14-1.png”. Utiliza en cambio palabras que la describan separadas por un guión simple.


<img src="perro-leyendo-con-lentes.jpg" />

Atributos “title” y “alt”:

Estos atributos le dicen a los buscadores de qué se trata tu imagen, así pueden interpretarla y etiquetarla correctamente para luego mostrarla en los resultados de una futura búsqueda.

Una vez hayas subido tu imagen vas al editor html de tu entrada y buscas el código de la imágen (lo reconocerás fácilmente por la url larga que genera el hosting de blogger). Se debe ver más o menos así:


<img border="0" src="URL/INTERMINABLE/DEL/HOST/DE/IMAGENES-DE-BLOGGER.png" />

Justo antes del cierre de la etiqueta /> agregaremos los atributos alt="" y title="".

Title para el título de la imágen, ese que aparece cuando pasas el cursor por encima de la imágen. Alt para un texto alternativo en caso de que la imagen no cargue. Así:


<img border="0" src="URL/INTERMINABLE/DEL/HOST/DE/IMAGENES-DE-BLOGGER.png" alt="TEXTO ALTERNATIVO" title="TÍTULO DE LA IMÁGEN"/>

Tamaño de la imágen

El peso y tamaño de la imágen también juega un papel importante en el SEO del blog. Las imagenes ocupan más de la mitad del peso de las páginas afectando directamente el tiempo de carga de tu sitio y a los buscadores no les gustan los sitios lentos.

Por esto es importante hacer la imágen lo más liviana posible, reduciendo sus dimensiones y tratando de no afectar mucho su calidad.

En sitios como kraken.io ofrecen servicios de optimización de imágenes gratis.

En conclusión

Al final el código de tu imágen debe verse algo así:


<img src="perro-leyendo-con-lentes.jpg" title="Perro con lentes" alt="Perro con lentes leyendo"/>

Guía básica de SEO para Blogger: Títulos y subtítulos

noreply@blogger.com (Erwin Andrés) — Sat, 29 Aug 2015 00:54:00 +0000

Si hablamos de lo que ven los buscadores tenemos que hablar del título de la entrada, que es lo primero que ven, y no hablo del texto del título sino del HTML.

Las etiquetas de <h1> a <h6> se utilizan para marcar títulos y subtítulos, siendo <h1> el título de mayor importancia y <h6> el de menor importancia.

Existe un pequeño debate sobre las etiquetas utilizadas para el título del blog y el título de la entrada. ¿Debe llevar la etiqueta <h1> el header del blog o el título de la entrada? Para algunos el título debe ir en una etiqueta h1 y los títulos de las entradas deben ser una etiqueta <h2>. Para otros el título del blog debe ser la etiqueta <h1> y los títulos de entradas en etiquetas inferiores como <h2> o <h3>. Y luego te encuentras con locuras como las plantillas de Blogger en donde utilizan una etiqueta <h3> para los títulos de entradas y etiquetas <h2> para los nombres de los widgets en el sidebar.

Esto último es algo que siempre me ha molestado mucho en Blogger, ya que le resta importancia al título de las entradas dándole mayor atención al título de los widgets. En mi opinión, el título de la entrada es el título de mayor relevancia en la página, por encima incluso del título del blog y debe estar contenido en una etiqueta <h1> y no en una etiqueta <h3> como viene por defecto en las plantillas de Blogger. Si bien esto es solo un pequeño detalle, puede mejorar la estructura interna de tu blog y sumarte unos cuantos puntos en posicionamiento.

Esto puede ser corregido fácilmente modificando el código de la plantilla:
Vamos al editor html de nuestra plantilla y buscamos class='post-title entry-title' deberás encontrar algo así:

<h3 class='post-title entry-title'>
  <!-- Código de post -->
</h3>

Ahí remplazamos <h3> por <h1>, luego repetimos la búsqueda y volvemos hacer lo mismo ya que el código aparece dos veces en la plantilla y listo.

Guía básica de SEO para Blogger: Contenido del post

noreply@blogger.com (Erwin Andrés) — Sun, 02 Aug 2015 00:48:00 +0000

El alma de un blog son sus entradas, sin estas no sería un blog y sin estas se haría más difícil encontrar el blog para los buscadores. A mayor número de entradas, mejor posicionamiento para el blog y si esas entradas están bien estructuradas, mucho mejor.

No sé realmente qué se debe escribir en el blog para captar la atención de los visitantes, pero sí tengo una idea (más o menos) de cómo debe estar estructurado el HTML de lo que escribes para ser visto por los buscadores.

Palabras clave

Ubica estratégicamente palabras claves dentro del título, post y descripción para darle más fuerza a tu artículo y mejorar su visibilidad en buscadores. Elige una palabra importante para el artículo que creas que lo represente bien y utilízala en el título, luego repítela unas tres veces dentro del artículo (que se vea natural, por favor) y por último un par de veces más dentro de la descripción de búsqueda del artículo.

Puedes también darle más fuerza a las palabras clave dentro del artículo utilizando etiquetas <em>o <strong> como explico a continuación.

Formato de texto

De las tantas etiquetas de formato de texto en html tal vez las que más impacto SEO tienen son <em> y <strong>.<em> se utiliza para dar énfasis al texto y <strong> para dar un énfasis más fuerte.

<em>y <strong> son similares a <i>y <b> respectivamente, transformando por defecto el texto en cursiva (<i>y <em>) y en negrita (<b> y <strong>), pero hay que ser cuidadoso al momento de usarlas por que puede ser visto como uso abusivo de SEO y los buscadores odian eso.

Utiliza <em>y <strong> solo para resaltar texto que creas importante y que tenga alguna relevancia para los buscadores, para el resto puedes utilizar <i>y <b>.

Otros detalles

Enlaces internos: Siempre inserta enlaces dentro del artículo que lleven a otros artículos de tu blog.
Contenido original: El copia y pega no le gusta a los buscadores. El contenido original es la clave.
Etiquetas: Organiza los articulos adecuadamente con etiquetas.
La URL: Utiliza el editor de enlace permanente de Blogger para mejorar la url de tu artículo. Incluye las palabras clave separadas por guiones y trata de no usar artículo o preposiciones como -el-, -de, -a-, -un-, etc…
Imágenes: La imágenes no son solo un bonito adorno, también son una buena fuente de tráfico. Trata de incluir siempre imágenes optimizadas en todas tus entradas.

Guía básica de SEO para Blogger: Descripción y título del blog

noreply@blogger.com (Erwin Andrés) — Wed, 03 Jun 2015 07:52:00 +0000

El título y la descripción del blog es lo que primero nos muestra el buscador después de realizar la búsqueda. Es la carta de presentación de nuestro sitio. Un blog con un título bien configurado y una buena descripción tiene un mejor posicionamiento en los buscadores y es más fácil de encontrar para los usuarios.

Título

Vamos al HTML de nuestra plantilla y buscamos la etiqueta <title> que está dentro de <head> al inicio de la plantilla. Debe verse así: <title><data:blog.title/></title>.

Aquí donde dice <data:blog.title/> es, digamos, una variable que contiene el título de tu blog y puede ser cambiada en la pestaña “configuración/lo básico” al igual que la descripción. También puedes eliminar esta etiqueta y escribir directamente el nombre de tu blog en el HTML así: <title>TÍTULO DEL BLOG</title>, es exactamente lo mismo, solo que para cambiar el título del blog tienes que ir al editor HTML y no a configuración. Este es el título que aparecerá en la página del motor de búsqueda (tal como se ve en la imagen de arriba) y en la pestaña del navegador.

En las páginas de entradas se le debe sumar el título de la entrada al título del blog para que sea más fácil encontrar el artículo en los buscadores. Blogger hace esto automáticamente mostrando el título de esta forma:

Título del blog: Título de la entrada.

Esto está bien así, pero debemos pensar que lo que las personas buscan es el contenido del artículo, por lo tanto el título de la entrada debe ir primero y luego el título del blog. Así:

Título de la entrada: Título del blog.

Para hacer esto tenemos que hacer uso de los condicionales <b:if> y usar dos etiquetas <title> una para las páginas de entradas individuales y otra para la página de inicio:


<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>

Lo que traducido sería algo como:

Si es una página individual mostrar:
Título de la entrada | Titulo del blog
Si no, mostrar:
Título del blog
Fin

Y ya tenemos nuestro título SEO-amigable.

Descripciones

Necesitaremos una descripción general y una descripción individual para cada entrada. Hace un tiempo acá Blogger nos permite crear estás descripciones individuales al momento de editar la entrada en la opción "Descripción de búsqueda", sin embargo, aún necesitaremos hacer uso de los condicionales en los meta-tags para mostrar la descripción correctamente.

Ahí mismo, dentro de <head>, pondremos nuestra descripción. Es un simple etiqueta code><meta> de name='description' y content='NUESTRA DESCRIPCIÓN'. Para la descripción general quedaría así: <meta content='DESCRIPCIÓN GENERAL AQUÍ' name='description'/>. Para mostrar la descripción individual escrita en "Descripción de búsqueda" para cada entrada usaremos esto: <meta expr:content='data:blog.metaDescription' name='description'/>, donde data:blog.metaDescription es la variable que contiene nuestra descripción individual.

Suponiendo que ya tienes muchas entradas en tu blog y no quieres ponerte en la horrible tarea de editar cada entrada y escribirle una descripción individual a cada una, puedes darle la misma descripción general agregando el título de la entrada en ella y así evitas que los robots de los buscadores la detecten como una descripción repetida: <meta expr:content='data:blog.pageName + ". DESCRIPCIÓN GENERAL AQUÍ."' property='description'/>.

Ahora lo juntamos todo con ayuda de los condicionales y el código completo quedará así:


<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <b:if cond='data:blog.metaDescription'>
    <meta expr:content='data:blog.metaDescription' name='description'/>
  <b:else/>
    <meta expr:content='data:blog.pageName + &quot;. DESCRIPCIÓN GENERAL AQUÍ.&quot;' property='description'/>
  </b:if>
<b:else/>
    <meta content='DESCRIPCIÓN GENERAL AQUÍ.' name='description'/>

Sobre el largo del título y la descripción

Realmente no existe un límite sobre el largo del título y la descripción de una página, pero si te excedes en ambos se mostraran incompletos en el buscador. Lo recomendado es tratar de no pasarse de los 55 caracteres (incluyendo espacios) para el título y 150 caracteres (incluyendo espacios) para la descripción.

Por favor, dejen de hacer esto en sus webs

noreply@blogger.com (Erwin Andrés) — Fri, 24 Apr 2015 02:27:00 +0000

Todos tenemos pequeños detalles que nos irritan y nos vuelven locos y hacen parecer que tenemos un desorden obsesivo-compulsivo, como ver un cuadro mal colgado en la pared o cuando la gente sigue una moda que no nos gusta. Bueno, a mí me pasa esto todo el tiempo mientras navego en Internet, pues siempre me encuentro con páginas que tienen estos detalles que me hacen salir corriendo. Con la esperanza de detener esta locura de algún modo, aquí publico mi lista oficial* de cosas que deben dejar de hacer los diseñadores web:

Música de fondo
Texto no seleccionable
Publicidad en links
Publicidad en pop-ups
Publicidad en video con autoplay
Fondos animados
Cambio de cursor
Botones con sonido
Feeds incompletos
Menús flotantes que cubren el texto
Texto muy pequeño
Diseño no adaptable
Las plantillas oficiales de Blogger (en especial las de "vistas dinámicas")
Flash

*Nuevos ítems pueden ser agregados a la lista oficial por el autor. Ningún ítem puede ser removido. Se aceptan sugerencias.

Cómo una mejora de SEO disminuyó mis visitantes

noreply@blogger.com (Erwin Andrés) — Tue, 24 Feb 2015 01:01:00 +0000

Hace algunos meses atrás me puse en el trabajo de mejorar los meta-tags de uno de los otros blogs que administro (también en blogger), con el fin de lograr una pequeña mejor en el SEO del blog.

«Sólo unos pequeños detalles, nadie lo notará»

Primero modifiqué las etiquetas de Open Graph y las "Twitter Cards" para hacer el blog un poco más compatible con redes sociales. Todo bien hasta aquí, no tuve ningún problema importante con esto. El problema fue cuando cambié la etiqueta de descripción <meta name='description'/>.

Utilizaba una descripción general para todo el blog, no importaba si se trataba del home o de una página estática o de una página de entrada, la descripción era la misma. Para corregir esto hice uso de la expresión data:blog.metaDescription que devuelve la descripción de búsqueda de cada entrada. Luego la condicioné para que sólo se muestre en las páginas de entradas que tengan descripción de búsqueda y utilicé una descripción general para las que no.

El problema llegó unos días después cuando me di cuenta que el promedio de visitas diario se iba cuesta abajo rápidamente, aunque curiosamente, el número de "me gusta" en la página de facebook del blog ha aumentado desde este cambio en los metas.

¿Entonces, cómo una supuesta mejora en el SEO del blog puede estar disminuyendo el número de visitantes? La respuesta está en el aumento de likes en la página de facebook. Al usar una descripción individual para cada entrada menos personas encuentran el blog, pero aquellos que sí lo hacen probablemente han encontrado exactamente lo que estaban buscando. Esto ayuda a crear visitantes más fieles llevándolos a seguir el blog en las redes sociales, a diferencia de utilizar la misma descripción para todo el blog, que atrae más visitantes que abandonan la página en segundos por no haber encontrado lo que buscaban. Al final, tuve que explicarle al otro administrador del blog, que lo que estábamos haciendo aquí era preferir calidad de visitantes antes que cantidad.

Evitando :hover

noreply@blogger.com (Erwin Andrés) — Wed, 31 Dec 2014 00:52:00 +0000

Las pantallas táctiles dominan el mercado, y en las pantallas táctiles no sirve de nada el selector :hover, al contrario: ¡Estorba!

Es común entrar a un sitio web y no poder acceder a todo el menú porque tu celular es de pantalla táctil y el menú utiliza :hover para funcionar, como los famosos "drop-down menus" o los estilo "acordeón". Todo esto resulta muy frustrante, y solo dan ganas de salir corriendo de esa página y no volver jamás. Es por esto que me he propuesto evitar usar el selector :hover en todos mis diseños web (o al menos reducirlo a lo más mínimo posible) y creo que todos deberíamos hacer lo mismo.

Reemplazar hover por clic es la solución más lógica y sencilla. Al momento de crear un menú para tu sitio, o un tooltip, o lo que sea que creas que necesite pasar el mouse por encima para poder funcionar, ¿es realmente necesario que funcione de esa manera? Elegir algo tan simple y primitivo como clic en lugar de :hover mejorará el desempeño de tu web en muchas plataformas, incluso en esos celulares de pantalla pequeña no-táctil en los que es muy molesto desplegar un menú accidentalmente con solo pasar el cursor.

Ahora bien, debemos pensar en las pantallas táctiles pero no debemos olvidarnos del clásico mouse. No es necesario que eliminemos hover por completo, pequeños detalles como subrayar un link o sombrear un div al pasar el cursor no están de más y aunque aveces con un simple cursor:pointer basta, no queremos que nuestra web parezca una aburrida imagen estática.

Tener un blog no es para todos

noreply@blogger.com (Erwin Andrés) — Sat, 06 Dec 2014 08:17:00 +0000

Tener un blog es como tener un hijo y hasta ahora yo he sido un mal padre. Me he ausentado mucho tiempo, he sido irresponsable, descarado, pretendiendo volver de a momentos como si nada. Mi blog me reclama siempre, me dice que me vaya, que ya no vuelva más, que soy el peor padre, y tiene razón, tiene toda la razón y merezco ser tratado así.

A veces entro con la intención de escribir algo nuevo para revivirlo. Creo una nueva entrada y comienzo a escribir, un par de lineas solamente y un titulo improvisado. Ahí es donde se me acaba la inspiración, entonces guardo el borrador y me pongo a leer otros blogs. Cuando finalmente la inspiración llega me doy cuenta de que no me gusta lo que escribí. Borro, elimino el borrador, cierro, apago y me voy lejos de cualquier dispositivo con acceso a Internet.

Para tener un blog hay que tener tiempo, dedicación, compromiso, ser constante y tenerlo al día. No solo tienes que saber escribir, te tiene que gustar también. Eso, y leer, sobre todo leer... tienes que amar leer. Si no lees no escribes, si no escribes no hay blog. Actualmente no leo ni la mitad de lo que leía cuando creé este blog (aunque en ese tiempo tampoco leía mucho). Claro que estas son solo excusas rebuscadas tratando de justificar mi injustificable falta de responsabilidad para bloguear.

Mi consejo es que si no tienes lo que se necesita para hacerte cargo de un blog, no lo crees; si ya lo creaste tienes que encargarte de él. Este es mi blog, yo soy su padre y lo amo, por eso nunca lo abandonaré.

Juego para aprender sobre selectores CSS

noreply@blogger.com (Erwin Andrés) — Fri, 04 Apr 2014 00:07:00 +0000

CSS Diner es un sencillo juego online que te ayudará a entender los selectores CSS. Sólo tienes que escribir el selector correcto para cada nivel según el HTML de la derecha.

Link: flukeout.github.io

VIDEO: 1001 Películas Que Debes Ver Antes De Morir

noreply@blogger.com (Erwin Andrés) — Mon, 17 Mar 2014 08:31:00 +0000

Este es el video que recopila escenas de algunas de las 1001 películas que debes ver antes de morir según el libro del mismo nombre (1001 Movies You Most See Before You Die). Simplemente genial.

¿Cuántas escenas reconoces?

F minor 7 y Chopin

noreply@blogger.com (Erwin Andrés) — Fri, 18 Oct 2013 01:05:00 +0000

Hace un tiempo creé una emisora, no fue fácil y aunque aún no está totalmente terminada puedo inaugurarla oficialmente hoy con música de Frédéric Chopin para recordarlo 164 años después de su muerte.

He reunido en un playlist algunos de sus estudios, baladas y nocturnos para terminar con La Gran Polonesa Brillante como vimos en la película "El Pianista"

Pueden escucharlo ahora mismo en mi emisora: F minor 7 (no me pregunten por el nombre)

Cinco Meses

noreply@blogger.com (Erwin Andrés) — Tue, 10 Sep 2013 06:59:00 +0000

Ya van casi cinco meses sin publicar nada aquí. Viendo las fechas me doy cuenta de que casualmente coincide con algo de lo que no quiero hablar, pero ya estoy mejor y he vuelto.

Me he alejado un poco de todo este mundo de los códigos. En algún lugar de uno de mis discos duros hay una carpeta llena de telarañas llamada "códigos" con documentos de textos que contienen scripts y "code snippets" de html, css, y más... algún día la voy a desempolvar y reorganizar, mientras tanto sigo ocupado en otra cosa.

Plantilla Base Adaptable

noreply@blogger.com (Erwin Andrés) — Wed, 24 Apr 2013 06:30:00 +0000

Esta es mi Plantilla Base Adaptable. Es bastante sencilla y sirve de punto de partida para crear plantillas adaptables más completas. Vean la demo y cambien el tamaño de la ventana de su navegador para verla en acción.

Demo Descargar

Cortos Animados Nominados A Los Oscars

noreply@blogger.com (Erwin Andrés) — Mon, 25 Feb 2013 07:24:00 +0000

Se me ha vuelto costumbre revisar cada año la lista de nominados a los Oscars para ver la categoría de "Mejor corto animado" y luego buscar los en Internet, aunque algunas veces se me hace difícil y hasta imposible dar con algunos de los cortos que, por motivos de copyright, desaparecen por completo de la web.

Este año los he encontrado todos y he decidido compartirlos aquí en mi blog, y así aprovecho de una vez e inauguro esta nueva sección sobre cine.

¡Véanlos antes de que los eliminen!

Adam and Dog

Fresh Guacamole

Head Over Heels

Paperman

The Simpsons: The longest Daycare

Lista De Nominados Como En Los Oscars

noreply@blogger.com (Erwin Andrés) — Sat, 09 Feb 2013 20:37:00 +0000

La página de los Oscars en la sección dónde está la lista de nominados me ha llamado la atención este año y he decidido copiarla.

El año pasado hicieron algo parecido utilizando (me parece) enlaces remotos con CSS. Pero el de este año me ha gustado más, así que me puse a husmear en el código de la página. Estas son mis notas:

Demo en vivo Descargar

Primero, las fotos de los nominados y los nombres de estos, están contenidos en elementos de listas separados. Las imágenes están una encima de otra con la opacidad en cero (opacity: 0;), excepto por una: la primera, que es la que vemos.
Al pasar el cursor por encima de el nombre de uno de los nominados, el valor de la opacidad de su respectiva fotografía pasa de cero a uno, y la que veíamos antes, cambia a cero.

Buscando en el código original noté que tanto el elemento que contiene la foto como el que contiene el nombre tienen algo en común: el atributo data-img. Entonces, ya no tenía que seguir buscando en el código, ya tenía una idea en la mente de como hacerlo.

Empezamos con el HTML, creamos el contenedor con las fotografías de los nominados en elementos <li>, agregando el atributo data-img con el nombre del nominado que le corresponde. así:

<li class="contentArea photo">
<ul>
<li data-img="actor-bradley-cooper" class="first"><img src="img/Cooper.jpg">- Bradley Cooper</li>
<li data-img="actor-daniel-day-lewis"><img src="img/Day-Lewis.jpg">- Daniel Day-Lewis</li>
<li data-img="actor-hugh-jackman"><img src="img/Jackman.jpg">- Hugh Jackman</li>
<li data-img="actor-joaquin-phoenix"><img src="img/Phoenix.jpg">- Joaquin Phoenix</li>
<li data-img="actor-denzel-washington"><img src="img/Washington.jpg">- Denzel Washington</li>
</ul>
</li>

Como dije antes, las imágenes tendrán la opacidad en cero en el CSS, exepto la primera para esto le agrego class="first" a la primera imagen de la lista.

Con unas lineas de CSS se logra que las imágenes queden una encima de otra.

.contentArea{
  width:261px;
  margin-right: 24px;
  padding: 0;
  float:left;
}
.contentArea.photo{
  position:relative;
}
.contentArea.photo ul{
  height: 440px;
}
.contentArea.photo li{
  opacity: 0;
  left: 0;
  position: absolute;
  top: 0;
}
.contentArea.photo li.first{
  opacity: 1;
}

Ahora, la lista con los nombres de los nominados. Cada uno con el valor de data-img exactamente igual que el de su foto.

<li class="contentArea">
  <ul class="nomineeslist">
    <li data-img="actor-bradley-cooper">
      <span class="title">Bradley Cooper</span>
      <span class="subtitle">Silver Lining Playbook</span>
    </li>
    <li data-img="actor-daniel-day-lewis">
      <span class="title">Daniel Day-Lewis</span>
      <span class="subtitle">Lincoln</span>
    </li>
    <li data-img="actor-hugh-jackman">
      <span class="title">Hugh Jackman</span>
      <span clas="subtitle">Les Misérables</span>
    </li>
  </ul>
</li>

Y el CSS:

.nomineeslist li{
 border-bottom: 1px dotted #bababa;
 padding:20px 5px 15px 5px;
}
.nomineeslist li .title{
 display:block;
 font-weight: 700;
 font-size: 16px;
}
.nomineeslist li .subtitle{
 display: block;
 font-weight: 400;
 margin-bottom: 20px;
}

El script.. Como el único lenguaje de programación que medio conozco es jQuery, fue en el primero que pensé para desarrollar la parte del script.

jQuery ofrece muchas opciones para trabajar con diferentes atributos.
Lo que hice fue crear una variable que atrapara el valor del atributo, para luego seleccionar la imagen correspondiente y modificar su opacidad. Así quedó el código:

$(document).ready(function() {
$('.nomineeslist li').mouseenter(function() {
  var dataImg = $(this).attr("data-img");
  $('.contentArea.photo ul li[data-img=' + dataImg + ']').fadeTo('fast', 1);
  $('.contentArea.photo ul li[data-img!=' + dataImg + ']').fadeTo('fast', 0);
});
});

En la linea 3 crea una variable que recoge el valor del atributo data-img del elemento por donde pasa el cursor.
La linea 4 selecciona la imagen con el mismo valor en el atributo data-img y le cambia la opacidad a 1.
La linea 5 selecciona las imágenes que no tienen ese valor en el atributo data-img y les cambia la opacidad a 0

Y listo, ¡ahí tienen su lista de nominados!

Pueden ver la versión en vivo o descargar el archivo .rar

Demo en vivo Descargar