Archive for the ‘Web & Design’ Category

Sticked WordPress Theme, beta release.

Saturday, April 12th, 2008

After a lot of work I'm happy to say that Sticked is ready!

Sticked is a WordPress theme that i had in mind since too many time ago, and now, i am sharing it with you all :).

Features

  • Customizable background and body textures. [Click here to see screenshot]
    You can select from a bunch of available textures for both your page background and your main body background, you can even create your own if you feel like.
  • Customizable colors for "Stickies". [Click here to see screenshot]
    Sticked will add a new setting in your admin UI, there you can select an specific color for each post.
  • Compatible with most modern (and not so modern) browsers.
    Sticked has been tested with the following browsers: 

    • Internet Explorer 6: 80% - (Some minor image glitches due to the lack of support for PNG transparent images in this browser).
    • Internet Explorer 7 & Internet Explorer 8: 100%.
    • Safari for Mac and Windows: 100%.
    • Opera 9 for Mac and Windows: 100%.
    • Firefox for Mac and Windows: 100%.
  • Styled blockquotes:
    By using the <blockquote> tag, you can create specific boxes to highlight parts of your content, examples below: 

    This text is enclosed between <blockquote></blockquote> html tags.

    This text is enclosed between <blockquote class="mac"></blockquote> html tags.

    This text is enclosed between <blockquote class="warning"></blockquote> html tags.

  • Proportional fonts:
    Sticked uses proportional fonts, that means that the text size will be readable and consistent at any resolution, including big LCD screens.
  • Widgets Ready:
    Sticked is compatible with most WordPress sidebar widgets out there.

Theme Downloads and Tools

CLICK HERE to download the latest version (0.6) of Sticked for WordPress 2.5

CLICK HERE to download a PSD (Photoshop) file containing a blank header.

Installation is like with any other WordPress Theme, just upload the contents of the zip file inside your wp-content/themes/ directory and you are done.

If you have any question or suggestion, feel free to leave a comment here.

Stck’d, a new WordPress Theme for my blog.

Sunday, April 6th, 2008

Hi there, as you maybe noticed, I did a complete redesign of this blog and I am using for the first time a custom WordPress Theme that i have created from scratch.

This is my first ever WordPress Theme so i hope you like it :)

The idea for Stck'd was to create a theme with some smooth visual elements while maintaining an easy to the eyes structure and focusing on the contents, instead of graphics.

It is on my plans to release this theme for free as soon as i finish fixing bugs, etc, so if you like it or you have any comment / suggestion, feel free to leave a comment in here, any feedback is appreciated.

April 7, some updates:

Per-post color selection:

It is now possible to select the post-it color on a per post basis, just add a custom field called "color" to your post, and it will automagically change the paper color for said item. Available colors are:

  • Cyan.
  • Green.
  • Pink.
  • Yellow.
  • Magenta.

Adding a custom color field for a post.

Stck'd is now compatible with the following browsers:

// Diego.

bbPress, an amazing platform for forums and message boards!

Saturday, April 5th, 2008

In the past days, i have been working on the design and development of a new "community like" website. Since the main purpose of this site is to inform fans of a rock band about tour dates, news, events, etc, WordPress was my CMS of choice for the backend (on top of that, i have been waiting a lot to have a chance to learn the WordPress Theme API), but the real problem showed up when i had to choose what forum software i was going to use.

At first, i started by using phpbb3, which is great, but even the fact that there are some WordPress integration solutions, etc, i had to hack a lot the integration code, and it wasn't really working as tight as i wanted to... and then.... i found bbPress!.

bbPress is a fairly young forum software developed by the same guys in charge of the WordPress codebase, it is not only a pleasure to work with it, but it is also a pleasure to modify it to fit your needs. It uses a templating engine almost 100% identical to the one on WordPress, it integrates seamlessly with WordPress, and, on top of that, it is fast as hell, what more could you ask for ? :D

If you are curious enough, you can take a look at how things are looking so far, keep in mind that this is still work in progress :)

Welcome (back) to the HTML tables age!…

Saturday, January 12th, 2008

Microsoft Outlook 2007 IconOffice 2007 is a great suite of productivity applications, Microsoft Word has been for years my word processing application of choice, same goes for Microsoft Excel when it comes to spreadsheets, and... until some days ago, Microsoft Outlook (not Outlook Express) has been my email application of choice.
Not anymore.
Some days ago i was hired to design and code a series of newsletters for an Argentinian magazine, and even the fact that email marketing / newsletter design is not my main job, i decided to do it because, after all, it is just (x)HTML and CSS, so it should be pretty simple I though... well, i was really, but really wrong. (more...)

