Archive for the ‘Diseño Web’ Category

Easy CSS Styler: Crear estilos CSS online

Cuando diseñamos un sitio en HTML, tenemos que darle un poco de estilo y lo mas recomendado es hacerlo mediante CSS, pero si no tenemos conocimientos de CSS estamos en problemas.

Otras herramienta spara trabajar con CSS es CSS Menu Builder : Herramienta online para crear menus de manera muy sencilla y rapida y para maquetear tu web 960 Grid System: Frameworks CSS para maquetear una web

Easy CSS Styler es un generador online de código CSS, que es muy sencillo y visual, permitiendo con sólo ingresar unos datos, obtener el código parcial o el archivo CSS completo. Sin necesidad de poseer grandes habilidades en programación.

En la parte superior hay diferentes elementos de HTML: BODY, H1, H2, P, estados de los enlaces y BACKGROUND. Pulsando en el nombre del elemento, se desplegará una pantalla con colores, fuentes, tamaños e interlineados, para poder escoger el estilo. Según los vayamos definiendo, el texto de muestra de la parte izquierda irá cambiando, así que podremos ir viendo inmediatamente el efecto que tienen los cambios que vayamos realizando.

Una vez que terminamos con la edición visual, sólo queda descargar el archivo con el CSS en formato texto, listo para que lo subamos a nuestro diseño.

Colección de tipografías (fuentes) florales

Una parte importante de un proyecto web es el tipo de fuente (letras) que se va a utlizar (tamaño, tipo , color,etc) que no desentone con el diseño final. En internet podemos encontrar muchos tipos de letras ,desd elos mas simples hasta los mas complejos.

Si buscan tipos de fuente slos pueden encontrar aqui Descarga fuentes (tipo de letra) gratis para tu logo, web o blog o en este post Descarga gratis mas de 8000 tipos de letra de calidad

Gorgeous Examples of Floral Typography es el nombre de la colección de magníficos ejemplos tipográficos de diseño floral que Smashing Magazine ha reunido. Esta colección de tipografías en las que parece que las letras estén formadas por elementos florales combina de forma artística, caligrafía y tipografía, para transmitir un estimulante mensaje a nuestros lectores además de una importante mejora del diseño de nuestra web o blog.

Como viene siendo habitual cada uno de estos recursos para diseñadores dispone de un enlace a la web de su autor donde podremos acceder a su descarga así como información detalla de su licencia y condiciones de uso. Además de todas estas tipografías florales clasificadas en categorías disponemos de algunos tutoriales que nos ayudarán a dominar la técnica de uso y creación de los mismos.

WYMeditor : Editor web de XHTML

Cuando tene mos una web, debemos tener en cuenta que el codigo este perfectamente estructurado conforme a las especificaciones W3C sobre XHTML

Si deseas conocer herramientas para diseñar tu web o mejorarla te recomiendo Extensiones Firefox para desarrolladores web

WYMeditor ha sido creado para generar código perfectamente estructurado XHTML, compatible con las especificaciones del W3C, el código no se puede contaminar con informaciones visuales como los estilos de fuente y los tamaños, bordes, colores.

WYMeditor es un editor XHTML web WYSIWYM (What You See Is What You Mean, o Lo que Ves es lo que Significa). La idea principal de WYMeditor es dejar a un lado los detalles del aspecto visual y concentrarse en la estructura y el significado, al mismo tiempo de ofrecer al usuario una interfaz agradable.

Una vez se ha integrado la página de edición al sitio web, se efectuan los cambios en el texto de la ventana grande, y se atribuyen las propiedades de los párrafos de la lista disponible. No queda más que clicar al botón de envío para validar. La oferta de propiedades no es infinita, pero sí suficiente para la puesta en marcha de una página clara y homogénea, ya que no nos ocupamos más que del contenido y del nivel jerárquico de los párrafos y los títulos. La inserción de enlaces, listas, imágenes y el formateado (itálica, subrayado, etc) del texto se hace con botones.

Este se caracteriza por:

  • Utilizar estándares: XHTML strict + CSS.
  • Estar completamente basado en CSS.
  • Está diseñado para se simple y fácil de implementar.
  • No requerir instalación.
  • Hace especial hincapié en la estabilidad y usabilidad.
  • Soportar imágenes, enlaces y algo muy útil, tablas.
  • Soportar Skins por medio de CSS.
  • Poseer opciones de internacionalización.
  • Poseer API y es extensible por medio de plugins.
  • Y está testeado en los navegadores: Firefox 2.0+, SeaMonkey, Galeon, Epiphany, Internet Explorer 6 y 7,Opera 9.5+, Safari 3.1+ y Google Chrome.

Closr.it : Zoom para imagenes de alta calidad

