Hype - a new approach

Thanks to Jon Gruber, I learned about Hype. Hype is a OS X application that makes it easy to create dynamic websites using HTML5 or more accurately, HTML5, Javascript and CSS3. Hype works. It is also version 1.0 so it is basic but it works, doesn’t crash and holds great promise. I’ve been attempting to change my WELLINGTON ROAD Pictures site from a database-driven, somewhat static site to a bit more dynamic, HTML5-based site for sometime. See here, here, here, here and here. Sigh, note the last time I attempted to make changes was almost 9 months ago. ...

May 22, 2011 · 5 min · lkoepsel

Step 4: Updated to be dynamic

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… ...

August 28, 2010 · 1 min · lkoepsel

Step 3: Layout site

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. ...

August 1, 2010 · 1 min · lkoepsel

Step 2b: Video (continued)

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. ...

July 26, 2010 · 1 min · lkoepsel

Step 2: Figure out video

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. ...

July 25, 2010 · 1 min · lkoepsel

Step 1: Keep Design and Gray box it

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). ...

July 25, 2010 · 1 min · lkoepsel

Wish me luck...

I’m off to redo my film site using HTML5 and CSS3. As I stated some time ago, I’ve been interested in the two technologies for some time. Little things like CSS shadows are very nice and semantic elements like article, aside and nav certainly contribute to a site better than div, div and div. I’ve two books on HTML5; HTML5 for Web Designers/Jeremy Keith and HTML5/Bruce Lawson and Remy Sharp. Both are excellent for providing an understanding of the why along with the how. ...

July 24, 2010 · 1 min · lkoepsel