2009-06-15

Las mejores 32 herramientas tipográficas de la web

En este útil artículo les brindaremos todo tipo de información acerca de útiles herramientas que los pueden ayudar a trabajar con las tipografías de sus sitios web.

Hay herramientas para que creen sus propias fuentes, para que encuentren fuentes que necesitan o desean, herramientas siFR y recursos, algunos plugins Firefox y varios relacionados con CSS. ¿Qué esperas para conocerlos?

1.TypeTester

Typetester es una aplicación online para comparar las fuentes en la pantalla. Su rol principal es facilitar la vida del diseñador web. Cómo las fuentes nuevas están atadas a los sistemas operativos, la lista de fuentes comunes se actualizará.

2.IdentiFont

Identifont es el mayor directorio de typefaces de Internet. Te provee de un gran número de propiedades para ayudarte a localizar fuentes y encontrar información acerca de las mismas:

  • Encontrar fuentes por apariencia
  • Encontrar fuentes por nombre
  • Encontrar fuentes por similitud
  • Encontrar fuentes de símbolos e imágenes
  • Encontrar diseñadores y publicadores

3.WhatTheFont (MyFonts)

Podrás subir una imagen de una fuente que viste y no sabes cuál es para encontrar la que más se parece dentro de la base de datos del sitio.

4. Typophile Forum

Uno de los mejores foros relacionados con la tipografía, donde puedes encontrar información muy útil, hacer todas las preguntas que tengas y encontrar gente con experiencia en el tema.

5. TypeNavigator

Este sitio te guiará a traves de distintas selecciones visuales para acercarte a la fuente de tus sueños basándose en cómo la recuerdas o visualizas.

typenavigator-font-toolbox

6. Better CSS Font Stacks

Una gran cantidad de fuentes geniales para tu hoja de estilos CSS, puedes bajarlas todas en este documento pdf.

7. CSS Type Set

Crea tu hoja de estilos CSS de forma online sin la necesidad de saber nada de código.

8. FontMatrix

Matriz de fuentes asociadas con los sistemas operativos Mac y Windows y los paquetes Microsoft Office y Adobe Creative Suite.

9. HTML-Ipsum

Pequeño sitio web con un demo de texto Ipsum en las etiquetas HTML. Sólo haz clic en los títulos para copiar el texto al portapapeles.

10. Microsoft Typograhpy : Fonts And Products

Aquí puedes buscar fuentes utilizadas por Microsoft en sus productos simplemente seleccionando el software en particular. También puedes obtener una lista de las fuentes que utiliza un software en particular, o por el contrario, ver cuáles aplicaciones utilizan un cierto tipo de fuente.

microsoft-font-by-profuct-toolbox

11. TypeChart

Typechart
te permite previsualizar y comparar la tipografía web mientras recuperas el CSS.

Navega a través de estilos tipográficos y compara el rendimiento de Windows (ClearType) con el de las fuentes Apple.
Cada estilo corresponde con un “style ID”, lo que te permite anotar prototipos y recuperar el css mientras codificas.

12. Lorem Ipsum

Lorem Ipsum es simplemente el texto dummy de la industria del tipeo y la impresión.

El punto de usar Lorem Ipsum es que posee una distribución más o menos normal de las letras, haciendo que sea legible.

13. PXtoEM

Conversión sencilla de PX a EM con esta herramienta online.

14. The TTFTitles WordPress Plugin

Este plugin te permite utilizar imágenes para reemplazar el título de tus posts, eliminando el problema de adivinar cuáles fuentes son las que los usuarios finales pueden llegar a tener instaladas.

15. EM Calculator

Em Calculator es una pequeña herramienta JavaScript que te ayuda a hacer diseños CSS escalables y accesibles. Convierte el tamaño en pixeles a unidades relativas em, las cuales se basan en un tamaño de texto.

emcalculator

16. CSSType - Web Safe Typography on Screen for Pixel Perfectionists

CSSType te permite previsualizar y modificar texto con su aplicación online. Te da la posibilidad de modificar el texto, la fuente, el color, el tamaño, el fondo, el espacio entre letras, el alineamiento, etc. Finalmente, puedes obtener y generar el CSS para utilizarlo.

17. Font Burner

Font Burner es una herramienta que te facilita añadir nuevas fuentes a tu sitio, ya que posee un archivo de fuentes que funcionan universalmente en todos los navegadores y computadores. Añadiendo un simple bloque de código en tu página web puedes transformar tus titulares de aburridas fuentes de sistema a cualquier fuente de calidad que encuentres en la web.

18. Convert TrueType Font To Sifr Flash File

