Medienproduktion Website-Erstellung 1 - Aufbau/Grundgerüst
christoph.schleimer.uni-linz, 4. März 2014, 13:24
HTML-Editor und Umsetzung
Für die Erstellung der Webapplikation verwende ich die kostenlose Probeversion des HTML-Editors Adobe Dreamweaver CC.
Für meine Website werde ich mir kein "fertiges" Template aus dem Internet laden, sondern meine Website als erstes in Bereiche/Sections/Div's gliedern. Somit wird die Website zu fast 100% aus meinem eigenen Code (exkl. jQuery JavaScript-Code) bestehen.
Um eine One-Page Website erstellen zu können, werde ich mir passende Websites aus dem Internet suchen und mittels Firebug den HTML-Code sowie den CSS-Code ansehen und daraus lernen. So werde ich selbst versuchen eine One-Page Website zu kreiren, was natürlich viel Zeitaufwand bedarf. Die nötigen Kenntnisse dafür habe ich bereits in den aufbauenden Kursen "Webprogrammierung", "Webdesign" und "Entwicklung von Web-Anwendungen" vermittelt bekommen, sowie auch in meiner vergangenen Zeit in der HTL für EDV und Organisation.
Aufbau der Website
Da ich für meinen Webauftritt eine One-Page-Website erstellen werde, ist diese Website generell nur für größere Bildschirme (>= Tablets, mind. 768 Pixel Bildschirmbreite) geeignet. Meiner Meinung nach werden Besucher der Website eher selten mit Smartphones auf diese Website zugreifen, da Personen ihr Smartphone beim Sport eher nicht bei sich tragen werden, sondern sich eher nach einer Überanstrengung beim Sport zuhause informieren wollen. (Eine Ausnahme wäre evtl. der Bestellvorgang des Produktes - dieser wird jedoch im Rahmen dieses Projekts nicht ausprogrammiert).
Um die Website auch für Mobile Geräte (Smartphones) zu gestalten, müsste ich in einem neuen CSS-File für mobile Geräte die Anordnung und Struktur meines Layouts/Designs anders gestalten, da eine One-Page-Anwendung für Smartphones eher unüblich ist. Dies wird jedoch im Rahmen dieser LVA leider nicht ausprogrammiert, da dafür der zeitliche Rahmen der LVA (ca. 1 Monat) nicht ausreichen würde.
Nachfolgend kann man den HTML5-Code des Grundgerüsts meiner Website einsehen:
<!DOCTYPE html> <html> <head>
<meta charset="utf-8"> <title>ContraPain GmbH</title> </head> <body> <!-- HEADER --> <div id="header-wrap"> <header> <hgroup> LOGO </hgroup> <nav> Navigation / Menü </nav> </header> </div> <!-- CONTENT --> <div id="content-wrap"> <!-- HOME --> <section id="home" class="story"> </section> <!-- PRODUKTINFO --> <section id="product" class="story"> </section> <!-- ANWENDUNG --> <section id="forwhat" class="story"> </section> <!-- BESTELLUNG --> <section id="order" class="story"> </section> <!-- KONTAKT --> <section id="contact" class="story"> </section> </div> <!-- FOOTER --> <div id="footer-wrap" class="story"> <footer> <nav> Navigation Footer </nav> </footer> </div> </body>
</html>
Wie dem HTML-Code zu entnehmen ist, wird es einen fixen Header geben. Der Content ist unterteilt in mehrere Sections, welche durch die Navigation im Header oder auch durch Scrollen erreicht werden können. Unten befindet sich noch ein fixer Footer, welcher ebenso eine Navigation zur Startseite und Impressum enthält.
Typographie: Google Font - Open Sans
Wie schon in meiner Projektkonzeption beschrieben, wird Google-Font "Open Sans" als Schriftart für meine gesamte Webapplikation verwendet. Eingebunden habe ich die Schriftart mit folgendem Befehl im HTML-Head:
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700'
rel='stylesheet' type='text/css'>
Somit steht die "font-family" für Deklarationen im CSS (Cascading Style Sheet) zur Verfügung:
body { margin: 0; font-family: 'Open Sans', sans-serif; font-size: 100%; }
Wie in der obigen body-Deklaration zu sehen ist, verwende ich Prozentangaben bzw. em-Angaben für die Anpassung der Schriftgröße (font-size: 100%). Will ich nun z.B. eine Überschrift doppelt so groß darstellen, gelingt mir das mit folgender Anweisung:
font-size: 2.0em;
Schriftfarben
Die Schriftfarben der Website sollen sich wiederum an die Farben des Logos orientieren, um ein einheitliches Gesamtbild zu schaffen und die Seite nicht mit zu vielen Farben zu überfüllen. Die Schriftfarben des Contents soll sich somit auf die Farben schwarz (für den Informationstext), grün (Für die Überschriften im Content) und orange (für Links - hover: blau) beschränken.
Scrolleffekt - jQuery
Um einen Scrolleffekt für meine One-Page Webapplikation zu erreichen, habe ich mir ein jQuery-Plugin (Open Source Java Script Bibliothek) heruntergeladen. Das jQuery welches ich für meine Website verwende ist folgendes: Smooth-Scroll.
Um dieses Plugin verwenden zu können, habe ich mir das Java-Script-File heruntergeladen und in den HTML-Head folgendermaßen eingebunden:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.6.1.min.js"><\/script>')
</script>
<script type="text/javascript" src="js/jquery.smoothscroll.js"></script>
Das Java-Scirpt-File enthält viele Code-Zeilen. Folgender Codeausschnitt des .js-Files zeigt uns, dass der Scroll innerhalb eines Elements/Section 800 Millisekunden benötigt. Ich habe meinen Scroll an diese 800ms angepasst. Der Standardwert dieses Plugins war bei 400ms.
$(scrollElem).animate({scrollTop: targetOffset}, 800, function() { location.hash = target; });
Nach der Erstellung dieser Grundgerüste kann mit der weiteren, ausführlicheren Programmierung und dem Web-Design begonnen werden!
Weiterführende Links:
Website-Erstellung 2 - Fullscreen-Slideshow / One-Page Navigation / Google Maps
Projektkonzeption - ContraPain Sportgel
Bildbearbeitung / Entwürfe (Photoshop)
0 comments :: Kommentieren
