3D Printing, The Future???


Warning: Illegal string offset 'wp_pinterest_pin_it_button_layout' in /home/jingles/public_html/wp-content/plugins/wp-pinterest/includes/functions.php on line 186

Warning: Illegal string offset 'wp_pinterest_pin_it_button_single_display' in /home/jingles/public_html/wp-content/plugins/wp-pinterest/includes/functions.php on line 187

Warning: Illegal string offset 'wp_pinterest_pin_it_button_page_display' in /home/jingles/public_html/wp-content/plugins/wp-pinterest/includes/functions.php on line 188

Warning: Illegal string offset 'wp_pinterest_pin_it_button_excerpt_display' in /home/jingles/public_html/wp-content/plugins/wp-pinterest/includes/functions.php on line 189

Warning: Illegal string offset 'wp_pinterest_username' in /home/jingles/public_html/wp-content/plugins/wp-pinterest/includes/functions.php on line 206

Warning: Illegal string offset 'wp_pinterest_follow_button_layout' in /home/jingles/public_html/wp-content/plugins/wp-pinterest/includes/functions.php on line 207

Warning: Illegal string offset 'wp_pinterest_follow_button_single_display' in /home/jingles/public_html/wp-content/plugins/wp-pinterest/includes/functions.php on line 208

Warning: Illegal string offset 'wp_pinterest_follow_button_page_display' in /home/jingles/public_html/wp-content/plugins/wp-pinterest/includes/functions.php on line 209

Warning: Illegal string offset 'wp_pinterest_follow_button_excerpt_display' in /home/jingles/public_html/wp-content/plugins/wp-pinterest/includes/functions.php on line 210

As I spend as much time as possible researching the up and coming technologies in the world, I from time to time run into some pretty interesting things. One of those things would have to be 3D printing. A concept that comes from industries that program a 3D rendering (CAD Drawing) into a computer for parts and have a laser or high-powered water jet cut them out of a piece of metal or other item. Recently a few companies have released devices that uses a inkjet type of technology that prints on layers of a powder type material. As the layers are built excess powder is removed and color is added rendering a 3D object.

One of these companies, Z Corp ( Z Corp ), claims to be the number one player in this small industry and offers it’s 3D printers with the price tag of $20,000 – $50,000! However this is well worth the investment for car companies, architects, or even pipe appliance companies who can use the machine to produce a 3D prototypes that in the past took much longer, were less detailed, and over a period of time much more expensive. Just take a look at some of the amazing prototypes this thing has designed so far Z Corp ZPrinter 450.

The future for these machines is endless also. Companies are working on machines that will not only prototype, but create real 3D objects such as the laser and water drills. A major push in the industry is also bio-printing or using similar devices to create artificial human organs or other tissues instead of using donated organs. It will be nice in the future to be able to create replacement parts or say a heart just from a printer!

I know you would love to have one in your basement to make all kinds of cool things, but seriously think of the possibilities. In the future, as the price comes down for these devices, the potential use is there. Think of all those sci-fi shows that a device tele-ported items from one location to another. Now I know we won’t be tele-porting anything with the machines, but say for instances you need a leg for a chair that just broke. Just go to that chair’s website, download the 3D instruction file, load in some wood to the printer, and send the job to the printer. NO TRIP TO THE STORE!!! Believe it or not we are closer than you think for the public getting their hands on a 3D printer. Today you can purchase a similar device know as a laser engraver, that can produce 2D objects such as wooden design plaques, engraved picture, ect. and if you really want a 3D object, there are some commercial services that will let you design a 3D object on a Z Corp printer for around $100.

Video

  1. ZPrinter 450 Demo Video

Formatting Web Pages to be Printer Friendly using CSS and Javascript


Warning: Illegal string offset 'wp_pinterest_pin_it_button_layout' in /home/jingles/public_html/wp-content/plugins/wp-pinterest/includes/functions.php on line 186

Warning: Illegal string offset 'wp_pinterest_pin_it_button_single_display' in /home/jingles/public_html/wp-content/plugins/wp-pinterest/includes/functions.php on line 187

Warning: Illegal string offset 'wp_pinterest_pin_it_button_page_display' in /home/jingles/public_html/wp-content/plugins/wp-pinterest/includes/functions.php on line 188

Warning: Illegal string offset 'wp_pinterest_pin_it_button_excerpt_display' in /home/jingles/public_html/wp-content/plugins/wp-pinterest/includes/functions.php on line 189

Warning: Illegal string offset 'wp_pinterest_username' in /home/jingles/public_html/wp-content/plugins/wp-pinterest/includes/functions.php on line 206

Warning: Illegal string offset 'wp_pinterest_follow_button_layout' in /home/jingles/public_html/wp-content/plugins/wp-pinterest/includes/functions.php on line 207

Warning: Illegal string offset 'wp_pinterest_follow_button_single_display' in /home/jingles/public_html/wp-content/plugins/wp-pinterest/includes/functions.php on line 208

Warning: Illegal string offset 'wp_pinterest_follow_button_page_display' in /home/jingles/public_html/wp-content/plugins/wp-pinterest/includes/functions.php on line 209

Warning: Illegal string offset 'wp_pinterest_follow_button_excerpt_display' in /home/jingles/public_html/wp-content/plugins/wp-pinterest/includes/functions.php on line 210
Click here for the best place to buy printer ink on the Internet. We have many brands of ink cartridges including Epson printer ink cartridges. Find affordable inkjet cartridges at Printerinks.com.

( Ad Disclaimer/ Info )

