Contenido

Convierte Internet Explorer en Google Chrome con el plugin Google Chrome Frame

23 Sep

+ 26

En la lucha contra eliminar Internet Explorer, Google ha optado por la estrategia de «Si no puedes luchar con él, únete» y así lo ha hecho con Chrome Frame.


Como vemos en el vídeo, Chrome Frame se trata de un plugin que nos permite convertir nuestro Internter Explorer en Google Chrome (el motor de renderizado). Mediante un tag html añadido en las páginas web activaremos o no el motor de Chrome para renderizar la página que estemos visitando, esto nos permitirá visualizar nuestra página exactamente igual que si fuera Google Chrome el que lo abre.

HTML

Simplemente tendremos que añadir este tag:

<meta http-equiv="X-UA-Compatible" content="chrome=1" />

y si Internet Explorer tiene instalado el plugin, hará que el motor de renderizado de HTML empleado por Google Chrome se encargue de procesar la página.

Podemos detectar si el plugin está instalado con el siguiente código:

<body>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"> </script>

<div id="placeholder"></div>

<script>
 CFInstall.check({
 node: "placeholder",
 destination: "http://www.waikiki.com"
 });
</script>
</body>

Esto nos permite comprobar si el plugin está no instalado y ofrecer al usuario la posibilidad de instalarlo.

CFInstall.check()

Este método nos permite indicar una serie de parámetros:

  • mode: opcional. Como verá el usuario la solicitud para instalarlo (Por defecto inline, opciones popup).
  • url: optional.
  • destination: optional. La URL a la que iremos cuahdo CFInstall detecte Google Chrome Frame instalado.
  • node: optional. ID del elemento donde aparecerá la opción de instalación.
  • onmissing: optional. Funcionalidad cuando no se detecta Chrome Frame.
  • preventPrompt: optional. Booleano que permite desactivar la redirección (Por defecto false).
  • oninstall: optional. Funcionalidad que será ejecutada cuando se muestre la opción de instalado.
  • preventInstallDetection: optional. Booleano, que previene la redirección cuando detecta que Chrome Frame está instalado.
  • cssText: optional. Estilos que se le aplican al iframe en modo inline.
  • className: optional. Class que aplicamos al iframe en modo inline.

A Google lo acabamos queriendo por este tipo de cosas… (además está abriendo el camino para que Google Wave llegue a todo el mundo)

WebGL disponible ya en Firefox 3.7

21 Sep

+ 3

Hoy Ajaxian publica una interesante noticia en la que nos anuncia que las últimas nightly builds ya disponen de WebGL o lo que es lo mismo Canvas3D.

¿Que és WebGL?

Básicamente se trata de una tecnología que nos permite utilizar gráficos 3D nativamente en nuestro navegador sin tener que descargar ningún plugin para ello.

Esto se logra añadiendo al HTML5 una serie de métodos que permitan que Javascript pueda sacar el contexto3D al elemento <canvas />.

Navegadores con WebGL

Actualmente WebKit era el único que disponía de dicha maravilla, y está disponible desde principios de Septiembre. Ahora Firefox también nos permite usar algunas de las funcionalidades en las últimas Nightly Builds.

Google Chrome, al estar basado en WebKit se comprometió a apoyar esta tecnología (además de la suya (O3D)). Por otro lado, Opera está apoyando su propio estandar con un estilo diferente la iniciativa con una versión nativa con ligeras diferencias a la de Firefox (Gracias Punkesito).

Como siempre Internet Explorer no se ha pronunciado al respecto, pero seguro que terminarán sacando algo que emule esta tecnología.

Aunque de momento solo podremos soñar con usarla algún día en real.

Como usar los custom fields en WordPress

21 Sep

+ 2

En InfextedFX publican un interesante y recomendado tutorial sobre como usar los custom fields de nuestros posts de nuestro WordPress. Esta funcionalidad nos permite personalizar nuestro blog post por post.

Nueva funcionalidad de WordPress 2.9 en la edición de imágenes

11 Sep

+ 8

En Carrero veo unas de las nuevas novedades que nos encontraremos en WordPress 2.9, y después en Wpengineer me encuentro unas imagenes que muestran lo que podremos hacer con las imágenes una vez subidas a nuestro WordPress.

wp-image-edit2
(Ver Imagen)

Más control sobre nuestras imágenes haciendo posible que no dependamos de ningún editor de imágenes instalado en casa.

Incrusta PDF’s fácilmente en tus aplicaciones web con Google Docs

10 Sep

+ 7

Google Docs nos facilita una forma de incrustar elementos PDF en nuestras aplicaciones, simplemente tendremos que incluir este código donde queramos que se vea:

<iframe src="http://docs.google.com/gview?url=URL_DE_NUESTRO_PDF&embedded=true" style="width:600px; height:500px;" frameborder="0"></iframe>

Simplemente tendremos que indicar la URL como parámetro de la URL del <iframe /> y personalizar el contenedor a nuestro gusto.

pdf-google-docs
(Ver Imagen)

El resultado es práctico y útil.

Diferentes formas de optimizar el consumo de memoria de WordPress a prueba

10 Sep

+ 17

Hace un par de días hablabamos de una forma de mejorar el consumo de memoria de tu WordPress. La solución, usar eAccelerator junto a Zend Optimizer permitía mejorar hasta un 90% el consumo de memoria consumida.

Aprovechando que MAMP tiene un sistema fácil y cómodo de probar estas combinaciones he hecho una prueba con un blog limpio recien instalado con diferentes combinación, los resultados son realmente interesantes.

Test

Partimos de que estoy en un iMac con 2GB de RAM, bajo Leopard. La versión de MAMP disponde de :

