No significant changes here. Added the required code for the site to be served by a database instead of hand-coding. A couple of small formatting changes but I’m ready to go from my old but lovely way of serving videos, Shadowbox to spanking, new HTML5.
Step 4
One update and one non-update:
Update; looks like H.264 is getting to be the standard for video. Based on the MPEG LA announcement, H.264 will be forever free if the video being served is free. Due to this announcement, I’m going to focus on serving H.264 only and forget about…
The non-update: Jillion is running out of August. Its August 28th and no sign of their sublime video code. When it shows up, I’ll take a look until then I’m off to do my own thing.
Update: I went ahead and implemented Shadowbox again. I like the way it works, I don’t like that it doesn’t use the new HTML video selector. The new one in Safari has a much nicer controller and the ability to go full size. Jilion, Ferris Jilion?
With Jillion off in the distance, I decided to work on the site layout as compared to determining my video playback scheme.
The site looks very similar to the original site. I made some changes such as the WELLINGTON ROAD Pictures graphic, font colors and spacing. What was interesting was I have yet to use an ID or Class. Everything works semantically, when I need to reference an element, I use the a descendent selector i.e. “nav li” as compared to a “div class=nav and li class=navli”. It is a much simpler way to develop CSS.
Step 3
Update: Just realized that the “wrapper” for the site, which was a <div> then became an id for <body>, isn’t needed. I can use <body> as my wrapper, which means there aren’t any id’s or class’ in the file at all. Not sure if this is right or wrong or works, just is.
Posted in HTML5/CSS3, Web
|
Tagged CSS, HTML5, Web
|
First, I need to make a comment as to how I manage the site content. I use a database and PHP to manage the content. This allows me to keep the number of pages to a minimum and adding content is absurdly easy. That said, I’m building this HTML5 site using static content. Once I determine how to create my desired HTML5 site, its somewhat child’s play to convert it into a dynamic site.
So how did my next iteration work? Not bad, as you can see in Step 2b, the site is starting to resemble my current site. I have a poster image that links to a video when clicked. The time is in the right place and I need to update notes.
Note on notes: It is properly formatted as an “aside” and I’d like to make the site more friendly by using JS to display the notes on the page as compared to going to another page.
Step 2b
As I remake the site, I need to determine if Jilion is something I should consider. They claim to make a great cross-browser, HTML5 compliant, video player. Mmmmm. (and based on comments by one of my favorites; John Gruber/Daring Fireball, it is the “bee’s knees” (my words, not his).
Posted in HTML5/CSS3, Web
|
Tagged CSS, HTML5, Web
|
HTML5 holds great promise for video playback. Gone will be the days of embedded objects, plugins and (hopefully) Flash. The issue we still face are browser codec compatibilities; such as Firefox wants to see Ogg Theora and Safari wants h.264.
My next step is to explore video playback within one of the articles. I’ll start with Safari using only the video tag then explore other fallback alternatives for other browsers. I believe this will require multiple sub-steps hence Step 2a, 2b, 2c and so on.
Step 2a – clearly not an option, the video takes up 2 columns and 2 rows immediately, probably will need to use JS to create a similar effect to the shadowbox I use today
Posted in HTML5/CSS3, Web
|
Tagged CSS, HTML5, Web
|
Following a technique advocated in “transcending CSS by Andy Clarke“, I’ve taken the current design and ‘gray boxed it”. (I want to point out that my goal is to learn HTML5/CSS3, not to create a wholly new design). I simplified the site to its simplest elements:
From the graphic, you can see its a very simple layout; navigation, header, rows of three articles and a footer. Each article has a title(h1), a comment(p) and notes(aside).
I’m going to start off from scratch, building the file first using HTML5 then adding CSS3 to create an identical gray box site. This allows me to create the site without the complexity of the exact content.
Each version will continue to exist and I will add versioning as I go.
Step 1
Posted in HTML5/CSS3, Web
|
Tagged CSS, HTML5, Web
|