Hello fellow web developers, another web design topic to tell you all about. Today’s blog topic is going to be a collage of setting up your website to print in a well formatted way using CSS of course! I will also discus how you can print individual sections of your site through another Java Script/ CSS gem I found on the internet (How to Print Selective Sections of a Website), a great solution for a hand coded FAQs sheet. Sorry the blog does not have any cool pics or neat YouTube videos, but I will get there. I am working on this thing while working my three jobs, so time permitting I will be expanding on this as much as I can.

When it comes to CSS, I think the most overlooked item when setting up your styles is a printing format. By now you should be utilizing CSS for your web design along with external stylesheets. However many developers are just setting up one or two external sheets to define how their site shall be laid out. You need to go beyond this and set up a separate sheet for printing also. Why? One important reason why, user friendliness. Using a website should be a user friendly-process. I hate when I go to print a web page and the page prints out the entire page including it’s header, navigation, and the content when I just need the content! No need to waste any ink or paper (not that I am a liberal or anything, just like to save a buck or two – lol).

The Basic Setup

I set up my print format pretty much the same way with every site. First I create a print stylesheet and load it to the server. I then link to that stylesheet from each page with a media type of “print” of course. So your link should look like this in your head:


<link href="your_print_stylesheet.css" rel="stylesheet" type="text/css" media="print" />

I then add a header text block to the top of each web page’s content div by setting up a div within it. I add a class to the text block div and set that class to hidden in the main formatting CSS stylesheet. This is so that it will not be visible when you visit the web page normally. The header can consist of the websites name, contact information, and so on. More about why I do this later on. Here is an example:


<div class="main_Section">
<div class="hidden"><p align="center">My Company<br />425 Street St<br />Anywhere, XX 11111<br />999.999.9999 </p></div>
Your main Content Here
</div>

So now you have each page formatted to your print stylesheet. Now its time to edit it so that it will fulfill it’s purpose of making your site printer friendly. The first step in this process is figuring out the names of your divs from your main formatting stylesheet. From this point you want to set up two styles in your print stylesheet, one to display items at print and one to hide items at print. You will place the appropriate divs in each style in the following way:

your_print_stylesheet.css

/* Your Print Area Style */
body, #outline, #content { < - the content will print since it is not hidden and formatted
format the print here
}
/* Your Non-Print Area Style */
.noprint, #footer, #header {
display: none !important; < - the footer and header will not print since it is hidden
}

Once you have done this, you are pretty much done. All you have to do now is format the print in your CSS print sheet. The following is how I do that, with some important tips!


body, #outline, #content, .hidden {
background-image: none !important; < - Make sure you set the background to white and none so that there is no colored background to print.
background-color: #FFFFFF !important;
border: none !important;
float: none !important; < - In regards to Firefox's printing errors, MAKE SURE you set the float to none so that the print will print multiple pages.
margin: 8px !important; < - I usually set a 8% margin to allow for proper layout of a print. This usually works well with most printers.
padding: 0% !important;
width: auto !important;
visibility: visible !important; < - Make sure that your header text block that is defined in each page is now visible in the print.
overflow: visible !important; < - Just as important as the float, it is also VERY IMPORTANT to set the overflow to none so that there are no Firefox print issues.
}
.noprint, #footer, #header {
display: none !important;
}

Make sure you set the overflow and float to none. Firefox has an issue with only printing the first page of a print it these two values are not set. For more information on this issue you can view the ( Official Mozilla bug Report ). In addition make sure you set the background to white and none so that a colored background does not print, common in Opera.

So that is pretty much it. By following these steps you will just print the main content of the page instead of the entire page, allowing your site to be more user friendly.

Printing Individual Sections of Your Page

Now that you got the basics of how to print a page in a well-formatted manner, lets kick it up a notch and discuss printing multiple individual sections of a page. Pretty much like setting up a FAQs section for print so that you can print individual topics. I got this idea from Lloydi’s Blog and is great since it only uses minimum Java Script and mostly CSS, a big plus.

Here is how this one works. First you need to download the print.js Java Script and upload to your server. Then you need to link to it in your pages that will be using it by adding the following code to the head of your page:


<script type="text/javascript" src="print.js"></script>

Once you have the Java Script loaded to your server and linked to your pages, you need to edit your print CSS stylesheet with the following add-ins:


body, #outline, #content, .hidden, print_faqs, .print_section { < - Add in print_faqs and print_section to format the print of each section.
background-image: none !important;
background-color: #FFFFFF !important;
border: none !important;
float: none !important;
margin: 8px !important;
padding: 0% !important;
width: auto !important;
overflow: visible !important;
}
.noprint, .printbutton, #footer, #header { < - Add in printbutton to disable the print buttons from printing.
display: none !important;
}
.print { < - Add in print to place the faqs section into a block.
display:block;
}

Lastly you have to edit your primary CSS stylesheet with the follow:


.print_section { < - Format each section of your page that will be able to print individually.
width: 100%;
float: left;
border: 1px solid #FFFFFF;
margin-bottom: 15px;
text-align: left;
padding: 5px;
}
.print_section p.printbutton { < - Format the buttons that will be displayed below each section and allow for an individual section or the entire page to be printed.
float:left;
}
.print_section p.printbutton a {
text-decoration:none;
background:white;
display:block;
float:left;
margin:3px;
padding:10px;
border:1px solid red;
}

Now you have your print stylesheet and the Java Script all set. Now all you have to do is apply the class to each section you want to be able to individually print. So for each faq topic, you will set it up as a div. Each div will be classed with print_section that will apply the print section to that area. When the page is normally viewed, you will see the buttons inserted on the bottom of each topic that will allow for the section or the entire page to be printed. THATS IT!!!

Check out an example of this at work: Example of this at work

References

  1. Lloydi’s Blog – Printing Selective Sections
  2. Firefox Bug 104040 – Float / Overflow Print Issue
  3. A List Aparts – Going to Print Article (Bible to web design, a great guide to formatting websites to print!)