Speaker: Sebastian Reiners
Je größer ein Web-Projekt wird, umso komplizierter und nervenaufreibender wird die Wartung und erst recht die Änderung des bestehenden CSS. Jeder der schon einmal zwei Wochen vor dem Live-Gang das Web-Frontend komplett umstellen durfte oder ein in die Jahre gekommenes (und entsprechend gewachsenes) Stylesheet überarbeiten sollte, wird wissen wovon hier die Rede ist.
In diesem Vortrag werden kleine und größere Tipps gegeben, wie man solchen Situationen begegnet, sie unter Kontrolle behält und bestenfalls von vorneherein vermeidet. Der Fokus wird dabei auf dem Aufbau wartbarer Stylesheets, der Nutzung von CSS-Frameworks wie Bootstrap, CSS-Preprocessing mittels Less und der Integration ins Build-Management liegen.
SASS und SCSS - CSS effektiv schreibenMartin Huber
UPDATE: die Version 2.0 des Vortrags inkl. Compass: http://de.slideshare.net/huabanet/sassscss-und-compass-css-effektiver-schreiben-20
Mein Vortrag "SASS und SCSS - CSS effektiv schreiben" vom TYPO3 Camp 2011
Content Design und UI Architektur für Multiscreen-Projekte (Usability Profess...Wolfram Nagel
Methoden und Regelwerke für die Konzeption, Gestaltung und Umsetzung von Layout, Inhalt und Workflows im Baukasten-Prinzip.
Digitale Inhalte können heute überall erscheinen. Wir nutzen täglich digitale Services auf verschiedensten Geräten und Medien. Informationen fließen in alle Kanäle. Multiscreen ist inzwischen digitale Realität geworden. Um ein einheitliches Nutzungserlebnis zu erschaffen, benötigt es einen durchgängigen Informationsfluss. Voraussetzung dafür sind ein zentraler Knotenpunkt für Inhalte, ein System zur Definition von UI Elementen und Regeln wann welche Inhalte in welcher Kombination wo und wie angezeigt werden. Damit dies technisch gelöst werden kann, ist es erforderlich Inhalte, User Interfaces und Workflows nach einem jeweils ähnlichen Muster modular und strukturiert zu planen und aufzubauen – vergleichbar mit den Bausteinen in einem Baukastensystem.
Das Thema wurde in ähnlicher Form auch auf dem World Usability Day in München präsentiert. Die Folien hier wurden am 13.11.2015 aktualisiert.
Mehr zu diesem Content Design und UI Architektur und allgemein zum Thema Multiscreen findet sich auch in meinem neuen (englischen) Buch "Multiscreen UX Design": http://www.msxbook.com/enbook
Webseiten sind keine Gesamtkunstwerke, sondern Zusammenstellungen einzelner Module. Dieser Vortrag von der Jax 2013 ergründet, wie man vorgeht, um sinnvolle und pflegbare M;odule zu erschaffen. Dabei wird vor allem Wert auf das CSS gelegt. Das CSS wird dank Sass ebenso modular, wie das HTML.
Vortrag auf der Webtech 2012. Eine Webseite besteht aus vielen einzelnen Modulen, die alle als eigenes Universum betrachtet werden können. CSS-Präprozessoren helfen bei der effektiven Behandlung der Module. Prototyping im Browser und ein neuer Workflow werden dadurch einfacher.
Wie funktioniert ein System zur Erfassung, Verwaltung, regelbasierten Ausgabe und Darstellung von Informationen in unterschiedlichsten Zielkanälen?
Der Artikel zum Thema: http://www.msxbook.com/CUIMUP16txt
Zusammenfassung: Inhalte und User Interfaces lassen sich nach einem jeweils ähnlichen Muster modular und strukturiert planen und zusammenbauen — vergleichbar mit den Bausteinen in einem Baukastensystem. Inhalt durchläuft von der Entstehung bis zur Rezeption in verschiedensten Kanälen grundsätzlich drei Stufen: Erfassung, Verwaltung und Ausgabe. An den beiden Übergängen muss jeweils ein Mapping stattfinden. Zum einen müssen Inhalte zur definierten Inhaltsstruktur passen (Inhalt Struktur Mapping). Zum anderen müssen die einzelnen Bausteine der strukturierten Inhalte auf die Ausgabe-Bausteine zur Darstellung in verschiedenen Zielkanälen gemappt werden (UI Mapping). Das Baukasten-Prinzip und die methodische Herangehensweise lassen sich mit Hilfe von intelligenter Software unterstützen. Wolfram Nagel (Head of UX / SETU GmbH) stellt in dem Vortrag hilfreiche und in der Praxis bewährte Prinzipien, Muster, Methoden und Erkenntnisse vor.
Speaker: Sebastian Reiners
Je größer ein Web-Projekt wird, umso komplizierter und nervenaufreibender wird die Wartung und erst recht die Änderung des bestehenden CSS. Jeder der schon einmal zwei Wochen vor dem Live-Gang das Web-Frontend komplett umstellen durfte oder ein in die Jahre gekommenes (und entsprechend gewachsenes) Stylesheet überarbeiten sollte, wird wissen wovon hier die Rede ist.
In diesem Vortrag werden kleine und größere Tipps gegeben, wie man solchen Situationen begegnet, sie unter Kontrolle behält und bestenfalls von vorneherein vermeidet. Der Fokus wird dabei auf dem Aufbau wartbarer Stylesheets, der Nutzung von CSS-Frameworks wie Bootstrap, CSS-Preprocessing mittels Less und der Integration ins Build-Management liegen.
SASS und SCSS - CSS effektiv schreibenMartin Huber
UPDATE: die Version 2.0 des Vortrags inkl. Compass: http://de.slideshare.net/huabanet/sassscss-und-compass-css-effektiver-schreiben-20
Mein Vortrag "SASS und SCSS - CSS effektiv schreiben" vom TYPO3 Camp 2011
Content Design und UI Architektur für Multiscreen-Projekte (Usability Profess...Wolfram Nagel
Methoden und Regelwerke für die Konzeption, Gestaltung und Umsetzung von Layout, Inhalt und Workflows im Baukasten-Prinzip.
Digitale Inhalte können heute überall erscheinen. Wir nutzen täglich digitale Services auf verschiedensten Geräten und Medien. Informationen fließen in alle Kanäle. Multiscreen ist inzwischen digitale Realität geworden. Um ein einheitliches Nutzungserlebnis zu erschaffen, benötigt es einen durchgängigen Informationsfluss. Voraussetzung dafür sind ein zentraler Knotenpunkt für Inhalte, ein System zur Definition von UI Elementen und Regeln wann welche Inhalte in welcher Kombination wo und wie angezeigt werden. Damit dies technisch gelöst werden kann, ist es erforderlich Inhalte, User Interfaces und Workflows nach einem jeweils ähnlichen Muster modular und strukturiert zu planen und aufzubauen – vergleichbar mit den Bausteinen in einem Baukastensystem.
Das Thema wurde in ähnlicher Form auch auf dem World Usability Day in München präsentiert. Die Folien hier wurden am 13.11.2015 aktualisiert.
Mehr zu diesem Content Design und UI Architektur und allgemein zum Thema Multiscreen findet sich auch in meinem neuen (englischen) Buch "Multiscreen UX Design": http://www.msxbook.com/enbook
Webseiten sind keine Gesamtkunstwerke, sondern Zusammenstellungen einzelner Module. Dieser Vortrag von der Jax 2013 ergründet, wie man vorgeht, um sinnvolle und pflegbare M;odule zu erschaffen. Dabei wird vor allem Wert auf das CSS gelegt. Das CSS wird dank Sass ebenso modular, wie das HTML.
Vortrag auf der Webtech 2012. Eine Webseite besteht aus vielen einzelnen Modulen, die alle als eigenes Universum betrachtet werden können. CSS-Präprozessoren helfen bei der effektiven Behandlung der Module. Prototyping im Browser und ein neuer Workflow werden dadurch einfacher.
Wie funktioniert ein System zur Erfassung, Verwaltung, regelbasierten Ausgabe und Darstellung von Informationen in unterschiedlichsten Zielkanälen?
Der Artikel zum Thema: http://www.msxbook.com/CUIMUP16txt
Zusammenfassung: Inhalte und User Interfaces lassen sich nach einem jeweils ähnlichen Muster modular und strukturiert planen und zusammenbauen — vergleichbar mit den Bausteinen in einem Baukastensystem. Inhalt durchläuft von der Entstehung bis zur Rezeption in verschiedensten Kanälen grundsätzlich drei Stufen: Erfassung, Verwaltung und Ausgabe. An den beiden Übergängen muss jeweils ein Mapping stattfinden. Zum einen müssen Inhalte zur definierten Inhaltsstruktur passen (Inhalt Struktur Mapping). Zum anderen müssen die einzelnen Bausteine der strukturierten Inhalte auf die Ausgabe-Bausteine zur Darstellung in verschiedenen Zielkanälen gemappt werden (UI Mapping). Das Baukasten-Prinzip und die methodische Herangehensweise lassen sich mit Hilfe von intelligenter Software unterstützen. Wolfram Nagel (Head of UX / SETU GmbH) stellt in dem Vortrag hilfreiche und in der Praxis bewährte Prinzipien, Muster, Methoden und Erkenntnisse vor.
Build wireframes and prototypes in real HTML and CSS with the help of Bootstrap and become a "Coding UX Designer". Those are the slides form 2014's IA Konferenz in Berlin.
Pattern Libraries als Schnittstelle zwischen Design & DevelopmentMatthias Feit
Pattern Libraries sitzen genau an der Schnittstelle von Kreativen, Entwicklern und Informationsarchitekten und geben allen Beteiligten eine gemeinsame Plattform. Als zentrale Referenz stellen Sie verbindliche Informationen über die Struktur und das Styling aller verwendeten Elemente zu Verfügung.
Du wolltest immer schon einmal dein eigenes WordPress Theme aufbauen und möchtest zahlreiche neue Kenntnisse für die Gutenberg Theme Entwicklung gewinnen? In diesem Workshop lernst du von der Pike aus, welche technischen Aspekte berücksichtigen solltest und wie du den WordPress Editor „Gutenberg“ für dein Theme perfekt optimierst. Dabei lernst du auch das WordPress Template System kennen und erfährst, wie du WordPress nach deinen Wünschen anpassen kannst.
Dieser Vortrag von der SEO Campixx 2019 befasst sich mit der effektiven Erfassung, Verwaltung und Optimierung großer URL-Inventare.
Das Ziel: Weniger irrelevante URLs, gezieltere Optimierung der übrigen URLs, um höhere und mehr Rankings bei Google & Co, mehr Übersicht und erfolgreichere Optimierungsschleifen im Website-Team und dadurch ein besseres Kosten/Nutzen-Verhältnis für das Unternehmen zu erreichen.
Eico Schweins ist Online Marketing-Berater und Coach (https://be-visionary.de). Zuvor war er als Senior Online Marketing Consultant bei Turbine Kreuzberg GmbH und Head of PR und Kommunikation bei Performics (früher: AKM3 GmbH) aktiv. Als Dozent lehrt er Online Marketing an der Universität Münster. Eico hat in den letzten Jahren v.a. mittelständische und Großunternehmen dabei unterstützt, ihr Online Marketing aufzubauen und dessen Effektivität zu steigern.
Entwurfsmuster sind bewährte Lösungsschablonen für wiederkehrende Entwurfsprobleme in der Softwareentwicklung. Diese Entwurfsmuster können auch in ABAP eingesetzt werden.
In diesem Webinar haben wir einen Einblick in die Entwurfsmuster gegeben und anhand von 3 Praxisbeispielen deren Anwendung in ABAP veranschaulicht.
Sören Krasel, Consultant für e-Learning und Mediengestaltung bei der Daimler AG, spricht auf dem Confluence & JIRA Community Day am 20. September 2012 in Frankfurt/Main zum Thema "Wissensmanagement @MPS".
Mehr Informationen zum CCD 2012 gibt es in unserem Techblog: http://www.communardo.de/home/?s=ccd2012
Mythos und Wahrheit: Wikis für die Technische Dokumentation at tekom-Regional...K15t
Foliensatz zu Martin Häberle's Präsentation "Mythos und Wahrheit: Wikis für die Technische Dokumentation" bei der tekom Regionalgruppe Stuttgart am 30. April 2014
Slidedeck of Martin Häberle's presentation about Wikis for Technical Documentation at the tekom Regionalgruppentreffen Stuttgart, April 30th 2014
See http://www.tekom.de/ueber-uns/regionalgruppen/termine.html?tx_tekomwebforum_webforumtermin[uid]=8225&tx_tekomwebforum_webforumtermin[action]=show&tx_tekomwebforum_webforumtermin[controller]=WebforumTermin&cHash=506c752271f2ece081efa125e626ed9b for further details about the event (German).
A brief introduction to the OOP concepts, Software Design Principles and Design Patterns. The presentation shows how to refactor C# code with applying some design principles and patterns to implement loose coupling
Design Pattern Libraries, Aufzucht und PflegeWolf Brüning
Die Präsentation als Artikel: http://www.produktbezogen.de/bauanleitung-pattern-library-1/
An english version is available here: http://de.slideshare.net/WolfBruening/how-to-build-the-perfect-pattern-libraryy
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...Andreas Wissel
Mit den stetig wachsenden Möglichkeiten, die Cross-Platform-Anwendungen bieten, wachsen auch die Anforderungen an deren Design. Skalierbarkeit, Flexibilität und Wandelbarkeit gehören zu den Grundprinzipien eines modernen User-Interfaces. Andreas Wissel und Christian Liebel erarbeiten mit Ihnen in diesem Workshop anhand von Praxisbeispielen einen robusten Workflow. Mit Storybook und Angular lassen sich so isolierte, test- und wartbare Komponenten im Handumdrehen umsetzen. Ihre Designer und Entwickler werden es lieben.
Präsentation zur Vorbereitung auf die Prüfung zum TYPO3 CMS Certified Editor (TCCE) auf dem TYPO3camp RheinRuhr, Kamp-Lintfort, 05.11.2023
Tipps zum Lernen und für die Prüfung, allgemeine Themen (Browser, CMS, TYPO3, Frontend, Backend, SEO, Urheberrecht, Datenschutz, Zugänglichkeit/Barrierefreiheit), wichtige Bereiche und Funktionen im TYPO3-Backend
Darstellungen der Änderungen im PageRenderer, TypoScript und CSS Styled Content Ausgabe im Zuge der Anpassungen für ein besseres und barrierefreieres Rendering von Standard-Inhalten in TYPO3 4.7.
Ab TYPO3 version 4.7 gibt CSS Styled Content im Falle von HTML5 als Frontend-Doktype spezielle HTML5 Ausgabe aus, die in Hinblick auf einen barrierearmen Quellcode optimiert wurde. Die Details zu den Änderungen werden im einzelnen vorgestellt.
Build wireframes and prototypes in real HTML and CSS with the help of Bootstrap and become a "Coding UX Designer". Those are the slides form 2014's IA Konferenz in Berlin.
Pattern Libraries als Schnittstelle zwischen Design & DevelopmentMatthias Feit
Pattern Libraries sitzen genau an der Schnittstelle von Kreativen, Entwicklern und Informationsarchitekten und geben allen Beteiligten eine gemeinsame Plattform. Als zentrale Referenz stellen Sie verbindliche Informationen über die Struktur und das Styling aller verwendeten Elemente zu Verfügung.
Du wolltest immer schon einmal dein eigenes WordPress Theme aufbauen und möchtest zahlreiche neue Kenntnisse für die Gutenberg Theme Entwicklung gewinnen? In diesem Workshop lernst du von der Pike aus, welche technischen Aspekte berücksichtigen solltest und wie du den WordPress Editor „Gutenberg“ für dein Theme perfekt optimierst. Dabei lernst du auch das WordPress Template System kennen und erfährst, wie du WordPress nach deinen Wünschen anpassen kannst.
Dieser Vortrag von der SEO Campixx 2019 befasst sich mit der effektiven Erfassung, Verwaltung und Optimierung großer URL-Inventare.
Das Ziel: Weniger irrelevante URLs, gezieltere Optimierung der übrigen URLs, um höhere und mehr Rankings bei Google & Co, mehr Übersicht und erfolgreichere Optimierungsschleifen im Website-Team und dadurch ein besseres Kosten/Nutzen-Verhältnis für das Unternehmen zu erreichen.
Eico Schweins ist Online Marketing-Berater und Coach (https://be-visionary.de). Zuvor war er als Senior Online Marketing Consultant bei Turbine Kreuzberg GmbH und Head of PR und Kommunikation bei Performics (früher: AKM3 GmbH) aktiv. Als Dozent lehrt er Online Marketing an der Universität Münster. Eico hat in den letzten Jahren v.a. mittelständische und Großunternehmen dabei unterstützt, ihr Online Marketing aufzubauen und dessen Effektivität zu steigern.
Entwurfsmuster sind bewährte Lösungsschablonen für wiederkehrende Entwurfsprobleme in der Softwareentwicklung. Diese Entwurfsmuster können auch in ABAP eingesetzt werden.
In diesem Webinar haben wir einen Einblick in die Entwurfsmuster gegeben und anhand von 3 Praxisbeispielen deren Anwendung in ABAP veranschaulicht.
Sören Krasel, Consultant für e-Learning und Mediengestaltung bei der Daimler AG, spricht auf dem Confluence & JIRA Community Day am 20. September 2012 in Frankfurt/Main zum Thema "Wissensmanagement @MPS".
Mehr Informationen zum CCD 2012 gibt es in unserem Techblog: http://www.communardo.de/home/?s=ccd2012
Mythos und Wahrheit: Wikis für die Technische Dokumentation at tekom-Regional...K15t
Foliensatz zu Martin Häberle's Präsentation "Mythos und Wahrheit: Wikis für die Technische Dokumentation" bei der tekom Regionalgruppe Stuttgart am 30. April 2014
Slidedeck of Martin Häberle's presentation about Wikis for Technical Documentation at the tekom Regionalgruppentreffen Stuttgart, April 30th 2014
See http://www.tekom.de/ueber-uns/regionalgruppen/termine.html?tx_tekomwebforum_webforumtermin[uid]=8225&tx_tekomwebforum_webforumtermin[action]=show&tx_tekomwebforum_webforumtermin[controller]=WebforumTermin&cHash=506c752271f2ece081efa125e626ed9b for further details about the event (German).
A brief introduction to the OOP concepts, Software Design Principles and Design Patterns. The presentation shows how to refactor C# code with applying some design principles and patterns to implement loose coupling
Design Pattern Libraries, Aufzucht und PflegeWolf Brüning
Die Präsentation als Artikel: http://www.produktbezogen.de/bauanleitung-pattern-library-1/
An english version is available here: http://de.slideshare.net/WolfBruening/how-to-build-the-perfect-pattern-libraryy
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...Andreas Wissel
Mit den stetig wachsenden Möglichkeiten, die Cross-Platform-Anwendungen bieten, wachsen auch die Anforderungen an deren Design. Skalierbarkeit, Flexibilität und Wandelbarkeit gehören zu den Grundprinzipien eines modernen User-Interfaces. Andreas Wissel und Christian Liebel erarbeiten mit Ihnen in diesem Workshop anhand von Praxisbeispielen einen robusten Workflow. Mit Storybook und Angular lassen sich so isolierte, test- und wartbare Komponenten im Handumdrehen umsetzen. Ihre Designer und Entwickler werden es lieben.
Präsentation zur Vorbereitung auf die Prüfung zum TYPO3 CMS Certified Editor (TCCE) auf dem TYPO3camp RheinRuhr, Kamp-Lintfort, 05.11.2023
Tipps zum Lernen und für die Prüfung, allgemeine Themen (Browser, CMS, TYPO3, Frontend, Backend, SEO, Urheberrecht, Datenschutz, Zugänglichkeit/Barrierefreiheit), wichtige Bereiche und Funktionen im TYPO3-Backend
Darstellungen der Änderungen im PageRenderer, TypoScript und CSS Styled Content Ausgabe im Zuge der Anpassungen für ein besseres und barrierefreieres Rendering von Standard-Inhalten in TYPO3 4.7.
Ab TYPO3 version 4.7 gibt CSS Styled Content im Falle von HTML5 als Frontend-Doktype spezielle HTML5 Ausgabe aus, die in Hinblick auf einen barrierearmen Quellcode optimiert wurde. Die Details zu den Änderungen werden im einzelnen vorgestellt.
2. Ausgangslage(n)
• Seiten- und inhaltorientiertes Programmieren
• Programmierung von Inseln
• Vermischung von Struktur, Design und Inhalt
• „Es muss schnell gehen, also mache ich es (mir) einfach“
• „Kenn ich nicht, ess ich nicht!“
• Individueller Code-Stil macht unentbehrlich
2
2
3. Auswirkung(en)
• CSS Dateien wachsen linear mit neuen HTML-Inhalten
• Fehlende Flexibilität durch On-Top Prinzip
• Wiederverwendbarkeit von Quelltext ist nicht gegeben
• Hoher initialer Aufwand bei verteilter Pflege im Team
• Fragiler Code
• Keine Code Reviews möglich, ø Qualitätskontrolle
• Betriebswirtschaftliche Ineffizienz
3
3
4. Was wir wollen...
• Wenig Quelltext
• Robusten Quelltext
• Intuitiv begreifbarer Quelltext
• Überprüfbaren Quelltext
• Wiederverwendbaren Quelltext
• Skalierbaren Quelltext
• Semantik. Semantik. Ach ja. Sematik ;-)
4
4
10. Über OOCSS
• Projekt von Nicole Sullivan
• OOCSS == Objektorientiertes CSS
• Angelehnt an die Paradigmen der OO-Programmierung
• OOCSS !== OOP
• Framework zum Testen auf GitHub Projektseite
• Nutzt Infrastruktur der YUI Library (Grids, Reset Styles)
10
10
11. Was ist OOCSS?
OOCSS ist ein Konzeptansatz in der HTML/CSS
Programmierung und basiert auf dem Verständnis,
Seitenelemente als voneinander unabhängige
Einheiten zu verstehen.
Diese Einheiten werden in OOCSS als Objekte
bezeichnet.
11
11
20. Beispiel 1: Box (HTML)
<div class="mod">
<h3>Neue Gummibärchen</h3>
<p>Für die Schulklassen unter uns, gibt es
unsere Gummibärchen auch als Meterware.</p>
<ul class=“arrowlist>
<li>Garantiert geschmacklos</li>
<li>Direkt aus China</li>
</ul>
<p><a class=“btnStyle“ href="#">Jetzt
bestellen</a></p>
</div>
20
20
27. Ja, bitte...
• Stelle dir eine Bibliothek der wichtigsten Komponenten
zusammen. Tue dieses als ersten Schritt.
• Inhalt bedingt die Höhe, Strukturelemente die Breite
• Minimiere Selektoren
• Erweitere Module durch multiple Klassen
• Achte auch Wiederverwendung!
• Achte auch Konsistenz
27
27