The Source Cookbook: Código fuente listo para copiar y pegar

The Source Cookbook” es un sitio para almacenar, organizar y compartir “recetas de código”; esas clases, funciones, o líneas de código que son reutilizables y útiles al mismo tiempo. Hacía ya tiempo que tenía la idea en la cabeza y por fin he podido hacer esta primera versión.

Logotipo de The Source Cookbook

Logotipo de The Source Cookbook

Este es un proyecto pequeño, y no tengo ninguna expectativa de “negocio” puesta en él. Es simplemente un proyecto que me ha resultado fácil de hacer (gracias a symfony y a lo que tenía ya hecho para ululand) y que me está sirviendo para experimentar, aprender y para darme un poco a conocer entre los desarrolladores de symfony.

Login en un clic con Google

Login en un clic con Google

Todavía me quedan muchas ideas que iré añadiendo poco a poco, pero ahora mismo ya cumple perfectamente y tiene algunas cosas muy interesantes como el login en un clic a través de Google, el resaltado de sintaxis específico para cada lenguaje o la posibilidad de insertar las recetas en cualquier página externa, igual que se hace con un vídeo de youtube.

¿Conocíais el hola mundo en CSS? Aquí lo tenéis:

Pues nada, sé que la mayoría de los que leéis este blog sois programadores así que os invito a echarle un vistazo y, si os gusta, podéis haceros fans de The Source Cookbook en facebook (¡cuanto book!):

Y, como siempre, me encantará recibir todo tipo de sugerencias, avisos o cualquier otro tipo de comentario.

HTML 5: Algunos elementos nuevos

HTML 5 será la siguiente gran revisión de HTML, el lenguaje que se utiliza para diseñar las páginas web. Ya sé que a la mayoría os dará más o menos igual pero como a mí sí me interesa bastante, voy a comentar un poco por encima algunos de los elementos que se introducirán en la siguiente versión. Toda la información la he sacado del siguiente documento del W3C: HTML 5 differences from HTML 4.

HTML 5 incluirá nuevos elementos para cubrir muchas necesidades que han surgido en los últimos años:

  • section: Indica el ámbito de una sección de la página. Se puede usar con h1-h6 para estructurar el documento.
  • article: Indica un trozo de contenido en un documento. Se puede usar para una entrada de un blog o un artículo de un periódico.
  • aside: Trozo de documento poco (o nada) relacionado con el resto del documento (el típico sidebar de un blog, por ejemplo).
  • header: Autodescriptivo: Representa la cabecera de la página o de una sección.
  • footer: Igual que header pero para los pies de página o sección.
  • nav: Representa una sección del documento con elementos de navegación (menús, por ejemplo).
  • dialog: Una muy curiosa; sirve para un diálogo entre dos personas. Fijaros en el ejemplo a continuación.

<dt> Costello
</dt><dd> Look, you gotta first baseman?
</dd><dt> Abbott
</dt><dd> Certainly.
</dd><dt> Costello
</dt><dd> Who's playing first?
</dd><dt> Abbott
</dt><dd> That's right.
</dd><dt> Costello
</dt><dd> When you pay off the first baseman every month, who gets the money?
</dd><dt> Abbott
</dt><dd> Every dollar of it.
  • figure: Bastante interesante: Puede usarse para asociar un título a una imagen o un video.

Example
  • audio y video: Intentan ser el equivalente a la actual etiqueta img, pero para sonido y vídeo. Prometen facilitar mucho la inclusión de vídeos y sonidos en las páginas sin necesidad de flash u otras soluciones "raras".
  • Y muchas mas... Podéis ver el listado completo en el documento del W3C HTML 5 differences from HTML 4.

Fruta Gratis

Éranse una vez que se eran dos jóvenes de nombre Paco y Luis.

Paco había destacado siempre por pensar diferente… Unos decían que era muy raro. Otros decían que era genial. El resto… Bueno, el resto estaba de acuerdo con todos los demás. Su padre era agricultor, y tenía una frutería. Todo quedó para Paco el dia de su muerte (me refiero a la muerte del padre de Paco, claro).

