A Great Way To Get Your RSS Feed On Your Static Website


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

I know it has been a while and this blog is suppose to be mainly about web design, however as titled it is really about my life experiences as well as experiences with web design. So with that said, here is a web design topic that is pretty hot. RSS, Really Simple Syndication, is one of those buzz Web 2.0 items that has even worked its way into the new windows (Vista). RSS is more or less a coding language that codes news stories in XML, eXtensible Markup Language, so they can be dynamically implemented into web and now desktop applications. In this technology error, it is critical to get the latest news at a moments notice. Now with RSS, people can encode a news feed for their business or organization and persons interested in that news can subscribe to the feed and get the news dynamically on there desktop with Vista or on their home page on Google.

This technology integrates perfectly with a dynamic website CMS, content management system, such as a blog. As you write a news story or blog post as I am at the moment and then publish it, most CMS systems such as Drupal or Word Press will use a plug-in, widget, to encode that post or entry in the sites RSS. Now instantly people can read the latest news and posts! The problem becomes with static websites that still are authored to this day, how can they play with this new hot dynamic technology. I ran into that very issue recently with one of my clients static website and found the answer with one of the best web resources there is: Dynamic Drive DHTML. There RSS Display Box is by far one of the best solutions I found to solve the problem.

The issue was how can I make a dynamic element with a static website? So I figured the easiest way to solve the problem was to have the dynamic element tell the static website what to do. By doing so I could have the news stories expressed dynamically through RSS and then use the Dynamic Drive Java-script to display that dynamic data solving the issue entirely. This new method of web design is known as AJAX or Asynchronous JavaScript and XML. More or less it integrates all of the popular web languages (Java-Script, XML, and XHTML (HTML) as well as CSS) to accomplish interactive and dynamic web 2.0 technologies in a usable and fast manor. With that said Dynamic Drive once again pulled through for me with this great code.

Of course I had to add in a couple of edits to cater to my needs. I am a web standards buff and in order to allow the news stories to display in a list, I would have to add in the UL or OL tags inside the Java Script it self. So if you too want a valid list heres how. First open up (outputbody.php). This is located in the rssbox folder and manages the templates that will display your feeds on your page. In this file you will have to add LI tags enclosing the template so that it generates the list :

function outputbody($item, $template=""){
if ($template=="" || $template=="default"){ //DEFAULT TEMPLATE ?>
<li> // Insert the list item to add each item as a list item
<DIV class="rsscontainer">
<div class="rsstitle"><a href="<?php echo $item->get_permalink(); ?>" class="extlink"><?php echo $item->get_title(); ?></a></div>
<div class="rssdescription"><?php echo $item->get_description(); ?></div>
<div class="rssdate"><?php echo $item->get_date('d M Y g:i a'); ?></div>
</DIV>
</li> // Insert the close tag for the list item after the RSS item template layout
<?
} //end default template

The the last thing you have to do is define either a UL or a OL for your list type in the page that controls the entire feed and template integration in the file called (main.php) also located in the rssbox folder. Here I created a small IF statement to trigger an echo command to insert the UL or OL tags depending which template is used in the outputitems function:


function outputitems(){
if ($template=="" || $template=="default") echo '<ul>'; // Added in an IF statement to trigger an insert of a UL if the default template is used
global $feed, $feednumber, $templatename;
$max = $feed->get_item_quantity($feednumber);
for ($x = 0; $x < $max; $x++){
$item = $feed->get_item($x);
outputbody($item, $templatename); //call custom outputbody() function
}
if ($template=="" || $template=="default") echo '</ul>'; // Added in another IF statement to trigger an insert of the close tag for the UL
}

There you go, simple as pie. A great way to get your dynamic RSS feed on your static web page with a little tweak. ENJOY….

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!)

Arc90 New Window Link and My Big Welcome


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

Hello World!

LOL, for some reason that simple phrase reminds me of what seems a million years of trial and error programming. Through my limited years of college, I can remember writing Assembler programs for dinosaur IBM P390 servers for hours. In my first assignments, just so the screen can produce those words.

