background preloader

Web Development Bookmarklets

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?

As of July 2012, Google Notebook has shut down and all Notebook data should now be in Google Docs. As previously announced, in most cases we were able to automatically export the Notebook data, so please visit Google Docs. Also please update any bookmarks or links to Notebook so that they point to Docs instead. Here are answers to some questions about this transition. Where is my auto-exported notebooks data? For auto-exported documents, you should see a new document in Google Docs for each notebook you had in Google Notebook. If you are having trouble finding the new docs, search for “Imported from Google Notebook” in the doc list. What happened to public notebooks? All public notebooks were unshared. What happened to bookmarks stored in bookmarks.google.com? Bookmarks data is not affected; you will still be able to access your bookmarks at bookmarks.google.com. I’ve never used Google Docs. The Google Docs team has put together a getting started page here. Why did you make this transition?

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. When designing a web page, you will often use id attributes in <div> tags to enable precise positioning using Cascading Style Sheets. Exactly as above, but this time only <div>s that have a class attribute are labelled. Displays all images on the page, alongside their alt attributes - useful for checking that alt attributes match up with the image. Alt attributes - images missing alt attribute Displays all images on the page that do not have any alt attributes - useful accessibility checking tool. Does exactly what it says on the tin ... Show table headings <th> Show table cells <td>

Tutorial de Selenium IDE, Automatizando las pruebas | JOURMOLY Si hay algo que me aburre es hacer Testing de sistemas, sobre todo si se trata de probar el funcionamiento de varios formularios varias veces seguidas. Las pruebas son muy repetitivas, aburridas, pero imprescindibles y es por eso que, salvo que tengas un equipo de gente dedicada al testing a tu disposición, Selenium IDE te interesará si o si. Selenium es, en pocas palabras, un juego de herramientas que permite probar sistemas web de manera automatizada . Las pruebas que realiza son como las que haría cualquier usuario desde un navegador, con la ventaja de que las hace mucho mas rápido y nos evita el trabajo repetitivo de probar una y otra vez lo mismo “a mano” . ¿Cómo funciona Selenium IDE? No hace magia y no adivina lo que queremos probar, por lo tanto debemos enseñarle de alguna manera que es lo que queremos para que después pueda reproducirlo automáticamente las veces que necesitemos. ¿Cómo le enseñamos? Descargando e instalando el IDE El IDE es un plugin para Firefox.

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:

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. 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. 1. 1a. Your web pages have an underlying meaning that people understand when they read the web pages. 1b. itemscope and itemtype Let's start with a concrete example. <div><h1>Avatar</h1><span>Director: James Cameron (born August 16, 1954)</span><span>Science fiction</span><a href=".. To begin, identify the section of the page that is "about" the movie Avatar. By adding itemscope, you are specifying that the HTML contained in the <div>... 1d.

Related: