Archive for the ‘Diseño Web’ Category

SeaDragon : Incluir imágenes con Zoom en tu web

Muchas vece snecesitamos incluir una imagen grande y de excelente calidad en nuestra web, pero no podemos incluirla por su tamaño y si la redicimos, tambien reduce su calidad.

Un fecto interesante de zoom lo pueden ver aqui FancyZoom: Efecto zoom para tus galerías de fotos o si deseas optimizar tus imagenes Online Image Optimizer : Herramienta online para optimizar imágenes

SeaDragon es el proyecto de Microsoft Live Labs que nos hace posible incluir todas las imágenes que deseemos en un blog o página Web, sin importar el tamaño que esta tenga. Ya que gracias a sus características nos permite embeber las imágenes en alta resolución, y hacer zoom sobre ellas para verlas al Detalle.

Tendremos que indicar la dirección web de cualquier imagen, SeaDragon nos ofrecerá la animación interactiva con la fotografía y el código para que la incluyamos en nuestra página.

SeaDragon no aloja la imagen sino que la carga desde la URL original permitiendo desde aumentar o disminuir la visualización de dicho archivo, hasta verlo a pantalla completa.

Para desarrolladores, hay disponible un API que inluye bastante documentación y con la cual podemos personalizar los resultados y modificar el reproductor.

PDFAmigo : Crear formularios interactivos en PDF

Si necesitas crear un formulario para que tus usuarios (clientes) lo llenen con sus datos y luego lo impriman, la mejor opción es hacerlo con un archivo PDF ya que es el formato ideal para imprimir sin perder el diseño

Si desea mas herramientas para trabajar en PDF visite PDF to Excel : Convertir de PDF a Excel online o una alternativa para trabajar con PDF Perfect PDF Reader : Alternativa a Adobe Reader

PDFAmigo es una aplicación web para la edición de formularios muy sencilla de utilizar para crear formularios en formato PDF que pueden ser llenados por el usuario. Con un editor muy sencillo de usar tendréis que ir incluyendo los campos y textos que deseáis que los usuarios rellenen, obteniendo el archivo al final del proceso.

Para empezar a crear un documento sólo hace falta dar clic en el botón Start now. Después de eso seremos llevados a una especie de editor en donde tenemos herramientas disponibles como por ejemplo, cajas de texto, labels (etiquetas), listas desplegables, casillas de verificación y más controles. Para mayor precisión podemos ver una cuadrícula que nos ayuda a guiarnos.

La versión gratuita incluye una marca de agua en todas las páginas generadas, teniendo que pagar un dólar por página “limpia”.

404 Toons : Paginas de error divertidas y originales

En cualquier sitio web e simportante tener una pagina páginas de error para no salgan d enuestra web los visitantes. Pero la mayoría de estas páginas son muy aburridas y estaticas.

Mas efectos divertidos para tu web puedes encontrar en Be Funky : Efectos artísticos para imágenes o crear montajes Image Inc : Crea montajes de imagenes

404 toons nos acerca una variedad de páginas de errores con diferentes personajes, con lo cuál al seleccionarlos podremos ver su propia animacion en flash. Tenemos policias, mafiosos, surfers, superheores y más.

Si alguna de ellas te ha gustado, podrás bajar la página en formato compreso para añadir a tu sitio. Las voces que son reproducidas son distintas dependiendo del personaje, pero todos intentan decirte que la página que has solicitado no existe.

Yahoo, Google, Bing, direccionan a los usuarios hacia su propia web cuando estos cometen un error que se produce fuera de la página web que el usuario está tratando de localizar, por tanto tener una página de error personalizada 404 es esencial.

SlickMap CSS : Crear un SiteMap con estilo

Un sitemap es muy importante para una web para que nuestros visitantes puedan conocer mejor la distribucion de nuestra pagina web.

Una herramienta para los que saben poco CSS es Easy CSS Styler: Crear estilos CSS online o crear un menu en css Scripts para menus desplegables para tu web

SlickMap CSS es una sencilla hoja de estilo que permite mostrar sitemaps directamente desde una lista de navegación HTML estándar y facilmente personalizados. Se adapta a la mayoría de sitios web, con capacidad de hasta 3 niveles de páginas de navegación y otros links de utilidad.

