Router IT

UP

"Datensicherung ist ein kritischer Aspekt sowohl für Privatpersonen als auch für Unternehmen, wobei professionelle Strategien und Technologien zum Einsatz kommen, um Datenverlust zu verhindern. Netzwerktechnologie und Smarthome Systeme sind zunehmend miteinander verbunden, das eine effiziente und sichere Datenkommunikation innerhalb des intelligenten Wohnraums ermöglicht. Im Bereich der Office-Lösungen bieten Private Clouds, Public Clouds und lokale Installationen flexible Optionen für den Informationsaustausch und die Zusammenarbeit, während Smartphones und Notebooks in Verbindung mit Festnetz- und Mobilfunkdiensten eine umfassende Konnektivität gewährleisten. Diese Technologien bilden zusammen ein Ökosystem, das die moderne digitale Interaktion und Datenverwaltung unterstützt."

Willkommen bei meiner kleinen Unternehmung!

Meine Dienstleistungen sind:

Datensicherungen; professionelle Datensicherungsstrategien und Technik für Privat und Gewerbe
Netzwerktechnologie und Smarthome
Office Lösungen; Private Cloud, Public Cloud und lokale Office Installationen für Informationsaustausch, Textbearbeitung, Präsentationen, Kalkulation, Rechteverwaltung
Smartphones, Notebooks, Festnetz und Mobilfunk

Die Webseite ist mit vielen modernen Webbrowsern kompatibel; Chrome, Chromium, Firefox, Samsung Browser, Apple Safari. Im Apple Safari kann es zu kleineren Problemen in der Anzeige kommen.

"Datensicherung ist ein kritischer Aspekt sowohl für Privatpersonen als auch für Unternehmen, wobei professionelle Strategien und Technologien zum Einsatz kommen, um Datenverlust zu verhindern. Netzwerktechnologie und Smarthome Systeme sind zunehmend miteinander verbunden, das eine effiziente und sichere Datenkommunikation innerhalb des intelligenten Wohnraums ermöglicht. Im Bereich der Office-Lösungen bieten Private Clouds, Public Clouds und lokale Installationen flexible Optionen für den Informationsaustausch und die Zusammenarbeit, während Smartphones und Notebooks in Verbindung mit Festnetz- und Mobilfunkdiensten eine umfassende Konnektivität gewährleisten. Diese Technologien bilden zusammen ein Ökosystem, das die moderne digitale Interaktion und Datenverwaltung unterstützt."

Willkommen bei meiner kleinen Unternehmung!

Meine Dienstleistungen sind:

Datensicherungen; professionelle Datensicherungsstrategien und Technik für Privat und Gewerbe
Netzwerktechnologie und Smarthome
Office Lösungen; Private Cloud, Public Cloud und lokale Office Installationen für Informationsaustausch, Textbearbeitung, Präsentationen, Kalkulation, Rechteverwaltung
Smartphone, Notebook, Festnetz und Mobilfunk

Den vollen Funktionsumfang der Seite habt Ihr nur, wenn der Webbrowser die Desktopansicht unterstützt!

Diesen Link klicken für eine Spende an die Ukraine

//News und Infos//

//KalenderWoche 20//

Animierte Fotos

Wollt ihr Fotocollagen zaubern oder einfach coole Karten zum Ausdrucken machen oder eine kleine Animation mit euren Bildern erstellen, aber habt gerade kein Geld für ein professionelles Bearbeitungsprogramm? Keine Sorge, für euch, die ihr bereit seid, ein bisschen was dazuzulernen, gibt es eine echt preiswerte Lösung für dieses Problem.

Habt ihr mein aktuelles YouTube Video schon gesehen? Dann schaut unbedingt mal das Intro an. Das ist letztlich eine ganze kleine Webseite. Oder geht auf meine Seite xcomweb.de. Dort findet ihr den Code für eine Webseite "XMAS Special". Ebenfalls eine Animation, aber bereits umfangreicher.

Wie baut man so eine Animation? Für den Start braucht ihr echt nichts Großes: Es reicht ein aktueller Webbrowser, ein Texteditor und ein kleines Nachschlagewerk. Das Nachschlagewerk kann ein spezifisches Buch zum Thema sein, oder ihr nutzt eine KI (Achtung: Eine KI kann euch zwar unterstützen, aber das Wissen müsst ihr euch selbst erarbeiten). Oder ihr schaut einfach mal auf der Mozilla Webseite nach. Der direkte Link dorthin: https://developer.mozilla.org/de/docs/Learn_web_development/Core/Structuring_content.

Welche Technologien sind nötig?

Ihr müsst euch mit der HTML-Technologie, die CSS-Styling-Technologie und ein bisschen JavaScript beschäftigen. Falls ihr eure Grafiken interaktiver gestalten wollt, hilft JavaScript mega, aber es ist kein Muss.

Was machen diese drei Technologien?

🏗️ HTML (Die Struktur) Das Fundament und die Wände. HTML legt fest, was auf der Seite steht. Ohne HTML gäbe es keinen Text, keine Bilder und keine Buttons. Es ist das Skelett deiner Website.

🎨 CSS (Das Design) Die Inneneinrichtung und der Anstrich. CSS bestimmt, wie alles aussieht. Farben, Schriftarten und Abstände sorgen dafür, dass die Seite nicht nur funktioniert, sondern auch gut aussieht.

⚡ JavaScript (Die Action) Die smarte Elektronik. JavaScript sorgt dafür, dass die Seite reagiert. Ob ein aufklappbares Menü, ein Like-Button oder interaktive Karten – JavaScript bringt Leben in die Bude.

Kurz gesagt: HTML liefert den Inhalt, CSS den Style und JavaScript die Magie. ✨

Wenn ihr nun ein Foto habt und dessen Helligkeit verändern möchtet, könnt ihr dafür CSS-Styles verwenden. Ein solcher könnte so aussehen:

