WEBSITE
Das Konzept
Mit meinem Wissen aus Codeacademy begann ich mit dem Programmieren meiner Website. Diese wollte ich anfangs in vier Kategorien unterteilen. Auf der Homepage sollten sich ein Video, welches die Website erklärt, sowie mein Motivationsschreiben befinden. Die zweite Kategorie sollte ein Monatsjournal sein, welches erklärt, was ich in jedem Monat gemacht habe, um mich auf die Lehrstelle vorzubereiten. Die Monatskategorie sollte auf der rechten Seite ebenfalls ein Raster haben, mit dem man zwischen den verschiedenen Monaten wechseln kann. Die dritte Kategorie sollte "Was ich gelernt habe" heissen und eine kurze Zusammenfassung aller Themen sein, mit denen ich mich befasst habe. Zum Schluss sollen in der Galerie Bilder und andere Projekte von mir zu finden sein. Wenn man auf das Bild klickt, sollte ein grösseres Fenster mit Bildbeschrieb erscheinen. Auf der linken Seite möchte ich auch ein Raster, mit dem man zwischen den verschiedenen Kategorien wechseln kann. Die Website sollte mit hellblauen Kästen gestaltet sein, in denen sich jeglicher Text befindet. Zudem möchte ich sie möglichst einfach und übersichtlich gestalten.
Die Idee der Monatsjournale wurde verworfen und mit der Kategorie "Was ich gelernt habe" zusammengefasst, um das ganze übersichtlicher zu machen. Die blauen Kästen wurden ebenfalls verworfen, da ich so flexibler mit dem Text arbeiten konnte und es ausserdem schwierig war den richtigen Kontrast zwischen Überschrift, Text und Kasten zu finden. Die Galerie wurde vereinfacht, da ich nicht zu viel Text auf der Website haben wollte. Nun machte ich mich an die Farbgestaltung und erste genauere Entwürfe.
Das Programmieren
Zuerst habe ich lokal auf meinen Computer einen Ordner mit allen hmtl files gemacht. Der Code wurde in Visual Studio Code geschrieben. Die Unterkategorien der Journale wurden in einen Themen Ordner gepackt, die Bilder für die Journale in themen_media. Als letztes erstellte ich noch eine CSS File, in dessen ich mein Styling für die Kästen der Journale und den allgemeinen Text der Website schreiben würde. Nun hatte ich ein gutes Grundgerüst erarbeitet und begann damit, den richtigen Code der Website zu schreiben.
Als ersten Schritt begann ich mit meta Stylesheet in dem ich die Fonts der Website schrieb. Danach machte ich im body die Seitenliste mit den verschiedenen Kategorien. Die Seite "Journale 2" behielt ich noch, falls ich sie später für eine andere Idee gebrauchen könnte. Nachdem ich die Liste mit etwas Hilfe aus dem Internet fertig gestellt hatte, machte ich mich daran eine Liste für kleinere Bildschirme, wie Handys, zu machen, die auch funktionieren soll. Dies war sehr schwierig, doch ich habe es durch viel Versuchen und YouTube Tutorials im Ende geschafft. Als letztes fügte ich den Videolink und den Text in den Code ein.
<!DOCTYPE html>
<html>
<title>Swisscom Bewerbung</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/v4-shims.css"/>
<style>
.w3-black
{
background: #577399 !important;
}
.w3-sidebar {
width: 120px;
background: #222;
}
</style>
<body class="w3-black">
<nav class="w3-sidebar w3-bar-block w3-small w3-hide-small w3-center">
<a href="index.html" class="w3-bar-item w3-button w3-padding-large">
<i class="fa fa-home w3-xxlarge"></i>
<p>HOME</p>
</a>
<a href="journale.html" class="w3-bar-item w3-button w3-padding-large w3-hover-black w3-black">
<i class="fa fa-book w3-xxlarge"></i>
<p>Journale</p>
</a>
<a href="galerie.html" class="w3-bar-item w3-button w3-padding-large w3-hover-black">
<i class="fa fa-eye w3-xxlarge"></i>
<p>Galerie</p>
</a>
</nav>
<div class="w3-top w3-hide-large w3-hide-medium" id="myNavbar">
<div class="w3-bar w3-black w3-opacity w3-hover-opacity-off w3-center w3-small">
<a href="index.html" class="w3-bar-item w3-button" style="width:25% !important">HOME</a>
<a href="journale.html" class="w3-bar-item w3-button" style="width:25% !important">JOURNALE</a>
<a href="galerie.html" class="w3-bar-item w3-button" style="width:25% !important">GALERIE</a>
</div>
</div>
<div class="w3-padding-large" id="main">
<header class="w3-container w3-padding-32 w3-center w3-black" id="home">
<h1 class="mediamatiker_überschrift">Bewerbung als Mediamatiker</h1>
<h3>Julian Affolter</h3>
<video width="992" height="1108" alt="boy" class="w3-image" controls>
<source src="../media/Swisscom_Bewerbungsvideo_comp.mp4" type="video/mp4">
</video>
</header>
Beim Journal, machte ich zuerst in CSS ein Styling, welches ich dann für die Kästen verwenden würde. Hier musste ich sehr viel herumexperimentieren und die Verlinkung zu den einzelnen Kategorien der Kästen war sehr schnell gelungen. Die einzelnen Kategorien waren ähnlich aufgebaut wie die Homepage, nur musste ich hier darauf achten, dass ich die Verlinkung am Seitenraster angepasst wurde, da ich nun in einem neuen Unterordner war. Die Verlinkung der Bilder sah auch anders auch da ich nicht mehr in den Media Ordner, sondern den Themen_media Ordner wechseln musste. Beim Journal, machte ich zuerst in CSS ein Styling, welches ich dann für die Kästen verwenden würde. Hier musste ich sehr viel herumexperimentieren und die Verlinkung zu den einzelnen Kategorien der Kästen war sehr schnell gelungen. Die einzelnen Kategorien waren ähnlich aufgebaut wie die Homepage, nur musste ich hier darauf achten, dass ich die Verlinkung am Seitenraster angepasst wurde, da ich nun in einem neuen Unterordner war. Die Verlinkung der Bilder sah auch anders auch da ich nicht mehr in den Media Ordner, sondern den themen_media Ordner wechseln musste.
card-container {
width: 80vw;
display: flex;
flex-wrap: wrap;
}
.card {
width: 20vw;
margin: 4vw 2vw 4vw 2vw;
background-color: #6D8FBF;
}
.card-date {
font-size: 16pt;
font-weight: bold;
letter-spacing: 0.05;
color: black;
text-align: end;
padding: 0 1vw;
}
.card-img {
width: 100%;
height: 200px;
object-fit: cover;
object-position: 20% 80%;
}
.card-title {
font-size: 24pt;
font-weight: 100;
letter-spacing: 0.05;
text-transform: uppercase;
text-align: start;
color: white;
padding: 0 1vw;
}
.card-p {
font-size: 16pt;
font-weight: 100;
letter-spacing: 0.05;
color: black;
padding: 0 1vw;
}
.card-button {
text-align: end;
padding: 0 1vw;
}
.card-button a {
font-size: 18pt;
font-weight: 100;
letter-spacing: 0.05;
color: #334359;
padding: 0 1vw;
}
@media only screen and (max-width: 1350px) {
.card {
width: 35vw;
margin: 4vw 2vw 4vw 2vw;
}
}
@media only screen and (max-width: 600px) {
.card {
width: 80vw;
margin: 4vw 2vw 4vw 2vw;
}
}
<div class="card-container">
<div class="card">
<img class="card-img" src="themen/themen_media/information.jpg" alt="Bild einer Kamera am Strand">
<p class="card-date">DEZ 2020 - JUL 2021</p>
<h2 class="card-title">Interviews und Hilfe</h2>
<p class="card-p">Mehr über den Beruf Mediamatiker und dessen Tätigkeiten erlernen.
Mit anderen Leuten zusammen ein Projekt realisieren.</p>
<br>
<div class="card-button"><a href="themen/interview.html">mehr <i class="fas fa-chevron-down"></i></a></div>
</div>
Die Galerie war auf jeden Fall das Schwierigste zum Programmieren auf der ganzen Website. Hier holte ich mir die Hilfe von einem Informatiker und schrieb zusammen mit ihm den Code. Dabei habe ich sehr viel gelernt, vor allem dass man es sich mit dem Platzieren der Bilder sehr schwer machen kann. Ich musste den CSS auch manuell im Code nochmals verändern, da er mir Probleme in der Galerie machte. Ich werde nicht zu fest auf den Code eingehen, da das sonst den Rahmen sprengen würde. Ich habe gelernt wie man einen Zoom einfügen und eine Beschriftung für das Bild machen kann. Damit war meine Website im Grossen und Ganzen schon fertig programmiert, ich musste nur noch einige Änderungen am Styling machen und teilweise den Code umschreiben und das CSS ändern. Das Meiste der Website konnte ich selber programmieren und dort, wo ich Hilfe benötigte, liess ich mir von einem Informatiker helfen. Ich achtete darauf, dass ich den Code auch wirklich verstand, den ich mit ihm programmiert hatte. Als allerletzter Schritt musste ich die Website noch online stellen. Hier liess ich mir ebenfalls von einem Informatiker helfen, machte aber klar, dass ich den Prozess verstand und auch in Zukunft selbst anwenden könnte. Das ganze Projekt dauerte fast zwei Monate mit Planung und Umsetzung, da ich auch noch arbeitete und meistens nur am Wochenende Zeit hatte. Bei der Maturaarbeit habe ich schon gelernt, wie wichtig ein gut organisierter Arbeitsprozess ist, deshalb konnte ich leicht mit dem Projekt beginnen, da ich wusste, wie ich es mir etwa aufteilen soll. Jede Deadline wurde eingehalten und ich war sogar eine Woche früher als geplant mit der Website fertig. Dafür, dass dies meine erste Website ist, finde ich sie ganz gut gelungen. Ich würde sehr gerne in Zukunft noch mehr programmieren und auch weitere Websiten gestalten.