Encoding high quality h.264 / aacPlus v2 media for web streaming with Flash 9, version 2.

Tuesday, January 1st, 2008

It was some months ago when I wrote a tutorial about how to encode good quality h.264 video with aacPlus audio in order to use the great capabilities of the new flash player version 9.0.115 (that in case you missed it, now can play h264 video and aacPlus v2 audio).
Due to some personal convictions for my prior tutorial, i decided to use FFMPEG, and while it does the job pretty well, it has some limitations (specially in the video scaling / resizing area). So in my particular case, I had to use several php / bash scripts in order to feed the encoders with the proper resizing data, etcetera.
Well, let me introduce you to the 2nd version of my h.264 / aacPlus v2 tutorial.

This time I used Mencoder, an amazing tool that comes with the mPlayer package, and i also created what i think is a really nice bash script to make the process almost 100% smooth and simple.

These are the things you will need:

(more...)

Switching servers…

Monday, December 17th, 2007

Hi there all, just a quick note to inform you that i am switching servers in the following days.
I'm going to move this blog to a dedicated server provided by the guys at SolarVPS, why ?
Simply because i have several servers with them already so i know their service quality, also because they have an unbeatable price / features relation, and because their support is just from other world, one of the few big companies where you still can talk (chat) with the CEO eventually.
So, expect some DNS downtime in the following days. :)

Record your favorite radio shows and generate a podcast with the episodes.

Tuesday, October 9th, 2007

Podcast as shown by iTunes 7Ok, this is something that i had in mind since some time ago but i didn't had the time to actually do it. But now i finished it.
The situation is like this, there is a radio show that i love, but the problem is that this radio show starts at 12 AM and finishes at 2 AM, and usually, I'm doing any other thing at that time in the night.
So, i decided to create some simple script to record the audio in one of my servers (by using the Radio station internet broadcast).

For all this to work, you will need the following things:

  1. PHP 5.1.6 or newer
  2. MPlayer
  3. the GPAC utilitles
  4. the Nero Digital AAC Encoder

The idea for the bash script to record the audio stream is based on a nice tutorial by Phil Salkie, but honestly, i think i improved it a lot, specially because it uses a FIFO as temporary storage, and because it compresses the audio to a more recent audio format like HE-AAC.

Basically, the following bash script will record any audio stream of your choice and will convert it to a HE-AAC file inside an m4a container compatible with any audio player out there AND iTunes / iPod of course ;)

After the audio file is done, the second script will generate a podcast feed (RSS) compatible with iTunes or any podcast client out there, like for example Juice.

Here is the script to capture the radio show and convert it to a M4A file (AAC Plus inside an MP4 container).

#!/bin/bash
TERM="linux"
# RANDOM GUID GENERATION
SUM=`date`
SUM2=`echo $SUM | md5sum | cut -c 1-8`
 
# INITIALIZATION VARIABLES
DATE=`date +%F`  # Save the date as YYYY-MM-DD
FILE=/home/plusmedia/public_html/media/$DATE---$SUM2.mp4  # WHERE TO SAVE THE STREAM ?
STREAM=mms://200.43.193.143/radio10  # The URL of the stream to save.
FIFO=/tmp/stream.wav  # We create a FIFO as intermediate storage for the encoding.
ARTWORK=/home/plusmedia/public_html/lvst.jpg  # Path to some artwork file for iTunes, can be JPG or PNG.
DURATION=122m # How many minutes should we record ?
 
# MP4 TAGS
AUTHOR="Some Author"
ALBUM="Some Radio Show"
TITLE="Some Radio Program - $DATE" 
 
# We use mplayer to capture the stream to a wav file being stored into a FIFO.
mkfifo $FIFO
/usr/bin/mplayer $STREAM -af resample=44100:0:2,volume=0:1,pan=1:0.5:0.5,comp -ao pcm:file="$FIFO" -vo null -vc dummy &lt; /dev/null 2&gt;&amp;1 &gt;/dev/null &amp; pA=$!
 
# Encoding the fifo to AAC with the Nero Digital Encoder for Linux.
/usr/bin/neroAacEnc -br 24000 -he -if $FIFO -of $FILE &amp; pB=$!
 
sleep $DURATION  # wait for the show to be over
 
kill $pA # end the mplayer process
sleep 2s # IMPORTANT! wait a while for the Nero encoder to finish and close the opened files.
 
