Contenido

YQL: Un lenguaje de programación para Internet

31 Ene

+ 8

YQL ( Yahoo! Query Language) es un lenguaje de sintaxis similar a SQL que Yahoo! utiliza para filtrar y unificar datos de Web Services de por toda internet. Dispone de una potente API que nos permite realizar consultas bastante complejas y obtener los datos en XML o JSON.

Consola

Yahoo! nos pone a nuestra disposición una consola muy completa que nos permite realizar las pruebas necesarias antes de usarlo en proyectos en real.

YQL_console
(Ver Imagen)

Usándola en PHP

Para usarla desde nuestras aplicaciones necesitaremos obtener una API Key (que será usada en alguna petición) y enviaremos las peticiones mediante cURL a la URL que Yahoo! pone a nuestra disposición:

// Definimos la consulta
$query = 'select * from flickr.photos.interestingness(20)';

// Concatenamos con la consulta
$url = 'http://query.yahooapis.com/v1/public/yql?format=json&q=' . urlencode($query);

// Creamos la conexión cURL
$c = curl_init();
curl_setopt($c, CURLOPT_URL, $url);
curl_setopt($c, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($c, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($c, CURLOPT_SSL_VERIFYHOST, false);

// Lanzamos la petición
$rawdata = curl_exec($c);
curl_close($c);

// Convertimos el JSON en un objeto
$data = json_decode($rawdata);

// Mostramos la información
echo '<pre>';
print_r($data);
echo '</pre>'

Indicando el formato en el que queremos recibir los datos para mostrar en nuestra página podremos trabajar con él y adaptarlo a nuestro diseño fácilmente:

<?php
 $results = $data->query->results->results;
 for ($i = 0; i$i < count($results); $i++) :
 $item = $results[$i]->item->item;
 $link = $results[$i]->item->resource;
 ?>
 <li>
 <a href="<?=$link?>"><?=$item?></a>
 </li>
<?php endfor; ?>

Realmente es sencillo y potente, además dispone de más de 130 tablas de las que obtener información. Un interesante concepto que nos ayuda a unificar toda la información disponible por internet.

CSS3 @font-face, una visión general

28 Ene

+ 13

Ya hemos hablado otras veces de @font-face, la capacidad de definir nuestras propias fuentes mediante CSS y que los usuarios las descarguen y las visualizen.

Soporte

Aunque suene raro, Internet Explorer lo implementa desde la versión 4.0 (con sutiles diferencias), y los estándares no se ponian de acuerdo en si añadirla o no, ya que en CSS2 entró como una interesante novedad, pero en CSS2.1 fué retirada. Tuvo que llegar CSS3 y hacer que se la tenga en cuenta.

font-face-browser
(Ver Imagen)

Como podemos ver, la mayoría de navegadores la soporta y nos permite usarla con diferentes formatos.

Forma de uso

Veamos como usamos esta propiedad, que pasa por una declaración de nuestra nueva fuente y una posterior aplicación de esta fuente a nuestros elementos.

Declarando nuestra fuente

La declaración permitirá establecer el nombre y la ubicación de nuestra fuente para que el navegador la descargue y la asocie para que la aplicación nos la muestre.

@font-face {
 font-family: miFuente; /* required */
 src: source;                        /* required */
 font-weight: weight;                /* optional */
 font-style: style;                /* optional */
}

Aplicando nuestras fuentes

Una vez declarada la fuente «miFuente«, ya la podemos usar como si de otra fuente se tratara, simplemente estableciéndola con la propiedad CSS font-family.

h3 {
 font-family: miFuente, arial, helvetica, sans-serif;
}

Detectar la propiedad

Si necesitamos detectar si la propiedad está disponible en el navegador del visitante, Paul Irish nos creó una versión compatible con todos los navegadores modernos.

/*!
 * isFontFaceSupported - v0.9 - 12/19/2009
 * http://paulirish.com/2009/font-face-feature-detection/
 *
 * Copyright (c) 2009 Paul Irish
 * MIT license
 */

var isFontFaceSupported = (function(){

    var fontret,
        fontfaceCheckDelay = 100;

		// IE supports EOT and has had EOT support since IE 5.
		// This is a proprietary standard (ATOW) and thus this off-spec,
		// proprietary test for it is acceptable.
    if (!(!/*@cc_on@if(@_jscript_version>=5)!@end@*/0)) fontret = true;

    else {

    // Create variables for dedicated @font-face test
      var doc = document, docElement = doc.documentElement,
          st  = doc.createElement('style'),
          spn = doc.createElement('span'),
          wid, nwid, body = doc.body,
          callback, isCallbackCalled;

      // The following is a font, only containing the - character. Thanks Ethan Dunham.
      st.textContent = "@font-face{font-family:testfont;src:url(data:font/opentype;base64,T1RUTwALAIAAAwAwQ0ZGIMA92IQAAAVAAAAAyUZGVE1VeVesAAAGLAAAABxHREVGADAABAAABgwAAAAgT1MvMlBHT5sAAAEgAAAAYGNtYXAATQPNAAAD1AAAAUpoZWFk8QMKmwAAALwAAAA2aGhlYQS/BDgAAAD0AAAAJGhtdHgHKQAAAAAGSAAAAAxtYXhwAANQAAAAARgAAAAGbmFtZR8kCUMAAAGAAAACUnBvc3T/uAAyAAAFIAAAACAAAQAAAAEAQVTDUm9fDzz1AAsD6AAAAADHUuOGAAAAAMdS44YAAADzAz8BdgAAAAgAAgAAAAAAAAABAAABdgDzAAkDQQAAAAADPwABAAAAAAAAAAAAAAAAAAAAAwAAUAAAAwAAAAICmgGQAAUAAAK8AooAAACMArwCigAAAd0AMgD6AAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAEZIRAAAQAAgAC0C7v8GAAABdv8NAAAAAQAAAAAAAAAAACAAIAABAAAAFAD2AAEAAAAAAAAAPAB6AAEAAAAAAAEAAgC9AAEAAAAAAAIABwDQAAEAAAAAAAMAEQD8AAEAAAAAAAQAAwEWAAEAAAAAAAUABQEmAAEAAAAAAAYAAgEyAAEAAAAAAA0AAQE5AAEAAAAAABAAAgFBAAEAAAAAABEABwFUAAMAAQQJAAAAeAAAAAMAAQQJAAEABAC3AAMAAQQJAAIADgDAAAMAAQQJAAMAIgDYAAMAAQQJAAQABgEOAAMAAQQJAAUACgEaAAMAAQQJAAYABAEsAAMAAQQJAA0AAgE1AAMAAQQJABAABAE7AAMAAQQJABEADgFEAEcAZQBuAGUAcgBhAHQAZQBkACAAaQBuACAAMgAwADAAOQAgAGIAeQAgAEYAbwBuAHQATABhAGIAIABTAHQAdQBkAGkAbwAuACAAQwBvAHAAeQByAGkAZwBoAHQAIABpAG4AZgBvACAAcABlAG4AZABpAG4AZwAuAABHZW5lcmF0ZWQgaW4gMjAwOSBieSBGb250TGFiIFN0dWRpby4gQ29weXJpZ2h0IGluZm8gcGVuZGluZy4AAFAASQAAUEkAAFIAZQBnAHUAbABhAHIAAFJlZ3VsYXIAAEYATwBOAFQATABBAEIAOgBPAFQARgBFAFgAUABPAFIAVAAARk9OVExBQjpPVEZFWFBPUlQAAFAASQAgAABQSSAAADEALgAwADAAMAAAMS4wMDAAAFAASQAAUEkAACAAACAAAFAASQAAUEkAAFIAZQBnAHUAbABhAHIAAFJlZ3VsYXIAAAAAAAADAAAAAwAAABwAAQAAAAAARAADAAEAAAAcAAQAKAAAAAYABAABAAIAIAAt//8AAAAgAC3////h/9UAAQAAAAAAAAAAAQYAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAAAAAA/7UAMgAAAAAAAAAAAAAAAAAAAAAAAAAAAQAEBAABAQEDUEkAAQIAAQAu+BAA+BsB+BwC+B0D+BgEWQwDi/eH+dP4CgUcAIwPHAAAEBwAkREcAB4cAKsSAAMCAAEAPQA/AEFHZW5lcmF0ZWQgaW4gMjAwOSBieSBGb250TGFiIFN0dWRpby4gQ29weXJpZ2h0IGluZm8gcGVuZGluZy5QSVBJAAAAAAEADgADAQECAxQODvb3h/cXAfeHBPnT9xf90wYO+IgU+WoVHgoDliX/DAmLDAr3Fwr3FwwMHgoG/wwSAAAAAAEAAAAOAAAAGAAAAAAAAgABAAEAAgABAAQAAAACAAAAAAABAAAAAMbULpkAAAAAx1KUiQAAAADHUpSJAfQAAAH0AAADQQAA)}";
      doc.getElementsByTagName('head')[0].appendChild(st);

      spn.setAttribute('style','font:99px _,serif;position:absolute;visibility:hidden'); 

      if  (!body){
        body = docElement.appendChild(doc.createElement('fontface'));
      } 

      // the data-uri'd font only has the - character
      spn.innerHTML = '-------';
      spn.id        = 'fonttest';

      body.appendChild(spn);
      wid = spn.offsetWidth;

      spn.style.font = '99px testfont,_,serif';

      // needed for the CSSFontFaceRule false positives (ff3, chrome, op9)
      fontret = wid !== spn.offsetWidth;

      var delayedCheck = function(){
        if (isCallbackCalled) return;
        fontret = wid !== spn.offsetWidth;
        callback && (isCallbackCalled = true) && callback(fontret);
      }

      addEventListener('load',delayedCheck,false);
      setTimeout(delayedCheck,fontfaceCheckDelay);
    }

    function ret(){  return fontret || wid !== spn.offsetWidth; };

    // allow for a callback
    ret.ready = function(fn){
      (isCallbackCalled || fontret) ? fn(fontret) : (callback = fn);
    }  

    return ret;
})();

Si solo necesitas comprobarlo sobre Firefox, Safari, Chrome y Opera, te puedes ahorrar todo este código y usar la siguiente comprobación:

if (!!window.CSSFontFaceRule) ...

Alternativas

Mientras los usuarios se adaptan a estas nuevas propiedades siempre es conveniente usar alternativas que ofrezcan un resultado similar. Para conseguir esto, la solución pasa por usar alguna de las que ya hemos visto anteriormente:

  1. sIFR 2.0
  2. cufón
  3. P+C DTR
  4. FLIR
  5. SIIR
  6. DTR
  7. sIFR 3
  8. Typeface.js
  9. IFR
  10. PHP+CSS DTR
  11. CSS Image Replacement [static]
  12. swfir

Más información

MarkerCSS, framework CSS español para maquetar más fácilmente

28 Ene

+ 10

MarketCSS es un framework CSS desarrollado por Jose Castro que nos permite simplificar la tarea de maquetar en CSS.

// Referencia "lh" + número de 80 a 200 de 10 en 10
// Interlineado de 80% a 200% de 10 en 10; por ejemplo "lh120"
<div class="lh120"></div>

// Referencia "b" negrita
<div class="b"></div>

// Referencia "i" cursiva
<div class="i"></div>

// Referencia "n" normal
<div class="n"></div>

// Referencia "u" subrayado
<div class="u"></div>

Mediante un sistema de referencias, que usaremos como clases en los elementos de nuestro HTML, obtendremos los resultados preestablecidos ahorrándonos una buena cantidad de código CSS.

Via

Interprete de LOGO desarrollado en Javascript

27 Ene

+ 1

Los que nos iniciamos pronto en la informática recordamos LOGO. Aquel lenguaje de programación que nos enseñaron cuando estudiábamos y que mediante comandos muy claros podíamos mover por la pantalla un puntero (que llamabamos Tortuga) haciendo dibujos en la pantalla. En clase, lo usábamos para mover un coche teledirigido adaptado para recibir órdenes desde una interfaz con LOGO.

logo_javascript
(Ver Imagen)

Gracias a <canvas />, ha sido posible generar un interprete desarrollado en Javascript que nos permite disfrutar de este interesante lenguaje 😀

Impresionante Coca-Cola CSS

27 Ene

+ 6

Román Cortés, es un verdadero crack y nos lo muestra con algunos de los ejemplos de sus efectos que hemos mostrado aquí. Sin duda, aprovecha las propiedades del HTML/CSS para hacer cosas realmente sorprendentes.

cocacolacss
(Ver Imagen)

La última ha sido esta Coca Cola CSS, partiendo de otro anterior basado en el mismo principio, que mediante el desplazamiento del scroll se desplaza por nuestra pantalla. Ver el Ejemplo.

HTML5 Video, más problemas de estándares

26 Ene

+ 8

HTML5 ha llegado, y aunque sea pronto para que el usuario pueda disfrutar de todo su potencial, los desarrolladores hace ya unos meses que podemos ir viendo lo que será el Internet de dentro de unos años.

El tag <video /> es el que más revuelo está teniendo, y no solo por su integración en sitios como Youtube o Vimeo, sinó por los estándares soportados por cada navegador.

Mozilla se ha puesto firme al respecto y ha anunciado que no piensa incluir el estandar h264, ya que este no es un codec abierto y existen otros que si lo son (y como vimos ofrecen mejor calidad).

Esto nos deja en una situación en la que los navegadores web que actualmente soportan el tag <video /> de HTML5:

  • Presto/Opera: HTML5 mediante GStreamer (incluye sólo Ogg/Theora).
  • WebKit/Chrome: HTML5 mediante ffmpeg (Ogg/Theora y H.264/MP4).
  • Gecko/Firefox: HTML5 con Ogg/Theora.
  • WebKit/Epiphany: HTML5 mediante GStreamer (Ogg/Theora garantizado).
  • WebKit/Safari: HTML5 mediante QuickTime (H.264/MOV/M4V, puede reproducir Ogg/Theora con XiphQT components).

Nos encontramos frente a una guerra en la que empresas como Apple y Microsoft, forman parte de la MPEG-LA, empresa que tiene la patente del codec h264, frente a Mozilla (por el momento) que se ha posicionado en contra de usar una tecnología propietaria que condicione la red.

Las palabras de Asa Dotzler no pueden ser más claras:

La web no sería lo que es hoy si cada blogger tuviera que pagar por una licencia para publicar imágenes y texto en una página. Los vídeos tampoco tendrían que requerir el pago de licencias.

La Free Software Fundation pone a nuestra disposición la página de sugerencias de Google para que votemos por el uso de estándares libres en Youtube. No dudes en dejar tu voto.

Por una internet más libre y menos controlada por las patentes.

Curioso bug de RGBa en Internet Explorer (¿como no?)

25 Ene

+ 6

La implementación de RGBa para fondos, es algo que poco a poco se va implementando en la mayoría de navegadores, aunque como era de esperar Internet Explorer no lo ha hecho.

La gente de CSS-Trick, comenta un bug detectado por Dam Bean que se produce al usar el color alternativo para estos navegadores.

div {
 // IE6 y 7 lo omite (en IE8 se ve bien)
 background-color: rgb(255,0,0);

 // Solución para estos navegadores
 background-color: #fd7e7e;

 // RGBa CSS3
 background-color: rgba(255,0,0,0.5);
}

Por tema de compatibilidad, usamos un doble sistema de background-color, con el fin de ofrecer un color alternativo al navegador que no soporte el estandar RGBa. Como vemos en la imagen, este no funciona (en IE 6-7) si usamos una abreviatura o el código hexadecimal del mismo. En caso de no usarlo, Internet Explorer no usará ningún color dejando el elemento sin colorido.

En fin… otro más 😀

Windows 3.11 en tu navegador

25 Ene

+ 5

Ni Gazelle (SO online de Microsoft) ni Google Chrome OS, lo mejor es Windows 3.11. Impresionante versión «Browser Edition» de Windows 3.11Via

Chuleta de Google Analytics, que no se te escape nada

25 Ene

+ 6

Si has trabajado alguna vez con Google Analytics, sabrás que no solo es pequeño script que colocas en el inferior de tu página y esperas a que Google añada las estadísticas y confeccione los gráficos. Google Analytics, permite una gran cantidad de configuraciones para ayudarnos a estudiar a nuestros usuarios y enfocar más nuestro diseño/contenido a lo que ellos buscan.

google_analytics_cheatsheet
(Ver Imagen)

Siempre es bueno tener una chuleta a mano con todas las opciones para que trabajar con él sea más sencillo y rápido. Por eso, esta cheatsheet seguro que te sacará de algún apuro.

Idle Spy para MooTools, usa Ajax solo cuando sea necesario

23 Ene

+ 3

Alfredo Artiles nos vuelve a deleitar con un espectacular script con el que aprovecharemos al máximo los recursos del usuarios y los de nuestro servidor haciendo peticiones Ajax solo cuando estemos en una aplicación web.

El script montado para funcionar con MooTools, se basa en que cuando cambiamos de pestaña el navegador continua ejecutando nuestros scripts de actualización mediante Ajax. Estas llamadas consumen recursos sin ser necesarios, ya que estamos en otra pestaña. Alfredo ha optado por controlar el movimiento del ratón y teclado sobre la página y en caso de pasar un tiempo sin que este actúe sobre nuestra página cancelará nuestras peticiones Ajax.

Modo de empleo

var idleSpy = new IdleSpy({
 idleTime: 300000
});
idleSpy.addEvents({
 'idle': function() { /* on user idle code here */ },
 'back': function() { /* on user back code here */ }
});
idleSpy.start();

Básicamente lo que nos ofrece el script es la posibilidad de definir un tiempo de espera antes de activar el evento idle en el que definiremos que hacer cuando llevemos X segundos sin actuar sobre nuestra página. Posteriormente, definiremos el evento back que se encargará de reestablecer todo lo que hayamos parado previamente.

¿Para jQuery?

Los que usamos jQuery tambien tenemos un plugin que nos permite realizar la misma tarea. jQuery idleTimer, nos permite definir ambos eventos.

// timeout en milliseconds; defaults 30000
$.idleTimer(10000);

$(document).bind("idle.idleTimer", function(){
// ....
});

$(document).bind("active.idleTimer", function(){
// ....
});

$.idleTimer('destroy');

Nicholas C. Zakas, implementó hace ya tiempo una versión para YUI que los desarrolladores que usen pueden tener en cuenta.

Actualizo (11:58)

Alfredo me avisa de que ha encontrado uno para funcionar con Prototype.