Contenido

MIME Type Javascript soportados

2 nov

+ 1

¿Alguna vez te has preguntado que tipos de Javascript podemos definir al cargar nuestros scripts? Y quizás, lo más importante. ¿En que navegadores funcionarán?

<script type="text/javascript" src=""></script>

Krijn Hoetmer lo hizo y nos dejó estos resultados:

javascript-mime-types
(Ver Imagen)

Un dato que aunque no es realmente importante, nunca deja de ser curioso :D

Listado de propiedades CSS compatibles con todos los navegadores

2 nov

+ 5

Las propiedades CSS son los frágiles pilares sobre los que se sustentan todos los diseños web. Estos pilares son delgados y generalmente andamos poniendo parches para que el diseño soporte la llegada del inquilino de turno, ya sea el Sr. Firefox o la Srta. Google Chrome, o incluso el veterano Internet Explorer.

Debido a la exigencia de cada uno de los inquilinos, nos vemos obligados a aprender todos los trucos disponibles para hacer que su estancia en nuestra construcción sea lo más cómoda y agradable posible.

A estas alturas, sabemos que estas 10 propiedades CSS son completamente compatibles con todos ellos:

  1. color
  2. direction
  3. font-family
  4. font-size
  5. font-style
  6. font-weight
  7. list-style-position
  8. table-layout
  9. text-indent
  10. word-wrap

Por contra, todas estas hacen sacar lo mejor de nosotros para conseguir que soporten el peso de cada visita:

  1. background
  2. background-attachment
  3. background-color
  4. background-image
  5. background-repeat
  6. background-position
  7. border
  8. border-collapse
  9. border-color
  10. border-style
  11. border-width
  12. clear
  13. cursor
  14. display
  15. float
  16. font
  17. font-variant
  18. height
  19. left
  20. right
  21. bottom
  22. top
  23. letter-spacing
  24. line-height
  25. list-style
  26. list-style-image
  27. list-style-type
  28. margin
  29. overflow
  30. padding
  31. page-break-after
  32. page-break-before
  33. position
  34. text-align
  35. text-decoration
  36. text-transform
  37. vertical-align
  38. visibility
  39. white-space
  40. width
  41. word-spacing
  42. z-index

Esperemos que poco a poco vayamos viendo menguar esta lista para hacernos la vida más fácil.

Protocolo relativo de URLs

28 oct

+ 14

Paul Irish publica un interesante truco para facilitarnos el trabajo con las URL’s de nuestras aplicaciones web.

<img src="//domain.com/img/logo.png">

De esta forma, el navegador selecciona por nosotros el protocolo que debe usar, que en todo caso será el mismo en el que estemos corriendo la aplicación. Ideal para los casos en los que disponemos de secciones en HTTPS y otras en HTTP, para evitar el molesto mensaje de error.

Al igual que si estamos usando el protocolo file:// desde nuestra máquina, tambien usará esa ruta de ficheros dentro de nuestro disco duro para intentar cargar la la URL indicada.

En los ficheros CSS tambien podemos usar esta técnica, aunque en Internet Explorer 7 y 8 provoca un fallo que hace que el fichero se descargue dos veces (¬¬).

