Wie ist diese Website entstanden?
Das Grundgerüst der Website ist vom Bootstrap-Template 'clean-blog'
Alle nicht benötigten Elemente (.less-, .php-files und javascript-zeilen) wurden gelöscht und die Seiten so umgebaut, dass sie unseren Ansprüchen entspricht.
Für die Fotos und GIF's haben wir kurzerhand ein kleines Fotoshooting gemacht:
Luca der Chefkoch
Grundfunktionen
Hier ist der HTML-Code für die Rezeptauswahl
<!-- Formular für Auswahl Rezept-->
<div id="choice_rezept" class="col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-1">
<div class="form-group">
<h2 class="post-title">Rezept</h2>
<section>
<p>Darf es für ein Tête-à-Tête sein oder für ein Quartett?
<br>Magst du Chilischoten?</p>
<select id="personas" class="auswahl select">
<option value="hide">Anzahl Personen</option>
<option value="2">2 Personen</option>
<option value="4">4 Personen</option>
</select>
<select id="scharfmild" class="auswahl select">
<option value="hide">Schärfe</option>
<option value="mild">mild</option>
<option value="scharf">scharf</option>
</select>
</section>
</div>
<button id="btn-choice" class="btn btn-default" type="button">Anzeigen</button>
</div>
Und hier das javascript dazu.
/* js für hide & show der Artikel*/
$('#container_4p_mild').hide();
$('#container_4p_scharf').hide();
$('#container_2p_mild').hide();
$('#container_2p_scharf').hide();
$('#btn-choice').click(function () {
var choice = $('#personas').val();
var choice1 = $('#scharfmild').val();
if ((choice == 4) && (choice1 == "scharf")) {
$('#container_4p_mild').hide();
$('#container_2p_mild').hide();
$('#container_2p_scharf').hide();
$('#container_4p_scharf').slideToggle();
} else if ((choice == 4) && (choice1 == "mild")) {
$('#container_4p_scharf').hide();
$('#container_2p_mild').hide();
$('#container_2p_scharf').hide();
$('#container_4p_mild').slideToggle();
} else if ((choice == "2") && (choice1 == "scharf")) {
$('#container_4p_mild').hide();
$('#container_4p_scharf').hide();
$('#container_2p_mild').hide();
$('#container_2p_scharf').slideToggle();
} else if ((choice == "2") && (choice1 == "mild")) {
$('#container_4p_mild').hide();
$('#container_4p_scharf').hide();
$('#container_2p_scharf').hide();
$('#container_2p_mild').slideToggle();
}
});
Fotos und GIF's
Die Fotos wurden responsive mit Bootstrap und mit HTML eingebaut:
<a href="img/post_1.jpg" data-lightbox="a">
<img class="img-responsive" srcset="img/post_1.jpg 1x,img/post_1@2x.jpg 2x, img/post_1@3x.jpg 3x" src="img/post_1.jpg" alt="bild1">
</a>
<picture>
<source media="(min-width: 960px)" srcset="img/post_2.jpg">
<source media="(min-width: 768px)" srcset="img/post_2_mittel.jpg">
<source media="(min-width: 320px)" srcset="img/post_2_klein.jpg">
<img class="img-responsive" src="img/post_2.jpg" alt="en guete">
</picture>
<img srcset="img/more_taste320.jpg 320w, img/more_taste768.jpg 768w, img/more_taste960.jpg 960w"
sizes="(max-width: 320px) 100vw, (max-width: 960px) 75vw, 768px"
src="img/more_taste960.jpg"
alt="marroko markt">
Damit die GIF's auf click abspielen:
<img src="img/Tajine_gif2_static.jpg" onclick="this.src ='img/Tajine_gif2_looponce.gif'"/>
Styling
Sobald die Grundfunktionen für die Website standen, ging es an das Styling. Das Theme 'clean-blog' gab schon viel vor, das 'select' und die 'checkboxen' zum Beispiel waren nicht dabei, also wurden diese mithilfe von 'codepen'-styles an das Theme angepasst:
See the Pen Custom Select Menu by Wallace Erick (@wallaceerick) on CodePen.
See the Pen Custom checkboxes with CSS only by Geoffrey Crofte (@CreativeJuiz) on CodePen.
To-the-top Button
Der Button, um vom unteren Seitenende direkt wieder an den Anfang zu kommen, wurde mithilfe von diesem Tutorial gemacht.
/* script für to-the-top-button */
var amountScrolled = 2000;
$(window).scroll(function () {
if ($(window).scrollTop() > amountScrolled) {
$('#top-btn').fadeIn();
} else {
$('#top-btn').fadeOut();
}
});
Plugins
Wir haben das 'lightbox'-Plugin verwendet. Leider funktioniert das nicht mit dem <picture>-tag
/* lightbox aktivierung */
$('a[data-lightbox="a"]').imageLightbox();
Um den Code in der Dokumentation übersichtlich darzustellen, verwendeten wir das 'prism'-plugin
Plus für das Kontaktformular sind noch die 'tooltips' aktiviert:
/* TOOLTIP */
$(function () {
$('[data-toggle="tooltip"]').tooltip()
});
Probleme
Die Website ist ohne grössere Probleme entstanden, jedoch würden wir bei einem nächsten Mal nicht unbedingt mit einem Template starten. Dies führte nämlich dazu, dass man sich am Anfang in einen grösseren Quellcode lesen musste und viele Zeilen Code, welche man nicht braucht, löschen musste..
Durch github haben wir ohne Probleme in Teamarbeit die Website zusammenbauen können. Hier der Link dazu:
Berechnung der Roaminggebühren
Anhand der Datenroaming-Tarife der Swisscom für NATEL® Abo und NATEL® easy (Stand Juli 2015) haben wir die Kosten für den vollständigen Download unsere Site für die jeweiligen Tarifzonen berechnet. Die Grösse unserer Site beträgt 43.4 MB.
Standarttarif:
- EU/Westeuropa: 22.50
- Welt 1: 32.50
- Welt 2: 65.-
- Rest der Welt: 432.90
Datenpaket Data Travel 50 MB:
- EU/Westeuropa: 7.-
- Welt 1: 9.-
- Welt 2: 29.-
- Rest der Welt: 149.-
Alle Preise in CHF, inkl. MwST.