https://next-cryptool-org-rsa.vercel.app/_next/static/chunks/pages…site-completely-renewed-1a1de44230761fa5.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[44392],{37108:(e,n,r)=>{(window.__NEXT_P=window.__NEXT_P||[]).push(["/de/posts/cryptool-website-completely-renewed",function(){return r(93498)}])},71173:(e,n,r)=>{"use strict";r.d(n,{A:()=>l});var t=r(37876),i=r(39180),s=r(87979),a=r(61083);function l(e){let{remarkPlugins:n=[],children:r,...l}=e;return(0,t.jsx)(i.oz,{rehypePlugins:[s.A,...n],components:a.o,...l,children:r})}},83292:(e,n,r)=>{"use strict";r.d(n,{A:()=>j});var t=r(37876),i=r(14232),s=r(41227),a=r(5477),l=r(64808),o=r(25612),d=r(74591),u=r(71545),h=r(68705),c=r(72613),g=r(9725),m=r(26670),f=r(57129),b=r(71173),p=r(30911);let w=e=>e.toString().normalize("NFD").replace(/[\u0300-\u036f]/g,"").toLowerCase().trim().replace(/\s+/g,"-").replace(/[^\w-]+/g,"").replace(/--+/g,"-"),x={en:{close:"Close"},de:{close:"Schlie\xdfen"}};function j(e){let{images:n=[],imagePath:r="",...j}=e,k=x[(0,p.Ay)()],[y,S]=(0,i.useState)(0),v=n[y],{open:z,onOpen:C,onClose:D}=(0,s.j)(),T=(0,i.useRef)(),W=(0,i.useRef)(),P=(0,t.jsxs)(a.s,{gap:2,alignItems:"center",children:[(0,t.jsxs)(l.L,{mr:3,children:[y+1,"/",n.length]}),(0,t.jsx)(o.$,{onClick:()=>S((y-1+n.length)%n.length),ref:T,children:(0,t.jsx)(m.QVr,{})}),(0,t.jsx)(o.$,{onClick:()=>S((y+1)%n.length),ref:W,children:(0,t.jsx)(m.Z0P,{})}),(0,t.jsxs)(o.$,{colorPalette:"red",onClick:D,children:[(0,t.jsx)(m.V2x,{}),"\xa0",k.close]})]});function A(e){var n,r;"ArrowRight"===e.key&&(null==(n=W.current)||n.click()),"ArrowLeft"===e.key&&(null==(r=T.current)||r.click())}return(0,i.useEffect)(()=>(window.addEventListener("keydown",A),()=>window.removeEventListener("keydown",A)),[]),(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(d.x,{templateColumns:{base:"1fr",sm:"1fr 1fr",md:"1fr 1fr 1fr",lg:"1fr 1fr 1fr 1fr",xl:"1fr 1fr 1fr 1fr 1fr"},gap:5,alignItems:"center",justifyItems:"center",...j,children:n.map((e,n)=>(0,t.jsx)(u.E,{children:(0,t.jsx)(g.m,{content:e.title,children:(0,t.jsx)(h._,{src:r+(e.thumbnail||e.image),alt:e.title,fit:"cover",onClick:()=>{S(n),C()},rounded:"md",_hover:{boxShadow:"outline",cursor:"pointer"}})})},"thumbnail_"+n))}),(0,t.jsxs)(f.A,{open:z,onClose:D,title:v.title,footer:P,full:!1,children:[(0,t.jsx)("style",{children:"\n        @media (orientation: landscape) {\n          #img-gallery-flexbox-".concat(w(v.image)," {\n            flex-direction: column;\n          }\n        }\n        @media (orientation: portrait) {\n          #img-gallery-flexbox-").concat(w(v.image)," {\n            flex-direction: column-reverse;\n          }\n        }\n        ")}),(0,t.jsxs)(a.s,{id:"img-gallery-flexbox-"+w(v.image),gap:6,children:[!!v.text&&(0,t.jsx)(c.a,{children:(0,t.jsx)(b.A,{children:v.text})}),!!z&&(0,t.jsx)(h._,{src:r+v.image,alt:v.title})]})]})]})}},93498:(e,n,r)=>{"use strict";r.r(n),r.d(n,{__N_SSG:()=>a,default:()=>d,meta:()=>l});var t=r(37876),i=r(91668),s=r(83292),a=!0;let l={title:"CrypTool-Website rundum erneuert",date:"2020-10-30 11:43:00 +02:00",categories:"ctp, news",keywords:"cryptool-portal jekyll website rebuild",imagePath:"/media/post-contents/cryptool-portal-renewed/",images:[{title:"CrypTool-Website 2003 (nur f\xfcr CT1, noch kein Portal)",image:"cryptool-website-2003.png"},{title:"CrypTool-Portal 2008 (von nun an CT1, CT2, JCT und CTO)",image:"cryptool-portal-2008.png"},{title:"CrypTool-Portal 2016 (umfassend erneuert auf Joomla und Bootstrap 3)",image:"cryptool-portal-2016.png"},{title:"CrypTool-Portal 2020 (zuletzt erneuert auf Jekyll und Bootstrap 4)",image:"cryptool-portal-2020.png"}]};function o(e){let n={a:"a",h2:"h2",h3:"h3",h4:"h4",hr:"hr",li:"li",ol:"ol",p:"p",section:"section",strong:"strong",sup:"sup",...(0,i.R)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(n.p,{children:["Im Laufe des Jahres 2020 wurde das ",(0,t.jsx)(n.a,{href:"/de",children:"CrypTool-Portal"})," erneut umfassend erneuert. Die Website unter ",(0,t.jsx)(n.a,{href:"/de",children:"www.cryptool.org"})," war urspr\xfcnglich 2003 f\xfcr ",(0,t.jsx)(n.a,{href:"/de/ct1",children:"CrypTool 1"})," erstellt worden und wurde mit dem Dazukommen von ",(0,t.jsx)(n.a,{href:"/de/ct2",children:"CrypTool 2"})," und ",(0,t.jsx)(n.a,{href:"/de/jct",children:"JCrypTool"}),' 2008 zum "CrypTool-Portal" umgebaut. 2009 wurde es um ',(0,t.jsx)(n.a,{href:"/de/cto",children:"CrypTool-Online"})," erweitert."]}),"\n",(0,t.jsx)(s.A,{images:e.images,imagePath:e.imagePath}),"\n",(0,t.jsx)(n.h3,{children:"Das bisherige System"}),"\n",(0,t.jsxs)(n.p,{children:["Die letzte umfassende Erneuerung fand 2016 statt. Seitdem wurde die Website mit dem Content Management System (CMS) ",(0,t.jsx)(n.a,{href:"https://www.joomla.org",children:"Joomla"})," betrieben. F\xfcr das ",(0,t.jsx)("abbr",{title:"die grafische Oberfl\xe4che, die Sie gerade sehen",children:"Frontend der Website"})," wurden die Bibliotheken Bootstrap 3 und jQuery verwendet."]}),"\n",(0,t.jsxs)(n.p,{children:["Ein CMS ist eine Software, die in einem ",(0,t.jsx)("abbr",{title:"Computer oder Software der/die Websites bereitstellt",children:"Webserver"})," eingerichtet wird, um die Inhalte einer Website zu verwalten. Danach werden alle Verwaltungsaufgaben vom System \xfcbernommen."]}),"\n",(0,t.jsxs)(n.p,{children:["Die Benutzung von Joomla war f\xfcr die Autoren der Inhalte sehr simpel, da sie diese einfach in einem grafischen ",(0,t.jsx)("abbr",{title:"What You See Is What You Get",children:"WYSIWYG"}),"-Editor bearbeiten und direkt auf der Website betrachten konnten. F\xfcr Administratoren bedeutete sie aber einen gewissen Pflege-Aufwand, da regelm\xe4\xdfig Updates installiert werden m\xfcssen (z.B. bei Sicherheitspatches oder neuen bzw. verbesserten Features)."]}),"\n",(0,t.jsxs)(n.p,{children:["Die Inhalte der Website wurden von Joomla in einer Datenbank verwaltet und die Seiten daraus auf Anfrage erzeugt

