Neue Medien
Neue Medien
Neue Medien
Was ist CSS?
CSS = Cascading Style Sheet = Stilvorlagen Webdesign (Zusammenspiel mit HTML5 + CSS 3 = modernes Webdesign) werden immer ausgebaut, immer neue CSS-Regeln (Versionenzahl bsp CSS4)
Farbe, Layout, Schriften einstellen. Das gesamte Aussehen einer Website kann man im CSS einstellen.
Welche sind mögliche Kriterien, dass eine Website auf allen Browsern gut funktionieren kann?
vorher Browsertests machen
Barrierefrei! = verschiedene Browserversionen (alte Browser, Internet Explorer, neue Browser)
Weiche/Hack = stellt Standbild dar wenn Browser alt / kein Java-Script vorhanden, rechnet die Seite herunter, nur wichtigste Sachen
Parallex-Scrolling ist NICHT barrierefrei!
W3C-Standards für absolute barrierefreie Website (World Wide Web Consorcium)
Welches ist der Unterschied zwischen einer statischen Seite und eine dynamischen Seite?
statisch = jede Seite ist eine einzelne, separate Seite für sich im System, physisch, HTML-, und Programmierungskenntnisse sind erforderlich, um die Website zu aktualisieren
jeder klickbare Zustand ist als Einzelseite angelegt & die Dateien miteinander verlinkt
dynamisch = eine Adresse wird abgerufen; Inhalte werden dargestellt, CMS, eine Einzelseite, Daten werden laufen angefüllt, Blogsystem, wird über Datenbank gesteuert & aktualisiert
Was ist CMS?
Content Management System
(joomla, Typo3, WordPress, Contaio)
System, das zu lässt, von aussen auf einzelne Seiten zuzugreifen und Daten verändern (Front-End: Benutzer kann sich einloggen, Daten löschen oder hinzufügen oder ändern)
mehrere Benutzer möglich
Was ist Flash?
Animationsprogramm, Autorenprogramm (man kann mit Action-Script selber beeinflussen & entwickeln auf Abläufe usw.)
ergibt eine Datei .fla, .swf
schlecht suchmaschinenoptimiert, man braucht zusätzliches Programm um die Datei anzusehen (Flash-Player) -> Apple verweigert, nicht barrierefrei
erste Website in Flash; Hillman Curtis für Macromedia
Was ist HTML?
Hyper Text Markup Language
Beschreibungssprache für Webinhalte, kein Befehl dahinter, bezeichnet / beschreibt
keine Code-Sprache wie bsp Java-Script oder Actionscript
Was ist Frame?
Seiteneinteilung, welche nicht sichtbar ist
schnellerer Bildaufbau für austauschbare Seitenelemente
Seitenelemente die nicht wechseln, sondern stehen bleiben
Im Frameset werden alle Seiten, die zu einer Website gehören, zusammengefasst
Frameworks: Slideshows, alle Elemente werden eingebaut
Was ist Skyscraper?
lange Werbebanner, Infobanner, meist auf der rechten Seite
Was ist ein Web 2.0 Element?
fotocommunity, facebook, twitter, instagram, social media
Wenn User mitbeteiligt sind an den Inhalten, abstimmen, gründen
Welches sind die Vorteile einer HTML-Seite gegenüber einer Flash-Seite?
HTML-Seite ist barrierefrei, suchmaschinenfreundlich, lädt schneller
Flash-Site braucht Flash-Player, ist oft gross und träge, wird im Webdesign nicht mehr eingesetzt, aber bei Games oder grossen firmeneigenen Websiten mit Animationen / Games usw
Welches sind die gebräuchlichen Grössen eine Website?
960 Pixel breit, bei Desktop bis 1440 Pixel (beliebt: 1280 Pixel)
480 Pixel breit für iPhone
Welches sind die wichtigsten Teile einer Website?
Header/Kopf, Navigation, Inhalt/Content, Footer
(Seiteninformation)
Nenne mögliche Schriften, die auf allen Web-Browsern gut funktionieren.
Webschriften (fontsquirrel usw) .wof (web-open-fonts)
viele TrueType-Fonts
Verdana, Georgia, Lucida, Trebuchet: sind breiter gezeichnet, hohe x-Höhe, offene Punzen, allgemein weite Buchstaben
Was ist eine App?
unterschiedlicher Inhalt:
Website (ruft Website ab auf Browser)
Programm (xcode, wird eingebunden)
News App (ruft Datenbank ab, generiert ständig neue Informationen)
PDF (Download, E-Reader bsp NZZ-Sonntag)
DPS (Content-Viewer, Bibliothek, Magazin)
Welches sind die wichtigsten Kriterien, die für eine gute Darstellung einer Website verantwortlich sind?
Usability gute Benutzerführung
Accessability gute technische Führung
klare Struktur, Konzept
Was ist Image Map?
unsichtbare Schaltfläche, bei Rollover oder Klick wird etwas sichtbar (Textfeld, neue Website), sensitiv
nicht barrierefrei
Was ist Slicen?
Im Photoshop genau mit Hilfslinien unterteilen
mit Slice-Werkzeug jeden Bereich aufteilen und in Einzelteile abspeichern, nicht ein grosses Bild
von oben links nach rechts
diese Bilder kann man für das Layout verwenden
Erkläre die Fachbegriffe Login, Link, Domain, Weblog, Homepage.
Login = einloggen / anmelden mit Passwort und Benutzername
Link = Verknüpfung mit einer Datei / Website
Domain = Webadresse
Weblog = Blogsystem im Web, Web-Tagebuch, hierarchisch aufgebautes Magazin
Homepage = erste Seite einer Website / Internetauftritt
Was ist ein Java-Script?
Die Skriptsprache zur Einbindung von Animationen im Webdesign
alles was sich bewegt und dynamisch ist wurde mit Java-Script gemacht (Slideshows, Verschiebungen der Navigationen usw)
Welches sind die gängigsten Browser-Programme?
Firefox, Safari, Google Chrome, Internet Explorer, Opera
Was sind websichere Farben?
216 websichere Farben (bsp #99FF00 HEX, #C9E3D6)
sehen auf allen Monitoren etwa gleich aus
Was ist das ideale Vorgehen bei der Entwicklung eines modularen Screendesignkonzeptes, wenn die Umsetzung mit einem CMS-System geplant ist?
1.
Projektdefinition:
Bestimmen: Ziele, Nutzen, Dynamik
Erstellen: Sitearchitektur
Offertenerstellung
2.
Grobkonzept und Designkonzept:
Bedürfnisanalyse, def. Sitearchitektur, Look & Feet und Navigations-
konzept, Storyboard, Abnahme, Gestaltungsraster, Screendesign
3.
Feinkonzept und Umsetzung Design:
Definition Content-Modul, Feinkonzept (Typo, Farbe, Bild …),
Umsetzung im Photoshop der kompexesten Inhaltsseiten
4.
Produktion und Contentdesign:
Präsentation Detailgestaltung, Mediaaufbereitung, Evtl. Prototyp
5.
Dokumentation:
Designstyleguide für Realisation.
Was ist Scrolling?
Bildlauf waagrecht oder senkrecht
durch Scrolling erscheinen noch nicht sichtbare Website-Bereiche im View-Port
das Verschieben von Bildschirminhalten (sowohl Text als auch Grafik)
Zweck ist die Darstellung umfangreicher Inhalte auf begrenztem Platz (wie z.B. bei Bildschirmen, Fenstern, Listenfeldern usw.)
Was ist Social Media?
digitale Medien und Technologien, die es Nutzern ermöglichen, sich untereinander auszutauschen und mediale Inhalte einzeln oder in Gemeinschaft zu erstellen
Was ist ein Dynamic Layer Design?
Responsive Design
Was sind die gängigen Web-Grössen bei der Site-Gestaltung?
-
Der Kunde wünscht eine Website, die auch auf einem iPad oder einem iPhone dargestellt werden kann. Wie kann dieser Wunsch gelöst werden?
Dynamic Layer Design (Responsive Design)
-
- 1 / 27
-
Cartes-fiches
Was ist CSS?
CSS = Cascading Style Sheet = Stilvorlagen Webdesign (Zusammenspiel mit HTML5 + CSS 3 = modernes Webdesign) werden immer ausgebaut, immer neue CSS-Regeln (Versionenzahl bsp CSS4)
Farbe, Layout, Schriften einstellen. Das gesamte Aussehen einer Website kann man im CSS einstellen.
Welche sind mögliche Kriterien, dass eine Website auf allen Browsern gut funktionieren kann?
vorher Browsertests machen
Barrierefrei! = verschiedene Browserversionen (alte Browser, Internet Explorer, neue Browser)
Weiche/Hack = stellt Standbild dar wenn Browser alt / kein Java-Script vorhanden, rechnet die Seite herunter, nur wichtigste Sachen
Parallex-Scrolling ist NICHT barrierefrei!
W3C-Standards für absolute barrierefreie Website (World Wide Web Consorcium)
Welches ist der Unterschied zwischen einer statischen Seite und eine dynamischen Seite?
statisch = jede Seite ist eine einzelne, separate Seite für sich im System, physisch, HTML-, und Programmierungskenntnisse sind erforderlich, um die Website zu aktualisieren
jeder klickbare Zustand ist als Einzelseite angelegt & die Dateien miteinander verlinkt
dynamisch = eine Adresse wird abgerufen; Inhalte werden dargestellt, CMS, eine Einzelseite, Daten werden laufen angefüllt, Blogsystem, wird über Datenbank gesteuert & aktualisiert
Was ist CMS?
Content Management System
(joomla, Typo3, WordPress, Contaio)
System, das zu lässt, von aussen auf einzelne Seiten zuzugreifen und Daten verändern (Front-End: Benutzer kann sich einloggen, Daten löschen oder hinzufügen oder ändern)
mehrere Benutzer möglich
Was ist Flash?
Animationsprogramm, Autorenprogramm (man kann mit Action-Script selber beeinflussen & entwickeln auf Abläufe usw.)
ergibt eine Datei .fla, .swf
schlecht suchmaschinenoptimiert, man braucht zusätzliches Programm um die Datei anzusehen (Flash-Player) -> Apple verweigert, nicht barrierefrei
erste Website in Flash; Hillman Curtis für Macromedia
Was ist HTML?
Hyper Text Markup Language
Beschreibungssprache für Webinhalte, kein Befehl dahinter, bezeichnet / beschreibt
keine Code-Sprache wie bsp Java-Script oder Actionscript
Was ist Frame?
Seiteneinteilung, welche nicht sichtbar ist
schnellerer Bildaufbau für austauschbare Seitenelemente
Seitenelemente die nicht wechseln, sondern stehen bleiben
Im Frameset werden alle Seiten, die zu einer Website gehören, zusammengefasst
Frameworks: Slideshows, alle Elemente werden eingebaut
Was ist Skyscraper?
lange Werbebanner, Infobanner, meist auf der rechten Seite
Was ist ein Web 2.0 Element?
fotocommunity, facebook, twitter, instagram, social media
Wenn User mitbeteiligt sind an den Inhalten, abstimmen, gründen
Welches sind die Vorteile einer HTML-Seite gegenüber einer Flash-Seite?
HTML-Seite ist barrierefrei, suchmaschinenfreundlich, lädt schneller
Flash-Site braucht Flash-Player, ist oft gross und träge, wird im Webdesign nicht mehr eingesetzt, aber bei Games oder grossen firmeneigenen Websiten mit Animationen / Games usw
Welches sind die gebräuchlichen Grössen eine Website?
960 Pixel breit, bei Desktop bis 1440 Pixel (beliebt: 1280 Pixel)
480 Pixel breit für iPhone
Welches sind die wichtigsten Teile einer Website?
Header/Kopf, Navigation, Inhalt/Content, Footer
(Seiteninformation)
Nenne mögliche Schriften, die auf allen Web-Browsern gut funktionieren.
Webschriften (fontsquirrel usw) .wof (web-open-fonts)
viele TrueType-Fonts
Verdana, Georgia, Lucida, Trebuchet: sind breiter gezeichnet, hohe x-Höhe, offene Punzen, allgemein weite Buchstaben
Was ist eine App?
unterschiedlicher Inhalt:
Website (ruft Website ab auf Browser)
Programm (xcode, wird eingebunden)
News App (ruft Datenbank ab, generiert ständig neue Informationen)
PDF (Download, E-Reader bsp NZZ-Sonntag)
DPS (Content-Viewer, Bibliothek, Magazin)
Welches sind die wichtigsten Kriterien, die für eine gute Darstellung einer Website verantwortlich sind?
Usability gute Benutzerführung
Accessability gute technische Führung
klare Struktur, Konzept
Was ist Image Map?
unsichtbare Schaltfläche, bei Rollover oder Klick wird etwas sichtbar (Textfeld, neue Website), sensitiv
nicht barrierefrei
Was ist Slicen?
Im Photoshop genau mit Hilfslinien unterteilen
mit Slice-Werkzeug jeden Bereich aufteilen und in Einzelteile abspeichern, nicht ein grosses Bild
von oben links nach rechts
diese Bilder kann man für das Layout verwenden
Erkläre die Fachbegriffe Login, Link, Domain, Weblog, Homepage.
Login = einloggen / anmelden mit Passwort und Benutzername
Link = Verknüpfung mit einer Datei / Website
Domain = Webadresse
Weblog = Blogsystem im Web, Web-Tagebuch, hierarchisch aufgebautes Magazin
Homepage = erste Seite einer Website / Internetauftritt
Was ist ein Java-Script?
Die Skriptsprache zur Einbindung von Animationen im Webdesign
alles was sich bewegt und dynamisch ist wurde mit Java-Script gemacht (Slideshows, Verschiebungen der Navigationen usw)
Welches sind die gängigsten Browser-Programme?
Firefox, Safari, Google Chrome, Internet Explorer, Opera
Was sind websichere Farben?
216 websichere Farben (bsp #99FF00 HEX, #C9E3D6)
sehen auf allen Monitoren etwa gleich aus
Was ist das ideale Vorgehen bei der Entwicklung eines modularen Screendesignkonzeptes, wenn die Umsetzung mit einem CMS-System geplant ist?
1.
Projektdefinition:
Bestimmen: Ziele, Nutzen, Dynamik
Erstellen: Sitearchitektur
Offertenerstellung
2.
Grobkonzept und Designkonzept:
Bedürfnisanalyse, def. Sitearchitektur, Look & Feet und Navigations-
konzept, Storyboard, Abnahme, Gestaltungsraster, Screendesign
3.
Feinkonzept und Umsetzung Design:
Definition Content-Modul, Feinkonzept (Typo, Farbe, Bild …),
Umsetzung im Photoshop der kompexesten Inhaltsseiten
4.
Produktion und Contentdesign:
Präsentation Detailgestaltung, Mediaaufbereitung, Evtl. Prototyp
5.
Dokumentation:
Designstyleguide für Realisation.
Was ist Scrolling?
Bildlauf waagrecht oder senkrecht
durch Scrolling erscheinen noch nicht sichtbare Website-Bereiche im View-Port
das Verschieben von Bildschirminhalten (sowohl Text als auch Grafik)
Zweck ist die Darstellung umfangreicher Inhalte auf begrenztem Platz (wie z.B. bei Bildschirmen, Fenstern, Listenfeldern usw.)
Was ist Social Media?
digitale Medien und Technologien, die es Nutzern ermöglichen, sich untereinander auszutauschen und mediale Inhalte einzeln oder in Gemeinschaft zu erstellen
Was ist ein Dynamic Layer Design?
Responsive Design
Was sind die gängigen Web-Grössen bei der Site-Gestaltung?
-
Der Kunde wünscht eine Website, die auch auf einem iPad oder einem iPhone dargestellt werden kann. Wie kann dieser Wunsch gelöst werden?
Dynamic Layer Design (Responsive Design)
