Lernfeld 5 – Eine Website gestalten und realisieren

Lernfeld 5 – Eine Website gestalten und realisieren

Fach: Medienprojekte und Arbeitsabläufe (MPA), 80 std.

so steht’s im Lehrplan:

Ziel:

Die Schülerinnen und Schüler erstellen nach Vorgaben eine Website. Die Verzeichnis- und Navigationsstruktur des Auftritts planen sie unter d m Gesichtspunkt der ökonomischen Pflegbarkeit und der Benutzerfreundlichkeit. Hierbei berücksichtigen sie unterschiedliche Zielgruppen. Die Schülerinnen und Schüler entwerfen die einzelnen Webseiten unter Beachtung der Gestaltungsmittel Typografie, Farbwahl und Flächenaufteilung. Bilder und Grafiken wählen sie unter gestalterischen Gesichtspunkten zweckorientiert aus und bereiten sie webgerecht auf. Sie achten dabei auf Ästhetik und Kommunikationsziel. Sie konzipieren und realisieren Animationen mit branchenspezifischer Software und integrieren die Ergebnisse in die Website. Eigene und fremde Ideen reflektieren sie konstruktiv und kritisch. Sie überprüfen ihre Entwürfe anhand der Vorgaben und präsentieren diese. Zur Strukturierung und Gestaltung der einzelnen Seiten setzen sie vom W3C standardisierte Sprachen ein. Sie analysieren den Quelltext dieser Seiten, korrigieren ihn hinsichtlich der aktuell gültigen Standards und führen nach Vorgaben Änderungen durch. Zu diesem Zweck setzen sie entsprechende Referenzen, auch in englischer Sprache, als Hilfe ein. Die erstellten Webseiten überprüfen sie in unterschiedlichen Browsern und optimieren sie. Bei der Veröffentlichung der Site beachten sie technische, wirtschaftliche und rechtliche Aspekte.

 

Inhalte:

  • Dateinamenskonvention
  • Blickführung
  • Gestaltungsraster
  • Bildschirmauflösung
  • Usability
  • Farbcodierung, Hexadezimalsystem
  • Dithering
  • Antialiasing
  • Animationsarten
  • DNS, ICANN, DENIC
  • Webhosting
  • Namensrecht
  • Impressum

 

 

… ind hier eine besonders gelungene Website: hier klicken

Zahlengliederung digital

Zahlengliederung digital

Zahlengliederung digital Immer wieder liest man, daß Zahlen im Printbereich zur besseren Lesbarkeit gegliedert werden sollten, während eine Gliederung »für elektronische Vorgänge nicht zulässig ist« – was natürlich völlig unsinnig ist. Schrift: New Paris KingSize Air   In beiden Bereichen dient die Gliederung dem besseren visuellen Erfassen der Zahlen. Während im Printbereich Zahlen nur gelesen werden,…

[Weiterlesen]

Grid – eine einfache Einführung in Responsive Webdesign

Grid – eine einfache Einführung in Responsive Webdesign

Grid – eine einfache Einführung in Responsive Webdesign Autor: Ilja ZaglovDatum: 24.05.2014, 13:42 Uhr Willst du schnell den Einstieg in Responsive Webdesign finden oder die Basics auffrischen? Mit diesem Tutorial ist beides kein Problem. Grid – eine einfache Einführung in Responsive WebdesignGrid LogoResponsive Webdesign ist keine Zauberei: Dennoch ist die richtige Herangehensweise an die Herausforderungen…

[Weiterlesen]

StyleStats: analysiert CSS

StyleStats: analysiert CSS

StyleStats: Dieses Tool analysiert CSS auf nützliche Informationen wie Farbwerte und Schriftgrößen Ihr möchtet euch einen schnellen Überblick über die wichtigsten CSS-Informationen einer Website machen? Dann könnte StyleStats das Mittel eurer Wahl sein. Welche Farben sind auf einer Website definiert? Welche Schriftgrößen und wie viele Media-Queries werden genutzt? Das könntet ihr natürlich alles in dem…

[Weiterlesen]

Zu wenige Freelancer können Android-Apps entwickeln

Zu wenige Freelancer können Android-Apps entwickeln

Firmen suchen immer mehr Android-App-Entwickler. Doch es gibt nicht genügend Freiberufler, die die Aufträge übernehmen können. Die Gesuche für Freelancer für iOS sind massiv zurückgegangen. Die IT-Projektbörse Gulp hat zu wenige Entwickler für Android-Apps. In 88 Prozent der Projektanfragen, in denen Mobile-App-Spezialisten gesucht werden, waren Android-Kenntnisse gefragt, wie das Unternehmen am 26. März 2014 bekanntgab….

