# TYPO3 Camp Berlin-Brandenburg 2024 [t3cb.de](https://www.t3cb.de/) | [twitter Impressionen](https://twitter.com/hashtag/T3CB?src=hashtag_click&f=live) 17.-19. Oktober 2024, Berlin-Kreuzberg im [bum.berlin](https://bum.berlin/) # Sessions - https://www.t3cb.de/programm/ - Live-Stream Tag 1: https://www.youtube.com/live/xVoFipUnaRY - Live-Stream Tag 2: https://www.youtube.com/live/_eyRYMvWDo8 ## Freitag ### Site package in TYPO3 v13 - [Site package Tutorial v13](https://docs.typo3.org/m/typo3/tutorial-sitepackage/main/en-us/Index.html) - [Site package example, source](https://github.com/TYPO3-Documentation/site_package) - [Site sets](https://docs.typo3.org/m/typo3/reference-coreapi/main/en-us/ApiOverview/SiteHandling/SiteSets.html) - [PAGEVIEW](https://docs.typo3.org/m/typo3/reference-typoscript/main/en-us/ContentObjects/Pageview/Index.html) ### Neue APIs in TYPO3 v13 - [Slides](https://typo3.slack.com/files/U6G9SK7DZ/F07SPUJLN3E/typo3_new_api_v13.pdf) - [Stream](https://www.youtube.com/live/xVoFipUnaRY?feature=shared&t=12648) ### Software-Qualität von Extensions automatisieren - [Stream](https://youtu.be/xVoFipUnaRY?t=114) - Speaker: [Oliver Klee](https://www.oliverklee.de/) - [Best Practices Team](https://typo3.org/community/teams/best-practices) - [Beispielprojekt](https://github.com/FriendsOfTYPO3/tea/) ### Shop - coding.ms GmbH, Thomas Deuling - [Ext Shop](https://extensions.typo3.org/extension/shop) - Bootstrap CSS als Basis - [Beispiel-Shop](https://www.mutter-erde-saaten.de/) ohne überschriebenes Template - Container definieren im Template - verschiedene Seiten Typen anlegen - Produktliste Plugin mit Infos, Filter definieren - Produkteinzelansicht: Pflichtfelder definieren (Liste und Einzelansicht können auf einer Seite sein) - Warenkorb - Plugin Checkout: hinzufügen - Startseitte: Listen Plugin - Start Produkte anlegen - diverse Varianten anlegen (Farbe, Größe, …) - Standard-Steuersatz - Steuersatz für verschiedene Länder - Produkttypen definieren (T-Shirts, Jacken, Downloads …) - definieren der Varianten (links Produkt, rechts Variante) - Datensatztypen sind jederzeit änderbar - damit soweit fertig für Produkte anlegen :) - Start Produkte anlegen - minimum Bestellwerte definierbar für verschiedene Bezahloptionen - Shop Pro: ermöglicht weitere Bezahloptionen Paypal, Klarna, … - Constanten nutzen für die Definition der Bestellprozesse (Versand-Email, Buttons, etc.) - PDF's werden über Fluid definiert - Logo, Adressdaten im Footer werden über ein Hintergrund PDF eingefügt - Produktpersonalisierungen möglich - verschiedene Preise für verschiedene Varianten möglich - individuelle Preise für weitere Länder - einfaches Lagermanagent, Rückrechnung bei Storno offener Issue - kein Multi-Currency - Rabatt-Aktionen (sehr rudimentär) auf Checkout-Arten, für Produktgruppen - automatische Zuweisung von BE-Usergruppen bei Bezahlung - verschiedene Versandarten nach Gewicht, global, sperrig - Bestellstatus noch nicht vorhanden - UPS Schnittstelle für Etiketten - Stripe Abo System für Buchung von Kursen oder ähnlichem, FE-User kann Abo auch stoppen #### Unterschiede zu anderen - Ext: [Card](https://extensions.typo3.org/extension/cart) (nur eine Persion) - Updates kommen langsam - PDF aktuell nicht dabei - Statistiken nur sehr gering - Ext: [Aimeos](https://extensions.typo3.org/extension/aimeos) - auch für kleinere Shops - konzipiert für größere Shops - Ext: [Shops](https://extensions.typo3.org/extension/shop) - fing mit einem Shop an, inzwischen deutlich ausgebaut #### weitere Extensions - https://www.coding.ms/typo3-extensions - Ext Poll - Ext: Portfolio? - openImmo #### Statistiken - Top10 geklickte Produkte, meist verkaufte Produkte, Umsatz - in Pro-Version höhere Detailierung - Rechnnung als XML kommt zu ### React Einführung (ohne headless Extension) - brandung GmbH, Stephan Jorek - erkennbar an viel Interaktivät - Beispiel: Diakonie Jobsuche - Rahmen: PLZ, Ort ind D. für Suche - Google-Places-Api liefert Geo-Koordinaten - Detailansichten werden mit Standard TYPO3 CE's ausgeliefert (vorteilhaft für Suchmaschinen die nicht mit einem Browser indizieren) - Detailseiten-Links werden in React erstellt - Ausliefernung von JSON Daten - Lastverteilung -> Verlagerung in den Browser - Limitierungen beim Hoster erfragen - existierende React-Komponenten für: - Google-Places-Api - Paging - Beispiel 2: Katastrophenhilfe fürs DRK – Karten - verschiedene Art von Datensätzen - muss / soll später nicht super bekannt werden (Skalierung) - Aufgabe - Datenmodelierung & Erfassung - selbsterklärendes Interface - Ladezeit/Datenmenge vs. Datendarstellungsperformence - flüssige Animationen der Karte - Zoom auf Länder oder Flächen - interaktives Hervorheben der Flächen - mobile Darstellung - |_> sehr komplexes Datenemodell - geschätzt 5 - 25mb Daten (2/3 Geo-Daten) - Rendering im HTML-Canvas (MapLibre – sorgt für sparsame Rechenleistung, die meisten verwenden SVG für Karten; MapLibre verwendet HTML-Canvas pixel basiert) - vorgerendertes Vektor-Kartenmaterial (MapTiler für farbliche Anpassungen möglich) - Karte muss nicht aktualisiert werden, kann aber - Lösung mobil: ist nicht notwendig, da Screen zu klein ##### Warum React? - Performance: Clientseitiges Rendern der Karte - Wartbarkeit - Wiederverwendbarkeit - existierende React-Komponenten für - Karte - CSS Animationen (z.B. Zahlen-Counter) ### Beispiel WWF Deutschland - interaktive Spendenkarte - neuer Einstieg in die Spendenbetragshöhe - soll für viele Theme (Meere, Plastik, Urwald, …) einsetzbar sein - als Kampagne einsetzbar (Spendenziel) #### Zielgruppen - june Spender - Themen-orientierte Spender - Anforderungen: - mobil & Desktop - Einsatz für viele Theme - felxible und optimale Unterleiung des auswählbaren Rasters - Datenmenge bis zu 2.000 x 1.000 – viel JSON - eingrenzte Flächenauswahl - im Urwald keine Flüsse - im Meer keine Inseln - Lösungen: - Pixelbasiert - React-Theming – erlaubt Redakteuren vollständige Konfiguration des Farbschemas und des verwendeten Bildmaterials, Auslieferung durch TYPO3 - Hexagon optimal für Rasterung (hexagonale Mathematik) - Lösung: Karten-Raster als Bit-Map erfassen, 5 Bits möglich - Koordinaten-Auswahl = Editor #### Warum React? - Clientseitiges Rendern - einmaliges Rendern wenn Kampagne abgeschlossen - Existierende React-Komponente ### Vertrauen in Teams und in Führung - Speaker: [Oliver Klee](https://www.oliverklee.de/) - [Folien](https://speakerdeck.com/oliverklee/vertrauen-in-teams-and-fuhrung-dd41320c-c67c-40e8-9829-749c42c6b961) - [Online-Crashkurs zu gewaltfreier Kommunikation](https://www.oliverklee.de/workshops/aktuelle-workshops/) ### Apache Solr: Past, Present and Future Folien: https://drive.google.com/file/d/1VrR8cbVyDkbB-aGY_ViN3bnQu4vxL-dN/view?usp=sharing Speaker: Rafael Kähm und Olivier Dobberkau Github: https://github.com/TYPO3-Solr/ext-solr ddev: https://github.com/TYPO3-Solr/solr-ddev-site Website: https://www.typo3-solr.com/ Bitte testet unsere aktuelle Alpha Version: https://packagist.org/packages/apache-solr-for-typo3/solr#13.0.0-alpha-1 ### Frag den SEO - dskom | Sven Deutschländer - Shopware 5 Upgrade auf 6 – verliert sein Ranking durch das Upgrade - Aufklärung der Kunden für Upgrade 1. Mehr Wahrnehmung 2. Mehr Vorteile 3. Mehr Kunden 4. Mehr Umsatz 5. Mehr Kundenbindung 6. Mehr Service - nach Möglichkeit im bestehenden System bleiben (siehe Relaunch) - aufpassen bei Argumentation für Relaunchs - wenn Seiten / Beiträge / Dokumente nicht mehr gesucht werden, können / sollten diese auch gelöscht werden - Goole beurteilt nicht relevante Inhalte irgendwann die Domain auch als nicht relevant - wenn man ein Archiv pflegt, sollten diese Inhalte auf "no-index" gesetzt werden - expliziter Hinweis auf SEO im Angebot, da es heutzutage für den Kunde selbstverständlich ist! - Google versucht zu verstehen, wer Experte ist – Content Schleudern, Arbitage-Modelle sollen vertrieben (Arbitage-Modelle werden aktiv von Google schlechter gerankt) - organische Suchergebnisse werden durch die visuelle Ausbreitung der Google Shopping-Produkte aus der View gedrängt - um zukünfitg sehr hoch gerankt zu werden, muss Content deutlich besser sein als das was KI genrieren kann - Verweildauer wichtiges Kriterium für Rankings durch Chrome - Inhalte müssen so gut sein, das nach dem Lesen die Suche erledigt ist - warum ist Google so aggressiv? TikTok – ist super durchsuchbar und liefert Filmchen als Antwort auf die gestellte Frage. - Bewegtbild ist mehr vertikal als horizontal! (Jugend kennt nur Bewegtbild-Internet) - klassische Optimierung bleibt weiterhin relevant; siehe 18 Punkte! - redirect - sorgt nicht für das Auffangen der alten URL's - Google trackt alle alten URL's - Google trackt alle neuen URL's - Google macht dann später einen Abgleich alt & neu - besser redirects auf Dokument Ebene - Breadcrumbs -> Schema.org verswenden - gute Idee in GSC - Unterkategorien auf Hauptmenüpunkte / Ordner anlegen - sinnvolle Link-Struktur erstellen; Zielseiten nicht zuweit weg von der Index! - ToDo in GSC - gecrawlt nicht indexiert – möglicherweise Fehler! (ab 5stelligen Fehlern vom Index ausschließen) - wenn als Fehler / rot markiert – fixen! - proaktives Beurteilen ab zu alten Zeitpunkten, dass die Inahlte auf no-index setzen ### Prototyping Integration - Hannes Lau - [Extension pti_twig](https://extensions.typo3.org/package/pti/pti-twig) - Proto-Typing - PHP Classen für Übersetzung der DB-Inhalte ### Spiel: Hindernisse in Teams beseitigen - Speaker: [Oliver Klee](https://www.oliverklee.de/) - [Website des EMPAMOS-Projektes](https://www.empamos.de/), das diese Methode entwickelt hat ## Samstag ### T3Monitoring TYPO3 Instanzen überwachen - Karsten Nowak / [undkonsorten](https://www.undkonsorten.com) - Ext [t3monitoring](https://extensions.typo3.org/extension/t3monitoring) - Check Möglichkeit für verwendete Extensions, TYPO3 Versionen - Achtung: Nicht verwechseln mit t3monitor! Das ist eine andere Extension. - t3monitoring_client auf der zu überwachenden Installation installieren - t3monitoring auf dem Host-System (lokales ddev System) - Extension (nicht die …_client) für v12 hat bei mir noch kleinere Probleme gezeigt, läuft aber an sich - list all - Kreisdiagramm fehlt aktuell noch (kann auch an mir liegen) - Secrets auslagern in .env Datei - Host-System kann ist unabhängig von der TYPO3 Version des Client-Systems - kann E-Mails über den Zustand versenden - kann über Scheduler automatisiert Infos abfragen - auf IP-Adressen einschränkbar - relativ einfach erweiterbar mittels eigener Extension. Beispiel: Überprüfung des Encryption Key, TYPO3 Context, etc… - Undkonsorten hat eine solche Extension gebaut, ist aktuell nicht veröffentlicht – Karsten anfragen - [Unterstützung an Georg](https://github.com/georgringer/t3monitoring) stellt Weiterentwicklung sicher! ### Plattform zum Führen von Teams - Speaker: [Oliver Klee](https://www.oliverklee.de/) - Slack-Channel fürs Projektteam: [#team-management-platform](https://app.slack.com/client/T024TUMLZ/C07TA84NR88) ### Newsletter mit TYPO3 - Karsten Nowak / [undkonsorten](https://www.undkonsorten.com) - gibt mittlerweile neue Tools. Seit direct_mail ist einfach viel passiert. - Slides mit einer Liste von uns genutzter [Tools rund um das Thema Newsletter](https://github.com/undkonsorten/newsletter-typo3camp) - dort gibt es auch die Links für [t3monitoring](https://github.com/undkonsorten/newsletter-typo3camp/blob/main/T3Monitoring.md) - Hauptsächliche Probleme bei Newsletter: Templating und Versand - Für Templating: [email_template](https://packagist.org/packages/undkonsorten/email-template) - Für den Versand: [cute_mailing](https://packagist.org/packages/undkonsorten/typo3-cute-mailing) - ist vor allen Dingen für den Versand - verschickt einfach eine TYPO3 Seite - wie die gebaut ist, ist völlig egal - kann HTML und Text Format verschicken - einfach zu konfigurieren über Page TS-Config - CuteMailing legt sich nicht auf eine Art von Empfängerliste/Empfägerdaten fest. Duch sogenannte "Connector-Extensions" jede Art von Empfängerliste andockbar. Auch externe Listen könnten so verwendet werden. - Beispiel für eine Connector-Extension: [cute_mailing_registeraddress](https://packagist.org/packages/undkonsorten/typo3-cute-mailing-registeraddress) - Beide genannten Extensions sind völlig unabhängig voneinander einsetzbar ### Datenbankabfragen mit recursive CTE reduzieren - Beispiel-SQL inkl. Erläuterungen aus der Live-DEMO: [rCTE SQL](https://github.com/ASchoenfeld-BHT/rCTE-example) - Präsentation als PDF ebenfalls im Git Repo: [Slides](https://github.com/ASchoenfeld-BHT/rCTE-example/blob/main/slides.pdf)