Responsive Webdesign. IHK-Arbeitskreis Software. Prof. Dr. Manfred Wojciechowski

Save this PDF as:
 WORD  PNG  TXT  JPG

Größe: px
Ab Seite anzeigen:

Download "Responsive Webdesign. IHK-Arbeitskreis Software. Prof. Dr. Manfred Wojciechowski 18.02.2014"

Transkript

1 IHK-Arbeitskreis Software Prof. Dr. Manfred Wojciechowski

2 Aufbau Vorstellung Responsive Webdesign Motivation Technologien Frameworks 2

3 Vorstellung Zur Person : Studium Informatik an der TU Dortmund : Wissenschaftlicher Mitarbeiter am Fraunhofer Institut für Software- und Systemtechnik, Dortmund Projektleiter Arbeitsgruppenleiter Internettechnologien 2004: Assistant Director am Sino-German Joint Lab for Software Integration Technologies, Beijing, China 2011: Promotion an der TU Dortmund zum Thema Kontextmodellierung im Ambient Assisted Living April 2013: Professor für Informatik, insbesondere Webtechnologien an der FH Düsseldorf 3

4 Einleitung Forbes, Top Trends for Designing a Website for 2014 Continuous Scrolling Larger Fonts Responsive Webdesign Flat Design Parallax Scrolling Wie kann ich meine Webseite auf verschiedene Bildschirmeigenschaften hin anpassen?? 4

5 Einleitung Welche Möglichkeiten die Darstellung anzupassen?? Responsive Webdesign Begriff Responsive Webdesign wurde erstmals von Ethan Marcotte im Mai 2010 verwendet Gestalterischer und technischer Ansatz, um die Inhalte einer Webseite reaktionsfähig an die unterschiedlichen Darstellungsanforderungen von Endgeräten (und Nutzern) zu realisieren Passen sich flexibel und fließend an die unterschiedlichen Bildschirmgrößen an Darstellungsbereich 5

6 Einleitung Anforderungen an die Flexibilität der Präsentation werden immer vielfältiger

7 Einleitung Mobile Websites http-request Web-Server request.getheader ( User-Agent );

8 Einleitung Mobile Websites Sehr grobe Anpassung an die Präsentationsanforderungen Web-Server request.getheader ( User-Agent );

9 Einleitung Responsive Webdesign http-request Web-Server

10 Einleitung Responsive Webdesign Anpassung erfolgt feingranular im Client Web-Server

11 Techniken des Responsive Webdesign Techniken des Responsive Webdesign Flexibles Gestaltungsraster Flexible Bilder und Medien Mediaqueries 11

12 Flexibles Gestaltungsraster Gängiges (unflexibles) Vorgehen zur Strukturierung von Webseiten Definition einer festen Darstellungsbreite für den Inhalt, z.b Pixel Schwimmende Einbettung des Inhaltsbereichs in die Browserdarstellung, z.b. mittig Bildschirmbreite, z.b Pixel Flexibler Rand Flexibler Rand Inhalt: fixe Breite, z.b Pixel 12

13 Flexibles Gestaltungsraster Gängiges (unflexibles) Vorgehen zur Strukturierung von Webseiten Definition eines Rasters zur Ausrichtung der einzelnen Seiteninhalte Unterteilung des Inhaltsbereichs z.b. in 18 * 60 Pixel breiten Spalten Inhalt: fixe Breite, z.b Pixel Raster: fixe Breite, z.b. 60 Pixel <header> <article> <main> Fixe Breite, z.b. 892 Pixel <aside> Fixe Breite, z.b. 188 Pixel 13

14 Flexibles Gestaltungsraster Fluid Grid Layout reaktionsfähig machen Auflösung starrer Layout-Vorgaben Da wo sinnvoll.. Definition relativer Größenverhältnisse in Bezug auf verfügbare Breite durch den Container Relativer Wert = Fixer Wert / Containergröße * 100 Inhalt: fixe Breite, z.b Pixel <header> <main> Fixe Breite, z.b. 892 Pixel <article> 892/1080*100 = 82,59% 188/1080*100 <aside> = 17,41% Fixe Breite, z.b. 188 Pixel 14

15 Flexibles Gestaltungsraster Layout reaktionsfähig machen Auflösung starrer Layout-Vorgaben Da wo sinnvoll.. Definition relativer Größenverhältnisse in Bezug auf verfügbare Breite durch den Container Relativer Wert = Fixer Wert / Containergröße * 100 Inhalt: maximale Breite, z.b Pixel <header> <article> <main> <aside> Relative Breite, z.b. 82,59% Relative Breite, z.b. 17,41% 15

16 Flexibles Gestaltungsraster Relative Breitenangaben für Inhalt Außenabstand Innenabstand Inhalt: maximale Breite, z.b Pixel <header> <article> <main> <aside> Relative Breite, z.b. 82,59% Relative Breite, z.b. 17,41% 16

17 Flexibles Gestaltungsraster <div class="content"> <header> <h1>italienisches Essen</h1> </header> <article> <main> <h1>pizza</h1> <p>. </p> </main> <aside> <img src="pizza.png" alt="pizza"> </aside> </article> </div>.content { margin: 0px auto; max-width: 1080px; } main { float: left; width: %; margin-right: 2.777%; padding: 8px 0.74%; } aside { float: right; padding: 8px 0.74%; width: 15.93%; } Was haben wir erreicht?? 17

18 Flexibles Gestaltungsraster > 1080px = 1080px < 1080px Raster skaliert mit 18

19 Flexible Bilder und Medien Techniken des Responsive Webdesign Flexibles Gestaltungsraster Flexible Bilder und Medien Mediaqueries 19

20 Flexible Bilder und Medien Fluid Image Bild reaktionsfähig machen Definition relativer Größenverhältnisse des Bilds in Bezug auf verfügbare Breite durch den Container Relativer Wert = Fixer Wert / Containergröße * 100 Skalierung der Bildhöhe zur Bildbreite Inhalt: maximale Breite, z.b Pixel Relative Breite, z.b. 82,59% (max. <article> 892 Pixel) <main> 180/892*100 = 20,18% Fixe Breite, z.b. 180 Pixel Pizza Pizza ist ein vor dem Backen würzig belegtes Fladenbrot aus einfachem Hefeteig Restliche aus der Breite italienischen Küche. Die heutige, international verbreitete <aside> 20

21 Flexible Bilder und Medien Bild reaktionsfähig machen Definition relativer Größenverhältnisse des Bilds in Bezug auf verfügbare Breite durch den Container Relativer Wert = Fixer Wert / Containergröße * 100 Skalierung der Bildhöhe zur Bildbreite Inhalt: maximale Breite, z.b Pixel Relative Breite, z.b. 82,59% (max. <article> 892 Pixel) <main> Pizza <aside> Relative Breite, z.b. max. 20,18% Pizza ist ein vor dem Backen würzig belegtes Fladenbrot aus einfachem Hefeteig aus der italienischen Küche. Die heutige, international verbreitete Restliche Breite 21