[Weiterlesen]

CSS-Diner: Nerd-Spiel mit CSS-Selektoren für zwischendurch

CSS-Diner: Nerd-Spiel mit CSS-Selektoren für zwischendurch

CSS Diner ist ein kleines Spiel, bei dem ihr mit CSS-Selektoren verschiedene Elemente aus einer interaktiven Grafik auswählen müsst. In diesem Artikel zeigen wir euch, warum dieses Spiel nicht unbedingt für Anfänger geeignet ist.   CSS-Diner: Nerd-Spiel mit CSS-Selektoren für zwischendurch   CSS-Diner kürt dich zum Gott. (Grafik: CSS-Diner) „CSS Diner“ präsentiert sich in 26…

[Weiterlesen]

OpenType und CSS: Nützliche Snippets rund um font-feature-settings

OpenType und CSS: Nützliche Snippets rund um font-feature-settings   Mit dem relativ neuen CSS-Attribut font-feature-setting ist es möglich, die Möglichkeiten von OpenType-Schriftarten auszureizen. Ihr wollt Ligaturen, Brüche oder sogenannte „Swashes“ mit euren Schriften darstellen? Dann seid ihr hier genau richtig. OpenType und CSS: Nützliche Snippets rund um font-feature-settings Holt mehr aus euren OpenType-Schriften raus. (Quelle:…

[Weiterlesen]

CeBIT Relaunch – Responsive. Flat. Fun.

CeBIT Relaunch – Responsive. Flat. Fun.

Die CeBIT erhält ein neues digitales Profil – und eine neue Website. Getreu dem Motto „Mobile First“ wurde die cebit.com im Responsive Design umgesetzt – sprich alle Inhalte sind unabhängig vom Endgerät von Desktop über Tablet bis Smartphone gleichermaßen abrufbar. Jedoch nicht nur das Design wurde überarbeitet; auch die gesamte inhaltliche Strategie wurde neu ausgerichtet….

[Weiterlesen]

Flexbox im Praxiseinsatz

Flexbox im Praxiseinsatz

 

Hover.css: 50 Hover-Effekte für deine Webseite

Hover.css: 50 Hover-Effekte für deine Webseite

Hover.css: 50 Hover-Effekte für deine Webseite Hover.css bietet dir eine Sammlung von Hover-Effekten, die du auf verschiedene Elemente deiner Website anwenden kannst. Heute stellen wir dir diese kleine, aber feine CSS-Bibliothek kurz vor.   Mit CSS3 stehen Webworkern viele Möglichkeiten zur Verfügung, um Websites noch spannender zu gestalten. Eines der interessantesten Features sind CSS-Transitions, die…

[Weiterlesen]

Mobile Nutzerzahlen und Trends – Responsive Webdesign Artikel | Webdesign Forum

Um zu klären wie wichtig das Thema Responsive Webdesign überhaupt ist, sind zunächst konkrete Werte zur aktuellen Entwicklung der mobilen Nutzerzahlen wichtig. Denn je mehr Nutzer die eigene Webseite über das Smartphone oder Tablet besuchen, desto wichtiger ist auch eine angepasste Darstellung an das entsprechende Endgerät. Immer mehr Menschen nutzen Smartphones. Zu dieser Erkenntnis kommen…

[Weiterlesen]

CSS-Regions vor dem Aus: Google und Opera stellen sich gegen die Adobe-Technik

CSS-Regions vor dem Aus: Google und Opera stellen sich gegen die Adobe-Technik

CSS-Regions vor dem Aus: Google und Opera stellen sich gegen die Adobe-Technik Google- und Opera-Entwickler sehen keine Zukunft für CSS-Regions in der Blink-Engine. Bei Google sieht man in der Unterstützung vor allem ein Performance-Hindernis. CSS-Regions basiert auf einem Vorschlag von Adobe und soll komplexe Layouts im Web ermöglichen. So lässt sich damit Fließtext über verschiedene…

[Weiterlesen]

Wenn Farben im Internet nicht so aussehen wie sie sollten…

Wenn Farben im Internet nicht so aussehen wie sie sollten…

… liegt’s meistens am Farbmanagement   Drei Einflussgrössen, Monitor, Betriebssystem und Browser sind für die farbliche Darstellung verantwortlich. Untenstehende Farbkontroll-Grafik bietet die Möglichkeit einer schnellen Überprüfung der Farbfähigkeit von Monitor, Betriebssystem und Browser.   Wenn alles passt – zeigt der Gamma-Checker PC an – sehen beide Bilder identisch aus – erscheint eine einheitliche blaue Farbfläche,…

[Weiterlesen]

Abseits des Virtuellen – Wenn Hacker basteln

Abseits des Virtuellen – Wenn Hacker basteln

von Carolin Fromm, NDR.de Chaos herrscht an Tag drei des Chaos Communication Congress überall. Leere Flaschen und Dosen stehen zwischen roten, gelben und blauen Kabelbergen auf den Tischgruppen. Auf Bänken und Stühlen im Messezentrum CCH in Hamburg schlafen junge Männer. Am Morgen ist es ruhig, einige Teilnehmer sitzen an schwarzen Laptops und tippen Zahlen- und…

[Weiterlesen]

Drupal im Vergleich mit anderen Content-Management-Systemen

Drupal im Vergleich mit anderen Content-Management-Systemen

Das Content-Management-System Drupal gehört mit seinen über 24.000 Modulen und weit über 29.000 Entwicklern zu einem der größten Content-Management-Systeme (CMS) weltweit. Selbst Webauftritte wie bspw. die des Weißen Hauses basieren auf Drupal. Grund genug, sich das System Drupal einmal näher anzusehen und die Vor- und Nachteile gegenüber anderen großen CMS aufzuzeigen und ggf. im Anschluß…

[Weiterlesen]

Responsive Icons

Responsive Icons

Responsive Icons: The next big thing?   Responsive Icons beheben ein Art-Direction-Problem, über das du dir wahrscheinlich noch gar nicht im Klaren bist. Sind Responsive Icons wirklich das nächste große Ding oder eher unnötige Spielerei? Wir verraten dir unsere Einschätzung.   Icons sind das Mittel der Wahl, wenn es darum geht, eine Methode zur Visualisierung…

[Weiterlesen]

Adaptive Website vs. Responsive Website

Ein kurzer Screencast, der euch an zwei Live-Beispielen den Unterschied zwischen den Website-Typen „Adaptive“ und „Responsive“ zeigt. Das Video ist Bestandteil des Artikels „Adaptive Website vs. Responsive Website“

Das Boxmodell

Das Boxmodell

Regeln des Box-Modells: Dimensionen mit padding, border und margin Das Box-Modell ist die Grundlage für das grafische Layout und die Berechnung der Dimensionen von Elementen mit CSS. Jedes HTML-Element – gleich ob body, div, p, table, a oder span … – wird im Box-Modell als rechteckige Box betrachtet. Die einfache Angabe der Breite allein reicht…

[Weiterlesen]

HTML & CSS (Videos)

Das Boxmodell: Die Navigation: Headerbild: Spaltenlayout: Inhalte:

CSS-Boxmodell (Videos)

Video zu CSS-Sprites

<iframe width=“560″ height=“315″ src=“//www.youtube.com/embed/Gtzx5hzDI0Y?rel=0″ frameborder=“0″ allowfullscreen></iframe>

Weblayout berechnen

Weblayout berechnen Konzeption und Gestaltung, Fachrichtung Gestaltung und Technik (Digital) Hier dürfte es um die Aufteilung von Screens in bestimmten Verhältnissen gehen. 37  Ein 960 Pixel breites Weblayout soll horizontal im Verhältnis 2 : 10 : 4 in Navigations-, Content- und Servicespalte aufgeteilt werden. Geben Sie bitte die Breiten der drei Spalten sowohl in Pixel als auch in Prozent an….

[Weiterlesen]

Screenlayout berechnen – Screendesign optimieren

Einen interessanten Artikel zum Thema Screenlayout findet ihr hier: http://www.pahl-4u.de

CSS-Bibliotheken und Frameworks

CSS-Bibliotheken und Frameworks

7 CSS-Bibliotheken und Frameworks, von denen du gehört haben solltest CSS-Bibliotheken und Frameworks ersparen viel Zeit beim Entwickeln von Web-Projekten. Wir haben sieben Frameworks zusammen getragen, von denen man schon mal gehört haben sollte. CSS-Bibliotheken und Frameworks sind nützliche Wegbegleiter, wenn es darum geht neue Websites zu erstellen. Einige Bibliotheken beinhalten nur die wichtigsten Elemente,…

[Weiterlesen]

Intention.js im Überblick

Intention.js im Überblick

Das nächste Level im Responsive Design? Intention.js im Überblick Autor: Mario Janschitz Datum: 15.10.2013, 08:30 Uhr Responsive Design ist in aller Munde. Zurecht. Neben Media Queries, spannenden HTML-Konstrukten und diversen Scripts gibt es jetzt intention.js: HTML-Transformation für verschiedene Ausgabegeräte. In einfachen Worten und aus technischer Sicht kann gesagt werden, dass im Responsive Design Media-Queries genutzt…

[Weiterlesen]

Webdesign-Grundlagen für mobile Websites

Webdesign-Grundlagen für mobile Websites

Praxis-Guide: Webdesign-Grundlagen für mobile Websites Aus dem t3n Magazin Nr. 28 06/2012 – 08/2012 Autor: Jonas Hellwig Online gestellt: 02.11.2012 Das Web ist mobil und Trends wie Responsive Webdesign sind in aller Munde. Doch es gibt auch andere mobile Ansätze und der Weg zur perfekten mobilen Website ist steinig. Wir zeigen, welche konzeptionellen und gestalterischen…

[Weiterlesen]

Prüfungsvorbereitung NonPrint

Da ich hier speziell für den Printbereich Beiträge sammele oder erstelle, möchte ich an dieser Stelle auf eine interessante Seite verweisen: http://tarcgn.de/mediengestalter/

CSS Box Modell Hierarchie

CSS Box Modell Hierarchie

CSS Box Modell Hierarchie Das CSS-Box Modell besteht aus mehreren Eben. Zum besseren Verständnis ist es 3-Dimensional hier aufgebaut.   Schauen wir uns den Aufbau nun Schritt für Schritt an. Der HTML-Code – dort steht außer dem Inhalt, also dem Text, nicht viel: <p> Hier kommt der Inhalt des … </p> Im Browser angezeigt bekommen…

[Weiterlesen]

Webtypografie

Webtypografie

Quelle: http://vimeo.com Status Quo der Webtypografie from Gerrit van Aaken on Vimeo.

Werbung im Internet

Werbung im Internet Marc-Michael Schoberer am September 1, 2013 Das Internet hat sich seit seiner Erfindung rasant entwickelt. Immerhin 76,5% der Deutschen und 2,4 Milliarden Menschen weltweit sind regelmäßig online. Was anfangs nur mit dem Computer möglich und wenigen vorbehalten war, ist zu einer richtigen Massenbewegung geworden. Klar das hier ein riesiges Potenzial schlummert –…

[Weiterlesen]

HTML könnte DRM-Erweiterung bekommen

HTML könnte DRM-Erweiterung bekommen

Von Georg Wieselsberger – 07.10.2013, 08:25 W3C berät Das World Wide Web Consortium (W3C) hat beschlossen, dass die HTML-Arbeitsgruppe an einer umstrittenen DRM-Erweiterung arbeiten soll. Das könnte umfangreiche Folgen haben. DRM könnte bald ein Teil des HTML-Standards werden. Die EFF warnt vor den möglichen Folgen. Laut der Electronic Frontier Foundation (EFF) ist die Encrypted Media…

[Weiterlesen]

Social Media Monitoring

Social Media Monitoring

Meinungen im Social Web beeinflussen heute immer häufiger die Wahrnehmung von Unternehmen und deren Produkten. Studien zeigen, dass Nutzer sich in ihrem Kaufentscheidungsprozess oftmals an Produktbewertungen und Diskussionen orientieren und diesen Vertrauen schenken. Ob Unternehmen also aktiv Social Media Kanäle betreiben oder nicht, gesprochen wird so oder so über sie. Die Frage ist also lediglich,…

[Weiterlesen]

Buchtipp: Multiscreen Design

Buchtipp: Multiscreen Design 28.06.2013, 13:14 Uhr geschrieben von Jürgen Siebert Wir Menschen sind rund um die Uhr von verschiedenen Bildschirmen umgeben. Wer heute eine Website oder digitale Medien gestaltet (E-Book, Zeitung, Zeitschrift, …), für den ist Multiscreen-Denken ein essenzieller Teil der Designstrategie. Ganzheitliche Konzepte für unterschiedliche Endgeräte zu entwickeln ist ein verzwicktes Feld mit vielen…

[Weiterlesen]

Nette NonPrint-Links

  http://www.mediaevent.de/ http://de.selfhtml.org/  http://www.bjoernsworld.de/css/grundlagen.html

Die erste Website ist wieder online !!

Die erste Website ist wieder online !!

Die allererste Website die im WWW erreichbar war, ist wieder in seinem Originalzustand zu sehen unter: http://info.cern.ch/hypertext/WWW/TheProject.html Schon faszinierend wie schnell die Zeit vergeht und was sich in diesen 20 Jahren verändert hat. Hypertext war damals das Zauberwort…  

Neue Typo3-Version verfügbar

Neue Typo3-Version verfügbar

Neue Typo3-Version verfügbar CMS 6.1 „Improve“ Quelle: print.de: 30.04.2013 Martina Reinhardt Typo3 hat eine neue Version seines Content-Management-Systems auf den Markt gebracht. Der Fokus soll dabei vor allem auf der Verbesserung und Politur der mit der vorausgegangenen Version 6.0 neu hinzugekommenen Funktionen liegen. Die aktuelle CMS-Version 6.1 ist ab sofort kostenfrei verfügbar. Die mit Typo3…

[Weiterlesen]

Studie zu „Bürgerreportern“

Studie zu „Bürgerreportern“

Gogol Medien veröffentlicht Studie zu Leserreportern Erkenntnisse aus 25 Projekten mit über 200.000 Bürgerreportern und Millionen von Beiträgen und Bildern Quelle: print.de: 26.04.2013 Michael Schüle Erstaunlich: Laut der Studie von Gogol Medien decken Leserreporter andere Themen ab als Lokaljournalisten Die Gogol Medien GmbH & Co. KG (Augsburg), Anbieterin des cloudbasierten Multichannel-Publishing-Systems Gogol Publishing Cloud, hat in…

[Weiterlesen]

Videos in Webseiten einbinden

Video für Webseiten Speicherformate für Video im Internet Generell muss jedes Video für das Abspielen auf einer Webseite im Internet vorbereitet werden: Speicherformat, Codecs, Auflösung und Bitrate sind die vier Parameter für Video im Internet. Die Frage nach dem besten Video-Format, dem besten Codec oder der optimalen Bitrate erübrigt sich im Internet: Hier wird das…

[Weiterlesen]

Android Emulatoren

Android Emulatoren

Hier kann man seine Websites auf Android-Emulatoren testen… https://www.manymo.com/emulators  

18 km hohe Website !

18 km hohe Website !

Wer zum Impressum der Seite will, der muss Zeit zum Scrollen haben oder den Fahrstuhl nehmen… Viel Spaß und Zeit: http://worlds-highest-website.com/de/

Video für Webseiten

Video für Webseiten

Speicherformate für Video im Internet Generell muss jedes Video für das Abspielen auf einer Webseite im Internet vorbereitet werden: Speicherformat, Codecs, Auflösung und Bitrate sind die vier Parameter für Video im Internet.   Die Frage nach dem besten Video-Format, dem besten Codec oder der optimalen Bitrate erübrigt sich im Internet: Hier wird das genommen, was…

[Weiterlesen]

Media Query

Linkliste: Artikel zum Thema Media Query  

Screenlayout berechnen Übungsaufgaben

Screenlayout berechnen   Konzeption und Gestaltung, Fachrichtung Gestaltung und Technik (Digital)   Ich vermute, dass es hier um die Aufteilung von Screens in bestimmten Verhältnissen geht.   28 Ein 960 Pixel breites Weblayout soll horizontal im Verhältnis 2 : 10 : 4 in Navigations-, Content- und Servicespalte aufgeteilt werden. Geben Sie bitte die Breiten der…

[Weiterlesen]

CHART.JS

CHART.JS

Hübsche Diagramme, leider offline Nick Downie hat mit Chart.js eine sehr kompakte Javascript-Bibliothek entwickelt, die hübsche Diagramme mit Hilfe des Canvas-Elements erstellt. Nur einen Tag, nachdem Downie Chart.js als Open Source veröffentlicht hatte, musste er sein Projekt wieder offline nehmen.   Am Montagmorgen kündigte Nick Downie Charts.js an, eine gepackt nur 4,5 KByte große Javascript-Bibliothek,…

[Weiterlesen]

Wettbewerb „Schule und Cloud“ startet am 1. März

Ein Cloud-Wettbewerb für Klassen an Berufsschulen soll in Deutschland starten. Es geht darum, in 40 Arbeitsstunden einen virtuellen PC bestmöglich einzurichten und im Schulalltag einzusetzen.