<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>  Art &#38; Technology   @ NHTV &#187; web</title>
	<atom:link href="http://gamer-powered.com/tag/web/feed/" rel="self" type="application/rss+xml" />
	<link>http://gamer-powered.com</link>
	<description>student blog</description>
	<lastBuildDate>Fri, 02 Jul 2010 15:17:54 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.6</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Week 3, jumping through hoops: object</title>
		<link>http://gamer-powered.com/2009/09/week-3-jumping-through-hoops-object/</link>
		<comments>http://gamer-powered.com/2009/09/week-3-jumping-through-hoops-object/#comments</comments>
		<pubDate>Tue, 22 Sep 2009 12:00:27 +0000</pubDate>
		<dc:creator>Leroy</dc:creator>
				<category><![CDATA[Introduction into Client Technologies: HTML]]></category>
		<category><![CDATA[embed]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[object]]></category>
		<category><![CDATA[standards]]></category>
		<category><![CDATA[web]]></category>
		<category><![CDATA[xhtml]]></category>

		<guid isPermaLink="false">http://gamer-powered.com/?p=26</guid>
		<description><![CDATA[Embedding Media on a webpage
the homework for this week was to research the (x)html object tag. Truth be told, I&#8217;ve never had an in-depth look into this thing, or any way to embed multimedia into an (x)html page. But as it turns out, it&#8217;s quite a horrible thing to do. Reason being that on Internet [...]]]></description>
			<content:encoded><![CDATA[<h1>Embedding Media on a webpage</h1>
<p>the homework for this week was to research the (x)html object tag. Truth be told, I&#8217;ve never had an in-depth look into this thing, or any way to embed multimedia into an (x)html page. But as it turns out, it&#8217;s quite a horrible thing to do. Reason being that on Internet explorer browsers, the object tag is used, while on mozilla/netscape based browsers, embed is used for the same purpose. the W3C also mentioned partial support for the object tag on it&#8217;s website, and as we all know, partial browser support is always nice for a web developer to have to deal with&#8230; not.</p>
<p>So adobe recommends putting an embed tag inside an object tag to ensure that all browsers actually do what you&#8217;d expect them to do, which seems like a fair approach, as long as it doesnt break the xhtml standard on my sites.</p>
<p>So then I decided to look around on some websites myself, and see how they solved the problem, and what i found out was: they didn&#8217;t. Some use object, some use embed, but never a combination, and usually a very ugly &#8216;fix&#8217; is put in place, like putting the html for the embed inside of a div src attribute, and it&#8217;s to no-ones surprise that none of these sites are actually using valid xhtml, or even html, and from what I can see, they purely rely on the browser to fix the html for them, which is really the most horrible thing you could ever do as a web designer. For now I like the youtube approach best, which I&#8217;ve pasted in a quote below. I can&#8217;t wait for html5 and xhtml2 to take over with their proper multimedia support tags, and get rid of the object soup.</p>
<pre style="font-family: 'Bitstream Vera Sans Mono', Monaco, 'Courier New', monospace; font-size: 9pt; line-height: 1.3em; margin-top: 0em; white-space: pre-wrap; word-wrap: break-word;"><span style="color: #7f90aa;">
<pre style="font-family: 'Bitstream Vera Sans Mono', Monaco, 'Courier New', monospace; font-size: 9pt; line-height: 1.3em; margin-top: 0em; white-space: pre-wrap; word-wrap: break-word;"><span style="padding-top: 0.2em; padding-bottom: 0.1em; color: #1c02ff;">&lt;<span style="padding-top: 0.2em; padding-bottom: 0.1em; font-weight: bold;">object</span> <span style="padding-top: 0.2em; padding-bottom: 0.1em; font-style: italic;">classid</span>=<span style="padding-top: 0.2em; padding-bottom: 0.1em; color: #036a07;">"clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"</span> <span style="padding-top: 0.2em; padding-bottom: 0.1em; font-style: italic;">width</span>=<span style="padding-top: 0.2em; padding-bottom: 0.1em; color: #036a07;">"500"</span> <span style="padding-top: 0.2em; padding-bottom: 0.1em; font-style: italic;">height</span>=<span style="padding-top: 0.2em; padding-bottom: 0.1em; color: #036a07;">"340"</span> <span style="padding-top: 0.2em; padding-bottom: 0.1em; font-style: italic;">codebase</span>=<span style="padding-top: 0.2em; padding-bottom: 0.1em; color: #036a07;">"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"</span>&gt;</span></pre>
<pre style="font-family: 'Bitstream Vera Sans Mono', Monaco, 'Courier New', monospace; font-size: 9pt; line-height: 1.3em; margin-top: 0em; white-space: pre-wrap; word-wrap: break-word; padding-left: 30px;"><span style="padding-top: 0.2em; padding-bottom: 0.1em; color: #1c02ff;">&lt;<span style="padding-top: 0.2em; padding-bottom: 0.1em; font-weight: bold;">param</span> <span style="padding-top: 0.2em; padding-bottom: 0.1em; font-style: italic;">name</span>=<span style="padding-top: 0.2em; padding-bottom: 0.1em; color: #036a07;">"allowFullScreen"</span> <span style="padding-top: 0.2em; padding-bottom: 0.1em; font-style: italic;">value</span>=<span style="padding-top: 0.2em; padding-bottom: 0.1em; color: #036a07;">"true"</span> /&gt;
<span style="color: #7f90aa;"><span style="padding-top: 0.2em; padding-bottom: 0.1em; color: #1c02ff;">&lt;<span style="padding-top: 0.2em; padding-bottom: 0.1em; font-weight: bold;">param</span> <span style="padding-top: 0.2em; padding-bottom: 0.1em; font-style: italic;">name</span>=<span style="padding-top: 0.2em; padding-bottom: 0.1em; color: #036a07;">"allowscriptaccess"</span> <span style="padding-top: 0.2em; padding-bottom: 0.1em; font-style: italic;">value</span>=<span style="padding-top: 0.2em; padding-bottom: 0.1em; color: #036a07;">"always"</span> /&gt;
<span style="color: #7f90aa;"><span style="padding-top: 0.2em; padding-bottom: 0.1em; color: #1c02ff;">&lt;<span style="padding-top: 0.2em; padding-bottom: 0.1em; font-weight: bold;">param</span> <span style="padding-top: 0.2em; padding-bottom: 0.1em; font-style: italic;">name</span>=<span style="padding-top: 0.2em; padding-bottom: 0.1em; color: #036a07;">"src"</span> <span style="padding-top: 0.2em; padding-bottom: 0.1em; font-style: italic;">value</span>=<span style="padding-top: 0.2em; padding-bottom: 0.1em; color: #036a07;">"http://www.youtube.com/v/SYxte83ISuc<span style="padding-top: 0.2em; padding-bottom: 0.1em; color: #c5060b; font-weight: bold;">&amp;amp;</span>hl=en<span style="padding-top: 0.2em; padding-bottom: 0.1em; color: #c5060b; font-weight: bold;">&amp;amp;</span>fs=1<span style="padding-top: 0.2em; padding-bottom: 0.1em; color: #c5060b; font-weight: bold;">&amp;amp;</span>"</span> /&gt;
</span><span style="padding-top: 0.2em; padding-bottom: 0.1em; color: #1c02ff;">&lt;<span style="padding-top: 0.2em; padding-bottom: 0.1em; font-weight: bold;">param</span> <span style="padding-top: 0.2em; padding-bottom: 0.1em; font-style: italic;">name</span>=<span style="padding-top: 0.2em; padding-bottom: 0.1em; color: #036a07;">"allowfullscreen"</span> <span style="padding-top: 0.2em; padding-bottom: 0.1em; font-style: italic;">value</span>=<span style="padding-top: 0.2em; padding-bottom: 0.1em; color: #036a07;">"true"</span> /&gt;
<span style="color: #c0c0c0;">&lt;!-- embed tag here is for cross-browser compatability --&gt;
</span>&lt;<span style="padding-top: 0.2em; padding-bottom: 0.1em; font-weight: bold;">embed</span> <span style="padding-top: 0.2em; padding-bottom: 0.1em; font-style: italic;">type</span>=<span style="padding-top: 0.2em; padding-bottom: 0.1em; color: #036a07;">"application/x-shockwave-flash"</span> <span style="padding-top: 0.2em; padding-bottom: 0.1em; font-style: italic;">width</span>=<span style="padding-top: 0.2em; padding-bottom: 0.1em; color: #036a07;">"500"</span> <span style="padding-top: 0.2em; padding-bottom: 0.1em; font-style: italic;">height</span>=<span style="padding-top: 0.2em; padding-bottom: 0.1em; color: #036a07;">"340"</span> <span style="padding-top: 0.2em; padding-bottom: 0.1em; font-style: italic;">src</span>=<span style="padding-top: 0.2em; padding-bottom: 0.1em; color: #036a07;">"http://www.youtube.com/v/SYxte83ISuc<span style="padding-top: 0.2em; padding-bottom: 0.1em; color: #c5060b; font-weight: bold;">&amp;amp;</span>hl=en<span style="padding-top: 0.2em; padding-bottom: 0.1em; color: #c5060b; font-weight: bold;">&amp;amp;</span>fs=1<span style="padding-top: 0.2em; padding-bottom: 0.1em; color: #c5060b; font-weight: bold;">&amp;amp;</span>"</span> <span style="padding-top: 0.2em; padding-bottom: 0.1em; font-style: italic;">allowscriptaccess</span>=<span style="padding-top: 0.2em; padding-bottom: 0.1em; color: #036a07;">"always"</span> <span style="padding-top: 0.2em; padding-bottom: 0.1em; font-style: italic;">allowfullscreen</span>=<span style="padding-top: 0.2em; padding-bottom: 0.1em; color: #036a07;">"true"</span>&gt;<span style="padding-top: 0.2em; padding-bottom: 0.1em;">&lt;</span>/<span style="padding-top: 0.2em; padding-bottom: 0.1em; font-weight: bold;">embed</span>&gt;</span></span></span></span></span></pre>
<pre style="font-family: 'Bitstream Vera Sans Mono', Monaco, 'Courier New', monospace; font-size: 9pt; line-height: 1.3em; margin-top: 0em; white-space: pre-wrap; word-wrap: break-word;"><span style="padding-top: 0.2em; padding-bottom: 0.1em; color: #1c02ff;">&lt;/<span style="padding-top: 0.2em; padding-bottom: 0.1em; font-weight: bold;">object</span>&gt;</span></pre>
<p></span></pre>
<h1>Pushing the web to the edge</h1>
<p>Another part of the assignment is to find a number of websites, or web-applications if you want to be all fancy-pants about it.</p>
<p>So I&#8217;ve looked around for a bit, and came up with my top 5 of boundry-pushing sites that I could come up with, any some comments on why they are.</p>
<h3>Photoshop.com</h3>
<p>In an attempt to keep people from pirating Adobe&#8217;s own creative suite just for simple image editing, Adobe has created an online version of photoshop which lets you do basic edits and transformations in your browser, free of charge. Utilizing flash, Photoshop&#8217;s web cousin gives the user just enough tools to prevent them from pirating, but not nearly close enough tools for the pro, or semi-pro user. A full-blown online image manipulation application pushes the boundaries of what you&#8217;d expect to do in a browser, using it as a tool, not as a viewer, any longer.</p>
<p><img class="alignnone size-full wp-image-44" title="Screen shot 2009-09-24 at 12.44.19 PM" src="http://gamer-powered.com/wp-content/uploads/2009/09/Screen-shot-2009-09-24-at-12.44.19-PM.PNG" alt="Screen shot 2009-09-24 at 12.44.19 PM" width="516" height="411" /></p>
<h3>Jaycut.com</h3>
<p>What photoshop.com does for photos, Jaycut does for home video editing.</p>
<p>Giving the user all the tools they could possibly need, Jaycut allows for video editing similar to Apples&#8217; iMovie, or Microsofts&#8217; Windows Moviemaker, but online, accessible  anywhere where there is a browser with Adobe Flash support. Video editing in the browser: very much pushing the limits of what you expect to be able to do on the internet.</p>
<p><img class="alignnone size-full wp-image-46" title="Screen shot 2009-09-24 at 1.11.13 PM" src="http://gamer-powered.com/wp-content/uploads/2009/09/Screen-shot-2009-09-24-at-1.11.13-PM1.PNG" alt="Screen shot 2009-09-24 at 1.11.13 PM" width="564" height="500" /></p>
<h3>Google Docs</h3>
<p>Docs is an online replacement for Microsoft Office, OpenOffice, and other word processing applications. It moves creating, saving, sharing, and collaborating on documents entirely into &#8216;the cloud&#8217;, where you can optionally save a copy to your local computer in a number of common formats, including word document. Though not entirely in real-time, it also allows you to work on the same document with multiple people at the same time. As a response to google docs, Micosoft has started development of their own online office suite, but only offers it as a bonus feature of it&#8217;s existing software (still requiring you to pay for it).</p>
<p><img class="alignnone size-full wp-image-47" title="Screen shot 2009-09-24 at 1.17.35 PM" src="http://gamer-powered.com/wp-content/uploads/2009/09/Screen-shot-2009-09-24-at-1.17.35-PM.PNG" alt="Screen shot 2009-09-24 at 1.17.35 PM" width="471" height="415" /></p>
<h3>RPX/OpenID</h3>
<p>While technically not a useful website when used alone, OpenID and RPX allow for instant login on a large variety of other websites, without requiring the user to create yet another online account. The services uses modern web technologies like flash and ajax to work it&#8217;s magic, and supports users logging in with Windows Live ID, Yahoo, Blogger, Facebook, Twitter, OpenID, AOL, MySPace, Wordpress and the list goes on and on. Users can log in on any of these websites using a single account, which they most likely already have, lowering the threshold of engaging with an online community or service. OpenID is an open standard/platform, is owned by no-one, and gaining traction on the web since it&#8217;s fairly easy to add to existing websites.</p>
<p>In short, RPX with OpenID aims to be a single login for the internet, and is being increasingly successful in it.</p>
<p><img class="alignnone size-full wp-image-48" title="Screen shot 2009-09-24 at 1.30.27 PM" src="http://gamer-powered.com/wp-content/uploads/2009/09/Screen-shot-2009-09-24-at-1.30.27-PM.PNG" alt="Screen shot 2009-09-24 at 1.30.27 PM" width="448" height="426" /></p>
]]></content:encoded>
			<wfw:commentRss>http://gamer-powered.com/2009/09/week-3-jumping-through-hoops-object/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
