Permalink
Browse files

added trip.js tour

  • Loading branch information...
peponi committed Mar 29, 2013
1 parent 853d742 commit 5ee313c5c3ad5a93ed7ccecfd6e1483bdb3cc0c3
Showing with 206 additions and 11 deletions.
  1. +12 −10 index.html
  2. +96 −1 script/app.js
  3. +7 −0 script/trip.min.js
  4. +91 −0 stylesheets/trip.css
View
@@ -11,9 +11,11 @@
<link rel="stylesheet" type="text/css" href="stylesheets/bootstrap.css">
<link rel="stylesheet" type="text/css" href="stylesheets/bootstrap-responsive.css">
+ <link rel="stylesheet" type="text/css" href="stylesheets/trip.css">
<link rel="stylesheet" type="text/css" href="stylesheets/app.css">
<script src="script/jquery-1.9.0.min.js"></script>
+ <script src="script/trip.min.js"></script>
<script src="script/app.js"></script>
</head>
@@ -23,12 +25,13 @@
<div class="navbar-inner">
<a class="brand" href="http://symfony.com/what-is-symfony">Sprache</a>
<ul class="nav">
- <li><a href="index.html">Deutsch</a></li>
- <li><a href="index_en.html">English</a></li>
- <li><a href="index_fr.html">Fran&#231;ais</a></li>
+ <li><a href="index.html" id="de">Deutsch</a></li>
+ <li><a href="index_en.html" id="en">English</a></li>
+ <li><a href="index_fr.html" id="fr">Fran&#231;ais</a></li>
+ <li><a style="cursor:pointer;" class="start-tour" titel="ein kuzer &Uuml;berblick &uuml;ber dieses Tutorial" id="tldr">was steht in diesem Tutorial?</a></li>
</ul>
<ul class="nav pull-right">
- <li class="divider-vertical"></li>
+ <li class="divider-vertical"></li>
<li><a href="https://github.com/peponi/Symfony-for-absolute-beginners">Github</a></li>
</ul>
</div>
@@ -71,7 +74,7 @@ <h1>Download von <span class="Symfony2">Symfony 2</span></h1>
<a href="http://symfony.com/download">Download ></a>
<br><br>
<p>Wer sich die Installation und Konfiguration von Symfony sparen will und gleich mit dem <a href="#database">ORM Design anfagen</a> m&ouml;chte, kann sich alternativ auch eine <a href="http://de.wikipedia.org/wiki/Virtuelle_Maschine">fertige VM</a> saugen.</p>
- <dl class="accordion">
+ <dl class="accordion" id="virtualbox">
<dt class="virtualbox blue"><i class="icon-info-sign"></i> VirtualBox Image</dt>
<dd class="virtualbox">
<p><a href="https://de.wikipedia.org/wiki/Virtualbox">VirtualBox</a> ist schnell und mühelos zu <a href="http://VirtualBoxImages.com/GettingStarted">installieren</a>. Der Vorteil liegt darin dass sich die Punkte 1 - 4 nicht jedesmal wiederholen wenn ich ein neues Symfony Projekt anfange, ich kann direkt starten.Ausserdem habe ich durch die Snapshot funktion eine zusätzliche rollback absicherung zusätzlich zu Git.</p>
@@ -80,7 +83,6 @@ <h1>Download von <span class="Symfony2">Symfony 2</span></h1>
<p>Danach lade das VirtuelBox Image via Torrent oder direkt. Klicke einfach doppelt drauf, die VM installiert sich dann von allein.</p>
<a href="https://thepiratebay.se/torrent/7868410">Download Torrent ></a><br>
- <a href="http://ul.to/k71r2753">Download Image ></a>
<h5>Login</h5>
<ul class="nonstyletype">
@@ -293,7 +295,7 @@ <h1>Datenbank erstellen</h1>
<br>
<p id="entity">Die Klassen die die Tabellen abbilden sollen, müssen wir nicht von Hand schreiben. <br><a href="http://www.doctrine-project.org/projects/orm.html">Doctrine</a> kann das Gesamte <a href="http://de.wikipedia.org/wiki/Objektrelationale_Abbildung"> ORM</a> für uns mit einem Onliner erstellen:</p>
- <pre class="highlight">
+ <pre class="highlight" id="trip_entity">
Symfony$ php app/console doctrine:generate:entity --entity=<span class="s1">"YourCompanyRestaurantBundle:Restaurant"</span> --fields=<span class="s1">"name:string(255) startuptime:time location:string(255) description:text"</span><br>
Symfony$ php app/console doctrine:generate:entity --entity=<span class="s1">"YourCompanyRestaurantBundle:Rating"</span> --fields=<span class="s1">"day:date rating:integer price:float delivertime:time"</span>
</pre>
@@ -311,7 +313,7 @@ <h2>Relations erstellen</h2>
Jedes Restaurant kann mehrere Ratings haben, jedes Rating kann nur zu einem Restaurant geh&ouml;ren.
Also <a href="http://nubyonrails.com/tools/pluralize">pluralisieren</a> wir den Namen des Propertys -> <b>$ratings</b>.</p>
<p>Erstelle die Relations in deiner neuen Entity Klasse nach folgendem Muster:</p>
- <pre class="highlight">
+ <pre class="highlight" id="trip_relation">
<span class="sd">// Symfony/src/YourCompany/RestaurantBundle/Restaruant/Entity/<b>Restaurant</b>.php</span>
<span class="k">use</span> Doctrine\Common\Collections\ArrayCollection
@@ -358,7 +360,7 @@ <h1>Einfügen der Templates</h1>
<p>Die Symlinks erscheinen dann im <b>Symfony/web/bundles/yourcompanyrestaurant</b> Ordner. Der <b>/web</b> Ordner ist als einziger &uuml;ber den Webserver zu ereichen.</p>
<p>Als n&auml;chstes sagen wir Symfony wo f&uuml;r alle Bundles die Stylesheets und Javascripts zu finden sind.
<br>Dies tust du mit folgender <a href="http://twig.sensiolabs.org/doc/templates.html">Twig Syntax</a> in dieser Datei <b>Symfony/app/Resources/view/base.html.twig</b></p>
- <pre class="highlight">
+ <pre class="highlight" id="trip_templates">
{% <span class="k">stylesheets</span> <span class="s1">'@YourcompanyRestaurantBundle/Resources/public/stylesheets/*.css'</span> %}
<<span class="c1">link</span> rel=<span class="s1">"stylesheet"</span> type=<span class="s1">"text/css"</span> href=<span class="s1">"{{ asset_url }}"</span >>
{% <span class="k">endstylesheets</span> %}
@@ -393,7 +395,7 @@ <h5 class="margintop20"><i class="icon-info-sign"></i> CSS background-image Bug<
<br><br>
<p>Bei Projekten die mehrere Interfaces haben w&uuml;rde es Sinn machen ein <b>LayoutBundle</b> zu erstellen was nur f&uuml;r das Layout zust&auml;ndig ist.</p>
<br>
- <p><b>Super hab ich, und was jetzt?</b> <a href="index_de_2.html"> Seite 2 -></a></p>
+ <p><b>Super hab ich, und was jetzt?</b> <a href="index_de_2.html" id="trip_seite_2"> Seite 2 -></a></p>
</section>
</div>
</div>
View
@@ -54,13 +54,108 @@ $(document).ready(function()
{
$(".bs-docs-sidebar ").fadeOut();
});
+
+ $("#de").text("Deu");
+ $("#en").text("Eng");
+ $("#fr").text("Fr");
+ $("#tldr").text("tl;dr");
}
if($(window).width() > 640)
{
$(".bs-docs-sidebar ").fadeIn();
+
+ $("#de").text("Deutsch");
+ $("#en").text("English");
+ $("#fr").text("Français");
+ $("#tldr").text("was steht in diesem Tutorial?");
}
});
-
+ window.onload=function()
+ {
+ if($(window).width() <= 640)
+ {
+ $("#de").text("Deu");
+ $("#en").text("Eng");
+ $("#fr").text("Fr");
+ $("#tldr").text("tl;dr");
+ }
+ };
+ /* github.com/EragonJ/Trip.js */
+
+ var trip = new Trip([
+ {
+ sel : $('#ubuntu'),
+ content : 'in diesem Tutorial lernst du wie man Symfony installiert',
+ delay : 3000,
+ },
+ {
+ sel : $('#configuration'),
+ content : 'und konfiguriert',
+ delay : 1800,
+ },
+ {
+ sel : $('#virtualbox'),
+ content : 'wer keine lust darauf hat die Umgebung erst aufzusetzen',
+ delay : 3500,
+ expose : true,
+ },
+ {
+ sel : $('#virtualbox'),
+ content : 'kann sich auch eine Virtuelle Maschiene von der Piratebay saugen',
+ delay : 3000,
+ expose : true,
+ },
+ {
+ sel : $('#trip_entity'),
+ content : 'und direkt beim Datenbank basteln anfangen',
+ delay : 3000,
+ expose : true,
+ },
+ {
+ sel : $('#trip_relation'),
+ content : 'danach wird dir erklärt wie die Tabellen-Relationen im Controller abzubilden sind',
+ delay : 4500,
+ expose : true,
+ },
+ {
+ sel : $('#trip_templates'),
+ content : 'wenn du das getan hast, brauchst du nur noch deine Templates einbinden',
+ delay : 4500,
+ expose : true,
+ },
+ {
+ sel : $('#trip_seite_2'),
+ content : 'und bist schon startklar deine erste Anwendung zu bauen',
+ delay : 3000,
+ expose : true,
+ },
+ {
+ sel : $('#download'),
+ content : 'möge die Macht mit dir sein !',
+ delay : 3000,
+ },
+
+ ]);
+
+ $(".start-tour").click(function() {
+ trip.start();
+ });
+
+ /* let the tour button blink */
+ var timer;
+ jQuery(function($) {
+ timer = setTimeout(blnk, 1);
+ });
+
+
+ function blnk() {
+ $("#tldr").css({opacity: 0.3}).
+ animate({opacity: 1}, 900, "linear").
+ animate({opacity: 0.5}, 900, "linear",
+ function() {
+ timer = setTimeout(blnk, 1);
+ });
+ };
});
View

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
View
@@ -0,0 +1,91 @@
+.trip-block {
+ display: none;
+ background: #06a;
+ color: #FFF;
+ padding: 8px;
+ position: absolute;
+ text-align: center;
+ min-width: 100px;
+ border-radius: 3px;
+
+ -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
+ -moz-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
+ -ms-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
+ -o-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
+ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
+}
+
+.trip-arrow {
+ position: absolute;
+ background: none;
+ background: url("./arrow.png");
+ z-index: 1;
+}
+
+.trip-arrow.n {
+ height: 8px;
+ bottom: -8px;
+ left: 15px;
+ right: 15px;
+ background-repeat: no-repeat;
+ background-position: 50% 100%;
+}
+
+.trip-arrow.s {
+ height: 8px;
+ top: -8px;
+ left: 15px;
+ right: 15px;
+ background-repeat: no-repeat;
+ background-position: 50% 0%;
+}
+
+.trip-arrow.e {
+ width: 8px;
+ height: 16px;
+ left: -8px;
+ top: 11px;
+ bottom: 15px;
+ background-repeat: no-repeat;
+ background-position: 0% 50%;
+}
+
+.trip-arrow.w {
+ width: 8px;
+ height: 16px;
+ right: -8px;
+ top: 11px;
+ bottom: 15px;
+ background-repeat: no-repeat;
+ background-position: 100% 50%;
+}
+
+.trip-progress-wrapper {
+
+}
+
+.trip-progress-bar {
+ height: 1px;
+ background-color: #444;
+ width: 0;
+}
+
+.trip-overlay {
+ display: none;
+ position: absolute;
+ left: 0;
+ top: 0;
+ background: black;
+ width: 100%;
+ height: 100%;
+ opacity: 0.7;
+ filter: alpha(opacity = 70);
+}
+
+/*
+ * TODO:
+ * implement with more details later
+ */
+.trip-exposed {
+ background: white
+}

0 comments on commit 5ee313c

Please sign in to comment.