oEmbed: formato para URLs de contenido EMBED

ByLuis January 21, 2010

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

Desarrollo web | Microsoft

10 razones por las que usar Silverlight

ByLuis May 4, 2007

El tÃtulo original dice ’10 razones por las que Silverlight cambiarÃ¡ la web’, y en mi opiniÃ³n es pasarse un poco, entre otras cosas porque tampoco veo nada nuevo. Eso sÃ, tambiÃ©n hay que reconocer que Silverlight parece una buena alternativa a Flash, sobre todo para los que desarrollen aplicaciones en .NET con Visual Studio. Microsoft sabe hacer las cosas y algo que gusta mucho a los jefes de proyectos es que todo estÃ© conectado entre sÃ de forma fÃ¡cil y rÃ¡pida.

Las 10 caracterÃsticas son las siguientes:

VÃdeos de alta calidad: la misma tecnologÃa que se usa para VC-1, el codec de los BluRay y HD DVD, es la que se usa para el streaming de los vÃdeos.
Multiplataforma y multinavegador: funcionarÃ¡ para cada plataforma y cada navegador, incluso gracias al proyecto Mono funcionarÃ¡ para Linux.
UniÃ³n de diseÃ±o grÃ¡fico y desarrollo: los desarrolladores de Visual Studio podrÃ¡n crear aplicaciones para Silverlight de forma rÃ¡pida, pudiendo separar el core de la aplicaciÃ³n de la parte grÃ¡fica.
Barato: tan solo es necesario disponer de IIS en nuestro servidor Windows, aunque deberÃa funcionar en todos los servidores web. Este punto es un tanto confuso, el autor dice que es barato, pero por lo poco que he entendido, Silverlight es un plugin, como lo es el Flash Player, y su precio es gratuito. IIS no lo necesitas para nada, porque es como almacenar un archivo .swf o .png (si mal no creo). Ahora bien, Â¿el precio de Visual Studio para desarrollar las aplicaciones o animaciones que funcionen en Silverlight?, mirando el precio de Flex (810€ la versiÃ³n con Charting, 520€ la versiÃ³n normal) y el precio de Visual Studio (1.284€ para Visual Studio 2005 Professional Edition con SuscripciÃ³n MSDN Premium, aunque hay otro producto que se llama igual pero que cuesta 2.675€), no sÃ© que pensar sobre lo barato que es.
Soporte a lenguajes de terceros: gracias a la nueva Dynamic Language Runtime es posible usar Ruby, Python y EcmaScript para desarrollar aplicaciones Silverlight y dejar a un lado .NET. Â¿Pero esto es como cuando te dicen que puedes crear ficheros Excel, pero que tienes que tener instalado el Excel?, Â¿puedes pasar de .NET y tambiÃ©n de Visual Studio o solo de .NET?.
DepuraciÃ³n multiplataforma y multinavegador: gracias a las caracterÃsticas que ofrece Visual Studio.
Mejor entorno de desarrollo del planeta: bueno, esto va en gustos, y al autor le debe gustar mucho Visual Studio.
Soporte a mashups: muy buena utilidad, obtenida gracias al soporte a LINQ y LINQ-to-XML por parte de Silverlight y a que los datos son accesibles mediante RSS, POX, REST y JSON.
ProtecciÃ³n anticopia: evitando asÃ que los contenidos como vÃdeos se puedan copiar como ocurre en los vÃdeos Flash como los que ofrece Youtube. Hasta que venga uno y consiga copiarlos…
Rapidez: habrÃ¡ un gran incremento en la rapidez en las aplicaciones basadas en Ajax que usen Silverlight.

Otro punto que cuestiono es el alarde que hace el autor de que solo ocupa 2Mb., pero eso es solo el Silverlight, y segÃºn he entendido es necesario .NET, por lo que a esos 2Mb hay que aÃ±adirle los 22Mb. del framework de .NET. Demasiado si lo comparamos con el tamaÃ±o del Flash Player que es el que ejecuta las aplicaciones Flex.

Lo siento, me ha sido incapaz no dar mi opiniÃ³n, que quizÃ¡s parezca anti-microsoft, pero he leÃdo en varios sitios cosas parecidas al siguiente artÃculo, y aunque seguro que Silverlight aporta buenas cosas a la web, tampoco hay que pasarse.

Top 10 Reasons Silverlight Will Change the Web

VÃa / dzone

Desarrollo web

Recursos para un sitio compatible con navegadores

ByLuis October 23, 2007

Uno de los mayores problemas con los que nos encontramos cuando estamos desarrollando una aplicaciÃ³n web es la compatibilidad con los diferentes navegadores, bueno, realmente la compatibilidad de estos navegadores con los estÃ¡ndares.

Para ayudarnos en esta lucha, nada mejor que esta serie de recursos:

Cross Browser CSS For Your Site: una guÃa para realizar CSS compatible con los diferentes navegadores, grandes consejos con ejemplos, no teorÃa.
Starting With CSS: Revisited: cada navegador tiene estilos por defecto para las etiquetas HTML, siendo estos algo diferentes entre ellos. Elimina el margin y el padding para empezar con todos los navegadores del mismo modo.
undohtml.css: similar a la tÃ©cnica anterior.
Two CSS Hacks For Identical Pages: dos consejos que podemos usar y un aviso de cÃ³mo empezar a escribir tu cÃ³digo.
CSS Hacks & Issues: una serie de consejos y trucos para librarse de los quirks de Internet Explorer.
Box Model Hack: hack para dibujar correctamente el modelo de caja en IE 5 y 5.5.
Eric Meyer On CSS: consejos para usar trucos con los navegadores y ocultar estilos.
/* Position Is Everything */: necesario para aquellos que quieran desarrollar su layout.
glish.com : CSS layout techniques: ejemplos de layouts de 3 columnas, 2 columnas y modelos fluidos.
100 Percent Cross Browser, Pure CSS Layouts: otro lugar donde encontrar layouts CSS.
Rendering Mode and Doctype Switching: esta pÃ¡gina te enseÃ±a que DOCTYPE usar para usar el “standards mode”.
Activating the Right Layout Mode Using the Doctype Declaration: tabla con una relaciÃ³n de los navegadores y el tratamiento que le dan al doctype.
In Search of the Holy Grail: creaciÃ³n de layouts.
Litmus Labs: CSSVista: aplicaciÃ³n que permite modificar tus CSS en Firefox y en IE.
Browser Shots: herramienta online que te devuelve pantallazos de una pÃ¡gina vista en diferentes navegadores.
IE NetRenderer: lo mismo pero para diferentes versiones de IE.

Designing For Every Browser: How To Make Your Site Fully Cross Browser Compatible

VÃa / dzone

Desarrollo web

Intentando definir la Web 2.0

ByLuis April 12, 2006

Interesante artículo que intenta definir qué es la Web 2.0 o cómo conseguir crear nuestra propio diseño 2.0, algo que puede ser muy abstracto. Unas cuantas características que se suelen encontrar en los sitios que definimos como Web 2.0:

Debe ser limpio, claro y debe usar un diseño en columnas.
El fondo debe ser blanco y muy claro, e incluso usar degradados de color claro al blanco.
Esquinas redondeadas, ya sea redondeando una sola esquina, redondeando esquinas alternas o redondeando todas menos una.
La letra debe ser grande, clara y preferiblemente Sans-Serif.
Imágenes con reflejos redondeados y uso de iconos.
Colores pasteles, fondos suaves y usando con cuidado los colores oscuros.

Design for 2.0

Vía / Vecindad Gráfica

Desarrollo web | PHP

Lógica de aplicación y plantillas mediante PHP

ByLuis November 17, 2006

Cuando desarrollamos una aplicaciÃ³n web, algo muy importante es separar la lÃ³gica de la aplicaciÃ³n de la presentaciÃ³n. En el siguiente artÃculo, nos comentan como hacerlo mediante PHP y el sistema de plantillas Smarty.

Primero nos explica la direfencia entre la lÃ³gica de aplicaciÃ³n, la cual se encarga de las operaciones como acceso a base de datos, validaciÃ³n de formularios, de la lÃ³gica de plantillas, que es la que se preocupa Ãºnicamente de mostrar la informaciÃ³n.

Dentro de la lÃ³gica de aplicaciÃ³n nos tenemos que ocupar de la inicializaciÃ³n y configuraciÃ³n de la lÃ³gica de plantillas:

<?php
$smarty = new Smarty();
$smarty->display('index.tpl');
?>

Y en la plantilla mostraremos la informaciÃ³n:

<p>
Title: {$title|strtoupper}
Summary: {$summary|truncate}
</p>

Hay que tener cuidado de no cometer el error de en la plantilla modificar el formato del texto, por ejemplo quitarle espacios u otras cosas que corresponden a la lÃ³gica de aplicaciÃ³n.

Os recomiendo el artÃculo, porque viene muy claramente explicado, con ejemplos y nos puede ser de mucha ayuda.

Application logic versus template logic

Desarrollo web

Diferencias entre un buen diseñador y un gran diseñador

ByLuis November 7, 2006

Estando a la espera de que nos cuenten las diferencias entre un mal diseÃ±ador y un buen diseÃ±ador, que serÃa algo que necesitamos algunos, nos quedamos con un buen artÃculo que nos explica las diferencias entre un buen diseÃ±ador y un gran diseÃ±ador.

Se trata del tÃpico post que todo el mundo referencia y que uno se da cuenta que se entera de las cosas el Ãºltimo, por eso voy a referenciar donde lo he visto originalmente, donde lo he leido en espaÃ±ol y por su puesto el original.

Entre las cosas que mÃ¡s me han gustado destaco lo siguiente:

Mientras un buen diseÃ±ador dispone de ciertos elementos y los organiza de manera estÃ©tica, un gran diseÃ±ador se preocupa ademÃ¡s porque el mensaje que expresa su diseÃ±o llegue a destino.

…los artistas crean problemas, los diseÃ±adores los solucionan. Pero un gran diseÃ±ador se adelanta a un problema potencial, tiene visiÃ³n.

La conclusiÃ³n a estas ideas nos lleva nuevamente a la razÃ³n de ser del trabajo de diseÃ±o, que es justamnente lo que diferencia ademÃ¡s a un diseÃ±ador de un artista: las necesidades y problemas que atiende el diseÃ±o suelen ser -por lo general- ajenas al diseÃ±ador. El diseÃ±ador no es mÃ¡s que un instrumento comunicativo en esencia.

Nine skills that separate good and great designers

9 habilidades que separan buenos y grandes diseÃ±adores

VÃa / Criterion

Desarrollo web