Youtube Channel Embedded in website from RSS with Videos playing in a Pop Up Window

One of our clients Andreas Lundin, http://www.andreaslundin.com/ wanted to have his video showreel online.

When we first created the website we converted the videos to Flash and embedded them in a Flash Video Player.

We found that this method was not all that effective for users.

The videos were very slow to load and the file size of up to 30mb a video was causing huge problems for the mail server.

The client had created a YouTube Channel of the videos already and it was decided that we would instead embed the YouTube videos dynamically into the site.

http://www.andreaslundin.com/video-gallery/index.shtml

Youtube has a data API which we looked at, but after doing some web searching we discovered we could covert the YouTube feed into an easy to use RSS feed.

For this we used a site called RssHandler

http://www.rsshandler.com/converter

So the client's channel which was:

http://www.youtube.com/andreaslundindotcom/

became a feed:

http://www.rsshandler.com/flvrss.rss?feedurl=http%3A%2F%2Fwww.youtube.com%2Frss%2Fuser%2Fandreaslundindotcom%2Fvideos.rss

Which also allowed us to link to a MP4 file for downloading to an iPod which we will do at a later date.

The RSS feed contains all the data between the

We did have to use a regular expression to get the actual ID of the video as it was embedded in the link to the page.


The PERL code to grab the RSS feed and use XML Simple to parse the feed is below.


|;



use LWP::Simple;

use XML::Simple;

use encoding 'UTF-8', STDOUT => 'cp932';



my $url = "http://www.rsshandler.com/flvrss.rss?feedurl=http%3A%2F%2Fwww.youtube.com%2Frss%2Fuser%2Fandreaslundindotcom%2Fvideos.rss";

my $rssData = get($url);

my $xml = XMLin($rssData);





foreach my $item (@{$xml->{channel}->{item}})

{

($bits,$image) =split(/\=/,$item->{link});

print qq|

<td>

<strong>$item->{title}</strong><br>

<a href="/cgi-bin/main.cgi?display_video=$image" rel="gb_page_center[660, 405]"><img src="http://i4.ytimg.com/vi/$image/0.jpg" border="0" vspace="4" hspace="4" border="0" alt="$item->{title} $mpc[0]" /></a>

</td>

|;



}

print qq~

</tr>

</table>


Div POP Up Window

We then used Grey Box to open a new window in a div and display the video passing the video ID through the script.

The actual display of the video is pretty simple, we just used the normal YouTube embed code and parsed in our only variable.


<object width= "660" height= "405" ><param name= "movie" value= "http://www.youtube.com/v/cL9eqzqK7xI&hl=en&fs=1&rel=0&color1=0x3a3a3a&color2=0x999999&border=1" ></param><param name= "allowFullScreen" value= "true"></param><param name= "allowscriptaccess"  value="always"></param><embed src="http://www.youtube.com/v/$in{'display_video'}&hl=en&fs=1&rel=0&color1=0x3a3a3a&color2=0x999999&border=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="660" height="405"></embed></object>

We also used another Marquee script for moving the images side to side on the page from http://www.dynamicdrive.com/forums/ which we have used for the Image Galleries on the page.

We could have styled the feed in all manner of ways really.

YouTube Thumbnails

We found that YouTube creates a couple of different versions of the thumbnails for the video:

There are four thmbnails we found that use the following structure:

http://i4.ytimg.com/vi/$image/0.jpg

where $image is the ID of the video

0 - is the largest thumbnail at 320 x 240 pixels
1, 2, 3 are different screen grabs as is default:

The three top secrets for Search Engine Optimisation

There are three key secrets to Search Engine Optimising a website:

1) Use CSS, Standards Compliant Coding and Semantic Coding

The most important thing you can do with your own website is to use HTML and CS the way it was intended. This means:

• DON'T use font tags
• Have a page title that describes the content
• Use headings - but use only one Heading One
• DON'T trap content in an image
• DON'T use click here for a link, use words to describe what the link is like 'send us feedback'

2) Pepper your site with Keywords

Make sure your keywords are used everywhere. In your page title, in your body copy, as alternate text for an image. You can make special keyword rich pages too but make sure they actually make sense!

3) Quality Links are paramount!