Sube fuente True Type y recíbela como un archivo sifr flash en tu email.

19. Baseline Rhythm Calculator

Sólo tipea un tamaño de fuente base y una altura de línea, haz clic en el botón “Calcular” y toda la página cambiará de acuerdo a los datos que introdujiste. Cuando estés satisfecho, descarga el archivo CSS generado.

20. STC Font Browser

Esta aplicación flash te permitirá previsualizar rapidamente las fuentes activas en tu sistema.

stcfontbrowser

21. Fontifier

Fontifier te permite utilizar tu letra a mano alzada para el texto que escribes en tu computadora. Convierte una muestra escaneada de tu letra en una fuente a mano alzada que puedes utilizar en tu procesador de texto o programas gráficos, como cualquier otra fuente.

22. FontStruct

FontStruct es una herramienta de construcción de fuentes gratuita que te permitirá crear tipografías rápidamente en base a formas geométricas que dispondrás de acuerdo a tu gusto en el patrón tipo parrilla que el servicio te brinda.

Una vez que hayas terminado, FontStruct genera fuentes TrueType de alta calidad listas para usar en cualquier aplicación Mac o Windows.

23. BitFontMaker

Editor de mapa de bits de fuentes online para Windows y Mac.

24. Flipping Typical

Flipping Typical es una forma de explorer las typefaces populares que tienes en tu computadora.

25. Font Tester

Font Tester es una herramienta online gratuita para comparación de fuentes. Te permite previsualizar fácilmente y comparar diferentes fuentes con varios estilos de fuente CSS aplicados en ellas. Una vez que estés satisfecho el sitio generará el código CSS necesario para reproducir esos estilos en tu sitio web.

fonttester

26. CSSTXT : Creates A Style

Es un generador de estilo CSS con texto que posee propiedades avanzadas, genera archivos css sin saber nada de codificación.

27. Font Picker

Esta simple herramienta te muestra todas las fuentes que tienes instaladas en tu computadora y te ayuda a seleccionar la mejor para el proyecto que deseas llevar a cabo.

28. Linotyle Font Finder

Si posees un conjunto limitado de letras, como en un logo o titular, ingrésalas a continuación.

Luego te harán preguntas que sólo pueden ser contestadas con las letras que especificaste.

29. abcTajpu 1.6.5 Firefox, Thunderbird Plugin

Ingresa las letras con acentos, los caracteres internacionales o símbolos en Firefox o Thunderbird, de forma sencilla utilizando un menu contextual o por macro de teclado.

30. Wordle

Wordle es un juguete para generar nubes de etiquetas en base a texto que tú brindas. Puedes darle formato a tu nube con diferentes fuentes, disposiciones y esquemas de colores. Una vez finalizada la nube se generará una imagen que podrás usar como prefieras.

wordle

31. FontFinder

Obtén todos los estilos CSS del texto seleccionado en Firefox / Thunderbird.

32. Copy Plain Text - Copies text without formatting

¿Alguna vez copiaste algo a Thunderbird u Office y te molesto que el formato del texto también se copiara? Esta extensión te permite copiar el texto sin formato.

Fuente: 1st WebDesigner

ComboBox sexy y simple con JQuery

ComboBox Sexy y simple con Jquery

Link al demos:
http://phone.witamean.net/sexy-combo/examples/index.html

2009-06-03

jQuery 1.2 Cheat Sheet


weblog

jQuery 1.2 Cheat Sheet

I’ve been looking for a solid cheat sheet ever since I started using jQuery. Download jQuery 1.2 Cheat Sheet v1.0 in PDF format

jQuery 1.2 Cheat Sheet v1.0


The size of wallpaper is 1280x960.


(2008.1.9 add)

Galeria de fotos con Jquery

jQuery Cycle

Official Website | Demo
jQuery Cycle

The jQuery Cycle Plugin is a lightweight slideshow plugin. Its implementation is based on the InnerFade Plugin by Torsten Baldes, the Slideshow Plugin by Matt Oakes, and the jqShuffle Plugin by Benjamin Sterling. It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and many transition effects. It also supports, but does not require, the Metadata Plugin and the Easing Plugin.

Pikachoose

Official Website | Demo
Pikachoose

Pikachoose is a lightweight Jquery plugin that allows easy presentation of photos with options for slideshows, navigation buttons, and auto play. Pikachoose is designed to be easily installed, easy to setup, and well... all around easy. Creating an image gallery shouldn't be a complex thing. I've created a new plugin that I'm packaging with PikaChoose called SliderJS.

s3Slider

Official Website | Demo
s3Slider

