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>

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

Si quieres añadir ejemplos de código en tu blog, lo más limpio es usar un plugin, ya que las etiquetas code, pre y demás no siempre suelen funcionar correctamente.

En este blog, sabiendo la dirección que va a tomar, he optado por el plugin WP-Sintax, el cual con un una etiqueta pre te permite añadir sin problemas todas las lineas de código que desees y en casi cualquier lenguaje.

Traducción libre de un articulo publicado por CSS Globe con 8 soluciones muy sencillas a problemas que nos suelen dar muchos dolores de cabeza.

Las mejores soluciones son muchas veces las más simples. Una lista de 8 consejos (o trucos) con una sola propiedad CSS.

• Centrado vertical con line-height:

  Cuando tenemos un objeto contenedor con una altura fija, podemos usar la propiedad line-height para centrar verticalmente el contenido. Se puede comprobar en esta demo.

  line-height: 24px;

• Prevenir que el contenido sobredimensionado en objetos flotantes con un tamaño fijo rompa nuestra plantilla:

  Cuando el contenido (p.ej; una imagen panorámica) se coloca en un contenedor flotante con un tamaño fijo, es posible que descuadre nuestra plantilla. Para evitar esto, se puede usar este truco que ocultara parte del contenido pero mantendrá nuestra plantilla intacta.

  #main{
overflow:hidden;
}

• Evitar saltos de linea en los enlaces:
  

  a{
white-space:nowrap;
}

• Mostrar siempre el scroll vertical en Firefox:

  Firefox esconde por defecto el scroll vertical si la página no lo necesita. El “problema” es que si tienes páginas que precisen el scroll y otras que no, al pasar de unas a otras, nuestro diseño sufrirá un pequeño salto hacia la izquierda.

  html{
overflow:-moz-scrollbars-vertical;
}

• Central elementos horizontalmente:

  Con esta linea sera suficiente en todos los navegadores modernos para centrar horizontalmente cualquier elemento.

  margin:0 auto;

• Ocultar el scroll vertical de los textarea en IE:

  En IE se muestra por defecto el scroll vertical en los textarea. Para ocultarlos siempre que no sean necesarios con esta sola propiedad será suficiente.

  textarea{
overflow:auto;
}

• Forzar saltos de página al imprimir un documento:

  Con esta linea de código, podemos controla los sitios donde deseamos que haya un salto de página al imprimir nuestra (valga la redundancia) página.

  h2{
page-break-before:always;
}

• Ocultar los bordes de los enlaces activos:
  

  a:active, a:focus{
outline:none;
}

Hay algunas que tienen algún ligero inconveniente, como por ejemplo la última, ya que el quitar esos bordes va en contra de la accesibilidad. Eso si, la mayoría de las veces, cualquiera de estos sencillos trucos nos sacará de más de un apuro.

Espero que os sean de utilidad .

¿Estas harto de pagar (o parchear ) licencias por programas? La mayoría de la gente no sabe que para cualquier programa de pago, hay varios gratuitos que realizan las mismas tareas y muchas veces de manera mas eficaz. Unos ejemplos (gratuitos en negrita):

• Microsoft Oficce (Word, Excel, … ) - Open Office.
• Outlook - Thunderbird.
• Photshop - Gimp.
• Reproductor Windows Media - VLC.
• Cute FTP - Filezilla.
• Y así un largo etcétera…

Pero, es que además, todos los programas anteriores tienen otra característica en común, y es que son OpenSource.

¿Y que es eso de OpenSource? Pues eso, significa que son programas cuyo código (con lo que están hechos) está a disposición de cualquiera que lo desee, lo cual es una grandísima ventaja, ya que de esta manera cientos de miles de personas están mejorando y corrigiendo los programas .

Puedes encontrar una lista categorizada de estos programas en Open Source Windows.