Once your own site is OK you need to get other website to link to your website. You don't want just any links either, you ant quality links from quality pages that already have a good Google Page rank.

You also don't want to have to link back to the site, that can kill the benefit of the link.

Also with these links you want them to use your keywords, like Widgets Sydney, not just your name or domain name.

Summary

You can see how the first two items are really about getting your own site in order. If the Google Spider can't read the content of your website then no matter how many links in you have you still will not get the best results.

With the first tip it's really best that you get someone who actually knows what they are doing to make sure your site is optimised properly! The other two you can do all by yourself using Sliced Bread Content Management tool to manage your website.

Two Column Left Menu Header Footer CSS Template

I have uploaded a tutorial for creating a CSS Two Column Template with a header and a footer. Click the image above to view the tutorial or download the template as a Zip file below:

http://www.enflexion.com.au/support/2columnleft/2columnleft.zip

Designing Web Templates for Sliced Bread

This tutorial shows you how to create the templates and CSS style sheets for use in a website managed by Sliced Bread Content Management Tool. This tutorial does assume that you have knowledge of designing with CSS. The project files can be downloaded as a zip file here:

Download Project Files

In this tutorial we have designed a basic centred template with a left hand menu and a block out homepage. The template has a footer, header an accessible CSS styled Drop Down Menu, and a CSS side menu. The template uses only CSS for formatting and has been tested for IE6, IE 7, FireFox, Safari and Opera.

Click the image to view the template in a web browser.

The code below shows the full template with an internal page.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>Hompeage</title>

<link rel="stylesheet" media="all" href="styles/styleone.css" type="text/css">
<link rel="stylesheet" media="print" href="styles/print.css" type="text/css">
<link rel="stylesheet" media="screen" href="styles/screen.css" type="text/css">
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");

for (var i=0; i<sfEls.length; i++) {

sfEls[i].onmouseover=function() {

this.className+=" sfhover";

}

sfEls[i].onmouseout=function() {

this.className=this.className.replace(new RegExp(" sfhover\\b"), "");

}

}

}

if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]>
</script>
</head>
<body>
<div id="maincontainer">
<div id="header">&nbsp;</div>
<div id="menu">
<ul id="nav">
<li><a href="/index.shtml">HOME</a></li>
<li><a href="/company/index.shtml">COMPANY</a><ul>
<li><a href="/company/history.shtml">HISTORY</a></li>
<li><a href="/company/staff.shtml">STAFF</a></li>
<li><a href="/news/index.shtml">NEWS</a></li>
<li><a href="/employment/index.shtml">EMPLOYMENT</a></li>
</ul></li>
<li><a href="/services/index.shtml">SERVICES</a></li>
<li><a href="/clients/index.shtml">CLIENTS</a></li>
<li><a href="/contact/index.shtml">CONTACT</a></li>
</ul>
</div>
<a name="top"></a>
<div id="one">
<div id="advert">&nbsp;</div>
<div id="advertside">&nbsp;</div>
</div>
<div id="two">
<div id="box_one">&nbsp;</div>
<div id="box_two">&nbsp;</div>
<div id="box_three">&nbsp;</div>
</div>
<br clear="all" />
<div id="footer"><div id="left"><a href="#top">^Return to Top</a></div>
<div id="right"><a href="/docs/copyright.shtml">Copyright</a> <a href="/docs/privacy.shtml">Privacy</a> <a href="/docs/legal.shtml">Legal</a></div></div>
</div>
</body>
</html>

How Sliced Bread Templates Work

Designing a web template or converting a design to use Sliced Bread is pretty easy. You just have to remember that Sliced Bread requires you to split up a webpage design into parts. There are three main parts to a design:

The Main Template which is common to the whole website is quite often the header and footer of a website, although your design will have whatever you need in the main template.




