Juglar / v.CIII

Un bookmarklet (o favelet) es un enlace especial que se agrega a tus marcadores (o favoritos), y que permite simplificar alguna operación, normalmente usando javascript.

Para instalarlo, basta con arrastrar el enlace que lo contiene (en este artículo los pongo en negrita) hasta la barra de tu navegador.

GmailThis (vía Genbeta): Facilita el envío de un correo desde Gmail, con enlaces y textos de la web en la que estás.

Busca en la wikipedia (vía X-Blog): Para buscar en la wikipedia.

Go to Referrer (vía Jesse Ruderman): Vuelve a la página desde la que llegaste a la presente.

Google Search (vía MineZone Blog)

del.icio.us linkbacks (vía Lifehacker): Muestra en una ventana los usuarios delicious, las descripciones y las etiquetas que han asignado a esa web.

Elevator Up (vía blogpocket): Subir un nivel en el dominio de la web que estás leyendo.

Diccionario de la Real Academia de la Lengua Española (vía Avalúo)

blummy: Visualización más agradable de tus bookmarklets, que puedes importar a otros ordenadores.

OnlyWire: Para enviar tus marcadores a varios servicios a la vez.

Enfocados a desarrollo web:

EditCSS (vía Matthew Schinckel): Despliega en un editor de texto el CSS de la página que estás viendo, pudiendo modificarlo y observar el efectos de los cambios inmediatamente.

Resize (vía coda.coza): Redimensiona la ventana del navegador a los parámetros que indiques.

MODIv2 (Mouseover DOM Inpsector)

CSS Debug Toggle (web)

Favelet Suite (web)

[liorean@web-graphics.com]

Bookmarklet Generator for Searches

Listados de bookmarklets:
Jesse’s Bookmarklets Site
Pixy: Let’s Favelets
Tantek - Favelets
Accessibility-checking favelets
web BM’s
ALL THE BOOKMARKLETS!

Muchos servicios ofrecen esta técnica para facilitarle el trabajo a sus usuarios. Así, Bloglines tiene sus imprescindibles botones de suscripción fácil, WordPress ofrece su edición rápida, y del.icio.us ya comenté que desplegaba grandes posibilidades.

Ver también: Herramientas para solucionar problemas CSS

Es algo que no me convence, pero entiendo que es necesario conocerlo (si eCuaderno lo hace no será tan descabellado). Hay webmasters que deciden que los enlaces de su web deben abrir obligatoriamente nuevas ventanas, por lo que les incluyen el atributo target=’_blank’. Otros, la opción que me parece más razonable, dejan que sea el usuario el que decida si un enlace se abre en la misma ventana o en otra (o pestaña) a golpe de botón derecho del ratón. La opción intermedia es el siguiente código que deja un recuadro para que lo marque el usuario que desee que todos los enlaces se abran automáticamente en nuevas ventanas.

En la sección head:
<script language="JavaScript">
<!-- // thanks to randomwalks.com for this code
function targetLinks(boNew) {
if (boNew) where = "_blank";
else where = "_self";
for (var i=0; i<=(document.links.length-1); i++) {
document.links[i].target = where;
}
}
// -->
</script>
En el body, donde quieras que aparezca el recuadro:
<form><div>
<input type="checkbox" name="targetbox"
onclick="targetLinks(this.checked);">
enlaces abren ventanas<div>
</form>

Thanks to randomwalks.com
Intenta - Establecer links externos en ventana nueva y validar XHTML
Intenta - Dar la opción de abrir los enlaces en ventana nueva o no
Using JavaScript instead of target to open new windows | 456 Berea Street

He dejado de usar Bloglines para recordar lo que me interesa (aunque sigue siendo mi lector de feeds), decantándome por las bonanzas de del.icio.us (ver introducción).

Los bookmarklets que uso para gestionarlo:

- El habitual que proponen en http://del.icio.us/doc/bookmarklets. En mi caso sería:
javascript:location.href='http://del.icio.us/USUARIO?v=3&url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title)
Para instalarlo sólo tienes que añadir el siguiente enlace a tus marcadores (o arrastrarlo simplemente), y sustituir USUARIO por tu nombre de usuario en del.icio.us.
Guardar en del.icio.us
Cuando estás en una página que quieres guardar, lo pulsas y directamente entras en el formulario para guardarla con sus correspondientes etiquetas.