En la web se puede bajar los archivos necesarios para entender y replicar el proceso, permitiendo ofrecer una original y elegante navegación entre el contenido de cualquier web.

Algunas de sus propiedades y beneficios

  • Sin necesidad de usar programas especializados
  • Fácil de revisar con el cliente durante el desarrollo
  • Links cliqueables con URL visible
  • El diseño resulta en código HTML listo para usar

Según se indica desde la web del autor la visualización es correcta desde Safari, Firefox, Opera y Chrome.

ViewLike.us: Visualizar tu web a varias resoluciones

Si trabajas creando o diseñando sitios web, es muy importante saber como se vera el aspecto de cualquier página en varias resoluciones de pantalla.

Una herramienta para capturar la imagen de una web es WebKut : Capturas de webs en imagen con Adobe AIR y esta otra Gadwin PrintScreen : Potente y sencillo capturador de pantalla gratis

ViewLike.us es una aplicación web que funciona con Ajax y PHP. Que permite probar un sitio web en distintas resoluciones de pantalla (800×600, 1024×768, 1152×864, 1400×900, 1600×1200, 1920×1200 y vistas desde el iPhone y Wii) con un solo click de tu mouse.

La importancia de esta utilidad radica en que si bien es cierto que la mayoría de las visitas las recibimos desde máquinas que tienen resoluciones de monitor muy similares, habrán otra que no y si queremos que la experiencia en nuestro blog sea la mejor para todos debemos verificar este detalle.

Todo lo que tenemos que hacer es ingresar la URL de nuestro sitio en la caja de texto de la parte superior, y luego darle click al botón de “Check Up!”. Luego, podemos hacer click en cualquiera de los botones de las resoluciones mencionadas en el párrafo anterior, y veremos como nuestro sitio se ajusta instantáneamente a ella.

Aviary Falcon: Editor de imágenes online

Cada vez mas aparecen editores en linea y muchos muy completos que nos permiten realizar gandes ediciones a nuestras imagenes.

Si desea herrmientas para trabajar artisticamente con sus imagenes Be Funky : Efectos artísticos para imágenes y si no le gusta el Photoshop 10 alternativas de software libre frente a Photoshop

Falcon es una aplicacion web de edición de imágenes sencilla y bastante fácil de utilizar. Esta aplicación web es parte de la magnifica sutie Aviary, que ofrece una amplia gama de soluciones para trabajar con tus imágenes.

Permite recortar, agregar textos/dibujos, rotar, cambiar el tamaño, aplicar efectos, modificar color/brillo y poner bordes/sombras a nuestras fotos, entre otras muchas opciones. Podemos subir imágenes, tanto las que tengamos alojadas localmente como la introducción de las direcciones web de las imágenes alojadas en algún servidor web a las que queremos hacer modificaciones.

Si tienes FireFox, puedes bajar el plugin llamado Talon el que te dará acceso a todas la funcionalidades de esta nueva aplicación y así podrás capturar fragmentos o pantallas completas desde tu navegador.

FFonts : Buscador con miles de fuentes

¿Estás cansado de utilizar los mismos tipos de letra? Dale mas vida a tus proyectos utilizando fuentes mas llamativas y no las comunes.

Para conseguir mas letras (fuentes) visitar Descarga gratis mas de 8000 tipos de letra de calidad o si deseas letras mas artisticas Colección de tipografías (fuentes) florales

Ffonts es una web para buscar fuentes de todo tipo. Tiene miles en su base de datos para hacer fácil la búsqueda tanto por parte de profesionales como de quienes solo desean agregar un poco de estilo a sus escritorios, todas convenientemente divididas en categorías y familias.

Las fuentes se encuentran divididas en categorías del tipo: futuristas, góticas, dibujos animados, militar, pixel, ciencia ficción… y cada una de ellas contiene un buen número de fuentes, en total cerca de 10.000. Simplemente pulsando el botón: “Download” procederemos a la descarga en formato ZIP. Si queremos más información, pulsando en “Details” podremos testear la fuente, visualizar la colección completa de carácteres y alguna información extra.

La información que nos brinda sobre la tipografía que deseemos es muy completa. Podremos como siempre tipear un texto para previsualizarlo, votar por la que nos guste, dejar comentarios al autor.

Stripe Generator : Generador de fondos de lineas diagonales

