Blog and Web

¿Quien no ha tenido problemas al momento de escoger un tipo de letra? Bien, pues las siguientes son utilidades en linea donde puedes comparar entre varias tipografías a partir de las que tienes instaladas en tu PC.

1. Sitio: CSStype



Descripción: Puedes comparar entre 3 fuentes distintas al mismo tiempo, modificar sus parámetros de tamaño, color, fondo, etc. y comparar con tu propio texto.

2. Sitio: Typetester



Descripción: Sólo trabajas con 1 fuente y puedes modificar sus parámetros de tamaño, color, fondo, etc. y comparar con tu propio texto. Cuando tengas la fuente y sus parámetros definidos, puedes generar una clase CSS con ellos.

3. Sitio: FontTester



Descripción: Puedes trabajar con 3 fuentes simultáneamente, variar parámetros y texto, ver el css resultante y cuenta con un mapa de caracteres especiales.

Los pequeños banners “antipixel” son elementos presentes en la gran mayoria de blogs y web y con el auge del diseño Web 2.0, no podría caer mejor una web como WebBadges con decenas de este tipo de banners. Clasificados en botones para estandares web, sistemas operativos, blogs y sistemas de publicación, servicios web, editores, softwares y lenguajes de programación.

Sí estas buscando un boton antipixel seguramente lo encontraras aquí.

Sitio: http://252523.net/buttons/

Todas las páginas web o blog hacemos uso de otras y las enlazamos por medio de un link, bien, pues una manera de direfenciar a estos links que van a páginas web externas es acompañarlos con un pequeño icono, como ya hace wikipedia, por medio de CSS lo que hace un poco más controlada la navegación de tus visitantes.

Una forma de hacerlo es creando una clase e incluirla en todos nuestros links externos como lo explica maxdesign, pero demanda la correción de todos los links que ya hemos publicado y inclusión de dicha clase en todos links futuros, lo que hace dificil de implementar.

Otra forma es haciendo uso de CSS 3, con el que ya trabajan IE7, Firefox y Safari y que tiene la ventaja de aplicarse automaticamente a todos los links externos de nuestra web y te explicamos a continuación:

1. En tu archivo CSS o la sección de tu página destinada a los estilos coloca la siguiente clase:

   a[href^="http"] {
   background: transparent url(http://bp2.blogger.com/_Zuzii37VUO4/RihddRN7pbI/AAAAAAAAAls/aMdsiWrikMo/s1600/link_go.png) no-repeat center right;
   padding-right: 18px;
   }

   Con esto indicamos la colocación de un icono a todos los links de nuestra web, haciendo uso de un icono de famfamfam.

2. Como se indico que todos los links tendran un icono, ahora habra que eliminar el icono a los vinculos internos y a las imagenes con la siguiente clase:

   a img[href^="http"],
   a[href^="http://www.tupagina.com"],
   a[href^="http://tupagina.com/"] {
   background-image: none;
   padding-right: 0;
   }

   Donde tienes que remplezar “http://www.tupagina.com” con la dirección de tu web (con www) y “http://tupagina.com/” (sin www) para tener todos los enlaces externos indicados.

Me preguntaban como poner un icono al inicio de cada etiqueta en la lista destinada para estas. Bien, la solucción la tiene CSS y funciona para todo tipo de listas.

1. Entra a la pestaña “Plantilla” o también llamada “Diseño” desde el escritorio y después a la opción “Edición de HTML”.



2. Las listas de etiquetas en blogger estan definidas con la clase “Label1″ (sí se trata de la primera, la segunda será “Label2″ y asi sucesivamente) asi que modificaremos las propiedades de estas listas. Buscamos el siguiente código:

   ]]></b:skin>

3. Y justo antes colocamos lo siguiente:

   #Label1 li {
   list-style:none;
   padding-left: 18px;
   background: transparent url(http://bp1.blogger.com/_Zuzii37VUO4/Rigu3BN7pYI/AAAAAAAAAlU/nUrCXI295F4/s1600/tag_green.png) no-repeat center left;
   }

   Donde el padding esta definido por el tamaño de la imagen, en este caso la imagen es de 16×16px y usamos un padding de 18px para que tenga dos de distancia. En el background (fondo) la url corresponde a la de tu imagen, es este caso es un icono de famfamfam.

   Y con esto, automaticamente aparecera ese icono en todas tus etiquetas.

Este tutorial te muestra como colorear un comic hecho a mano y en blanco y negro con Photoshop, fue creado por Ariel Olivetti diseñador de Marvel.
Continuar leyendo →