.omgomg { background: url(//websbestgifs.net/kittyonadolphin.gif); }

Técnicamente se llama “Relative Reference” y está especificada en el RFC 3986.

ART, librería gráfica de la gente de MooTools

13 oct

+ 1

Ayer vimos que MooTools se actualizaba hasta la versión 1.3. David Walsh habla sobre ella y además nos deja los dientes largos con ART. Un proyecto independiente, al igual que Slick, que podrá agregarse fácilmente a MooTools, y que está pensado para facilitar la tarea de trabajar con gráficos vectoriales desde Javascript.

El uso de <canvas /> y VML permitirá crear elementos gráficos como estos:

Captura de pantalla 2010-10-12 a las 23.57.08
(Ver Imagen)

Habrá que estar pendiente, esto tiene muy buena pinta.

Ver algunos ejemplos

Selectivizr, añade pseudo-clases y atributos CSS3 a IE6-8

6 sep

+ 8

:Select[ivizr] es una librería javascript que nos permite llevar las pseudo-clases y atributos de CSS3 a navegador que no los soportan como Internet Explorer.

Instalación

Pensado para funcionar con las principales librerías Javascript existentes, su uso es muy sencillo.


<script type="text/javascript" src="[JS library]"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
  <script type="text/javascript" src="selectivizr.js"></script>
  <noscript><link rel="stylesheet" href="[fallback css]" /></noscript>
<![endif]-->

Una alternativa interesante para los que no estén satisfechos con ie-css3.js.

elRTE, editor WYSIWYG open-source a tener en cuenta

30 ago

+ 10

elRTE es un editor WYSIWYG open source desarrollado con jQuery UI que nos permite disponer de un editor enriquecido muy fácil de implementar en nuestros sitios web.

screenshot0
(Ver Imagen)

Características:

  • Uso avanzado de estilos CSS
    • Usado para identaciones
    • Usado para controlar bordes
    • En la mayoría de propiedades de los elementos usados.
  • Ligero, rápifo y fácil de integrar
  • Apariencia del interfaz configurable mediante CSS
  • i18n. Fácilmente idiomatizable.
  • Flexible para extender mediante plugins.

Existen muchos editores similares, y muchos respetan la accesibilidad web este es otro más a tener en cuenta.

Arrastra ficheros de tu web al escritorio gracias a Javascript

27 ago

+ 5

gMail ha añadido la funcionalidad de permitir arrastrar ficheros de nuestras páginas web directamente al escritorio. Esta funcionalidad, inversa a la que hace unos meses publicaron y que puso en relieve el apoyo de Google al HTML5 y las nuevas funcionalidades javascript. La gente de CSS Ninja ha publicado un artículo explicando como conseguirlo nosotros mismos en nuestras páginas web.

HTML

<a href="Eadui.ttf" id="dragout" draggable="true" data-downloadurl="
             application/octet-stream
             :Eadui.ttf
             :http://thecssninja.com/gmail_dragout/Eadui.ttf">Font file</a> 

Como vemos el elemento <a /> se encarga de informar de que el elemento es draggable y además informamos el atributo data- para informar los datos necesarios para la descarga.

Javascript


var files = document.getElementById("dragout"), fileDetail;

if(typeof file.dataset === "undefined") {
	fileDetail = file.getAttribute("data-downloadurl");
} else {
	fileDetail = file.dataset.downloadurl;
}

file.addEventListener("dragstart",function(evt){
	evt.dataTransfer.setData("DownloadURL",fileDetail);
},false);

Si el navegador soporta los atributos data- cogeremos los datos necesarios informados en el HTML anterior, para posteriormente añadirlo al evento dragstart y simular la descarga del fichero con los datos anteriores. Solo apto para navegadores adaptados a las nuevas funcionalidades HTML5. Fácil, simple y potente :D

Favicons dinámicos con canvas

26 ago

+ 4

El cambio de favicon de Google Calendar ha hecho que Danny Hope se pregunte si se podría hacer que el favicon mostrara la fecha actual en lugar del 31 que está mostrando ahora mismo.

Remy Sharp a modo de investigación personal se propuso conseguirlo, y tras unas cuantas pruebas logró generar un favicon dinámico usando <canvas /> y javascript para mostrar la fecha actual en lugar del estático 31.

dynamic-favicon
(Ver Imagen)

Para ello, limpió el icono de Google dejando espacio para que los números cambien en función del día, unas pocas líneas de código y voala!

¿Como?

Como ya conocemos, la llamada para informar un favicon en cualquier página web:

<link id="favicon" rel="icon" type="image/png" href="ical-icon-complete.png" />

Marco en negrita el ID que ha indicado para localizar el elemento más fácilmente en el código Javascript.

(function () {
var canvas = document.createElement('canvas'),
    ctx,
    img = document.createElement('img'),
    link = document.getElementById('favicon').cloneNode(true),
    day = (new Date).getDate() + '';

if (canvas.getContext) {
  canvas.height = canvas.width = 16; // set the size
  ctx = canvas.getContext('2d');
  img.onload = function () { // once the image has loaded
    ctx.drawImage(this, 0, 0);
    ctx.font = 'bold 10px "helvetica", sans-serif';
    ctx.fillStyle = '#F0EEDD';
    if (day.length == 1) day = '0' + day;
    ctx.fillText(day, 2, 12);
    link.href = canvas.toDataURL('image/png');
    document.body.appendChild(link);
  };
  img.src = 'ical-icon.png';
}

})();

El código javascript, como podemos ver se encarga de generar un nuevo elemento <img /> en el que alojaremos la información creada con el elemento <canvas /> con el día incrustado dentro. Simplemente genial.

Internet Explorer 9 por el buen camino

24 jun

+ 32

Si hay una actualización de un navegador que espero con ansia es la de Internet Explorer 9. Opera, Chrome y Firefox son navegadores que nos tienen acostumbrados a las nuevas tecnologías y cada versión nos deleitan con alguna de ellas, pero Internet Explorer no nos sorprende con mejoras de este nivel desde hacer realmente mucho tiempo (pero muuuucho :D).

En esta nueva versión, no solo quieren hacer una lavado de imagen a su navegador, quieren pegar con el puño en la mesa de los navegadores web para decir, “Estamos aquí para quedarnos… y nos quedaremos haciendo las cosas bien.”. Ya tenemos que olvidarnos de Microsoft aquella empresa que demonizabamos por ser la dueña y señora de todo lo que estaba en contacto con un ordenador, ahora debemos aprender a perdonar y aceptar que forman parte de esta guerra y que mientras ellos se peleen, nosotros saldremos beneficiados con las mejoras y novedades que vayan incorporando.

Internet Explorer 6, ha hecho mucho daño a Internet, pero esta nueva versión viene cogiendo carrerilla para corregir los errores del pasado.

Leyendo estos primeros párrafos, habrás pensado que Microsoft me tiene en plantilla o me ha pagado una sustancial suma de dinero para que hable bien de su navegador, y aunque no puedo negar que no me importaría llenarme los bolsillos con dinero de Microsoft, esta vez lo digo por que realmente lo creo. Esta nueva versión promete y mucho.

Internet Explorer 9

Ya hemos hablado otras veces de IE9, y hemos ido viendo algunas de las nuevas funcionalidades que van a estar disponibles en él. Pero poco a poco van saliendo datos que muestran la mejoría y el buen camino que están siguiendo.

Javascript

Dean_PPB3_1
(Ver Imagen)

El rendimiento del render de Javascript ha sido optimizado en relación a la versión beta preview anterior, llegando a tiempos de respuesta (en tests) similares a los obtenidos por Safari5 y muy cerca del fabuloso V8 de Google Chrome y lo que es más soprendente, bastante inferiores a los obtenidos por la próxima versión de Firefox (la 3.7).

Además, la versión de javascript incluye las mejoras de la última revisión de ECMA-262.

Aceleración por hardware del elemento <canvas />

Dean_PPB3_3
(Ver Imagen)

En este ejemplo podemos ver como funciona la aceleración por hardware del elemento <canvas />. Algo que ya prometieron para la beta anterior y que por falta de testeo no llegaron a incluir.

Video, audio y WOFF

Aprovechando la aceleración por hardware se ha mejorado el elemento <video /> para reproducir mediante hardware los vídeos, lo que hace que estos vayan claramente más fluidos.Por otro lado y junto a Mozilla y Opera han estado trabajando sobre el Web Open Font Format (WOFF) sobre CSS3 para incluir este estandar de fuentes para nuestras páginas web.

Acid3

Dean_PPB3_9
(Ver Imagen)

Aunque el resultado no es el que muchos sibaritas de la web estan deseando ver, hay que destacar la mejoría frente al 68/100 del preview#2 (la versión anterior) que nos incita a pensar que la versión final puede sorprendernos con el mismo resultado que los demás navegadores.

Conclusión

Personalmente me gusta lo que estoy viendo sobre Internet Explorer 9, están haciendo las cosas bien. Y como dicen “Más vale tarde que nunca”. Esperemos que no se desvien del camino que están marcando. Me gusta.

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