22 Flexible Bilder und Medien <div class="content"> <header> <h1>italienisches Essen</h1> </header> <article> <main> <img src="pizza.png" alt="pizza"> <h1>pizza</h1> <p>. </p> </main> <aside> </aside> </article> </div> Was passiert hier bei Verkleinerung??.content { margin: 0px auto; width: 1080px; } main { float: left; width: %; margin-right: 2.777%; padding: 8px 0.74%; } aside { float: right; padding: 8px 0.74%; width: 15.93%; } img { height: auto; max-width: 20.18%; float: left; } 22

23 Flexible Bilder und Medien > 1080px = 1080px < 1080px Die Bildgröße skaliert. Optimierter Textumfluss 23

24 Mediaqueries Techniken des Responsive Webdesign Flexibles Gestaltungsraster Flexible Bilder und Medien Mediaqueries 24

25 Mediaqueries > 1080px = 1080px Ist die kleine Darstellung wirklich? ideal? < 1080px 25

26 Mediaqueries 1080px Ränder werden kleiner 26

27 Mediaqueries 650px 1080px Kein Rand mehr Inhalt skaliert 27

28 Mediaqueries 250px 650px 1080px <aside>-bereich zu schmal Bild zu klein 28

29 Mediaqueries 250px 650px 1080px Zeilenumbruch der Überschrift Passt nicht mehr in Header 29