img { filter: brightness(0.8) grayscale(100%);

Das würde bewirken, dass das Foto etwas abgedunkelt und in Schwarz/Weiß angezeigt wird.

Der vollständige Code für die Webseite (markieren und STRG+C für kopieren und STRG+V für einfügen bzw. auf dem Mac 'Command+C' und 'Command+V', auf einem Touchscreen den Finger gedrückt halten und markieren):

<!DOCTYPE html>

<head>

<title>CSS Bild-Effekt Beispiel</title>

<style>

body {

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

background-color: #f0f0f0;

font-family: sans-serif;

}

/* Der von dir gewünschte Style */

img {

filter: brightness(0.8) grayscale(100%); /* Standard: etwas dunkel & s/w */

width: 500px;

height: auto;

border-radius: 10px;

transition: filter 0.5s ease; /* Macht den Übergang weich */

}

/* Optional: Effekt beim Drüberfahren */

img:hover {

filter: brightness(1.1) grayscale(0%); /* Wird hell und farbig */

}

</style>

</head>

<body>

<div>

<h2>CSS Filter-Demo</h2>

<img src="<Pfad zu deinem Foto>" alt="Beispielbild">

<p>Fahre mit der Maus über das Bild, um den Effekt aufzuheben.</p>

</div>

</body>

</html>

Das ist ein einfaches Beispiel für eine grafische Animation auf einer Webseite, das kein JavaScript benötigt – nur HTML und CSS-Styling. Ihr müsst diesen Code nur noch in einer Datei mit der Endung „.html“ oder „.htm“ speichern. Danach klappt es, und jeder aktuelle Webbrowser zeigt es euch an.

Die Struktur der Webseite basiert auf sogenannten „Tags“ (englisch, Etikett/Markierung). Das sind diese Befehle mit den spitzen Zeichen. Der CSS-Style beginnt am Tag `<style>` und endet am Tag `</style>`, und wird vom Webbrowser automatisch gelesen und angewendet. Die restlichen Tags sind vom HTML und geben dem Browser die Anweisung, wie er die Seite – mit ihren verschiedenen Elementen – zusammenpacken soll.

Was passiert bei diesem Beispiel?

Euer Webbrowser lädt die Webseite komplett in seinen Speicher und muss dann quasi entscheiden, wie er das Ganze darstellen muss. Am Anfang geht es erstmal darum, dass er die Datei als Webseite erkennt – das ist ganz wichtig für den Browser, weil er sonst vielleicht nur den puren Code anzeigt, aber nicht die eigentliche Grafik.

Während diesem Vorgang stolpert der Browser über den `<img />` Tag. Dieser Tag sagt ihm dann: Hey, hier muss ein Foto eingebunden werden, das an einem ganz bestimmten Speicherort liegt und geladen werden muss. Dazu kommt noch, dass der Browser dank der CSS-Styles merkt, dass er bestimmte Formatierungen auf dieses `<img>` Tag anwenden muss. Diese Regeln stehen im CSS-Style unter dem Eintrag `img{...}`.

Das Foto im Beispiel wird hier mit Hilfe von CSS Styles vom Browser in einer festen Größe angezeigt – und zwar inklusive Rahmen, einem speziellen Filter für die Helligkeit und sogar einer kleinen Animation. Das läuft alles über einen ziemlich kleinen Teil des Webseiten-Codes. Und das ist erst der Anfang! Mit HTML und CSS könnt ihr hier noch echt viel mehr gestalten.

Was das Speichern der Webseite betrifft, ist das jetzt quasi ein kleines „Tricky“-Thema (vor allem, da wir natürlich auf die Kosten achten wollen). Selbstverständlich könnt ihr die Seite ausdrucken, wenn ihr einen Drucker habt – diese Option habt ihr immer. Achtet hier aber darauf, dass die Qualität des Ausdrucks stark von eurem Gerät abhängt. Eine andere Möglichkeit ist ein Screenshot oder, wenn es animiert ist, ein Bildschirmvideo. Die Qualität kann hier auch stark schwanken und hängt von dem Programm und den Einstellungen ab, die ihr verwendet.

Wie macht ihr ein Bildschirmfoto oder ein Video?

Die gute Nachricht: Sowohl Windows als auch macOS bringen dafür passende Programme mit. Unter Linux ist das oft einfacher – ihr habt entweder eine Funktion in eurem Desktop-System integriert, oder ihr könnt ein gutes Tool kostenlos nachinstallieren.

Bei mobilen Geräten ist es ähnlich: iOS bietet das Feature standardmäßig an, aber bei Android ist das nicht immer der Fall, aber mittlerweile eigentlich fast Standard. Falls ihr es nicht sofort findet, checkt mal die Benachrichtigungsleiste oder die Einstellungen. Sucht dort am besten nach „Screenrecorder“ oder „Bildschirmaufnahme“.

Wenn ihr euer Werk aber komplett ohne zusätzliche Programme speichern wollt, dann ist JavaScript in Kombination mit den „Canvas 2D“ Elementen die optimale Lösung. Ansonsten kann ich nur empfehlen, das Bild vor dem Einbinden in die Webseite in einem Bildbetrachter bearbeitet zu haben. ABER erstellt vorher eine Sicherung des originalen Fotos! Auch diese kleinen Bildbetrachter sind oft kostenlos in die Betriebssysteme integriert. Habt ihr ein aktuelles macOS zur Verfügung, dann könnt ihr sogar auf umfangreichste Einstellungen zugreifen, inkl. einer KI.

Ansonsten bleibt euch noch die KI in der Cloud, die ebenfalls Optimierungen an Bildern durchführen kann. Theoretisch kann man jetzt sogar in Google Fotos animierte Bilder mit der Gemini-KI erstellen, aber das kostet ein Monatsabo (aktuell gibt es wohl ein Sonderangebot). Eine einfache Bearbeitung von Fotos ist auch ohne KI mit Google Fotos möglich, aber dafür muss das Foto oder Bild in die Google Cloud geladen werden.

Tja, das war eine kleine Einleitung zu diesem Thema.

Infos, News und was sonst noch bleibt

Ich habe meine „Java Desktop“ App auf Version 0.6.0 gebracht! Falls ihr mein letztes YouTube-Video geschaut habt, habt ihr schon einen kleinen Vorgeschmack auf einige Neuerungen bekommen: Ich habe lokale künstliche Intelligenz (KI) integriert. Zum Beispiel gibt es jetzt einen Texteditor. Hier könnt ihr einen beliebigen Text eingeben, und die KI checkt diesen dann nicht nur auf Tippfehler, sondern hilft auch bei besseren Formulierungen. Dafür habe ich eine „HttpSender“-Klasse in die App gepackt, die dann im Editor benutzt wird. Die Klasse sorgt für die einfache Kommunikation mit der KI (bei mir ist das Gemma). Wollt ihr, dass die KI mehr als nur Rechtschreibung prüft – vielleicht sogar Skripte, die ihr im Editor schreibt – dann könnt ihr den Java-Code super einfach an eure Bedürfnisse anpassen. Oder fügt einfach eure eigenen Java- Klassen ein. Und das ist noch nicht alles: Ich habe auch die App „MonsterChat“ hinzugefügt. Das ist ein Versuch, eine KI-Schnittstelle speziell für Kinder zu entwickeln – und dafür nutze ich wieder diese instanziierte „HttpSender“-Klasse. Die KI läuft in diesem Fall mit einem Modelfile (englisch, Schemadatei) namens „Kuschelmonster“ und sendet entsprechend „Gefühle“. Diese „Gefühle“ werden vom Programm analysiert und zum Beispiel farblich dargestellt – so sieht jedenfalls die Theorie aus. Ihr könnt die Chat-App natürlich selbst an eure Bedürfnisse anpassen oder euer eigenes Modelfile verwenden. Ansonsten findet ihr ab und zu Buttons in der Taskleiste (wofür die wohl gut sind ;-), aber das ist Teil der dritten größeren Neuerung. Ich habe die App auf „MDI“ umgestellt. Das bedeutet: Die „Java Desktop“-App kann jetzt integrierte Java-Anwendungen selbst kontrollieren. Als Entwickler oder Entwicklerin habt ihr damit also viel mehr Kontrolle über die Fenster. Der Haken? Die Performance der App ist dadurch leicht gesunken. Ich habe zwar schon ein paar Code-Unsauberkeiten angepasst, aber der Code wird erst in Version 0.6.1 komplett überarbeitet sein. Aktuell werden beim Kompilieren noch etwa 14 Warnungen angezeigt, mit denen ich mich noch nicht im Detail beschäftigt habe. Für diese Prüfung des Compiler-Output kann man ebenfalls auf die Hilfe einer KI zurückgreifen. Einfach den Output in einen Zwischenspeicher mit dem Source Code laden (Datei, Pipe) und an die KI senden. Um meine App verwenden zu können, benötigt man weiterhin etwas mehr IT Wissen.

Die weltweit effizientesten, nachhaltigen Festplatten dank beispielloser Innovation:

Die Seagate Barracudas bieten hohe Kapazitäten und das mit geringen Anschaffungskosten.
Der Einsatzbereich sind z.B. alte Laptops, Desktop PC's und Home Server. Also Geräte, die viel Datenspeicher benötigen, aber nur bedingt speziellere Anforderungen haben.

Das Portfolio der Seagate Ironwolf reicht von HDD's bis hin zur NVMe für PCIe. Grundsätzlich können alle Ironwolf in einer Workstation bzw. Desktop PC oder einem Notebook verbaut werden. Aber primär sind diese Disks für Network Attached Storage (Netzwerkspeicher) ausgelegt. Diese Disks sind für den Dauerbetrieb mit höheren Lasten konzipiert.

Die Seagate Firecuda wird von Seagate speziell für das Gaming produziert. Wegen der hohen Performance der Disk und deren lange Haltbarkeit wird diese auch sehr gerne von Kreativentwicklern (Grafiker, Videobearbeiter und Entwickler) verwendet.