X-Git-Url: http://p2p-next.cs.pub.ro/gitweb/?a=blobdiff_plain;f=application%2Fviews%2Farticle%2Fenglish%2Fhelp.php;fp=application%2Fviews%2Farticle%2Fenglish%2Fhelp.php;h=da28fc4b271e86fdf07739ab2b089991b6b4e1ab;hb=ac366a43f0cda63c2506321104b6760c153ac993;hp=99a6494fef93e02336702c41e57addac387ae7f9;hpb=954fc0210d9151cb86ca4dad6a955f59ba135915;p=living-lab-site.git

diff --git a/application/views/article/english/help.php b/application/views/article/english/help.php
index 99a6494..da28fc4 100644
--- a/application/views/article/english/help.php
+++ b/application/views/article/english/help.php
@@ -1,77 +1,91 @@
 <div id="video-widget-imagemap">
+	<h1>Video Widget Snapshot</h1>
 	<div><div class="ui-imagemap-image" style="margin: 0 auto; margin-bottom: 1em">
-		<img src="<?php echo site_url('img/nsvideo-widget.jpg') ?>" alt="NextShare Video Widget Screenshot" width="446" height="353" />
+		<img src="<?php echo site_url('img/nsvideo-widget.jpg') ?>" alt="NextShare Video Widget Screenshot" title="NextShare Video Widget Screenshot" width="446" height="353" />
 	</div></div>
+	<h4>Click on a component bellow to highlight it on the snapshot above and view a description of it:</h4> 
 	
+	<h1>Video Widget Components</h1>
 	<div id="video-widget-titles">
-		<h3><a href="#" class="ui-imagemap-title"
-			data-left="5px" data-top="44px" data-width="433px" data-height="246px"
-			>Watching Area</a></h3>
+		<h3 class="ui-imagemap-title"
+				data-left="5px" data-top="44px" data-width="433px" data-height="246px">
+			<a href="#">Watching Area</a>
+		</h3>
 		<div>
 			Here you can watch the video.
 		</div>
 		
-		<h3><a href="#" class="ui-imagemap-title"
-			data-left="3px" data-top="314px" data-width="32px" data-height="34px"
-			><em>Play</em> / <em>Pause</em> button</a></h3>
+		<h3 class="ui-imagemap-title"
+				data-left="3px" data-top="314px" data-width="32px" data-height="34px">
+			<a href="#"><em>Play</em> / <em>Pause</em> button</a>
+		</h3>
 		<div>
 			Toggle playing and pausing the video.
 		</div>
 		
-		<h3><a href="#" class="ui-imagemap-title"
-			data-left="41px" data-top="321px" data-width="39px" data-height="21px"
-			>Current Time</a></h3>
+		<h3 class="ui-imagemap-title"
+				data-left="41px" data-top="321px" data-width="39px" data-height="21px">
+			<a href="#">Current Time</a>
+		</h3>
 		<div>
-			...
+			View the time elapsed from the beginning of the video.
 		</div>
 		
-		<h3><a href="#" class="ui-imagemap-title"
-			data-left="86px" data-top="323px" data-width="57px" data-height="19px"
-			>Total Time</a></h3>
+		<h3 class="ui-imagemap-title"
+				data-left="86px" data-top="323px" data-width="57px" data-height="19px">
+			<a href="#">Total Time</a>
+		</h3>
 		<div>
-			...
+			View video duration.
 		</div>
 		
-		<h3><a href="#" class="ui-imagemap-title"
-			data-left="2px" data-top="295px" data-width="439px" data-height="22px"
-			>Time Progress Slider</a></h3>
+		<h3 class="ui-imagemap-title"
+				data-left="2px" data-top="295px" data-width="439px" data-height="22px">
+			<a href="#">Time Progress Slider</a>
+		</h3>
 		<div>
-			...
+			View a graphical representation of the time elapsed from the movie from its duration. You can also use this slider to seek current position in the video to a desired point.
 		</div>
 		
-		<h3><a href="#" class="ui-imagemap-title"
-			data-left="213px" data-top="320px" data-width="80px" data-height="24px"
-			><em>Volume</em> Slider</a></h3>
+		<h3 class="ui-imagemap-title"
+				data-left="213px" data-top="320px" data-width="80px" data-height="24px">
+			<a href="#"><em>Volume</em> Slider</a>
+		</h3>
 		<div>
-			...
+			A graphical representation of the sound volume level which can be manipulated with the mouse in order change current volume.
 		</div>
 		
-		<h3><a href="#" class="ui-imagemap-title"
-			data-left="181px" data-top="313px" data-width="32px" data-height="36px"
-			><em>Mute</em> button</a></h3>
+		<h3 class="ui-imagemap-title"
+				data-left="181px" data-top="313px" data-width="32px" data-height="36px">
+			<a href="#"><em>Mute</em> button</a>
+		</h3>
 		<div>
-			...
+			Use this button to alternatively disable or enable the sound for the video.
 		</div>
 		
-		<h3><a href="#" class="ui-imagemap-title"
-			data-left="293px" data-top="313px" data-width="119px" data-height="37px"
-			>Switch Video Definition (Resolution)</a></h3>
+		<h3 class="ui-imagemap-title"
+				data-left="293px" data-top="313px" data-width="119px" data-height="37px">
+			<a href="#">Switch Video Definition (Resolution)</a>
+		</h3>
 		<div>
-			...
+			<p>This group of check buttons show definitions available for the video. The definition characterizes its resolution (number of pixels on horizontal and vertical). A definition is coded here, as in television systems, with a number, representing the number of vertical pixels (height), and a "p", which is an abbreviation from <a href="http://en.wikipedia.org/wiki/Progressive_scan" rel="nofollow" target="_blank"><em>progressive scan</em></a>.</p>
+			<p>The number of vertical pixels depends on the <a href="http://en.wikipedia.org/wiki/Display_aspect_ratio" rel="nofollow" target="_blank"><em>display aspect ratio</em></a> which is usually 4:3 or 16:9. Because the video needs to fit in your browser its actual size (when not in Full Screen mode) will be between 640 and 1024 horizontal pixels.</p>
 		</div>
 		
-		<h3><a href="#" class="ui-imagemap-title"
-			data-left="6px" data-top="6px" data-width="134px" data-height="42px"
-			>Switch Video Plugin</a></h3>
+		<h3 class="ui-imagemap-title"
+				data-left="6px" data-top="6px" data-width="134px" data-height="42px">
+			<a href="#">Switch Video Plugin</a>
+		</h3>
 		<div>
-			...
+			Use this two check buttons to switch between <a href="<?php echo site_url('about#next-share-video-plugins') ?>">the two NextShare plug-ins available</a>. Choose <em>HTML5</em> for <a href="<?php echo site_url('about#swarmplayer') ?>">SwarmPlayer</a> and <em>VLC</em> for <a href="<?php echo site_url('about#nextsharepc') ?>">NextSharePC</a>.
 		</div>
 		
-		<h3><a href="#" class="ui-imagemap-title"
-			data-left="407px" data-top="315px" data-width="35px" data-height="34px"
-			><em>Full Screen</em> button</a></h3>
+		<h3 class="ui-imagemap-title"
+				data-left="407px" data-top="315px" data-width="35px" data-height="34px">
+			<a href="#"><em>Full Screen</em> button</a>
+		</h3>
 		<div>
-			...
+			Displays the video on the whole screen without having to be limited by the web page.
 		</div>
 	</div>
 
@@ -81,6 +95,7 @@
 $(function() {
 	$('#video-widget-titles').accordion({
 		collapsible: true,
+		autoHeight: false,
 		active: false
 	});