echo "CREATING M4A AND APPLYING TAGS..."
/usr/bin/MP4Box -add "$FILE#audio" -itags cover="$ARTWORK":artist="$AUTHOR":comment="$DATE":album_artist="$AUTHOR" -lang english -new "${FILE%.*}.m4a"
sleep 1s
echo "Generating Podcast Item..."
# We have a new episode recorded, so it is time to call the podcast generation script to update the RSS feed.
/home/plusmedia/podcast
 
echo "Deleting FIFO and temporary files..."
rm $FIFO -f
rm $FILE -f
 
echo "done!"

And this is the PHP script to generate the "iTunes Compliant" podcast feed:

#!/usr/bin/php
setIndent = true;
    $xmlObject-&gt;openMemory();
    $xmlObject-&gt;startDocument('1.0','UTF-8');
    $xmlObject-&gt;startElement ('rss'); //
    $xmlObject-&gt;writeAttribute( 'xmlns:itunes', 'http://www.itunes.com/dtds/podcast-1.0.dtd');
    $xmlObject-&gt;writeAttribute( 'version', '2.0');
	$xmlObject-&gt;startElement ('channel');
	$xmlObject-&gt;writeElement ('title', $title);
	$xmlObject-&gt;writeElement ('link', $link);
	$xmlObject-&gt;writeElement ('language', $language);
	$xmlObject-&gt;writeElement ('copyright', $copyright);
	$xmlObject-&gt;writeElement ('itunes:subtitle', $itunesSubtitle);
	$xmlObject-&gt;writeElement ('itunes:author', $itunesAuthor);
	$xmlObject-&gt;writeElement ('itunes:summary', $itunesSummary);
	$xmlObject-&gt;writeElement ('itunes:explicit', $itunesExplicit);
	$xmlObject-&gt;writeElement ('description', $description);
		$xmlObject-&gt;startElement ('itunes:owner');
		$xmlObject-&gt;writeElement ('itunes:name', $ownerName);
		$xmlObject-&gt;writeElement ('itunes:email', $ownerEmail);
		$xmlObject-&gt;endElement();
	$xmlObject-&gt;startElement ('itunes:image');
		$xmlObject-&gt;writeAttribute ('href', $baseURL.$image);
	$xmlObject-&gt;endElement();
		$xmlObject-&gt;startElement ('itunes:category');
		$xmlObject-&gt;writeAttribute ('text', $mainCategory);
			$xmlObject-&gt;startElement ('itunes:category');
			$xmlObject-&gt;writeAttribute ('text', $childCategory);
			$xmlObject-&gt;endElement();
		$xmlObject-&gt;endElement();
// 	ITEMS
	$files = scandir($mediaDIR);
	$sortedFiles = array();
	foreach ($files as $filePath) {
		$fileItem = array( 	'modified'  =&gt; filemtime($mediaDIR.$filePath),
							'path'		=&gt; $filePath
		            	 );
		array_push ($sortedFiles, $fileItem);
	}
	usort($sortedFiles, "cmp");
	foreach ($sortedFiles as $value) {
		$extension = substr($value['path'], strrpos($value['path'], "."));
		if ($extension == $fileExtension) {
			$nameParts = explode("---", parseFileName($value['path']));
			$xmlObject-&gt;startElement ('item');
			$dateComponent = strtotime($nameParts[0]);
			$xmlObject-&gt;writeElement ('title', $itemTitle.strftime('%A, %B %d, %Y', $dateComponent));
			$xmlObject-&gt;writeElement ('itunes:author', $itunesAuthor);
			$xmlObject-&gt;writeElement ('itunes:subtitle', $itunesSubtitle);
			$xmlObject-&gt;writeElement ('itunes:image', $baseURL.$image);
			$xmlObject-&gt;writeElement ('pubDate', date('r', $dateComponent));
			$xmlObject-&gt;startElement ('enclosure');
				$xmlObject-&gt;writeAttribute( 'url', $baseURL.$mediaURL.$value['path']);
				$xmlObject-&gt;writeAttribute( 'length', filesize($mediaDIR.$value['path']));
				$xmlObject-&gt;writeAttribute( 'type', 'audio/x-m4a');
			$xmlObject-&gt;endElement(); //
			$xmlObject-&gt;writeElement ('guid', $baseURL.$mediaURL.$value['path']);
			$xmlObject-&gt;endElement(); //
		}
	}
	$xmlObject-&gt;endElement(); //
    $xmlObject-&gt;endElement(); // 
 
// 	Write XML data to file...
    writeXmlFile($xmlObject-&gt;outputMemory(true), $XML);    
 
function writeXmlFile($contents, $file) {
	$fh = fopen($file, 'w') or die("can't open file");
	fwrite($fh, $contents);
}
 
