Schnuppertauchgang

C3D2-Web

Astro <astro@spaceboyz.net>

C3D2 Lightning Talks

2013-02-12

Was ist C3D2-Web?

Makefile + XSLT
Statischer Output

Check it out:

git clone http://www.c3d2.de/c3d2-web.git &&
cd c3d2-web &&
make -j3 &&
x-www-browser www/news.html

Dependencies: make, xsltproc, rsync

(Prä-)historisches (1/2)

(Prä-)historisches (2/2)

Historisches

Das war Typo3, wir wollten aber:
- Strukturierte Daten (XML) statt GUI
- Änderungen lokal ausprobieren
- Versionskontrolle statt Datenbank
- Sicherheit statt PHP
Start ungefähr 2005, online 2006
3665 Commits, 208 MB .git/
Credits:
- Neues Layout: turbo24prg
- Code: toidinamai
- Migration alter News: riot_dd
- Meiste Commits: sven

Ran an den Code!

Wichtigste Frage:

Where's the content?

c3d2-web % ls content/
datenspuren/
events.xml
navigation.xml
news/
old-site/
pages/
static/

Bauen!

make

Holen von chaosupdates.xml
Zusammenstellen von news.xml und calendar-summary.xml
XML mit XSLT nach build/
rsync von build/ und content/static/ nach www/

Navigation

content/navigation.xml

<?xml version="1.0" encoding="UTF-8"?>

<!--
When changing the position of these files in the navigation sidebar,
please adjust the #navigation li:nth-child(...) rules in the CSS file.
-->
<navigation>
  <file title="News">news</file>
  <file>whois</file>
  <file>treff</file>
  <file>themenabende</file>
  <file>events</file>
  <file>schule</file>

  <file>kontakt</file>
  <file>mailingliste</file>
  <file>muc</file>
  <file>wiki</file>

  <file>radio</file>
  <file>podcast</file>
  <file>pentamusic</file>

  <file>shop</file>
  <file>warez</file>
</navigation>

Pages (1/3)

```
content/pages/*.xml
```
HTML-ähnlicher, eingeschränkter Dialekt

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE page SYSTEM "http://www.c3d2.de/dtd/c3d2web.dtd">
<?xml-stylesheet type="text/xsl" href="../xsl/html.xsl" ?>

<page title="Whois" pagetitle="Whois c3d2?">
 <p title="Wohin? Woher? Weshalb? c3d2?">
  Der CCC Dresden (C3D2) ist eine Gruppe von Leuten, die Spaß am
  kreativen Umgang mit Informationstechnologie haben.
 </p>
[...]

Validiert mit xsd/c3d2web.xsd

Pages (2/3)

Dank XML ist auch XHTML erlaubt. Beispiel content/news/event-tpb-afk.xml:

<iframe xmlns="http://www.w3.org/1999/xhtml"
        src="http://www.youtube-nocookie.com/embed/KCAGb7oSwDs" 
        width="640" height="360" 
        frameborder="0" allowfullscreen="allowfullscreen">
</iframe>

Pages (2/3)

Spezielle Funktionalitäten in XSLT implementiert:

content/pages/events.xml

<news-list prefix="event-" details="event"/>

content/pages/themenabende.xml

<news-list prefix="ta-" details="event"/>

content/pages/radio.xml

<news-list prefix="pentaradio24-" details="resources-only"/>

content/pages/podcast.xml

<news-list prefix="pentacast-" details="resources-only"/>

News (1/2)

