Guardado en: Web el 8 de febrero del 2010
Etiquetas: css
¿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.
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.
Ah, claro, la propiedad es:
border:1px solid #000;
O sea: borde de 1 pixel, contínuo y color negro
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í:
La idea es tener nuestro CSS normal guardado para poderlo editar fácilmente y el comprimido tenerlo subido en el blog.
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
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.
Por si aún no lo has comprendido muy bien:
El HTML es únicamente la estructura, las partes; mientras que el CSS es el estilo, es decir, la apariencia, lo visual. Por cierto, adentro de la etiqueta <style> va el código CSS, al menos en las plantillas para Blogger.
