Newsletter abonnieren

Inhalte

Neuigkeiten & Jobs

Sonderelemente

Allgemeine Infos

PHP-Skripte

Allgemeine Übersicht zu Typo3 sowie Erstellung und Bearbeitung von Seiten und ElementenErstellung, Veröffentlichung & Handhabung des Neuigkeitensystems.Elemente die nicht standardmäßig mit Typo3 mitgeliefert werden, sondern selbst erstellt worden sind.Allgemeine Informationen spezifisch zum Webauftritt.Informationen zu den PHP-Skripte die von der alten Seite "CMS" auf die neue Seite übernommen wurden.
     
WeiterleitungenNeuigkeiten / Jobs erstellenKontakteBackups & alte HomepageZugang altes CMS
(assista.org/cms)
DownloadsDateien hochladenStandorte & MapsSeitencacheÜbersicht PHP-Skripte
Fotos (skalieren)SortierungOEBB-Suche + DatumFooter © 2017PHP-Loader
Zeitlicher Sichtbarkeit
(Countdown)Domains & DNS EinträgeAJAX
(Tagungsunterlagen)
ZimmerreservierungAnalyticsintegra Jahr ändern
Formulare
ChartJS

(Footer)


Logoslider random?
Beim Messebesuch
(+ farbige Gestaltung)

360 Grad Bilder

Ideelle Träger



Typo3 Handbuch


Weiterleitungen

In der Seitenstruktur gibt es je einen Ordner Weiterleitungen. In diesem Ordner befinden sich alle Weiterleitungen, die direkt nach der Websiteadresse erreichbar sein sollen. (z.B. www.assista.org/anreise)
Erstellt werden sie wie eine normale Seite. Es gibt diese drei Arten:

  • Verweis
    Beim Aufruf der Seite wird man auf die eigentliche Seite weitergeleitet. 
    Beim Aufruf von /anfahrt, landet man auf der Seite /info-service/lage-anfahrt.
  • Einstiegspunkt
    Ein Einstiegspunkt zeigt die Inhalte einer anderen Seite an, ohne weiterzuleiten.
    Die Seite /hildina wird normal angezeigt, obwohl der Inhalt under /beschaftigung/hildina liegt.
  • externe URL
    Mit externen URLs können andere Seiten aufgerufen werden. (z.B. www.assista.org/facebook als Link zur Facebookseite) Über diesen Weg werden auch Dateien direkt verlinkt.
    Achtung: Es öffnet sich keine neue Seite.

Nach dem erstellen der Seite wird im Titel die gewünschte Weiterleitung eingegeben. (www.assista.org/seitentitel) Je nach Weiterleitungsart wird unter Verweisziel, URL oder Einstiegsseite die andere Seite angegeben.

Hinweise:

  • Wenn eine andere Website mehrfach verlinkt wird, kann es Sinn machen, diese als 
  • Wenn mehrere Weiterleitungen für eine Seite gewünscht werden, soll nur eine auf die eigentliche Seite verlinken, die anderen jedoch auf diese Weiterleitung.
    /download leitet weider auf /downloads
    /files leitet weider auf /downloads
    /downloads leitet weiter auf das Download-Center

Weiterleitungen können in der gesamten Seitenstruktur erstellt werden, sind dann aber nur für das jeweilige Verzeichnis aktiv.

Kontaktgenerator

Alle Kontakte die sich auf der Seite befinden sind HTML-Inhalte. Dies ermöglicht eine gleiche Gestaltung, ohne eine Kontaktverwaltung im Hintergrund. Die Inhaltselemente finden sich gesammelt im Ordner "Kontakte". Auf den Seiten finden sich dann jeweils die Referenzen zu diesen Elementen.

Der Nachstehende Kontaktgenerator ermöglicht ein Erstellen der Elemente, ohne HTML Kenntnisse.
Es kann der Inhalt eines bestehenden Kontaktes in das Feld "Code" eingefügt werden oder nur das Formular zum bearbeiten verwendet werden.
Nachdem alle Änderungen fertig sind, wird der Inhalt vom Textfeld "Code" in das Feld "HTML-Code" eines neuen HTML-Inhaltselements im Ordner Kontakte eingefügt. (Beschreibung angeben!)
Dieses neue HTML Element kann nun auf den einzelnen Seiten als Referenz eingefügt werden.


