3.827
Bearbeitungen
Änderungen
Zur Navigation springen
Zur Suche springen
Zeile 3:
Zeile 3: − == Werbeeinnahmen == − − 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]) Zeile 18:
Zeile 11: − + + + + + − * [http://www.webhostlist.de/ Überblick bei Webhostlist.de] Zeile 91:
Zeile 87: + + Zeile 133:
Zeile 131: + + + + + + Zeile 149:
Zeile 153: + + Zeile 167:
Zeile 173: + + + + + + + + + + + + + Zeile 193:
Zeile 212: − + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + − + − + − ===== Node.js auf Debian Stretch ===== − Node.js lässt sich am besten vom NodeSource.com repository installieren. Dazu eine Datei <code>/etc/apt/sources.list.d/nodesource.list</code> mit folgendem Inhalt anlegen:+ + + − deb https://deb.nodesource.com/node_8.x stretch main+ − deb-src https://deb.nodesource.com/node_8.x stretch main + − Anschließend das Paket installieren:+ − sudo aptitude update && sudo aptitude install nodejs + + + + − + − Bei Installation Node.js auf einer [[Ubuntu]]-basierten Linux-Distribution ist wohl folgender Befehl zur Erstellung eines Softlinks notwendig:<ref>Siehe http://stackoverflow.com/questions/26320901/cannot-install-nodejs-usr-bin-env-node-no-such-file-or-directory</ref>+ + − sudo ln -s /usr/bin/nodejs /usr/bin/node+ − ==== Einzelne Module von Node.js ====+ + + + + + − ===== http - eingebauter WebServer =====+ − Um Anfragen von außerhalb des <code>localhost</code> zu blocken, muss man in der <code>listen()</code>-Methode nach dem Port die Adresse des localhost (<code>"127.0.0.1"</code>) angeben.<ref>Vgl. [https://nodejs.org/api/net.html#net_server_listen API-Dokumentation von listen()]</ref> Beispiel:+ + + + + + + + + + + + + + + + − server.listen(port, "127.0.0.1", (err) => {+ − if (err) {+ − return console.log('something bad happened', err) + − + + + + + + + + + + + − console.log(`Server is listening on ${port}`)+ − }) − + + + + + − * [http://www.rejetto.com/hfs/ Rejetto HFS], OpenSource − * [http://www.aidex.de/software/webserver/ Aidex Mini Webserver], Freeware, wird nicht mehr weiterentwickelt. − === HTML === − + + + + − + + + − ==== Allgemeines ====+ − * [http://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/Guter_CSS-Stil CSS-best practices]+ − ==== Tooltips ====+ + + + − * [http://www.phcomp.co.uk/Tutorials/Web-Techologies/Tooltips-in-CSS.html Anleitung zur Erstellung von Tooltips mit reinem CSS]+ − − 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 − * [http://www.w3resource.com/twitter-bootstrap/tutorial.php Bootstrap 3.0 Tutorial]+ − ==== Building Blocks ====+ − [http://buildingfirefoxos.com/building-blocks/action-menu.html Building Blocks] sind CSS-Schnipsel, die designte Elemente wie Menüs, kleine Icons und Fortschrittsanzeigen bieten.+ + + + + + + + Zeile 305:
Zeile 417: + + + + + + + + + + + + + + + + + + + + + + + +
→Integration mit Nextjs
* Siehe [[Dynamisches DNS]].
* Siehe [[Dynamisches DNS]].
== Plattformanbieter ==
== Plattformanbieter ==
* [https://www.strato.de/server-cloud/ Strato ServerCloud]
* [https://www.strato.de/server-cloud/ Strato ServerCloud]
=== Traditionelle virtuelle Server im Netz ==
=== Storage - Anbieter ===
* [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.
=== Traditionelle virtuelle Server im Netz ===
==== Provider ====
==== Provider ====
| 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)
* 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 ==
* [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 ==
* 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 ==
=== Node.js ===
=== Node.js ===
[[JavaScript]] gibt es auch auf dem Server. Node.js basiert auf der Chrome-JavaScript-Engine.
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 ====
* [http://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/Guter_CSS-Stil CSS-best practices]
* https://every-layout.dev/
* https://cssreference.io/
==== Farbpaletten ====
* [https://coolors.co coolors.co]
==== Tooltips ====
* [http://www.phcomp.co.uk/Tutorials/Web-Techologies/Tooltips-in-CSS.html Anleitung zur Erstellung von Tooltips mit reinem CSS]
==== Tabellen ====
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]
==== CSS-Frameworks ====
* http://getskeleton.com/ - sehr minimales CSS Framework
* https://purecss.io/ - minimales CSS, unterstützt von Yahoo
* 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 =====
Siehe
Siehe
* [https://www.airpair.com/javascript/node-js-tutorial Tutorial für Node.js]
* https://ant.design/docs/react/introduce
==== Installation ====
====== 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" />);
...
===== Node.js auf Ubuntu / Linux Mint =====
===== 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.
Siehe
* [http://www.w3resource.com/twitter-bootstrap/tutorial.php Bootstrap 3.0 Tutorial]
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
* [http://www.mashup-template.com/ Mashup Template]
====== Integration mit Nextjs ======
Siehe [[Nextjs]]
* 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
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
<pre>
<pre>
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;
</pre>
</pre>
=== Mini-Web-Server ===
====== 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/
* [[HTML]]
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/
=== CSS ===
====== Navigationsleiste, die auf Scrollen reagiert ======
* 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]
Siehe auch - ohne Bootstrap -: https://css-tricks.com/sticky-smooth-active-nav/
====== einzelne Features ======
* 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
==== Icons ====
==== Bootstrap ====
Siehe [[React#Icons]]
==== CSS Animationen ====
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].
==== CSS beim Druck ====
Siehe
* https://www.mediaevent.de/css/pagedmedia.html
* 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 ===
* 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 ==