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

Si quieres agregar Twitter a tu blog, puedes encontrar multitud de plugins que te permitirán hacerlo facilmente, sin embargo lo que mucha gente desconoce es que es igualmente sencillo (si no más) y bastante más rápido hacerlo mediante código HTML.

El código en cuestión nos lo facilitan en la propia web de Twitter.

La parte de código que se muestra a continuación debemos colocarla en el lugar de nuestro blog/web donde deseamos que aparezcan nuestros tuiteos.

1
2
3
4

<div id="twitter_div">
<h2 class="twitter-title">Twitter</h2>
<ul id="twitter_update_list"></ul>
</div>

Con esto, estamos creando una capa (div) que contiene una cabecera (h2) y una lista con nuestros tuiteos (ul), por lo que podremos personalizar fácilmente su apariencia mediante CSS.

Pero el código anterior no funcionara correctamente sin incluir esta otra parte:

1
2

<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/USER.json?callback=twitterCallback2&count=X"></script>

Esta última parte es un javascript que recoge los datos de nuestro perfil en Twitter y los coloca en la lista de antes (ul). Aquí debemos configurar 2 parámetros:

1. USER: nuestro nombre de usuario en Twitter
2. count=X: sustituyendo la X por el número de actualizaciones que queramos mostrar

Por último añadir que esta parte del código es recomendable ponerla al final del todo de nuestra página, justo antes de la etiqueta < /body > para evitar retrasar el tiempo de carga de nuestra web y posibles errores si Twitter se encuentra caído.

Ya de paso aprovecho y os dejo el Twitter de David Barredo (el mío) para todo aquel que le interese

Por cierto… ¿Twitter se cae? jajajaja

Desde hace unos días me encuentro totalmente ocupado en varios proyectos, entre ellos el rediseño de mi web.

Estan siendo batallas días de dura pelea con el CSS, optimización de carga y por supuesto con mi querido IE. Es por ello que hay secciones que aún no tienen ningún contenido, algún enlace roto y lo más importante es que estoy teniendo menos tiempo de publicar entradas.

En cuanto estén todos los detalles pulidos, prometo dedicar una entrada a todos los datos relacionados con el nuevo diseño.

Lista de detalles que pulir:

• Completar barra lateral
• Arreglar enlaces rotos
• Formulario de contacto
• Pie del blog
• Páginas de la cabecera
• Publicar mi primer freebie
• Decidir fuentes utilizadas
• Diseño del portafolio

Además, gracias a todo el curro que me estoy dando estos días, tengo bastantes entradas preparadas y algún regalo que otro

Hace tiempo, comente una web que permitía enviar un email a tu yo futuro. Hoy he encontrado Time Machiner, otra página web que “almacenara” nuestro email, hasta que llegue la fecha que hayamos elegido para que este sea enviado.