Webhosting: Unterschied zwischen den Versionen

Aus CodicaTipps
Zur Navigation springen Zur Suche springen
 
(60 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 3: Zeile 3:
 
* Siehe [[Dynamisches DNS]].
 
* Siehe [[Dynamisches DNS]].
  
== Werbeeinnahmen ==
 
  
Das [[MediaWiki]]-System erlaubt das Hinzufügen von Werbung, z.B. [[Google AdSense]].
+
== Plattformanbieter ==
 +
 
 +
=== Cloud-Anbieter ===
 +
Im Gegensatz zu herkömmlichen virtuellen Servern bieten Cloud-Anbieter hoch skalierbare Lösungen, die auch nach tatsächlicher Benutzung abgerechnet werden:
 +
 
 +
* [https://www.strato.de/server-cloud/ Strato ServerCloud]
 +
 
 +
=== Storage - Anbieter ===
  
Siehe auch
+
* [https://www.hetzner.de/storage/storage-box Hetzner StorageBox] bietet u.a. SSH, WebDAV-Zugriff. Die Angebote starten bei 3,50 €/Monat für 100 GB.
* [http://www.elektronikinfo.de/pc/geldverdienen.htm Geldverdienen mit der eigenen Homepage]
 
* [http://contextualads.yahoo.net/features.php Yahoo Bing Ads Network] ([http://www.techulator.com/resources/8308-Compare-Google-AdSense-Yahoo-Bing-Ad-Network.aspx angeblich nur für Premium Websites])
 
  
== Virtual Server ==
+
=== Traditionelle virtuelle Server im Netz ===
  
=== Provider ===
+
==== Provider ====
  
* [http://www.webhostlist.de/ Überblick bei Webhostlist.de]
 
  
  
Zeile 84: Zeile 87:
 
| 21.12.2008  
 
| 21.12.2008  
 
|}
 
|}
 +
 +
* https://ackermann-edv.de/v-server/, ab 2,50 € pro Monat, persönlicher Support meist durch Herrn Ackermann selbst
  
 
* http://www.netcup.de/bestellen/produkt.php?produkt=85 bietet unbegrenzten Traffic, 20 GB Speicherplatz und 200 MB MindestRAM für 3,50 € im Monat (Stand: 1.8.2009)
 
* http://www.netcup.de/bestellen/produkt.php?produkt=85 bietet unbegrenzten Traffic, 20 GB Speicherplatz und 200 MB MindestRAM für 3,50 € im Monat (Stand: 1.8.2009)
Zeile 100: Zeile 105:
 
* http://www.strato.de/v-power/index.html
 
* http://www.strato.de/v-power/index.html
  
=== Mindestanforderungen ===
+
==== Mindestanforderungen ====
  
 
* Fixes RAM: 256 MB
 
* Fixes RAM: 256 MB
Zeile 108: Zeile 113:
 
* Citadel
 
* Citadel
  
=== SSH Clients for Java ===
+
==== SSH Clients for Java ====
  
 
* Überblick - http://linuxmafia.com/ssh/java.html
 
* Überblick - http://linuxmafia.com/ssh/java.html
Zeile 126: Zeile 131:
 
* Zum Markenrecht siehe
 
* Zum Markenrecht siehe
 
** http://blog-markenrecht.de/
 
** http://blog-markenrecht.de/
 +
 +
* Domain-Provider gibt es viele,
 +
** z.B.
 +
*** https://ackermann-edv.de/domains/
 +
** Suchmaschinen für Domain-Provider:
 +
** https://www.hostsuche.de/suche_domain.php
  
 
== Webserver einrichten ==
 
== Webserver einrichten ==
Zeile 142: Zeile 153:
  
 
* [https://www.debian-administration.org/article/250/Automatically_Blocking_SSH_Attackes_From_Script_Kiddies Mit Shorewall nur Login-Versuche alle Minute erlauben]
 
* [https://www.debian-administration.org/article/250/Automatically_Blocking_SSH_Attackes_From_Script_Kiddies Mit Shorewall nur Login-Versuche alle Minute erlauben]
 +
 +
Siehe auch [[Root-Server]]
  
 
== Werbung ==
 
== Werbung ==
Zeile 159: Zeile 172:
 
* Adtech
 
* Adtech
 
* Right Media
 
* Right Media
 +
 +
=== Werbung technisch umsetzen ===
 +
 +
Das [[MediaWiki]]-System erlaubt das Hinzufügen von Werbung, z.B. [[Google AdSense]].
 +
 +
Siehe auch
 +
* [http://www.elektronikinfo.de/pc/geldverdienen.htm Geldverdienen mit der eigenen Homepage]
 +
* [http://contextualads.yahoo.net/features.php Yahoo Bing Ads Network] ([http://www.techulator.com/resources/8308-Compare-Google-AdSense-Yahoo-Bing-Ad-Network.aspx angeblich nur für Premium Websites])
  
 +
 +
=== Werbung ohne Cookies ===
 +
 +
Siehe
 +
* https://pyngu.com/webseite-ohne-cookie-banner/
  
 
== WebServer-Software ==
 
== WebServer-Software ==
Zeile 182: Zeile 208:
  
 
=== Apache Webserver ===
 
=== Apache Webserver ===
 +
 +
Siehe  [[Apache Webserver]]
 +
 +
=== Node.js ===
 +
Siehe [[Node.js]]
 +
 +
=== Mini-Web-Server ===
 +
 +
* [http://www.rejetto.com/hfs/ Rejetto HFS], OpenSource
 +
* [http://www.aidex.de/software/webserver/ Aidex Mini Webserver], Freeware, wird nicht mehr weiterentwickelt.
 +
 +
=== HTML ===
 +
 +
* [[HTML]]
 +
 +
=== CSS ===
  
 
==== Allgemeines ====
 
==== Allgemeines ====
* [http://webwelt.horus.at/apache/home.html Tutorial] für [http://httpd.apache.org/docs/ Apache]
 
* Für die Erstellung einfachen '''.htaccess'''-Zugriffsschutzes hilft [http://www.bananajoe.de/cgi-bin/pass.cgi BananaJoe].
 
* [http://www.heise.de/netze/WebDAV-mit-Apache--/artikel/77605/0 WebDAV mit Apache],[http://www.itopen.de/webdav_mit_apache WebDAV mit Apache], [http://www.zeroathome.de/wordpress/ftp-und-webdav-fuer-euren-ubuntu-server/ WebDAV und SSL mit Apache]
 
* [http://www.webreference.com/programming/Apache-Site-Down-Notice/ Versetzen des Apache Servers in den Maintenance-Modus] über .htaccess im Wurzelverzeichnis des Apache Servers.
 
  
==== SSL-Zertifikate ====
+
* [http://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/Guter_CSS-Stil CSS-best practices]
 +
* https://every-layout.dev/
 +
* https://cssreference.io/
  
===== Allgemeines =====
+
==== Farbpaletten ====
SSL-Zertifikate enthalten den öffentliche Komponente eines Schlüssels sowie den Namen und sonstige Details des Schlüsseleigentümers und ggf. den Namen der Zertifizierungsstelle (CA). SSL-Zertifikate werden regelmäßig von der Zertifizierungsstelle signiert. Im Ausnahmefall kann man ein Zertifikat auch selbst signieren (mit dem privaten Teil seines Schlüssels).
 
  
 +
* [https://coolors.co coolors.co]
  
Siehe [http://www.kuketz-blog.de/ssl-zertifikate-und-ihre-unterschiede/ Einteilung der Zertifikate]
+
==== Tooltips ====
  
===== Selbstsigniertes Zertifikat erstellen =====
+
* [http://www.phcomp.co.uk/Tutorials/Web-Techologies/Tooltips-in-CSS.html Anleitung zur Erstellung von Tooltips mit reinem CSS]
  
  openssl req -new -x509 -nodes -out server.crt -keyout server.key
+
==== Tabellen ====
  
Der private Schlüssel server.key kann nach <code>/etc/ssl/private</code> und das Zertifikat mit dem öffentlichen Schlüssel server.crt kann nach <code>/etc/ssl/certs</code> kopiert werden
+
Siehe
 +
* [https://hashnode.com/post/really-responsive-tables-using-css3-flexbox-cijzbxd8n00pwvm53sl4l42cx Responsive Tabellen mit Flexbox]
 +
* [https://css-tricks.com/snippets/css/a-guide-to-flexbox/ Allgemeine Übersicht zu Flexbox]
  
===== Apache2 konfigurieren =====
+
==== CSS-Frameworks ====
  
Mit
+
* http://getskeleton.com/ - sehr minimales CSS Framework
  a2enmod ssl
+
* https://purecss.io/ - minimales CSS, unterstützt von Yahoo
das SSL-Modul von Apache2 aktivieren
+
* https://milligram.io/
 +
* [https://bulma.io/ Bulma] - nur CSS, kein JavaScript
 +
** [https://dfee.github.io/rbx rbx] integriert Bulma mit [[React]]; rbx scheint nicht mehr aktualisiert zu werden
 +
** https://github.com/couds/react-bulma-components - Integration mit [[React]]
 +
** https://jenil.github.io/bulmaswatch/help/ - Themes für Bulma
 +
* https://tailwindcss.com/
 +
** https://www.creative-tim.com/learning-lab/tailwind-starter-kit/presentation
  
 +
===== Ant.Design =====
  
Einen VirtualHost (/etc/apache2/sites-available/...) mit *:443 statt *:80 einrichten und folgende Direktiven einfügen:
+
Siehe
 +
* https://ant.design/docs/react/introduce
  
SSLEngine            on
+
====== Einbindung in React / Typescript-Projekt ======
SSLCertificateFile    /etc/ssl/certs/server.crt
 
SSLCertificateKeyFile /etc/ssl/private/server.key
 
  
Eventuell ein NameVirtualServer *:443 in /etc/apache2/ports.conf einfügen.
+
Ant.Design wird mit
 +
  npm install --save antd
 +
dem Create-React-App-Projekt hinzugefügt.
  
===== Links überprüfen =====
+
Im Code muss man einerseits das CSS einbinden:
 +
  import "antd/dist/antd.css";
  
Die Links auf die Seite und auch innerhalb sollten nun mit http'''s''':// beginnen und nicht mehr mit http://. Das gilt auch für Referer. In [[MediaWiki]] ist in der /var/lib/mediawiki/LocalSettings.php <code>$wgServer</code> auf "https://www.myserver.de" zu setzen.
+
Andererseits benötigt man auch den JavaScript-Code, z.B. für das Input-Element:
 +
  import {Input} from "antd";
 +
  ...
 +
  return (<Input placeholder="Hallo" />);
 +
  ...
  
===== Certificate Signing Request =====
+
===== Bootstrap =====
  
Eine CSR-Datei, deren Inhalt man an eine Certificate Authority wie startssl verschickt, um dem Zertifikat vertrauen zu lassen, erstellt man folgendermaßen:
+
Twitter Bootstrap ist ein [[Open Source]]-Framework, das im Wesentlichen mit [[CSS]] und entsprechenden Klassen (<code>class = "container-fluid"</code>) aus dem Stand ein ganz ansehnliches Layout bereitstellt.
 +
Siehe
  
  export DOMAIN="BEISPIEL.de"
+
* [http://www.w3resource.com/twitter-bootstrap/tutorial.php Bootstrap 3.0 Tutorial]
  openssl genrsa -out ${DOMAIN}.de.key 2048 # privaten und öffentlichen Schlüssel erzeugen
 
  openssl req -new -key ${DOMAIN}.key -out ${DOMAIN}.csr # CSR erzeugen
 
  cat ${DOMAIN}.csr # CSR anzeigen lassen (für Copy & Paste)
 
  
===== Kostenlose offizielle Zertifikate =====
+
Siehe auch
 +
* Auf den Demoseiten der Bootstrap-Themes auf [https://bootswatch.com/ Bootswatch.com] kann der zugehörige Code angezeigt werden.
 +
* Open Source - Bootstrap Themes:
 +
** https://themewagon.com/themes/creative-multipurpose-website-template-free-download/
 +
** https://themewagon.com/themes/one-page-multipurpose-bootstrap-template-free-download-2017/
 +
** https://github.com/DesignRevision/shards-ui
  
StartSSL scheint der einzige offizielle Anbieter von kostenlosen SSL-Zertifikaten zu sein. Diese Zertifikate eignen sich angeblich auch für [[S/MIME]]. Jedes Jahr müssen die kostenlosen Zertifikate verlängert werden.
+
* [http://www.mashup-template.com/ Mashup Template]
  
 +
====== Integration mit Nextjs ======
  
Siehe
+
Siehe [[Nextjs]]
* [http://www.debacher.de/wiki/Server-Zertifikate_mit_StartSSL Anleitung für StartSSL von debacher]
 
* [http://www.small-blog.de/verlangern-eines-startssl-free-class-1-ssl-zertifikat/ StartSSL-Zertifikat verlängern]
 
* [http://www.hagenfragen.de/tipps-und-tricks/startssl-client-certificate-verlaengern.html http://www.hagenfragen.de/tipps-und-tricks/startssl-client-certificate-verlaengern.html noch einmal: Zertifikat verlängern]
 
  
===== Kommerzielle SSL-Zertifikatanbieter =====
+
* https://www.kindacode.com/article/how-to-correctly-use-bootstrap-5-in-next-js/
 +
* https://feralamillo.medium.com/bootstrap-in-create-react-app-typescript-1a0365fdd111
 +
* https://stackoverflow.com/questions/69527455/could-not-find-a-declaration-file-for-module-bootstrap-dist-js-bootstrap
  
* [https://www.leaderssl.de/products/essentialssl LeaderSSL], Zertifikate ab 14 € p.a.
+
  npm install --save-dev sass
* [http://www.dmsolutions.de/ssl.html dmsolutions], Zertifikate verschiedener Anbieter ab 20 € p.a., u.a. RapidSSL
+
  npm install --save bootstrap
* HostEurope, Zertifikate ab 30 € p.a.
 
  
===== Bugs in SSL =====
+
In src/styles/globals.scss importiere Bootstrap-SCSS
 +
  @import '~bootstrap/scss/bootstrap.scss';
  
Laut [http://fm4.orf.at/stories/1736830/ FM4] stammt der "Heartbleed"-Bug u.a. in der [[OpenSSL]]-Software wohl aus der Feder von der NSA nahestehenden Kreisen.
+
Die Tilde ~ ist dabei eine Kurzform für das node_modules/-Verzeichnis.
  
===== Weiterführendes =====
+
In src/pages/_app.tsx importiere globals.scss und Bootstrap.js
Siehe
+
<pre>
* [http://httpd.apache.org/docs/2.2/ssl/ssl_faq.html FAQ für SSL]
+
import "../styles/globals.scss";
* [http://www.heise.de/security/artikel/SSL-fuer-lau-880221.html StartSSL] bietet kostenlose, ein Jahr gültige SSL-Zertifikate.
+
import type { AppProps } from "next/app";
** Dazu [http://hydra.geht.net/tino/howto/linux/apache/apache--ssl/startssl/ Anleitung bei Hydra]
+
import { useEffect } from "react";
** [http://www.sslshopper.com/article-free-ssl-certificates-from-a-free-certificate-authority.html Besprechung der Vor- und Nachteile von StartSSL free]
 
* Ausprobieren kann man auch zunächst mal ein selbst erstelltes Zertifikat (Siehe [http://www.sslshopper.com/article-how-to-create-and-install-an-apache-self-signed-certificate.html Nachteile eines selbst signierten Zertifikats]):
 
** [http://blog.kabisa.nl/2010/03/08/setup-a-self-signed-ssl-site-with-apache2/ Apache2 mit SSL] auf [[Debian]] einrichten
 
** http://mrfoo.de/archiv/347-Howto-Apache2-SSL-Zertifikat-erstellen-und-aktivieren.html
 
** [http://www.matthias-sonnenkalb.net/archives/linux/de/eigenes-ssl-zertifikat-erstellen-und-server-einrichten/index.php Erstellen des Zertifikats und Einrichtung] des [[Apache]] unter [[OpenSuse]]
 
  
Siehe auch [[Linux-Tipps#SSL]]
+
function MyApp({ Component, pageProps }: AppProps) {
 +
  useEffect(() => {
  
==== Apache als Reverse Proxy ====
+
    //import("bootstrap/dist/js/bootstrap");
 +
    typeof document !== undefined
 +
    ? require('bootstrap/dist/js/bootstrap')
 +
    : null
 +
  }, []);
 +
  return <Component {...pageProps} />;
 +
}
  
Ein Reverse Proxy ist ein Server, der Anfragen an einen anderen Server weiterleitet und dessen Antworten an den Client weitergibt, ohne dass dieser merkt, dass hinter dem Reverse Proxy noch ein anderer Server sitzt, der die Daten liefert.
+
export default MyApp;
 +
</pre>
  
 +
====== Themes ======
 +
* Im Wesentlichen kostenpflichtige Themes finden sich auch auf [https://bootstrapmade.com/ BootstrapMade.com]
 +
** https://bootstrapmade.com/demo/MyResume/
 +
** https://bootstrapmade.com/demo/Multi/
 +
** https://bootstrapmade.com/iportfolio-bootstrap-portfolio-websites-template/
  
  
Siehe zu Apache als Reverse Proxy auch
 
* https://thomas-leister.de/internet/apache-reverse-proxy-mit-ssl-support-einrichten/
 
  
=== Mini-Web-Server ===
+
Bootstrap-Themes mit MIT-Lizenz finden sich auch auf
 +
* https://themes.gohugo.io/
 +
** https://themes.gohugo.io/theme/hugo-scroll/
 +
** https://www.noorix.com.au/blog/how-to/static-website-hugo-bootstrap-serverless-2/
  
* [http://www.rejetto.com/hfs/ Rejetto HFS], OpenSource
+
====== Navigationsleiste, die auf Scrollen reagiert ======
* [http://www.aidex.de/software/webserver/ Aidex Mini Webserver], Freeware, wird nicht mehr weiterentwickelt.
+
* https://startbootstrap.com/template/scrolling-nav benutzt Bootstrap's ScrollSpy
 +
* [https://blog.devgenius.io/diy-scrollspy-4f1c270cafaf Anleitung für ScrollSpy auf Basis von React]
  
=== HTML ===
+
Siehe auch - ohne Bootstrap -: https://css-tricks.com/sticky-smooth-active-nav/
  
* [[HTML]]
+
====== einzelne Features ======
  
=== CSS ===
+
* https://swiperjs.com/
 +
* [https://michalsnik.github.io/aos/ aos] - zum Scrollen
 +
* [http://imakewebthings.com/waypoints/api/waypoint/ waypoints] - zum Scrollen
 +
* [https://isotope.metafizzy.co/ Isotope] - zum Anordnen
  
==== Allgemeines ====
+
==== Icons ====
  
* [http://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/Guter_CSS-Stil CSS-best practices]
+
Siehe [[React#Icons]]
  
==== Tooltips ====
+
==== CSS Animationen ====
  
* [http://www.phcomp.co.uk/Tutorials/Web-Techologies/Tooltips-in-CSS.html Anleitung zur Erstellung von Tooltips mit reinem CSS]
+
Googles [https://sumtips.com/tips-n-tricks/make-any-site-do-a-barrel-roll/ "Do a barrel roll" kann man für jede Website mittels CSS-Animationen und iframe-Tag durchführen].
==== Bootstrap ====
 
  
Twitter Bootstrap ist ein [[Open Source]]-Framework, das im Wesentlichen mit [[CSS]] und entsprechenden Klassen (<code>class = "container-fluid"</code>) aus dem Stand ein ganz ansehnliches Layout bereitstellt.
+
==== CSS beim Druck ====
 
Siehe
 
Siehe
 
+
* https://www.mediaevent.de/css/pagedmedia.html
* [http://www.w3resource.com/twitter-bootstrap/tutorial.php Bootstrap 3.0 Tutorial]
+
* https://wiki.selfhtml.org/wiki/CSS/Tutorials/Print-CSS
  
 
=== Server Side Includes ===
 
=== Server Side Includes ===
 
* Ein Überblick zu '''Server Side Includes''' findet sich bei [http://de.wikipedia.org/wiki/Server_Side_Includes wikipedia]. Eine Einführung gibt [http://www.morgenlan.de/yapata/content/xssi/xssi-1.shtml morgenlan.de].
 
* Ein Überblick zu '''Server Side Includes''' findet sich bei [http://de.wikipedia.org/wiki/Server_Side_Includes wikipedia]. Eine Einführung gibt [http://www.morgenlan.de/yapata/content/xssi/xssi-1.shtml morgenlan.de].
 
* Auch [http://de.selfhtml.org/servercgi/server/ssi.htm selfhtml.org] kümmert sich um Server Side Includes.
 
* Auch [http://de.selfhtml.org/servercgi/server/ssi.htm selfhtml.org] kümmert sich um Server Side Includes.
 +
 +
Siehe auch
 +
* [http://httpd.apache.org/docs/current/howto/ssi.html die offizielle Apache-Dokumentation zu SSI]
 +
** [http://www.ietf.org/rfc/rfc3875 Liste der standardmäßig vorhandenen Umgebungsvariablen für SSI-Skripte]
  
 
=== Perl ===
 
=== Perl ===
Zeile 343: Zeile 417:
 
* Typo3
 
* Typo3
 
* [http://www.silverstripe.com/ Silverstripe], ein [[Open Source]]-[[CMS]]
 
* [http://www.silverstripe.com/ Silverstripe], ein [[Open Source]]-[[CMS]]
 +
 +
 +
==== Dateibasierte CMS ====
 +
 +
* https://www.bludit.com/
 +
** https://themes.bludit.com/theme/styler
 +
** https://themes.bludit.com/theme/typerite
 +
* https://getgrav.org/
 +
* http://picocms.org/
 +
 +
==== Headless CMS ====
 +
 +
Headless CMS sorgen nur für das Content-Management, bieten allenfalls eine Benutzeroberfläche, um den Content zu erfassen, nicht aber ihn gegenüber den Benutzern/Kunden darzustellen. Sie bieten dafür eine API an, über die das Frontend an den Content gelangt.
 +
 +
Beispiel:
 +
 +
* strapi
 +
* [https://jamstack.org/headless-cms/ Übersicht bei jamstack.org]
 +
 +
== Authetifizierung und Berechtigungen ==
 +
 +
* [[KeyCloak]]
 +
** siehe auch [[Phoenix]]
 +
** https://scalac.io/blog/user-authentication-keycloak-1/
  
 
== Tools ==
 
== Tools ==

Aktuelle Version vom 13. September 2024, 20:05 Uhr

Dynamisches DNS


Plattformanbieter

Cloud-Anbieter

Im Gegensatz zu herkömmlichen virtuellen Servern bieten Cloud-Anbieter hoch skalierbare Lösungen, die auch nach tatsächlicher Benutzung abgerechnet werden:

Storage - Anbieter

  • Hetzner StorageBox bietet u.a. SSH, WebDAV-Zugriff. Die Angebote starten bei 3,50 €/Monat für 100 GB.

Traditionelle virtuelle Server im Netz

Provider

Provider RAM statisch RAM insgesamt (inkl. Swap) Festplatte Betriebssysteme Kosten Stand
proplay.biz 128 256 MB 4 GB OpenSuse 10.3 2 € / Monat 21.12.2008
heckrath.net k.A. 256? k.A. 256? 10 GB OpenSuse 10.3 5 € / Monat 21.12.2008
Greatnet VServer-Entry, 128 MB 384 MB 10 GB OpenSuse 10.2 6 €/Monat 21.12.2008
ispOne vServer 128 MB ~-je 128 MB zus. 15 € einmalig -~ k.A. 5 GB OpenSuse 10.3 / Debian 4 3,90 €/Monat 21.12.2008
lgh Mini vServer k.A. 200 MB 4 GB Debian/Ubuntu 3 €/Monat 21.12.2008
fairhosting x1.1 64 MB 128 MB 5 GB Debian 5/OpenSuse 10 3 €/Monat 21.12.2008
fairhosting x2.1 128 MB 256 MB 15 GB Debian 5/OpenSuse 10 4 €/Monat 21.12.2008

(5 GB Speicherplatz für 5 Euro/Monat, 10 Euro Einrichtung; Toplevel-Domain zusätzlich 3,30 €/Jahr)

(5 Euro/Monat inklusive 1 Domain, 4,5 GB Webspace)

Mindestanforderungen

  • Fixes RAM: 256 MB
  • Free harddisk space: 4GB
  • OpenOffice 2.4
  • Java 1.5
  • Citadel

SSH Clients for Java

Webspace

Domains

Webserver einrichten

  • SSL-Zertifikat hinterlegen

Siehe auch Root-Server

Werbung

Durch Werbung auf der eigenen Website lässt sich Geld verdienen. Sie kann allerdings auch abschreckend wirken.

Vermittler von Werbung gibt es eine ganze Menge. Sie stellen einen sogenannten AdServer, der automatisch aktuelle oder auch personalisierte Werbung ausliefert. Beispiele:

  • Google AdSense
  • Criteo
  • DoubleClick (gehört zu Google)
  • DART
  • Open X
  • Zedo
  • OAS
  • Emediate-Ad
  • Adtech
  • Right Media

Werbung technisch umsetzen

Das MediaWiki-System erlaubt das Hinzufügen von Werbung, z.B. Google AdSense.

Siehe auch


Werbung ohne Cookies

Siehe

WebServer-Software

Allgemeines

Redirects


Testen

  • Die virtuelle Maschine BrowserBox bietet mehrere Browser (u.a. Internet Explorer unter Linux mit Wine) an, um die Darstellung einer Webseite testen zu können[1],.
  • Siehe auch Selenium

XAMPP

XAMPP gibt es auch für Windows.

Siehe auch diese Anleitung, um XAMPP für Windows mit VirtualHosts zu konfigurieren.


Apache Webserver

Siehe Apache Webserver

Node.js

Siehe Node.js

Mini-Web-Server

HTML

CSS

Allgemeines

Farbpaletten

Tooltips

Tabellen

Siehe

CSS-Frameworks

Ant.Design

Siehe

Einbindung in React / Typescript-Projekt

Ant.Design wird mit

 npm install --save antd

dem Create-React-App-Projekt hinzugefügt.

Im Code muss man einerseits das CSS einbinden:

 import "antd/dist/antd.css";

Andererseits benötigt man auch den JavaScript-Code, z.B. für das Input-Element:

 import {Input} from "antd";
 ...
 return (<Input placeholder="Hallo" />);
 ...
Bootstrap

Twitter Bootstrap ist ein Open Source-Framework, das im Wesentlichen mit CSS und entsprechenden Klassen (class = "container-fluid") aus dem Stand ein ganz ansehnliches Layout bereitstellt. Siehe

Siehe auch

Integration mit Nextjs

Siehe Nextjs

 npm install --save-dev sass 
 npm install --save bootstrap

In src/styles/globals.scss importiere Bootstrap-SCSS

 @import '~bootstrap/scss/bootstrap.scss';

Die Tilde ~ ist dabei eine Kurzform für das node_modules/-Verzeichnis.

In src/pages/_app.tsx importiere globals.scss und Bootstrap.js

import "../styles/globals.scss";
import type { AppProps } from "next/app";
import { useEffect } from "react";

function MyApp({ Component, pageProps }: AppProps) {
  useEffect(() => {

    //import("bootstrap/dist/js/bootstrap");
    typeof document !== undefined 
    ? require('bootstrap/dist/js/bootstrap') 
    : null
  }, []);
  return <Component {...pageProps} />;
}

export default MyApp;
Themes


Bootstrap-Themes mit MIT-Lizenz finden sich auch auf

Navigationsleiste, die auf Scrollen reagiert

Siehe auch - ohne Bootstrap -: https://css-tricks.com/sticky-smooth-active-nav/

einzelne Features

Icons

Siehe React#Icons

CSS Animationen

Googles "Do a barrel roll" kann man für jede Website mittels CSS-Animationen und iframe-Tag durchführen.

CSS beim Druck

Siehe

Server Side Includes

Siehe auch

Perl

PHP

Web-Admin-Tools

  • Web-Verwaltungstool, das die Konfiguration aus den Standard-Konfigurationsdateien ausliest und schreibt: WebMin (nicht mehr in Debian enthalten, aber weiter als Debian-Package verfügbar und weiterentwickelt)
  • Web-Admin-Tool: Zentyal (früher: eBox)

Wikis

  • Siehe MediaWiki, die Software hinter wikipedia und codicatipps
  • MoinMoin ist ein in Python geschriebenes Wiki.
    • Die Interwikimap bei MoinMoin lässt sich durch Ergänzung der Datei data/intermap.txt erweitern.

Blogs

Content Management System


Dateibasierte CMS

Headless CMS

Headless CMS sorgen nur für das Content-Management, bieten allenfalls eine Benutzeroberfläche, um den Content zu erfassen, nicht aber ihn gegenüber den Benutzern/Kunden darzustellen. Sie bieten dafür eine API an, über die das Frontend an den Content gelangt.

Beispiel:

Authetifizierung und Berechtigungen

Tools



  1. c't 8/2010, S. 62