Kooperativer Bibliotheksverbund

UID:

Format: 524 Seiten : , Diagramme, Illustrationen.

Edition: 3., aktualisierte und erweiterte Auflage

ISBN: 978-3-8362-4578-4 , 3-8362-4578-7

Series Statement: Rheinwerk Computing

Note: Auf dem Cover: "Websites für alle Endgeräte entwickeln, Layout, Navigationen, Bilder und Videos, Schriften u.v.m., inkl. Barrierefreiheit und Performanceoptimierung"

Language: German

Subjects: Computer Science

Keywords: Responsive Webdesign

URL: Inhaltstext

URL: Inhaltsverzeichnis

URL: Inhaltsverzeichnis

URL: http://deposit.dnb.de/cgi-bin/dokserv?id=cbdd843ad61c4b30b9d85e6a1a007831&prov=M&dok_var=1&dok_ext=htm

URL: http://d-nb.info/1124015418/04

URL: http://deposit.dnb.de/cgi-bin/dokserv?id=cbdd843ad61c4b30b9d85e6a1a007831&prov=M&dok_var=1&dok_ext=htm

URL: http://d-nb.info/1124015418/04

URL: Inhaltstext

URL: Inhaltsverzeichnis

URL: Inhaltsverzeichnis

Author information: Laborenz, Kai ca. 20. Jh.

Author information: Ertel, Andrea ca. 20. Jh.

UID:

Format: 438 S. , zahlr. Ill., graph. Darst. , 1 DVD-ROM (12 cm) , 240 mm x 168 mm

Edition: 1. Aufl.

ISBN: 9783836225823 , 3836225824

Series Statement: Galileo Computing

Language: German

Subjects: Computer Science

Keywords: Responsive Webdesign ; DVD-ROM ; DVD-ROM

URL: Inhaltstext

URL: Ausführliche Beschreibung

URL: Inhaltsverzeichnis

Author information: Laborenz, Kai ca. 20. Jh.

Author information: Ertel, Andrea ca. 20. Jh.

UID:

Format: 489 S. , zahlr. Ill. , 240 mm x 168 mm

Edition: 2., aktualisierte Aufl.

ISBN: 3836232006 , 9783836232005

Series Statement: Galileo Computing

Additional Edition: Erscheint auch als Online-Ausgabe ISBN 978-3-8362-3201-2

Language: German

Subjects: Computer Science

Keywords: Responsive Webdesign

URL: Inhaltstext

URL: Ausführliche Beschreibung

URL: Inhaltsverzeichnis

Author information: Laborenz, Kai ca. 20. Jh.

Author information: Ertel, Andrea ca. 20. Jh.

UID:

Format: 1 online resource (527 pages)

Edition: 3

ISBN: 9783836245807