30 Mediaqueries 250px Umbruchpunkte 650px only screen and (min-width: 1080px) { /* Standard-Layout mit Seitenrändern */ only screen and (max-width: 1080px) { only screen and (max-width: 650px) { only screen and (max-width: 250px) { Prof. Dr. Manfred Wojciechowski, 18. } Februar

31 Mediaqueries Umbruchpunkte 1080px Ränder werden only screen and (min-width: 1080px) { /* Standard-Layout mit Seitenrändern */ } 31

32 Mediaqueries Umbruchpunkte 650px 1080px Kein Rand mehr Inhalt only screen and (max-width: 1080px) { /* Optimierung: Kein Rand, kein Außenabstand */.content { border: none; margin: 0; } } 32

33 Mediaqueries 250px Umbruchpunkte 650px 1080px <aside>-bereich zu schmal Bild zu klein? Was können wir machen? 33

34 Mediaqueries 250px Umbruchpunkte 650px 1080px <aside>-bereich zu schmal Bild zu klein 34

35 Mediaqueries 250px 650px 1080px Zeilenumbruch der Überschrift Passt nicht mehr in Header - Breakpoints erkennen - Anpassung der Website an den Breakpoints only screen and (max-width: 250px) { header { background-color: #00A080; color: white; height: 4em; height: 6em; } } 35

36 Frameworks Frameworks nutzen Flexible Grid-Systeme Responsive Formulare Responsive Tabellen Fertige Templates UI-Elemente Integration in CMS 40

37 Frameworks Auswahl Foundation 5 Responsive Framework Twitter Bootstrap YAML (Yet Another Multicolumn Layout) Gumby Framework Kube GroundworkCSS BASE 41

38 Abschluss Fragen? 42

Responsive Webdesign

Responsive Webdesign ebusiness Praxistag Thüringen 2014 Responsive Webdesign BASISWISSEN UND MÖGLICHKEITEN DER UMSETZUNG Maik Grunitz Geschäftsführer Forward Marketing GbR Inhalte 1. Warum Responsive Design? 2. Geschichte

Mehr

Responsive Web Design

Responsive Web Design Responsive Web Design mit APEX Theme 25 Christian Rokitta APEX UserGroup NRW Treffen 20.01.2014 Oracle DB & APEX Entwickler (selbstständig) Deutschland ( 1996) Niederlanden ( 1996) themes4apex: APEX UI

Mehr

Gliederung. Responsive Design Begriffserklärung und Übersicht. Frameworks Einführung in HTML / CSS Frameworks.

Gliederung. Responsive Design Begriffserklärung und Übersicht. Frameworks Einführung in HTML / CSS Frameworks. Gliederung Responsive Design Begriffserklärung und Übersicht. Frameworks Einführung in HTML / CSS Frameworks. Präsentationsplattform Vorstellung der Präsentationsplattform Setzkasten. 1 / 14 Responsive

Mehr

Responsive Webdesign

Responsive Webdesign Responsive Webdesign Anlass sind 2 Probleme: 1. Darstellung der HU-Homepage auf mobilen Geräten ist nicht optimal (Überprüfung der Anzeige mit Strg+Shift+M oder Simulatoren www.responsinator.com) 2. Summe

Mehr

Fachartikel. Responsive Webdesign

Fachartikel. Responsive Webdesign Bundesrealgymnasium 8010 Graz, Petersgasse 110 Fachartikel Peter Tschuffer Responsive Webdesign Anpassungsfähige Websites für unterschiedliche Ausgabegeräte gestalten Abbildung 1: Screenshot von www.responsivefba.tk

Mehr

Responsive Webdesign Bootstrap und co. Pierre Hein & Benjamin Stein Stuttgart 7. Mai 2015

Responsive Webdesign Bootstrap und co. Pierre Hein & Benjamin Stein Stuttgart 7. Mai 2015 Responsive Webdesign Bootstrap und co. Pierre Hein & Benjamin Stein Stuttgart 7. Mai 2015 Agenda 1. Einführung Was ist Responive Webdesign, Media Queries und CSS preprocessing 2. Frameworks Bootstrap,

Mehr

Tabellenfreies Layout in HTML

Tabellenfreies Layout in HTML Tabellenfreies Layout in HTML 0. Inhaltsverzeichnis Philipp Wahle 12.12.12 2 von 40 Seiten 3 von 40 Seiten 0. Inhaltsverzeichnis 1. Sematischer Code 2. Box Modell 3. Classes & IDs 4. Statischer Seitenaufbau

Mehr

Das TYPOlight CSS-Framework

Das TYPOlight CSS-Framework Das TYPOlight CSS-Framework Aufgaben eines CSS-Frameworks CSS-Reset Vereinheitlichung der Darstellung in allen Browsern Zurücksetzen der proprietären Abstände und Formatierungen Cross-Browser-Formatierung

Mehr

Einführung Responsive Webdesign

Einführung Responsive Webdesign Einführung Responsive Webdesign Aktuelle Situation Desktop Webseiten Umsetzungen auch heute noch in den meisten Fällen Pixelbasiert JavaScript schafft Dynamik CSS schafft Trennung von Inhalt und Layout

Mehr

Inhaltsverzeichnis. Florian Bauer CSS Seite 2 von 10

Inhaltsverzeichnis. Florian Bauer CSS Seite 2 von 10 CSS Inhaltsverzeichnis Gestaltung mit CSS... 3 CSS einbinden... 3 On the fly... 3 Im Header... 3 In einer externen Datei... 3 Aufbau einer CSS Anweisung... 4 Wichtige CSS Eigenschaften... 4 Pseudoelemente...

Mehr

Responsive Web Design Graceful Degradation and Progressive Enhancement

Responsive Web Design Graceful Degradation and Progressive Enhancement Graceful Degradation and Progressive Enhancement Seminar Web Engineering für Master-Studenten (WS 2013/2014) Betreuer: Michael Krug Datum: 13.12.2013 1 Gliederung 1. Warum? 2. Konzepte zur Anpassung an

Mehr

Seitengestaltung mit HTML und CSS. Stefan Rothe, Thomas Jampen

Seitengestaltung mit HTML und CSS. Stefan Rothe, Thomas Jampen Seitengestaltung mit HTML und CSS Stefan Rothe, Thomas Jampen 2013 09 12 Rechtliche Hinweise Dieses Werk von Stefan Rothe steht unter einer Attribution-NonCommercial-ShareAlike 3.0 License. Zudem verzichtet

Mehr

1. Warum Responsives Webdesign? 2. Was ist Responsives Webdesign? 3. Welche Technik und Konzepte gibt es im Responsiven Webdesign?

1. Warum Responsives Webdesign? 2. Was ist Responsives Webdesign? 3. Welche Technik und Konzepte gibt es im Responsiven Webdesign? 1. Warum Responsives Webdesign? 2. Was ist Responsives Webdesign? 3. Welche Technik und Konzepte gibt es im Responsiven Webdesign? 4. Wie sieht die Zukunft im Responsiven Webdesign aus? Special: Responsives

Mehr

ANWENDUNGSSOFTWARE CSS

ANWENDUNGSSOFTWARE CSS ANWENDUNGSSOFTWARE CSS NAVIGATION Bilder zur Navigation: als Anker für Verweise benutzen Text sollte nicht Bestandteil des Bildes sein (Bild als Hintergrund), siehe z-index Navigationslisten mit ,

Mehr

Stefan Bauer. Trends im mobilen Business

Stefan Bauer. Trends im mobilen Business Stefan Bauer Trends im mobilen Business Stefan Bauer Jahrgang 1969, verheiratet, 2 Kinder Diplom-Informatiker TU München Seit 1996 in Online Branche Seit 1999 selbständig Inhaber und Vorstand Dozent und

Mehr

Aufbau einer HTML Seite:

Aufbau einer HTML Seite: 1 Aufbau einer HTML Seite: Grundstruktur: Head Bereich: "nicht sichtbar" Er enthält grundlegende Informationen wie: Title, Charset, Ansichtsgröße,

Mehr

Responsive WebDesign. Zukunftssicheres Webdesign für die optimale Darstellung auf allen Geräten

Responsive WebDesign. Zukunftssicheres Webdesign für die optimale Darstellung auf allen Geräten Responsive WebDesign Zukunftssicheres Webdesign für die optimale Darstellung auf allen Geräten Moderne Web-Konzepte punkten mit einer ansprechenden Visualisierung, professionellen Fotos und informativen

Mehr

3-W-Event. Simplify! Ganzheitliche Gestaltungskonzepte neue Trends im Webdesign. Sabrina Schoenfelder Projektleitung, Beratung

3-W-Event. Simplify! Ganzheitliche Gestaltungskonzepte neue Trends im Webdesign. Sabrina Schoenfelder Projektleitung, Beratung 3-W-Event Simplify! Ganzheitliche Gestaltungskonzepte neue Trends im Webdesign Sabrina Schoenfelder Projektleitung, Beratung internezzo ag Grundstrasse 4b CH-6343 Rotkreuz Tel. +41 41 748 02 48 www.internezzo.ch

Mehr

Tutorial zum erstellen einer Webseite

Tutorial zum erstellen einer Webseite Tutorial zum erstellen einer Webseite 2. Teil das Aussehen mit CSS bestimmen Vorbereitungen: Die HTML Grundlage anpassen, Änderungen sind fett geschrieben. Ab sofort werden wir mit zwei Dateien arbeiten,

Mehr

Nachbau der Website 1.)Hintergrundbild einfügen eigene CSS-Datei

Nachbau der Website  1.)Hintergrundbild einfügen eigene CSS-Datei Nachbau der Website http://www.lake-festival.at/ Erstelle eine neue Bootstrapsite im Ordner lakefestival. Es soll alle Ordner bereits enthalten, back für diverse backgrounds, img mit vielen Bildern usw.

Mehr

1 Definition der Selektoren Einbinden der CSS 3 Möglichkeiten Farbangaben Schriftformatierung Abstände...

1 Definition der Selektoren Einbinden der CSS 3 Möglichkeiten Farbangaben Schriftformatierung Abstände... CSS GRUNDLAGEN 1 Definition der Selektoren... 2 2 Einbinden der CSS 3 Möglichkeiten... 2 3 Farbangaben... 4 4 Schriftformatierung... 4 5 Abstände... 4 6 Box Modell... 5 7 Links... 5 8 Eigene Klasse definieren...

Mehr

responsive-web 31.10.2012 giordano.ch Oktober 31, 2012 1

responsive-web 31.10.2012 giordano.ch Oktober 31, 2012 1 responsive-web 31.10.2012 giordano.ch Oktober 31, 2012 1 perspektiven bruno giordano. // giordano.ch online.ch Oktober 31, 2012 2 giordano.ch Oktober 31, 2012 3 www.leo.org giordano.ch Oktober 31, 2012

Mehr

4.8 Das Box Modell, Block- vs Inline-Elemente

4.8 Das Box Modell, Block- vs Inline-Elemente 4 Formatierung mit CSS Webdesignkurshandbuch:: :: :: :: :: :: :: :: :: :: :: :: Büchli :: Süsstrunk :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: : 4.8 Das Box Modell, Block- vs Inline-Elemente

Mehr

Inhalt: 1)Das Box-Modell

Inhalt: 1)Das Box-Modell Inhalt: 1. Das Box-Modell 2. Reset-CSS 3. CSS-Eigenschaft: position (static, relative, absolute) 4. CSS-Eigenschaft: float, clear 5. Übung 6. Die Seite zentrieren mit margin:auto 1)Das Box-Modell Die Box

Mehr

CSS Frameworks. Seminar Weiterführende Themen zu Internet- und WWW-Technologien. 9. Mai Johannes Schirrmeister

CSS Frameworks. Seminar Weiterführende Themen zu Internet- und WWW-Technologien. 9. Mai Johannes Schirrmeister CSS Frameworks Seminar Weiterführende Themen zu Internet- und WWW-Technologien 9. Mai 2011 - Johannes Schirrmeister Überblick 2 I. Motivation und Einführung II. Flexible vs. Fixe Layouts III. Aufbau am

Mehr

Interface-Optimierung bei mobilen Endgeräten

Interface-Optimierung bei mobilen Endgeräten Interface-Optimierung bei mobilen Endgeräten Darauf sollte man achten Darstellung über CSS anpassen Durch optimierte Breiten kann man sehr einfach für Mobiltelefon oder ipad optimierte Seiten ausliefern.

Mehr

Fließlayout. »World of Fish«