Si disponemos fotos de alta calidad y deseamos mostrarlas en nuestra webo o blog, y que no pesen demasiado ni ocupen mucho lugar sin perder la calidad. Esto les va a servir.

Si deseas hacer capturas de imagenes puedes revisar el siguiente articulo ScrnShots : Red social de capturas de pantallas

Closr.it es un servicio online gratuito con el cuál por medio de widgets podrás compartir imágenes en alta resolusión, una de las principales características de este servicio es que si tus imágenes son muy grandes en cuanto a mega pixeles, te permite compartirlas y que tus visitantes de tu web o blog hagan un zoom de estas para observarlas mejor.

Para usar este servicio, sólo es cuestión de registrase y subir la imagen, automáticamente generará un widget que incorpora los controles de acercamiento/alejamiento (zoom) y el botón de visualización a pantalla completa, por lo que es ideal para compartir imágenes en alta resolución.

Closr.it requiere que nos registremos para utilizarlo, y acepta imágenes en formato JPG, PNG o GIF de hasta 100MB aproximandamente, por lo que no tenemos que preocuparnos por el tamaño de las mismas. Dichas imágenes pueden luego ser publicadas en nuestro sitio web gracias a un widget, del cual obtendremos el código.

Scripts para menus desplegables para tu web

Los menús de navegación son importantes para cualquier sitio web. Una navegación en menus bien diseñados y fáciles de manejar suponen una mejora sustancial del aspecto y funcionalidad de un website.

Si deseas hacer menus desplegables con css puedes visitar CSS Menu Builder : Herramienta online para crear menus de manera muy sencilla y rapida

Los menus desplegables (Drop-down list). son elementos que permite a un usuario seleccionar de una lista desplegable una opción. Se distingue de una simple lista en el hecho de que el usuario debe presionar sobre el menú para que se muestren las opciones disponibles

Estos scripts, de uso libre, para crear menus desplegables vienen clasificados en categorías como menus jQuery y CSS, menus profesionales, menus desplegables Javascript y HV Menu v 5.5.

Online Image Optimizer : Herramienta online para optimizar imágenes

Uno de los errores comunes que cometemos cuando colocamos imágenes en nuestra web o blog es que ésta no esté lo suficientemente optimizada. Lo que ocasiona que su carga sea más lenta y consuma más ancho de banda.

Otra interesante herramienta para tus imagene sla puedes encontrar en Online Image Splitter : Herramienta online para cortar imagenes en secciones de manera facil si desea soptimizar el diseño visita Visual Round Trip Analyzer: Analiza tu pagina web o blog para optimizar su diseño

Online Image Optimizer es un editor de imágenes online gratuito que nos permite optimizar cualquier imagen para una web, de este modo podemos modificar una imagen cuidando el tamaño y la calidad de esta para poder subirla a nuestro sitio de modo de hacerlo mas rápido y cuidando el ancho de banda.

El funcionamiento es muy sencillo, subimos la imagen a optimizar o escribimos su URL, en caso de querre obtener la imagen en otro formato lo escogemos y luego presionamos en Optimizar. Online Image Optimize en tres palabras: simple, sencilla y muy útil.

Una vez tengamos los resultados, en cada uno de ellos nos mostrará las diferentes calidades, y el porcentaje de reducción de tamaño de archivo, con lo que ya sólo queda elegir la que más nos convenza, y descargarlas.

Una de las desventajas que este sitio ofrece es que solamente acepta archivos en formato JPG, GIF y PNG, dejando atrás todas la otras posibilidades, ademas sólo acepta imágenes menores de 300 kilobytes.

ScrnShots : Red social de capturas de pantallas

Navegando por la web descubres sitios donde inspirate muy atractivos, donde destaca la composición gráfica, las imágenes. Pero tambien tu tienes una imagen fruto de tu imaginacion, que puede servir de isnpiracion a los demas.

Si buscas capturadores de pantalla te recomiendo visitar Gadwin PrintScreen : Potente y sencillo capturador de pantalla gratis o este articulo SnapCasa: Capturas de pantalla automaticas de cualquier sitio web

ScrnShots es una comunidad de diseñadores creada para compartir sus capturas de pantalla de bellos e interesantes diseños. Con éste servicio tomas una captura de pantalla y luego la subes al sitio. Cada usuario podrá dejar sus opiniones o inclusive brindarnos ideas creativas que nos ayuden a lograr un mejor diseño. Podremos crear una lista de Contactos con la cual comunicarnos frecuentemente,

El registro es gratuito y te permine subir una cantidad de imágenes sin límite en formato jpg, gif o png. También puedes embeber las imágenes de tu galería en tu blog, por lo que bién podía ser usado como sitio para alojamiento de imágenes. Puedes utilizar el formulario que hay en el sitio o, si eres usuario de Mac OSX, el widget que podrás instalar en el dashboard. La subida, por tanto, se puede hacer desde Windows, Linux y Mac.

