Historial de un navegante

by Angel

Archive for the ‘desarrollo web’ Category

Context Font: Averigua qué fuente usa una web

leave a comment »

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

Written by Angel Flores

17 mayo 2010 at 22:38

Publicado en desarrollo web, diseño web, General

Tagged with , ,

Personaliza tu formulario de reCAPTCHA

leave a comment »

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

Written by Angel Flores

6 enero 2010 at 11:04

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

with one comment

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

Written by Angel Flores

6 enero 2010 at 11:04

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

with one comment

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

Written by Angel Flores

6 enero 2010 at 11:02

Adobe Browserlab

leave a comment »

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

Written by Angel Flores

10 diciembre 2009 at 12:19

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

with one comment

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

Written by Angel Flores

26 noviembre 2009 at 20:13

Publicado en desarrollo web, diseño web

Tagged with , ,

Personalizar CKEditor | Barra de Herramientas

with 3 comments

Despúes de ver como se Instala CKeditor, aquí tenemos 3 ejemplos de cómo personalizar la botonera de este gran editor HTML Online.

Suponiendo que nuestro campo “Text Area” se llama comentarios, la instalación estándar se hace con el siguiente código y muestra una botonera completa

<script type="text/javascript">

CKEDITOR.replace( ‘comentarios’ );

</script>

Ahora si lo que queremos es una botonera más pequeña, con solo unas pocas opciones de textos podemos utilizar la versión “BASIC”

<script type="text/javascript">

CKEDITOR.replace( ‘comentarios’,

{

toolbar : ‘Basic’

}

);

</script>

Y este es un ejemplo de cómo personalizar la botonera con las opciones que necesitamos.

<script type="text/javascript">

CKEDITOR.replace( ‘comentarios’,

{

toolbar :

[

                    [‘Styles’, ‘Format’],

[‘Bold’, ‘Italic’, ‘-‘, ‘NumberedList’,
‘BulletedList’, ‘-‘, ‘Link’, ‘-‘, ‘About’]

]

} );

</script>

Enlace | Pablo Glanz

Written by Angel Flores

26 noviembre 2009 at 20:12

Publicado en desarrollo web, diseño web

Tagged with , ,