Uno de los elementos mas importantes a la hora de llevar a cabo un diseño web es la elección de las tipografías a usar. No es lo mismo una web en la que tan solo se use una fuente para todo el texto, que esa misma web con Verdana para los titulares, Helvetica/Arial para el contenido…

Typetester es una herramienta online con la que poder ir probando diferentes tipografías (hasta 3 a la vez) y ver el resultado que obtendremos.

Entre las opciones con las que podremos configurar la apariencia del texto estan:

• Elegir el texto a mostrar
• Espaciado entre letras, palabras y lineas
• Tamaño
• Color de la fuente y del fondo

Además, al elegir la fuente que queremos probar, vemos que estan divididas en 2 grupos, el seguro y las que vienen con Windows por defecto.

The Password Meter es una herramienta online que permite comprobar la seguridad de las diferentes contraseñas que uses.

Para probar la nuestra, tan solo tenemos que escribirla y a medida que escribimos o la modificamos podemos ver la puntuación obtenida. Es bastante interesante ver como se incrementa la seguridad de la contraseña con tan solo introducir minúsculas y mayúsculas, así como ver que las contraseñas numéricas no son capaces de alcanzar una buena puntuación.

En la imagen la puntuación obtenida por una contraseña a menudo utilizada por muchos: 123456.

Imagina que has encontrado un artículo muy interesante y quieres compartirlo con los lectores de tu blog. Normalmente, harías una pequeña introducción y pondrías un enlace al artículo en cuestión, pero… ¿y si quieres destacar partes del contenido del artículo?

Pues bien, si introducimos la url del artículo que queremos compartir con nuestros lectores en: Awesome Highlighter, aparecerá en pantalla la página introducida y con nuestro ratón podremos ir subrayando las partes del texto que queramos destacar (se pueden usar 4 colores diferentes). Si queremos también podemos añadir notas tipo post-it.

Una vez hemos terminado presionando el botón amarillo Done obtendremos el enlace que permitirá a cualquiera que lo visite ver el texto que hayamos destacado y/o las notas que hayamos dejado.

Puede valer como ejemplo la portada del blog subrayada

Stumbleuponando (bonito palabro me acabo de inventar ) me he encontrado un interesante editor online de HTML con el que poder ir viendo al instante las modificaciones que realicemos en nuestro código.

La página esta dividida en 2 frames en el superior es en el que vas escribiendo el código de tu página, y el resultado va apareciendo automáticamente en el frame inferior. Pero lo que le hace para mi realmente interesante es la posibilidad de definir también las CSS de cada uno de los elementos (capas, párrafos, listas, …)

Para los vaguetes, les dejo un código con varios ejemplos de HTML y con propiedades CSS que copiar y pegar para probar el editor

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<style type="text/css">
  h1 {
  text-decoration:underline;
  color: gold;
  }
  ul {
  border: 3px dashed #333;
  background: #666;
  color: white;
  }
</style>
<h1>Titulo de prueba</h1>
<p>Lorem ipsum dolor sit amet...</p>
<ul>
<li>uno</li>
<li>dos</li>
<li>tres</li>
</ul>
<del>texto tachado</del>
<blockquote>una cita: Lorem ipsum</blockquote>

No solo he estado modificando el aspecto de este blog (todavía me quedan algunos detalles…), también he realizado un nuevo diseño para mi blog de fotografía.

En un principio había pensado en modificar el archi-conocido tema CSS-Gallery, pero finalmente decidí realizar el mio propio:

Esta realizado con XHTML y CSS válidos, usando WordPress como CMS y MooTools para los efectos añadidos. El plugin de valoración de fotografías es el WP-PostRatings.

Como podéis ver, la estructura es muy similar a CSS-Gallery, en mi caso pensé que el color negro en el fondo ayudaría a destacar mejor las fotografías publicadas.

El menú de la cabecera tan solo permite acceder a las 4 categorías principales y realizar búsquedas, en el menú lateral aparecerán las diferentes categorías según se vayan creando. También incluí una opción de valorar las fotos (al igual que en el tema que use como inspiración).

Cada fotografía publicada aparece en un recuadro con el título, la valoración y una esquina levantada cuyo color es el de la categoría a la que pertenece. Haciendo clic sobre la imagen, esta se abre a mayor tamaño en un lightbox.

Haciendo clic en el título se puede acceder a la entrada en concreto de la fotografía, en la que aparecen mas datos sobre la toma (ISO, velocidad, etc…) ,aunque todavía no los he añadido. La imagen aparece a un tamaño un poco mayor y con un leve reflejo que no se si dejar o no . Al hacer clic sobre ella también se abre a mayor tamaño en un lightbox.

¿Opiniones, fallos, mejoras…?

Ah! por cierto, quiero aprovechar y desde aquí dar las gracias a 2 sitios que me han servido de ayuda a la hora de llevar a cabo este tema: aNieto2K y AyudaWordPress