1: Wenn Sie eine Seite des CrypTool-Portals aufgerufen haben, wurde diese im Hintergrund von Joomla auf dem Webserver live f\xfcr Sie erzeugt",(0,t.jsx)(n.sup,{children:(0,t.jsx)(n.a,{href:"#user-content-fn-generate_content",id:"user-content-fnref-generate_content","data-footnote-ref":!0,"aria-describedby":"footnote-label",children:"1"})})," und dann an Ihren Browser ausgeliefert. Das brauchte etwas Zeit und verlangsamte die Ladezeit der Website somit. Joomla selbst ben\xf6tigte einen Datenbankserver, was die Komplexit\xe4t des Systems erh\xf6ht hat."]}),"\n",(0,t.jsx)(n.p,{children:"Daher wurde ein System mit geringerer Total-Cost-of-Ownership und Ladezeit gesucht ..."}),"\n",(0,t.jsx)(n.p,{children:"\xa0"}),"\n",(0,t.jsx)(n.h3,{children:"Neues Backend-System"}),"\n",(0,t.jsx)(n.p,{children:'Eine M\xf6glichkeit dazu ist, die Website im Vorfeld zu generieren und bereits fertige HTML-Dateien auszuliefern. Solche Technologien werden "Static-Site-Generatoren" genannt. Das geht allerdings nur, wenn die ausgelieferten Inhalte der Seiten "statisch" sind (sich also nicht zur Laufzeit \xe4ndern). Dynamische Codeausf\xfchrung im Client bleibt mit JavaScript aber m\xf6glich. Beim CrypTool-Portal ist diese Voraussetzung gegeben.'}),"\n",(0,t.jsxs)(n.p,{children:["Static-Site-Generatoren gibt es viele. F\xfcr das CrypTool-Portal wurde ",(0,t.jsx)(n.a,{href:"https://jekyllrb.com",children:"Jekyll"})," ausgew\xe4hlt. Jekyll ist simpel (ohne viel Schnick-Schnack) und auf Websites mit Blog-Artikeln ausgelegt, so wie das CrypTool-Portal. Jekyll ist \xfcbrigens (wie Joomla auch) vollst\xe4ndig Open Source."]}),"\n",(0,t.jsx)(n.h4,{children:"Workflow des neuen Systems"}),"\n",(0,t.jsx)(n.p,{children:"Die Daten des vorherigen CrypTool-Portals wurden aus der Joomla-Datenbank extrahiert und im Rahmen der Erneuerung ebenfalls \xfcberarbeitet. Sie werden nun in einem Git-Repository gehalten, zusammen mit den Projekt-Dateien zur Generierung. Bei \xc4nderungen im Repository wird die Website vom Server automatisch neu daraus erzeugt und im Webserver-Verzeichnis gespeichert. Wenn Sie nun eine Seite des CrypTool-Portals aufrufen, zeigen Sie einfach eine unver\xe4nderte HTML-Datei von der Festplatte des Servers an."}),"\n",(0,t.jsxs)(n.p,{children:["Die Aktualisierung auf dieses Vorgehen bietet einige Vorteile: Da nur noch vorerzeugte (statische) Dateien bereitgestellt werden (statt sie durch dynamische Code-Ausf\xfchrung live zu erzeugen), wurde die ",(0,t.jsx)(n.strong,{children:"Sicherheit der Website erh\xf6ht"})," und die ",(0,t.jsx)(n.strong,{children:"Ladegeschwindigkeit verbessert"}),". Da es keine CMS-Software mehr gibt, die aktuell gehalten werden muss, wurde der ",(0,t.jsx)(n.strong,{children:"Administrationsaufwand verringert"}),". Da die Daten direkt im Repository gehalten werden, wird kein Datenbankserver mehr ben\xf6tigt, was die ",(0,t.jsx)(n.strong,{children:"Komplexit\xe4t des Systems verringert"}),"."]}),"\n",(0,t.jsx)(n.h3,{children:"Neue Frontend-Oberfl\xe4che"}),"\n",(0,t.jsxs)(n.p,{children:["Zus\xe4tzlich zum Hintergrund-System wurde auch die Frontend-Oberfl\xe4che der Website erneuert: Bootstrap 3 wurde auf ",(0,t.jsx)(n.a,{href:"https://getbootstrap.com/docs/4.5",children:"Bootstrap 4"})," aktualisiert und das Layout der Seite mit dessen erneuerten Komponenten redesigned. Dadurch ist die Website auch responsive (mobil, Tablet, Desktop, TV)."]}),"\n",(0,t.jsx)(n.p,{children:"Neu hinzugekommen ist ein Darkmode, der durch ein Symbol im Header getoggelt werden kann. Die Suchfunktion wurde erweitert, sie ist ebenfalls im Header verf\xfcgbar."}),"\n",(0,t.jsxs)(n.p,{children:["F\xfcr Logos, Icons und Banner werden nun (wo immer m\xf6glich) ",(0,t.jsx)("abbr",{title:"Skalierbare Vektor-Grafiken",children:"SVGs"})," verwendet. Diese k\xf6nnen ohne Qualit\xe4tsverlust skaliert werden und bleiben dadurch auch bei hohen Aufl\xf6sungen immernoch scharf. Zudem haben sie oftmals eine kleinere Dateigr\xf6\xdfe als die vorigen Pixelgrafiken."]}),"\n",(0,t.jsx)(n.h3,{children:"Aktualisierte CTO-Plugins"}),"\n",(0,t.jsxs)(n.p,{children:["Im Rahmen der Rundum-Erneuerung wurden auch die Oberfl\xe4chen der ",(0,t.jsx)(n.a,{href:"/de/cto",children:"CTO"}),"-Plugins auf Bootstrap 4 aktualisiert. Manche Plugins zur Kryptoanalyse wurden sogar komplett neu entwickelt: ",(0,t.jsx)(n.a,{href:"/de/cto/autocorrelation",children:"Autokorrelation"}),", ",(0,t.jsx)(n.a,{href:"/de/cto/frequency-analysis",children:"H\xe4ufigkeitsanalyse"}),", ",(0,t.jsx)(n.a,{href:"/de/cto/vigenerebreak",children:"Vigen\xe8re-Analyse"})," und der ",(0,t.jsx)(n.a,{href:"/de/cto/numberconverter",children:"Zahlenkonverter"}),"."]}),"\n",(0,t.jsxs)(n.p,{children:["Einige ",(0,t.jsx)(n.a,{href:"/de/cto",children:"CTO"}

