|

CSSViewer: visor de CSS para Firefox

ByLuis

cssviewer.jpgCSSViewer es una extensión para Firefox que nos permite visualizar en una ventana los estilos que posee un elemento de la página web que estamos viendo. Muy útil para cuando desarrollamos o para cuando visitamos páginas que nos gustan y queremos destripar los estilos sin necesidad de meternos en el código fuente.

Un par de fallos sí que le veo:

  • los iframes los trata como objecto, cuando podría profundizar en ellos, y los frames no sabe tratarlos, por ejemplo en la página de GMail, supongo que será porque tira del elemento body, el cual no existe en la página que contiene los frames (claro que esto es una suposición),
  • el segundo fallo es que la ventana que muestra los estilos es demasiado Web 2.0, algo más anticuado hubiera quedado mejor, es demasiado grande y se sale de la pantalla y no sigue bien al ratón, por lo que a veces el ratón se posiciona encima de la ventana y obtiene los estilos de la ventana que muestra los estilos (un poco recursivo, ¿no?).

Salvo estas cosillas, una extensión que ya tengo instalada y que creo que me será muy útil.

CSSViewer

Vía / Bartelme Design

Similar Posts

Firefox 2 beta 1, disponible

ByLuis

firefox.pngFirefox 2 está cada vez más cerca, si eres de los que no puede esperar, puedes empezar con la beta 1, la cual ya está disponible para la descarga.
Aquellos que quieran tener una versión algo estable, que esperen, porque la mayoría de las extensiones no funcionan, aunque eso sí, lo puedes instalar en otro directorio.
Vía / Denken über

Bordes irregulares con CSS3 y webkit

ByLuis

Jugando un poco con las CSS3 y Webkit (en mi caso Chrome) me ha dado por crear bordes irregulares. Lo he hecho mediante -webkit-border-top-left-radius y similares.
El concepto es sencillo, hay dos colores: el de fondo (no puede ser transparente) y el del borde, en las curvas concavas se usan los colores tal cual, y en las curvas convexas se usan al revés (el color borde se simula usando el color de fondo, y el fondo con el borde).
bordeslocos.png
La verdad es que lo he hecho rápido y me he liado bastante y está muy a ojo, pero espero estudiarlo un poco mejor cómo va e incluso hacer un plugin para jquery.
Ejemplo

| |

Recursos para crear bordes redondeados

ByLuis

nifty.pngPara aquellos que quieran usar bordes redondeados y no se vean capaces de hacerlo, pueden usar varias herramientas.

Una de ellas, es Nifty Corners Cube. Sólo se necesita importar un script, importar una hoja de estilos y realizar una llamada Javascript.

Otra opción, quizá más sencilla y que nos gusta especialmente, es el generador de cajas de bordes redondeados de los catalanes de Neurotic Web. Solo tienes que elegir los colores y te genera automáticamente el código CSS y XHTML. Después subes las imágenes a tu servidor cuidando que la ruta del código de las imágenes en la CSS coincida y listo.

Y por último, Spiffy Corners, el más reciente en aparecer. Otro generador que te lo da todo con la novedad de que no incluye javascript ni imágenes para los bordes redondeados.

Para conocer otras opciones, un post a estas alturas ya muy leído pero que quizá no conozcas: CSS Rounded Corners ‘Roundup’.

| |

Elemento CANVAS en HTML

ByLuis

CANVAS es un elemento no estándar que permite dibujar gráficos directamente sobre el HTML. Inicialmente lo implementó Apple para Safari, pero ahora es WHATWG quien se encarga de su estandarización.

Al no ser un estándar, se han levantado voces en contra de ello, sobre todo existiendo el SVG que realizaría la misma función. La cuestión sobre cual es más correcto, si el SVG o CANVAS, es algo de lo que ya se ha tratado y aunque en ambos casos se puede hacer lo mismo, parece que el SVG gana por ser un estándar y sobre todo cuando se quiere que haya interacción con el usuario, aunque CANVAS sea más útil a la hora de dibujar.

Más información

Ejemplos

|

Tres grandes tutoriales sobre HTML5

ByLuis

HTML5 Rocks ha publicado 3 tutoriales muy interesantes sobre desarrollo de HTML5.

El primero de ellos trata sobre cómo mejorar el rendimiento de las aplicaciones en HTML5, a parte de alguna que es puramente Javascript y no HTML5 (como guardar en una variable un elemento DOM y no buscarlo cada vez que vayamos usarlo), la mayoría de ellas trata sobre el uso de transiciones CSS3 por parte del navegador y no mediante el uso de Javascript, ya que así sería el navegador el que se encargue de ello y pueda optimizar su ejecución, por ejemplo:

  var elem = evt.target;
  // Modernizr es una librería que nos indica que elementos CSS3 y HTML5 dispone el navegador
  if (Modernizr.csstransforms && Modernizr.csstransitions) {
    // Mediante CSS3
    elem.style.transition = 'all 3s ease-out';
    elem.style.transform = 'translateX(600px)';
  } else {
    // Mediante jQuery
    jQuery(elem).animate({ 'left': '600px'}, 3000);
  }

El siguiente tutorial nos indica cómo meterle efectos CSS3 a nuestros textos, y la verdad es que alguno está muy currado. Claro que yo no soy muy partidario de usarlos según que tipo de publicación (se puede abusar mucho de ello), pero la verdad es que nos puede venir muy bien.

Y por último consejos HTML5 y CSS para convertir nuestra web a formato adaptado para móviles. Algunos trucos de rencimiento como el uso del almacenamiento local y algo bastante interesante cómo indicar la orientación o el viewport de la página:

Improving the Performance of your HTML5 App

Typographic effects in canvas

“Mobifying” Your HTML5 Site

Fireclipese: Debug de Firefox en Eclipse

ByLuis

fireclipse.pngFireclipse es un proyecto opensource que permite depurar el código javascript ejecutado en Firefox.

Las características que nos ofrece Fireclipse son las siguientes:

  • Envía los mensajes de error de la consola de Firefox a la consola de Eclipse.
  • Apunta el editor de Eclipse en la línea que Firefox ha marcado como errónea.
  • Llama a la función dump() en la consola de Eclipse.
  • Añade un botón de Eclipse en la extensión Firebug.
  • La extensión de Firebug permite: depurar el código eval(), depurar manejadores de eventos, enviar mensajes de error a Eclipse y marcar las líneas ejecutables.

fireclipse2.png

Una ayuda para aquellos que desarrollen con Eclipse y Firofox.

Fireclipse

Vía / Ajaxian