background preloader

Bookmarklets

Facebook Twitter

Getting Started - schema.org. Most webmasters are familiar with HTML tags on their pages. Usually, HTML tags tell the browser how to display the information included in the tag. For example, <h1>Avatar</h1> tells the browser to display the text string "Avatar" in a heading 1 format. However, the HTML tag doesn't give any information about what that text string means—"Avatar" could refer to the hugely successful 3D movie, or it could refer to a type of profile picture—and this can make it more difficult for search engines to intelligently display relevant content to a user.

Schema.org provides a collection of shared vocabularies webmasters can use to mark up their pages in ways that can be understood by the major search engines: Google, Microsoft, Yandex and Yahoo! You use the schema.org vocabulary, along with the microdata format, to add information to your HTML content. While the long term goal is to support a wider range of formats, the initial focus is on Microdata. 1. 1a. 1b. itemscope and itemtype Back to top 1d. SEO Bookmarklets. Accessibility-Checking Favelets - Little scripts that you can save to test for web accessibility.

Please note that this page requires JavaScript for it to function.. Please read the instructions if you don't know how to use these favelets. Highlight some text on your web page (or perhaps some text that you are entering into a <textarea>, for example a Blogger or MovableType post), then run this favelet - the highlighted text will be passed through the Acrobot, converting all your acronyms and abbreviations.

Please note: this has been tested in IE5 and IE6 on Windows but does not always appear to work with <textarea>s in Mozilla (although any other text highlighted on the page does work OK). [Thanks to Matt for providing!] When designing a web page, you will often use id attributes in <div> tags to enable precise positioning using Cascading Style Sheets. This favelet highlights ALL <div> tags with a red border and reveals the id of that div. Exactly as above, but this time only <div>s that have a class attribute are labelled. Alt attributes - images missing alt attribute. Web Development Bookmarklets. Web Development Bookmarklets These bookmarklets let you see how a web page is coded without digging through the source, debug problems in web pages quickly, and experiment with CSS or JS without editing the actual page.

(To keep bookmarklets in order to use them on other web pages, drag them to your Bookmarks Toolbar. Or, install them all at once.) Browsers: is Internet Explorer for Windows, is Netscape 7 or Mozilla, is Netscape 4, and is Opera. Details Opens a JavaScript Shell and allows it to access the current page. Opens a JavaScript Development Environment and allows it to access the current page.

Type in CSS rules to experiment or to create a temporary user style sheet. Creates a new window into which you can type CSS rules for the original page. Experiment with changes to the page's style sheet. Similar to "test styles". This bookmarklet supports inline and linked style sheets, imports, and style sheets with data: URLs (such as those created by "test styles").

Also shows classes (e.g. Favelets. Authoring microformats Multivalidator: HTML, CSS & HREFs all in one. Screen sizes Readability Learning Scripts etc. Enhanced User Interface Translation Summary Add any of these Favelets to your Favorites, or drag them to your Favorites Toolbar or Bookmarks Bar. Introduction Combine Internet Explorer's Toolbar Favorites feature and mini applications ( applets ) written in jscript, stamped with a "javascript:" URI scheme, and you have Favelets - a way to add features built from DHTML to your browser.

I have found Favelets useful for: Authoring: Validating the HTML, CSS and HREFs in pages I've written, and testing how my layouts reflow to various screen sizes. Questions? Miscellaneous Bookmarklets. Miscellaneous Bookmarklets These bookmarklets add to the simple Back and Forward navigation built into web browsers, and do other miscellaneous things. (To keep bookmarklets in order to use them on other web pages, drag them to your Bookmarks Toolbar. Or, install them all at once.) Browsers: is Internet Explorer for Windows, is Netscape 7 or Mozilla, is Netscape 4, and is Opera. Details Goes up a directory from the page you're viewing. For example, takes you from to and then to top ( Goes to the top level of the site. For example, takes you from to Increases the last number in the URL by 1. For example, takes you from to Suggested by Brian Bober and Alan Horkan.

Decreases the last number in the URL by 1. For example, takes you from to Adds the page you're viewing as sidebar panel. Link Bookmarklets. Link Bookmarklets These bookmarklets let you quickly search, open, or list links on whatever page you're viewing. (To keep bookmarklets in order to use them on other web pages, drag them to your Bookmarks Toolbar. Or, install them all at once.) Browsers: is Internet Explorer for Windows, is Netscape 7 or Mozilla, is Netscape 4, and is Opera. Details Lists all links on the page containing the specified text. Prompts for a string (word or phrase), and then lists links on the page that contain that string in a new window. Opera/NS4: the text of the link won't be shown or searched (only the URL will be). Opens a window showing all images linked to from the current page. Use this on a page or directory listing where many of the links are links to images, such as Opera 6 bug: to load the images after running the bookmarklet, press G three times.

Opens a window showing all pages linked to from the current page. An example of where this is useful is the Tiny Sepuku page. More Must-Have Bookmarklets Than You Can Swing a Browser At. I’ve seen a lot of links to Special Geek to Live – Ten Must-Have Bookmarklets which lists the top ten must-have bookmarklets to help your online research and browsing. I thought I’d do you better and offer you more must-have javascript bookmarklets than you can swing a bookmarklet at – if you could swing a bookmarklet. Can you? A bookmarklet is a javascript found inside of a link. Click and drag the link to your Favorites or Bookmarks sidebar, or your links bar and it stores the javascript in a link. When viewing a web page, you can click the javascript link to initiate the little program or action. Written in Javascript, they are designed to work with just about any browser, though there are a few browser specific bookmarklets. If you are inspired, I’ve included some helpful articles so you can learn how to write your own Javascript Bookmarklets.

If you know of any other bookmarklets that I’ve missed, please add them. General Collections of Bookmarklets Bookmarks for Specific Browsers: