oEmbed: formato para URLs de contenido EMBED

ByLuis

Bueno, el título es algo difícil de entender, pero el concepto es fácil, oEmbed es un formato para devolver información sobre URLs que muestran contenido incrustable: imágenes, vídeos, …

Por ejemplo para Flickr sería:

http://www.flickr.com/services/oembed/?url=http%3A//www.flickr.com/photos/bees/2341623661/

Y el resultado en formato JSON sería:

{
  "version": "1.0",
  "type": "photo",
  "width": 240,
  "height": 160,
  "title": "ZB8T0193",
  "url": "http://farm4.static.flickr.com/3123/2341623661_7c99f48bbf_m.jpg",
  "author_name": "Bees",
  "author_url": "http://www.flickr.com/photos/bees/",
  "provider_name": "Flickr",
  "provider_url": "http://www.flickr.com/"
}

Existen librerías PHP y jQuery que funcionan con proxy para obtener la información.

Learning oEmbed: Convert Links Into Embedded Content

Similar Posts

10 reglas esenciales para depurar

ByLuis

Más consejos que siempre viene bien, algunos los conoceremos, otros simplemente los usaremos de forma automática y otros serán nuevos para nosotros. En este caso se trata de consejos para depurar nuestras aplicaciones.

  • Comprueba los datos: comprueba que los datos son los que se esperan. Una buena opción sería darle la funcionalidad al sistema de exportar los datos a un fichero de texto plano para poder comprobarlo mejor.
  • Comprende el sistema: leer el manual, seguir las instrucciones, compara tu código con los ejemplos que ofrecen, puede ayudarte a usar el sistema correctamente y no mandar datos que no son los correctos.
  • Hazlo fallar: para encontrar posibles fallos no hay nada mejor que hacerlo fallar a proposito. Si algo falla rara vez, puede ser algo bastante importante, no asumas cosas cuando intentes encontrar el problema, te puede hacer perder mucho tiempo.
  • Tómate tu tiempo: sacar conclusiones usando poca información nos puede hacer no encontrar el problema real, sino parchear un problema menor.
  • Divide y conquistarás: estrecha tu búsqueda, limita los sitios donde pueda darse el error, sigue el código hasta la zona más exacta donde pueda fallar.
  • Cambia cosas una a una: cuando encuentres varios errores, corrígelos uno a uno, para evitar encontrarte con otros errores, o que cuando algo falle por los cambios, no sepas por qué se ha producido.
  • Realiza una auditoría: da igual que parezca que todo funciona bien, sigue mirando los logs por posibles errores, por si aparecen casos que no habías visto antes.
  • Comprueba primero lo obvio: no asumas que tus ideas son correctas, cuestionate todo.
  • Pide ayuda: los test de caja negra dicen que quien debe testear la aplicación no debe ser quien la ha desarrollado, ya que muchas veces caemos en el error de pensar que algo en particular no va a fallar porque sabemos cómo funciona.
  • Si no lo corregiste, no está solucionado: las cosas no se arreglan solas, si no se reproduce de nuevo el error no quiere decir nada, el error sigue estando allí.

10 essential debugging rules

Vía / dzone

Kuler: un esquema diario de colores por Adobe

ByLuis

adobe-labs.pngSi ya hace tiempo hacíamos referencia a Daily Color Scheme, un lugar donde nos daban esquemas de colores para poder usar en nuestros diseños (que por cierto, no se actualiza demasiado), ahora nos toca hablar de Kuler una aplicación similar creada por Adobe, la cual nos permite ver esquemas de colores, crearlos, bajárnoslos y modificarlos.
kuler.png
Me ha gustado mucho la forma en que mediante una rueda de colores podemos crear nuestro propio esquema, permitiéndonos elegir si queremos colores análogos, monocromáticos…
Kuler
Vía / Criterion

|

20 consejos para ser un gran diseñador web

ByLuis

Según cuenta el autor, dice que hay una diferencia entre ser un buen diseñador web y un gran diseñador web, que es tomar atajos para hacer más sencillo tu trabajo sin que repercuta en la calidad. Por eso nos da una serie de consejos o trucos a seguir:

  • Planificación: aunque parece algo obvio, suele ser algo que no se lleva a cabo.
  • Hazlo a mano: yo no podría estar más de acuerdo con este consejo. Existen aplicaciones muy buenas que te crean el código HTML sin tener que escribirlo uno, pero hacerlo tú mismo es algo que te va a dar mayor control sobre el diseño. Con un editor normal que te coloree el código debe ser más que suficiente.
  • Hojas de estilo, enlazar o importar: hay dos formas de importar un CSS y no todos los navegadores reconocen las dos formas, por ello se puede usar ambas para que navegadores modernos y antiguos carguen el CSS.
