Magnífico editor de fotografías online. Podemos abrir el editor con entorno de Photoshop o bien modificar una imagen que tengamos en nuestro ordenador aplicándole efectos y marcos predefinidos.

Pixlr

Lo primero que pensé es “seguro que tiene truco y al final es tipografía en imagen o algo que no funciona en todos los navegadores”, aunque me dió mucha confianza de que llevara la palabra Google delante.  Estuve bastante tiempo leyendo con mucha atención (sobre todo porque estaba en inglés y sólo me enteraba de la mitad, luego la neurona me funcionó y me acorde de que el traductor de Google está para algo).  Cuando acabé de leer, mi grado de felicidad como diseñadora (harta de las mismas tipografías en web) había crecido, pero todavía me quedaba un punto de incredulidad, lo unico que faltaba era probarlo.

Al día siguiente hice la prueba y como diría mi sobrina “Pa mi, pa siempre”. Funciona genial, se ve incluso en los móviles perfectamente y en los ipad e iphone.

El enlace es Google web fonts y creo que hay varias maneras de utilizarlo. Yo os pongo la mas sencilla y la que yo he usado.

Lo primero que ves cuando entras es un listado de tipografías, cuando encuentras la que te gusta haces click sobre ella y aparecen varias pestañas con todo tipo de información, (vista de la tipo en varios tamaños,  información general, caracters que tiene la tipográfia, descarga y “usa esta fuente”)

Todos son interesantes pero me quedo con los dos últimos:

• En descarga tu puedes bajarte la tipografía para poder usarla en tu ordenador para ver el efecto en tus diseños
• En “usa esta fuente” te explica los pasos a seguir para usarlo en tu web.

Los pasos a seguir son muy sencillos. Yo en micaso elegí la tipografía Oswald y en esa pestaña Google me da el enlace que tengo que meter en mi html.

Dentro del head colocamos

<link href=’http://fonts.googleapis.com/css?family=Oswald’ rel=’stylesheet’ type=’text/css’>

y despues especificas en todos los estilos donde quieras usarlo la clase o estilo

h1 { font-family: ‘Oswald’, arial, serif; }

Sencillísimo ¿verdad?. pues ya está listo.

¡Hasta pronto!

Llevo un montón de tiempo buscando iconos que sean mimimalistas, guapos, vectores y gratis (es que ya puestos a pedir…).

Bueno pues minimalistas, minimalistas no los he encontrado, pero lo que tengo claro es que van a dar mucho juego y ahorrar tiempo.

La página es Iconza

La ventaja que ofrece esta página es :

1. Tienes 3 tamaños (32×32, 24×24 y 16×16)
2. Eliges el color que quieras para el icono, es un selector
3. Eliges el color de fondo que quieras para el icono, es un selector

Tambien tienes la opción de hacer el fondo transparente no poniendo nada en el código de colores.

El formato es png y en esto no hay opción, pero… que más podemos pedir….

Hasta pronto!

Seguro que si hiciéramos una encuesta del navegador al que más rabia tenemos los que trabajamos con páginas web, saldrían por mayoría el explorer 6 y el 7, pero lo que está claro es que existen y que muchos de nuestros clientes todavía son usuarios de estos, así que no queda más remedio que solucionar los problemas  que se nos pongan delante.

Como os comenté antes , ayer busque soluciones para lograr que el IE6 y el 7 se vieran igual que el resto y encontré varios trucos, pero algunos de ellos ni los voy a mencionar porque no validan la web, así que las porquerías en el código, las vamos a dejar. Este lo he usado y después he validado la página y…¡funcionaaaaaaa!

Bueno el truquillo es el siguiente:

Vas a la página  del css donde tienes el estilo que no se ve igual en el explorer. (En este caso se trata de un menú que no se ve a la misma altura en el explorer 7  que en el resto de los navegadores).

menu {
padding-top: 20px;
*padding-top: 30px !important; /* Solo IE7 */
}

Ah! Se me olvidaba , es importante que vaya en cascada, primero pondremos el padding que va para todos los navegadores en general y debajo con el asterisco, el important y el comentario que hace que solo cambie en ese navegador.

Hace tiempo que alguien me preguntó por un programa de capturas de páginas web sin tener que aprenderse uso de herramientas ni nada por el estilo, y mira por donde que hoy lo he encontrado.

Nadie podrá decir que meter una dirección en una página web y apretar un botón no es sencillo. Pues más o menos, es eso lo que teneis que hacer desde ésta página web.