Luis, por su parte, era una de esas personas a las que les gusta arriesgar. Un rumor bastante popular decía que solía jugarse al póker, y sin pestañear, un reloj de oro que llevaba tres generaciones en su familia. Otro rumor decía que ese reloj no era en realidad más que una baratija pero, claro, este era mucho menos morboso y a nadie le gustaba difundirlo.

Paco y Luis se conocieron en el año 2005 y al año siguiente reabrieron la frutería del padre de Paco… Con una pequeña diferencia: La gente no tenía que pagar por la fruta; simplemente se cogía. Gratis.

Como os podréis imaginar, la pequeña frutería tuvo un rotundo éxito y estaba siempre a rebosar. No ganaban dinero, pero tenían dinero: Habían conseguido una buena cantidad de un inversor de capital de riesgo al que le sobraban los relojes de oro transmitidos a través de varias generaciones. Enseguida, volvieron a reunirse con otros inversores; había que ampliar el “negocio”: Continue reading

La Introducción al Proyecto ULUland

La memoria que tuvimos que hacer para presentar ULUland como Proyecto Fin de Carrera nos llevó un montón de tiempo, como podréis imaginar. Y, bueno, “ya que tal” aprovecharé e iré poniendo aquí las partes más interesantes.

Sabíamos que la introducción era la parte que iba a leer todo el mundo, así que nos esmeramos con ella. Debimos hacerlo más o menos bien porque mucha gente nos comentó que le había gustado mucho… A ver qué os parece:

Continue reading

CSS 3 mola (algunas novedades de CSS3)

Al publicar la serie “cosas que debes saber sobre CSS” me di cuenta de que hay bastante gente interesada en el tema de las hojas de estilo, sobre todo cuando se habla de CSS avanzado. Supuse que ese interés se debía, en gran parte, a la curiosidad por lo nuevo y a la sorpresa por lo potente del CSS. Por eso, me decidí a escribir este artículo, mostrando por encima lo más nuevo en CSS: La tercera versión de CSS.

Quiero aclarar también que CSS 3 está todavía en desarrollo, y que la mayoría de sus propiedades aún no han sido implementadas por los navegadores. Aún así, pinta muy bien y hay algunas que ya pueden ser usadas. Por ejemplo, en ululand usamos bastante la propiedad border-radius para redondear algunos bordes sin recurrir a trucos raros de CSS o a librerías de javascript (como la que se usa en este blog).

Algunos elementos nuevos

border-radius

Este es, para mí, uno de los cambios más prácticos de la próxima versión de CSS. Los diseños web con esquinas redondeadas son muy habituales hoy en día y, paradójicamente, no existe una forma sencilla de conseguir este efecto. Por suerte para todos, CSS3 trae la propiedad border-radius al rescate:

Resultado

Sintaxis
border-radius: <radio_horizontal> <radio_vertical>;

border-top-radius: <radio_horizontal> <radio_vertical>;
border-right-radius: <radio_horizontal> <radio_vertical>;
border-bottom-radius: <radio_horizontal> <radio_vertical>;
border-left-radius: <radio_horizontal> <radio_vertical>;
Soporte

Firefox (usando prefijo “-moz-”): -moz-border-radius
Webkit (safari 3/Chrome) (usando prefijo “-webkit-”): -webkit-border-radius

Continue reading

Un cambio… Delicioso (sobre el rediseño de delicious.com)

Delicious es una de las webs que más asiduamente uso. De hecho, es fácil saber con bastante exactitud en qué estoy trabajando solo con mirar las últimas direcciones que haya guardado en mi delicious: Guardo ahí un montón de referencias útiles que encuentro al investigar cosas nuevas.

Pero no me gusta solo por su utilidad. También me encantan la inteligencia y el sentido común que se han utilizado en su diseño. Fijaros en la sencillez y claridad que han conseguido sin usar nada sofisticado. Es minimalismo en estado puro, y me encanta. De hecho, cuando no sé cómo hacer algo en un diseño web, primero miro en delicious para ver cómo lo han hecho ellos.

