Eine webseite bauen + einen Server nutzen? Das lernt man am besten durch konkrete Praxis, Ziel- und Problemorientiert durch Hilfestellungen, Anleitungen und Codes aus dem Internet.

Ein Server ist ein im netz erreichbarer rechner (oft mit linux betrieben zb apache, ubuntu etc) der daten "serviert" ... das können webseiten und deren inhalte (videos bilder texte sein) oder andere datein und interfaces. server kann man mieten und eigene daten drauf speichern (öffentlich oder pivat), zb auch für backups vom eigenen computer, vom phone, man kann hier html-webseiten zugänglich machen oder blogs, wikis, etherpads betreiben. auch eine next-cloud ist praktisch, da kann man dateien hochladen die man via link dem adressaten zugänglich macht - so spart man sich we-transfer oder dropbox. man kann dort einen gemeinsamen kalender führen oder auch einen (video)-chat eröffnen. auch email kann darüber laufen. vorteil, man kontrolliert seine daten selber, sie helfen nicht den geschäftsmodellen der grossen anbieter.

Clients sind andere Computer, Laptops, Handies, die auf die Server zugreifen und sich da daten informationen etc holen.

Server kann man auch selbst von zuhause aus betreiben (homeserver/home hosting), zb mithilfe eines Raspbery-pi Kleincomputers > siehe dazu unseren Workshop im letzten Jahr: hosting - aber das ist eher zum basteln und experimentieren. die arbeit unterscheidet sich wenig vom professionellen, gemieteten server. der ist halt schneller und rund um die uhr gewartet.

normalerweise würde man einen Server mieten. (für experimente kann man sich, wie geschehen, bei github oder sonstwo ein gratis server häppchen holen, zb: https://bplaced.net https://infinityfree.net/ https://wolkenbauer.com/web-hosting.php https://de.000webhost.com (aber vorsicht, der platz ist beschränkt, die features eingeschränkt und die geschäftsmodelle sind darauf ausgelegt einem mehr anzudrehen. zudem, niemand weis was die mit den daten machen und wer mitliest. also vllt lieber zu einem professionellen anbieter? die anbieter von server-space nennt man host bzw hoster. das stichwort heisst : webhosting)

wollt ihr aber einen webspace/webstorage/cloud dauerhaft mieten, dann am besten von einem anbieter in einem land unregulierter gesetzgebung, zb island: offene jurisdiktion, gut ans internet angebunden, strom ist grün und billig, zb:

mein (societyofcontrol.com) hoster ist ok, sitzt aber leider in deutschland

macht bei verschiedenen webhostern preisvergleiche, erscheint die firma vertrauenswürdig? meist wird die servernutzung im paket angeboten, das macht sinn:

  • mit einem oder mehreren wählbaren DOMAIN namen (zb http://meinname.com http://deinname.org etc)
  • mit mehreren FTP zugängen (einer genügt, wichtig zum up- und download)
  • mit mehreren E-Mail-Adressen.
  • mit My SQL? (datenbank)
  • PHP (sprache für dynamische webseiten)
  • unlimited traffic.
  • praktisch auch wenn man auf seinem server (in den admin seiten) per knopfdruck automatisch wiki- blog- oder cloud-software installieren kann

man bezahlt für den space je GB desto € und inkl domain namen (die adresse) meist jährlich. die meisten anbieter erneuern diesen namen automatisch jährlich, das ist praktisch, denn sonst verfällt er.

Auf diesem Server könnt ihr jetzt sehr leicht mittels FTP programm eure webseiten, bilder videos hochladen. ihr könnt per knopfdruck eine Wordpress Blog- oder Mediawiki-installation hinzufügen und auf diese weise eine Klassenwebseite betreiben. ihr könnt per knopfdruck auch eine Next-cloud installieren als klassen-drop-box, backup system oder kalender.

Auch E-Mail-Server sind meist inklusive, da hätte man den eigenen DOMAIN namen auch als email adressee zb: nym@phenburg.com. (E-Mail-Postfächer kann man natürlich auch bei anderen anbietern mieten, welche die emails auf dem server verschlüsseln. postix, protonmail etc...)

vom server ist die mail meist auf 3erlei weise abrufbar:

  • durch ein web-browser-interface in das man sich einloggt
  • durch ein emailprogramm (zb thunderbird oder auf dem handy) auf dem eigenen rechner das beim öffnen via POP 3? protokoll die emails vom server auf den eigenen rechner holt und die mails auf dem server löscht.
  • durch ein emailprogramm (zb thunderbird oder auf dem handy) auf dem eigenen rechner das beim öffnen via IMAP protokoll die emails auf den eigen rechner holt, sie aber auf dem server belässt damit man von anderer stelle, zb durch das smartphone ebenfalls drauf zugreifen kann.

wenn ihr alles richtig macht sind eure mails und daten auf dem einem eigenen server geschützter als zb bei gmail, gmx etc.

um eine webseite zu gestalten empfehle ich 2 möglichkeiten:

1) html5 - für html codes gibt es zahlreiche nachschlagewerke und tutorials und auch html editoren tools - das ist der klassische weg. html5 ist einfach aufgebaut. es ist sehr leicht verschieden medien einzubinden.

  • ) durch verwendung von css = Cascading Style Sheets kann man den look von einem system von seiten auf einen schlag verändern in dem man die parameter auf denen die seiteneigenschaften beruhen verändert (zb schrift grösse, hintergrund farbe etc).
  • ) für das coden von html braucht man meist einen geeigneten html editor (>tools - es gibt sehr unteschiedliche, sehr einfache und sehr komplexe) dann braucht man den code nicht eintippen sondern man fügt ihn per click ein und modifiziert ihn in folge
  • )für das hochladen von dateien zum server braucht man ein ftp-programm wie filezilla (FTP heisst File Transfer Protocol) - es ist ratsam die html, css und bild datein zuerst auf dem eigenen rechner zu bearbeiten und zu organisieren - und sie erst dann, wenn alles funktioniert, mittels FTP auf den server zu laden. meist hat man die selben dateien(und die selbe dateistruktur) auf dem server und auf dem rechner - das ist als backup ohnehin zu empfehlen, dann der server kann auch einmal abstürzen (ist ja auch nur ne festplatte)
  • die dateistruktur (auf server und eigenem rechner) hält man möglichst logisch und übersichtlich. flach, aber nicht allzuverschachtelt.

