Usar jQuery en Rails 3

20 de agosto de 2010

Actualmente me encuentro desarrollando mi primera aplicación web (me hago mayor). Nada novedoso, nada impactante, pero me sirve para aprender. Aprovechando el momento de transición que se vive estoy realizándola en Rails 3 sobre Ruby 1.9.2, HTML5 y cómo no, jQuery. Si es tu caso, que te has tirado a la piscina a empezar a probar cosas y quieres utilizar jQuery, te cuento cómo:

  • Eliminar todos los ficheros dentro de public/javascripts.
  • Descargar la última versión de jQuery y cópiala dentro de la carpeta public/javasctipts de tu proyecto.
    Nota: existe actualmente un bug de un método de jQuery 1.4.2 (live) e Internet Explorer (qué raro que de problemas, ¿verdad? :P ). Se recomienda a día de hoy utilizar la versión 1.4.1
  • Descargar el driver jquery ujs desde github. En la carpeta src encontrarás un archivo llamado rails.js. Cópialo dentro de la carpeta public/javasctipts de tu proyecto.
  • Ve al archivo config/application.rb de tu proyecto y busca la siguiente línea:
    
    # config.action_view.javascript_expansions[:defaults] = %w(jquery rails)
    
    

    Descoméntala y cambia jquery por el nombre del archivo de la versión de jquery que has descargado (en mi caso era jquery-1.4.1).

¡Y ya está! No tiene mayor misterio. Ahora a currar :)

Diferencias entre div, section y article

15 de junio de 2010

Cuando empecé a estudiar HTML5 me vi también en la tesitura de diferenciar div, section y article. Aunque no fue sencillo, tampoco fue demasiado complicado entender cuáles son los detalles que marcan la diferencia entre unos y otros.

Básicamente está en la carga semántica que le queramos dar al contenido. ¿Cuándo usamos un div, un section o un article?

  • Usaremos article para representar cualquier información que tenga sentido propio por si misma y sea propensa a la reutilización, por ejemplo, mediante sindicación. Un ejemplo: un post de un blog, el resumen de ese post en una portada, un hilo en un foro, un comentario…
  • Usaremos section para agrupar contenido relacionado. Puede servirnos para enmarcar un conjunto de artículos, o incluso nuevas y diferentes secciones, o artículos que se dividan en secciones… la variedad es infinita.
  • div no tiene ninguna intención semántica, es un simple “agrupador” de contenido que nos ayudará a pintarlo con CSS.

Imaginemos un documento. ¿Qué es un documento al fin y al cabo? Una gran cantidad de información. Esta viene divida en secciones, una forma de ayudarnos a entender mejor esta información. Y las secciones pueden (o no) estar divididas en más secciones, que aglutinarán el contenido de nuestro documento (los artículos). Estos además, si su complejidad lo requiere, podemos dividirlos en más secciones y así, ad infinitum. Por compararlo a algo estaríamos hablando del cuerpo humano hasta llegar al nivel de detalle molecular (un cuerpo tiene brazos, el brazo tiene músculos, los músculos células, etc…).

En el artículo anterior puedes ver cómo quedaría el loop de WordPress: una sección para indicar contenido relacionado (los post) y dentro de cada post una sección para aglutinar más contenido relacionado (los comentarios).

¿A que es sencillo?

Loop de WordPress en HTML5, un ejemplo práctico

14 de junio de 2010

Ya está aquí, ya llegó, HTML5 ha venido para quedarse y cada vez escuchamos más y más cosas de la actualización del lenguaje de marcado web por excelencia. El otro día me preguntaba cuándo WordPress daría el salto, supongo que todavía tendremos que esperar.

En cualquier caso, podemos empezar a soltarnos un poco tomando como base la archifamosa plantilla Kubrick, por defecto en nuestro CMS favorito y pasándola a HTML5. Me ahorro el PHP, que lo carga el diablo.


<section id="content" class="posts">
  <h1 hidden>Artículos</h1>
  <article id="post-X" class=hentry>
    <header>
      <h1><a href="url-del-articulo" title="Título del artículo" rel="bookmark">Título del artículo</a></h1>
      <time pubdate>Fecha de publicación</time>
    </header>
    <div class="post-content"> .... </div>
    <footer>
       <p>Publicado en
         <a href="url-categoria" title="Ver todas las entradas de Categoría">categoría</a>
       </p>
    </footer>
    <aside class="comments">
       <h1 hidden>Comentarios</h1>
       <article id="comment-X">
         <h1>
           <a href="url-del-comentarista" title="Ir al blog de X" rel="external nofollow">Nombre del comentarista</a>
         </h1>
         <div><p>Contenido del comentario</p></div>
         <footer>
           <time pubdate>Fecha de publicación del comentario</time>
         </footer>
       </article>
       <!-- repite este misma estructura para el resto de comentarios -->
    </aside>
  </article>
