Releace of my own Umbraco based webpage.

For little bit more then the past month time I’ve been working on designing and developing my own webpage. For this task I’ve chosen Umbraco CMS engine, beacouse of it’s similarities with Sitecore, but allso because it is free to use. I’ve was pleasantly surprised on the helpfulness of the Umbraco community, and i like to contribute my knowledge to further Umbraco development by posting articles about it on my blog.

To differ my self from all the other mass-produced templated webpages outhere, I’ve designed and implemented my own look and feed for my webpage.
my webpage design
The main idea behind this webpage is to make a content driven webpage not a blog. I’ve written an article about how this webpage came to being and i am going to write further articles in the future on how i did it. More about the nuts and bolts of it all. (c: So sign up for an RSS feed, so you can keep up.

here are some highlights of the implementation.

  • youtube integration
  • Custom developed tag based article system
  • Lucene index search results
  • Tag and Related articles lists.
  • Umbraco based contact form(creates nodes in umbraco, so i can see a feed of all new items when logged in)

If you have any comment’s pleas tell me i wood like to hear your opinion.

Advertisements

Get YouTube video JSON Data using JQuery and Ajax

Earlier I’ve written an article on how t get Youtube data using JSON and it was a blast, but i had a litlle cosmetic drawback. You had to put script tags in your markup.   It works but it’s not pretty (c: . One of the easiest ways to load JSON data onto our website is to use the $.ajax(), which is a very useful JQuery method.  Her’s my way of doing it.

      $.ajax({
            type: "GET",
            url: "http://gdata.youtube.com/feeds/users/[USERNAME]/uploads?alt=json-in-script&format=5",//generateJSonPlayListCallBackUrl(),
            cache: false,
            dataType:'jsonp',
            success: function(data){
                showMyVideos(data);
          }
        });

I’ve taken the showMyVideos() from Google’s Json documentation article it’ will display a list of video titles from a given Youtube  users Chanel.  To use this code snippet just replace [USERNAME] with a Youtube user name, and put inside a JS file (c: Take notice of dataType:’jsonp’, thats the important bit. This allows us to retrieve youtube data back to our domain (c:

well thats it for to day,.. stay frosty people,..

W3C Validate your youtube embed code

Her’s the thing if you take embed code from a youtube chanel and paste it on your webpage you get loads of validation errors.  Try to validate a youtube page (c;
So how do you fix this ,.. here’s an eksample of such embed code

<object width="{$width}" height="{$height}">
<param name="movie" value="{$playUrl}"/>
<param name="allowFullScreen" value="true"/>
<param name="allowscriptaccess" value="always"/>
<embed src="{$playUrl}" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="{$width}" height="{$height}"/>
</object>

this will fail validation bigtime,.. to remedy this get rid of the embed tag, which is  leftover from the good netscape days. Like this

<object type="application/x-shockwave-flash" style="width: {$width}px; height: {$height}px" data="{$playUrl}">
<param name="movie" value="{$playUrl}" />
</object>

Get YouTube video Data via JSON

I will start with one big thanks to peaple from goole and their documentation of Youtube API (c: thay rock ,..
Well, I wanted to get the title of a youtube video by using javascript, and this proved to be very dificult until i found this article
It apears that Youtube Data API alows you to get all the data you need, title, thumbnail You name it, well read the article (c:

ony how i only wanted the title and this is how i did it ..
first add you function.

<script type="text/javascript">
 function FeedCallback( data )
 {
 //get title from YouTube Data API via JSON
   document.getElementById('Title').innerHTML = data.entry[ "title" ].$t;
 }
 </script>

Now this is the busines end of it all

 <script type="text/javascript" src =
 "http://gdata.youtube.com/feeds/api/videos/<yourVideoID>?v=2&amp;alt=json-in-script&amp;callback=FeedCallback"
 </script>

This bit is described her under how it works, here are the bolts and bits of this url

<yourVideoID> is your video ID (c:
v=2 instructs the server to use version 2 of the Youtube API to handle this request
alt=json-in-script instructs the server to send the data in JSON format wrapped inside a call to the callback function; this method is used to avoid crossdomain restrictions imposed by modern browsers.
callback=FeedCallback is the name of the callback function that will handle the JSON data.

that is sweet (c:

P.S here’s some more http://code.google.com/intl/da-DK/apis/youtube/2.0/developers_guide_json.html