Context Font: Averigua qué fuente usa una web

Context Font es una sencilla extensiónpara Mozilla Firefox que se encargará deaveriguar por nosotros qué fuenteusa determinada web.

Y es que a veces, cuando surfeamos la web con ojo crítico, nos topamos con webs de las que nos gusta su tipografía. La pesadilla comienza cuando queremos averiguar qué fuente exacta es la que nos ha gustado tanto. Pues bien, aquí entra en juego Context Font.

Simplemente seleccionamos el texto que nos ha gustado y la aplicación nos mostrará el tamaño en píxels del mismo, la familia de la fuente y atributos varios (si están disponibles) como font-style, font-weight y font-variant. Hay que decir que esto no funciona para formularios…

Descarga | Context Font

Enlace | dosbit

Fuentes Light: Aprende a usarlas y descarga las mejores en forma gratuita

Leído en elwebmaster:

Las fuentes Light son aquellas que usualmente son más finas que las tipografías comunes. Utilizando las fuentes Light se pueden crear banners, encabezados, sidebars, etc. con una estética visual atractiva.

En esta nota, vamos a explorar las características básicas de las fuentes Light, algunos ejemplos y compartir las mejores fuentes delgadas gratuitas de la red.

¿Qué es una fuente Light?

Las fuentes Light se distinguen por su estética visual y obviamente, su tamaño. El tamaño del cuerpo de la fuente es muy delgado y las fuentes más finas tienden a tener serif puntiagudo y ascendente. Por ejemplo: miren la imagen siguiente:

En la imagen, podemos ver algunas fuentes Light comparadas con la Helvetica regular. Eso te dará una idea general de cómo luce una fuente Light. Algunas fuentes también llegan a ser Ultra Light por lo que son muy finas.

Lo que SÍ hay que hacer con fuentes Light

• Utiliza colores contrarios como color de fondo oscuro y el color de la fuente claro o color de fuente oscuro y fondo claro.
• Utiliza el tamaño de fuente mayor. Utiliza este estilo para el tagline, una pequeña introducción, titulares…
• Mantenlo simple.

Lo que NO hay que hacer con las fuentes Light

• No hagas que el color de la fuente sea similar al color del contenido de la página. Lo hace imposible de leer.
• Dado que la fuente ya es delgada no utilices un tamaño pequeño como 10 px. Mantente por encima de los 14px. Esto permite la legibilidad de la fuente.
• No la uses de más. Las fuentes Light se destacan cuando se utilizan con prudencia entre fuentes regulares. Su uso en demasía produce en la página web distracción y molestia visual.
• No trates de utilizar Letterpress con las fuentes Light. El efecto no se apreciará correctamente.

¿Fuentes Light seguras para la web?

No hay muchas fuentes Light seguras para la web todavía. Tendríamos que esperar a CSS3 para eso. Por ahora lo mejor es utilizar Helvetica o Courier New. Se ven bastante delgadas en comparación con otras fuentes websafe. El uso de fuentes delgadas en las imágenes es, por ahora, el mejor método.

Las mejores fuentes Light de la web

Hemos recorrido algunos sitios de fuentes y recolectado las mejores fuentes Light descargables. Y sí, son todas gratuitas.

New Garden

Haz clic aquí para descargar la fuente»

Champagne & Limousines

Haz clic aquí para descargar la fuente»

Secretcode

Haz clic aquí para descargar la fuente»

Geo Sans Light

Haz clic aquí para descargar la fuente»

Monako

Haz clic aquí para descargar la fuente»

Caviar Dreams

Haz clic aquí para descargar la fuente»

Print Clearly

Haz clic aquí para descargar la fuente»

Euro Steiner

Haz clic aquí para descargar la fuente»

Kravitz

Haz clic aquí para descargar la fuente»

Existence Light

Haz clic aquí para descargar la fuente»

CamelotdeNada

Haz clic aquí para descargar la fuente»

Thin Franq

Haz clic aquí para descargar la fuente»

Walkway

Haz clic aquí para descargar la fuente»

Lane

Haz clic aquí para descargar la fuente»

Jalane Light

Haz clic aquí para descargar la fuente»

Ejemplos

My favourite thing

Eye Draw

Arteye

A whitebox

Web mynd

Sage Blue

DEQQ

Weight Shift

Duoh!