- Una variante sería que al presentar dicho formulario, estuviera ya directamente marcada una etiqueta. Esto tiene sentido cuando uses alguna muy habitualmente. En mi caso, distingo entre páginas que me gustan por el diseño (etiqueta inspiration) de todo lo demás.
javascript:location.href='http://del.icio.us/USUARIO?v=2&url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title)+'&tags='+encodeURIComponent("ETIQUETA")
Enlace para instalarlo, sustituyendo ETIQUETA por el nombre de etiqueta que quieres dejar predefinido:
Guardar con etiqueta…

- Super-Fast Delicious Bookmarklet, que hace todo lo anterior, y además cierra automáticamente la ventana del navegador.
javascript:u="USUARIO";q=location.href;e = "" + (window.getSelection ? window.getSelection() : document.getSelection ? document.getSelection() : document.selection.createRange().text);p=document.title;window.location.href="http://del.icio.us/"+u+"?jump=doclose&tags="+escape("ETIQUETA")+"&url="+escape(q)+"&description="+escape(p)+ "&extended=" + escape(e).replace(/ /g, "+");
Su enlace, no olvidando sustituir:
Guardar con etiqueta… y cerrar ventana

Arrastre (Drag):
kusor xdhtml - BrainJar.com: Generic Drag
Edit in Place with JavaScript and CSS
Behaviour : Using CSS selectors to apply Javascript behaviours
Paint the Tiger • Carve the Swan » Floater
Signal Example
Prototype Window Class : Introduction
Mootools Draggable Window
NoFunc · Drag Drop
DragResize - TwinHelix
Signal Example

Generadores:
The JavaScript Source: Script Generators

Presentaciones:
HTML Slidy (1)
S5: A Simple Standards-Based Slide Show System
presentacular - Adding effects to S5 with script.aculo.us
DOMSlides - Yet another standards based presentation slide system
Javascript crossfader
Amberjack: Site Tour Creator - Simple. Free. Open Source.

Ejemplos web:
Kyle Cato - Web Design - Graphic Design

Mostrar el código HTML y CSS:
event target
Get Attribute Style on Mouseover
MochiKit Example Source Viewer

Resaltar palabras:
Add and remove Spans

Ventanas pop-up:
Intenta - Pop-up de dimensiones autoajustables
Intenta - Abrir popup centrado con javascript
Intenta - Abrir una ventana con efecto de redimensionamiento
Intenta - Abrir varias ventanas mediante un sólo enlace
aNieto2K - » Pop-ups accesibles con Javascript
jWindow - open up your web apps
ModalBox

Inclasificados:
Intenta - Refrescar automáticamente la página con Javascript
No click links
kusor xdhtml - Introducción al Modelo de Eventos del DOM
moo.fx - the next small thing
The Idiot’s Guide to moo.fx
jsScrolling
Como hacer un shelf ( parte I ) at BlogFirst
jturner » Javascript pagination in yer face
AJAX Feedback Mechanism
fleXcroll: Cross Browser Custom ScrollBar script by Hesido
moo.Playground - Here is where the small widgets come from …
Icebeat | Window.Growl
NoFunc · Text Scroller
NoFunc · Universal Fade
Crear iframes dinámicamente mediante Javascript en Intenta
arc90 lab : tools : Link Thumbnail
HV Inline Scrollbox - TwinHelix
Wall

Recopilatorios de scripts:
My Favorite Javascripts for Designers: Blakems.com
DHTML Examples
Dynamic Drive DHTML
JavaScript Toolbox
Web Development, JavaScripts for Download
script.aculo.us - web 2.0 javascript
Gamarod JavaScript
Yahoo! UI Library
Code Snippets: javascript code
Max Kiesler - Downloadable AJAX Galleries, Slideshows and Effects
amix.dk/projects - Current hot projects
DHTMLgoodies.com
Solutoire.com - Ajax Resources
Uize JavaScript API
15 Days Of jQuery
Toys - dhtml libraries, demos and applications
CSS Lab » JavaScript, Toolkit y demases
Rico
Bernie’s Better Animation Class
script.aculo.us Quick Reference
bytefx :: simple effects in few bytes
Ajax Digest // Drag&drop javascript libraries review
ThickBox
Scriptomizers
MochiKit.Animator Demos
JAVASCRIPT MOTION TWEEN
UIZE JavaScript API
s@rdalya - s@rm@l dynamic framework
Rico
qooxdoo
Javascript Toolbox
JavaScript Libraries