</section>

Eliminar ‘category’ de la URL en WordPress

31 de mayo de 2010

Hoy es un día de pequeñas anotaciones. La siguiente es una cuestión que me tuvo bastante tiempo googleando y finalmente la respuesta llegó a través de Bioxid, CTO de Mecus, al que tengo que agradecer su tiempo y buen hacer por darme la respuesta.

Como sabéis, al utilizar WordPress si no especificamos una categoría base por defecto, delante de todas las categorías aparece en la URL la palabra category. Particularmente es algo que detesto y para el nuevo diseño que estoy haciendo para este blog, me sobra por completo esa palabra en la URL. Así que, ¿cómo la quitamos?

Bastaría con instalar un simple plugin, WP No Category. Sin más. Si sois como yo, de los que prefieren hacer algo manualmente antes que con un plugin os recomiendo que por una vez no os compliquéis la existencia. Esto en concreto lo intenté mediante la modificación del htaccess y no me dio buenos resultados.

Añadir un nuevo bundle a Textmate

31 de mayo de 2010

Habitualmente uso Textmate para desarrollar en Mac. No es el único (Coda, CSSEdit para maquetación, … ) y muchos dirán que no el mejor (en lo que yo discreparía), pero está bastante extendido. Lo cierto es que a mí Textmate me va genial para maquetación y desarrollo en Rails. En realidad instalar un bundle es de los más sencillo, pero siempre olvido dónde debo hacerlo, será la edad. Así que aprovecho y lo dejo por aquí.

¿Qué es un bundle?

Son funcionalidades específicas sobre un lenguaje concreto que podemos importar en Textmate. Son útiles para agilizar el tiempo de desarrollo y escribir más en menos tiempo. Cuando acabas acostumbrándote a ellos es lo mejor ya que muchas veces los desarrolladores web, como sabéis, tendemos a repetir estructuras de código una vez las tenemos asimiladas, ya que nos encontramos cómodas con ellas.

¿Donde conseguimos nuevos bundles?

O bien los encuentras mediante buscador o bien puedes utilizar GitHub, utilizado para alojar repositorios de código.

Vale, ya tengo mi bundle, ¿ahora cómo lo instalo?


mkdir -p /Library/Application\ Support/TextMate/Bundles
cd /Library/Application\ Support/TextMate/Bundles

Y ahí clonamos el repositorio que queramos, usando SVN o git, como es mi caso. Recuerda que antes de poder utilizarlo debes recargar los bundles, lo que puedes hacer desde consola o bien para más comodidad, desde el propio Textmate.

Botones y links para compartir contenido

25 de mayo de 2010

En un nuevo proyecto en el que estoy trabajando he tenido que incluir botones y enlaces para compartir los artículos que creará el administrador de la web. Gracias a estos enlaces o botones los visitantes de la web podrán enviar el artículo a Facebook, Twitter, Linkedin, Google Buzz, etc… os dejo con la recopilación de enlaces, esperando que os resulte de utilidad.

¿Los usamos todos? Deberíamos pararnos un poco a pensar si realmente nos serán necesarios. Si tu contenido es “pro” quizás te interese más Twitter y Linkedin. Si no lo es tanto y es un contenido más generalista, quizá todos menos Linkedin. Cuestión de probar, también. Total, vamos al lío, que me enrollo.

Twitter

No pude encontrar la documentación oficial de Twitter (si alguien tiene a bien pasar la url le estaré agradecido), pero integrar un botón para compartir en Twitter es bastante sencillo.


<a href="http://twitter.com/homestatus=mensaje_que_saldra_antes_del_enlace%20url_del_articulo" title="Comparte la noticia"/>Compartir en Twitter</>

Creo que se entiende bien. En lugar de “mensaje_que_saldra_antes_del_enlace” deberás poner cualquier cosa, por ejemplo “Quizás esto te interese: ” o “Lee esto que mola un cacho”.


Facebook

