{"id":303,"date":"2010-08-01T12:37:57","date_gmt":"2010-08-01T19:37:57","guid":{"rendered":"http:\/\/www.wellys.org\/wellysblog\/?p=303"},"modified":"2011-06-10T15:15:44","modified_gmt":"2011-06-10T22:15:44","slug":"step-3-layout-site","status":"publish","type":"post","link":"http:\/\/www.wellys.org\/wellysblog\/?p=303","title":{"rendered":"Step 3: Layout site"},"content":{"rendered":"<p>With <a title=\"Visit Jilion web site\" href=\"http:\/\/www.jilion.com\" target=\"_blank\">Jillion<\/a> off in the distance, I decided to work on the site layout as compared to determining my video playback scheme.<\/p>\n<p>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. &#8220;nav li&#8221; as compared to a &#8220;div class=nav and li class=navli&#8221;. It is a much simpler way to develop CSS.<\/p>\n<p><a title=\"View Step 3 results\" href=\"http:\/\/www.wellys.org\/index5_step3.html\" target=\"_blank\">Step 3<\/a><\/p>\n<p>Update: Just realized that the &#8220;wrapper&#8221; for the site, which was a &lt;div&gt; then became an id for &lt;body&gt;, isn&#8217;t needed. I can use &lt;body&gt; as my wrapper, which means there aren&#8217;t any id&#8217;s or class&#8217; in the file at all. Not sure if this is right or wrong or works, just is.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/www.wellys.org\/wellysblog\/?p=303\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Step 3: Layout site&#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-4T","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":267,"url":"http:\/\/www.wellys.org\/wellysblog\/?p=267","url_meta":{"origin":303,"position":0},"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":273,"url":"http:\/\/www.wellys.org\/wellysblog\/?p=273","url_meta":{"origin":303,"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":293,"url":"http:\/\/www.wellys.org\/wellysblog\/?p=293","url_meta":{"origin":303,"position":2},"title":"Step 2b: Video (continued)","date":"July 26, 2010","format":false,"excerpt":"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\u2026","rel":"","context":"In &quot;HTML5\/CSS3&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":289,"url":"http:\/\/www.wellys.org\/wellysblog\/?p=289","url_meta":{"origin":303,"position":3},"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":318,"url":"http:\/\/www.wellys.org\/wellysblog\/?p=318","url_meta":{"origin":303,"position":4},"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":[]},{"id":194,"url":"http:\/\/www.wellys.org\/wellysblog\/?p=194","url_meta":{"origin":303,"position":5},"title":"HTML5 and CSS3","date":"October 18, 2009","format":false,"excerpt":"I'm interested in what HTML5\/CSS3 are bringing to the Web. A simple thing like using CSS to drop shadow an image is \u00c2\u00a0quite nice. Beats having to use Photoshop... Based on the drop shadow alone, I thought it would be good to begin using these two new web standards, So\u2026","rel":"","context":"In &quot;Web&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\/303"}],"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=303"}],"version-history":[{"count":6,"href":"http:\/\/www.wellys.org\/wellysblog\/index.php?rest_route=\/wp\/v2\/posts\/303\/revisions"}],"predecessor-version":[{"id":335,"href":"http:\/\/www.wellys.org\/wellysblog\/index.php?rest_route=\/wp\/v2\/posts\/303\/revisions\/335"}],"wp:attachment":[{"href":"http:\/\/www.wellys.org\/wellysblog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=303"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.wellys.org\/wellysblog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=303"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.wellys.org\/wellysblog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=303"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}