Tutoriales:
JavaScript Ya

Horizontales simples
Blog de Jaime Olmo: De listas a menú horizontal usando CSS
Intenta - Cómo hacer un menú horizontal con CSS
Turning a list into a navigation bar
SimpleBits: Mini Tabs, Mini-Tab Shapes.
Horizontal Toolbar List with Access Keys
Listamatic: (1), (2), (3), (4), (5), (6), (7), (8), (9), (10), (11), (12), (13), (14)
Stu Nicholls: (1), (2), (3)
Adactio Elsewhere: Small pieces of me, loosely joined
Bulletproof Slants
Inline Mini Tabs
Horizontal List Demo
Dynamic Drive CSS Library- Horizontal CSS Menus

Horizontales con tabs sin imágenes
Listamatic: (1), (2), (3), (4), (5), (6)
CSS Tabs | unraveled
Example of CSS-driven tabs
SimpleBits | Simplified CSS Tabs

Horizontales con tabs de bordes redondeados sin imágenes
Stu Nicholls: (1), (2), (3), (4)
CSS Tabs with Submenus

Horizontales con tabs imágenes - efecto hover
CSS Lab » Menú horizontal y algo +
SimpleBits: Accessible Image-Tab Rollovers
SuperfluousBanter: Navigation Matrix
A List Apart: Sliding Doors of CSS
456 Berea Street: Inverted Sliding Doors Tabs
sitepoint: CSS and round corners
CSS World: Tabs
TJK design Tabs menu
Stu Nicholls
alex.netwindows.org: CSS Rollover example: (1), (2), (3)
Sliding doors with one image
CSS and round corners: Making accessible menu tabs
Relatively Absolute: Cross-Browser CSS Tabs With Rollover
Example A. Doors and Mountaintops
Menu with CSS tags and before/after
Navigation placement demonstration
UL tab menu - Nested lists | Lab | 456 Berea Street
Centered Menu
Free CSS Navigation Menu Designs at exploding-boy.com
Free CSS Navigation Menu Designs at exploding-boy.com
Centered Menu
Dragon Labs - The Ultimate Tabbed Menu

Horizontales con tabs que cambian el contenido
Tabtastic
W3C: A Tabbed Interface
BrainJar.com: Tabs
Silverorange Labs: Updated Simple CSS Tabs
Non-Troppo: CSS Tabbed Navigation: (), (2)
Kalsey Consulting Group: CSS Tabs
Navegación: Pestañas con CSS
BrainJar.com: Tabs Demo
stu nicholls | CSS PLaY | cross browser tabbed pages with embeded links
Dragon Labs - The Ultimate Tabbed Menu - Ajax Tabtastic Demo
Dragon Labs - The Ultimate Tabbed Menu - Ajax Tabtastic Demo
JavaScript Tabifier automatically create an html tab interface
DOMTab - Navigation tabs with CSS and DOMscripting
Dynamic Drive DHTML Scripts- Ajax Tabs Content script
JavaScript Tabifier automatically create an html tab interface
Intenta » Crear una navegación por pestañas con AJAX y CSS. Primera Parte
Intenta » Crear una navegación por pestañas con AJAX y CSS. Segunda Parte

Horizontales con imágenes - efecto hover
Listamatic: (1), (2), (3), (4)
Stu Nicholls
Alsacreations
CSS Based Navigation
Adjacent Menu Effect
Menu with multiple hover effects and without preload
Float Mini Tabs
Hoverbox Menu | Design Meme
ervdesign » Menú con lista más css con efecto :hover

Horizontales con submenús verticales
Alsacreations
Listamatic2
Stu Nicholls
Menu horizontal à plusieurs niveaux
Ibilab.net: Créer des menus en cascade, c’est simple !
positioniseverything.net: Deluxe CSS Dropdowns and Flyouts
htmldog: the Suckerfish
htmldog: Son of Suckerfish Dropdowns
Iubito’s CSS menu
Drop Down Llama Menu
aplus :: ADxMenu: (1), (2), (3)
Vertical DHTML dropdown menu with YADM
Pure CSS Pulldown Menus
CSS Popups
CSS Menu - Horizontal

Horizontales con submenús horizontales
Alsacreations
A List Apart: Hybrid CSS Dropdowns
Veerle’s blog: 2 level horizontal navigation in CSS with images
TJK design CSS-based Dropdown with a twist
aplus :: ADxMenu
CSS Menu with tootips without javascript

Verticales simples
Listamatic: (1), (2), (3), (4), (5), (6), (7), (8), (9)
Stu Nicholls : (1), (2), (3), (4), (5), (6), (7), (8), (9), (10)
Seth’s new vertical list
A definition list menu
Consejos en la programación de listas
Macworld: Secrets: CSS tricks for custom bullets
WebEstilo: Menú sencillo y elegante
Intenta - Efecto “sobre” en un bloque de elementos
Dynamic Drive CSS Library- Vertical CSS Menus

Verticales con imágenes - efecto hover
e-lusion: free menu designs
Wellstyled.com: Fast Rollovers Without Preload
Alsacreations
Listamatic
Stu Nicholls: (1), (2)
CSS/edge - meyerweb.com: (1), (2), (3)
Menu with multiple hover effect without image preload: (1), (2).
Project Seven Development: Default PVII Document
News List | Lab | 456 Berea Street
Free CSS Vertical Menu Designs at exploding-boy.com
Free CSS Vertical Menu Designs at exploding-boy.com
stu nicholls | CSS PLaY | a css magnifier menu

Verticales con tabs que cambian el contenido
Dynamic page elements
:target

Verticales con submenús verticales
A List Apart: Horizontal Drop Down Menus
htmldog: Son of Suckerfish Dropdowns:
whatever:hover cssmenu
Alsacreations: (1), (2)
BC Horizontal UL Menu
CSS/edge - meyerweb.com
:target Sidebar
Accessible and styleable drop down menu with DOM and CSS
CSS vertical navigation list
Afficher Masquer des calques sans javascript
Drop-Down Menus
CSS Menu - Vertical
Max Design - Nested lists used to create a simple folder metaphore
Hierarchical Sitemap with Dashed Lines
Pure CSS menus

Múltiples columnas o filas
Novitski Software: Flowing a list across multiple columns
CommunityMx: Multiple Column Lists
Listamatic: Copongcopong’s Pop Pad List

Fijos
W3C: Fixed Menus
Pop-Up Menus

Curiosos
W3C: A Confetti Menu
Alsacreations: CSS menus gallery
Westciv: a navbar using lists
Copongcopong’s Pop Pad List
maxdesign.com.au: Remote control CSS (revisited)
Sitemap Celebration, (rounded)
Folder Tree, Enlarger Button Menu, Hover Sidebar
CSS Menu—Click version
CSS Design: Night of the Image Map

Efectos javascript
Accessible Dropdown menu
gazingus.org - Using Lists for DHTML Menus, (2)
Apycom DHTML Menu: Cascading Drop Down Menus
A List Apart: Let Them Eat Cake
Drag & Drop Sortable Lists with JavaScript and CSS
Expanding Nested Lists
Collapsible Explorer navigation with pureDOMexplorer
easy-designs.net: Replace Select
Cut & Paste: Cool CSS Menu: (1), (2)
[brothercake] Docking boxes (dbx)
Vertical expanding menu in CSS
A List Apart - Complex Dynamic Lists: (1), (2), (3)
Dynamic Drive DHTML Scripts- DD Tab Menu
Intenta: Componentes: MenuBar I
JavaScript Menu. Deluxe Menu.
Tryit Editor v1.4
EffectsPack
gazingus.org - DOM-Scripted Lists, Revisited
JavaScript Toolbox - DHTML Expandable, Collapsable Tree
General Disposition for a Folder Tree I
panel
Basic DOM Menue I
General xhtml Menu Disposition
General Disposition for scroll out and back Menu
FreeStyle Menus - TwinHelix
Crack Ajax - Tabbed Interface Project
ypSlideOutMenus
Mini Slide Navigation | Sandbox | Stephen Clark (sgclark.com)
Intenta - Mini Slide Navigation con Flash y XML
Toggle (show/hide) elements in a Definition List
havocStudios: Ajax Tabs Demo
Ajax Workshop 2: Building Tabbed Content
DOMTab - Navigation tabs with CSS and DOMscripting
Accessible Website Menu: Ultimate Drop Down Menu 4.45 - List-based Semantic DHTML Menu
Alsacreations, XHTML and CSS drop-down menu
frequency decoder | animated miniTabs
CSS event:Selectors
Webmaster Libre » Menus desplegables con Javascript
Intenta » Menu con CSS y Javascript
Menú al estilo Slashdot - aNieto2K
Webmaster Libre » Archivo del weblog » DOMTab: Navegación por pestañas con CSS y DOMscripting
[brothercake] Docking boxes (dbx)
Expandable Sidebar Menu, el acordeón de jQuery - aNieto2K
FreeStyle Menus Demonstration

Generadores automáticos de menús
List-o-matic
The Amazing Rolloverer
Navbar Generator
List-u-Like CSS Generator
CSS Menu Generator :: Webmaster Toolkit

Programa para crear menús: HighDots - CSS Tab Designer

Otras listas de listas:
CSS Navigation Menus, Tabs and CSS Navigation Techniques Showcase
CSS Navigation Techniques
Top 71 CSS Menus Navigation Tabs : Ultimate Web Developer Lists : eConsultant
13Styles.com

Ver también: Efectos con imágenes y CSS

Javascript es un lenguaje de programación para crear pequeños programas que realizan acciones dentro de una página web. Permite crear efectos especiales en las páginas e interactuar con el usuario. La programación de Javascript se realiza dentro del documento HTML.

Ejemplos de efectos con Javascript:

- Que al cargar nuestra web, se abra una ventana secundaria sin barras de menús que muestre el buscador Google (ejemplo):

<script>
window.open("http://www.google.com","","width=550,height=420,menubar=no")
</script>

- Mostrar una caja de texto emergente al cargarse nuestra web (ejemplo):

<script>
window.alert("Bienvenido a mi sitio web. Gracias...")
</script>

Más versiones: al abrir y al cerrar.

- Mostrar la fecha, tal que así:

<script> document.write(new Date()) </script>

- Botón para volver hacia atrás, mostrando la página anterior en el historial, tal que así:

<input type="button" value="Atrás" onclick="history.go(-1)">

Más ejemplos de DHTML Examples:
Mensaje al pulsar botón
Color cambiante al escribir en un formulario
Click para cambiar de imagen (y 2)
Doble click para ampliar texto
Texto cambiante al pasar el ratón
Marquesina vertical
Color parpadeante
Reloj digital
Imagen cambiante cuando se recarga la página

Ref:
desarrolloweb.com

Los elementos title sirven para describir la página a la que apunta un enlace:

<a href="http://www.enlace.com" title="Descripción de la página Enlace">Enlace</a>

En los navegadores, por defecto, aparece en un recuadro amarillo cuando pasa el ratón por encima del enlace:

Enlace

Podemos personalizar los elementos title de nuestra página web para que tengan una apariencia más llamativa, como hace Zootropo. En kryogenix.org descargamos un archivo en Javascript y su archivo CSS, que guardaremos en nuestro servidor y modificaremos a nuestro gusto (en el CSS es importante vincular una imagen para el fondo del title). Después, escribiremos en la sección head:

<script type="text/javascript" src="nicetitle.js"></script>
<link rel="stylesheet" href="nicetitle.css">

En 1976design.com y neo-dzygn-com, se desarrolla el proyecto incluyendo, entre otras cosas, access keys o accesos rápidos a los enlaces de un menú (con alt + otra tecla). Observad los ejemplos: uno y dos. Descarga de los archivos para esta versión.

Más:
HoverHelp
JavaScript Fading Tooltips
wg:Bubble Tooltips
Sweet Titles Finalized
qTip . css . learn . solarDreamStudios
Webmaster Libre
jTip - The Jquery Tool Tip
tooltip.js - version 0.2

Ref:
torresburriel.com