The s3Slider jQuery plugin is made by example of jd's smooth slide show script. I needed something like that for jQuery (for my web site kruskica.net). Since i didnt find it after a small research i decided to build it by my self.

Galleria

Official Website | Demo
Galleria

Galleria is a javascript image gallery written in jQuery. It loads the images one by one from an unordered list and displays thumbnails when each image is loaded. It will create thumbnails for you if you choose so, scaled or unscaled, centered and cropped inside a fixed thumbnail box defined by CSS.

slideViewer

Official Website | Demo
slide viewer

slideViewer is a lightweight (1.5Kb) jQuery plugin wich allows to instantly create an image gallery by writing just few lines of HTML such as an unordered list of images

Image Flow

Official Website | Demo
Image Flow

Image flow is inspired by Apple's cover flow. The javascript renders the cover flow effect without any noticeable flaw. Keyboard navigation (arrow keys), mouse scroll and dragging is supported. Very cool script to use.

jQuery Gallery Scroller

Official Website | Demo
jQuery Gallery Scroller

jQuery Gallery Scroller (jqGalScroll) takes list of images and creates a smooth scrolling photo gallery scrolling vertically, horizontally, or diagonally. The plugin will also create pagination to allow you to flow through your photos.

Spacegallery

Official Website | Demo
space gallery

I particularly love this one. It's really cool. If you are familair with Apple's mac os leopard. Yes, this image gallery display photo just like the time machine does.

Easy Slider

Official Website | Demo
easy slider

Easy Slider (as I call this plugin) enables images or any content to slide horizontally or vertically on click. It is configurable with css alone. So, basically you link to plugin file, set the content up and style it with css.

jFlow

Official Website | Demo
jFlow

A pretty neat photo slider. It featured in nettut, if you try to make yourself a photo slider. Visit this site.

Supersized

Official Website | Demo
supersized

A fullscreen photo gallery. It resizes images to fill browser while maintaining image dimension ratio. No extra whitespace, no scrollbars - the entire browser window is always filled.

Simple jQuery Slideshow

Official Website | Demo
simple jquery slideshow

A simple tutorial, and it shows us how to create a really simple jquery photo slideshow.

CrossSlide

Official Website | Demo
CrossSlide

CrossSlide is a jQuery plugin that implements in Javascript some common slide-show animations, traditionally only available to the web developer via Adobe Flash™ or other proprietary plugins. CrossSlide builds upon jQuery's animation facility, so it is as portable across browsers as jQuery itself (a lot.)

Innerfade

Official Website | Demo
innerfade

Fondo o Banner con fotos despalsables..

HoldFire

Hold Fire

Paul J. Noble

Paul J. Noble" class="img" width="600" height="150">

A Simple Measure

A Simple Measure

X3 Studios

X3 Studios

Prat

portesprat

Newsberry

Newsberry

Spundo

Spundo

Redo PC

Redo PC" class="img" width="600" height="150">

Vida girl

Vida girl

Qilayout

Qilayout

Web Design Diensten

Web Design Diensten" class="img" width="600" height="150">

Net dreams

net dreams

Eyedraw

Eyedraw

Gastonjah

gastonjah

Hyperpot

hyperpot

Icondock

Icondock

Monofactor

monofactor

Power Balance

power balance

verdeo

verdeo

Oh Media

Oh Media

Formulario jquery + ajax + php

http://www.queness.com/post/160/create-a-ajax-based-form-submission-with-jquery
Fuente : http://www.queness.com/

10 Editores online con jquery

MarkitUp - jQuery

Official Website | Demo
MarkitUp

markItUp! is not meant to be a "Full-Features-Out-of-the-Box"-editor. Instead it is a very lightweight, customizable and flexible engine made to meet the developer's needs in their CMSes, blogs, forums or websites. markItUp! is not a WYSIWYG editor, and it never will be.

  • Fast and unobtrusive integration
  • Support for keyboard shortcuts
  • Ajax dynamic preview
  • Supported: IE7, Safari 3.1, Firefox 2, Firefox 3. IE6 and Opera 9+ as-is.
  • Licence: MIT/GPL
  • File: Packed naked engine is about 6.5Kb.

jWYSIWYG - jQuery

Official Website | Demo
jWYSIWYG

This plugin is an inline content editor to allow editing rich HTML content on the fly. It's an alternative to WYMeditor with much less features. With a small file size less than 17Kb 26Kb total and only 9Kb 18Kb of code and 7Kb packed, the main concept is to keep it simple, not all users need font coloring or create tables, just the basic.

  • GNU General Public License v2
  • Compact and lightweight
  • Ajax dynamic preview
  • Browser friendly

Lightweight RTE- jQuery

Official Website | Demo
jWYSIWYG