In any case, my name is Jason Fisch and this is my blog. I never thought myself as a blogger, but in my job field I have found it to be critical to run one in order to network and figure out those big roadblocks. Although I went to school for programming big IBM servers, I have traveled a different path of web design. An interest and hobby since I was 14 and now my own business.

Now that’s out of the way, I am currently working on my companies site. While I am at it, let me put you on a great Java script I am currently using and have modified. I know Java script right, who needs AJAXs when you have some good old java script. To stay on track now and to make a long story short, I really believe in valid code and accessible websites. So while setting up my company’s website I found a good problem. What accessible way can I make links open in a new window???

With some internet research and my own thinking, I came to two conclusions. Since the website is done in PHP, I could make a PHP Style Switcher that a user could select if they want links to open in a window or not (of course the not being a default – standards, standards, standards). Or I could set up two side-by-side links one that opens in the same and the other that opens in a new window.

Then I found it! The perfect solution to my problem. A java script that places a small image next to a link that if clicked will open that link in a new window. Even better is, if the user does not have java script enabled on their browser, then the image does not show at all causing any confusion. This great script was written by Arc90 (www.arc90.com) and they even had the courtesy to source it out with a pretty much open license! It is so pretty I have decided to even use the script in this blog. So every time you see a: Link Opens in A New Window Icon, don’t forget to click it to open it in a new window.

While using the script I came up with what I felt were three issues, so here are some modifications that Arc90 and myself have made to the code.

Issue #1: I decided to remove the a.href and :// qualifier in the code. The code uses a qualifier to select a link that should be using the code. Arc90′s version requires the HTML link to include an a.href and :// somewhere in the link as well as the class name of “extlink”. I feel that the class name in its self is enough to qualify a link, especially if you set up your links via the site root which would not include a ://. So I just removed the bold section of Arc90′s code:

if (((b != '' && a.href.indexOf(b) < 0) || b == '') && a.href.indexOf('://') > 0 && ((arc90_extLinkUseClassName && a.className.indexOf('extlink') >= 0) || !arc90_extLinkUseClassName)) { show the image }

and bang, its all set:

if (((arc90_extLinkUseClassName && a.className.indexOf('extlink') >= 0) || !arc90_extLinkUseClassName)) {show the image}

Issue #2: The code would work without any script errors, however the link icon would not display in Opera. In addition the link would move when the script ran as to allow the icon, however the icon would not display. I know that Opera has CSS issues with the positioning of background images via CSS, so advise Arc90. They were very perceptive to my concern and quickly had their CSS guy change the icon from a background image to a regular image allowing it to work in Opera. In addition I feel this was a good change because of the issue if images were disabled, the script would not work. Now the script will work with a display of its “Alt” text if images are disabled. An important accessibility issue. So in any case here are the two mods for the icon display:

CSS Edit:
.arc90_extlinkIMG {
margin-left: .3em; < - Less Reliance on CSS positioning, a plus!
cursor: pointer;
}

JavaScript Edit:
var m = arc90_newNode('img', '', 'arc90_extlinkIMG'); < - changed to an IMG from a Span w/ a background image
m.src = "/tools/c/images/extLink_img.gif"; < - Linked to image in Javascript, instead of CSS
m.title = '[External Link]';
m.alt = 'External Link Icon';
eval('arc90_addEvent(m, "click", function() { window.open("'+ a.href +'"); });');
a.parentNode.insertBefore(m, a.nextSibling);

Issue #3: Is a working progress that I will hopefully get some free time to fix. Nothing is new with IE’s ever growing list of compatibility issues and of course this is the case with this great tool. Unlike any other browser in the market today, IE will not pass the HTTP header field. So you have to manually define this in the java script with the http.header. This creates an issue with say W3C’s link on your site that it meets valid code. Since it uses the HTTP header to pass your URL, the link will not display in a new window if done in IE. I hope to have some free time soon to correct this one.

In any case, this is a GREAT tool and I would like to give a special thanks to the guys at Arc90 for being so kind to put it out to the web development community!