Snip Tip: Using PageSnip at Community MX
Searching for Troubleshooting Tips for PHP Code
If you use Dreamweaver, ColdFusion, Flash, FreeHand or Fireworks, there is a good chance that you have heard about Community MX. It has a great reputation for delivering high quality articles and tutorials on these products as well as standard subjects like CSS or PHP. The site is fresh and alive, with new content daily from a group of 30 authors who are experts in their fields. The Community MX website is located at www.communitymx.com.
PageSnip makes it easy for you to manage this valuable source of information.
This Snip Tip will show you how to snip a page from Community MX without any of the banners or site navigation. Then you can use PageSnip to print it, create a PDF of it or file it in your own personal knowledge base for easy access.
NOTE: Even though it may take you a few minutes to go through this short tutorial, the actual process of snipping content from any page on Community MX should take you less than 30 seconds.
Credit where credit is due
The Community MX article we are using in this Snip Tip is:
PHP Phreakout: Troubleshooting Tips for PHP Code
By: Steven Seiller
Thanks Community MX for providing this great free content!
Team PageSnip
Getting Started
Community MX is a great website to use with PageSnip. All of the articles have a Set for Printing link that assembles multi-page articles into a single page. Click this link to prepare the article you are viewing for use with PageSnip.
LOOK: The PageSnip “Highlight” feature was used to highlight this link before taking the screen capture!
Note: Not all websites offer a printer friendly version of a web page (one that has the banners and navigation removed). The Community MX website gets high marks for the Set For Printing option, but it would be even better if the navigation and banner were removed.
Snip option 1: The Full Page
If you are really in a hurry and don’t mind capturing the banner and navigation, you could use PageSnip to capture the article as a full page. To use this method, right-click anywhere on the web page, select the “PageSnip - Add Page” option from the browser context menu and your done.
When you use the Add Page method, PageSnip downloads the entire page including the HTML, CSS, JS and graphics files. The Community MX website snips well for this method (some sites do not).
Note: The best practice for snipping information is to avoid using the Add Page feature whenever you can. When you file a snip into your knowledge base, all of the text is extracted from the HTML and added to the searchable content. If you snip full pages, your search index can become polluted by words that were extracted from non-related content on the page. Everything still works, but you may get “false positives” when searching for keywords or terms.
Snip option 2: Just The Article
The Community MX website is well formed. Articles are displayed in a single DIV and there are no annoying ads inside the body of the article. This makes it easy to use the PageSnip Edge Finder to snip the entire article.
To activate the Edge Finder, right-click anywhere on the page and select the “PageSnip - Toggle Edge Finder” option from the browser context menu.
Activating the Edge Finder causes PageSnip to add a heavy dashed border around all the DIV and TABLE elements on the web page. As a result, the page seems to “explode” as shown here:
The DIV elements have a blue dashed border around them and TABLE elements have a red dashed border around them.
Since PageSnip is “context sensitive” (meaning that it works within the context of what you have selected), the Edge Finder makes it easy for you to select entire areas of the web page by simply positioning your mouse over the dashed line that surrounds it.
In case you’re concerned, don’t worry about what just happened to the web page! The effect exists only in your browser and it can be toggled On/Off with the context menu. You can also press F5 or click the browser refresh button to repaint the page.
Note: Edge Finder lines do not display in the snipped content or in a PDF created with PageSnip.
Now that PageSnip has given you a exploded view of the page, all you need to do is use the Edge Finder again to make your snip selection.
To snip the article without the banner or page navigation, position your mouse pointer over the heavy dashed line that surrounds the content you want to keep.
Note: Pointing the mouse at the white space between the dashes is an easy way to make sure that you are selecting the area of content that you want.
After the mouse pointer is in position, right-click (without moving the pointer), then select the “PageSnip - Add Selection” option from the context menu after it opens.
PageSnip will gather the page content inside the dashed border you selected (including all images) and retain all the HTML formatting. A thin green border will then appear around your selection to indicate what was snipped.
Note: If you make a mistake, just delete the snip in the PageSnip Assistant, press F5 to refresh the web page and start over.
After the snip has been gathered, the PageSnip Assistant opens automatically and your snip is displayed as shown here.
(click image for full sized view)
Filing your snip in the PageSnip Manager
After snipping the article on Troubleshooting Tips for PHP from Community MX, you can file it in the PageSnip Manager (Professional Edition). Filing the snip allows you to create your own personal knowledge base for easy reference.
PageSnip automatically gathers information about where and when the snip was taken. This makes it easy for you to return to the web page where it came from at any time.
Another powerful feature is the ability to associate a snip with one or more groups of related snips using what is known as “SnipLists”. This lets you quickly find snips by using their SnipList association.
You can create as many different SnipLists as you need. A single snip can then be associated with any number of SnipLists selections. The actual snip content is not duplicated.
During the process of filing a snip, PageSnip extracts all of the text from the snip HTML content. It indexes that text along with the meta data (page title, description and tags/keywords) that you have entered. This makes your knowledge base fully searchable.
You can see an example of the information that gets filed with your snip in the screenshot below.
(click image for full sized view)
Where do you go from here?
This Snip Tip does not cover all the details of filing and retrieving the snip in the PageSnip Manager. It doesn’t show all the other things you can do in PageSnip such as create a PDF or add SnipNotes. For detailed information about these things, see our tutorials (such as this one on Building your own WordPress knowledge base), or view the PageSnip Online help.
You can view the complete PageSnip documentation online at: http://www.pagesnip.com/onlinehelp/index.html
Try PageSnip Today Risk Free!
If you don’t already have PageSnip, visit the website and download a copy today. You can use it absolutely free for 30 days with no nags or limitations. Snip and file as many web pages as you like.
Get free technical support during your trial period and get a real feel for how nice it is to make PageSnip a part of your daily web surfing routine.
Then, when your ready, you can purchase the product risk free (PageSnip comes with a 30 day satisfaction guarantee), and never be another day without it!
Click here to visit the PageSnip website.
Look for other Snip Tips
Bookmark this website or subscribe to our RSS feed and check back often for new Snip Tips about other websites.
Caution: contents may shift while the Internet is in motion
The Internet is a big place and it is certainly a work in progress. Websites get updated often and the way pages are constructed is subject to change. This means that from time to time one of our tutorials may not work as expected or it may link to a page that no longer exists.
If you want to report a problem with a Snip Tip, or request one of your own, use the Contact Us form at the PageSnip website.
We hope you enjoy these Snip Tips and find them useful.
Team PageSnip
Tags: Community MX, CSS, Dreamweaver, Fireworks, Flash, Freehand, HTML, PageSnip, PHP, Tutorial