Webmaster Libre

Desarrollo web con software libre

Buscador

Archivo de Marzo de 2007

BrittePic: “Inaccesibilizando” nuestras imágenes por gusto

Lo veo en Tech Crunch y sigo el eco en Genbeta y no puedo más que decir: “Dios mío, ¿que cerebro pensante ha dado con esta desgraciada idea?”

No me malinterpretéis, me parece una buena idea ofrecer algo de interactividad extra a nuestros usuarios, añadir marcas de agua u opciones a las imágenes no me parece necesariamente una mala idea pero, en ocasiones como esta, la mera ejecución de la idea es un enorme error.

Empecemos por el principio, BrittePic es el nuevo servicio de los chicos de AdBritte, mediante un script Javascript podremos incluir descripciones, logos, publicidad y un menú con opciones adicionales a nuestras imágenes. Para ello tendremos que registrar una cuenta que, adicionalmente, podemos asociar con nuestra cuenta de AdBritte para sacarle unos centimillos a nuestras imágenes.

¿Y qué le veo de malo? Pues bien, fundamentalmente tenemos que utilizar un script al que daremos la URL de nuestra imágen (alojala donde puedas) e insertar unas líneas de javascript en el lugar donde irian nuestras imágenes.


<script>
  britepic_src="http://www.yoursite.com/yourpic.jpg";
  britepic_id="your_unique_britepic_id";
</script>
<script src='http://www.britepic.com/britepic.js'>
</script>

Por tanto ningún navegador que tenga desactivado javascript podrá acceder a las imágenes, salvo claro que hayamos incluido la correspondiente etiqueta noscript con la imágen normal (cosa que dudo que haga demasiada gente).

¿No habría sido mucho mejor utilizar un script que funcionase, por ejemplo, en base a una clase dada a las imágenes?

¿No es mucho pasarse incluir anuncios en cada imágen de un sitio?

30 sitios de una sola página

Ahora que todo tiende a ser un blog y que la mayoría de los blogs tienden tendemos a excedernos posteando, con la premisa de que “el contenido es el rey”, es resfrescante ver una recopilación de sitios web de una sola página que harían palidecer a la mayoría de sitios mucho más grandes.

30 One Page Websites

Definitivamente un ejercicio de creatividad y resumen. Sin duda una opción a considerar para todos esos casos en los que un blog o algo más grande es simplemente demasiado.

Truwex Online: Validando la calidad de tus sitios

Estoy segura de que todos hemos desarrollado una sana dependencia de las herramientas de validación (y si no lo validas todo ¿a qué esperas?). A través de 456 Berea ST descubro una herramienta nueva, venida de Rusia, que nos va a permitir valorar con mayor profundidad nuestro sitio web.

Truwex Online

Con Truwex Online podrás conocer a fondo tu sitio web, incluidos esos javascript que cargan desde otros servidores, como la publicidad.
Además, una de las características más interesantes es que nos permite comprobar los errores directamente sobre el mapa del sitio o sobre el código fuente. De esta manera no sólo sabremos cuales son los errores si no también donde están exactamente (muy práctico para comprobar los puntos que deben ser validados por humanos).

Por otro lado, Truwex también se preocupa de informarnos sobre la privacidad de nuestros sitios y valora la calidad global de nuestro sitio web.

Sin duda una vuelta de tuerca a la validación automática online.

Fade de imágenes al cargar

Si eres de los que no se conforman con mostrar a tus usuarios un gif animado mientras cargan tus imágenes quizá te interese probar una alternativa mucho más espectacular:

Onload image fades without Flash

Basado en un efecto de Flash y creado con Javascript y CSS, degrada sin problemas para usuarios tanto sin javascript como sin css.

Un toque original para esas páginas con muchas imágenes o imágenes de gran tamaño (vale, o ambas)

Stripe Generator: Diagonales para todos

Una de las señas de identidad de la web 2.0 son esos fondos de rayas diagonales (esos que parecen un bastón de caramelo), si no te apetece tener que abrir un programa de edición de gráficos cada vez que quieras crear o editar uno de tus fondos. Stripe Generator te vendrá de perlas.

Stripe Generator

Con Stripe Generator puedes escoger el color de las líneas, el fondo, el grosor y algun detalle más. Tan simple como eso, en unos segundos tendremos lista nuestra imagen de fondo.

Via AJaxian

Enlaces para que encuentres el estilo ideal para tu blog o página web

Querer tener un blog o sitio web, tener ganas de compartir nuestros conocimientos con otros o ser excelentes programadores no nos convierte automágicamente en diseñadores web.
Puede que tengas prisa, que quieras que tu sitio esté listo mañana mismo y no tengas tiempo de desarrollar un diseño completo, puede que no sepas, puede que no quieras…