Fließlayout. »World of Fish« Fließlayout 4»World of FishWorld of Fish«stellt ein kleines Informationsangebot zu einem begehbaren Aquarium dar, und dieses Angebot soll von uns umgesetzt werden. Im Vorfeld haben wir wie immer ein Konzept

Mehr

Flexibles HTML. christian.cueni@bfh.ch

Flexibles HTML. christian.cueni@bfh.ch Flexibles HTML christian.cueni@bfh.ch Inhalt Desktop & Mobile Strategien Responsive Design HTML5 Feature Detektion mit Modernizr Desktop & Mobile Strategien Wie bringe ich mobile Nutzer zum (UI) optimierten

Mehr

CSS-Boxen. Hans Gell Schulungen & Dienstleistungen Übersicht der Schulungsinhalte

CSS-Boxen. Hans Gell Schulungen & Dienstleistungen  Übersicht der Schulungsinhalte CSS-Boxen Übersicht der Schulungsinhalte Das Web ist nicht aus Papier enttäuschte Erwartungen Autor hat keine Kontrolle Webseiten sehen immer anders aus Webseiten sind flexibel - Papierseiten sind starr

Mehr

SASS für Einsteiger. WordCamp Köln 2015. 06.06.2015 Bernhard Kau @2ndkauboy kau-boys.de 1

SASS für Einsteiger. WordCamp Köln 2015. 06.06.2015 Bernhard Kau @2ndkauboy kau-boys.de 1 SASS für Einsteiger WordCamp Köln 2015 06.06.2015 Bernhard Kau @2ndkauboy kau-boys.de 1 Wer bin ich? Bernhard Kau Wahlberliner PHP-Entwickler WordPress-Plugin Hobby-Entwickler CSS-Tüftler Organisator der

Mehr

Einführung in die Cross-Plattform Entwicklung Responsive Webdesign mit dem Intel XDK

Einführung in die Cross-Plattform Entwicklung Responsive Webdesign mit dem Intel XDK Einführung in die Cross-Plattform Entwicklung Responsive Webdesign mit dem Intel XDK Einführung Dieses Hands-on-Lab (HOL) macht den Leser mit dem Intel XDK und dem Responsive Webdesign vertraut. Es wird

Mehr

MAKE IT FLEXIBLE: RESPONSIVES CONTAO MIT VW, EM UND FLEXBOX

MAKE IT FLEXIBLE: RESPONSIVES CONTAO MIT VW, EM UND FLEXBOX MAKE IT FLEXIBLE: RESPONSIVES CONTAO MIT VW, EM UND FLEXBOX ich bin Dr. Eva Broermann gebürtige Nürnbergerin seit 20 Jahren in Wien vienneva.com seit 2002 Contao Partnerin CSS-begeistert Hobby-Jazz-Sängerin

Mehr

Praktikum 8: CSS-Layout

Praktikum 8: CSS-Layout WEB1 Web-Technologien 1 Praktikum 8: CSS-Layout Gerrit Burkert, 01.11.2014 Ziele In einem früheren Praktikum haben Sie den HTML-Code für eine Reisebüroseite gemacht. Ziel dieses Praktikums ist es, die

Mehr

Mitschrift HTML. Dateinamen von Bildern: nur Kleinbuchstaben ohne Umlaute und Sonderzeichen BSP: auto.jpg fruehling.jpg bild_01.

Mitschrift HTML. Dateinamen von Bildern: nur Kleinbuchstaben ohne Umlaute und Sonderzeichen BSP: auto.jpg fruehling.jpg bild_01. 1. Stunde Mitschrift HTML Bildbearbeitung in Hinblick auf HTML. Dateinamen von Bildern: nur Kleinbuchstaben ohne Umlaute und Sonderzeichen BSP: auto.jpg fruehling.jpg bild_01.jpg Verstehen des Unterschiedes

Mehr

MOBILE USABILITY. Johannes Ewald peerigon UG

MOBILE USABILITY. Johannes Ewald peerigon UG MOBILE USABILITY Johannes Ewald peerigon UG ÜBER MICH Johannes Ewald UI-Designer und Webentwickler Studium Interaktive Medien Gründung der peerigon UG MOBILE APP MOBILE WEB GRUNDLAGEN DER MOBILE USABILITY

Mehr

Allgemeine Technologien II Wintersemester 2011 / November 2011 CSS

Allgemeine Technologien II Wintersemester 2011 / November 2011 CSS Allgemeine Technologien II Wintersemester 2011 / 2012 28. November 2011 CSS Themen 28.11.2011 Cascading Style Sheets CSS CSS einbinden Inline-Styles CSS im Dokumentkopf Externe Stylesheets Konzepte Typen-,

Mehr

Übung: Bootstrap - Navbar

Übung: Bootstrap - Navbar Übung: Bootstrap - Navbar Angaben befinden sich im Ordner: 5_Übung_nav. Darin befinden sich die Bootstrap-Ordner und die dazu passende index.html, die bereits die Links zu den Ordnern enthält. Aufgabe:

Mehr

Manuela Hoffmann. Modernes Webdesign. Gestaltungsprinzipien, Webstandards, Praxis. Galileo Press

Manuela Hoffmann. Modernes Webdesign. Gestaltungsprinzipien, Webstandards, Praxis. Galileo Press Manuela Hoffmann Modernes Webdesign Gestaltungsprinzipien, Webstandards, Praxis Galileo Press Einleitung 11 TEIL I: Das Design 1 Webdesign und Webstandards 17 1.1 Webdesign, was ist das eigentlich? 17

Mehr

/5. Webdesign - Online Marketing - Social Media

/5. Webdesign - Online Marketing - Social Media 14.01.2017 1/5 14.01.2017 2/5 Webdesign Fachgebiete Als Webdesign Agentur erstellen wir Ihnen mit den Content Management Systemen WordPress, Joomla, Magento & Woocommerce moderne sowie gleichzeitig nutzerfreundliche

Mehr

Allgemeine Technologien II Sommersemester Mai 2011 CSS

Allgemeine Technologien II Sommersemester Mai 2011 CSS Allgemeine Technologien II Sommersemester 2011 02. Mai 2011 CSS Kursthemen Designparadigmen Framesets Tabellenbasierte Layouts -basierte Layouts: CSS & Co. Cascading Style Sheets CSS CSS einbinden

Mehr

Inhaltsverzeichnis. Christoph Zillgens. Responsive Webdesign. Reaktionsfähige Websites gestalten und umsetzen. ISBN (Buch): 978-3-446-43015-0

Inhaltsverzeichnis. Christoph Zillgens. Responsive Webdesign. Reaktionsfähige Websites gestalten und umsetzen. ISBN (Buch): 978-3-446-43015-0 sverzeichnis Christoph Zillgens Responsive Webdesign Reaktionsfähige Websites gestalten und umsetzen ISBN (Buch): 978-3-446-43015-0 ISBN (E-Book): 978-3-446-43120-1 Weitere Informationen oder Bestellungen

Mehr

Einführung in die Webentwicklung

