Posts guardados en "css":

El buen border: 1px solid #000;

¿Han trabajado con CSS? Pues han de saber lo frustrante que es que un elemento no responda como debería: que no cambie de color, de posición, de tipo de letra, etc, etc. Por mi parte, cada vez que quiero modificar algo de la apariencia del blog, me doy un tiro con mi style.css y este twitt lo comprueba.

Pero el caso es que hace un buen rato descubrí que si le pones un borde negro a los elementos problemáticos pueden visualizar mucho mejor el problema. Así puedes ver que tamaño tiene, donde está y hasta donde llega cualquier elemento.

border 1px

Cosa que es difícil de hacer cuando no tienes esa propiedad, y más cuando tienes un desastre de divs, spans y demás fregaderas regadas por todas partes.

no border

Ah, claro, la propiedad es:

border:1px solid #000;

O sea: borde de 1 pixel, contínuo y color negro

Cómo comprimir el CSS

Una web que carga rápido es una web que se preocupa por sus usuarios, y si tu quieres dar esa impresión, entonces debes asegurarte de que los archivos de tu web sean ligeros.

Ya les hablé sobre cómo reducir las imágenes usando Gimp; ahora les comento sobre una interesante herramienta online para comprimir el CSS de nuestro blog o web. Se llama YUI Compressor y además de CSS comprime también Javascript.

Al comprimir nuestro CSS, le quitamos todos los espacios y saltos de línea innecesarios. Queda más o menos así:

css comprimido

La idea es tener nuestro CSS normal guardado para poderlo editar fácilmente y el comprimido tenerlo subido en el blog.

Reflexión sobre PHP

php logo elefante
Todos los blogs que corren con WordPress están hechos con PHP, bueno, más bien con una combinación de HTML, CSS y PHP. Todos ellos son lenguajes de programación: el HTML es la estructura, el CSS es lo visual y el PHP es lo que diferencía a un blog de una página hecha con FrontPage o cualquier otro de esos programas ‘crea-tu-web-fácil’.

Cuando tenía mi blog en Blogger, aprendí muchísimo sobre HTML y sobre CSS. Sin embargo Blogger no usa PHP como motor de sus blogs, usa un lenguaje creado por ellos mismos, el cual está bastante limitado (muy apenas tiene ‘if’).

Así que cuando migré a WordPress, esto del PHP era todo un misterio para mí. Pero dije “para tratar de entender todo este reburujo de <?php?>’s voy a tener que empezar desde cero” así que siguiendo un grandioso tutorial me puse y cree el theme que están viendo en estos momentos. Sin embargo, solo vi a PHP como una manera de traspasar la información de la base de datos a el blog con funciones que ya trae WordPress por defecto.

Hasta hace poco que busqué y encontré las Nociones Básicas de PHP fue que descubrí que PHP y C++ son parecidísimos (al menos en lo básico), y digamos que estoy bastante familiarizado con C++. Ahora estoy bastante contento de poder aplicar lo que aprendí en las últimos semestres de la prepa aquí en mi blog :D

Usando <abbr> para post más entendibles

La etiqueta <abbr> viene de abbreviation que significa abreviación y sirve para mostrar el significado de las abreviaciones que usemos en nuestros posts. Ejemplo:

[...] escuchando a SOAD.

Como ven, la palabra SOAD está subrayada con puntos y al pasarle el ratón por encima muestra un ‘Tooltip’ con su significado.

Para lograr eso, yo usé este código:

<abbr title=”System of a Down”>SOAD</abbr>

Bastante simple ¿no?

Aunque esta etiqueta está hecha para abreviaciones y siglas, podemos aprovecharla para otras palabras que sepamos que algunos no van a entender.

  • Me duelen las canillas.
  • Que chido.
  • Traigo una hueva que hasta parecen dos.
  • La dí una patada en el huesito sabroso.

La apariencia estándar es el subrayado punteado del mismo color que la letra y yo les recomiendo que lo dejen así para que no se confunda con un enlace, pero si quieren modificar su apariencia pueden agregar estas líneas de CSS:

abbr {
text-decoration: none;
border-bottom: 1px dotted #ff8800;
}

Ahora el subrayado sería color naranja (jeje). Échenle imaginación e imprímanle su propio estilo.