Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Little Boxes - Das Web ist nicht aus Papier

Eine Präsentation von Laura Barrachina, Jennifer Bingen, Simone Welther und Hong Nguyen Ho
by

Mira Hồ

on 28 January 2014

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Little Boxes - Das Web ist nicht aus Papier

Little Boxes
Das Web ist nicht aus Papier

3. Unterschiede Web- und Printdesign
Papier Web
Unterschiede Web- und Printdesign
Papier Web
Gliederung
1. Einführung

2. CSS

3. Unterschiede Web & Print

4. Webseiten haben Schichten

5. Rückblick: Webseiten ohne CSS

6. Responsive Webdesign
1. Einführung
"Little Boxes"
6. Responsive Webdesign
CHAOS!?
Lösung!!
Warum
Responsive Webdesign?
Wie funktioniert es?
Fluid Grid
im CSS werden statische Werte durch relative Werte ersetzt (Pixel Prozent)
Media Queries
Abfragen: Wie groß ist der Monitor? Desktop, Netbook, Tablet oder Smartphone? etc.
lädt darauf entsprechendes Stylesheet
Einsteigerbuch zu HTML und CSS:
Kurze Einführung in HTML
Vorteile und Funktionalität von CSS
2. CSS (Cascading Style Sheets)
Standard Stylesheet-Sprache für Webseiten
Meistens mit HTML & XHTML kombiniert
Trennt Inhalt und Gestaltung

Darstellung verschiedener Medien
(Farben, Schrift & Layout)
(Bildschirm, Print, Sprache)
exakte Umsetzung
beliebige Schriftart
festes Papierformat
Vergrößerung: Lupe
Quelltext
nicht jede Schriftart möglich
variable Auflösung/Größe
Skalierbar, Sprachsynthese

Direkt in HTML-Datei
Extern durch Link zu CSS-Datei
Flexibel und leicht zu verändern
Implementierung:
Quellen
http://little-boxes.de/
http://en.wikipedia.org/wiki/CSS
http://little-boxes.de/lb1/1.1-papierdenken.html
http://little-boxes.de/lb1/1.2-jenseits-von-papier.html
http://little-boxes.de/lb1/1.3-rueckblick-layout-tabellen.html
http://www.janott.com/com/index.php/print_vs_web
http://liechtenecker.at/responsive-webdesign-die-basics/
http://de.wikipedia.org/wiki/Responsive_Webdesign
größere Flächen
Fotos, Grafiken
keine Interaktion
Scrollen, Suche
Fotos, Grafiken, Ton, Video
Interaktion
4. Webseiten haben Schichten
Unterschiede Web- und Printdesign
Papier Web
Kontrolle
Aussehen immer gleich
keine vollständige Kontrolle
Aussehen unterschiedlich
--> Kontrolle über Layout &
Unveränderlichkeit nach
Fertigstellung
--> Webseiten flexibel,
mit Ausdruck verloren
--> "Papierdenken"
funktioniert nicht

Webseiten
immer anders
Quelltext --> Bauplan
= eigentliche Webseite
Interpretation
1. Kern: Inhalt -> HTML -> flexibel, passt sich an

2. Design-Schicht: gewünschtes Styling -> CSS
3. optionale Schicht:
-> steuert das Verhalten
-> JavaScript
Webseiten haben Schichten
bessere Bedienbarkeit
übersichtlich
Ausgabe verschiedener Formate möglich
Wieso Schichten?
Passt sich
Endgerät an
Eine Webseite
für viele Geräte?
5. Rückblick: Webseiten ohne CSS

Früher: Web war für Wissenschaftler
90er Jahre: Boom
Webseiten sollten bunt sein
Notlösung: Tabellen
-> Quelltext kaum lesbar
-> nachträgliche Änderung fast unmöglich
Eine Präsentation von:
Laura Barrachina
Jennifer Bingen
Hong Nguyen Ho
Simone Welther
Full transcript