Daniel Marino

Enlaces | Desizn Tech | elwebmaster

Personaliza tu formulario de reCAPTCHA

Leído en sentidoweb:

Buen tutorial que nos explica cómo personalizar el formulario de reCAPTCHA utilizando su API para que no sea tal y como el servicio nos lo ofrece.

El post nos explica cómo realizar las tres partes: script en el cliente con jQuery, el HTML y el PHP.

Create custom reCAPTCHA images using their API

Enlace | sentidoweb

Adobe Air: 60 útiles aplicaciones para webmasters y diseñadores – Parte 2

Leído en elwebmaster:

31. TiltShift Generator:

Si amas retocar tus fotografías, amarás esta aplicación. Te permite crear el famoso efecto Tilt Shift en tus imágenes con un solo clic.

Tomando capturas de pantalla

32. WebKut:

WebKut es una aplicación de escritorio simple y gratuita que permite obtener capturas de cualquier sitio web. Puedes capturar la pantalla completa o solo una parte.

33. Snippage:

Snippage te permite crear snippets de cualquier sitio web y ubicarlos en tu escritorio.

34. WebSnapshot:

Con WebSnapshot puedes obtener capturas de pantalla de tamaño thumbnail, navegador o pantalla completa de cualquier sitio. Las capturas se guardan automáticamente en la carpeta especificada.

35. PhotoTable:

PhotoTable es una herramienta única para capturar imágenes de la web, dónde simplemente puedes arrastrar una imagen de un sitio hacia el icono de PhotoTable y se guardará.

Herramientas de productividad

36. AgileAgenda:

AgileAgenda es una herramienta GTD que planea horarios para ti. Simplemente ingresa los factores básicos de tu proyecto y deja que la aplicación haga el esquema correspondiente.

37. Adobe Shortcut App for Creative Suite:

Esta herramienta permite crear y administrar atajos con facilidad. Es infaltable para un diseñador gráfico.

38. Live Presentations:

Live Presentations te permite crear y guardar presentaciones de forma local y exponerlas online.

39. Ora Time and Expense:

Ora Time es una herramienta simple para rastrear y generar esquemas de tiempo, facturas y reportes de expensas. También lo puedes utilizar para generar reportes personalizables y facturas para tus clientes.

40. Doomi:

Doomi es una de las herramientas más simples para crear tareas, programar recordatorios y lograr tus metas.

41. Mindomo:

Mindomo es una aplicación de mapeo mental para organizar tus ideas, administrar tareas y metas y hacer todo esto de forma visual.

42. FEAT:

Freelancer’s Estimation Assistance Tool te permite calcular los tiempos y estimativos para tu proyecto.

43. Klok:

Klok es una herramienta de rastreo de tiempo personal dónde todo lo que tienes que hacer es presionar un botón al comenzar a trabajar y presionar otro cuando terminas de trabajar. Otras propiedades incluyen arrastrar y soltar, exportaciones de Excel, archivo y vistas colapsadas.

44. Fireworks Auto Backup Utility:

Esta aplicación crea respaldos para todos los archivos PNG en los que se está trabajando con Fireworks, en caso de que falle.

45. Ephemeris:

Ephemeris es una aplicación para los fotógrafos que calculan el tiempo preciso de la salida y la puesta del sol para sacar la foto perfecta.

46. BroadChoice Workspace:

BroadChoice workspace es una herramienta de colaboración de equipo basada en AIR. Puedes mandar mensajes a tu equipo, compartir notas y tareas y crear espacios separados para diferentes proyectos.

47. ConceptShare Desktop Companion:

ConceptShare te permite cargar imágenes, administrar trabajos de espacio y obtener actualizaciones de estos.

Herramientas para compartir imágenes

48. zFlick:

Una aplicación simple pero genial para visualizar y guardar imágenes de Flickr en tu escritorio. Simplemente arrastra cualquier imagen de Flickr y suéltala en la carpeta que desees para guardarla.

49. FlickrFlipper:

FlickrFlipper es otra gran herramienta para buscar imágenes de Flickr. Incluso te permite buscar a través de usuarios específicos.

50. TinyUploads:

TinyUploads te permite redimensionar y cargar imágenes en sólo segundos. Puedes embeber directamente imágenes en tu blog o cualquier otra página web.

51. Flickr Desktop Search:

Flickr Desktop Search es una simple pero poderosa herramienta de búsqueda para Flickr.

52. Snoto:

Snoto te permite navegar a través de tus fotos recientes de Flickr, o las imágenes que cualquier otro usuario haya cargador. También las puedes visualizar como una diapositiva.

53. Destroy Flickr:

Destroy Flickr permite la administración de la cuenta Flickr de una forma completamente libre de problemas.

Aplicaciones multimedia

54. RichFLV:

RichFLV te permite jugar con y editar los archivos FLV con facilidad. También puedes utilizar la aplicación para convertir archivos FLV a SWF y convertir audio en MP3.

55. Fractal4D:

Fractal4D es una aplicación genial para dibujar remolinos que pueden ser salvados como simples archivos PNG o exportarlos como vectores para utilizar en Adobe Illustrator.

56. SWF Shot:

SWF Shot te permite generar capturas de pantalla de alta resolución a través de tu contenido SWF, PNG y JPG.

57. UVLayer:

UVLayer te da la posibilidad de organizar y jugar con tu media digital, incluyendo fotos, videos y juegos.

58. Adobe Media Player:

Un gran reproductor multimedia que te permite reproducir tus descargar o archivos multimedia escuchados sin inconvenientes. Altamente personalizable.

59. LightBoxer:

LightBoxer te brinda un showcase constantemente cambiante de imágenes de alta calidad como protector de pantalla.

60. Webcam To GIF:

Webcam To GIF te permite capturar algo con tu cámara web y convertirlo en un archivo GIF.

Existen una tonelada más de aplicaciones AIR ¿Ustedes cuál recomiendan?

Enlace | elwebmaster | Pro Blog Design

Adobe Air: 60 útiles aplicaciones para webmasters y diseñadores – Parte 1

Leído en elwebmaster:

Adobe AIR es una plataforma genial para construir aplicaciones de escritorio eficientes, que funcionan en cualquier sistema operativo.

En los últimos años, se han construido cientos de aplicaciones útiles en AIR, aquí les traemos algunas de las más útiles que será de gran ayuda para los diseñadores web y gráficos.

Creación de Gráficos

1. Splashup Light:

Splashup Light es un editor de imagen de escritorio casual, que provee una gran cantidad de propiedades para mejorar, manipular y editar fotografías con un esfuerzo mínimo.

2. Color Lovers:

Color Lovers ofrece un buscador de colores dentro de la base de datos de la comunidad de ColorLovers. Utilizando esta aplicación puedes buscar entre 1 millón de colores renombrados y 300,000 paletas de colores creadas por los usuarios.

3. Contrast-A:

Contrast-A te permite buscar contraste, experimentar con combinaciones de color e interactuar con un espacio de color tri-dimensional RGB.

4. LiveBrush:

LiveBrush es una aplicación de dibujo que te permite crear gráficos extraordinarios mediante la combinación de controles de movimiento simple con estilos de pinceles creativos.

5. Icon Generator:

Icon Generator te permite crear íconos con estilo con habilidades mínimas de dibujo. Simplemente selecciona el tipo de icono que deseas, personaliza el texto y el color, y listo.

6. e2vector:

e2vector es una herramienta de ilustración con propiedades ponderosas como máscaras, gradients, intersección, layers y separación de camino. También te permite importar/exporter archivos SVG.

7. ColorPicker:

Utilizando ColorPicker puedes seleccionar el color de una parrilla de colores o diseñar un color utilizando deslizadores para ajustar los valores RGB. Una herramienta esencial para alguien que esté jugando un poco con los colores.

8. ColorBrowser:

ColorBrowser es una aplicación simple que sirve para organizar de forma local tus paletas de colores preferidas. Puedes importar paletas que hayas creado en otro sitio mediante el formulario de archivos ASE.

9. Kuler:

Kuler es probablemente la herramienta de diseño de AIR más popular. Con Kuler podrás generar temas de colores para cualquier proyecto y navegar a través de cientos de temas creados por la comunidad. Te da la posibilidad de experimentar con variaciones de colores fácilmente para diseñar tu nuevo proyecto.

10. Random Pattern:

Una aplicación genial que crea patrones de colores basados en tus preferencias.

Herramientas específicas de diseño

11. Pixus:

Pixus mide los pixeles y te permite previsualizar tu diseño, ofreciendo soporte para múltiples pantallas.

12. FontPicker:

FontPicker es una herramienta simple que te permit ever todas las fuentes que posees instaladas en tu ordenador y seleccionar una. También puedes tipear texto para previsualizar todas las fuentes antes de seleccionar una.

13. PixDif:

Además de medir pixeles, PixDif también permite medir la diferencia entre dos elementos de diseño y manipular la opacidad alpha de la imagen.

14. Em Calculator:

Em es un concepto importante en la tipografía y el diseño. Finalmente, existe un calculador para medir em sin problemas.

15. HtmlTextEditor:

HtmlTextEditor apunta a lo más básico, la creación de código HTML. También soporta envoltura CDATA y cambia el HTML de forma automática cuando cambias el texto rico.

16. iPixer:

iPxer te permite crear contenido flash interactivo a través de tus imágenes.

17. OBO Site GatherAIR:

OBO Site GatherAIR es una herramienta para la generación de sitios web que te permite crear templates Html fácilmente. También lo puedes utilizar para arrastrar y soltar archivos SWF en tu template.

18. Boks:

Boks es una aplicación para que los diseñadores trabajen de forma visual con el framework Blueprint CSS. Te permite arrastrar y soltar elementos de la parrilla, previsualizar en el navegador y comprimir código CSS.

19. PixelWindow:

PixelWindow es otra herramienta simple para medir cosas de la pantalla con una regla de píxeles transparente.

20. iPlotz:

iPlotz te permite crear páginas wireframe y mockups interactivos en tu sitio web o software.

21. PixelPerfect:

PixelPerfect es otra gran aplicación para medir el tamaño de los objetos de tu pantalla. Tamién te da la posibilidad de crear, redimensionar, mover y cerrar ventanas.

22. DesignView:

DesignView es una gran aplicación para el desarrollo y diseño de aplicaciones Flex. Es una herramienta útil para crear de forma rápida layouts antes de comenzar a manipular el código MXML.

23. Merlin:

Merlin te ayuda a order tus fuentes de forma alfabética y en carpetas mediante la primer letra del alfabeto.

24. Caliper:

Caliper es una escala medidora para tu pantalla que puede ser arrstrada y rotada a través de los 360 grados.

Edición de imágenes

25. ImageSizer:

ImageSizer te permite redimensionar imágenes y ponerlas en archivos zip comprimidos. También permite redimensionar, rotar, optimizar y renombrar imágenes por lote.

26. ImageDropr:

ImageDropr es una aplicación de escritorio que permite cargar imágenes en Flickr. Sólo arrastra y suelta tus fotografías en la aplicación, etiquétalas o agrúpalas por etiquetas y comienza a cargarlas en Flickr.

27. XeIMG Image Editor:

XeIMG es un editor de imágenes que permite añadir filtros y efectos a las mismas. Las propiedades incluidas son: borrosidad, afilación, negativo, blanco y negro, etc.

28. Shrink-o-Matic:

Shrink-o-Matic es una aplicación simple para achicar/redimensionar imágenes en lote Soporta imágenes Jpeg, Gif y PNG.

29. JustResizeIt:

Redimensiona imágenes múltiples simplemente arrastrando y soltando en la aplicación. Una vez que terminas, arrastra las imágenes redimensionadas en un e-mail, documentos office o carpeta.

30. CleVR Stitcher:

CleVR Stitcher es un stitcher panorámico de fotos simple. Sólo arrastra y suelta las imágenes y la aplicación crear un panorama.

Enlace | elwebmaster | Pro Blog Design

Cómo usar variables de PHP en tus estilos CSS

Leído en elwebmaster:

Cuando se le pregunta a los diseñadores qué nuevas funcionalidades quisieran añadir a las futuras versiones de CSS, siempre surge la idea de "variables".

Al día de hoy esto no se considera una práctica ni buena ni mala, aunque muchos optan por usar variables de php en sus estilos css. El principal motivo es el grado de abstracción que nos permite trabajar de esta forma. ¿Estás dispuesto a conocer cómo implementar esta técnica?

Style.php

En lugar de utilizar la extensión de archivo .css, utiliza .php

Content-type

Al comienzo de tu nuevo archivo style.php setea el tipo de contenido de nuevo como CSS:

1. header("Content-type: text/css; charset: UTF-8");
2. ?>

Setea las variables

Ahora puedes setear variables para lo que quieras, por ejemplo:

1. header("Content-type: text/css; charset: UTF-8");
2. $colorMarca = "#990000";
3. $colorLinks = "#555555";
4. $urlBase = "http://cdn.blahblah.net";
5. ?>

Usando las variables

Debajo del código PHP, puedes comenzar con el CSS común y corriente, sólo que ahora también puedes usar PHP para imprimir el contenido de esas variables.

1. #header {
2. background: url("/images/header-bg.png") no-repeat;
3. }
4. a {
5. color: ;
6. }
7. …
8. ul#main-nav li a {
9. color: ;
10. }

Ir más allá/Otras ideas

• Además de esto, podrías también comprimir el CSS con PHP.
• En teoría, podrías tomar el user agent y tratar de cargar estilos específicos para cada navegador.
• Obtener la fecha/hora y cambiar el diseño de tu sitio según las estaciones o los distintos momentos del día.
• Genera un número random y utilízalo para setear una imagen de fondo al azar en tu cabecera.

¿No funciona?

Si no funciona puede que la solución sea dejar el nombre del archivo como style.css, y utilizar .htaccess para que sea analizado como PHP. Simplemente asegúrate de incluir este código en el archivo .htaccess (sólo para servidores Apache) en el mismo nivel del directorio en que se encuentra el archivo CSS. Luego, sólo utiliza PHP dentro, de la misma forma en que lo harían con cualquier otro archivo PHP.

1. SetHandler php5-script

Enlaces | CSS-Tricks | elwebmaster

Kotatsu: Herramienta online para crear tablas HTML fácilmente

Leído en elwebmaster:

A veces se vuelve una tarea tediosa el diseño web a la hora de crear tablas, más específicamente cuando deseamos que todas las celdas de una columna tengan una clase particular.

Para simplificarnos esta tarea, llegó Kotatsu, una herramienta creada especialmente para facilitar el desarrollo de tablas HTML.

Esta herramienta online, permite crear una tabla y asignar rápidamente clases a cada columna.

¿Cómo funciona?

Simplemente Añade tantas filas y columnas como necesites. Haz clic en “Generar HTML” y obtén tu código listo para usar.

Sí. ¡Más simple, imposible!

Ingresa a la web de Kotatsu y ponte manos a la obra.

Enlace | elwebmaster

Tutorial flash: Cómo animar un logo con flash

Vídeo tutorial en donde nos muestran como animar un logo con flash CS3. Simple, sencillo y efectivo. En resumen, muy bueno.

Enlace | Tutorial-Lab.com

Adobe Browserlab

Una nueva aplicación Web hecha en Flex que nos permite ver nuestra web en los diferentes exploradores y sistemas operativos, herramienta de visualización y de comparación destinada tanto para diseñadores como para programadores, que nos puede ayudar a ver la reacción de cada una de nuestras web en cada explorador.

Exploradores que soporta:

• Firefox 2.0 – Windows XP
• Firefox 2.0 – OS X
• Firefox 3.0 – Windows XP
• Firefox 3.0 – OS X
• Internet Explorer 6.0 – Windows XP
• Internet Explorer 7.0 – Windows XP
• Safari 3.0 – OS X

También incluye una extensión para Dreamweaver: BrowserLab MXP extensions

Enlace | Adobe Browserlab

Cómo poner 2 editores CKeditor en una misma página

Leyendo este artículo de Pablo Glanz:

Revisando las estadísticas del pluing Search Term Tagging 1.0, plugin que agrega los keywords de los buscadores a nuestro post he visto que una de las frases con las que llegaron a mi post anterior sobre CKEDITOR fue con “CKEDITOR uno o mas editores en la misma página”. Acá un ejemplo del código para 2 editores en dos áreas de texto llamadas area1 y area2.

<textarea name="area1" cols="50" rows="5">Valor inicial</textarea> <script type="text/javascript"> CKEDITOR.replace( ‘area1’); </script> <textarea name="area2" cols="50" rows="5">Valor inicial</textarea> <script type="text/javascript"> CKEDITOR.replace( ‘area2’); </script>

Enlace | Pablo Glanz

Descarga |CKEditor

Web | Web oficial CKEditor