Note: Intro -- Vorwort -- 1 Denken in flexiblen Strukturen -- 1.1 Responsive Webdesign: Was bedeutet das eigentlich? -- 1.1.1 Veränderte Anforderungen an die Darstellung von Websites -- 1.1.2 Anpassungsfähige Websites versus Mobilversionen von Websites -- 1.1.3 Beispiele für anpassungsfähige Websites -- 1.2 Layouttypen, feste, fluide und flexible -- 1.2.1 Das feste Layout -- 1.2.2 Das fluide und das elastische Layout -- 1.2.3 Das adaptive Layout -- 1.2.4 Das responsive Layout -- 1.3 Flexible Raster - Gridsysteme -- 1.3.1 Anwendungsbeispiel: Fixes Raster in flexibles umrechnen -- 1.4 Layoutumbrüche - Breakpoints -- 1.4.1 Adaptives oder responsives Layout -- 1.5 Zusammenfassung -- 2 Schnelleinstieg: Responsive Umsetzung eines fixen Layouts -- 2.1 Die Ausgangslage: Ein grafischer Entwurf mit festen Abmessungen -- 2.2 Der erste Schritt: Feste Raster in flexible umrechnen -- 2.3 Der zweite Schritt zu mehr Flexibilität: Anpassungsfähige Inhalte -- 2.3.1 Exkurs: Flexible Bilder -- 2.4 Der dritte Schritt: Layouts mit Media Queries umschalten -- 2.4.1 Exkurs: Media Queries -- 2.5 Zusammenfassung -- 3 Die Schlüsseltechnologie Media Queries -- 3.1 Cascading Stylesheets (ein kurzer Rückblick) -- 3.1.1 Zuweisung von CSS-Eigenschaften -- 3.2 Medientyp (Media Type) -- 3.2.1 Medienabfrage für den Medientyp setzen -- 3.2.2 Medientypen in der Übersicht -- 3.3 Medieneigenschaften (Media Features) -- 3.3.1 Medieneigenschaften in der Übersicht -- 3.4 Media Queries schreiben -- 3.4.1 Komponenten eines Media Querys -- 3.4.2 Media Queries zuweisen -- 3.5 Viewports und Pixel -- 3.5.1 Der visuelle Viewport -- 3.5.2 Der Layout-Viewport auf mobilen Geräten -- 3.5.3 Gerätepixel und CSS-Pixel: Der »virtuelle« visuelle Viewport -- 3.5.4 Das Viewport-Metatag und seine Eigenschaften -- 3.5.5 Die @viewport-Anweisung in CSS -- 3.6 Media Queries in der Praxis , 3.6.1 Medieneigenschaft »width« -- 3.6.2 Media Queries in em -- 3.6.3 Medieneigenschaft »height« - vertikale Media Queries -- 3.6.4 Medieneigenschaft »orientation« -- 3.6.5 Medieneigenschaft »aspect-ratio« -- 3.6.6 Medieneigenschaften »resolution« und »device-pixel-ratio« -- 3.6.7 Medieneigenschaften »pointer« und »hover« -- 3.6.8 Browserunterstützung und Fallbacklösungen -- 3.7 Media-Query-Unterstützung mit JavaScript -- 3.7.1 Element Queries und Container Queries -- 3.7.2 Restive JS (rScript) für Geräteerkennungen -- 3.8 Serverseitige Geräte- und Feature-Erkennung -- 3.8.1 WURFL & -- Co. -- 3.8.2 RESS - das Beste von Client und Server kombiniert -- 3.8.3 Client Hints -- 3.9 Zusammenfassung -- 4 Ein responsiver Workflow -- 4.1 Der alte Prozess -- 4.2 Phase 1: Moodboards und Inhaltsplan -- 4.2.1 Moodboards -- 4.2.2 Inhalte strukturieren und hierarchisieren -- 4.2.3 Content-Prototypen -- 4.3 Phase 2: Style Tiles und Wireframes -- 4.3.1 Style Tiles -- 4.3.2 Mockups -- 4.4 Phase 3: Design im Browser -- 4.4.1 Frameworks und Website-Editoren als Design-Tools -- 4.4.2 Komponenten, Patterns und Atomic Design -- 4.5 Phase 4: Rinse and Repeat -- 4.5.1 Beziehen Sie Ihre Kunden in den Gesamtprozess mit ein -- 4.6 Das responsive Team -- 4.7 Dokumentation responsiver Designs -- 4.7.1 Dokumentation mit Living Styleguides -- 4.8 Zusammenfassung -- 5 Design und Typografie -- 5.1 Design follows Content -- 5.1.1 You cannot not communicate - kein Design ist auch ein Design -- 5.2 Design von innen nach außen - der Atomic-Design-Ansatz -- 5.2.1 Atomic Design anwenden mit Pattern Lab -- 5.3 Designanforderungen für responsive Sites -- 5.3.1 Does size matter - was machen Nutzer mit ihren Geräten? -- 5.3.2 Geräteübergreifendes Surfen -- 5.3.3 Size matters: Ziele für Touchevents -- 5.3.4 Es gibt kein Hover auf Hawaii, und ein Klick ist kein Touch , 5.3.5 Inaktives »:active« auf iOS -- 5.3.6 Handpositionen -- 5.3.7 Layoutwechsel bei Änderung der Orientierung -- 5.3.8 Schreiben ist mühsam: Formulare auf Smartphones -- 5.3.9 Mobile Inspiration und Best Pratice -- 5.4 Typografie (anpassungsfähiger Text) -- 5.4.1 Die Auswahl der Schriftart -- 5.4.2 Angaben für die Schriftgröße -- 5.4.3 Schriftgrößenwahrnehmung auf kleinen und großen Bildschirmen -- 5.4.4 Zeilenlänge und Durchschuss -- 5.4.5 Praxisbeispiel: Relative Schriftgrößen bezogen auf die Viewport-Breite -- 5.4.6 Praxisbeispiel: Mehrspaltensatz -- 5.4.7 Silbentrennung und Textbeschnitt -- 5.5 Zusammenfassung -- 6 Semantik und Barrierefreiheit -- 6.1 Prinzipien der Zugänglichkeit -- 6.1.1 Wahrnehmbarkeit -- 6.1.2 Bedienbarkeit -- 6.1.3 Verständlichkeit -- 6.1.4 Robustheit -- 6.2 Semantik durch HTML5 -- 6.2.1 Neue HTML-Elemente -- 6.2.2 HTML5-Formularattribute für mehr Semantik -- 6.3 Semantik durch WAI-ARIA-Rollen -- 6.4 Zusammenfassung -- 7 Responsive Layout-Patterns -- 7.1 Mobile First -- 7.1.1 Reduktion auf das Wesentliche ist die Devise -- 7.1.2 Mobile First - Progressive Enhancement für das Layout -- 7.1.3 Mobile First bedeutet auch Content First -- 7.2 Praxisbeispiel: Mobile First -- 7.2.1 Mobile First - los geht's! -- 7.2.2 Mockups für das Layout der Beispiel-Website -- 7.2.3 Basisversion: Smartphone-Ansicht -- 7.2.4 Setzen des Viewport-Metatags -- 7.3 Auswahl der Breakpoints -- 7.3.1 Haupt-Breakpoints -- 7.3.2 Anpassungs-Breakpoints -- 7.3.3 Vertikale Breakpoints -- 7.4 Praxisbeispiel: Ersten Breakpoint setzen (Tablets) -- 7.5 Layout-Patterns (Darstellungsmuster) für unterschiedliche Ausgabegeräte -- 7.5.1 Tiny Tweaks (kleine Optimierungen) -- 7.5.2 Mostly Fluid (großteils fließend) -- 7.5.3 Column Drop (abgesenkte Spalten) -- 7.5.4 Layout Shifter (Layoutverdreher) -- 7.5.5 Off-Canvas-Layout (außerhalb des Bildschirms) , 7.5.6 Footer-Navigation und Off-Canvas-Marginalie -- 7.5.7 Top-Off-Canvas-Menü und Off-Canvas-Marginalie -- 7.5.8 Vertikale und horizontale Off-Canvas-Panels -- 7.5.9 Zusammengefasste Off-Canvas-Elemente -- 7.5.10 Off-Canvas-Lösungen aus der Schublade -- 7.6 Praxisbeispiel: Weitere Breakpoints setzen (große Screens) -- 7.6.1 Kleine Desktopversion nach dem Konzept Layout Shifter -- 7.6.2 Große Desktopversion -- 7.7 Flexbox-Layout -- 7.7.1 Umsetzung des Praxisbeispiels als Flexbox-Layout -- 7.7.2 Praxisbeispiel: Flexbox-Layout Content Switch -- 7.8 Grid-Layouts (CSS3) -- 7.8.1 Umsetzung des Praxisbeispiels als CSS-Grid-Layout -- 7.9 Zusammenfassung -- 8 Frameworks für responsives Design -- 8.1 Eigene Vorlage oder fertige Frameworks verwenden? -- 8.1.1 Gridpak zum Erstellen von Rastern mit Media Queries -- 8.1.2 HTML5-Boilerplate und Initializr -- 8.2 Wie wählen Sie das richtige Framework aus? -- 8.3 Eine kurze Vorstellung responsiver Frameworks -- 8.3.1 Foundation -- 8.3.2 Bootstrap -- 8.3.3 PureCSS -- 8.3.4 Simple Grid -- 8.4 JavaScript-Bibliotheken -- 8.4.1 jQuery -- 8.4.2 Modernizr -- 8.5 Elegante Stylesheets mit Präprozessoren: SASS & -- Co. -- 8.6 Zusammenfassung -- 9 Navigationskonzepte -- 9.1 Was macht eine Navigation benutzerfreundlich? -- 9.2 Benutzerfreundliche Navigation für mobile Geräte -- 9.2.1 Freier Blick auf die Website -- 9.2.2 Ausreichend große Klickflächen für die Touchbedienung -- 9.2.3 Umgang mit Menüs mit mehreren Ebenen -- 9.2.4 Navigationstypen für mobile Geräte mit Touchscreen -- 9.3 Wenige Menüpunkte am oberen Rand -- 9.3.1 Praxisbeispiel: Mininavigation - wenige Menüpunkte am oberen Rand -- 9.4 Lange Menüs kompakt anordnen -- 9.4.1 Praxisbeispiel: Priority-Menü -- 9.5 Select-Menü -- 9.5.1 Praxisbeispiel: TinyNav - Select-Menü -- 9.6 Navigation per Anker am Ende des Seiteninhalts , 9.6.1 Praxisbeispiel: Footer-Navigation mit Anker -- 9.7 Toggle-Menü -- 9.7.1 Praxisbeispiel: Toggle-Menü mit dem Plug-in Responsive-Nav -- 9.8 Off-Canvas-Menü -- 9.8.1 Praxisbeispiel: Off-Canvas-Menü mit Pushy -- 9.8.2 Praxisbeispiel: Swipe-Menü mit Slideout.js -- 9.9 Multilevel-Menüs -- 9.9.1 Die native Einbindung von Multilevel-Menüs auf iOS und Android -- 9.9.2 Praxisbeispiel: Multilevel-Menü mit DoubleTabToGo.js -- 9.9.3 Praxisbeispiel: Multilevel-Menü mit Flexnav -- 9.9.4 Noch mehr Multilevel-Menüs … -- 9.10 Zusammenfassung -- 10 Flexible Bildelemente -- 10.1 Anpassungsfähige Bilder -- 10.1.1 Praxisbeispiel: Anpassungsfähiges Headerbild -- 10.1.2 Bilder ausschnittweise anzeigen -- 10.1.3 Praxisbeispiel: Bildausschnitt auf schmalen Screens -- 10.1.4 Flexible Bilder, die nicht über die ganze Rasterbreite gehen -- 10.1.5 Praxisbeispiel: Flexible Teaserboxen mit Bild und Text -- 10.2 Responsive Hintergrundbilder -- 10.2.1 Praxisbeispiel: Gekachelte Bitmap-Hintergrundmuster -- 10.2.2 Praxisbeispiel: Hintergrundmuster mit CSS3 erstellen -- 10.2.3 Praxisbeispiel: Hintergrundmuster mit SVG -- 10.2.4 Großflächige Hintergrundbilder -- 10.2.5 Praxisbeispiel: Website mit vollflächigen Hintergrundbildern -- 10.2.6 Praxisbeispiel: Vollflächige Hintergrundbilder in Teaserboxen -- 10.3 Responsive Icons -- 10.3.1 Vorbereitung für alle Praxisbeispiele zu responsiven Icons: Erstellung der Icon-Sets -- 10.3.2 Praxisbeispiel: Icons als einzelne CSS-Hintergrundbilder -- 10.3.3 Praxisbeispiel: Icons als CSS-Hintergrundbilder aus einer Sprite-Datei -- 10.3.4 Icon-Fonts -- 10.3.5 Praxisbeispiel: Responsive Icons als Icon-Font -- 10.3.6 Praxisbeispiel: Icon-Font mit Ligaturen -- 10.3.7 SVG-Icons (sind die beste Wahl) -- 10.3.8 Praxisbeispiel: Responsive Icons aus Inline-SVG-Sprite -- 10.3.9 Praxisbeispiel: Icons aus extern eingebundener SVG-Datei , 10.3.10 Praxisbeispiel: Icons aus externer SVG-Datei über CSS einfärben