Spezialseite (deshalb file/@title in navigation.xml)
news.xml wird aus allen news/*.xml durch scripts/gen_news.xml.sh generiert

News (2/2)

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE item SYSTEM "http://www.c3d2.de/dtd/c3d2web.dtd">
<?xml-stylesheet type="text/xsl" href="../../xsl/html.xsl" ?>
<item title="Screening: TPB AFK" date="2013-02-07T23:45:00" author="Astro">
  <image title="TPB AFK">tpb-afk.jpg</image>
  <event>
    <start>2013-02-09T20:00:00</start>
    <location>Informatikfakultät TU Dresden, Raum E023</location>
  </event>

  <p>
    Sei es der Gründungsimpuls für Piratenparteien auf der ganzen
    Welt, Vorreiter für freien Kulturaustausch, oder auch Indikator
    für Zensurversuche in der westlichen Welt, die Piratenbucht ist
    eine Website, die Geschichte schrieb und weiterhin schreibt.
  </p>
  [...]
  <addendum>
    [...]
    <iframe xmlns="http://www.w3.org/1999/xhtml"
            src="http://www.youtube-nocookie.com/embed/KCAGb7oSwDs" 
            width="640" height="360" 
            frameborder="0" allowfullscreen="allowfullscreen">
    </iframe>
  </addendum>
</item>

Veröffentlichung von Multimedia

<resource title="pentaradio24 vom 22. Januar 2013"
          size="92334332"
          type="application/ogg"
          url="http://ftp.c3d2.de/pentaradio/pentaradio-2013-01-22.ogg">
  <alternative size="83985199"
               type="audio/mpeg"
               url="http://ftp.c3d2.de/pentaradio/pentaradio-2013-01-22.mp3"/>
  <alternative size="63039464"
               type="audio/opus"
               url="http://ftp.c3d2.de/pentaradio/pentaradio-2013-01-22.opus"/>
</resource>

<resource title="Pentabug" size="173518847" type="video/mp4"
	  url="http://ftp.c3d2.de/datenspuren/2012/5074_pentabug.mp4"
	  preview="http://ftp.c3d2.de/datenspuren/2012/5074_pentabug.gif"
	  poster="http://ftp.c3d2.de/datenspuren/2012/5074_pentabug.jpg"
	  details-link="http://datenspuren.de/2012/fahrplan/events/5074.de.html"
	  feedback-link="https://cccv.pentabarf.org/feedback/DS2012/event/5074.de.html">
  <alternative size="103679070" type="video/webm"
	       url="http://ftp.c3d2.de/datenspuren/2012/5074_pentabug.webm"/>
</resource>

Ausgewertet durch XSLT und Pentamedia.org
<audio>/<video>/Flash-Fallback werden erst nach Klick auf ▶ Play erzeugt (JavaScript)

Kalender (1/2)

XSLT kann nicht nur XML, sondern auch Text generieren

Beispiel Target ical.ics
Kalendereinträge kommen aus <event/> in:
- content/news/*.xml
- content/events.xml

Kalender (2/2)

Anzeige der nächsten fünf Events auf jeder Seite in der rechten Seitenleiste
Viel Logik in xsl/calendar.xsl generiert Target calendar.html
Hilighting des aktuellen Tages mit JavaScript
Bonus: Implementierung des Diskordischen Kalenders in xsl/ddate.xsl

Statisch und trotzdem interaktiv

Dynamische Inhalte:
- Kommentare von Pentamedia.org
- Torrents von Bitlove.org
JavaScript holt Daten mit AJAX
Cross-Origin Resource Sharing: enable-cors.org

Committing to C3D2-Web

SSH-Pubkey einem hive-Administrator geben
webbuildd ist ein LXC-Container in hive (KVM auf buddelkiste)

git rm origin &&
git remote add origin git@git.c3d2.de:c3d2-web.git

```
git add ... && git commit
```
```
git push
```
post-receive auf webbuildd aktualisiert Checkout und führt aus:
```
make export DESTDIR=/var/www
```
Ausserdem: Webhooks für Pentamedia.org und ⠞⠊⠛⠛⠑⠗

Mit Git-Hook ist Output für Client sichtbar

Committed to C3D2-Web

Ständige Entwicklung seit > 7 Jahren
Handling ist toll, hauptsächlich wegen git
Inhalte sind wichtiger