Las pruebas las he realizado sobre la versión PHP5 (osea la 5.2.3) con 32 MB de límite de memoria. Y los componentes que he testeado son:

Mediante un simple panel de la propia aplicación hacer los cambios es tan sencillo como seleccionar la combinación y pulsar aceptar.

panel-MAMP
(Ver Imagen)

Continua —>

Hola mundo en canvas

10 Sep

+ 5

En Carsonified.com nos muestran un interesante tutorial con el que iniciarnos en el uso de <canvas /> mediante Javascript.

// Comprobamos que <canvas /> esté disponible
if(drawingCanvas && drawingCanvas.getContext) {
 // Inicializamos el lienzo 2D
 var context = drawingCanvas.getContext('2d');

// Creamos la cara amarilla
 context.strokeStyle = "#000000";
 context.fillStyle = "#FFFF00";
 context.beginPath();
 context.arc(100,100,50,0,Math.PI*2,true);
 context.closePath();
 context.stroke();
 context.fill();

 // Añadimos 2 ojos verdes
 context.strokeStyle = "#000000";
 context.fillStyle = "#FFFFFF";
 context.beginPath();
 context.arc(80,80,8,0,Math.PI*2,true);
 context.closePath();
 context.stroke();
 context.fill();

 context.fillStyle = "#009966";
 context.beginPath();
 context.arc(80,80,5,0,Math.PI*2,true);
 context.closePath();
 context.fill();

 context.strokeStyle = "#000000";
 context.fillStyle = "#FFFFFF";
 context.beginPath();
 context.arc(120,80,8,0,Math.PI*2,true);
 context.closePath();
 context.stroke();
 context.fill();

 context.fillStyle = "#009966";
 context.beginPath();
 context.arc(120,80,5,0,Math.PI*2,true);
 context.closePath();
 context.fill();

 // Creamos una nariz con firma de diamante
 context.fillStyle = "#000000";
 context.beginPath();
 context.moveTo(93,100);
 context.lineTo(100,93);
 context.lineTo(107,100);
 context.lineTo(100,107);
 context.closePath();
 context.fill();

 // Añadimos la sonrisa                   
 context.strokeStyle = "#000000";
 context.beginPath();
 context.moveTo(70,110);
 context.quadraticCurveTo(100,150,130,110);
 context.quadraticCurveTo(100,150,70,110);                
 context.closePath();
 context.stroke();
}

Este código, nos permite generar la cara amarilla que vemos en el «Hello World» que vemos debajo:

hello-world-canvas
(Ver Imagen)

Mucho código pero muchas posibilidades.

10 plugins de jQuery y MooTools para generar calendarios

9 Sep

+ 0

Útil recopilación de 10 de los mejores plugins para jQuery y MooTools para generar calendarios dinámicos.

Detecta las funcionalidades DOM de HTML5 antes de usarlas

9 Sep

+ 4

Pese a que los nuevos navegadores ya van integrando las últimas funcionalidades DOM del estándar HTML5 aún es muy pronto para depender de ellas en nuestras aplicaciones web.

Por otro lado, podemos ir usándolas para enriquecerlas en los navegadores más avanzados, de esta forma estaremos ayudando a la implantación de estos sin dejar de lado a los usuarios que aún no han querido, o podido, actualizar su navegador principal.

En Dive into HTML5, son conscientes de ello y por este motivo nos muestran un recomendable artículo con el que mostrarnos la forma de detectar si estas funcionalidades están disponibles antes de usarlas (mediante el uso de Modernizr). De esta forma, podremos planificar un procedimiento alternativo para los navegadores que aún no dispongan de ellas.

Geolocation

Ya hemos visto otras veces esta funcionalidad, detectarla será tan sencillo como esto:

function supports_geolocation() {
 return !!navigator.geolocation;
}

if (supports_geolocation()){
 // Existe geolocation
} else {
 // No existe
}

Canvas

Otra propiedad a la que espera un gran futuro es el uso de <canvas /> como lienzo para pintar desde Javascript.

function supports_canvas() {
 return !!document.createElement('canvas').getContext;
}

if (supports_canvas()){
 // Existe canvas
} else {
 // No existe
}

HTML5 video

Detectar el tag <video /> nos permitirá usar flash en su lugar, aunque vimos una forma basada en HTML que nos ofrecerá mayor fiabilidad.

function supports_video() {
 return !!document.createElement('video').canPlayType;
}

if (supports_video()){
 // Existe video
} else {
 // No existe
}

Nuevos tipos de <input />

En HTML5 los <input /> cogen mucha relevancia y de los 10 tipos actuales:

button
checkbox
file
hidden
image
password
radio
reset
submit
text

No encontramos con que pasan a ser 20 tipos disponibles:

button
checkbox
date
datetime
datetime-local
email
file
hidden
image
month
number
password
radio
range
reset
submit
text
time
url
week

Por eso debemos podemos comprobar si estos están disponibles:

function supports_input_type(type) {
 var i = document.createElement("input");
 i.setAttribute("type", type);
 return !!(i.type !== "text");
}

if (supports_input_type('color')){
 // Existe <input type="color" />
} else {
 // No existe
}

Esta versión, está basada en la propuesta por Dive into HTML5, y permite comprobar si están disponibles los <input /> de un tipo concreto. Hay que remarcar que en caso de no existir dicho tipo de <input /> el navegador nos generará un <input type="text" /> en su lugar.

35 plugins jQuery para mejorar tu WordPress

9 Sep

+ 4

¿Que puede pasar si juntamos algunos de los mejores plugins de jQuery y los añadimos a nuestro blog? Pues lo podemos probar fácilmente con estos 35 plugins para mejorar nuestro WordPress.