<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]>
</script>
</head>
<body>
<div id="maincontainer">
<div id="header">&nbsp;</div>
<div id="menu">
<ul id="nav">
<li><a href="/index.shtml">HOME</a></li>
<li><a href="/company/index.shtml">COMPANY</a>
<ul>
<li><a href="/company/history.shtml">HISTORY</a></li>
<li><a href="/company/staff.shtml">STAFF</a></li>
<li><a href="/news/index.shtml">NEWS</a></li>
<li><a href="/employment/index.shtml">EMPLOYMENT</a></li>
</ul>
</li>
<li><a href="/services/index.shtml">SERVICES</a></li>
<li><a href="/clients/index.shtml">CLIENTS</a></li>
<li><a href="/contact/index.shtml">CONTACT</a></li>
</ul>
</div>
<a name="top"></a>
<$maincontent>
<br clear="all" />
<div id="footer"><div id="left"><a href="#top">^Return to Top</a></div>
<div id="right"><a href="/docs/copyright.shtml">Copyright</a> <a href="/docs/privacy.shtml">Privacy</a> <a href="/docs/legal.shtml">Legal</a></div></div>
</div>


Don't call the stylesheets, they are called when the page is assembled by Sliced Bread. Where the Section Template is inserted into the template use the code <$maincontent>.

Save this file as template.txt
Section Templates

The Section Templates which are the groups of pages that are uniquely linked together and those you want to have menu's automaticaly created for. Just think of the Section Template as like tags or chapters of a book.

Where the page content is inserted into the template use the code <$maincontent>.

Internal Page Section Template

<div id="main">
<div id="side">
<div id="sidemenu">
<ul>
<$menu>
</ul>
</div>
</div>
<div id="content">
<div id="crumbs">You are here &raquo; <a href="/index.shtml">Home</a> &raquo; <$title></div>
<$maincontent>
</div>
</div>

Section templates do not have to be the same as each other and in fact they are extremely powerful when used well, for example the Hompage design uses a totally different Section Template. Also by using Section Templates you can'lock' casual users out of parts of the page so they can only edit the content you as a designer want them to.

Homepage Section Template

<div id="one">
<div id="advert"><$maincontent></div>
<div id="advertside">&nbsp;</div>
</div>
<div id="two">
<div id="box_one">&nbsp;</div>
<div id="box_two">&nbsp;</div>
<div id="box_three">&nbsp;</div>
</div>

Then finally we have the unique page content which you manage in Sliced Bread and is totally unique.

Stylesheets

There are three stylesheets that are inserted into Sliced Bread:

screen.css - The styleshet called for web broswers, generally has all main strucural elements and anythingwe don't want when we print the page.

styleone.css - The common stylesheet across the website.

print.css - The stylesheet called when the page is printed.

Inserting section menus

Using Sliced Bread you can automatically inserts lists of pages within sections by using the code:

<$list> or <$menu>

<$list> inserts a full formed unordered list, wheras <$menu> inserts onlye the list items.

There are lots more advanced features in Sliced Bread but this is an introduction to designing a template for Sliced Bread.

Accessibile Drop Down Menu

If you want to create an accessible drop down menu that uses unordered lists then this script is definitely for you! This way you don't have to have bucket loads of javascript which bloats yous website, and you do have excellent SEO for the menu as they are just unordered lists.



Bug Fix to force the hover of the menu

To force the menu to appear and disapear when you roll your mouse over it you need to insert some conditional Javascript code into the head of the page.

<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]>
</script>

The Menu

The menu is based on unordered lists, when you want to insert a drop down menu you insert another fully formed unordered list between the end of the link and the end of the ordered list item.

The enflexion website menu uses this to create the drop down menu as shown below:


<ul id="nav">

<li><a href="/index.shtml">HOME</a></li>

<li><a href="/about/index.shtml">ABOUT US</a><ul>

<li><a href="/about/ourphilosophy.shtml">OUR PHILOSOPHY</a></li>

<li><a href="/about/methodologies.shtml">OUR METHODOLOGY</a></li>

<li><a href="/about/news/index.shtml">ENFLEXION NEWS</a></li>

</ul>

</li>

<li><a href="/packages/index.shtml">WEBSITES</a>

<ul>

<li> <a href="/packages/index.shtml">PACKAGE SOLUTIONS</a></li>

<li> <a href="/packages/quickstart.shtml">QUICK START PACKAGE</a></li>

<li> <a href="/packages/standard.shtml">STANDARD PACKAGE</a></li>

<li> <a href="/packages/business.shtml">BUSINESS PACKAGE</a></li>

<li> <a href="/packages/ecommerce.shtml">ECOMMERCE PACKAGE</a></li>