superscreenshot

Los pasos que tienes que seguir son los siguientes:

• Meter la dirección web(url).
• Elegir si quieres pantalla completa o solo la zona vista.
• Elegir tamaño.
• Elegir formato.
• Apretar botón de “view”.

Una vez  salga la captura de pantalla,  haceis click sobre la imagen con el botón derecho del ratón para copiar o guardarlo donde querais.

Ah! Se me olvidaba un par de cosas que teneis que tener en cuenta:

1. Tarda unos segundos en cargar la pantalla (paciencia)
2. No admite páginas redireccionadas (resignación)

Sencillo ¿verdad?

Hasta pronto!

Cansada de siempre lo mismo,  hoy me he dedicado a buscar menus para la navegación de páginas web.
He encontrado desde los simples de toda la vida, horizontales que lo único q cambia es el color, a los mas animados con jquery  (son los más llamativos  aunque hay q pelearse un poco con ellos a la hora de personalizarlos)

Tambien os podeis encontrar alguna herramienta para generarlos, eligiendo color,.. etc.

Aquí os dejo algunas páginas.

cssmenumaker.com

cssplay

cssmenus (en éste no os dan las tripas , pero podeis coger ideas para diseño)

opencube (no es para nada una página llamativa, pero podeis sacar cosas interesantes)

13styles.com (si quereis el psd teneis q pagar)

css library (muy buena pinta,  lo descubrí hace 5 minutos)

create-a-cool-animated-navigation-with-css-and-jquery (solo muestra uno)

Bueno, hasta otra!

Hoy os voy a mostrar algo, que creo que a mi “compi” Tania, excelente programadora de Ticmedia, le  hará mucha ilusión.

La veo trabajar un montón de horas para mejorar las bases de datos de nuestras webs, y también los resultados de búsquedas , pero lo mejor de todo es que  está testeado en Firefox 2/3, IE 6/7/8, Opera, Safari y Chrome, ( si Tania, has leido bien) asi que, con un poco de suerte, todos los navegadores lo leerán igual.

Así en ese post que  muy pronto vas a escribir, (¿verdad?) sobre el Explorer y el Firefox ,quizás puedas decir, que en algunas ocasiones los dos sistemas se ponen de acuerdo, aunque lo mas correcto,  es decir que hay programadores que dominan la situación a la hora de trabajar y hacen que éstos navegadores no nos den problemas.

Incluye características muy interesantes como, añadir enlaces, destacar columnas, reconocimiento automático de datos, paginación… etc.

Aquí os dejo el enlace donde encontrareis demo,y descarga

TinyTable

Espero que facilite el trabajo a los programadores

Hasta pronto!

Cada dia admiro mas a los ilustradores,  porque hacen chuladas en iconos como el que os muestro arriba y para eso se necesita buen gusto e imaginación.

Cuanto tiempo y cuantas veces habré buscado iconos para las web.
Uff! ni se sabe.

Los mas usados son los de ” Nuvola”  pero cansa poner siempre los mismos, porque además no pega mucho si por ejemplo pones estilo minimalista, ¿verdad?.

Ahora gracias a Dios y a el tiempo de búsqueda dispongo de unas cuantas familias de iconos bastante decentes.

Aquí os pongo unos pocos enlaces de alguna de las familias

iconeden

function-free-icon-se

Tambien podeis personalizar vuestro RSS

fasticon-smashing-feed-icons

speckyboy.com

Genial para aquellos que no tenemos la práctica de escribir en html todos los dias porque nos dedicamos mas al diseño en sí . Puede ahorrarnos unos minutillos de trabajo, nos da listas ordenadas, sin ordenar, listas con enlaces, tablas, etc.

Recomendado solo en épocas de mucho trabajo porque si no nos olvidamos de practicar html

Hasta pronto!

www.html-ipsum.com

Uno de los dias mas felices de mi vida, (laboral, claro) fué cuando Fer, mi jefe, me enseñó el Firebug.

¡Vaya invento! La verdad es  que para los que trabajamos con páginas web, nos facilita mucho el trabajo, (sobre todo cuando alguna capa se nos pone rebelde).

Pue ahora, mira tú por donde, dando hoy una vuelta por internet, he descubierto que el explorer tambien lo tiene (eso si, menos vistoso y de momento por lo poco que lo he manejado creo no da tantas facilidades como el del Firefox).

Será cuestión de estudiarlo más.

¡Bienvenido sea!

enlace a Firebug para Explorer