Folgendes ist zu Beachten:

  • Telefonnummer im richtigen Format abscheichern:
     +43 7735 / 6631 - 0 bzw. +43 664 1234567 (Kein (0)!)
  • Nur ganz leere Felder werden ausgelassen. (Alle Leerzeichen löschen!)
  • Durch Eingabe von <br> bei Name, Subname oder Adresse, wird ein Zeilenumbruch eingefügt.
  • Beim ganzen Link http:// nicht vergessen!

Es ist ein Style für ein <img> in .assisac_name hinterlegt. Die Größe wird dabei auf maximal 200x80 Pixel beschränkt. (Nicht skaliert.)

Name:

Subname:

Adresse:

Telefon:

Fax:

EMail:

Homepage:

Homepage (ganzer Link):


Sidebar-Preview:
Code:

Zimmerreservierung

Die Seite Zimmerreservierung (http://www.integra.at/besucherinfos/zimmerreservierung) basiert auf einem Skript der alten Seite. Es wurde so angepasst, dass es auf die IDs der einzelnen Elemente reagiert. Bei Änderungen sollte daher versucht werden, kein neues Element zu erstellen.

Die Kontakte können mit dem Kontaktgenerator erstellt werden. Die Logos der einzelnen Bereiche sind dabei jeweils als <img> in den Namen (.assistac_name) unterzubringen.
Mit dem Kontaktgenerator sollte es möglich sein, den Inhalt der alten HTML-Inhaltselemente zu bearbeiten.

Die Diagramme die auf der Seite verwendet werden, verwenden die externe JavaScript-Bibliothek Chart.js. Um die Verwendung und Abänderung zu erleichtern, gibt es das Element "ChartMaker". Das originale Element (id: 1261) findet sich in dieser Dokuseite. Es muss auf allen Seiten, auf denen Diagramme eingebunden werden sollen, ganz oben als Referenz hinzugefügt werden.

Nachdem der ChartMaker mit der ID 1261 als Referenz oben auf der Seite hinzugefügt wird, muss auf der Seite, an der Stelle, an der das Diagramm sein soll, ein HTML-Inhaltselement erstellt.
Mit dem Generator kann durch Klick auf "generate" ein Output erzeugt werden. Der Output wird dann in das erzeugte HTML-Inhaltselement eingefügt.

Wichtig: Alle Elemente auf einer Seite müssen eine unterschiedliche ID haben. (Feld: "id: chartdiv-test")

Dieser Generator ist zur Weiterentwicklung empfohlen.

chartdata

id: chartdiv- Title: Type: selectrow:
title +
color
+

API-Key

Zur Einbindung von Google Maps muss ein API-Key erstellt werden. Durch diesen Schlüssel, kann Google garantieren, dass diese Möglichkeit nicht missbräuchlich verwendet wird und der Traffic an eine Applikation gebunden ist.

Die Schlüssel für Karten auf assista.org und integra.at werden mit dem Konto office@remove-this.integra.remove-this.at als Projekt "assistaorg-content" verwaltet. In dem Projekt finden sich zwei Schlüssel, die jeweils auf eine der beiden Domains gesperrt ist.

https://console.developers.google.com/apis/ 

Karte: Anreise integra

Unter http://www.integra.at/besucherinfos/anreise ist eine normale Karte eingebunden.
Sie kann als Vorlage für weitere Karten verwendet werden. Eine Referenz findet sich unter "Beim Messebesuch".

Die Karte könnte gefärbt werden. Dazu kann gmap.styles = []; ein weiteres Style-Array hinzugefügt werden, das mit gmap.styleit(); getestet werden kann. Ein Generator für Style-Arrays findet sich z.B. hier.

Die Kartenbreite orientiert sich am Elternelement. Die Höhe kann mit #map { height: 200px; } angepasst werden.

Karte: Lage & Anfahrt

Auf der Seite http://www.assista.org/info-service/lage-anfahrt findet sich eine Karte mit den assista-Standorten. Neben der Karte mit den Markern, ist auch eine Funktionalität hinterlegt, dass sich, bei Klick auf und :hover über die Standortbilder, die Karte auf den jeweiligen Ort vergrößert.

Sollten sich die Daten ändern, muss das JSON-Array var locations = [{...}, {...}, ...]; angepasst werden.

Ein Objekt in dem Array hat dabei folgende Variablen:

titleTitel der bei :hover über Marker angezeigt wird.assista Altenhof
elementID des Bildes. Nicht auf das "c" vergessen!c1041
locationKartenposition im Format von Google Maps.{"lat":48.133677,"lng":13.682235}
urlURL zu Karte. Öffnet sich bei Klick auf Marker.https://www.google.at/maps/place/Assista+Soziale+Dienste+GmbH+-+synapse+gallspach/
@48.2073031,13.8144339,18.75z/data=!4m5!3m4!1s0x4774753551e15a8f:
0xda40fa08fe8df143!8m2!3d48.2075406!4d13.8145526

ÖBB Scotty

Die eingebundene Suche nach ÖBB-Verbindungen auf der Seite http://www.integra.at/besucherinfos/anreise basiert auf einem vorgefertigtem Formular das hier zur Verfügung gestellt wird. Sowohl JavaScript (Logik) als auch CSS (Gestaltung) wurden bearbeitet, damit sich das Element gut in die Seite einfügt:

  • Vorschlagsystem (Bahnhöfe) für die Eingabe wurde deaktiviert wurde,
    da es mit den Collapsibles nicht funktioniert.
  • Auswahloption "Rollstuhlstellplatz" wurde zusätzlich hinzugefügt.
  • Als Datum wird bis zu diesem Tag der erste Messetag angezeigt.
    Danach erscheint das aktuelle Datum.

Um das Datum zu aktualisieren, muss beim HTML-Element für die Scotty-Suche ganz Unten im Code, die Zeile var messedatum = new Date(2018, 3, 25); aktualisiert werden.
Der Monat muss dabei um 1 subtrahiert werden. Der Jänner wäre das Monat 0.

Als Beispiel:

var messedatum = new Date(2018, 3, 25);25. April 2018
var messedatum = new Date(2020, 4, 4);04. Mai 2020
OEBB
Von
Nach
Datum
Uhrzeit
Abfahrt Ankunft
Rollstuhlstellplatz

360 Grad Bilder

Ein fehlendes wichtiges Element für die Hompage wäre das 360 Grad Foto. Ein solches Element müsste per HTML-Inhaltselement eingebunden werden. Es gibt mehrere vorgefertigte Libraries, dabei hat sich noch keine merklich durchgesetzt. Auf der versteckten Seite http://www.assista.org/info-service/saal finden sich die bisherigen Versuche:

pannelum

 

Ausgereift und funktioniert gut und scheint auf der Benutzerseite auch die beste Möglichkeit zu sein. Auch Mobile Ansicht funktioniert passend, wirft aber bei zu kleiner Bildschirmauflösung (Mobile Geräte) einen Fehler, wenn die Panoramadatei zu groß ist. Dies könnte mit einer Multiresolution Bildatei gelöst werden. Diese ist jedoch mit einer herunterladbaren Python-Datei zu erledigen. Die Nutzbarkeit zur Erstellung ist daher eher gering.

Direkt von pannelum gibt es die Möglichkeit auf das Einbinden der Skripte zu verzichten und das Panorama ähnlich einem YouTube-Video mit einem einfachen Snippet einzubinden. Bei dieser Möglichkeit gibt es jedoch Probleme mit https und http.

https://pannellum.org/

Photo Sphere Viewer - Original

Der Photo Sphere Viewer von Jérémy Heleine funktioniert einigermaßen, kümmert sich aber vorallem um die Anzeige. Das Verwenden von den Controls geht nur spärlich.

 

http://jeremyheleine.me/photo-sphere-viewer/

Photo Sphere Viewer

 

Basierend auf dem Photo Sphere Viewer von Jérémy Heleine gibt es ein gleichnamiges Projekt. Auf den ersten Blick funktioniert alles und sieht gut aus. Die Steuerung ist umfangreich und funktioniert auch mobil ohne Probleme.
Die Tatsächliche Umsetzung auf der Website gestaltet sich allerdings schwierig, da jede Menge Abhängigkeiten verwendet werden. Zusätzlich wirft diese Library regelmäßig ohne Begründung Fehler und funktioniert daher nicht.

http://photo-sphere-viewer.js.org/

Google Maps

 

Eine letzte Möglichkeit zum Einbinden von Photo Spheres ist über Google Maps. Zu bedenken ist dabei, dass die Bilddatei öffentlich auf Maps platziert wird und man vom eingebundenen Foto auch wieder zurück auf die Karte kommt.

Backups & alte Homepage

Backup alte Homepage

Von der Hompage ber UPC wurden Backups vom Webspace und von den mySQL-Datenbanken erstellt. Diese finden sich im Netzlaufwerk im Homepage-Ordner. Das Backup wurde nach Veröffentlichung der neuen Homepage erstellt und enthält daher die Anpassungen, die ermöglichen, die Seite außerhalb der alten Domain zu erreichen.
Solange der Webspace bei UPC läuft, ist die alte Seite erreichbar unter:
www.s64569-2926.at.webhosting.upc.biz

Backup neue Homepage

SIWA speichert täglich und 7 Tage rückwirkend ein Backup. Zusätzlich verfügt Typo3 über einen Bearbeitungsverlauf mit dem Inhalte (mit großem Aufwand) wiederhergestellt werden können.
Es ist grundsätzlich für SIWA kein Problem ein lokales Backup zur Verfügung zu stellen. Dies ist angedacht für die erste Version der Website, in der alle Inhalte fertig sind. Auch dieses Backup findet sich dann im Netzlaufwerk im Homepage-Ordner.

Seitencache

Der Cache einer Seite garantiert eine bessere Performance einer Website auf einem Server. Es wird dazu der Inhalt, der sonst dynamisch zu einer Seite zusammengebaut wird, zwischengespeichert.

Bei normalen Änderungen an Seitenelementen wird die zwischengespeicherte Version sofort erneuert. Mache Elemente, wie z.B. die Dateiliste mit einer Dateisammlung, erneuern die zwischengespeicherte Version nicht von Selbst. Für diesen Fall kann der Cache einer einzelnen Seite beim Blitz-Symbol aktualisiert werden.

Eine Aktualisierung aller Seiten wäre beispielsweise bei Änderungen im Footer nötig. Die Funktion dafür ist aber nicht für normale Redakteure zugänglich, könnte aber bei Dringlichkeit von SIWA gemacht werden.
Selbstständig löscht sich der gesamte Cache täglich um Mitternacht. Beim ersten Aufruf einer Seite wird diese dann wieder zwischengespeichert.

Footer - Copyrightzeile

Die Copyrightzeile im Footer aktualisiert das Jahr mit JavaScript:

<p>Assista Soziale Dienste GmbH &copy; <span id="copyrightyear">2016</span| All Rights Reserved</p>
<script>document.getElementById('copyrightyear').innerHTML (new Date()).getFullYear();</script>

Es handelt sich dabei um ein Workaround, dass eventuell mit Typoscript besser zu lösen wäre. 

Domains und DNS - Einträge

Die Aufteilung der Domains sah früher wie folgt aus:

www.assista.orgUPC
www.integra.atUPC
www.neurobildung.atTelekom (A1)
www.das-dorf.atTelekom (A1)
www.hilfsmittel.atUPC

Für den Umzug einer Domain muss ein Auth-Key vom aktuellen Hoster beantragt werden. Damit kann dann SIWA die Domain übersiedeln. Ansprechpartner ist dafür Jochen Landvoigt.

DNS-Einträge (Subdomains)

Die Seite verfügt über einen Load Balancer. Wenn Subdomains etc. manuell eingetragen muss dies über SIWA auch dort eingetragen. Als Catchall-Subdomain wird (auch bei integra.at) auf die assista-Startseite verwiesen.

Google Analytics

Google Analytics wurde von SIWA unter dem Konto office@remove-this.integra.remove-this.at für assista.org, integra.at und neurobildung.at eingerichtet.

https://analytics.google.com/ 

Zugang altes CMS

Die übersiedelten PHP-Skripte liegen im Verzeichnis /fileadmin/php_files_assista/. Zu diesem Verzeichnis existiert ein eigener FTP-Zugang, mit dem an den Dateien gearbeitet werden kann. Im Verzeichnis finden sich die PHP-Files, sowie der Ordner, in dem die Webversionen der alten Newsletter abgespeichert sind.

Das alte CMS ist erreichbar unter:
http://www.assista.org/cms/

Die Datenbank für die PHP-Skripte kann mit phpMyAdmin bearbeitet werden:
http://www.assista.org/fileadmin/tools/phpMyAdmin/