Una de las caracteristicas de la web 2.0 son esos fondos de rayas diagonales (esos que parecen un bastón de caramelo), si no deseas abrir un programa de edición de gráficos para crear o editar uno de tus fondos. Aqui tienes la ayuda,

Para crear fondos d epantallas visten Ava7Patterns: Coleccion de mas de 700 patterns o fondos para tu web o para crear preloaders Preloaders.net : crear imagenes de carga (loading) en 3D

Stripe Generator permite crear nuestros fondos de lineas diagonales mejor conocidos como Stripes para nuestra web o blog, ideales para ponerle a tus diseños un toque Web 2.0 . La herramienta es bastante buena y los fondos que genera igual. Podemos configurar el espaciado de las lineas, el color de fondo, color de las lineas, incluso la orientación.

Dispone de una vista previa y pulsando sobre Open full screen preview se previsualizará el fondo sobre el que estamos trabajando a pantalla completa de forma que podamos apreciarlo mejor.

Genera una imagen .png que podemos usar directamente en nuestro archivo .css o usarlo como patrón de fondo en algún programa de edición gráfica como Photoshop.

WaveMaker Visual Ajax Studio : Crear aplicaciones web con AJAX sin escribir código

Para quienes desean aprender AJAX, pero les da pereza empezar a descargar cientos de tutoriales de los que poco aprenden, aqui le spresento la solucion a sus problemas.

Papara aprender mas sobre Akax visiten Recursos AJAX para desarrollo web profesional y esta herramienta SWFUpload : Subir (upload) archivos multiples flash con AJAX

WaveMaker Visual Ajax Studio es un entorno de programación de aplicaciones basadas en Java y AJAX, desarrollado por la empresa WaveMaker; con esta suite puedes crear tus propias aplicaciones Web y usar efectos visuales gracias a AJAX sin programar una sola línea, ya que esta suite incorpora una interfaz muy visual que nos permite crear aplicaciones sin esfuerzo y todo mediante el uso del mouse.

Cuenta con un IDE integrado en el navegador, por lo que podemos desarrollar aplicaciones sin la necesidad de salir de este; se pueden lograr cosas básicas como cargar una imagen o mostrar un botón, hasta cosas más complejas como manejar bases de datos, buscar entre registros, interactuar con otros servicios y muchas opciones más que nos pueden ser de mucha ayuda, sobretodo si no somos virtuosos en la codificación.

Studio es una aplicación web que aprovecha las herramientas de Dojo para crear páginas que contengan widget y Dijits Dojo. Los usuarios con solo arrastrar y soltar pueden crear complejos diseños de páginas que contengan Dojo grid, Dijit based forms, Google Gadgets y una variedad de otros widget incluidos.

Este fabuloso paquete de desarrollo no tiene costo, y está disponible para su descarga para las tres plataformas más grandes; Windows, Mac OS X y Linux. Antes de descargar la aplicación, puedes ver el screencast en donde se explican las características básicas, o puedes unirte a la comunidad de desarrolladores.

We Love Icons: Iconos de alta calidad

Seguro que a muchos de ustedes les gusta personalizar un poco más su computadorar o desean mejorar el aspecto visual de su web o blog. Uno de los recursos más buscados para este tipo de cosas son los iconos.

Para buscar iconos visiten Iconspedia : Miles de Iconos gratis y de calidad para tu web o blog y para crear iconos personalizados iConvert : Convertir Imagenes a Iconos online (Mac OS X, Linux o Windows)

We Love Icons es una nueva galería de iconos, donde podrán encontrar iconos de muy alta calidad, con diseños realmente sorprendentes y los cuales podrán descargar de forma totalmente gratuita. Sus diseños son excelentes y es una forma rápida de buscar iconos de gran calidad.

Una de las particularidades más interesantes es que, si tenemos una imagen que queramos convertir a un icono en alguno de los formatos de los sistemas operativos anteriores, podemos subirla a dicha web y descargarla ya en formato icono. Este método también sirve para convertir iconos de un formato a otro. Una función que puede resultar bastante interesante para los iconos que podamos encontrarnos por la red de redes.

Cada set dispone de información acerca del número de iconos que incluye, el nombre del mismo, su autor, comentarios y un enlace hasta la página del creador desde donde acceder a su descarga.