Rendering New Age Video

While winding myself up to play NWN2, I started experimenting with image morphing software, to see if I could make a video of a Druid Shifter polymorphing into their werebear shape. Sadly I think I lost the pictures from the 1st attempt and so as I started the game I had another go. Anyway once created, there is the question of how to serve it on the web. This article documents the tools I used to create the video and the tools I used to host it on this page. Continue reading “Rendering New Age Video”

Pop Up Meerkats

For various reasons I wanted to make a pop-up on hover using a picture. I found the following URL,

Here’s the CSS code

<STYLE>
  a.imPop       { position:relative; z-index:20; }
  a.imPop:hover { display:inline; z-index:30;}
  a.imPop span  {display:none;}

  a.imPop:hover span { display:block; position:absolute; 
                       top:1em; left:1em;
                       width:64px; height:64px;}
</STYLE>

Here’s the picture, we plan to use,

Here’s the HTML,

<a title="sample" href="http://davelevy.info/images/wiki/ao.png">Meerkat
<span><img alt="ao" src="http://davelevy.info/images/wiki/ao-w200.png" border="0" /></span></a>

The span tags are crucial and one needs to be careful about how wordpress deals with tags. The HTML can be implemented using the HTML add in, Code Embed or writing it natively using wordpress’s text editor.

ooOOOoo

To see the pop up picture effect, hover over the word, Meerkatao, the picture should pop up

Snipsnap and the ‘html’ macro

One of the add on features contributed  by the community to the snipsnap project was an {html} macro.

This is here… at the snipsnap site, and I have enclosed it as part of my mirror site. Obvioulsy best use snipsnap.org while it remains on-line.

This escaped the enclosed code and rendered it in raw HTML. The snipsnap macro defintion syntax was to use the embraced keyword twice, so {html}<strong>Important!</strong>{html}

I used it to include the google map widgets, the delicious tag cloud widget, getsatisfaction, which worked, see below, and Disqus which broke the backup. One of its most important extensibility features, as you can see above was it allowed Javascript.

The Disqus bug was because the backup format was XML, and snipsnap struggled with recursive CDATA elements. The Disqus scripts held CDATA elements, which snipsnap tried to enclose in the same tags. This failed on important.

I have also used this technique to get sharethis, addthis, flickr badges and pictures, wordle and big huge labs web badge to work. ( I think that’s it). It was useful if you wanted, needed, additional parameters beyond those available in the snipsnap img macro.

Get Satisfaction

An example of the get satisfaction code is as follows;

 
<div id="gsfn_list_widget">
  <a href="http://getsatisfaction.com/plazes">Active customer service discussions in Plazes tagged "davelevy"</a>
  <div id="gsfn_content">Loading...</div>
  <div><a href="http://getsatisfaction.com/">
<img alt="Favicon" src="http://www.getsatisfaction.com/favicon.gif" style="vertical-align: middle;" BORDER=0 /></a> <a href="http://getsatisfaction.com/">Get Satisfaction support network</a></div>
</div>
<script src="http://getsatisfaction.com/plazes/widgets/javascripts/c178c17/widgets.js" type="text/javascript"></script><script src="http://getsatisfaction.com/plazes/topics.widget?callback=gsfnTopicsCallback&amp;length=0&amp;limit=5&amp;sort=recently_active&amp;tag=davelevy" type="text/javascript"></script>

It is used on the Plazes article as well.

Decorating Blockquotes

Now I have one of those pretty quote decorations in my quotes on this wiki.

  1. The decoration is an image.
  2. I used mspaint to capture a large quote mark. I used Engravers MT.
  3. I then used paint.net to rotate and flip it, crop it, and then make the white background transparent. As advised in the paint.net forums, I used the magic want tool, capture the background and then “cut” it out.  The file needs to be a transparency supporting format for this to work.

    quote

  4. I uploaded the file to my web server.
  5. I then used the WordPress CSS editor to add the following code,