Hace poco han cambiado. Mucho. De hecho, han cambiado hasta el dominio (ya se dejan de la chorradita de del.icio.us). Por supuesto, el cambio me ha gustado, aunque todavía hay algunos detallitos que se les han escapado y que, seguramente, corregirán enseguida.

Para que veáis lo que han cambiado, os dejo con este vídeo que os lo explicará mucho mejor que lo que yo pudiera explicaros:

Firefox 3 con lo mejor de Opera (lista de 8 complementos)

En principio, iba a titular esta entrada con algo así como “Toda la mierda morralla que hay que instalar para que el Firefox 3 sea como el Opera”, pero es que me quedaba demasiado largo. Además, quizás resultara un poco demasiado polémico… Aunque eso no tiene por qué ser malo.

Al final, he decidido darle un enfoque más objetivo (mi opinión ya quedó clara la semana pasada) y voy a hacer una simple lista de unos cuantos add-ons para Firefox 3 que, creo, mejorarán mucho la experiencia de uso del mejor navegador de código abierto que existe (xD).

Speed Dial

Una de las cosas más útiles del Opera es lo que llaman el Speed Dial. Basicamente es una página en la que se muestran 9 páginas que elijas dispuestas como un teclado de teléfono. Está genial para acceder, rapidísimo, a las páginas que visitas más a menudo.

Descargar complemento para Firefox: Speed Dial.

Continue reading

Flash Player 10 Beta ya está aquí (y mola)

Adobe ha sacado este jueves (15 de mayo) una versión Beta del próximo reproductor de Flash. Quizás haya gente que no se dé cuenta, pero esto es algo muy importante; tened en cuenta lo presente que está el flash en internet hoy en día (youtube, juegos, publicidad, etc…). Cualquier cambio que se haga en el reproductor de flash puede mejorar (o empeorar) drásticamente nuestro día a día en internet.

Las novedades

Cada vez es más evidente la importancia de los juegos flash, y parece que eso ha hecho que una de las prioridades de esta nueva versión sea agradar a los desarrolladores de juegos flash. Estas son algunas de las cosas que más nos pueden interesar a los que andamos con flash para hacer juegos:

Efectos 3D

Se podrán utilizar las tres dimensiones para crear transformaciones, efectos y animaciones, aunque manteniéndonos siempre en las dos dimensiones. No es realmente un motor gráfico 3D como Papervision, pero dará un rendimiento muy bueno gracias a que forma parte del reproductor.

Aceleración por hardware

Hasta ahora, todos los cálculos necesarios para la ejecución de un archivo flash eran procesados únicamente por la CPU. Por fin, por fin van a darle acceso al hardware (tarjeta gráfica) para ciertas operaciones gráficas (más detalles acerca de este tema, en inglés).

Control avanzado de textos

Nuevas funciones para controlar la presentación de los textos a bajo nivel. También han mejorado mucho las posibilidades de presentación de textos, incluyendo colocación en columnas, tablas, alrededor de imágenes o el soporte para idiomas “raros” (árabe, hebreo, etc…).

Mejoras en la API de dibujado

La api de dibujado actual (las funciones para dibujar formas vectoriales) es una de las cosas que menos me gusta de la programación para flash. Parece que la han mejorado mucho y que será más fácil crear formas complejas sin tener que programarlas línea a línea.

Filtros y efectos personalizados

Funciones pensadas para la modificación de imágenes y la creación de efectos sobre ellas.

Flash mola cada vez más

Hace unos años, yo era de los que rechazaban el flash (de una forma bastante “nazi”) por su lenguaje de programación, por el IDE (que me sigue pareciendo horroroso) y por la poca potencia que daba. Sin embargo, la programación orientada a objetos es posible ahora, se puede desarrollar en flash casi sin pisar el entorno de desarrollo de Adobe (Flash CS2 o CS3) y ahora va a tener aceleración por hardware… Todo eso hace que flash ahora mole. Mucho.
Continue reading