Einführung in die Webentwicklung Einführung in die Webentwicklung Mit HTML5 und CSS3 auf dem Weg zur eigenen Website Kerstin Blumenstein EXPOSEE Dieses Script beinhaltet alle in dem Kurs durchgenommenen - Teile mit Erklärungen von Tag

Mehr

Typo3 - Inhalte. 1. Gestaltung des Inhaltsbereichs. 2. Seitenunterteilung einfügen

Typo3 - Inhalte. 1. Gestaltung des Inhaltsbereichs. 2. Seitenunterteilung einfügen Typo3 - Inhalte 1. Gestaltung des Inhaltsbereichs Das Layout der neuen TVA Website sieht neben dem grafischen Rahmen und den Navigations-Elementen oben und links einen grossen Inhaltsbereich (graue Fläche)

Mehr

HTML-STANDARDS ZUR OPTIMALEN VERWENDUNG IN WCMS VOM HTML-DUMMY ZUR CONTENT-KLASSE

HTML-STANDARDS ZUR OPTIMALEN VERWENDUNG IN WCMS VOM HTML-DUMMY ZUR CONTENT-KLASSE HTML-STANDARDS ZUR OPTIMALEN VERWENDUNG IN WCMS VOM HTML-DUMMY ZUR CONTENT-KLASSE HTML-DUMMY MUSS ICH VON NULL STARTEN? MUSS ICH VON NULL STARTEN? FRAMEWORKS Foundation 5 bzw. NEU 6 Basis CSS für Elemente

Mehr

Vorlesungsinhalte. Internet und Webseiten-Gestaltung. Ausblick. Entwicklungsschritte

Vorlesungsinhalte. Internet und Webseiten-Gestaltung. Ausblick. Entwicklungsschritte Vorlesungsinhalte Internet und Webseiten-Gestaltung Wirtschaftsinformatik 3 Vorlesung 2005-05-13 Dipl.-Inf. (FH) T. Mättig Stylesheets (CSS) Das CSS Box-Modell Fotos, Bilder, Grafiken Tabellen 2005-05-13

Mehr

HTML & CSS. Beispiele aus der Praxis

HTML & CSS. Beispiele aus der Praxis HTML & CSS Beispiele aus der Praxis Übungsblatt 2 http://www.uni-koblenz.de/~ugotit Fragen? Wiederholung Beispiele von.../~ugotit/test/index.htm zu.../~ugotit/test2/html/index.htm Absoluter Pfad relativ

Mehr

WEB4BUSINESS JETZT NEU

WEB4BUSINESS JETZT NEU WEB4BUSINESS JETZT NEU Moderner, einfacher, besser: Heute startet das neue web4business. Ihre Homepage-Software ist in den letzten Monaten mit einem Ziel weiterentwickelt worden: Ihren Erfolg im Internet.

Mehr

Responsive Design & ecommerce

Responsive Design & ecommerce Responsive Design & ecommerce Kassel, 15.02.2014 web n sale GmbH Jan Philipp Peter Was bisher geschah Was bisher geschah oder: Die mobile Evolution früher : - Lokale Nutzung - Zuhause oder im Büro - Wenige

Mehr

CAS Webdesign und Webpublishing

CAS Webdesign und Webpublishing CAS Webdesign und Webpublishing Kurs 2: Fortgeschrittenes CSS Ausgabe 2014 Dozent Andi Keller andi@4eyes.ch 4eyes GmbH Falknerstrasse 52 4001 Basel +41 61 261 43 48 info@4eyes.ch CHE-112.759.842 MWST Seite

Mehr

Martin Fache (KIDS interactive) - Anforderungen an eine mobile/responsive Website Vortrag zum Seitenstark Fachtag

Martin Fache (KIDS interactive) - Anforderungen an eine mobile/responsive Website Vortrag zum Seitenstark Fachtag Agenda Entwicklung der Internet-fähigen Geräte Motivation für mobile Optimierung Lösungsansätze und Praxisbeispiele Im Jahr 2000 http://dag.wosc.edu/?gallery=wosc-computer-collection Im Jahr 2000 Webseite

Mehr

CSS Einführung & CSS Frameworks

CSS Einführung & CSS Frameworks CSS Einführung & CSS Frameworks Leif Singer leif.singer@inf.uni-hannover.de Seminar Aktuelle Software-Engineering-Praktiken für das World Wide Web 14.04.2010 Frage Anfragen von Kommilitonen: mit reinsetzen

Mehr

E-Mail Editor Vorlagen Programmier-Richtlinien

E-Mail Editor Vorlagen Programmier-Richtlinien E-Mail Editor Vorlagen Programmier-Richtlinien 1 Inhaltsverzeichnis 1. Einleitung... 3 2. Code erstellen für Vorlagen... 4 3. Code für mobile Vorlagen (Responsive Design)... 5 4. Editor Klassen (Tags)

Mehr

Typo3 eine Einführung für Redakteure

Typo3 eine Einführung für Redakteure Typo3 eine Einführung für Redakteure Autor: Patrick Moldenhauer (pm@smd gmbh.de) Stand: 28.11.2007 1) Einleitung 2) Das Backend a. Login b. Die Oberfläche c. Die wichtigsten Buttons 3) Grundlegendes a.

Mehr

BOSS 2 BSZ One Stop Search

BOSS 2 BSZ One Stop Search BOSS 2 BSZ One Stop Search 16. BSZ-Kolloquium in Stuttgart 22.09.2015 Cornelius Amzar 1 Responsive Design Smartphone, Tablet, Fernseher, PC, Laptop Benutzer erwarten einen gleichwertigen Dienst für alle

Mehr

Mobile Umfragen Responsive Design (Smartphone & Tablet)

