Das visuelle Erscheinungsbild der eigenen Homepage soll mit eigenen Styles ein grundlegendes Re-Design erhalten. Als Erweiterung und Verbesserung der eigene Homepage soll ein eigenes, durchgängiges Layout erstellt werden, das die Webseiten sowohl auf einem typischen PC, wie auch auf einem typischen Smartphone geeignet anzeigt. In der Veranstaltung wird diese Musterlösung besprochen, die einen Ausgangspunkt für eigenen Ausarbeitungen und Weiter-Entwicklungen bilden kann.
Zu den prägnanten und leicht wiedererkennbaren Identifikationsmerkmal eines Unternehmens gehört das Firmenlogo ( Kombination von Signet = Bildmarke und Wortmarke; Buchstaben-, Wort, Bild Marke ) und das Corporate Design der Homepage.
Das Layout einer Seite ist das sichtbare Ergebnis des Rendern, d.h. der Umwandlung von strukturierten Informationen ( Bilder, SVG, XHTML, usw ) in die nativ-Pixel des Bildschirm-Speichers.
Bitte beachten sie die vorherigen Aufgaben, Lösungen und die verfügbaren Online-Lern-Unterlagen.
Zahlreiche JavaScript-Bibliotheken ( z.B. JQuery-Mobil ) verwenden ( 'augenfreundliche' ) seiteninterne Lösungen. Wird eine Web-Seite erneut geladen, so sind die vorherige Web-Seiten-Zustände verloren. ein window.onload = function(){ ... } kann eine geladene Seite mit dem Code der Seite erneut initialisieren.
Sollem zu jedem User dessen seitenübergreifende Zusände serverseitig verwaltet werden, so ist z.B. mit einem AJAX-Request eine serverseitige Userspezifische Verwaltung möglich. Nachteile können dann Skalierbarkeit, Komplexität, Übertragungszeit sein. Mit Hilfe von Cookies ( max. ca. 4 kB ) oder localStore ( HTML5, max. ca. 5 MB ) oder Frames (max. sehr grob ca. 100 MB ) können clientseitige Zustände gespeichert werden.
Eine einfache Bedienung von einer Web-Seiten kann durch "Verstecken von unnötigen Informationen" und dem "Aufklappen bei Bedarf" bestehen. Hier ist eine einfache ( ditaktische ) SDI-Lösung mit dt-Registerkarten. Bei einem erneuten Laden einer solchen Seite sind die vorherigen Zustände der Registerkarten vergessen.
HTTP ist ein zustandloses Protokoll. Wird eine Web-Seite erneut geladen, so sind die vorherige Web-Seiten-Einstellungen verloren. Mit Hilfe von Cookies ( max. ca. 4 kB ) oder localStore ( HTML5, max. ca. 5 MB ) oder Frames (max. sehr grob ca. 100 MB ) können clientseitige Zustände gespeichert werden. Zahlreiche JavaScript-Bibliotheken haben keine gebrauchsfertigen, seitenübergreifenden Zustandarchivierungen und verwenden vorrangig seiteninterne Lösungen.
Hier wird ein besonders einfaches, robustes, flexibles MDI -Konzept vorgeschlagen, das lediglich einen Frame in der frameset-Seite mmk/m.htm verwendet und alle seitenübergreifenden Zustände in dieser "Client-top-Page" ( window-top-Element ) zentral speichert. Die Frameset-Seite kann über die Zustände von wechselnden Frame-Seiten "Buch führen". Bei einem erneuten Laden einer vorherigen Seite können dann "automatisch" deren "Abschiedszustände" restauriert werden.
Hier ist ein Lehr-Beispiel m.htm, das als Start für die eigene Lösung verwendet werden kann. Das Beispiel ist zu durchdenken. Der Code ist zu kommentieren und zu verbessern.
Wie kann die gesamte Homepage auf ein neues Design gebracht werden?
Die bisherige Homepage nutzte für alle HTML-Dateien die zentrale .css-Datei kern/frame-info.css. Diese kann z.B. in kern/frame-info-save.css umbenannt werden. Eine neue, leere Datei kern/frame-info.css (mit BOOM) wird dann nach und nach aufgebaut, indem zunächst ein css-reset-style reinkommt und dann nach und nach die eigenen Design-Vorstellungen mit dieser Datei kern/frame-info.css verwirklicht werden.
Besonders pflegeleicht ist eine Homepage, wenn eine einzige Style-Seite (kern/frame-info.css ) sowohl für die Menüseite als auch für alle anderen Webseiten der Homepage verwendet werden kann. Der Style für m.htm bezieht sich wesentlich auf die dl-, dt-, dd--Tags, etwa:
<style type="text/css" media="screen">
html, body{margin:0px;padding:3px;}
a {text-decoration:none !important;color:#000;}
h1 {display:block;text-align:center;margin:4px 2px 12px 2px;
padding:4px;font-size:36px;background-color: #d2691e;color:#fff;
text-shadow:none;border-radius:10px;
box-shadow:5px 4px 4px #400,
5px -4px 62px #ca0,
-6px 6px 6px #007,
inset 10px -10px 20px rgba(0,0,0,0.8);}
h1 dfn {float:right;font-size:13px;margin-right:12px;}
h1 a.border_h1_plus, h1 a.border_h1_minus {text-align:center;
width:36px;font-size:32px;color:#fff;
border-radius:7px;border:3px groove #aaa;}
h1 a.border_h1_plus {float:left;margin-left:12px;}
h1 a.border_h1_minus {float:right;margin-right:12px;}
dl {margin:1px 0px 4px 0px !important;padding:0px;}
dl dt {margin:1px 0px 4px 0px !important;padding:3px;
border-radius:10px;border:1px solid #eae;}
dl > dt, dl dd + dt {clear:both;display:block;font-size:18px;padding:5px 10px !important;
margin:4px 8px 8px 4px !important;background-color:#040;color:#fff;
border-radius:10px;
box-shadow:3px 6px 3px #333 !important;
transition:all 1s ease-in-out;}
dl > dt:hover,
dl dd + dt:hover {display:block; text-shadow:none;
background-color: #d2691e;color:#fff; border-radius:10px;
box-shadow:5px 4px 4px #400,
5px -4px 62px #ca0,
-6px 6px 6px #007, inset 10px -10px 20px rgba(0,0,0,0.8);}
dt dfn,
dt:hover dfn {display:block; float:none !important; font-size:13px;
background-color:inherit;color:inherit;}
dl dt + dd {clear:both;display:block;margin:1px 0px 4px 0px !important;padding:3px;}
dl dt + dd a {display:block; font-size:14px; line-height:18px;
background-color:inherit;color:#00a;padding:4px 10px;margin:3px 12px;
border-bottom:1px solid #ccc;border-left:1px groove #fff;}
dl dt + dd a > dfn {display:block; background-color:inherit;color:inherit;
font-size:13px;}
dl dt + dd a:hover {background-color:inherit;color:#00a;padding:4px 10px;
border-left:1px solid #060;}
</style>
Der eigene Entwurf und die Ausarbeitung ist hinsichtlich der Behindertentauchlichkeit zu dokumentieren.
Das Acronym RIA ( Begriff Rich Internet Application, deutsch: reichhaltige Internet-Anwendung) beschreibt eine Anwendung, die Internet-Techniken benutzt und eine intuitive Benutzeroberfläche hat. ARIA macht mit JavaScript und Ajax angereicherte Webseiten und Webanwendungen besser für Behinderte zugänglich (allg. Benutzerfreundlichkeit, Barrierefreiheit dynamischer Seiten, blinde Nutzer, Screenread-Nutzer). ARIA (Accessible Rich Internet Applications) ist eine rein semantische Erweiterung für HTML, die das Layout von Webseiten nicht ändert. Eine RIA kann mit dem Nutzer interagieren und braucht i.a. einen Browser und keine zusätzlichen Software-Installationen. Vielfach basieren RIAs auf Web-Technologien (wie HTML, CSS, JavaScript, AJAX), die von den meisten Browsern (ohne zusätzliche Plugins) unterstützt werden. Ein Teil der modernen Browser ermöglicht bereits die Verwendung des ( 2012 unvollständigen ) Accessibility-Standard. Die ARIA-Spezifikation ( Richtlinie ) wurde vom W3C und der WAI ( Web Accessibility Initiative ) erarbeitet, um Webseiten und Web-Anwendungen für behinderte Menschen besser zugänglich zu machen.
Viel Freude bei der Ausarbeitung!
Letzter Abgabetermine So 12.00 Uhr