{"id":293,"date":"2010-07-26T08:38:40","date_gmt":"2010-07-26T15:38:40","guid":{"rendered":"http:\/\/www.wellys.org\/wellysblog\/?p=293"},"modified":"2011-06-10T15:15:58","modified_gmt":"2011-06-10T22:15:58","slug":"step-2b-video-continued","status":"publish","type":"post","link":"http:\/\/www.wellys.org\/wellysblog\/?p=293","title":{"rendered":"Step 2b: Video (continued)"},"content":{"rendered":"<p>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&#8217;m building this HTML5 site using static content. Once I determine how to create my desired HTML5 site, its somewhat child&#8217;s play to convert it into a dynamic site.<\/p>\n<p>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.<\/p>\n<p>Note on notes: It is properly formatted as an &#8220;aside&#8221; and\u00c2\u00a0I&#8217;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.<\/p>\n<p><a title=\"Step 2b in HTML5 upgrade\" href=\"http:\/\/www.wellys.org\/index5_step2b.html\" target=\"_blank\">Step 2b<\/a><\/p>\n<p>As I remake the site, I need to determine if <a title=\"Visit Jillion HTML5 video site\" href=\"http:\/\/jilion.com\/\" target=\"_blank\">Jilion<\/a> 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; <a title=\"John Gruber's comments on Jilion\" href=\"http:\/\/daringfireball.net\/linked\/2010\/02\/01\/sublimevideo\" target=\"_blank\">John Gruber\/Daring Fireball,<\/a> it is the &#8220;bee&#8217;s knees&#8221; (my words, not his).<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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&#8217;m building this HTML5 site using static content. Once I &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/www.wellys.org\/wellysblog\/?p=293\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Step 2b: Video (continued)&#8221;<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[27],"tags":[7,26,32],"jetpack_featured_media_url":"","jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/pvRD1-4J","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":289,"url":"http:\/\/www.wellys.org\/wellysblog\/?p=289","url_meta":{"origin":293,"position":0},"title":"Step 2: Figure out video","date":"July 25, 2010","format":false,"excerpt":"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\u2026","rel":"","context":"In &quot;HTML5\/CSS3&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":273,"url":"http:\/\/www.wellys.org\/wellysblog\/?p=273","url_meta":{"origin":293,"position":1},"title":"Step 1: Keep Design and Gray box it","date":"July 25, 2010","format":false,"excerpt":"Following a technique advocated in \"transcending CSS by Andy Clarke\", I've taken the current design and 'gray boxed it\". \u00c2\u00a0(I want to point out that my goal is to learn HTML5\/CSS3, not to create a wholly new design). \u00c2\u00a0I simplified the site to its simplest elements: From the graphic, you\u2026","rel":"","context":"In &quot;HTML5\/CSS3&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":310,"url":"http:\/\/www.wellys.org\/wellysblog\/?p=310","url_meta":{"origin":293,"position":2},"title":"Step 4: Updated to be dynamic","date":"August 28, 2010","format":false,"excerpt":"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\u2026","rel":"","context":"In &quot;HTML5\/CSS3&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":303,"url":"http:\/\/www.wellys.org\/wellysblog\/?p=303","url_meta":{"origin":293,"position":3},"title":"Step 3: Layout site","date":"August 1, 2010","format":false,"excerpt":"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\u2026","rel":"","context":"In &quot;HTML5\/CSS3&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":267,"url":"http:\/\/www.wellys.org\/wellysblog\/?p=267","url_meta":{"origin":293,"position":4},"title":"Wish me luck...","date":"July 24, 2010","format":false,"excerpt":"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\u2026","rel":"","context":"In &quot;Wordpress&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":318,"url":"http:\/\/www.wellys.org\/wellysblog\/?p=318","url_meta":{"origin":293,"position":5},"title":"Hype - a new approach","date":"May 22, 2011","format":false,"excerpt":"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\u2026","rel":"","context":"In &quot;HTML5\/CSS3&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"http:\/\/www.wellys.org\/wellysblog\/index.php?rest_route=\/wp\/v2\/posts\/293"}],"collection":[{"href":"http:\/\/www.wellys.org\/wellysblog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.wellys.org\/wellysblog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.wellys.org\/wellysblog\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/www.wellys.org\/wellysblog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=293"}],"version-history":[{"count":9,"href":"http:\/\/www.wellys.org\/wellysblog\/index.php?rest_route=\/wp\/v2\/posts\/293\/revisions"}],"predecessor-version":[{"id":336,"href":"http:\/\/www.wellys.org\/wellysblog\/index.php?rest_route=\/wp\/v2\/posts\/293\/revisions\/336"}],"wp:attachment":[{"href":"http:\/\/www.wellys.org\/wellysblog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=293"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.wellys.org\/wellysblog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=293"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.wellys.org\/wellysblog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=293"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}