Hoy vamos a jugar un poquito con las fantanbulosas webfonts de Mr. Google

¿Qué que son las webfonts?

Eso se lo preguntas a Google. http://code.google.com/apis/webfonts/

¿Cómo funcionan?

Para usarlas debes incluir cada fuente tipografía webfont que quieras usar en la sección header del HTML con un:

<link href="http://fonts.googleapis.com/css?family=Orbitron:bold&subset=latin" rel="stylesheet" type="text/css">

Luego en la hoja de estilo de tu página la debes definir, recuerda también tirar de segundas opciones, tal como lo reflejamos aquí, aria o cualquier tipografía “serif” esto es más que nada porque hay navegadores viejos o paratos como el iPad on iOS 3.x a los que se le atragantan las Webfonts.

font-family: 'Orbitron', arial, serif;

¿Dónde previsualizarlas?

Supongo que como a mi, te interesa ver de forma rápida que fuentes hay por la red, que pinta hacen y tal para poderlas meter en tu página o blog, pues bien los chicos y chicas de Google te las muestran en la siguiente dirección:

http://code.google.com/webfonts

¿Dónde comparar las Google Fonts?

Como el visualizador de Google es quizá demasiado escueto te recomendamos otro que está algo mejor, no mucho, pero algo es algo dijo un geek cuando se encontró un byte en la sopa…

http://www.fontcomparer.com/

¿Donde estamos usando ya webfonts?

Nosotros hemos empezado a incorporarlas en un proyecto en el que estamos trabajando basado en ecOOmmerce.com nuestro software de tiendas virtuales.

Al rico recurso en HTML5 y CSS3:

HTML5 & CSS3 Resources for Designers
Updated: 2010-10-14 (new items highlighted below)
CSS3 Examples (including Media Queries)

http://thebox.maxvoltar.com/

http://hardboiledwebdesign.com

http://lostworldsfairs.com

http://www.informationarchitects.jp/

http://colly.com

http://hicksdesign.co.uk

http://jordandobson.com/better_rounded_border_demo/

http://www.designmadeingermany.de/magazin/5/

http://neography.com/experiment/circles/solarsystem/

http://neography.com/experiment/type1/

http://newadventuresconf.com/

http://maxvoltar.com/temp/nowplaying/

http://maxvoltar.com/sandbox/flipclock/

http://prandall.com/experimental/css3-backgrounds/

http://lab.simurai.com/css/umbrui/

http://trentwalton.com/css3/type/

HTML5 Examples (including Canvas)

http://www.chromeexperiments.com/

http://www.apple.com/html5/

http://www.apple.com/ipad/ready-for-ipad/

http://desandro.com/articles/close-with-canvas/

http://mezzoblue.github.com/PaintbrushJS/demo/

http://mugtug.com/sketchpad/

http://www.nihilogic.dk/labs/canvas2image/

http://www.rgraph.net/

http://videojs.com/

http://sublimevideo.net/

Tools, et al.

http://www.colorzilla.com/gradient-editor/

http://westciv.com/tools/

http://css3generator.com/

http://border-radius.com/

http://mothereffingtextshadow.com

http://modernizr.com/

http://selectivizr.com/

http://code.google.com/p/css3-mediaqueries-js/

http://code.google.com/p/ie7-js/

http://code.google.com/p/universal-ie6-css/

http://lessframework.com/

http://www.happyworm.com/jquery/jplayer/

http://macrabbit.com/cssedit/

http://html5reset.org/

http://html5boilerplate.com/

More reading

http://www.quirksmode.org/css/contents.html

http://reference.sitepoint.com/css/css3attributeselectors

http://diveintohtml5.org/

http://neutroncreations.com/blog/building-a-custom-html5-audio-player-with-jquery/

http://html5doctor.com/native-audio-in-the-browser/

http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/

http://24ways.org/2009/working-with-rgba-colour

http://24ways.org/2009/css-animations

http://24ways.org/2009/going-nuts-with-css-transitions

http://24ways.org/2009/cleaner-code-with-css3-selectors

http://zomigi.com/blog/deal-breaker-problems-with-css3-multi-columns/

http://realworldcss3.com/resources/

Hace un par de días os hablé de un accordion o slider que es como a mi me gusta llamarlo para que lo implementes en tu web, pues bien aquel era branded, es decir con copyright a menos que pagases la licencia, pues na… que he buscao y buscao hasta encontrar uno con ciertas similitudes pero gratuito, también basado en jQuery.

Enlace: http://www.madeincima.eu/blog/jquery-plugin-easy-accordion/

Demo en: http://www.madeincima.eu/samples/jquery/easyAccordion/

Descarga: Slider gratuito (123)