{"id":277,"date":"2008-08-02T23:20:31","date_gmt":"2008-08-03T04:20:31","guid":{"rendered":"http:\/\/williamsportwebdeveloper.com\/cgi\/wp\/?p=277"},"modified":"2008-08-02T23:23:43","modified_gmt":"2008-08-03T04:23:43","slug":"the-improved-youtube-tag-cloud","status":"publish","type":"post","link":"http:\/\/williamsportwebdeveloper.com\/cgi\/wp\/?p=277","title":{"rendered":"The Improved YouTube Tag Cloud"},"content":{"rendered":"

I have made an improvement to my YouTube Tag Cloud<\/a> page. While browsing some web design sites I came across a blog post about Beautiful Word Clouds<\/a> which showed some images of fancy word clouds. They used a fancy font and varied the colors of the words. They also shaped the words into a cloud shape. These simple ideas managed to give the word clouds more style. Word clouds aren’t very interesting so anything you can do to enhance them is welcome, even if it is just a cosmetic change. <\/p>\n

I have changed the font for my YouTube Word Clouds to Mirisch<\/strong>, a fancy font popular in Flash animation. If you don’t have that font the word cloud may use the Ravie<\/strong> font which I list second in the CSS. And if you don’t have that font then your browser will use a fantasy font because my third choice was the fantasy font family. On my iBook G4 a random font in the fantasy family was used. Here is how you specify these font possibilities in CSS:<\/p>\n

\n
\n
   1:<\/span> font-family<\/span>: Mirisch, Ravie, fantasy;<\/span><\/pre>\n<\/div>\n<\/div>\n
Alternating the word colors was more difficult. I used JavaScript and the jQuery<\/a> JavaScript library to accomplish that trick. jQuery features many selectors to get DOM elements so I was able to get all the links within a div. All of the words in my YouTube Tag Cloud are hyperlinks with a title attribute so you can see how many videos used that word as a tag. The number in the title attribute provides a convenient value to base the font color on. For example, I can give all the tags that were used 2 times a green color and all the tags that were used 5 times a blue color, etc.<\/p>\n
So I managed to make YouClouds look more colorful and fancier. I could have gone further and shaped my cloud using some more CSS but it is probably not worth the considerable effort. <\/p>\n
It is important to keep your eyes peeled for interesting web design ideas as you browse the web. In this case it was a simple typography improvement that gave the uninteresting tag cloud a new lease on life.<\/p>\n","protected":false},"excerpt":{"rendered":"
I have made an improvement to my YouTube Tag Cloud page. While browsing some web design sites I came across a blog post about Beautiful Word Clouds which showed some images of fancy word clouds. They used a fancy font … Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9,13,112,11],"tags":[28,113,31,21],"_links":{"self":[{"href":"http:\/\/williamsportwebdeveloper.com\/cgi\/wp\/index.php?rest_route=\/wp\/v2\/posts\/277"}],"collection":[{"href":"http:\/\/williamsportwebdeveloper.com\/cgi\/wp\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/williamsportwebdeveloper.com\/cgi\/wp\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/williamsportwebdeveloper.com\/cgi\/wp\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/williamsportwebdeveloper.com\/cgi\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=277"}],"version-history":[{"count":1,"href":"http:\/\/williamsportwebdeveloper.com\/cgi\/wp\/index.php?rest_route=\/wp\/v2\/posts\/277\/revisions"}],"predecessor-version":[{"id":278,"href":"http:\/\/williamsportwebdeveloper.com\/cgi\/wp\/index.php?rest_route=\/wp\/v2\/posts\/277\/revisions\/278"}],"wp:attachment":[{"href":"http:\/\/williamsportwebdeveloper.com\/cgi\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=277"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/williamsportwebdeveloper.com\/cgi\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=277"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/williamsportwebdeveloper.com\/cgi\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=277"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}