.entry blockquote { background: #EEE url("http://davelevy.info/TOKENS/OQuote_GreyTransparent.png") no-repeat; }

As you can see, the background rule takes two arguments, a base colour and the image, the rune required is the no-repeat key word. It also benefits from the definition of some padding rules. In my case,

     padding-left: 16px; padding-top: 16px;

and now onto fixing the code tag.

HTML Slide Shows

I wanted to create a scrolling picture show as many sites use for their front page decoration. I didn’t want to use animated gif because ofthe age of the technology.It’s obviously becoming easier. Basic Tips below, shows how to use the HTML META tag with http-equiv=”refresh”attribute set.

How to do it

The example asks the user to start the slide show, I didn’t want this. I create a bunch of slides as .htm[l] pages. Each slide page contains only the picture, and the meta tag, although a title and other meta data is probably a good idea.

<HTML>
<HEAD>
<TITLE>some title</TITLE>
<!------  This page is an image container and URL ------->
<META HTTP-EQUIV="refresh" CONTENT="8;url=ss2.html"> 
</HEAD>
<BODY>
<IMG SRC="picx/dlr-postbox.png" ALT="DLR" WIDTH="1024" HEIGHT="102" BORDER="0"> 
</BODY>
</HTML>

Each page points at the next page and has a time period defined in seconds. I, then implemented the slide show host page within an IFRAME.

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<CENTER>
<IFRAME SRC="ss1.html" SCROLLING="NO" WIDTH="1024" HEIGHT="102" MARGINWIDTH="0" MARGINHEIGHT="0"> 
</IFRAME> 
</CENTER>
</BODY>
</HTML>

That’s it! The default margins don’t seem to be 0, so they need to be set. The frame is used to ensure that the image is displayed on the host page load.

Links

Check it out

Planet (Venus) Themes (CSS)

I use Sam Ruby’s Planet Venus. The package comes with two themes, I have always rather liked the ‘Fancy’ theme. This article was finished in May 2011, and talks about the css required to amend a planet output page in HTML/CSS. It was written for my planet G3 feed which was a G3 RSS repeater. It may just be a useful source for those who wish to create new themes. (I shall be doing this in March/April 2015 as I develop the refresh of davelevy.info.) Continue reading “Planet (Venus) Themes (CSS)”

Implementing an XML feed viewer in HTML

Viewing an XML feed via an HTML browser

I decided to have another go as I was looking to consume some planet feeds on a static web page. I found Display Your Feed on a Static HTML Page Using FeedBurner’s BuzzBoost using Google and this points at Feedburner’s Buzzboost, which is part of their feed publicity toolset. Continue reading “Implementing an XML feed viewer in HTML”

Triptrop

Travelling in NYC

See http://www.triptropnyc.com/

nycmetro cc by-sa 2.0

They say “extraordinarily pretty subway maps from anywhere to everywhere in new york city”.

The author documents his technology. I wonder how hard it’d be to build a house price database

The author says

As for the programming bits, it was a rag-tag team of scripts consisting of Ruby, Python (NumPy, SciPy, matplotlib), PHP, and ImageMagick all popped onto a couple hundred EC2 instances, running computations on a few gigs of MySQL tables. Distances and image overlays were precomputed for about 128k points in NYC and then moved over to S3 for safekeeping. Web stuff is all Sinatra and (of course) Google Maps. Datawise, station-to-station commute time is from the Metropolitan Transit Authority, and walking calculations are via Manhattan distance at 3mph.

Links

Keywords: Visualisation, Geography, NYC, travel, HTML, Technology

Extending Snipsnap (superceded)

This article, which was originally about how to extend snipsnap & was copied across from the snipsnap bliki on 20th June 2013, I gave up on Snipsnap later in the year, and the project has been abandoned by its authors. This content is thus pretty much superseded and the title but not the link has changed to reflect this.. There has been some minimal reformatting undertaken. There are two idioms used which are snipsnap specific; they have been left as originally published and are now a nonsense. Other things will read oddly as I did not pursue my plans. Embedding Disqus broke the backup utility, or more accurately broke the restore. Continue reading “Extending Snipsnap (superceded)”

RSS Auto Discovery

I need to do this for the various RSS feeds I create.

How?

Isn’t google wonderful? See Peter Freitag’s article on his blog. Peter refers to browsers displaying the RSS feed address behind a button, this went out of fashion

Roller

Dave Johnson writes about it at this article on his blog

and Matt Montgomery of sun pointed me at this macro for Roller

#showAutodiscoveryLinks($model.weblog)

Meta

I copied this across on 18th July 2013, it’s been a long time since I looked at this, and the disappearance from the browser url text box is an annoyance, wonder if user styles could compensate. Wonder why it went away.

Example

The blog documents the RSS autodiscovery LINK meta tag and I repeat it here.

		
? <link title="wiki.davelevy.info » Feed" href="http://wiki.davelevy.info/feed/" 
        rel="alternate" type="application/rss+xml" />

 

Small screen HTML runes

Optimising HTML for small screens

I have been interested in optimising HTML for small screens and/or using CSS as the vehicle. This has been driven by my personal publication properties and started at Sun with the then Sun Blog.

Meta and WPTOUCH

This page was originally written in 2009.  The snip was originally called HTML. Obviously small screen devices have exploded in quantity since then. It’s a bigger problem and opportunity today. The bulk of this page was written in 2009, based on fact finding undertaken in 2008. As this wiki and its companion blog become the major platforms for my web presence, I have been reviewing how to deliver the content over small screens. I installed wptouch  fairly quickly after I moved to self managed wordpress and at the end of 2013, wptouch was upgraded with a magnificent look and feel.I tweeted,

vvv Code embed 1 vvv

I suspect the arrival of WPtouch 2013 will slow down my research,  but I had been storing URLs in delicious with the tags, mobile+webdesign

ooOOOoo

I also have a bunch of bookmarks tagged HTML at http://del.icio.us/DaveLevy.

Media

Obviously step one is to hid the sidebars on print. I have found some resources which I hope will help.

Is there a media type for the ipod or other PDAs.

finds

it also points IETF and CSS2 resources. The @@media print” CSS code mentioned on the w3 css2 page looks like what we might need for snipsnap as it may not require an explicit assignment as print rule in the <STYLE> or <LINK> statements.

Share This

See http://sharethis.com/

To be continued

<script type="text/javascript" 
    src="http://w.sharethis.com/button/sharethis.js#publisher=ba31e40c-9472-4900-9d84-7c77ffa1c9a8&amp;type=website">
</script>

From the blog article dated 8 Sep 2009… also repeated on Developing Snipsnap

Also see my Add This page. This was the name in the bliki, but I used both share and add this in the side bar.