Gracias a un sencillo formulario podremos crear nuestro botón de “Me gusta” para integrarlo en nuestra web. Facebook ha tomado gran relevancia los últimos tiempos y se revela como un medio muy potente donde dar a conocer nuestros artículos. Lo que no me gusta es que el código generado es un iframe, y tratándose del gran caralibro, ya podrían habérselo currado un poco más.

¿necesitas más información?


Google Buzz

Sí, todavía existe. Podrás crear botones y enlaces de una forma sencilla y rápida. Te ofrece tres tipos de estilo: Botón y contador, sólo botón y enlace. Basta con añadir un enlace y un script a nuestra página. Poco más.

¿necesitas más información?


Linkedin

Éste fue el caso más curioso de todos. Cuando estamos en desarrollo, en mi caso, mi entorno de prueba apunta a http://localhost:3000. Al hacer click en el enlace una vez generado me mostraba un error y era porque Linkedin es listo y no te deja compartir enlaces a localhost. ¿Qué ocurre? Que el mensaje de error no era muy amigable y hasta que te das cuenta de qué está ocurriendo, pasa un buen rato.

http://www.linkedin.com/shareArticle?mini=true&url={articleUrl}&title={articleTitle}&summary={articleSummary}&source={articleSource}

¿necesitas más información?


Vale, todo esto está muy bien, pero…¿cómo ahorramos algo de tiempo y de ruido visual en Rails? Aquí entran en juego nuestros amigos los helpers.

Helpers para generar botones de compartir contenido

Aquí debo agradecer a Ceritium la ayuda, prácticamente los helpers que veréis aquí detallados los hizo él.

Bastaría colocar los helpers en el controlador que nos convenga. Imaginemos que queremos compartir noticias (news). ¿Donde queremos llevar al usuario al hacer click? Al show de la noticia en cuestión – news_url(news). ¿Donde colocamos el helper? Pues en news_helpers.


def share_on_twitter
  link_to content_tag(:span,'Twitter'), "http://twitter.com/homestatus=Te%20recomiendo%20que%20leas%20#{news_url(news)}", :title => "Comparte en Twitter"
end

def share_on_buzz
  link_to content_tag(:span,'Google Buzz'),"http://www.google.com/buzz/post", :title => "Comparte en Google Buzz", :class => "google-buzz-button", "data-button-style" => "link", "data-locale" => "es"
end

# Nota: headline (título de la noticia), summary (resumen de la noticia).
def share_on_linkedin(news)
  url = 'http://www.linkedin.com/shareArticle?mini=true'
  url << "&url=#{news_url(news)}"
  url << "&title=#{news.headline}"
  url << "&summary=#{truncate(news.summary, :length => 200)}"
  link_to content_tag(:span,'Linkedin'), url
end

En el caso de Facebook preferí meter el iframe directamente en el show, por ahorrarme tiempo. Pero os animo a crear un helper vosotros mismos :)

Yaml sin @import: adaptando un framework CSS

18 de mayo de 2010

Actualmente, en la empresa en la que trabajo (Flowers in Space), utilizamos YAML para nuestros desarrollos. Mucho se ha debatido sobre usar o no usar un framework, pero no es lo que nos ocupa ahora. En nuestro caso os puedo decir que agiliza nuestros desarrollos, más adelante es posible que me extienda un poco más sobre el asunto y os doy pros y contras con detalle.

Lamentablemente, aunque nos gusta mucho y nos sentimos cómodos con él, sólo le veíamos una pega, y es que para cargar todas las hojas de estilo de las que hace uso utiliza @import. Hace ya algún tiempo Anieto2k, uno de mis blogs de cabecera, nos explicaba los beneficios de no usar @import. En resumen nos viene a contar que utilizar la etiqueta link permite que todos los ficheros CSS se carguen de forma simultánea.

Así que con el fin de utilizarlo en nuestros futuros proyectos he echado un rato en quitar todos los import de Yaml y a la vez, crear una estructura de directorios intuitiva, con la que nos sintamos cómodos y que nos permita actualizarlo rápidamente a las nuevas versiones del framework. A falta de un nombre mejor lo denominaré YamlMod.

Consideraciones previas

