Dave Ruiz blog

Mientras llega o no la revisión de CSS Level3 ¿Como quedarán mis páginas favoritas con bordes redondeados?

javascript:function a(c) { j=document.getElementsByTagName("*"); for (i in j) { if(j[i].style) j[i].style.WebkitBorderRadius=j[i].style.MozBorderRadius=c+"px"; } };a(15)

Y un ejemplo de cómo queda:

Qué cuco queda youtube

Un nuevo entorno 3D creado para Zomba C&P.

Lo siento por las personas que me han pedido un tutorial con los pasos para realizarlo. Por ahora, son muchas las pruebas que he tenido que hacer para conseguir este resultado, y muchas las correcciones sobre la marcha. Por esta razón, no tengo aún un método “limpio” que poder enseñar. A esto habría que sumarle el poco tiempo disponible (porque estas cosas llevan tiempo).

Sin embargo, no tengo problema en responder preguntas más concretas para aportar un poquito de luz a quien lo necesite

Se trata de un código no intrusivo y accesible que símplemente sustituye el contenido de una selección por una imagen a base de tocar la hoja de estilos.

Para que funcione corréctamente necesitaremos la ayuda de jQuery y, evidentemente, tener instalada la fuente que queremos representar (solo en tu equipo). La técnica consta de los siguientes pasos:

1. Incluir en la cabecera el script en cuestión:

   <script type="text/javascript" src="jquery.js"></script>
   <script type="text/javascript" src="jquery.replacefonts.js"></script>

2. Llamar a la función con el selector que nosotros deseemos. Para este ejemplo tomaremos todos los contenedores con la clase “titulo”:

   <script type="text/javascript"><!--
      $(".titulo").replacefonts();
   --></script>

Ya tenemos el script funcionando, pero nos falta crear las imágenes que contienen los textos. Para ello emplearemos cualquier editor de imágenes sencillo (creo que vale hasta el mismísimo paint) y la función de capturar pantalla del sistema. Continuamos con los siguientes pasos:

3. Abrimos la página que estamos modificando con el explorador, pero añadiéndole al final de la URL lo siguiente: #dev. Esto hará que se muestre un recuadro rojo alrededor de los elementos de la clase “titulo” que no han cargado imagen, facilitando así la tarea de recorte.

   

4. Una vez hechas todas las capturas las guardamos. Por defecto el script va a buscar las imagenes a la carpeta img/titles/ y con extensión .gif. Esto se puede modificar en las primeras lineas del script. Y respecto al nombre que se ha de poner, si el elemento tiene el atríbuto ID lo empleará para generar el nombre, de lo contrario generará un nombre a partir del texto del contenido empleando solo las letras en minúsculas. Por ejemplo:

   HOTEL RESERVATION / Registration Deadline: 31/12/2010

   pasaría a ser:

   hotelreservationregistrationdeadline31122010.gif

Y esto es todo. Ventajas veo al usar este método:

• Si no esta habilitado javascript simplemente te deja el texto con la siguiente fuente disponible.
• La edición de imagenes se limita a capturar y recortar el area señalada en rojo, sin tener que reescribir todos los textos.
• Vemos realmente cómo va a quedar en la página antes de crear la imagen.
• Usando los nombres generados automáticamente, al cambiar el contenido del texto cambia la imagen. Así prevenimos que el texto real no coincida con el de la imagen.

Actualización: Más tarde encuentro este enlace: http://www.disenorama.com/articulos/reemplazo-de-textos-una-comparacion, donde explican varios métodos, pros y contras para realizar esto mismo. Como siempre, es muy difícil innovar en estas cosas.

Actualización: He actualizado el código. Ahora detecta si la fuente está instalada (gracias al código de Lalit) y no hace nada en caso afirmativo. Además, si el elemento a sustituir es un contenedor de enlace <A> para el evento mouseover establece la imagen con el mismo nombre acabado en ‘_hover’, simulando la pseudoclase :hover.

[Descarga: http://lab.daveruiz.net/jquery.replacefonts/jquery.replacefonts.js]

Impresionante el port de Doom 1 que han subido a Newgrounds. El autor ha adaptado y recompilado el código original usando Alchemy (compilador C++ para Flash).

Enlace: http://www.newgrounds.com/portal/view/470460

Cierto es que actualizo poco el blog. Pero para darle algo de vidilla voy a intentar compartir periódicamente los enlaces/anotaciones que voy recopilando de blogs que habitualmente visito, y que considero interesantes, principalmente de temas orientados al desarrollo web.

Ahí va la primera tirada. Algunos post son antiguos, pero igualmente interesantes:

• anieto2K.com – @font-face en Internet Explorer
• unijumpe.net – Bordes redondeados con CSS
• mrdoob.com – Hi-Res stats
• genbeta.com – Rapache 0.5, interfaz gráfico para configurar apache

La técnica es relativamente sencilla: Con la foto de fondo, se construye una estructura muy simple de polígonos, simulando los objetos de la foto más relevantes. Posteriormente, se proyecta la textura de la foto sobre los poligonos, pero desde la posición de una cámara fija (más o menos lo que hace un proyector).

El efecto conseguido, junto con ligeros desplazamientos de la cámara, es una sensación de estar moviéndote por la escena en 3 dimensiones.

Aquí tenéis una prueba rápida del resultado final. La escena se ha montado en Cinema4D en apenas 10 minutos. Posteriormente he programado un pequeño Flash en AS3 usando las librerías Papervision3D v2, aprovechando su capacidad para cargar archivos COLLADA.

Nota: Pincha en la imagen y espera a que cargue. Mueve el ratón para desplazar la cámara.