Contenido

Google Font Directory, WebFonts disponibles para todos

20 May

+ 17

Google Font Directory es un repositorio que Google pone a la disposición de todos los desarrolladores donde unificar diferentes fuentes que podremos usar como webfonts en nuestras aplicaciones web.

fonts_before_webfonts_after
(Ver Imagen)

El directorio, contiene por el momento un número reducido de fuentes disponibles, así como ejemplos de como quedan y obviamente el código necesario para incluirlo en nuestras aplicaciones web.

// HTML
<link href='http://fonts.googleapis.com/css?family=Crimson+Text' rel='stylesheet' type='text/css'>
// CSS
h1 { font-family: 'Crimson Text', arial, serif; }
// @import
@import url(http://fonts.googleapis.com/css?family=Crimson+Text);

Javascript

Paul Irish publica un artículo en el que nos ilustra de las opciones disponibles de Google Font Directory, así como de WebFont Loader, una librería Javascript ideada para trabajar con el repositorio de Google con la colaboración de la gente de TypeKit.

<html>
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js">
    </script>
    <script type="text/javascript">
      WebFont.load({
        google: {
          families: [ 'Tangerine', 'Cantarell' ]
        }
      });
    </script>
    <style type="text/css">
      .wf-inactive p {
        font-family: serif
      }
      .wf-active p {
        font-family: 'Tangerine', serif
      }
      .wf-inactive h1 {
        font-family: serif;
        font-size: 16px
      }
      .wf-active h1 {
        font-family: 'Cantarell', serif;
        font-size: 16px
      }
    </style>
  </head>
  <body>
    <h1>This is using Cantarell</h1>
    <p>This is using Tangerine!</p>
  </body>
</html>

Además, nos muestra Font Previewer (con jQuery) 😀

En la vida como en LOST, no todo es malo ni todo es bueno. Ni Google es lo peor del mundo ni es el salvador que todosesperabamos, pero hay días en los que lo parezca 😀

WebM, el códec de vídeo open source de Google

19 May

+ 17

La palabra de moda hoy es WebM, y si has estado toda la tarde pegado al Google Reader, Twitter o red social similar seguro que estás más que saturado de información al respecto. Si por el contrario, has hecho como yo y te has pegado una tarde offline 100%, estarás emocionado al ir leyendo poco a poco lo que estas 4 letras significan y pueden llegar a significar.

webm-devpreview
(Ver Imagen)

¿WebM?

Antes de empezar con una definición, hay que recordar que esta tarde ha tenido lugar la famosa y archiconocida Google I/O, una congregación de desarrolladores promovida por Google para presentar sus nuevos productos, osea una Keynote de Apple o un desfile de Cibeles de Versace. En ella nos muestra lo que estará de moda esta temporada 😀

WebM, es el nombre que Google le ha dado al nuevo proyecto que pretende hacer frente al estandar de vídeo h264. Recordemos que Google adquirío hace unos meses la empresa On2, propietaria del codec VP8 con la intención de liberarlo a la comunidad. Y bueno, parece que así lo han hecho.

Antes

old
(Ver Imagen)

Ahora

new
(Ver Imagen)

WebM incluye:

¿Pero quien apoya esto?

Pues si aún no estás pegando botes en la silla, agarrate por que Mozilla, Opera y Adobe apoyan esta iniciativa y ponen en jaque a Microsoft y Apple que apoyaron fuertemente h264 anteriormente. Pese a que por el momento h264 está ganando la partida, WebM lleva detrás 4 grandes empresas (Google incluida) que hoy por hoy contribuyen a que Internet se mueva.

(Gracias Venkman): Además del importánte número de fabricantes de chips que apoyan la iniciativa:
AMD,ARM,Brightcove,Broadcom,Collabora,Digital Rapids,Encoding.com,Grab Networks,iLinc,INLET,Kaltura,Logitech,MIPS,Nvidia,Ooyala,Qualcomm,Skype,Sorenson,Telestream, Texas Instruments,Verisilicon,ViewCast,Wildform

¿Podemos probarlo ya?

Tranquilo, tranquilo, deja de pegar botes en la silla. No te muerdas las uñas. Mozilla ha puesto a nuestra disposición una «nightly version» para que podamos ir viendo como funciona el invento y por supuesto, Opera ha hecho exactamente lo propio con una versión que podemos descargar y usar.

Además Google ha comenzado a convertir sus videos al nuevo estandar y podemos activarlo muy fácilmente.

  1. Accede a http://www.youtube.com/html5
  2. Allí te dará la opción de activar la opción experimental de Youtube (este paso quizás ya lo tengas hecho)
  3. Desde esa misma URL buscamos cualquier video (por ejemplo trailers).
  4. Una vez con los resultados en pantalla, añadimos a la url (&webm=1)
  5. Debería quedar algo así (http://www.youtube.com/results?search_query=trailers&aq=f&webm=1.)
  6. Pulsamos Enter, y a ver videos en alta calidad 😀

He de decir que me ha sorprendido lo fluido que van los videos.

Más información

Actualización [8:08]:

jhuesos nos informa que Microsoft se ha pronunciado sobre el tema y confirma que la próxima versión de Internet Explorer, la 9.0, dispondrá de soporte para VP8.

Internet Explorer 9, ¿el navegador definitivo?

8 May

+ 59

NetVicious me muestra un enlace directo al MSDN de Microsoft en el que nos muestra los resultados de una serie de tests realizados con los principales navegadores sobe elementos HTML5, DOM Level3, CSS3, SVG,…

IE9-HTML5-status
(Ver Imagen)

En los resultados vemos como Internet Explorer 9, consigue un 100% sobre todos los tests realizados frente a los demás navegadores actuales. Según comentan estos resultados están basados en 192 tests realizados en colaboración con la W3C para evaluar el estado de los navegadores actuales.Podemos acceder a cada uno de los tests accediendo directamente desde el enlace en la sección y módulo indicado.

Suelo pecar de ingenuo y esta vez quiero ser cauto, pero si estos resultados son verdad, estamos a punto de vivir una revolución en Internet. ¿Os imáginais un Internet Explorer completamente adaptado a los estándares web? ¿Se acabaron las limitaciones?

Google Chrome apunto de pasar HTML5 Test

15 Abr

+ 26

HTML5Test es el nuevo test de referencia para los navegadores web. Similar a Acid 3 Test, pero enfocado a las nuevas funcionalidades HTML5, este test nos permite ubicar la estandarizacion de un navegador mediante un valor numérico y así comparar entre ellos.

HTML5testChrome
(Ver Imagen)

Actualmente, Google Chrome es el navegador que más funcionalidades HTML5 ha implementado, lo que hace que se coloque a la cabeza con un 86% de la implementación.

Continua —>

Logotipo de Firefox hecho con canvas

9 Abr

+ 4

Erick León Bolinaga de la Universidad de las Ciencias Informáticas en Cuba, ha creado un impresionante trabajo con <canvas /> para dibujar el logotipo de Mozilla Firefox completamente con esta tecnología. El resultado podéis verlo directamente aquí, gracias al HTML que el mismo Erick me ha facilitado. Una muestra más de lo interesante que se está convirtiendo el desarrollo web con las nuevas tecnologías.

Quake2 portado a HTML5 (con WebGL)

2 Abr

+ 4

Con la finalidad de demostrar el potencial de las nuevas tecnologías aparece esta versión de Quake2 desarrallado con prácticamente todas ellas a la vez (HTML5, WebGL, Canvas, <audio />, LocalStorage y WebSockets) usando GWT. El resultado es simplemente…ESPECTACULAR!!! (solo Google Chrome/Safari).

Ambilight para HTML5 Video

26 Mar

+ 13

El tag <video /> del estándar HTML5 va a convertirse en el formato de visualizar videos en Internet, es solo cuestión de tiempo. Ya hemos visto algunas interesantes aplicaciones que se le puede dar, pero esta es sin duda, y por ahora, la más espectacular que he visto.

ambilight_video_html5
(Ver Imagen)

Mediante <canvas /> conseguimos simular el efecto luminoso que Phillips impuso en sus televisores planos con los colores que vemos en el vídeo que estamos reproduciendo. Podemos ver el código fuente que lo implementa directamente desde aquí.

Ver ejemplo.

Tabla de compatibilidades CSS3/HTML5 en los diferentes navegadores

23 Mar

+ 16

Útil listado de compatibilidades CSS3 y HTML5 disponibles en los diferentes navegadores web. Muy útil para saber si esa propiedad nueva que queremos utilizar está disponible para la mayoría de navegadores.

Impel, completo ORM en Javascript para HTML5

22 Mar

+ 13

Conocemos como ORM al mapeo de un objeto-relacional, o en palabras mundanas, al mapeo de una entidad de una base de datos en un objeto. La mayoría de lenguajes de programación implementan diferentes opciones y herramientas para realizar dicha tarea en los frameworks que usamos.

 var Card = new Class({
       Extends    : ImpelClass,
       peer_class : "CardPeer",
       toString   : function(){
                      return this.getName() + " of " + this.getSuit();
                    }
   });

 var CardPeer = new ImpelPeer({
        'columns'      : { 'id'    : 'card.id',    'suit' : 'card.suit',
                           'value' : 'card.value', 'name' : 'card.name'},
        'table'        : 'card',
        'base_object'  : 'Card'
   });

Javascript no iba a ser menos, y más ahora que HTML5 ha traido la base de datos al navegador con todo lo que eso conlleva. Impel, es el primero ORM que he visto para javascript y aunque no me ha dado tiempo a probarlo, parece que tiene muy buena pinta.

Dispone de una API bastante completa y al estar completamente modularizado, nos permite incluir nuevos módulos a nuestros proyectos fácilmente.

Flash vs HTML5, pongámoslos a prueba

22 Mar

+ 75

Se habla mucho de que HTML5 va a matar a Flash, y que las nuevas tecnologías que se están integrando en los nuevos estándares ofrecen versiones compatibles muy superiores a lo que ahora podemos conseguir con flash.

Pero la gente de Man in Blue, no se contentó con solo leer lo que otros opinaban, así que se han puesto manos a la obra para realizar un benchmark entre los diferentes lenguajes disponibles.

flash-vs-html5
(Ver Imagen)

En el ejemplo ha usado una aplicación que genera partículas aleatorias y las mueve por la página caóticamente haciendo trabajar el procesador de nuestra máquina.

Podemos verla funcionando en:

Los resultados

graph_win_ie
(Ver Imagen)
graph_win_chrome
(Ver Imagen)
graph_osx_safari
(Ver Imagen)
graph_osx_ff
(Ver Imagen)

Como podemos ver en las gráficas, la superioridad de Flash está latente en todos los navegadores. Da igual el número de partículas que se usen, los resultados, actualmente, son muy superiores a los conseguidos con las otras alternativas.

«Han ganado esta batalla, pero aún no han ganado la guerra«, con esta frase expreso lo que siento al ver estos resultados. Flash está ahí, y poco a poco esto debería de ir cambiando. Tendremos que estar atentos 😀