computer und server organisieren sich ja meist in pfaden, die mit einem schrägstrich (/) getrennt werden, zb: / das ist der rootordner, hier würde meist die index.htm datei liegen, das ist die einstiegsseite, die erste seite die nach aufruf der adresse zb http://meinedomain.com aufgerufen wird. dh http://meinedomain.com entspricht dem rootordner /

/20200321_projekt1 könnte nun ein ordner heissen (mit datum vorweg) in dem alle dateien des ersten projekts schlummern. die adresse wäre dann http://meinedomain.com/20200321_projekt1 /projektxy könnte nun ein ordner heissen in dem alle dateien des xy projekts schlummern. die adresse wäre dann http://meinedomain.com/projektxy /wordpress könnte der ordner sein in den das wordpress system installiert ist. die adresse wäre dann http://meinedomain.com/wordpress /nextcloud könnte der ordner sein in den das nextclud system installiert ist. die adresse wäre dann http://meinedomain.com/nextcloud

wenn man nun in eine xbeliebige.htm seite eine datei/bild aus einem anderen ordner einfügen will (auch zb aus einer ganz anderen webseite an einem anderen ort) dann muss man den pfad zu dieser datei einfügen. zb oder

  • bilder (und erst recht filme), bevor sie in die webseite eingebaut werden, müssen erst einmal fürs web optimiert werden, denn sonst laden sie zu lange. zu dieser optimierung helfen fotoshop/gimp und andere programme (die eventuell einen ganzen stapel/batch von bildern auf einen rutsch optimieren). der normale hd bildschirm ist 1920 px breit und 1080 px hoch. bei einem vollbild braucht das bild bei einer webauflösung con 72 dpi (300dpi = printauflösung) nicht breiter zu sein. das ändert sich aber gerade bei den 4k monitoren - dennoch sollte man erst einmal bei diesen standarts bleiben. die eigentliche grösse der bilder in der seite kann man dann durch den html-code anpassen.
  • bildergalerien : generell gibt es für bilder auf webseiten viele wege: klickbare thumbnails (kleine bilder) die erst einmal einen überblick zeigen und man dann per klick sich ein grösseres bild anzeigen lassen kann, "slideshows" bei denen das bild entweder automatisch weiterspringt oder erst nach mouseclick. das gibt es auch im vollformat. für diese diashows gibt es viele unterschiedliche scripte, kann man aber auch selbst machen, zb indem man auf einer seite mit anchors (ankern) arbeitet auf welche das bild dann springt, oder man verlinkt bilder (und einer abfolge von seiten)
  • der hintergrund einer seite kann farbig sein, oder mit hilfe von sehr kleinen bildern mit einem muster versehen, oder mit grösseren bildern "verschönert". dem puristischen html entpricht die farbe weiss. es lässt sich aber leicht ausprobieren ob nicht eine andere farbe dem seiteninhalt dienlich wäre.
  • last not least endet eine webseite irgendwo, wenn man beim durchscrollen nicht schon vorher aufgibt. am ende der seite steht meist eine navigationshilfe mit der man leicht zb zurück zum hauptmenue springen kann, oder zur nächsten ausstellung. auch macht ein solch signalisiertes ende klar, dass da überhaupt ein ende ist und man im ladeprozess eines schweren bildklotzes steckengeblieben ist..
  • das schöne beim coding ist, dass man immer auch code/ interessante tricks von anderen seiten lernen und sie dort sogar klauen kann. beispielsweise ein video einzubetten, wie macht man das? da kann man den dazu von anderen webseiten stehlen oder man googlt " video einbetten html5" und findet den code so. oder man guckt in dem editor, den man benutzt, der hat den code sicher auch auf vorrat. nach änderungen an serverdateien oder nach upload aktualisierter dateien muss man immer das entsprechende browserfenster (mit dem man die änderungen sehen will) neu laden!!

