{"id":318,"date":"2011-05-22T10:58:30","date_gmt":"2011-05-22T17:58:30","guid":{"rendered":"http:\/\/www.wellys.org\/wellysblog\/?p=318"},"modified":"2011-06-10T15:15:26","modified_gmt":"2011-06-10T22:15:26","slug":"hype-a-new-approach","status":"publish","type":"post","link":"http:\/\/www.wellys.org\/wellysblog\/?p=318","title":{"rendered":"Hype – a new approach"},"content":{"rendered":"

Thanks to Jon Gruber<\/a>, I learned about Hype<\/a>.<\/p>\n

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.<\/p>\n

I’ve been attempting to change my WELLINGTON ROAD Pictures<\/a> site from a database-driven, somewhat static site to a bit more dynamic, HTML5-based site for sometime. See here<\/a>, here<\/a>, here<\/a>, here<\/a> and here<\/a>. Sigh, note the last time I attempted to make changes was almost 9 months ago.<\/p>\n

I read about Hype, paid my $29.99 and dove in. The first thing I did was try to create an identical version of my current site. Yeah, that was easy but it was also clear that my database approach to my current layout was far superior. With my current layout, when I create a new film, I upload a poster jpeg, my film and add another line to the database. No coding required. Also somewhat boring from a design perspective.<\/p>\n

With Hype, I needed to duplicate a new scene (think web page) for each film. And I would have to embed the Notes and Time text on each page. The management overhead is considerably more using the Hype approach. The extra steps make sense for I am duplicating a static site with a content creator for dynamic sites.<\/p>\n

What would be required if I went to a more dynamic design? My mental image of a dynamic WRP site would be to use a film metaphor. I wanted to represent each film by a frame in a film strip. I would have a limited number of films showing and the user would move the film forward or backward to see additional films. Click on a frame would show the film using HTML5 video playback with its most important attribute, play full-screen.<\/p>\n

So I started anew with Hype. Using a film strip image, I created 4 scenes, each with a filmstrip of four films and I added very simple text buttons to indicate forward, backward and home. It was quite simple to add transitions to make the filmstrip look like it was going from left to right and right to left for forward and backward, respectively. The crossfade transition also looked nice for showing the film. Hype did advise me that the transitions were only available in Webkit browsers (Safari, Chrome) as Opera and Firefox had yet to implement them. Hype also advised me that only Safari and IE would show the H.264 forms of my films and I would have to use WebM or Theora encoding to have them play in Opera, Firefox or Chrome. [Ed. note: The 1990’s are calling and they want their browser incompatibilities back.<\/em>] It worked<\/a> and it took about 2 hours worth of work. Not bad!<\/p>\n

My review of Hype:<\/p>\n

Ease of Use:<\/strong> Excellent! I did read over the manual quite quickly to gain an overview of how Hype worked. I also watched the first tutorial. So maybe 10 minutes of preparation. I quickly created a basic website than went to creating a dynamic website in 30 minutes. The design guides work well and the inspector mode continues to be an excellent method of managing metadata. With my site design, I had a significant amount of duplication of scenes. Copying elements from one scene across to the other scenes worked well and accelerated my development.\u00c2\u00a0Speed of \u00c2\u00a0development and ease of use is where Hype shines.<\/p>\n

Power: <\/strong>How much can one do with Hype? Quite a bit and not enough. I am an intermediate when it comes to web design, a neophyte in HTML5 and a non-starter in Javascript. So having the ability to quickly mockup a dynamic site with user actions moving from scene to scene was quite liberating. Hype \u00c2\u00a0can and will be a good replacement for Flash beginners. Instead of learning Flash and creating proprietary websites that break the internet, one can create HTML5\/Javascript\/CSS3 sites that break the internet. Yes, this is the problem with Hype.<\/p>\n

Hype creates a single webpage that then using dynamic properties to display new content. It works pretty well but it does break the concept of using a specific address for specific content. I thought that my previous design had this fatal flaw as well but one can right click on any movie to obtain the link to showing the specific film. What is also nice is that the specific page does show the film using the HTML5 Video tag, which means it will allow playback in fullscreen. Hype can not provide this level of specificity. Its as bad as Flash. Bummer. While this is a show-stopper for my site, I’ll continue to comment on Hype.<\/p>\n

An issue I had with Hype was global changes. I didn’t see a method of making a global change to all selected scenes. I wasn’t able to select more than one scene then applying a change to all. There is a complete lack of contextual changes. Quite often, I would right click to see if there was something I could do to an element. Nope. No response.<\/p>\n

Website: <\/strong>Not so much. Due to Hype’s use of creating one “page” which changes dynamically, ALL content resides in Hype’s folder. For my site, this created a 675MB upload and a duplication of all of my movie and image content. What I could have done was hand edited the Javascript file and changed all of the references to those inside the folder to the pre-existing content on my site. This isn’t a deal-killer. I think a simple property that allows one to enter the address of the content would make this problem go away fast. Version 1.1 perhaps?<\/p>\n

Summary: <\/strong>I like Hype. It is easy to use, provides extremely fast prototyping and can be quite powerful using web standards. [Ed. note: I’m not even going to check if it provides validates<\/a>. I mean technology that is standardized for the web as compared to Flash which is proprietary.<\/em>] It does break the web so I’m not going to use it for WELLINGTON ROAD Pictures but I will use it to test out concepts. I think it would be fantastic for a class in learning about dynamic websites. I look forward to version 3.<\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

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 … <\/p>\n

Continue reading “Hype – a new approach”<\/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":[26,33,32],"jetpack_featured_media_url":"","jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/pvRD1-58","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":273,"url":"http:\/\/www.wellys.org\/wellysblog\/?p=273","url_meta":{"origin":318,"position":0},"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 "HTML5\/CSS3"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":267,"url":"http:\/\/www.wellys.org\/wellysblog\/?p=267","url_meta":{"origin":318,"position":1},"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 "Wordpress"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":293,"url":"http:\/\/www.wellys.org\/wellysblog\/?p=293","url_meta":{"origin":318,"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 "HTML5\/CSS3"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":310,"url":"http:\/\/www.wellys.org\/wellysblog\/?p=310","url_meta":{"origin":318,"position":3},"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 "HTML5\/CSS3"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":194,"url":"http:\/\/www.wellys.org\/wellysblog\/?p=194","url_meta":{"origin":318,"position":4},"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 "Web"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":289,"url":"http:\/\/www.wellys.org\/wellysblog\/?p=289","url_meta":{"origin":318,"position":5},"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 "HTML5\/CSS3"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"http:\/\/www.wellys.org\/wellysblog\/index.php?rest_route=\/wp\/v2\/posts\/318"}],"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=318"}],"version-history":[{"count":6,"href":"http:\/\/www.wellys.org\/wellysblog\/index.php?rest_route=\/wp\/v2\/posts\/318\/revisions"}],"predecessor-version":[{"id":334,"href":"http:\/\/www.wellys.org\/wellysblog\/index.php?rest_route=\/wp\/v2\/posts\/318\/revisions\/334"}],"wp:attachment":[{"href":"http:\/\/www.wellys.org\/wellysblog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=318"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.wellys.org\/wellysblog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=318"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.wellys.org\/wellysblog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=318"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}