Incluye tu propio YouTube en tu blog

ByLuis

Aunque es cierto que los servicios como YouTube son muy buenos y nos quitan muchas complicaciones, también es cierto que si quieres colgar un video en tu blog, queda más serio que sea mediante tu propio servicio que usando YouTube.

En este caso vamos a usar una aplicación llamada FlowPlayer, que simula el streaming, ya que permite mostrar los vídeos (FLV o SWF) mientras se están cargando, por lo que no es necesario un servidor de streaming.

Su uso es sencillo, tan solo tendremos que incluir un fichero SWF que contiene el reproductor de vídeos en nuestra página, e indicarle la ruta del vídeo. Será también necesario pasarle al swf un parámetro para indicarle el archivo js que contiene la configuración del reproductor.

<object type="application/x-shockwave-flash" data="FlowPlayer.swf" width="450" height="430" id="FlowPlayer">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="FlowPlayer.swf" />
<param name="quality" value="high" />
<param name="scale" value="noScale" />
<param name="wmode" value="transparent" />
<param name="flashvars" value="configFileName=flowPlayer.js" />
</object>

En el archivo js, a parte de muchas otras cosas, podremos indicar cuales son los archivos que queremos reproducir, permitiendo que sea una lista y no un único archivo.

playList: [
{ name: 'Uno', url: 'uno.flv' },
{ name: 'Dos', url: 'dos.flv' }
]

El siguiente problema con el que os podéis encontrar es el de saber cómo crear ficheros FLV. Para ello nada más fácil que bajarnos la aplicación Riva FLV Encoder (hay una versión gratuita) y usarlo para convertir nuestro video (mpeg) en FLV.

De todas formas, si tenéis alguna duda, podéis consultar la siguiente página: WWW FAQs: How do I add video to my web site? en el que se detalla más el proceso necesario.

Obtener información de páginas remotas con PHP

ByLuis

En ciertos momentos nos puede ser útil obtener información de páginas remotas, por ejemplo si tenemos un listado de páginas favoritas, pues obtener las palabras clave que tengan en el metatag, para poder clasificarlas con tags propias.

El proceso es sencillo mediante PHP, el problema es que algunos servidores, creo que pasa con DreamHost, no permiten el abrir ficheros de forma remota.

Primero debemos leer el fichero:

$url = "http://www.pagina.com/";
$fp = fopen( $url, 'r' );
$cont = "";
while( !feof( $fp ) ) {
$buffer = trim( fgets( $fp, 4096 ) );
$content .= $buffer;
}

Después podemos mirar cual es el título de la página:

$start = '<title>';
$end = '<\/title>';
preg_match( "/$start(.*)$end/s", $content, $match );
$title = $match[1];

Y por último obtener las metatags, usando para ello la función de PHP get_meta_tags, lo cual nos facilita el trabajo:

$metatagarray = get_meta_tags( $url );
$keywords = $metatagarray[ "keywords" ];
$description = $metatagarray[ "description" ];

Puedes verlo con una explicación más extensa en el artículo original.

Get Remote Web Page Information Using PHP

|

Reglas para maquetar varios elementos con CSS

ByLuis

Un tutorial bastante interesante que nos responderá varias preguntas sobre maquetación de varios elementos. Nos ayudará a comprender cómo apilar capas, alinear elementos inline, propiedades float y collapse, hasta un total de 15 preguntas:

CSS Tutorials – Understanding Multiple Element Formatting Rules

Vía / Pixel Groovy

links for 2006-09-15

ByLuis
|

Qooxdoo: framework AJAX

ByLuis

qooxdoo.pngQooxdoo es un framework para crear aplicaciones AJAX de forma sencilla, permitiendo crear aplicaciones web estilo escritorio.
qooxdoo2.png
Entre las características que nos ofrece nos encontramos con: detección de cliente, abstraerse del navegador que se use, sintaxis sencilla, debugging, manejar propiedades, eventos y foco con facilidad, una API completa para coockies y Drag&Drop.
Qooxdoo
Demo
Vía / Ajaxian

Más libros gratuitos sobre informática

ByLuis

Ya hace tiempo hicimos referencia a una página que nos ofrecía enlaces a libros gratuitos sobre informática, y como el saber no ocupa lugar, y seguro que nuestro disco duro tiene “lugar” vacio sufiente, aquí os dejo un enlaces a libros gratuitos organizados por categorías:

  • Lenguajes de programación: de lo más variada, nos encontramos con el más famoso C y C++, el durarero Cobol, el académico Ada o Lisp (porque no tengo muy claro que se usen demasiado) y muchos otros más.
  • Java/J2EE: organizado entre otros grupos en JSP, Struts, Java avanzado.
  • Unix/Linux: destacaría el apartado de las expresiones regulares y de las revistas gratuitas.
  • Informática general: algoritmos, seguridad, …
  • Bases de datos: como por ejemplo Oracle o MySQL.
  • Web: PHP, HTML, AJAX, diseño.

Y muchos libros más.

Free Computer Books, Tutorials & Lecture Notes

Vía / Digg

links for 2006-09-14

ByLuis
|

Laboratorio: indicativo de idioma y target en los enlaces mediante CSS

ByLuis

En muchas páginas he visto como se indica que un enlace va a abrirse en una ventana nueva con un icono que suele ser una flecha. También se suele indicar que el enlace es a una página en otro idioma mostrando la bandera del país o con un texto.

La verdad es que si tenemos que incluir la imagen en cada enlace que creamos, nos podemos volver locos, a parte de aburrirnos bastante. Una solución sencilla es mediante estilos, para ello usaremos los selectores de atributos y los pseudo-elementos.

Contaremos con dos imágenes: una para indicar un enlace externo (abrir.gif) y otra para indicar el país (inglés en este caso gb.png). También tendremos en cuenta que es posible que el enlace se abra en otra ventana y que sea en inglés.

Para poder realizarlo mediante estilos necesitamos el pseudo-elemento :after, el cual nos permite incluir contenido después del propio contenido del elemento, usando para ello también la propiedad content. También será necesario asignar el estilo de los elementos según sus atributos usando para ello selectores de atributos. Usaremos el atributo hreflang para indicar el idioma y si contiene el atributo target supondremos que es un enlace externo.

a[target]:after {
padding-left: 4px;
content: url(abrir.gif);
}
a[hreflang="en"]:after {
padding-left: 4px;
content: url(gb.png);
}
a[target][hreflang="en"]:after {
padding-left: 4px;
content: url(gb.png) "  " url(abrir.gif);
}

Funciona en Firefox y en Opera, en Safari supongo que también. En nuestro amigo IE no funciona, al menos en la versión 6, si alguien me puede confirmar en Safari y en IE7, se lo agradeceré en el alma.

Ejemplo

Atlas: framework AJAX de Microsoft

ByLuis

atlas.pngLos amigos de ASP.NET están de enhorabuena si quieren realizar sitios de forma cómoda en AJAX. Microsoft ha lanzado un framework gratuito que integra AJAX con el desarrollo de aplicaciones web mediante ASP.NET.
Está dividido en dos partes: la parte servidor y la parte cliente. Como se trata de un componente de ASP.NET, se integra completamente con los servicios web que ofrece. A parte, es compatible con algunos de los navegadores más importantes: IE, Firefox, Mozilla y Safari. Facilita el desarrollo de aplicaciones web complejas y su reutilización.
Atlas
Vía / Download Squad