function parseFileName($fileName) {
	$input = explode(".",$fileName);
	$noExt = $input[0];
	return $noExt;
}
 
// Custom array ordering function for usort
// orders by REVERSE order (Biggest timestamp goes FIRST).
function cmp($a, $b)
{
    return strcmp($b["modified"], $a["modified"]);
}
?&gt;

The PHP script will scan a given directory for files with the extension "m4a" (or any other extension configured in the $fileExtension variable), it will order the files by their created date (in reverse order) and will generate a file called "podcast.xml" that you can access with iTunes on mac or PC, or you could use any other podcast client like Juice.

You should for example call the bash script "recorder" and call the php script "podcast", then chmod +x both files to make them executables, and then just run the bash script by typing:

./recorder

Obviously, the idea behind all this is that you should create a crontab entry to run the process automatically, in my case, it runs everyday at 12:00 AM and i did set the duration variable to 121 minutes (2 hours and a bit).
All the rest should be smooth and automatic if you configured correctly the initialization variables in both scripts.

More changes to Illacrimo for Wordpress

Thursday, October 4th, 2007

As you can see, i did several other changes to the Illacrimo theme for Wordpress.
Between several minor fixes, you will notice that there is more space on the post column now, and I removed the original column for the post's date too. Instead, the date is located now next to the post title.
I also replaced several images with CSS equivalents, so the site loads a little faster now and uses less bandwidth.
You can download the new version by clicking here.

If you have any questions or suggestions, you can leave a comment on this post.

Serverside video resizing script for ffmpeg or Mencoder

Monday, October 1st, 2007

Some days ago, while working on a project that involves the re-encoding of a lot of videos coming from several sources, aspect ratios, resolutions, etc, i found myself in the situation where i needed to "standarize" somehow all the videos to a prefixed size in order to place them on a fixed space in a web page.
While most linux tools like ffmpeg or mencoder include native functions to scale or resize the video, they don't care about the aspect ratios or about the fact that most video encoders expect mod16 values for the height and width values.
So my situation was like this:

I needed to make all the videos 480 pixels high, and scale the width proportionally.

That being said, i came up with this PHP script that i call from inside a bash script:

  1. #!/usr/bin/php
  2. <?php
  3. $cmdWidth = 'midentify '.$argv[1];
  4. $finalHeight = $argv[2];
  5. exec($cmdWidth, $output);
  6.  
  7. foreach ($output as $value) {
  8. if (strstr($value, "ID_VIDEO_WIDTH")) {
  9.  
  10. $width = parseResult($value);
  11. }
  12. if (strstr($value, "ID_VIDEO_HEIGHT")) {
  13. $height = parseResult($value);
  14. }
  15. }
  16. $frameSize = $width / $height;
  17. $finalWidth = $finalHeight * $frameSize;
  18. echo getMod16(round($finalWidth)) . "x" . getMod16(round($finalHeight)) . "\n";
  19. function parseResult($line) {
  20. $v1 = explode("=",$line);
  21. $v20 = $v1[1];
  22.  
  23. //var_dump($v2);
  24. return $v20;
  25. }
  26. function getMod16($number){
  27. while (fmod($number, 16) != 0) {
  28. $number ++;
  29. }
  30. return $number;
  31. }
  32. ?>

This script assumes that you have the "midentify" utility (wich comes with mplayer) installed in your path, and expects 2 arguments, being argument 1 the movie you want to resize and argument 2 the actual height you want to reach.
That being said, suppose you have a movie that is 848 pixels width and 480 pixels high and you want to re-scale it so it fits inside a 400 pixels high space, you would call the script like this:

./resizer mymovie.avi 400

The script will output this:

720x400

You can use later this value as an input parameter for ffmpeg for example.

Before somebody asks, the reason because i used PHP instead of BASH, is simply because bash does not supports floats.

CSSEdit 2.5, a visual CSS Editor that doesn’t suck.

Thursday, September 27th, 2007

CSSEdit 2.5 screenshotOh my God, some weeks ago I bought a license for this amazing piece of software made by the guys at macrabbit.com. This is not just another CSS Editor, this is **THE** CSS Editor.
Not only you can edit each and every aspect of the css code in a visual manner, but also, every change that you do is reflected in the display window in real time! Yay!
One of the features that i really love about this software is the "X-Ray" function, where you basically click on the different elements of the webpage you are working on, and it tells you all the CSS classes that are affecting it, you also see the full inheritance tree and you can, obviously create new CSS Classes with full inheritance control thanks to the "inspector" window.
(more...)