HTML5 Video embedding

Managed to successfully embed a video into my site with the html5 video tag. The code itself is very simple, just using a video tag, and adding in the link to the video. However, there are a number of issues with web browsers not agreeing upon one standardised video format, so in order to make the video play in most of the browsers available (those with html5 support), you currently have to change the file format of the video by using a converting software (Miro is a decent, free, open-sourced software that does the job beautifully), and converting the video to different formats (generally, theora ogg for Firefox, and mp4 for Safari). Then you link both videos as a source within the tag and the browser will choose the one it can play.

One issue I did encounter with the html5 video tag is when playing them in Firefox. My site host (and I found this to be a common problem when researching for solutions, so it must be pretty standardised for all webhosts) didn't have the .ogv file format specified, so the video wasn't working in Firefox. The solution was to go into my control panel, and add a MIME type for ogv (Application/ogg, extensions ogg ogv).

Also, I found that html5 only embeds the video, but doesn't have any functions such as playlists, so I wasn't able to make a playlist as I had originally intended (I learned that I could've probably used javascript, but that was beyond the scope of my project).

Google Web Fonts

For the main header of my site, I wanted to have a fancy font, so tried out using Google Web Fonts. The technology is very simple to use, and the site tells you exactly how to do it. All you have to do is find a font you like, paste a link to the stylesheet on the page you're using the font, and then specify the font name in your CSS (it is good practice to leave a couple of common spare fonts, as this doesn't work with some IE browsers). You can also use CSS to add in extra styles, such as a drop shadow from the text.

There are a range of beautiful fonts to choose from, though not many (I scrolled through the whole list in a minute). I did like how many "handwriting" ones there were though, since I love handwriting fonts. Some issues I have found with installing the font for my header is that there seems to be a lot of integrated padding into the font itself. I set both the top and bottom padding values for my header at "0", but with the font, it seems to automatically put a certain amount of padding between the top and bottom that I couldn't reduce. I'm not sure if there is a solution to this, but I have currently set the font size at a value where the padding isn't so bad. However, I won't be able to get the navigation bar as close to the heading as I had wished.

For a free service, it's certainly very useful if you want to have an unusual font in your site without resorting to making it an image file.

Wireframe Editors

I've been working on the System Plan for my website, and came across the term "wireframe diagram". I wasn't sure what it was,but on further research, found that it was a diagram of all the functionalities of a website without having to worry about the presentation yet. Apparently, it's a useful tool for web designers, so I decided to go about making one.

I found a very simple to use online application to make the wireframe diagrams called "Mockingbird":
https://gomockingbird.com/
It's a drag and drop application, and you can easily create each page's layout with the existing widgets they provide.
You can also sign up for a free account, which lets you save one project up to ten pages.
After you're done, you can export the diagrams to pdf or png files.

Having created the wireframe diagram, I can see how it is useful in planning for my site. Now I have a much more complete picture of each page in my site, how it should look, how the links ink up, and the functions each page needs to have!