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) :D

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 :D

Un vistazo al futuro: IE9 Developer Tools, la pestaña de red

23 abr

+ 11

Internet Explorer 9 está a la vuelta de la esquina, y su llegada defraudará a muchos por la escasa adopción de estándares y animará a otros con nuevas funcionalidades y herramientas que nos permitirán desarrollar para él con más comodidad.

Una de estas herramientas es la ya conocida Developer Tools para Internet Explorer, que en esta nueva versión para Internet Explorer 9 dispondrá de una pestaña de red que nos mostrará información relacionada a las conexiones realizadas en nuestra aplicación web.

NetworkTab_3
(Ver Imagen)

La posibilidad de capturar las peticiones entrantes y salientes de nuestras aplicaciones web (imágenes, CSS, Ajax,…) pudiendo ver detalles interesantes sobre cada petición.

NetworkTab_5
(Ver Imagen)

Osea, básicamente lo mismo que hacemos con Firebug, Web Inspector, Dragonfly en su respectivo navegador.

Añade soporte CSS3 a Internet Explorer 6, 7 y 8

12 abr

+ 34

Internet Explorer 6, 7 e incluso la versión 8, aún no soporta ciertas características del estándar CSS3. Para ello, generalmente tenemos que hacer uso de hacks o  soluciones poco recomendadas como generar una serie de capas para simular una sombra o un borde redondeado.

Una solución muy limpia es la de importar mediante behavior() un fichero .htc que nos añadirá al navegador (IE6,7,8) algunas de las características que cualquier otro navegador ya podemos disfrutar.

.box {
 -moz-border-radius: 15px; /* Firefox */
 -webkit-border-radius: 15px; /* Safari and Chrome */
 border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */

 -moz-box-shadow: 10px 10px 20px #000; /* Firefox */
 -webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */
 box-shadow: 10px 10px 20px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */

 behavior: url(ie-css3.htc); /* Activamos el soporte para IE */
}

Como podemos ver, añadimos la llamada behavior() a la especificación de la clase .box. Esto hará que Internet Explorer 6+ use la especificación CSS3 (osea la versión sin prefijos) aplicando los estilos deseados. Para ello usará estándares de Internet Explorer disponibles únicamente para estos navegadores. Simplemente tendremos que descargar el fichero .htc y usarlo como vemos en el ejemplo anterior.

CSS Naked Day 2010

9 abr

+ 2

Aunque este año no se ha promocionado y parece que el precursor no lo está haciendo, durante todo el día de hoy (48 horas para abarcar todo el mundo) es el CSS Naked Day.

Hace ya un par de años que dejé un código que elimina las CSS del HTML todo el día 9 de Abril de cada año. Por eso se está viendo la web “desnuda”, sin estilos CSS. Todo esto es para reivindicar la importancia de los estándares web.

Continua —>

Detectando el iPad desde la web

8 abr

+ 3

David Walsh, publica un artículo donde nos muestra una serie de opciones, en diferentes lenguajes, para detectar el iPad desde nuestra aplicación web.

Básicamente se encarga de comprobar el userAgent que el dispositivo deja impreso en las cabeceras en las que solicita la página para detectarlo y condicionar la respuesta al usuario.

Continua —>

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).

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.

Mozilla Firefox, por fín CSS Transitions

23 feb

+ 17

Via Twitter descubro que Firefox 3.7 (la versión pre-alpha2) ya dispone de CSS Transtions. El sistema con el cual mediante sentencias CSS podemos aplicar movimiento a elementos HTML de nuestra página. Esta funcionalidad, disponible en WebKit desde hace ya bastante tiempo, nos permite realizar tareas que actualmente se realizan mediante Javascript, en la capa de funcionalidad, en la capa de diseño, algo que ha levantado dispares opiniones al respecto.

// HTML
<ul>
 <li id="long1">Long, gradual transition...</li>
 <li id="fast1">Very fast transition...</li>
 <li id="delay1">Long transition with a 2-second delay...</li>
 <li id="easeout">Using ease-out timing...</li>
 <li id="linear">Using linear timing...</li>
 <li id="cubic1">Using cubic-bezier(0.2, 0.4, 0.7, 0.8)...</li>
</ul>

// CSS
#delay1 {
 position: relative;
 -moz-transition-property: font-size;
 -moz-transition-duration: 4s;
 -moz-transition-delay: 2s;
 font-size: 14px;
}

#delay1:hover {
 -moz-transition-property: font-size;
 -moz-transition-duration: 4s;
 -moz-transition-delay: 2s;
 font-size: 36px;
}

Podemos descargar la última versión de desarrollo de Firefox y probarlas en nuestras manos usándo la documentación que Mozilla nos ha preparado.

jDigiClock, Reloj HTC Hero con jQuery

15 feb

+ 18

jDigiClock es un plugin jQuery que nos permite conseguir un reloj, inspirado en el HTC Hero, e integrarlo directamente en cualquier página web.

jdigiclock
(Ver Imagen)

Modo de empleo

Como todo plugin jQuery debemos cargar los ficheros Javascript necesarios.

<link rel="stylesheet" type="text/css" href="css/jquery.jdigiclock.css" />
<script type="text/javascript" src="lib/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="lib/jquery.jdigiclock.js"></script>

Una vez cargados ya podemos crear nuestro reloj llamando al plugin indicando el ID del elemento HTML contenedor y especificando una serie de parámetros de configuración.

// HTML
<div id="digiclock"></div>

// Javascript
<script type="text/javascript">
     $(document).ready(function() {
        $('#digiclock').jdigiclock({
            // Aquí la configuración
        });
    });
</script>

Configuración

Disponemos de una serie de parámetros para personalizar nuestro reloj:

  • clockImagesPath: Directorio de imágenes del Reloj
  • weatherImagesPath: Directorio de imágenes del tiempo
  • am_pm: Booleano para especificar AM/PM
  • weatherLocationCode: Código de tu cuidad para el tiempo (Base de datos: WeatherLocationDatabase.txt).
  • weatherMetric: Medición de la temperatura (C/F)
  • weatherUpdate: Tiempo de actualización del tiempo

Actualización (13:02):

Cane nos explica en los comentarios que el aspecto es de HTC Sense, el interface desarrollado por HTC para dispositivos Android, Windows Mobile, …

El poder oculto de border-radius

11 feb

+ 11

Ya conocemos border-radius, la propiedad CSS que nos permite redondear los elementos de nuestras páginas mediante CSS. Aunque la propiedad aún no está correctamente integrada en los navegadores actuales, podemos disfrutar de ella mediante el uso de los correspondientes prefijos:

// Mozilla
-moz-border-radius:1em;

// WebKit
-webkit-border-radius:1em;

// W3C
border-radius:1em;

Aún así, hay gente que ha estado haciendo cosas realmente interesantes con ella.

border-radius
(Ver Imagen)

Código

#wrapper{
 width: 1000px;
 margin: auto;
 position: relative;
}
#circle{
 position: absolute;
 top: 100px;
 left: 0;
 z-index: 0;
 width: 200px;
 height: 200px;
 background-color: #a72525;
 -webkit-border-radius: 100px;
}

#circle1{
 position: absolute;
 top: 105px;
 left: 5px;
 z-index: 1;
 width: 200px;
 height: 200px;
 background-color: #efefef;
 -webkit-border-radius: 100px;
}

Quizás no le encontremos una utilidad real, pero como curiosidad es interesante :D