El caso es que, si no dispones de una plantilla personalizada para tu sitio o necesitas un punto de partida que te facilite y agilice las cosas, internet está llena de recursos. A continuación os dejo una recopilación de enlaces a sitios donde descargar plantillas html y themes para algunos CMS (si os gusta esta entrada la podríamos ampliar con un segundo post sobre otros CMS).

Recordad comprobar el tipo de licencia de cada plantilla en su correspondiente sitio web antes de utilizarla.

Plantillas HTML + CSS

Plantillas en blanco

Listas para que les des estilo tu mismo, plantillas en blanco con diversas estructuras de página. Para que puedas comenzar ahora mismo a diseñar propiamente dicho:

Plantillas Completas:

Listas para usar, sólo tendrás que introducir tu contenido y, si quieres, hacer alguna modificación.

Plantillas para CMS

No todo son páginas estáticas, si buscas plantillas para CMS puedes empezar por estas tres páginas con plantillas para varios CMS:

Plantillas para WordPress

El sistema más popular para crear blogs tiene gran cantidad de páginas exclusivas de las que descargar temas, aquí os dejo unas cuantas.

Plantillas para Joomla
Plantillas para Drupal

Y esto es todo, de momento. Como siempre, si conocéis algún sitio más estaré encantada de añadirlo.
Sigo abierta a la posibilidad de hacer una segunda parte de este artículo con otros CMS, podéis ir dejando sugerencias.

Shadedborder: Un nuevo asalto de bordes redondeados

Desde que empezaron a asomar sus curvas esquinas a internet, los bordes redondeados se han convertido en una constante del diseño “a la 2.0″. Seguro que ya conocíais RUZEE.Borders, uno de tantos scripts javascript con los que conseguir el efecto.

RUZEE.shadedborder es el sustituto del anterior que soluciona unos cuantos problemas (lentitud, incompatibilidad con ciertos navegadores, dificultad…) y trae unas cuantas características más que interesantes:

  • Renderizado “a lo Photoshop” sólo con Javascript, sin necesidad de imágenes externas
  • Bordes redondeados
  • Sombras
  • Efectos de glow
  • Bordes con diferentes grosores
  • Soporte completo para layouts líquidos
  • Soporte para on-hover (salvo para IE6)
  • Deshabilita los bordes que no quieras
  • Cambia los bordes al vuelo
  • Transparencia real, se ve perfecto con cualquier fondo
  • Cross-browser
  • No obtrusivo
  • Ligero
  • Rápido
  • Sin dependencia con ninguna librería

Vía Ajaxian

Seguridad y OpenID: OpenID Phishing

Se ha montado un revuelo impresionante alrededor de OpenID, concebido como un sustituto libre de servicios como Passport de MSN, OpenID nos permite centralizar todas nuestras cuentas de usuario bajo un solo login.

Personalmente, siempre me ha quedado ese punto de recelo: perdido un password perdidos todos… Y según veo en Kriptópolis no es un miedo infundado. Ya tenemos entre nosotros toda una guía para realizar phishing a OpenID, así que ojo avizor…

links for 2007-03-22

Code-Prettify: Resaltado de sintáxis con Javascript para WordPress

Hace un par de semanas hubo que desuscribir este blog del Planet Webdev, Armonth descubrió que mi plugin de resaltado de sintáxis introducia javascript en los feeds y esto impedía al planet actualizarse con normalidad (uso o usaba Coolcode).

Hoy, navegando por del.icio.us me encontre con un interesante script de resaltado de sintáxis que nos trae Google: Google Code Prettify y, como necesitaba uno, me he creado un plugin para WordPress que ahora voy a compartir con vosotros.

Code Prettify 0.5

Descomprimir, subir y activar. Para resaltar vuestro código simplemente tendréis que introducirlo ente etiquetas code o pre con la class “prettyprint”

<code class="prettyprint"> ... </code>

<code class="prettyprint"> ... </code>

Lo mejor de todo es que podemos editar el esquema de color mediante el archivo prettify.css.

Reconoce automáticamente los siguientes lenguajes: C y amigos, Java, Python, Bash, SQL, HTML, XML, CSS, Javascript, y Makefiles. Funciona pasablemente con Ruby, PHP and Awk y algoPerl, pero, a causa de las convenciones para comentar, no funciona en Smalltalk, lenguajes tipo Lisp, o CAML.

Blogalaxia BlogESfera - Directorio de Blogs Hispanos Web Developement Blogs - BlogCatalog Blog Directory