Mobile Umfragen Responsive Design (Smartphone & Tablet) Mobile Umfragen Responsive Design ( & Tablet) Umfragen und Umfragedesign für mobile Endgräte mit der Umfragesoftware von easyfeedback. Inhaltsübersicht Account anlegen... 3 Mobile Umfragen (Responsive

Mehr

2. FAQ. 2.1 Headline Banner. Inhalt: 1.Installation. 1. Installation 2. FAQ 3. Einstellungen 4. Benötigen Sie weitere Hilfe?

2. FAQ. 2.1 Headline Banner. Inhalt: 1.Installation. 1. Installation 2. FAQ 3. Einstellungen 4. Benötigen Sie weitere Hilfe? Inhalt: 1. Installation 2. FAQ 3. Einstellungen 4. Benötigen Sie weitere Hilfe? 1.Installation Um das Electronics Theme zu installieren, gehen Sie in der Rubrik Design zum Template Store. Hier sehen Sie

Mehr

Webshop Booster bh 1/2016

Webshop Booster bh 1/2016 Schulungsteil Webshop Booster bh 1/2016 Integration von Content im WebShop Neue Schnittstellen und Funktionen > Accarda, MailChimp, Auto Suggest Einbindungen von Widgets 1 Integration von Content in Concerto

Mehr

VIDERICONCEPT REFERENZ BERICHT

VIDERICONCEPT REFERENZ BERICHT VIDERICONCEPT REFERENZ BERICHT BAUUNTERNEHMEN DIRK KAGE GMBH Redesign Webseite 2013-2014 Bauunternehmen Dirk Kage GmbH - Moin, moin! Das Unternehmen Im Überblick Kunde: Bauunternehmen Dirk Kage GmbH Branche:

Mehr

Meine erste Homepage - Beispiele

Meine erste Homepage - Beispiele Meine erste - Beispiele 1. Beispiel meine Willkommen auf meiner Befehle nicht über Hier ist ein Senior, der noch fit für's Internet ist. Probieren wir

Mehr

Teil I: Das Design. 1 Webdesign und Webstandards... 17. 2 Gestaltung und Layout... 51. 3 Typografie... 105. 4 Farbe 129. 5 Medien...

Teil I: Das Design. 1 Webdesign und Webstandards... 17. 2 Gestaltung und Layout... 51. 3 Typografie... 105. 4 Farbe 129. 5 Medien... Teil I: Das Design 1 Webdesign und Webstandards... 17 2 Gestaltung und Layout... 51 3 Typografie... 105 4 Farbe 129 5 Medien... 145 AUF EINEN BLICK 6 Werkzeugkasten... 159 Teil II: Die Technik 7 (X)HTML

Mehr

Dokumentation für Popup (lightbox)

Dokumentation für Popup (lightbox) Dokumentation für Popup (lightbox) Für das Popup muss eine kleine Anpassung im wpshopgermany Plugin vorgenommen werden und zwar in der Datei../wp-content/plugins/wpshopgermany/controllers/WarenkorbController.class.php

Mehr

Seiten gestalten mit CSS. Die wichtigsten HTML-Elemente. ,CSS gestaltet dynamisch die HTML-Elemente (Boxen)

Seiten gestalten mit CSS. Die wichtigsten HTML-Elemente. ,CSS gestaltet dynamisch die HTML-Elemente (Boxen) Wichtige Grundlagen Cascading Style Sheets, gestaltet dynamisch die HTML-Elemente (Boxen),Mit legen Sie Schriften und Farben einheitlich fest,über das Box-Modell layouten Sie die Seite,Navigation und Effekte

Mehr

SCREENDESIGN. www.typophonics.de. Eine Einführung in die Bereiche des Screendesigns

SCREENDESIGN. www.typophonics.de. Eine Einführung in die Bereiche des Screendesigns SCREENDESIGN www. Eine Einführung in die Bereiche des Screendesigns Inhalt Print versus Digital Begrifflichkeiten Auflösung Viewport Layout Responsive Design Textintegration Bildintegration Navigation

Mehr

sinnvoll? Wann ist der Einsatz von SharePoint als CMS How we did it: Realisierung einer Website mit SharePoint 2013

sinnvoll? Wann ist der Einsatz von SharePoint als CMS How we did it: Realisierung einer Website mit SharePoint 2013 Wann ist der Einsatz von SharePoint als CMS sinnvoll? How we did it: Realisierung einer Website mit SharePoint 2013 SharePoint Community, 12. Februar 2014 Alexander Däppen, Claudio Coray & Tobias Adam

Mehr

Eine Site für alle Geräte? 200grad GmbH & Co. KG 02.03.2014

Eine Site für alle Geräte? 200grad GmbH & Co. KG 02.03.2014 Eine Site für alle Geräte? 200grad GmbH & Co. KG 02.03.2014 Mit der zunehmenden Nutzung des Internets über mobile Endgeräte wie Smartphones und Tablet-PCs steigt die Notwendigkeit, den Internetauftritt

Mehr

Webdesign Grundlagen. Michael Kraft, M.A. WS 2012/2013 hawk@herrkraft.de

Webdesign Grundlagen. Michael Kraft, M.A. WS 2012/2013 hawk@herrkraft.de Webdesign Grundlagen Michael Kraft, M.A. WS 2012/2013 hawk@herrkraft.de Bürokratie Termine & Kursliste & http://hawk.herrkraft.de Wer bin ich? michael kraft ba ma 2006 2012 hawk tutor interaction digital

Mehr

Whitepaper Responsive Design

Whitepaper Responsive Design 76% Smartphone-Besitzer surfen täglich 69% Tablet-Besitzer surfen täglich 74% der Schweizer nutzen das Internet mobil Das mobile Internet ist mittlerweile fest in den Alltag der Schweizer integriert: 76

Mehr

Weil das Internet der Zukunft mobil ist 15. BVMW pecha kucha Nacht 12. Mai 2015

Weil das Internet der Zukunft mobil ist 15. BVMW pecha kucha Nacht 12. Mai 2015 RESPONSIVE WEBDESIGN Weil das Internet der Zukunft mobil ist 15. BVMW pecha kucha Nacht 12. Mai 2015 2000 2007 Apple iphone 2010 Apple ipad 2015 Smartphone Zombies 50% der Deutschen nutzten 2014 ein Smartphone

Mehr

Marcus Konitzer Trainer

Marcus Konitzer Trainer Marcus Konitzer Trainer.01 Kontaktdaten.02 Verfügbarkeit.03 Themen.04 Seminarbeispiele.05 Kurzprofil!.01 Kontaktdaten Training: mk@konitzer-training.de Agentur: mk@agentur-konitzer.de XING: https://www.xing.com/profile/marcus_konitzer

Mehr

YAML 4 das CSS-Framework

YAML 4 das CSS-Framework Jürgen Wolf Zusatzkapitel zum Buch»HTML5 und CSS3«YAML 4 das CSS-Framework Rheinwerk Verlag 2015 ISBN 978-3-8362-2885-5 YAML 4 das CSS-Framework 9 YAML Zusatzkapitel 4 das CSS-Framework Aus der Vielzahl

Mehr

FUNKTIONSBESCHREIBUNG. IFRAME EINBETTUNG VERSION: ab

FUNKTIONSBESCHREIBUNG. IFRAME EINBETTUNG VERSION: ab FUNKTIONSBESCHREIBUNG IFRAME EINBETTUNG VERSION: ab 2016.1.0 Inhaltsverzeichnis 1 Einleitung... 3 2 Schreibweise... 3 3 Zusätzliche Parameter... 4 3.1 Hintergrundfarbe... 4 3.2 Anzeige als Liste... 4 3.3

Mehr

Multimediale Webprogrammierung. Bilder als Content von Webseiten. Bilder in Webseiten. Bildformate. Bilder in Webseiten 15.06.2015.

Multimediale Webprogrammierung. Bilder als Content von Webseiten. Bilder in Webseiten. Bildformate. Bilder in Webseiten 15.06.2015. Multimediale Webprogrammierung 03.06.2015/1 03.06.2015/2 http://www.allwebdesigninfo.com/10-helpful-tools-for-responsive-web-design.html als Content von Webseiten Alle Webseiten, 15.05.2015 (etwa 484.000)

Mehr

Templates für CMSMadeSimple

Templates für CMSMadeSimple 1. EINLEITUNG Templates für CMSMadeSimple Original von Jan Czarnowski piratos@coftware.de modifiziert von Andreas Just cyberman@gmx.ch Templates für CMSMadeSimple sind zur Zeit nur spärlich vorhanden.

Mehr

Selektoren in CSS. HTML/CSS 21. November 2013 E1. 1. Beispiel: Kinder und Enkel

Selektoren in CSS. HTML/CSS 21. November 2013 E1. 1. Beispiel: Kinder und Enkel Selektoren in CSS 1. Beispiel: Kinder und Enkel universal Selektor body { font family: sans serif; color : #666; div { border:

Mehr

Inhaltsverzeichnis. Einleitung 1. Teil I Workshop Schritt für Schritt zum professionellen HTML-CSS-Design. 1 So geht der Workshop vor 6

Inhaltsverzeichnis. Einleitung 1. Teil I Workshop Schritt für Schritt zum professionellen HTML-CSS-Design. 1 So geht der Workshop vor 6 ix Einleitung 1 Teil I Workshop Schritt für Schritt zum professionellen HTML-CSS-Design 1 So geht der Workshop vor 6 2 Vorbereitungen 8 2.1 Anlegen einer sinnvollen Ordnerstruktur... 9 2.2 Das brauchen

Mehr

HTML5, CSS3 und JavaScript 1.8. Fortgeschrittene Entwicklung von Webseiten. Isolde Kommer. 1. Ausgabe, 2. Aktualisierung, Dezember 2013 HTML5F

HTML5, CSS3 und JavaScript 1.8. Fortgeschrittene Entwicklung von Webseiten. Isolde Kommer. 1. Ausgabe, 2. Aktualisierung, Dezember 2013 HTML5F HTML5, CSS3 und JavaScript 1.8 Isolde Kommer 1. Ausgabe, 2. Aktualisierung, Dezember 2013 Fortgeschrittene Entwicklung von Webseiten HTML5F 2 HTML5, CSS3 und JavaScript 1.8 - Fortgeschrittene Entwicklung

Mehr

NATURAL FOR AJAX RESPONSIVE WEB ANWENDUNGEN FÜR MOBILE ENDGERÄTE ROLAND FABICH NOVEMBER 2016

NATURAL FOR AJAX RESPONSIVE WEB ANWENDUNGEN FÜR MOBILE ENDGERÄTE ROLAND FABICH NOVEMBER 2016 NATURAL FOR AJAX RESPONSIVE WEB ANWENDUNGEN FÜR MOBILE ENDGERÄTE ROLAND FABICH NOVEMBER 2016 2015 Software AG. All rights reserved. For internal use only RESPONSIVE WEB ANWENDUNGEN MIT NJX ÜBERSICHT Live

Mehr

HTML5, CSS3 und JavaScript Webseiten entwickeln. Fortgeschrittene Anwendungen. Isolde Kommer. 2. Ausgabe, September 2015 ISBN 978-3-86249-441-5 HTML5F

HTML5, CSS3 und JavaScript Webseiten entwickeln. Fortgeschrittene Anwendungen. Isolde Kommer. 2. Ausgabe, September 2015 ISBN 978-3-86249-441-5 HTML5F HTML5, CSS3 und JavaScript Webseiten entwickeln Isolde Kommer Fortgeschrittene Anwendungen 2. Ausgabe, September 2015 HTML5F ISBN 978-3-86249-441-5 3 HTML5, CSS3 und JavaScript - Webseiten entwickeln 3.2

Mehr

Easy Mobile Homepage. Nützliche Tipps für die Nutzung der Software. 2011 Die Software ist urheberrechtlich geschützte Freeware - all rights reserved

Easy Mobile Homepage. Nützliche Tipps für die Nutzung der Software. 2011 Die Software ist urheberrechtlich geschützte Freeware - all rights reserved Easy Mobile Homepage Nützliche Tipps für die Nutzung der Software Danke für Ihr Interesse! Danke für Ihr Interesse an unserer neuen Software und wir freuen uns darüber, dass Sie die Tutorials angefordert

Mehr

Responsive Webdesign. Vortrag von Jens Kretschmann im Heinz Nixdorf Museums Forum

Responsive Webdesign. Vortrag von Jens Kretschmann im Heinz Nixdorf Museums Forum Responsive Webdesign Vortrag von Jens Kretschmann im Heinz Nixdorf Museums Forum Paderborn, 28.05.2013 Design ist nicht nur wie etwas aussieht oder sich anfühlt. Design ist wie es funktioniert. Steve Jobs

Mehr

Design anpassen eine kurze Einführung

Design anpassen eine kurze Einführung Design anpassen eine kurze Einführung Das gesamte Layout von Papoo basiert auf modernen CSS Layouts die vollständig ohne Layout Tabellen funktionieren. Um schnell vorhandene Designs anpassen zu können

Mehr

TIMERATE AG Tel 044 422 65 15 Falkenstrasse 26 timerate@timerate.ch 8008 Zürich www.timerate.ch. Joomla Templates Kursunterlagen

TIMERATE AG Tel 044 422 65 15 Falkenstrasse 26 timerate@timerate.ch 8008 Zürich www.timerate.ch. Joomla Templates Kursunterlagen TIMERATE AG Tel 044 422 65 15 Falkenstrasse 26 timerate@timerate.ch 8008 Zürich www.timerate.ch Joomla Templates Kursunterlagen Ordnerstruktur in Joomla Inhaltsverzeichnis Ordnerstruktur in Joomla... 3

Mehr

CSS. Cascading Style Sheets

CSS. Cascading Style Sheets CSS Cascading Style Sheets Was ist CSS? CSS... steht für Cascading Style Sheets... definiert die Darstellung (Farben, Fonts,... ) von (HTML) Dokumenten auf Web-Seiten.... spart viel Aufwand, da Format-Regeln

Mehr

Multimediatechnologie. Grid Web Design. Grid Web Design modular. Grid Web Design Beispiel. Grid Web Design Beispiel GRID DESIGN FIXED AND FLUID

Multimediatechnologie. Grid Web Design. Grid Web Design modular. Grid Web Design Beispiel. Grid Web Design Beispiel GRID DESIGN FIXED AND FLUID I GRID DESIGN FIXED AND FLUID 21.04.2015/1 21.04.2015/2 Grid Web Design Der Ansatz des Grid Designs ist es, die Webseite senkrecht in eine fixe Anzahl von Streifen mit Lücken zu teilen und diese dann je

Mehr

Designtrends - Heute & Morgen. Benjamin Rancourt

Designtrends - Heute & Morgen. Benjamin Rancourt Designtrends - Heute & Morgen Benjamin Rancourt Titelmasterformat durch Klicken bearbeiten Inhalt 1. Responsive Webdesign Evolution einer Revolution 2. One-Page-Design, Parallax-Scrolling, Mashup-Interfaces

Mehr

CREATIVE CLOUD WAS GIBT ES NEUES IM WEB-BEREICH?

CREATIVE CLOUD WAS GIBT ES NEUES IM WEB-BEREICH? CREATIVE CLOUD WAS GIBT ES NEUES IM WEB-BEREICH? ADOBE PHOTOSHOP CC ZEICHENFLÄCHEN Ähnlich wie in Illustrator kann man jetzt auch in Photoshop mit Zeichenflächen arbeiten. Über Zeichenflächen lassen sich

Mehr

Responsive Webdesign mit CSS3 & LESS

Responsive Webdesign mit CSS3 & LESS Frank L. Schad Responsive Webdesign mit CSS3 & LESS Art.-Nr. 126a047fc1ff Version 1.1.0 vom 15.4.2015 Autorisiertes Curriculum für das Webmasters Europe Ausbildungs- und Zertifizierungsprogramm 2015 by

Mehr

1. Bilder aus img Ordner importieren

1. Bilder aus img Ordner importieren Oxid Eshop Design - Modifikation Promoslider / Slideshow "Anythingslider" vom Azure Template integrieren im Basic Template: 1. Bilder aus img Ordner importieren 2. Slider Code in der _header.tpl einbinden

Mehr

Mobile Fundraising. Praxisbeispiele. Katja Prescher Fundraiserin, Marketing- und Kommunikationsexpertin. Mobile Fundraising Katja Prescher

Mobile Fundraising. Praxisbeispiele. Katja Prescher Fundraiserin, Marketing- und Kommunikationsexpertin. Mobile Fundraising Katja Prescher Mobile Fundraising Praxisbeispiele Katja Prescher Fundraiserin, Marketing- und Kommunikationsexpertin katja.prescher@sozialmarketing.de @sozialmarketing @SoZmark 5.. Bonus-Tipp Auf den folgenden Seiten

Mehr

Abgabetermin: , 23:59 Uhr

Abgabetermin: , 23:59 Uhr HTML 19.01.2016 Projektanforderungen Struktur: Zentrale (index-)seite Sinnvolle Ordnerstruktur von index.html aus verlinkte Seiten mit Querverweisen (insgesamt mindestens 3 Seiten) Elemente, die irgendwo

Mehr

Übung zur Vorlesung Digitale Medien. Doris Hausen Ludwig-Maximilians-Universität München Wintersemester 2011/2012

Übung zur Vorlesung Digitale Medien. Doris Hausen Ludwig-Maximilians-Universität München Wintersemester 2011/2012 Übung zur Vorlesung Digitale Medien Doris Hausen Ludwig-Maximilians-Universität München Wintersemester 2011/2012 1 Pfadangaben (1) Pfadangaben sind relevant für Bilder, Verweise, Medienobjekte per URL:

Mehr

WEBDESIGN QUO VADIS TRENDS, CONTAO UND MEHR WEBDESIGN QUO VADIS TRENDS, CONTAO UND MEHR

WEBDESIGN QUO VADIS TRENDS, CONTAO UND MEHR WEBDESIGN QUO VADIS TRENDS, CONTAO UND MEHR WEBDESIGN QUO VADIS TRENDS, CONTAO UND MEHR WEBDESIGN QUO VADIS TRENDS, CONTAO UND MEHR 1 / 53 jquery Frameworks UI Pattern lazy load Foundation RWD nginx Responsive images picture element Performance

Mehr

Webdesign-Trends. Digital News KW 18 Stand: April 2013

Webdesign-Trends. Digital News KW 18 Stand: April 2013 Webdesign-Trends Digital News KW 18 Stand: April 2013 Webdesign-Trends 2013 Das Jahr 2013 ist in vollem Gange und es ist eine gute Zeit, den Blick auf Webdesign-Trends zu werfen die sich zwar nicht an

Mehr

Klicken Sie auf den Reiter Newsfeed (1) in der oberen Menüleiste und wählen Sie dann links in der schmalen grauen Leiste Neuer Newsfeed (2) aus:

Klicken Sie auf den Reiter Newsfeed (1) in der oberen Menüleiste und wählen Sie dann links in der schmalen grauen Leiste Neuer Newsfeed (2) aus: Seite 1 Wenn Sie daran interessiert sind, aktuelle Informationen über Ihr Unternehmen auf Ihrer Internetpräsenz zu veröffentlichen, ist die Newsfeed-Funktion von meltwater news genau das richtige für Sie.

Mehr

IT-Zertifikat: Allgemeine Informationstechnologien II Übungsblatt jquery

IT-Zertifikat: Allgemeine Informationstechnologien II Übungsblatt jquery IT-Zertifikat: Allgemeine Informationstechnologien II Übungsblatt jquery Für unser Miniredaktionssystem, das wir im Laufe der nächsten Wochen / Monate entwickeln werden, verwenden wir eine der Website

Mehr

Digitale Medien. Übung zur Vorlesung. Vorlesung: Heinrich Hußmann Übung: Renate Häuslschmid

Digitale Medien. Übung zur Vorlesung. Vorlesung: Heinrich Hußmann Übung: Renate Häuslschmid Übung zur Vorlesung Digitale Medien Vorlesung: Heinrich Hußmann Übung: Renate Häuslschmid Wintersemester 2016/17 Cascading Style Sheets HTML beschreibt nur den logischen Aufbau eines Dokuments. Die Gestaltung

Mehr

Cascading Style Sheets

Cascading Style Sheets CSS Cascading Style Sheets von Carsten Euwens CSS Vortragsgliederung Grundlagen Bedeutung Wie binde ich CSS überhaupt ein Wie weise ich Styles den einzelnen Elementen zu Was kann man damit machen Text

Mehr

CMS Berlin Mediadaten 2015

CMS Berlin Mediadaten 2015 Der Virtual Market Place im neuen Design erreichen Sie Ihre Zielgruppe auf allen Endgeräten! Ob Desktop Computer, Tablet PC oder Smartphone: Der neue Virtual Market Place ist für alle Endgeräte optimiert

Mehr

Joomla! Templates. Professionelle Vorlagen mit CSS. Daniel Koch

Joomla! Templates. Professionelle Vorlagen mit CSS. Daniel Koch Joomla! Templates Professionelle Vorlagen mit CSS Daniel Koch Daniel Koch Joomla!-Templates Professionelle Vorlagen mit CSS Daniel Koch Joomla!-Templates. Professionelle Vorlagen mit CSS ISBN: 978-3-86802-325-1

Mehr

BEWERBERPROFILE. Erstellung einer Firmenwebseite Mustermann GmbH MUSTERPROFILE. Alle Studenten, Referenzen und Webseiten sind frei erfunden.

BEWERBERPROFILE. Erstellung einer Firmenwebseite Mustermann GmbH MUSTERPROFILE. Alle Studenten, Referenzen und Webseiten sind frei erfunden. BEWERBERPROFILE Erstellung einer Firmenwebseite Mustermann GmbH MUSTERPROFILE Alle Studenten, Referenzen und Webseiten sind frei erfunden. BEWERBERPROFIL NR. 1 Max Müller mueller@gmail.com ÜBER MAX: Max

Mehr