I have made this Rich Text Editor as simple as possible to be easily changed according your needs.

  • Super lightweight 7kb uncompressed
  • Compatible with major browsers
  • Degrade gracefully
  • GNU General Public License

HTMLBox - jQuery

Official Website | Demo
HTMLBox

Cross-browser interactive open-source HTML / XHTML textarea built on top of the jQuery library. Tested with Mozilla Firefox, Inrernet Explorer, Opera, Netscape and Safari. The integration of HtmlBox into Content Manegement Systems, Forums, Guest Books, Contact Forms is as easy as a childs play.

  • Easy Integration.
  • Multiple Browser Support.
  • Small Size. Size of 15kb (11kb minimized)
  • XHTML Output Possible.
  • Ajax Integration Supported.
  • User Manual. A complete user manual, that will guide you through every step of integrating HtmlBox into your application and customizing it.

D Small Rich Text Editor - jQuery

Official Website | Demo
D Small Rich Text Editor

This piece of code creates a Rich Text Editor ("RTE") from an IFRAME element. Yes, I know, there are tens of such scripts, and most of them are probably more sophisticated than mine, but my script's purpose is to provide enough basic functionality while having the smallest footprint possible.

  • Small (~18k) footprint! (Packed/Minified JS, Plugins & CSS sum to 12k w/o GZIP, HTML can be reduced to ~3k using GZIP, Images (w/o emoticons) are less than 3k)
  • Cross-browser
  • All basic Rich Text functionality
  • Plugin-enabled
  • Image Upload via AJAX (using the AjaxFileUpload plugin).
  • Resizing of text area.
  • Valid XHTML 1.0 Transitional markup (Note: this refers to the editor's markup and not to it's generated content which may or may not be valid!).
  • HTML Cleanup

WYMEditor - jQuery

Official Website | Demo
WYMEditor

WYMeditor is a web-based WYSIWYM (What You See Is What You Mean) XHTML editor. WYMeditor's main concept is to leave details of the document's visual layout, and to concentrate on its structure and meaning, while trying to give the user as much comfort as possible (at least as WYSIWYG editors).

  • XHTML strict + CSS compliant
  • No font or text formatting, sizes or colors - WYMeditor is CSS-based
  • Designed to be easy to integrate into your application
  • No installation needed - this is 100% Javascript code - no plugin, no extension
  • Image, link, table support
  • Skins support via CSS
  • APIs, plugins support
  • Free and Open Source
  • Major browsers support

TinyMCE - non-jQuery

Official Website | Demo
TinyMCE

TinyMCE is a platform independent web based Javascript HTML WYSIWYG editor control released as Open Source under LGPL by Moxiecode Systems AB. It has the ability to convert HTML TEXTAREA fields or other HTML elements to editor instances. TinyMCE is very easy to integrate into other Content Management Systems.

  • Easy to integrate - Only a few lines of code needed.
  • Customizable - Themes and plugins, block invalid elements and force attributes.
  • Browserfriendly - Mozilla, MSIE, FireFox, Opera, Safari and Chrome.
  • Lightweight - PHP/.NET/JSP/Coldfusion GZip compressor, Makes TinyMCE 75% smaller and a lot faster to load.
  • AJAX Compatible - You can easily use AJAX to save and load content!
  • International - Multilanguage support using language packs.
  • Open Source - Free under the LGPL license, millions of ppl help test and improve this editor every day.

fckeditor - Non-jQuery

Official Website | Demo
fckeditor

This HTML text editor brings to the web much of the power of desktop editors like MS Word. It's lightweight and doesn't require any kind of installation on the client computer.

  • Multi browser compatibility
  • Outputs XHTML 1.0
  • CSS support for better integration with your web site
  • Font formatting: type, size, color, style, bold, italic, etc
  • Text formatting: alignment, indentation, bullets list, etc
  • Cut, Paste, and Paste as Plain Text, Undo and Redo
  • Paste from Word cleanup with auto detection
  • Image insertion, with upload and server browsing support
  • Right click context menus support
  • Plugins support
  • Spell checker
  • Lightweight and fast
  • Automatic browser detection and customization

Yahoo YUI Rich Text Editor - Non-jQuery

Official Website | Demo
Yahoo UI RTE

The Rich Text Editor is a UI control that replaces a standard HTML textarea; it allows for the rich formatting of text content, including common structural treatments like lists, formatting treatments like bold and italic text, and drag-and-drop inclusion and sizing of images. The Rich Text Editor's toolbar is extensible via a plugin architecture so that advanced implementations can achieve a high degree of customization.

Xinha - Non-jQuery

Official Website | Demo
Xinha