A destacar: esta modificación de Yaml atiende a necesidades propias. ¿Qué quiero decir con esto?

  • YamlMod está actualizado a la versión 3.2.1 (revisión 392) de Yaml: intentaré mantenerlo actualizado, sobre todo si veo que tiene buena acogida la idea.
  • Addons que trae por defecto Yaml eliminados: no hacemos uso de ellos, pero podéis incorporarlos vosotros manualmente sin ningún inconveniente.
  • forms.css de Yaml eliminado: nosotros utilizamos Formtastic, que trae su propia hoja de estilos.
  • División entre admin y application: nuestros desarrollos los realizamos en Ruby on Rails. Solemos utilizar dos layouts para dividir la zona de administración y la parte pública, así que he mantenido esto en la modificación de Yaml.
  • Utilizamos el lenguaje de marcado Haml para describir nuestro xHTML: os explico esto porque a continuación os indico cómo realizar la carga hojas de estilo.

Cómo importar YamlMod

¿Cómo quedaría nuestro application.html.haml? Aquí tenéis un ejemplo, con algunas líneas comentadas (las que no solemos utilizar nosotros tan a menudo). Ojito con la indentación si vas a copiar el código y pegarlo en algún sitio.


/Stylesheets
= stylesheet_link_tag 'reset','core/base_all', :media => "all"
= stylesheet_link_tag 'core/base_screen', :media => "screen,projection"
/= stylesheet_link_tag 'core/base_print', :media => "print"

= stylesheet_link_tag 'screen/application/basemod', :media => "screen,projection"
= stylesheet_link_tag 'screen/application/content', :media => "all"

/Si quieres incluir la navegación pestañas de YAML, descomenta la línea siguiente
/= stylesheet_link_tag 'navigation/nav_shinybuttons', :media => "all"

/ Incluir aquí el tipo de print.css necesario, si procede
/ Más info: http://www.yaml.de/en/documentation/css-components/layout-for-print-media.html
/= stylesheet_link_tag 'print/print_123', :media => "print"

/[if lte IE 7]
  = stylesheet_link_tag 'patches/iehacks_all', :media => "all"
  = stylesheet_link_tag 'patches/iehacks_screen', :media => "screen,projection"
  /= stylesheet_link_tag 'patches/iehacks_print', :media => "print"
  /Si quieres incluir la navegación pestañas de YAML, descomenta esta línea
  /= stylesheet_link_tag 'patches/patch_nav_vlist',  :media => "screen,projection"
  / descomenta la siguiente línea si has incluido algún parche personal para
  /= stylesheet_link_tag 'patches/application_patches', :media => "all"

¿Cómo quedaría nuestro admin.html.haml?


/Stylesheets
= stylesheet_link_tag 'reset','core/base_all', :media => "all"
= stylesheet_link_tag 'core/base_screen', :media => "screen,projection"
/= stylesheet_link_tag 'core/base_print', :media => "print"

= stylesheet_link_tag 'screen/admin/basemod', :media => "screen,projection"
= stylesheet_link_tag 'screen/admin/content', :media => "all"

/Si quieres incluir la navegación pestañas de YAML, descomenta la línea siguiente
/= stylesheet_link_tag 'navigation/nav_shinybuttons', :media => "all"

/ Incluir aquí el tipo de print.css necesario, si procede
/ Más info: http://www.yaml.de/en/documentation/css-components/layout-for-print-media.html
/= stylesheet_link_tag 'print/print_123', :media => "print"

/[if lte IE 7]
  = stylesheet_link_tag 'patches/iehacks_all', :media => "all"
  = stylesheet_link_tag 'patches/iehacks_screen', :media => "screen,projection"
  /= stylesheet_link_tag 'patches/iehacks_print', :media => "print"
  /Si quieres incluir la navegación pestañas de YAML, descomenta esta línea
  /= stylesheet_link_tag 'patches/patch_nav_vlist',  :media => "screen,projection"
  / descomenta la siguiente línea si has incluido algún parche personal para
  /= stylesheet_link_tag 'patches/admin_patches', :media => "all"

Espero que el recurso os sea de utilidad.

>> Descargar YamlMod ( Yaml versión 3.2.1 revisión 392 )

¡Hola mundo!

4 de mayo de 2010

¡Saludos, terrícola! Actualmente me encuentro en fase de diseño y desarrollo de mi nuevo sitio personal, donde ubicaré mi portfolio con los trabajos que voy desarrollando, además de compartir conocimientos y descubrimientos.

Mientras tanto, puedes sentarte, abrir una cerveza y pasearte por toda mi identidad digital (de manera no erótica).