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!

Nesting Elements in CSS

I'm beginning to work on my site, and the first part I'm going to tackle is the header and menu bar of my site, which is common to all the pages. So I've written up the html content document, which was pretty simple, and am now onto styling it with CSS. I spent yesterday learning the basic elements of CSS and all the things it can do by going through the CSS tutorials on W3Schools (http://www.w3schools.com/css/default.asp). It was quite simple to understand, and I found the "Try It Editors" were really useful to see the actual effects of the CSS code it was teaching. Although I haven't managed to memorise everything, it was good to have an overview of what I can do with CSS, so I could start mentally picturing which tools I could use to achieve the effects I want for my page.

Currently, I'm staring on my stylesheet, and am experiencing some trouble with understanding how to nest elements on my page without having to give everything a different id/class and confusing myself. So far, the general rule seems to be that you can signify a certain element within another element if you type the id of the element and then type a ">" before the nested element.

So for example, if I wanted to specify the paragraphs within my div with an id of "header", then in the css I use #header > p.

I found this page that seems to be helpful with the rules with regards to selectors and nesting within CSS, so sharing it here in case anyone is also having trouble in that area:

http://www.w3.org/TR/CSS21/selector.html

:)

Beginning CSS

So in class this week we learnt about how CSS styles work, and were given the chance to play around with various webpages, as well as a challenge exercise in which we were given a picture of a page and asked to re-create it with CSS. Having previously used tables for everything in styling my webpages, I can definitely see how CSS makes the content and style much simpler to decipher and change if updates are needed. The coding overall also looks much neater than the complex html used to generate tables (and tables nesting into other tables...O_O), and it is much easier to fix and change the style of a page with CSS.

I had some trouble with the challenge of re-creating the style with my own CSS coding, but in the end was happy to have been able to accomplish it (although I used much more CSS code than was required in the solution that was shown). Now having the basic concept of how CSS works, and how it styles webpages, I'm rather excited to practice using it and test out all the funky things it can do even without javascript or any programming!

Letting go of bad habits

So I've been reading up on the difference between HTML and XHTML, and found this lovely article that gave some clear guidelines to follow:

http://www.wdvl.com/Authoring/Languages/XML/XHTML/dif.html

The good news is... I am and always have been a very anal writer of HTML. I made sure every line, every tag was alined to the perfection I demanded, and would rummage through searching for any bits of code that even though they worked, weren't "correct" according to my coding standards.

The bad news? I was learning this all through HTML, and the habits I had imposed on myself - and now, I need to learn how to change those habits into XHTML habits!

For example: According to the article - "Tags and Attributes must be written in the lower case".

Easy enough, and sure, I always made sure all my code was in the lower case... except for some reason, I always felt that the <BR> tag, HAD to be in upper case... this is wrong. It is not XHTML standards. There is no reason for the <br> tag to be in upper case, and I will need to stop myself from doing so.

Another example, which also affects the <br> tag, as well as <img> tags and others, is that - "Empty elements must be terminated". Now this one is definitely news to me, and now I know why the automatic codes generated in online forms put the little "/" at the end of the <img> tags and <br> tags. I actually used to go through pages of code removing them because I thought they were useless extras!

Of course, some of my previous habits were good ones, and in line with XHTML standards, such as nesting my elements in the right order, and quoting all my attribute values.

Whatever the case, I'm glad now to have a proper standard to adhere to, and hopefully, I will be able to change my bad anal habits into good ones in accordance with XHTML standards! :)

The power of CSS

In DMT class this week, I was amazed to find out what css could actually do, especially when shown the wonderful CSS Zen Garden site that beautifully captures its "powers".

It wasn't that I hadn't heard of or used css before, but I had always thought of it as just something that could set the basic visual elements of a page, such as overall background colour, or the font of the text on the page unless stated otherwise in the html. I also knew that css was able to layout a page, but had no idea how that could possibly work.

With learning about XHTML, a new concept of web design was introduced to me, that being the ability to separate content into the html coding, and layout into pure css. The css can be used to control separate elements on a page through tagging it with an id that will have a corresponding css command setting its style. This means that every element can essentially be styled, positioned and visually refined through css.

I'm very excited about this idea, and very much look forward to actually being able to create pure css defined layouts on a website. For now, I feel I have a lot to learn on how to use css beyond the basic full page elements. In an attempt to find out more, I came across http://www.w3schools.com/css/default.asp, which seems to be a useful tutorial on starting and learning css (it also has tutorials on javascript, xhtml and html5, which should come in handy through-out this semester of learning also!).

So second week, and I'm already able to answer questions I've been asking for the past seven years or so! Things are going well!