Podrás etiquetar cada captura para ser más fácilmente localizable. Dispondrás de un espacio para tus favoritos. Comparte tus creaciones en tu blog o en una página de tu sitio. Crea widgets para integrar en cualquier lugar de tu web. Debate sobre lo que has hecho o lo que han hecho otros.

Iconlook : Buscador de iconos simple y efectivo

Los iconos suelen dar un aspecto visual importante a nuestra web o blog. Pero cuando necesitamos localizar un buen icono para una web, blog o presentación y muchas veces la búsqueda de imágenes en Google no siempre nos muesta lo que necesitas y nos toma mucho tiempo encontrar lo que deseamos.

Para crear tus propios iconos puedes visitar iConvert : Convertir Imagenes a Iconos online (Mac OS X, Linux o Windows) o buscar iconos en IconPot: Mas de 2500 iconos gratis para tu web o blog

Iconlook es un simple y efectivo buscador de íconos, con capacidad para filtrar nuestros resultados de búsqueda de acuerdo al tamaño de los íconos que queremos encontrar. Con la capacidad de poder ver los más populares y una inmensa nube de etiquetas, convierten a este buscador de iconos en uno especial.

Tambien se puede clasificar las búsquedas que realizemos por tamaños de 12×12, 16×16, 22×22, 32×32, 48×48, 64×64, y 128×128 algo que puede ser muy útil.

La función de mostrar los iconos populares es muy interesante ya que con el podemos ver cuales son los iconos que mayor veces han sido visualizados al buscar y hasta cierto punto usarlos en nuestras creaciones ya que son agradables para muchos. Su inmensa nube de etiquetas me parece también algo extra que es muy importante ya que con esta característica tenemos la opción de seleccionar de entre las palabras claves ver cuales son las más buscadas.

Yourfonts.com : Crea tus propias fuentes (letras) gratis

Por internet puedes encontrar miles de fuentes y de todos los tipos imaginables para adornar tus logos, blog o tu web. Pero si deseas deseas un tipo de letra original para tus proyectos, existe la posibilidad de crear en línea y de tu puño la letra o fuente que imagines, sin necesidad de complejos e incomprensibles software de dibujo.

Si deseas tipos d eleta spara tu web o blog visita Descarga fuentes (tipo de letra) gratis para tu logo, web o blog o este otro Descarga gratis mas de 8000 tipos de letra de calidad

YourFonts es un servicio en linea que nos ayuda a crear tipos de fuentes (letras).Es un interesante generador gratuito de fuentes que te permite transformar la letra con la que escribes a mano en nuevos caracteres, con la novedosa particularidad de que estos caracteres/fuentes son de tu propia creación.

El proceso de crear su propio fuente es sencillo. Se neceita bajar la plantilla del sitio web. Luegoescribimos con nuestra letra la misma fuente. Se escanea la hoja. Subimos la imagen a su servidor. Previsualizamos el resultado final y hacemos pruebas. Y listo, la fuente ha sido creada y lista para descargar parainstalar en nuestro Sistema Operativo. YourFonts es un servicio gratuito que funciona en sistemas Windows, Mac OS X y Linux.

Lamentablemente la pagina e instrucciones estan en ingles … pero puedes buscar ayuda de alguien para poder utilizar esta interesante herramienta si no sabe singles.

99Chats : Crea una sala de chat para tu web

Internet nos permite varias pociones de interaccion en tiempo real y una de las opciones es el chat en un sitio web o blog para comunicarse entre los vistantes.

Si lo que deseas es incluir una sala de video chat en tu web o blog, vista Vawkr : Crear salas de videochat e incluirlas en tu pagina web o blog

99chats es una aplicación que permite crear salas de chat e incorporarlas en cualquier web, blog o perfil social gracias al código que ofrecen dos códigos a elegir, para integrarlo en nuestro sitio web, ya sea como sala en flash o en javascript y el enlace de acceso. Es necesario registrarse.

Cada sala de chat esta formada con una barra lateral a la derecha, donde se muestra los contactos, el área de las conversaciones y el campo donde escribiremos el texto, y entre ambos, las opciones para cambiar el estilo de nuestros textos, e incluso nuestros estados.

99Chats le permite extender su interacción con sus visitantes con mensajería en tiempo real. Es gratuito y puede ser personalizado, desde los colores, fondo y fuentes hasta el estilo de borde, tamaño y diseño, para ajustarse perfectamente a cualquier diseño de página web. Ttiene un peso ligero y solo ocupa 65 Kb, además soporta mensajería privada mediante pestañas con los miembros del chat e incluye detección de desbordamiento de memoria y mecanismos de prevención también.