Kurze Übersicht zu Sinn und Zweck der Workspaces (Arbeitsumgebungen) in TYPO3. Der größte Teil der Session war allerdings eine Live-Demonstration. Vorgestellt beim TYPO3 Usergroup Treffen am 11.04.2013.
Kurze Zusammenfassung der Neuerungen in TYPO3 CMS 6. Bei weitem nicht so umfangreich wie die Folien von Patrick Lobacher, aber auf des wesentliche reduziert ;)
Präsentation zum ersten SketchApp Meetup in Deutschland.
https://www.meetup.com/de-DE/SketchApp/events/236118657/
1. Welcome & die Agentur SYZYGY - Jens Hoffmann
2. Warum Sketch die richtig Antwort ist! - Jens Hoffmann
3. Gratis Sketch Einsteiger-Fortgeschrittenen Tutorial - Lionel Wittstock, Christina Rupp
4. Unser Workflow rund um Sketch - Martin Engel
5. Next Meetup - Jens Hoffmann
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - WTC15die.agilen GmbH
Der klassische Designprozess kommt im RWD-Zeitalter an die Grenzen. Der RWD-Workflow fordert eine iterative und inkrementelle Herangehensweise an Design und das daraus entstehende Frontend, welches als Prototyp früh zu Verfügung stehen soll. Atomic Design ist ein sinnvoller und erprobter Ansatz, um dies zu realisieren. Der Vortrag geht dazu auf alle Aspekte von Atomic Design ausführlich ein und zeigt anhand eines Praxisbeispiels die konkrete Umsetzung.
Kurze Übersicht zu Sinn und Zweck der Workspaces (Arbeitsumgebungen) in TYPO3. Der größte Teil der Session war allerdings eine Live-Demonstration. Vorgestellt beim TYPO3 Usergroup Treffen am 11.04.2013.
Kurze Zusammenfassung der Neuerungen in TYPO3 CMS 6. Bei weitem nicht so umfangreich wie die Folien von Patrick Lobacher, aber auf des wesentliche reduziert ;)
Präsentation zum ersten SketchApp Meetup in Deutschland.
https://www.meetup.com/de-DE/SketchApp/events/236118657/
1. Welcome & die Agentur SYZYGY - Jens Hoffmann
2. Warum Sketch die richtig Antwort ist! - Jens Hoffmann
3. Gratis Sketch Einsteiger-Fortgeschrittenen Tutorial - Lionel Wittstock, Christina Rupp
4. Unser Workflow rund um Sketch - Martin Engel
5. Next Meetup - Jens Hoffmann
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - WTC15die.agilen GmbH
Der klassische Designprozess kommt im RWD-Zeitalter an die Grenzen. Der RWD-Workflow fordert eine iterative und inkrementelle Herangehensweise an Design und das daraus entstehende Frontend, welches als Prototyp früh zu Verfügung stehen soll. Atomic Design ist ein sinnvoller und erprobter Ansatz, um dies zu realisieren. Der Vortrag geht dazu auf alle Aspekte von Atomic Design ausführlich ein und zeigt anhand eines Praxisbeispiels die konkrete Umsetzung.
Das Open Source Enterprise CMS TYPO3 Neos hat im Dezember 2013 das Licht der Welt erblickt. Aber was leistet dieser Newcomer in einer Welt der etablierten Systeme und wie unterscheidet er sich von Mitbewerbern? Welche technischen Komponenten bilden das Fundament und was ist notwendig um möglichst einfach und schnell den Einstieg zu bekommen? Wo sind die Stärken und wo die Schwächen dieses innovativen Systems? Show-Cases bereits realisierter Websites und Portale runden den Vortrag ab. Für Entscheider und Entwickler gleichermaßen geeignet. - See more at: http://www.developer-week.de/Programm/Veranstaltung/(event)/14251#sthash.abVknRT9.dpuf
A/B Testing your TYPO3 website - T3CON14EUWEBFORMAT srl
The slides of our presentation at the 10th TYPO3 international conference T3CON14EU on how to test the User Experience of your TYPO3 website using Google Analytics Experiments
(TYPO3 Conference 2015 Amsterdam)
Obviously we are near the release of the best TYPO3 CMS LTS version ever in history. But our competitors are not sleeping and so the market is full of players which want to have some piece of the CMS-Cake as well. But how exactly do they perform? What features are beloved from the customers and why? Exciting insights and a summary of market needs will round up this enjoyable overview.
30 Jahre Scrum - alles agil, alles gut? Auf dem Weg zum digitalen Unternehme...die.agilen GmbH
Als 1986 das erste Mal der Begriff Scrum auftauchte, hatte noch niemand geahnt, zu welch tiefgreifender Veränderung dies in Unternehmen führen wird. Längst ist vieles agil geworden und auch die fortschreitende Digitalisierung scheint perfekt auf den Nährboden der Agilität abgestimmt - ist damit aber wirklich alles gut geworden oder gibt es auch Opfer der Agilisierung?
Präsentation von Roman Rackwitz (engaginglab) über die Grundsätze von Gamification und was dies mit OKR zu tun hat. Präsentiert wurde das beim 1. OKR Meetup Munich am 7.3.17
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...die.agilen GmbH
Der klassische Designprozess kommt im RWD-Zeitalter an die Grenzen. Der RWD-Workflow fordert eine iterative und inkrementelle Herangehensweise an Design und das daraus entstehende Frontend, das als Prototyp früh zu Verfügung stehen soll. Atomic Design ist ein sinnvoller und erprobter Ansatz, um dies zu realisieren. Der Vortrag geht dazu auf alle Aspekte von Atomic Design ausführlich ein und zeigt anhand eines Praxisbeispiels die konkrete Umsetzung.
Combining archetypes with FHIR in future-proof health information systemsyampeku
Dual model methodology can be applied to FHIR in order to get all the advantages that the archetypes provide.
This was presented on MIE2015. Full paper can be found here
(http://ebooks.iospress.nl/volumearticle/39320)
All transformations were made with LinkEHR Studio
(http://www.linkehr.com/)
Curating Cultures: Digital Technologies and Their Ramifications for Museums a...agnes.stauber
slides for the lecture given on November 17, 2010 in the "Curating Cultures" class of Prof. Polly Roberts at UCLA Department of World Arts and Cultures.
Eine kleine Einführung in die CSS-Erweiterung Sass.
Und wie man sich das Leben damit leichter macht. ;-)
Präsentation beim WP Meetup Berlin am 18. Dezember 2012
Das Open Source Enterprise CMS TYPO3 Neos hat im Dezember 2013 das Licht der Welt erblickt. Aber was leistet dieser Newcomer in einer Welt der etablierten Systeme und wie unterscheidet er sich von Mitbewerbern? Welche technischen Komponenten bilden das Fundament und was ist notwendig um möglichst einfach und schnell den Einstieg zu bekommen? Wo sind die Stärken und wo die Schwächen dieses innovativen Systems? Show-Cases bereits realisierter Websites und Portale runden den Vortrag ab. Für Entscheider und Entwickler gleichermaßen geeignet. - See more at: http://www.developer-week.de/Programm/Veranstaltung/(event)/14251#sthash.abVknRT9.dpuf
A/B Testing your TYPO3 website - T3CON14EUWEBFORMAT srl
The slides of our presentation at the 10th TYPO3 international conference T3CON14EU on how to test the User Experience of your TYPO3 website using Google Analytics Experiments
(TYPO3 Conference 2015 Amsterdam)
Obviously we are near the release of the best TYPO3 CMS LTS version ever in history. But our competitors are not sleeping and so the market is full of players which want to have some piece of the CMS-Cake as well. But how exactly do they perform? What features are beloved from the customers and why? Exciting insights and a summary of market needs will round up this enjoyable overview.
30 Jahre Scrum - alles agil, alles gut? Auf dem Weg zum digitalen Unternehme...die.agilen GmbH
Als 1986 das erste Mal der Begriff Scrum auftauchte, hatte noch niemand geahnt, zu welch tiefgreifender Veränderung dies in Unternehmen führen wird. Längst ist vieles agil geworden und auch die fortschreitende Digitalisierung scheint perfekt auf den Nährboden der Agilität abgestimmt - ist damit aber wirklich alles gut geworden oder gibt es auch Opfer der Agilisierung?
Präsentation von Roman Rackwitz (engaginglab) über die Grundsätze von Gamification und was dies mit OKR zu tun hat. Präsentiert wurde das beim 1. OKR Meetup Munich am 7.3.17
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...die.agilen GmbH
Der klassische Designprozess kommt im RWD-Zeitalter an die Grenzen. Der RWD-Workflow fordert eine iterative und inkrementelle Herangehensweise an Design und das daraus entstehende Frontend, das als Prototyp früh zu Verfügung stehen soll. Atomic Design ist ein sinnvoller und erprobter Ansatz, um dies zu realisieren. Der Vortrag geht dazu auf alle Aspekte von Atomic Design ausführlich ein und zeigt anhand eines Praxisbeispiels die konkrete Umsetzung.
Combining archetypes with FHIR in future-proof health information systemsyampeku
Dual model methodology can be applied to FHIR in order to get all the advantages that the archetypes provide.
This was presented on MIE2015. Full paper can be found here
(http://ebooks.iospress.nl/volumearticle/39320)
All transformations were made with LinkEHR Studio
(http://www.linkehr.com/)
Curating Cultures: Digital Technologies and Their Ramifications for Museums a...agnes.stauber
slides for the lecture given on November 17, 2010 in the "Curating Cultures" class of Prof. Polly Roberts at UCLA Department of World Arts and Cultures.
Eine kleine Einführung in die CSS-Erweiterung Sass.
Und wie man sich das Leben damit leichter macht. ;-)
Präsentation beim WP Meetup Berlin am 18. Dezember 2012
Responsive Web Design für Mobilgeräte mit Drupal Acquia
Der Anteil an mobilen Besuchern von Webseiten steigt stetig und immer rasanter.
Eine der Lösungen dafür nennt sich "Responsive Web Design" und wird von Drupal durch verschiedenste Base Themes unterstützt. Allerdings gibt es dabei einige wichtige Dinge zu beachten, da die Möglichkeiten für Responsive Web Design fast endlos sind.
Michael Schmid von Amazee Labs hat schon mehrere Responsive Webseiten geplant und umgesetzt und wird einige der Hürden und dessen Lösungen präsentieren.
• Was ist Responsive Web Design und was kann es?
• Übersicht über die verschiedensten Responsive Themes in Drupal 7
• Probleme und Learnings nach über 10 gebauten Drupal Responsive Web Design Webseiten
SASS und Compass bringen CSS und damit die Arbeitsweise unzähliger Front-End-Developer in eine neue Dimension. Hebt mit ab in eine bessere Welt! Dieser Vortrag wurde beim Barcamp in Braunschweig 2012 gehalten. An verschiedenen Stellen gibt es die Anweisung [Demo], die Live-Demos die dann kommen sollen, fehlen natürlich.
Es wird allerdings Screencasts geben auf rufzeichen-online.de, die diese Lücke füllen.
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)Nicolai Schwarz
Professionelles Arbeiten bedeutet auch, effektiv zu arbeiten. Effektivität bedeutet für Webentwickler, nicht immer das Rad neu erfinden zu wollen oder müssen. Nicolai Schwarz und Dirk Jesse zeigen Best Practices, die bei der Entwicklung eigener Seiten helfen, schneller und besser mit der Aufgabe fertig zu werden.
Vortrag auf der WebTech 2009 in Karlsruhe
Für viele Projekte braucht es lediglich einen Bruchteil der Funktionalität und des Codes sogenannter “Premium”-Themes oder Frameworks – denen dafür andere, wichtige Features oft fehlen. Um die Projektanforderungen und das gewünschte Design entsprechend umzusetzen, ist es dann deutlich sinnvoller, ein individuelles Theme zu entwickeln. Die Anwender erhalten so ein intuitives und übersichtliches System mit den Optionen, die sie wirklich brauchen. Und der Browser schlankeren Code ohne unnötigen Ballast. In diesem Talk geht es um folgende Themen:
Wozu überhaupt ein Theme selbst entwickeln? Performance, Sicherheit, Benutzerfreundlichkeit, Design
Anatomie eines Themes: Welche Dateien brauchen wir? Von einem leeren Verzeichnis ausgehend arbeiten wir uns bis zu einem Theme vor, das WP als solches akzeptiert.
Erweiterung durch Custom Post Types und Custom Fields
Tools, die den Workflow bei der Entwicklung erleichtern: grunt, git…
Ähnlich wie Sass & Compass - CSS für Fortgeschrittene (10)
Kommerzielle und Open Source Tools für die Videoproduktion und -postproduktion. Session auf dem Barcamp Bodensee 2018 #bcbs18
Links zu den in den Slides erwähnten Tools:
Camtasia: https://bit.ly/1OfivMC
OBS Studio: https://obsproject.com/
Adobe Premiere Pro: https://adobe.ly/2LABuSs
Magix: https://www.magix.com/de/
DaVinci Resolve: https://bit.ly/2A37FW4
KDEnlive: https://kdenlive.org/en/
VirtualDub: http://www.virtualdub.org/
Adobe Audition: https://adobe.ly/2sK9IvK
Audacity: https://www.audacityteam.org/
Handbrake: https://handbrake.fr/
2. Wer ist der Typ?
• Wolfgang Wagner
• Web Developer bei jweiland.net
• lebt in Friedrichshafen
• Gründungsmitglied der #t3see
• Bloggt auf http://wowa-webdesign.de über TYPO3,
Webdesign und alles mögliche
• Twitter: @wowawebdesign
TYPO3 Usergroup Bodensee #t3see
4. Sass
• Sass ist ein Precompiler für CSS
• Sass steht für „syntactically awesome style sheets“
• bietet eine einfachere und elegantere Syntax für CSS
TYPO3 Usergroup Bodensee #t3see
5. Sass installieren
• Benötigt Ruby
• Ruby ist bei Mac OS schon dabei
• unter Linux via Paket-Manager installieren
• für Windows: http://rubyinstaller.org
• dann im Terminal:
gem
install
sass
TYPO3 Usergroup Bodensee #t3see
7. SCSS Syntax
#main
{
color:
blue;
Jede .css Datei kann zu
font-‐size:
0.3em; einer .scss Datei gemacht
a
{ werden
font:
{
weight:
bold;
family:
serif;
}
&:hover
{
background-‐color:
#eee;
}
}
}
TYPO3 Usergroup Bodensee #t3see
8. Vorgehensweise
• Änderungen werden nur noch in .scss-Dateien vorgenommen
• Sass kompiliert aus den .scss-Dateien .css-Dateien
• Kompilierung manuell oder automatisch per
sass
-‐-‐watch
style.scss:style.css
• Überwachung eines Ordners mit mehreren Dateien per
sass
-‐-‐watch
stylesheets/scss:stylesheets/css
TYPO3 Usergroup Bodensee #t3see
9. Features
Nesting
/*
style.scss
*/ /*
style.css
*/
#navbar
{ #navbar
{
width:
80%;
width:
80%;
height:
23px;
height:
23px;
}
ul
{
list-‐style-‐type:
none;
}
#navbar
ul
{
list-‐style-‐type:
none;
}
li
{
float:
left; #navbar
li
{
float:
left;
}
a
{
font-‐weight:
bold;
}
}
} #navbar
li
a
{
font-‐weight:
bold;
}
TYPO3 Usergroup Bodensee #t3see
10. Features
Nesting mit Media Queries
/*
style.scss
*/ /*
style.css
*/
#h1
{ #h1
{
font-‐size:200%;}
font-‐size:200%;
a
{
color:
#000; #h1
a
{
color:
#000};
@media
only
screen
and
(max-‐width:320px){ @media
only
screen
and
(max-‐width:320px){
color:
#00f;
#h1
a
{
color:
#00f;
}
} }
}
}
TYPO3 Usergroup Bodensee #t3see
11. Features
Schlechtes Nesting Resultiert in
div#main
{ div#main
#sidebar
#navbar
{...}
#sidebar
{ div#main
#sidebar
#navbar
aside
div
ul
{...}
#navbar
{ div#main
#sidebar
#navbar
aside
div
ul
li
{...}
width:
80%; div#main
#sidebar
#navbar
aside
div
ul
li
a
{...}
height:
23px;
aside
{
div
{
ul
{
list-‐style-‐type:
none;
li
{ • Viel zu spezifische Selektoren
float:
left; • schlechte Performance
a
{
font-‐weight:
bold;
}
}
}
}
}
}
}
}
TYPO3 Usergroup Bodensee #t3see
13. Features
Variablen
• Variablen können im gesamten Stylesheet genutzt werden
• Variablennamen beginnen mit einem $ und werden wie normale
Eigenschaften deklariert
• Variabeln können Farben, Zahlen (mit Einheiten) oder Text enthalten
TYPO3 Usergroup Bodensee #t3see
16. Features
Farb-Manipulationen
/*
style.scss
*/
lighten(color,amount)
$navbar-‐width:
800px; Hellt eine Farbe um einen Prozentwert auf (amount)
$items:
5;
$navbar-‐color:
#ce4dd6;
darken(color,amount)
#navbar
{ Dunkelt eine Farbe ab
width:
$navbar-‐width;
background:
$navbar-‐color;
Es gibt noch weitere Funktionen (hue, saturate,
li
{ desaturate, grayscale, complement, invert ...)
float:
left;
width:
$navbar-‐width/$items
-‐
10px;
&:hover:
lighten($navbar-‐color,20%);
}
}
TYPO3 Usergroup Bodensee #t3see
17. Features
@if
/*
style.scss
*/
$theme:
dark;
body
{
@if
$theme
==
light
{
background:
#c7c7c7;
color:
#000;
}
@else
if
$theme
==
dark
{
background:
#222;
color:
#ddd;
}
}
TYPO3 Usergroup Bodensee #t3see
23. Features
@extend
• per @extend werden Eigenschaften einer Regel in eine andere übernommen
/*
style.scss
*/ /*
style.scss
*/
$buttontextcolor:#000; .button,
.button-‐confirm
{
$buttonbgrcolor:#ccc;
color:
black;
$green:
#090;
background:
#cccccc;
width:
8em;
.button
{
text-‐align:
center;
color:
$buttontextcolor;
padding:
.5em
1em;
background:
$buttonbgrcolor;
font-‐weight:
bold;
width:
8em; }
text-‐align:center;
padding:
.5em
1em; .button-‐confirm
{
font-‐weight:
bold;
background:
#009900;
}
width:
10em;
}
.button-‐confirm
{
@extend
.button;
background:
$green;
width:
10em;
}
TYPO3 Usergroup Bodensee #t3see
24. Features
Modularisierung
• .scss Dateien in viele kleine Dateien aufteilen
• Underscore im Dateinamen „verhindert“ Kompilierung
z.B. _mixins.scss, _variablen.scss
• Einbindung in Hauptdatei per @import
/*
style.scss
*/
@import
„global/variablen“;
@import
„global/mixins“; Beim Kompilieren werden alle Module
@import
„content/links“; in die style.css geschrieben
@import
„content/typography“;
@import
„layout/grid“;
@import
„navigation/mainnav“;
.
.
.
TYPO3 Usergroup Bodensee #t3see
25. Features
Kommentare
/*
style.scss
*/ /*
style.css
*/
/*
Das
ist
ein
normaler /*
Das
ist
ein
normaler
mehrzeilger
Kommentar
*/ mehrzeilger
Kommentar
*/
.page
{ .page
{
width:
$max-‐width; width:
80em;
} }
//
Das
ist
ein
einzeiliger
Kommentar
der header
{
//
in
der
CSS-‐Datei
nicht
zu
sehen
sein
wird background:
#334455;
header
{ }
background:
$headerbgrcolor;
}
TYPO3 Usergroup Bodensee #t3see
27. Compass
• Compass ist Framework um Sass zu erweitern
• bringt viele CSS3 - Mixins und Helper Functions mit
• erleichtert die Verwendung von CSS-Sprites
TYPO3 Usergroup Bodensee #t3see
29. Neues Compass Projekt
• Compass kann ein leeres Projekt mit grundlegender CSS-Ausstattung anlegen
compass
create
<myproject>
Erzeugt:
config.rb
sass/ie.scss
sass/print.scss
sass/screen.scss
stylesheets/ie.css
stylesheets/screen.css
• Manuell SCSS kompilieren: compass
compile
<myproject>
• Projekt überwachen: compass
watch
<myproject>
TYPO3 Usergroup Bodensee #t3see
30. Neues Compass Projekt
• Man kann auch eine bestehende Projektstruktur mit Compass
verbinden
cd
<myproject>
compass
create
-‐-‐bare
-‐-‐sass-‐dir
„sass“
-‐-‐css-‐dir
„css“
-‐-‐images-‐dir
„images“
-‐-‐javascript-‐dir
„js“
TYPO3 Usergroup Bodensee #t3see
31. Compass Konfiguration
• Die Datei config.rb enthält die Konfiguration des Projekts
#
Set
this
to
the
root
of
your
project
when
deployed:
http_path
=
"/"
css_dir
=
"stylesheets"
sass_dir
=
"sass"
images_dir
=
"images"
javascripts_dir
=
"javascripts"
#
You
can
select
your
preferred
output
style
here
(can
be
overridden
via
the
command
line):
#
output_style
=
:expanded
or
:nested
or
:compact
or
:compressed
#
To
enable
relative
paths
to
assets
via
compass
helper
functions.
Uncomment:
#
relative_assets
=
true
#
To
disable
debugging
comments
that
display
the
original
location
of
your
selectors.
Uncomment:
#
line_comments
=
false
• Bei Änderungen in der config.rb muss neu kompiliert werden mit
compass
compile
-‐-‐force
• Ausgabe für Production Environment
compass
compile
-‐-‐output-‐style
compressed
-‐-‐force
TYPO3 Usergroup Bodensee #t3see
32. Compass bietet verschiedene Module
• CSS3 - liefert Cross Browser kompatible CSS3 Mixins
• Typography - Mixins für allgemeine Typographie-Muster (Links, Listen
etc.)
• Utilities - Mixins für Styling Muster (Listen, Texte, Farben, Sprites,
Tabellen etc.)
• alle 3 Module untergliedern sich in weitere Submodule
TYPO3 Usergroup Bodensee #t3see
33. Compass in Sass-Dateien
verwenden
• @import
„compass“
• @import
„compass/css3“
• @import
„compass/typography/links“
• Nur die wirklich verwendeten Mixins werden importiert
• CSS wird also nicht unnötig aufgeblasen
TYPO3 Usergroup Bodensee #t3see
37. Helper Functions image-width() & image-height()
/*
style.scss
*/
$logofile:
"logo.png";
#logo
{
background:
url($logofile)
0
0
no-‐repeat;
width:
image-‐width($logofile);
height:
image-‐height($logofile);
}
Pfad zur Datei ist immer relativ zum Bilder-Verzeichnis des Projekts
(definiert in der config.rb)
TYPO3 Usergroup Bodensee #t3see
38. Helper Function inline-image()
/*
style.scss
*/ /*
style.css
*/
$logofile:
"logo.png"; #logo
{
#logo
{
background:
url('data:image/
background:
inline-‐image($logofile)
0
0
no-‐repeat; png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABUCAMAAADwIoiUAAAAY1BMVE
width:
image-‐width($logofile); X///+/v7/v7+//dwhkToR/.....kSuQmCC')
0
0
no-‐repeat;
height:
image-‐height($logofile);
width:
200px;
}
height:
84px;
}
• Bilddateien können base64-enkodiert direkt in der CSS-Datei platziert werden.
• ein HTTP-Request weniger
• Geeignet bei kleineren Bildern (Icons)
TYPO3 Usergroup Bodensee #t3see