Additional Edition: Print version: Ertel, Andrea Responsive Webdesign Bonn : Rheinwerk Verlag,c2017 ISBN 9783836245784

Keywords: Electronic books.

URL: https://ebookcentral.proquest.com/lib/th-brandenburg/detail.action?docID=6382474

UID:

Format: 793 S. Ill.

ISBN: 9783836245807

Content: "Für jeden, der mehr Flexibilität in das eigene Design-Denken bekommen möchte." - t3n "Responsive" ist heute eine Kernanforderung an jede Website. Doch mit passenden Breakpoints allein ist es nicht getan. Auch Typografie und Navigation müssen auf allen Endgeräten funktionieren. Für Profis heißt das: ständig weiterlernen, optimieren und neue Lösungen finden. Lernen Sie in diesem Praxisbuch, wie Sie anpassungsfähige Websites programmieren und gestalten - von Anfang an und auf dem aktuellsten Stand der Technik. Mit vielen Beispielen und Tipps für gute Layout- und Content-Strategien. Aus dem Inhalt: Media Queries und Viewports Design und Typografie Semantik und Barrierefreiheit Responsive Layout-Patterns Das passende Framework wählen Knackpunkt Navigation Flexible Inhaltselemente Device Testing / CSS-Regression Performance-Optimierung Galileo Press heißt jetzt Rheinwerk Verlag. Die Fachpresse zur Vorauflage: dotnetpro: "Anschaulich und verständlich. Zeigt alle wichtigen Aspekte. Sehr gut!"