<li> <a href="/packages/faqs/index.shtml">PACKAGES FAQ</a></li>

</ul>

</li>

<li><a href="/services/index.shtml">SERVICES</a>

<ul>

<li><a href="/services/design.shtml">DESIGN & DEVELOPMENT</a></li>

<li><a href="/services/consulting.shtml">CONSULTING & ADVICE</a></li>

<li><a href="/services/project.shtml">PROJECT MANAGEMENT</a></li>

</ul>

</li>

<li><a href="/products/index.shtml">PRODUCTS</a>

<ul>

<li><a href="/products/sliced/index.shtml">SLICED BREAD CONTENT MANAGEMENT</a></li>

<li><a href="/products/intranet/index.shtml">INTRANET IN A BOX</a></li>

<li><a href="/products/sliced/commerce/shopping.shtml">SHOPPING CART</a></li>

</ul>

</li>

<li><a href="/research/index.shtml">RESEARCH</a>

<ul>

<li><a href="/research/index.shtml">WEBFLEXION OVERVIEW</a></li>

<li><a href="/research/archive.shtml">ARCHIVED ARTICLES</a></li>

<li><a href="/research/blog/index.shtml">TECHNOLOGY BLOG</a></li>

</ul></li>

<li><a href="/clients/index.shtml">CLIENTS</a>

<ul>

<li><a href="/clients/testimonials.shtml">TESTIMONIALS</a></li>

<li><a href="/clients/case.shtml" >CASE STUDIES</a></li>

</ul></li>

<li><a href="/contact/index.shtml">CONTACT</a></li>

</ul>

The CSS


#nav, #nav ul {

float:left;

list-style: none;

background: #5fc601;

font-weight: bold;

padding: 0px;

margin: 0;

font-size:13px;

font-family: arial;

}

#nav a {

display: block;

width: 72px;

color: #fff;

text-decoration: none;

padding: 8px;

font-family: arial;

text-align: center;

border-right: 2px solid #fff;

height: 14px;

}


#nav li {

float: left;

padding: 0;

width: 90px;

margin-right: 0px;

font-family: arial;

}


#nav li ul {

position: absolute;

left: -1000px;

height: auto;

width: 150px;

font-weight: bold;

border: 1px solid #fff;

margin: 0;

}


#nav li li {

width: 150px;

font-size:11px;

border-top: 1px solid #fff;

padding: 0;

margin:0;

}

#nav li ul a {

width: 140px;

height: auto;

font-size:11px;

padding: 5px;

font-family: arial;

text-align: left;

}


#nav li ul ul {

margin: -1.75em 0 0 14em;

}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {

left: -999em;

}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {

left: auto;
}

#nav li:hover, #nav li.sfhover {

background: #ad0925;
}

You can see the entire code in operation here at the enflexion Website Design website.

Creating Equal Column Designs with Javascript and CSS

If you have a CSS template design where you want the design to have a full background colour all aligned, or you just want to have the design that has all equal columns you can use the pre-built Javascript library.

The library is available from Dynamic Drive.

Instructions

Start by inserting the code <script src="equalcolumns.js" type="text/javascript"></script> into the head of your HTML file.

Then download the file equalcolumns.js by right clicking on the link and selecting Save As.

You will then need to change the line:

ddequalcolumns.columnswatch=["leftcolumn", "rightcolumn", "contentwrapper"]

Change the names of the columns from your CSS file you want to make equal. If you only have two columns you can just name the first two entries and leave the final one blank.

Remove Background Flicker from divs in IE6

There is an annoying bug with IE6 when you use a background image in a div. The browser constantly tries to load the image from the server creating a flicker and can also trick the web server into thinking you are waging a Denial Of Service Attack.

This can result in the web server denying your IP address.

To prevent this you can use a conditional Javascript which is called in the head of your html document:


<script>



(function(){



/*Use Object Detection to detect IE6*/

var m = document.uniqueID /*IE*/

&& document.compatMode /*>=IE6*/

&& !window.XMLHttpRequest /*<=IE6*/

&& document.execCommand ;



try{

if(!!m){

m("BackgroundImageCache", false, true) /* = IE6 only */

}



}catch(oh){};

})();

</script>