ÜK1
Webauftritt erstellen und veröffentlichenBeim üK1 hatte ich den Auftrag eine Website mit html und css zu erstellen. Das Thema war dabei völlig frei wählbar.
In den ersten zwei Tagen hatten wir Zeit unser Projekt zu planen. Wir mussten dinge wie Zielpublikum, Schriftarten, Schriftgrössen, Farben und Medienformate angeben.
Danach hatten wir 3 Tage Zeit um die Website umzusetzen. Es gab immer wieder kleine Inputs zum Thema und man konnte bei Fragen den Leiter fragen, jedoch musste man sehr lange warten, um Hilfe zu bekommen.
Am dritten programier Tag mussten wir noch ein Testing machen und das Fazit ausfüllen. Um 17:00 musste man alles abgeben.
Note: 5.5
Fazit
Ich bin ziemlich zufrieden mit meiner Leistung jedoch hätte ich mir weniger vornehmen sollen. Es war am Ende ziemlich stressig und ich hatte keine Zeit die Seiten zu perfektionieren und auszuarbeiten. Durch die wenige Zeit konnte ich die responsive Navigation nur grob machen und auch die Bilder nicht aufbereiten. Daher läd das ganze jetzt ziemlich lang da die Bilder zu gross sind. Zudem gefällt mir die Navigation & das Headerbild nicht wirklich. Ich habe bei diesem Projekt zum ersten Mal richtig mit Grid gearbeitet und habe allgemein viel gelernt.
Vorbereitung - Vorgaben
Kennt das Vorgehen bei der Situationsanalyse und weiss, welchen Beitrag dieses zur Definition eines klaren Auftrags liefert.
Die Situationsanalyse beschreibt und analysiert die gegenwärtige Situation und die zukünftigen Entwicklungen. Sie ist ein methodischer Blick auf die internen und externen Faktoren, die einUnternehmen zu einem bestimmten Zeitpunkt beeinflussen. Eine Situationsanalyse erfasst die bestehende Ausgangs- oder Problemsituation und bewertet sie. Ihr Ergebnis entscheidet darüber, ob ein Projekt überhaupt gestartet und durchgeführt wird.
Vorgehen
1.Sammlung und Analyse von Informationen durch Interviews, Dokumentenanalysen.
2.Vom Groben ins Detail, Umfang abhängig von Projektart und Projektgrösse.
3.Jeweils nach Informationen sammeln, gliedern und zueinander in Beziehung setzen.
Kennt die grundlegenden Unterschiede der verschiedenen Endgeräte hinsichtlich Funktionalität, Darstellung und Auflösung und Bandbreite der Netzwerkanbindung.
Zu den mobielen Endgeräten gehörten Desktop-Computer, Notebooks und Tablet-PCs, Smartphones und andere Mobiltelefone, Telefonanlagen, Anrufbeantworter und Faxgeräte. Es sind mobile, netzunabhängige Daten-, Sprach- und Bildkommunikation und Navigation.
Bekannte Bildschirmauflösungen sind:
HD: 1280 x 720px
Full HD: 1920 x 1080px (Desktopgeräte)
1366x768px (Laptops)
4K: 3840x2160px (Kino)
2K/ QHD: 2560x10px
8K UHD: 7680x4320px
Bandbreite:
Je mehr Bandbreite eine Datenverbindung hat, desto mehr Daten kann sie gleichzeitig senden und empfangen. Bandbreite = maximal mögliche Datenübertragungsrate.
Kennt die wichtigsten rechtlichen Rahmenbedingungen (Copyrights, illegale Downloads, Lizenzierungsbedingungen) bei der Verwendung fremder Inhalte.
Illegale Downloads
Das Urheberrecht sorgt dafür, dass die Urheberinnen und Urheber für ihre Arbeit Geld bekommen, darum werden ihre Arbeiten auch als geschützte Werke bezeichnet. Wenn Daten illegal heruntergeladen, weitergegeben oder getauscht werden verstösst das Gegen das Uhrheberrecht.
Woran erkennen wir das es sich um ein illegales Angebothandelt:
- Musik, Filme etc sind gratis obschon sie woanders Geld kosten.
- schlechte Qualität
- Portal hat kein Impressum/ Name, Adresse etc
- Internetadresse endet auf .to oder .tl.
Der Unterschieds zwischen dem Copyright und des Uhrheberrechtes liegt darin: Das Urheberrecht sollte die Rechte des Urhebers schützen und das Copyright die Rechte am Kopieren.
Copyright ©
Copyright ist das Kopierrecht und dient zum Schutz des Eigentumns. Das können zum Beispiel Bilder, Texte oder Musik sein, die jemand geschaffen hat. Damit diese im Internet nicht einfach kopiert und benutzt werden ohne die Person dabei zu erwähnen verwendet mand das Copyright Zeichen ©. So schützt man seine Arbeit davor, geklaut zu werden.
Lizenzierungsbedingungen
Mit einem Kauf erhält der Lizenznehmer vom Lizenzgeber das Recht, eine Kopie der Software (nur so wie vereinbart im Lizenzvertrags) zu nutzen.
Kennt die gängigsten Medienformate für das Web und deren Einbindung in einer Webseite.
JPG
JPG ist das standart Format für Fotos. Bei dieser Datei werden transparente Teile mit Weiss aufgefüllt.
GIF
GIF ist ein animiertes Bild das sich immer wieder nacheinander abspielt. bspw. ein Meme.
PNG
Die PNG Date ist grösser als eine JPG Datei. Bei dieser Datei bleiben transparente Teile transparennt und werden nicht automatisch mit Weiss gefüllt wie im JPG.
SVG
SVG-Dateien sind Vekto-basierte Bilder die geometrische Formen nutzen um etwas darzustellen. Das ist sehr sinnvoll bei Logos da SVG-Dateinen beim zoomen keinen Qualitätsverlust haben.
Kennt die wichtigsten Grundelemente (Schrift, Farbe, Bild), die bei der Gestaltung einer Website berücksichtigt werden müssen.
Farben
- Welche Wirkung soll erzeugt werden? Orange z.B. =freundlich, gelb=optimistisch, rot=aufregend etc.
- Farben schaffen Orientierung und stellen Wichtige Dinge in den Vordergrund
- Weissraum - Ohne Weissraum wirkt die Webseite unstrukturiert
- Lesbarkeit
- Kontrast
- nicht zu viele verschiedene
Typografie
- Nicht zu viele Schriften mischen
- Eher auf Versalien verzichten (da sie schwer zu lesen sind)
- Struktur H1, H2, H3.. beachten
- Struktur
- gut lesbar
Sonstiges
- Ein symmetrisch aufgebautes Design wirkt: strukturiert, sauber, ordentlich und/oder langweilg
- Ein asymmetrische Design wirkt: chaotisch, kreativ, lebendig, unordentlich, spannend
- Die Drittelregel. Man teilt ein Bild vertikal sowie horizontal in Drittel und positioniert die wichtigen Bildelemente jeweils auf diesen Drittellinien.
- Der Goldene Schnitt wird häufig eingesetzt, um eine harmonische Aufteilung von Bildern zu erreichen.
Kennt die wichtigsten Grundelemente (Schrift, Farbe, Bild), die bei der Gestaltung einer Website berücksichtigt werden müssen.
Schriftgrösse:
Elemente de grösser erscheinen erhalten mehr Aufmerksamkeit. Durch veschiedene Schriftarten lassen sich Textbereiche gut voneinander erkennen.
Der Ausgangspunkt jeder Schrift ist Regular. Doch es gibt meistens noch mehr Schriftschnitte. Die Schrift behält das gleiche Gestaltungsprinzip doch verändert z.B die Dicke der Schrift. --> light, regular, bold. Dazwischen gibt es noch viele untergruppen (ultra thin, extra light, medium, extra bold, ultra heavy ect. )
Farbe
Farben können auf viele verschiedene Arten eingesetzt werden da der Mensch Farben immer mit Emotionen und Erfahrungen verbindet. Ausserdem können sie zur Grupierung dienen.
Zum Beispiel die Farbe rot ist eine Signalfarbe (Gefahr & Wahrung) aber sie wird auch als aufregend empfunden. Weitere Beispiele sind Orange.=freundlich oder gelb=optimistisch
Bilder
Bilder sind eine Dekoration (Hintergrundbild) und machen ales spannender und geben einen Einblick in das Geschehen.
Kennt eine Methode (z.B. Testen, Validierung) für die Erfolgskontrolle und kann deren Einsatz für die Bestimmung der Zielerfüllung erläutern.
Der Ablauf einer Erfolgskontrolle:
- Zieldefinition
- Projektplanung
- Realisierung
- Erreichung eines Meilensteins
- Erfolgskontrolle
- Gegebenenfalls Nachsteuerung
Diese Schritte werden so lange wiederholt, bis das Projekt erfolgreich abgeschlossen ist.
Zudem gibt es noch den W3Schools Validator welcher die html und css Dateien nach Fehlern im Code durchsucht und diese anzeigt.
Kennt Testkriterien um die korrekte Funktionsweise des Webauftritts auf unterschiedlichen Endgeräten und Browsern sicherzustellen.
- Inhalt: Was gibt es hier?
- Gestaltung: Wie sieht es aus?
- Navigation: Wie findet man sich zurecht?
- Performance: Wie schnell wird die Seite geladen?
- Zugänglichkeit: Kann Ihr Browser die Seite darstellen?
- Quelltext: Entspricht der Quelltext modernen Standards?
- Interaktion: Wird die Möglichkeit zur Interaktion passend umgesetzt?
Kennt was beachtet werden muss, wenn die Website-Präsentation von der lokalen Arbeitsumgebung auf einen Web-Server übertragen wird.
Mit dem FTP-Programm loggt man sich in den Server ein und kann dann die Daten von der eigenen Festplatte auf die Festplatte des Servers übertragen. So sind die Daten auf der ganzen Welt verfügbar.
Kennt Werkzeuge zur sicheren Übertragung einer Website von einer lokalen auf eine serverbasierte Umgebung.
SSL steht für «Secure Sockets Layer» und stellt eine sichere Verbindung zwischen der Website und dem Webbrowser des Besuchers her. Über diese Verbindung werden alle Vertraulichen Daten verschlüsselt übertragen. Für Unbefugte sind sie weder sichtbar noch nutzbar.
Es gibt FTP Programme wie FilZilla um Dateien auf den Server zu laden/ herunterladen. FilZilla ist eine Software, die es Anwendern ermöglicht, einen lokalen PC mit einem Server im Internet zu verbinden, um Dateien auszutauschen