Kurt Weidemann: Auf die Explosion der unbegrenzten Möglichkeiten folgt die Implosion ihrer Beherrschung.
Es wird eine robuste App für W3C konforme CSS-Simulationen entwickelt und getestet.
Zu "ausgewachsenen" MDI-Anwendungen, dynamischen Webseiten und Web-Apps gehören zahlreiche gegenseitige Wechselwirkungen. Miteinander in Beziehung stehen z.B. das Corporate Design des Unternehmens, das visuelle Erscheinungsbild und die Website-Ästhetik, das Responsive Web-Design ( Websiten-Layout ) und ARIA ( Accessible Rich Internet Applications ) und natürlich das Kundenverhalten und das Analysiern der visuelle-medialen Kommunikation. Siehe z.B. Web-Analytics und Web Beacon ( Tracking-Pixel ).
Hier einige weitere "Stichworte" zu gegenseitigen Wechselwirkungen ( de.wikipedia ): grafische Entwurfsmuster und Design Pattern, Lizensen und Rechte bei Gestaltung von Benutzungsoberflächen, Verwandte Schutzrechte , geistiges Eigentum und Schutzrechte (Patente, Marke, Design, Urheberrecht), Zeichen , Zeichen-Kodierungen, Unicode , Typografie , Design von Fonts , Styles, Gütesiegel, Beschriftung, Legende ( Abbildung/Diagramm am Rand), Dingbats (Unicodeblock, Beispiele ✪ ☀ ► ▼ ▲ ⇨ ⇩ ↥ ↧ ▲ △ ▶ ▷ ), Schmuckzeichen , Lesezeichen (Internet), Bookmark, Warenzeichen, Marke (Recht), Logo , Signet , Ikon , Emblem, Sinnbild, Hoheitszeichen, Abzeichen, Piktogramm , Monogramm , Bilder und Media, Filme.
Human-Computer-Interaction und Design, de.wikipedia: Design für Alle , Universal Design , Webdesign Auszeichnungssprachen, HTML, CSS, SVG, Ajax, WCAG, Web-Apps, Website-Ästhetik, Browser-Default-Styles, CSS-Reset, CSS-Normalize Bilder, Canvas, SVG, WebGL, OpenGL, Web Accessibility Initiative , Ergonomie und ISO 14915, Arbeitskreis Barrierefreies Internet , MCI Mensch-Computer-Interaktion , Barrierefreies Bauen
Visuelle Effecte. Siehe z.B. w3.org css3-color Einige willkürliche CSS3-Beispiele:
#rrggbb - und #rgb - Schreibweisen
#p1 {background-color: #ff0000;} /* red */
#p2 {background-color: #0f0;} /* green */
#p3 {background-color: #0000ff;} /* blue */
RGB:
#p1 {background-color: rgb(255, 0, 0);} /* red */
#p2 {background-color: rgb(0, 255, 0);} /* green */
#p3 {background-color: rgb(0, 0, 255);} /* blue */
RGBA:
#p1 {background-color: rgba(255, 0, 0, 0.3);} /* red with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);} /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);} /* blue with opacity */
HSL
Hue-Farbkreis: 0=rot, 120=grün, 240=blau ...360=rot
Saturation: 0% Graustufe, ... 100% Vollfarbe
Lightness: 0% = schwarz, ... 100% weiss
#p1 {background-color: hsl(120, 100%, 50%);} /* green */
#p2 {background-color: hsl(120, 100%, 75%);} /* light green */
#p3 {background-color: hsl(120, 100%, 25%);} /* dark green */
#p4 {background-color: hsl(120, 60%, 70%);} /* pastel green */
opacity: 1.0; Komplett undurchsichtig
opacity: 0.6; Durchscheinend
opacity: 0.0; Komplett transparent
http://caniuse.com/#search=opacity
#p1 {background-color: hsla(120, 100%, 50%, 0.3);} /* green with opacity */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);} /* light green with opacity */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);} /* dark green with opacity */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);} /* pastel green with opacity */
opacity- Beispiel:
style="background-color: yellow; opacity: 0.2;"
style="background-color: yellow; opacity: 0.5;"
style="background-color: yellow; opacity: 0.9;"
Siehe z.B. css3-gradients ( w3.org ), caniuse css3-gradients , http://codersblock.com/blog/gradient-animation-trick/
<p>
Teste Farbgradient bei ":hover"
</p>
<style>
.hover_gradient{ display:inline-block;width:12em;
font-size:1.5em;padding:1em;overflow:hidden;
background-image: linear-gradient(to bottom,
rgba(157,157,157,0.7) 0%,
rgba(20,20,220,0.7) 100%);
}
.hover_gradient:hover{ background-image: linear-gradient(to bottom,
rgba(157,157,157,0.7) 0%,
rgba(220,120,20,0.7) 100%);
}
</style>
<div class="hover_gradient">
HIER BITTE onmouseover: Bei Hover gibt es hier einen Wechsel des Farbgradienten
</div>
Visuelle Effecte. Siehe z.B. CSS3-Animations ( w3c ), CSS-Transitions ( mozilla.org ), CSS-Animations ( mozilla.org ), CSS-Animations ( msdn )
2015 gibt es Browser-Unterschiede bei CSS3. Siehe z.B. bei caniuse.com Transitions , Animations ., http://robertnyman.com/css3/
Responsiven Webdesign ( Websiten-Layout ) und ARIA ( Accessible Rich Internet Applications ). Border-radius ... Siehe z.B. Navigationsstrukturen , a-Tags
"HTML5 form features", wie z.B. Range input type, Date and time input types, Color input type, Number input type, input placeholder attribute, Multiple file selection, Email, telephone & URL input types, Form attribute, meter element, progress element, Search input type, date pickers, sliders, validation, placeholders and multiple file uploads. Siehe z.B. css3-gradients ( w3.org ), caniuse css3-gradients
Wie kann ein Web-Tool den CSS-Design-Prozess einfach und normgerecht unterstützen? Wie wird ein solches Designwerkzeug als App entwickelt? Wie ist das eigne Vorgehen, wenn Plagiate out sind?
CSS-Design-Patterns ( Entwurfsmuster ) mit Hilfe von CSS-Simulator ( Start ). Weiteres in der Veranstaltung. Plagiate sind out!
Viel Freude bei der Ausarbeitung!
Letzter Abgabetermine So 12.00 Uhr
Plagiate sind out!