1),"-Plugins wurden dabei auch so aktualisiert, dass sie sich neueste Web-Technologien wie ",(0,t.jsx)(n.a,{href:"https://de.wikipedia.org/wiki/WebAssembly",children:"WebAssembly"})," zunutze machen: Die ",(0,t.jsx)(n.a,{href:"/de/cto/caesar",children:"Caesar-Chiffre"})," und die ",(0,t.jsx)(n.a,{href:"/de/cto/monoalpha",children:"Monoalphabetische Substitution"})," verwenden zur Berechnung Python live im Browser. Ihr Code kann dabei dynamisch angepasst werden und ohne Download direkt auf der Website ausgef\xfchrt werden. Das ist convenient, schneller und offen gesagt ziemlich cool."]}),"\n",(0,t.jsxs)(n.p,{children:["Die ",(0,t.jsx)(n.a,{href:"/de/cto/msieve",children:"Msieve-Faktorisierung"}),' nutzt ebenfalls WebAssembly, um Berechnungen prozessorn\xe4her auszuf\xfchren. Die rechenaufw\xe4ndige Faktorisierung war im Browser (vor allem bei gro\xdfen Zahlen) mit "normalem" JavaScript sehr langsam. Nun kann die C-Bibliothek – als WebAssembly kompiliert – direkt im Browser ausgef\xfchrt werden. Dadurch ist sie dort fast genauso schnell wie ein in C geschriebenes Standalone-Programm.']}),"\n",(0,t.jsx)(n.p,{children:"Zuk\xfcnftig werden noch weitere CTO-Plugins mit solchen Technologien hinzukommen. Die n\xe4chsten sind bereits in Arbeit ... aber dazu mehr in einem eigenen Artikel."}),"\n",(0,t.jsx)(n.h3,{children:"Haben Sie Vorschl\xe4ge?"}),"\n",(0,t.jsxs)(n.p,{children:["Haben Sie Anmerkungen oder Feedback zur neuen Website? Wenn ja, freuen wir uns \xfcber ",(0,t.jsx)(n.a,{href:"/de/feedback",children:"eine Nachricht von Ihnen"}),". Vielen Dank!"]}),"\n","\n",(0,t.jsxs)(n.section,{"data-footnotes":!0,className:"footnotes",children:[(0,t.jsx)(n.hr,{}),(0,t.jsx)(n.h2,{className:"sr-only",id:"footnote-label",children:"Footnotes"}),"\n",(0,t.jsxs)(n.ol,{color:"fg.muted",fontSize:"sm",children:["\n",(0,t.jsxs)(n.li,{id:"user-content-fn-generate_content",children:["\n",(0,t.jsxs)(n.p,{children:["Eine Seite zu erzeugen bedeutet, Daten in ein ",(0,t.jsx)("abbr",{title:"Hypertext Markup Language (die zugrundeliegende Struktur von Web-Dokumenten)",children:"HTML"}),"-Template einzusetzen. Ein HTML-Template ist eine Rahmenstruktur, die gleichbleibende Teile der Website (wie z.B. die Kopf- und Fu\xdfleisten) enth\xe4lt. Die sich pro Seite unterscheidenden Inhalte (wie der Text dieses Artikels) werden dann in diese eingesetzt. ",(0,t.jsx)(n.a,{href:"#user-content-fnref-generate_content","data-footnote-backref":"","aria-label":"Back to reference 1",className:"data-footnote-backref",children:"↩"})]}),"\n"]}),"\n"]}),"\n"]})]})}function d(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(o,{...e})}):o(e)}}},e=>{e.O(0,[55012,90636,46593,38792],()=>e(e.s=37108)),_N_E=e.O()}]);