Archive for the ‘technophilia’ Category
syntax highlighting with WordPress
Thankfully, pretty much nobody reads this blog.
If they did, they'd have seen a lot of weird changes going on in real-time concerning some XML code in a recent post.
Basically, I've been playing around with various WordPress plugins that support syntax highlighting, which is a fancy way of color-coding code examples with color-coding specific to various scripting and markup languages like PHP, Python, XML, etc.
Anyway, after playing around with several, I was running into the same issue with the indent stripping as talked about here. The use of indentation is paramount to making one's code readable and in some languages, like Python, indentation is required.
In other words, this is valid Python code:
if a == a:
print "The 'a' variable is equal to itself!"
But this is invalid:
if a == a:
print "The 'a' variable is equal to itself!"
because the print statement is dependent on a condition.
Anyway, what was happening was that I'd put code into WordPress, the indentation and highlighting would look good, but if I wanted to edit my post later all the indentation would be lost when I'd reopened the post in the editor (btw: I use Dean's FCKEditor).
So here's what appears to fix it:
- I installed my preferred WordPress syntax highlighter:
Syntax Highlighter CompressSyntax Highlighter Evolved. - I wrote my post and pasted my code directly into the Visual Editor.
- I then highlighted only the code and from the Visual Editor's "styles" drop-down menu I chose "Computer Code".
- I then edited the post in Source mode.
- The indentations had now been converted to the proper HTML entity names.
- I replaced the <code> tags with <pre> tags.
- The opening <pre> tag needs a "class" attribute to specify the type of code (i.e. Python, XML, etc.)
- For example, I'd use this for Python:
- <pre class="brush:python">
- and this for XML:
- <pre class="brush:xml">
From then on, everything seems to be OK. That is to say, I can edit my post at a later time with the Source or Visual Editor and all my indentations are intact.
Here's the earlier Python code using the technique just described:
if a == a: print "The 'a' variable is equal to itself!"
And that's that … I hope. 
OpenOffice to HTML trick
I’ve recently been working on some documentation for a MusicXML platform I wrote called MXMLiszt – I’ll be realizing the files/source in a few weeks.
In the past I’ve used the W3C’s Amaya editor to write the HTML documentation for AudioRegent but that’s a really laborious process and requires a good bit of coding by hand even as I worked with the WYSIWYG environment.
So this time I just decided to use OpenOffice. Problem is when I did a Save As to HTML, the W3C’s Validator was giving me nearly 300 errors. Even worse is that the export was exporting the .html file and all the images in the document to the same directory. Boo. Ideally, the images should be in a subfolder for compartmentalization purposes.
Here’s what worked better: instead of saving to HTML, I used the File>Preview in Web Browser option in OpenOffice. Since Firefox is my default browser, it opened in Firefox. Then I just Firefox’s Save Page As option using the Web Page, complete type. Firefox saved the file (let’s call it "foo") as foo.htm and created a folder called "foo" that contained all the images. Sweet!
This time: only 13 errors from the WC3s’ p.o.v., all very minor errors – who knows where the other ~275 went?!
One way to cut down on errors is to make sure any image you embed in your OpenOffice .odt document has an alternative (alt) text attribute since that attribute is technically required for all images in HTML docs.
I should mention that it’s better to do this from a Linux box rather than Windows as the former uses the UTF-8 encoding and the latter Windows-1252. That’s no huge deal for non-critical documents, but it’s probably better to go with UTF-8 if you can.
Now I’m not going to waste my time hand-correcting a perfectly "valid" HTML doc for things like this. That’s mistaking the cart for the horse. I’m just an average dude trying to share some info with some folks. I’m not an institution charged with a preservation mindset. These WordPress blog entries aren’t valid either BTW …
I realize the importance of standards and sustainability but the Open Document format (foo.odt) is what I would argue is the thing to save, the HTML version being just a convenient manifestation. Secondly, if all major browsers have no trouble with the document, then from a certain p.o.v. the HTML is valid. In a sense, it’s much ado about nothing.
ps: If you’re wondering about exporting to xHTML, don’t.
… that’s a much bigger pain.
Using Expression Encoder 3 to create WMV, Flash, and Ogg Theora screencasts
My Dell laptop died.
I fried the motherboard trying to reduce the fan noise … long story. The computer was a couple years old and was pretty low-powered, so I don't feel too bad.
I got a new laptop. It's a Lenovo T510 – pretty much the only laptop I could find under $1k that had a matte screen. I just can't look at those glossy screens.
Anyway, I've been playing around with having a more powerful computer so I dowloaded Microsoft's Expression Encoder 3 (formerly Windows Media Encoder). Besides the encoder, it also has a screen capture function. The free version limits you to 10 minute captures, but I'm guessing you could merge several screencasts in the Encoder component to make a longer video.
Anyway, on the downside of course is that the free version limits you to WMV (Windows Media) format. Now, there's nothing wrong with that, but it isn't the best format for widespread deployment via the Internet. But you can easily upload the video to YouTube or the much classier Vimeo. That way you can get the file converted to something that can be viewed in-line with Flash and hosted for free. And those sites offer easy ways to share and embed the videos into your blog, website, or Facebook page, etc.
Now another option if
- you have the bandwidth to host the video yourself
- and you like open standards
is to convert your WMV file to Ogg Theora via ffmpeg2theora. All I had to do was dowload the Windows version of ffmpeg2theora (version 0.26) and then place it in the same folder as my WMV file.
Let's say the file is called "foo.wmv" and that it's in my root C drive.
The WMV can be converted to Ogg Theora via the following command line code:
C:\> ffmpeg2theora-0.26 foo.wmv
I should mention that I seemed to only have any luck with this if I first set Expression Encoder to export to VC-1 Simple/WMA for the respective video/audio output formats.
Anyway, the new file called "foo.ogv" gets made and you can open and play it straight from Firefox which has native HTML 5 <video> tag support for Ogg Theora video files.
By the way, here's an interesting bit on the impending battle between Ogg Theora and the H.264 video codec.