added steps

greathansen · Mar 8, 2013 · 89cb325 · 89cb325
1 parent f3c7cf5
commit 89cb325
Show file tree

Hide file tree

Showing 4 changed files with 157 additions and 8 deletions.
diff --git a/Images/letsCode.jpg b/Images/letsCode.jpg
diff --git a/Styles/Master.css b/Styles/Master.css
@@ -57,6 +57,10 @@ a.gitHubIcon:hover {
     margin-top: 10px;
 }
 
+li a:hover {
+    background: #f4907f;
+}
+
 footer {
     position: absolute;
     bottom: 0px;

diff --git a/Views/LoggedIn.html b/Views/LoggedIn.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <title></title>
+    </head>
+    <body>
+        <audio id="myMusicPlayer" preload="auto" tabindex="0" controls="">
+            <source src="..\Music\Fixed Frequencies.mp3" type="audio/mpeg" />
+
+        </audio>
+
+        <ul id="myPlayList">
+            <li>
+                <a href="..\Music\Fixed Frequencies.mp3">Fixed Frequencies</a>
+            </li>
+
+            <li>
+                <a href="..\Music\The Mercenary.mp3">The Mercenary</a>
+            </li>
+        </ul>
+        <script src="../Scripts/jquery-1.9.0.js" type="text/javascript"></script>
+        <script>
+
+            var myPlayList = $('#myPlayList');
+var playListIndex = 0;
+myPlayList.find('a').click(function(e)
+{
+    e.preventDefault();
+    var link = $(this);
+    playListIndex = link.parent().index();
+    play(link); // we have to create the function play.
+});
+
+            var myMusicPlayer = $('#myMusicPlayer');
+function play(link)
+{
+    myMusicPlayer[0].src = link.attr('href');
+    myMusicPlayer[0].load();
+    myMusicPlayer[0].play();
+} 
+
+      var tracks = myPlayList.find('li a');
+var playListLength = tracks.length;
+myMusicPlayer[0].addEventListener('ended', function()
+{
+    var link; playListIndex++;
+    if (playListIndex >= playListLength){ playListIndex = 0;
+        link = myPlayList.find('a')[0]; }
+    else { link = myPlayList.find('a')[playListIndex];}
+    play($(link));});
+
+    $('a').addClass('dragout');
+$('a').attr('draggable', 'true');
+
+(function() {
+    var files = document.querySelectorAll('a.dragout');
+
+    for (var i = 0, file; file = files[i]; ++i) {
+
+    file.addEventListener('dragstart', function(e) {
+
+    var strippedUrl = document.location.toString().split("Views");
+    var href = this.getAttribute('href');
+
+    var dataDownloadUrl = 'audio/mpeg:' + href.substring(9, href.length).replace(' ', '%20') + ':' + strippedUrl[0].toString() + href.substring(3, href.length).replace('\\','/').replace(' ', '%20');
+    e.dataTransfer.setData('DownloadURL', dataDownloadUrl);
+        }, false);
+    }
+})();
+        </script>
+    </body>
+</html>
diff --git a/Views/Tutorial.html b/Views/Tutorial.html
@@ -44,12 +44,30 @@ <h1>
         <div id="deck">
             <!-- Begin slides -->
             <section>
-                <h1>
-                Code Time</h1>
-
+               <center> <h1>
+                Let's Code!!!</h1></center> 
+                <img src="../Images/letsCode.jpg" alt="#">
 
             </section>
 
+            <section>
+                <h2>
+                Start:</h2>
+                <ul>
+                    <li>We need to create a html document with the default tags</li>
+                </ul>
+                <pre class="prettyprint">
+<span class="tag">&lt;!DOCTYPE html></span>
+<span class="tag">&lt;html lang="en"></span>
+    <span class="tag">&lt;head></span>
+        <span class="tag">&lt;meta charset="utf-8" /></span>
+<span class="tag">&lt;title><span class="tag">&lt;/title></span></span>
+    <span class="tag">&lt;/head></span>
+    <span class="tag">&lt;body></span><span class="tag">&lt;/body></span>
+<span class="tag">&lt;/html></span>
+                </pre>
+            </section>
+
 
             <section>
                 <h2>
@@ -88,12 +106,16 @@ <h2>
                 <h2>
                 Step 3:</h2>
                 <ul>
-                    </br>
+                    <li>We need the jquery library.</li>
+                </ul>
+                <pre class="prettyprint">
+<span class="tag">&lt;script src="../Scripts/jquery-1.9.0.js" type="text/javascript">
+    <span class="tag">&lt;/script></span></span></pre>
+                  <ul>
                     <li>We have to asociate the anchor click event with the audio element.</li>
                     <li>We have to add some javascript code.<br></li>
                     <li>When we click on an anchor link the song should be loaded.</li>
-                    <li>We need the jquery library.</li>
-                </ul>
+                  </ul>
             </section>
 
             <section>
@@ -131,9 +153,59 @@ <h2>Step 4: Create the function play</h2>
     myMusicPlayer[0].src = link.attr('href');
     myMusicPlayer[0].load();
     myMusicPlayer[0].play();
-}
-                </pre>
+}                </pre>
+            </section>
+
+            <section>
+                <h2>Step 5:</h2>
+                  <ul></br>
+                  <li>Now we have to add a function for reproduce the next song when the current finish.</li>
+                      <li>For this, we will add a javascript eventlistener to the audio element when executes the 'ended' function. </li>
+                      <li>We search the next item in the playlist, and then we call the play function.</li>
+                      </ul>
+            </section>
+
+            <section>
+                <h2>Step 5: Adding EventListener</h2>
+                  <pre class="prettyprint">
+var tracks = myPlayList.find('li a');
+var playListLength = tracks.length;
+myMusicPlayer[0].addEventListener('ended', function()
+{
+    var link; playListIndex++;
+    if (playListIndex >= playListLength){ playListIndex = 0;
+        link = myPlayList.find('a')[0]; }
+    else { link = myPlayList.find('a')[playListIndex];}
+    play($(link));});
+</pre>
+            </section>
+
+
+             <section>
+                <h2>Step 6:Adding drag and drop</h2>
+                  <ul></br>
+                  <li>We will add the ability to drag a song to the desktop. </li>
+                  <li>For this we need to add the property draggable to the anchor element and add a class to identify them </li>
+                  </ul>
+                 <pre class="prettyprint">$('a').addClass('dragout');
+$('a').attr('draggable', 'true'); </pre>
+                 <ul><li>Now we have to create a funtion in javascript to handler the events that the draggable property allows to do in the anchor element. </li></ul>
             </section>
+
+            <section>
+                <h2>Step 6:Adding drag and drop</h2>
+                <pre class="prettyprint">
+(function() {
+    var files = document.querySelectorAll('a.dragout');
+    for (var i = 0, file; file = files[i]; ++i) {
+    file.addEventListener('dragstart', function(e) {
+    var strippedUrl = document.location.toString().split("Views");
+    var href = this.getAttribute('href');
+    var dataDownloadUrl = 'audio/mpeg:' + href.substring(9, href.length).replace(' ', '%20') + ':' + strippedUrl[0].toString() + href.substring(3, href.length).replace('\\','/').replace(' ', '%20');
+    e.dataTransfer.setData('DownloadURL', dataDownloadUrl);
+        }, false);}})();
+</pre>
+                   </section>
         </div>
         <script type="text/javascript" src="../Scripts/jquery-1.9.0.js"></script>
         <script type="text/javascript" src="../Scripts/prettify.js"></script>