wie gesagt - html ist classic. wenn man das benutzt dann würde ich die seite sehr schlicht, einfach und konzeptuell halten.

2) es gibt mittlerweile hunderte von cms (content management systems). da fällt die wahl nicht leicht. wordpress ist das mit abstand einfachste und beliebteste CMS. hier vergleich, wordpress - typo3 und der marktanteil wordpress - typo3. für diese systeme gibt -zig design vorlagen und plugins mit dem ihr die seiten so gestalten könnt wie ihr wollt. für wordpress braucht ihr nicht unbedingt einen editor und nicht unbedingt ein ftp programm zum upload weil das alles über den webbrowser/die seite von wordpress gemacht wird.

natürlich könnt ihr auch eine wiki software nehmen und diese entsprechend modifizieren (siehe zb http://societyoutofcontrol.com) damit sie nicht den typischen wikilook hat. ihr solltet euch auch über den zweck der seite und das praktische handling im klaren werden

  • html prinzip = one-directional publishing (= einer sendet an alle) und nur ganz wenige können da neue inhalte einstellen, weil die wenigsten sich in html auskennen und die struktur der seite nicht kennen
  • blog prinzip (wordpress usw) = one-directional publishing (= wenige senden an alle). diejenigen (wenigen) die das passwort haben und die sich ein bischen eingearbeitet haben können seiten modifizieren und neue erstellen, bilder hochladen und einbetten.
  • wiki prinzip = bi-directional publishing (sender, aber auch empfänger können editieren). früher war unser wiki tatsächlich offen für alle zum editieren, aber nach verschiedenen spam-attacken können das nur noch leute die das passwort haben. der wikicode funktioniert in etwa wie stenographie, also kurze befehle die serverseitig dann in html umgewandelt und zurück gegeben werden. hier ist die chance am grössten dass möglichst viele aus der klasse mitposten und mitgestalten können. auf der klassenseite benutze ich pm-wiki der ist besonders einfach zu installieren und zu benutzen. auf professionellen servern wird oft die one-click installation von mediawiki angeboten. Das ist in etwa das was wikipedia verwendet. etwas aufwendiger und komplexer als pm-wiki