<link rel="stylesheet" href="simple. css" type="text/css" media="screen">
<style type="text/css" media="screen">
@import url(simple.css);
</style>
  • Usar gradientes como fondo con cuidado: el uso de imágenes como fondo de pantalla es algo sobre lo que se puede y debe tener mucho control, se puede hacer un degradado vertical de ancho 1px y luego repetirlo solo en el eje x, y que el color de fondo sea el color en que finaliza el gradiente. Yo añadiría que cuidado con los gradientes, ahora están muy de moda, pero tampoco se debe abusar de ellos.
  • Comentarios: imprescindibles para cualquier tipo de desarrollo, ya sea para una aplicación en .NET o para una página web. Otra cosa es que lo hagamos siempre.
  • Usa simples scripts PHP: no es necesario ser un experto en PHP, pero si tu servidor lo admite, úsalo, sobre todo para incluir trozos de HTML que sean muy utilizados, como por ejemplo el código que crea el menú.
  • Dimensiona las fuentes con em: a los diseñadores les suele gustar usar px porque se ajusta exactamente al tamaño que quieren, pero el problema es que, por ejemplo, IE no redimensiona las fuentes definidas con px con el consiguiente problema de accesibilidad para los lectores con discapacidad.
  • Hack en IE del modelo de caja: quizás no os haya pasado, pero IE tiene un bug con el tamaño de una capa cuando se usa width y margin, padding o border. Esto se soluciona usando el guión bajo delante del estilo (_margin), que IE reconocerá como el propio estilo, mientras que los otros navegadores lo ignorarán. No recomiendo seguir haciendo esto, porque con la nueva versión de IE podríais tener problemas ya que se ajusta más a los estándares.
  • Espacio en los formularios: los form aunque no se vean tienen márgenes, cuando crees uno, no olvides quitarles el margen superior e inferior.
  • Testea: imprescindible, sobre todo para intentar conseguir que funcione en casi todos los navegadores.
  • Formato de imágenes: usa GIF para imágenes con colores planos y JPEG para imagenes tipo fotografía, aunque deberías usar PNG en ambos casos, ya que funciona tanto para colores planos como para tipo fotografia, el problema es que IE no admite el canal alpha, hay que esperar a IE7 para que lo podamos usar.
  • Atributos alt y title: para que la descripción de las imágenes o enlaces aparezcan correctamente en los dispositivos móviles.
  • Orden de las pseudoclases: como ya explicamos en esta entrada.
  • Lenguaje semántico: separa el contenido de la apariencia, si eliminamos la css de una página se debería ver correctamente.
  • Favicons: los iconos que aparecen en los favoritos o en las pestañas, algo sencillo que representa a nuestra web.
  • Usa máyusculas mediante CSS: cuando quieras escribir un texto completamente en mayúsculas usa text-transform en vez de escribirlo tú directamente en mayúsculas.
  • Escribe el texto alrededor de las imagenes: algo ya comentado en esta entrada.
  • Usa UTF-8: no todo el mundo tiene tu idioma o tu juego de caracteres, vuelve a leer esta entrada para obtener más información.
  • Estilos para impresora: crea estilos específicos para impresoras (media=”print”)
  • Aprende de otros: para eso nada mejore que CSSMania.

20 pro tips

Vía / Digg

| | |

Rotar imágenes aleatoriamente

ByLuis

Vamos con otra situación típica que nos solemos encontrar en el momento de desarrollar una web: rotar imágenes al azar cada vez que ingresamos o actualizamos una URL, y de la que José Román escribía hace unos días.

Lo probaremos mediante 3 casos en Javascript y mediante un script en el servidor (PHP, JSP, ASP, …). A parte, se pueden hacer distintos usos de ellas, según sea nuestra forma de programar o la imaginación o necesidades que tengamos.

Read More “Rotar imágenes aleatoriamente”

|

Google ofrece aplicaciones para tu dominio

ByLuis

google.pngGoogle ofrece sus aplicaciones GMail, Calendar, GTalk y Page Creator a las empresas para que puedan usarlas desde sus propios dominios.
Esta oferta amplia la anterior de GMail for your Domain, la cual ha conseguido que Google ya tenga miles de dominios registrados.
Estas aplicaciones serán accesibles desde un panel de control y se podrá configurar la interfaz y el color, a parte de administrar los usuarios, los alias y las listas de distribución. Una futura versión premium tendrá más capacidad de almacenamiento.
Vía / CNet News