Note: Andrea Ertel ist seit dem Jahr 2000 als Webentwicklerin tätig. Für die Kommunikationsagentur Sunbeam GmbH erstellte sie barrierearme, anpassungsfähige Websites und integrierte diese in das Content-Management-System TYPO3. Gemeinsam mit Ihren Kollegen Kai Laborenz, Thomas Wendt, Prakash Dussoye und Elmar Hinz schrieb sie 2005 "TYPO3 - Das Handbuch für Entwickler" und später "TYPO3 4.0 - Das Handbuch für Entwickler". Seit 2014 ist Andrea Ertel Senior Frontend Developerin beim E-Mail-Anbieter Posteo. Kai Laborenz ist im Web seit 1994 zu Hause. Er hat als Freelancer und mit der Agentur Sunbeam, die er mit zwei Freunden aufgebaut hat, Dutzende Online-Projekte umgesetzt. Bei Rheinwerk hat er die erfolgreichen Fachbücher "CSS - Das umfassende Handbuch" und "TYPO3 4.0" verfasst. Er war in der Fachjury zur "BIENE" der Aktion Mensch und hat selbst einen der Preise für barrierefreie Websites gewonnen. Mehr von ihm findet sich bei Google und (hin und wieder) in seinem Blog: http://laborenz.de

Language: German

URL: http://www.onleihe.de/static/content/rheinwerk/20170622/9783836245807/v9783836245807.pdf

URL: http://www.onleihe.de/static/images/rheinwerk/20170531/9783836245807/im9783836245807s.jpg

URL: http://voebb.onleihe.de/berlin/frontend/mediaInfo,51-0-547648456-100-0-0-0-0-0-0-0.html

Author information: Laborenz, Kai

UID:

Format: 489 Seiten , Ill., graph Darst. , 25 cm

Edition: 2., aktualisierte und erw. Aufl.

ISBN: 9783836232005 , 3836232006

Series Statement: Galileo computing 3200

Language: German

Keywords: Responsive Webdesign

URL: http://d-nb.info/1054672083/04

URL: http://deposit.dnb.de/cgi-bin/dokserv?id=4739864&prov=M&dok_var=1&dok_ext=htm

Author information: Laborenz, Kai