Tino-Designs.com
  • Startseite
  • Portfolio
  • Über mich
    • Skillset
    • Leben und Heimaten
    • Leistungen
  • Blog
  • Kontakt
    • Impressum
  • EN
  • DE
Tino-Designs.com
  • Startseite
  • Portfolio
  • Über mich
    • Skillset
    • Leben und Heimaten
    • Leistungen
  • Blog
  • Kontakt
    • Impressum
  • EN
  • DE
Autor

admin

admin

AppsFeaturedHTMLSoftwareTutorialWebdesign

Was wird benötigt um eine Webseite zu erstellen?

von admin Mai 5, 2022
geschrieben von admin

Eine Webseite die im Internet aufgerufen werden kann besteht aus ein paar einfachen Komponenent. Diese möchte ich hier kurz vorstellen, um ein besseres Verständnis für das Thema zu bekommen.

  • Computer oder Laptop zum Erstellen der Seite
  • Editor, IDE oder WYSIWYG Editor
  • Grundkentnisse in HTML
  • Browser
  • Server/Hosting mit Domain
  • FTP Software

Eine moderene Webseite besteht zudem aus mehreren zusätzlichen Komponenten, wir CMS, HTML mit CSS, PHP und meist auch einer Datenbank mit SQL Abfragen (z.B. MySQL) um die Webseite interaktiv gestalten zu können.

Ich will mich hier aber auf die absoluten Grundlagen konzentrieren um das Thema einfacher zu Gestalten und am Ende besser verstehen zu können.

Computer oder Laptop zum Erstellen der Seite

Hier reicht ein einfacher Laptop der auch für Office Anwednungen genutzt werden kann. Ich persönlich arbeite lieber an einem großen Bildschirm und einem Rechner mit lieber etwas zu viel, als zu wenig Leistung. Das macht das Arbeiten an sich einfach leichter, weil der Rechner nicht so schnell an seine Überlastungsgrenze kommt und generell schneller arbeitet.

Editor, IDE oder WYSIWYG Editor

Eine Webseite ist im Grunde nichts anderes als eine ganz einfache Textdatei mit der Endung .htm/.html. Um diese zu bearbeiten reicht es vollkommen aus, einen ganz einfachen Texteditor zu nutzen, z.B. Notepad oder Editor von Windows. Für größere Arbeiten besser geeignet sind allerdings Editoren, die auch HTML erkennen und deren Befehle entsprechend formatiert darstellen. Atom ist z.B. dafür sehr gut geeignet.

Es gibt dann noch sogenannte IDEs. IDE steht für Integrated Development Environment, auf Deutsch, Integrierte Entwicklungsumgebung. Ein bekanntes Open Source IDE ist z.B. NetBeans. Diese Programme sind sehr Umfangreich, unterstützen mehrere Programmiersprachen und haben einige Features um das Programmieren, vor allem von größeren Projekten, zu vereinfachen.

Dann gibt es noch sogenannte WYSIWYG Editoren. WYSIWYG steht für, What You See Is What You Get, auf Deutsch, was du siehst ist was du bekommst. Das sind Editoren in denen man eine Webseite rein grafisch erstellen kann, ähnlich wie Dokumente in MS Word oder LibreOffice Writer. Man muss das HTML nicht selbst bearbeiten. Hört sich klasse an, funktioniert aber in der Praxis, aus verschiedenen Gründen nicht immer wirklich gut und zuverlässig.

MS Office oder andere Textverarbeitungsprogramme sind übrigens nicht geeignet. Man kann die erstellten Dokumente zwar auch als HTML Dateien abspeichern, die Darstellung lässt allerdings zu Wünschen übrig.

Grundkentnisse in HTML

Was in die .html Datei dann geschrieben wird nennt man, HTML, Hyper Text Markup Language. auf Deutsch, Hypertext Auszeichnungssprache. Wenn man diese Datei dann in einem Browser öffnet, werden die Elemente und Tags von HTML, vom Browser interpretiert, der dann die Inhalte dementsprechend darstellt.

Ein ganz einfaches Grundgerüst für eine HTML Datei sieht folgerndermaßen aus:

<!DOCTYPE html>
<html>
  <head>
    <title>Titel der Webseite</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />    
    <!-- Dies ist ein Kommentar. Kommentare werden im Browser nicht angezeigt. -->
  </head>
  <body>
    <p>Hello World!</p>
  </body>
</html>

Diesen HTML Quellcode, könnt ihr z.B. einfach kopierne und in eine einfache Textdatei einfügen. Die Dateiendung dann auf .html abändern und das ganze in euerem Browser öffnen. Da seht ihr dann – Hello World! – stehen. Voilá, das ist eure erste Webseite :).

Browser

Der Browser ist besonders wichtig, denn ohne kann man nicht überprüfen wie die Webseite oder Änderungen der Webseite wirklich aussehen. Browser interpretieren HTML zum Teil unterschiedlich, wer aber mit Mozilla Firefox oder Google Chrome arbeitet, bekommt relativ wenig Probleme. Webdesigner und Entwickler haben meist eine gnaze Palette an Browsern installiert. Microsoft Edge, Firefox, Chrome und Opera sind die bekanntesten.

Früher gab es noch Netscape Navigator und den guten alten Internet Explorer, der tatsächlich sehr oft HTML falsch oder einfach anders als die anderen Browser interpretiert hat.

Server/Hosting mit Domain

Ok jetzt haben wir also unsere erste kleine „Hello World!“ Webseite. Wie bekommen wir diese allerdings ins Internet, so dass diese auch meine Freunde und Kollegen anschauen können.

Dafür benötigt man Webhosting, angeboten von einem Webhoster. Hostinganbieter machen im Grunde nichts anderes als Speicherplatz, auf deren Server, zu vermieten. Ein Server ist im Grunde nichts anderes als ein Computer der ständig mit dem Internet verbunden ist und natürlich auch dafür optimiert ist Webseiten anzuzeigen.

Man bekommt vom Webhosting Anbieter neben dem Speicherplatz für die Webseite (Webspace) außerdem eine Domain unter welcher der Speicherplatz im Internet zu finden ist. Dies kann eine eigene Domain sein, wenn diese aber noch nicht vorhanden ist bekommt man meist eine etwas kompliziertere Internetadresse, z.B. http://meinekundennummer.webhoster.serverxy.com. Diese Internetadresse wird dann im Browser eingegeben und man deinen Webspace sehen.

Eine eigene Domain ist da natürlich schöner. Diese bekommt man vom Webhoster im Paket oder man muss sie zusätzlich dazubestellen. Die Preise variieren von ca. 10,-€ bis 40,- € im Jahr je nach Domainendung kann es auch mal mehr werden.

Vom Webhoster bekommt man dann Zugangsdaten um sich dort einzuloggen und Dateien der Webseite auf den eigenen Webspace hochzuladen. Dies macht man mit dem sogenannten File Transfer Protokoll.

FTP Software

FTP steht für File Transfer Protokoll, auf Deutsch, Dateiübertragungsprotokoll und ist eine Schnittstelle um Dateien vom eigenen Computer auf einen mit dem Internet verbundenen Server zu übertragen.

Vom Webhoster bekommt man hierfür Zugangsdaten. Diese gibt man im FTP Programm ein und dann bekommt man eine Dateiübersicht ähnlich wie auf der eigenen Festplatte im Explorer. Nur ist die Übersicht jetzt nicht die eigene Festplatte sondern die des Webspaces.

Die meisten FTP Programme zeigen Standardmäßig den eigenen Rechner links und den Server rechts an. Per Doppelklick, oder Drag and Drop mit der Maus, lassen sich Dateien nun ganz einfach auf dem Server ablegen, überschreiben oder herunterladen.

Das aktuell bekannteste FTP Programm ist FileZilla. Es ist Open Source, kostenlos und erhält regelmäßige Updates.

Sobald man nun die Dateien vom lokalen Rechner per FTP auf den Server hochgeladen hat, sind diese auch unter der eigenen Domain bzw. der von Hoster zur verfügung gestellten Internetadresse abrufbar. Online ist eure erste Webseite :).

Wichtig: Die erste HTML Datei die in einem Ordner oder der Domain der Webseite aufgerufen wird, ist fast immer, wenn nicht anders auf dem Server konfiguriert, die Datei mit dem Namen index.html. D.h. wenn ihr eine Webseite erstellt, dann muss der Dateiname der Startseite der Webseite index.html sein.

Wenn euch die kleine Einführung gefallen hat, dann lasst doch einen Kommentar da. Ich würde mich freuen 🙂

Mai 5, 2022 0 Kommentar
4 FacebookTwitterPinterestWhatsappEmail
AppsFeaturedFreeGrafikSoftware

Echte kostenlose Alternative zu Photoshop

von admin Mai 3, 2022
geschrieben von admin

Einführung

Photoshop kennt jeder, zumindest den Begriff. Adobe, die Firma hinter der Bildbearbeitungssoftware, hat damit schon vor Jahrzehnten den Standard in der Branche gesetzt. Was ursprünglich zur Bild- und Photobearbeitung entwickelt wurde ist mittlerweile weitaus mehr und dient neben Fotografen, auch Grafikern, Druckereien, digitalen Künstlern, Webdesignern und mehr, als absolut unverzichtbares Werkzeug. Der Umfang, die Möglichkeiten, von und mit Photoshop, sind mittlerweile gefühlt grenzenlos wenn es um Bild und Grafik geht. Das hat seinen Preis. Was früher noch im 4-stelligen Bereich mit einer einmaligen Zahlung erworben werden konnte, gibt es mittlerweile nur noch als Abo. Die Kosten sind jeden Monat fällig, auch für den kleinen Unternehmer oder Hobbykünstler, der sich evtl. nur 1 bis 2 mal im Monat an das Programm setzt.

ausgedient

Alternativen gibt es. Naja, sagen wir es gibt sie, nur eben nicht annähernd mit den Möglichkeiten und Funktionen wie es Photoshop bietet. Echte Alternativen gibt es also nur bedingt und kostenlose noch viel weniger. Eigentlich keine, dachte ich bis vor ein paar Jahren auch noch.

Allerdings möchte ich euch hier eine Software vorstellen die sehr nah dran kommt und auch für Profis eine absolute Überlegung wert ist. Die Software beobachte ich mittlerweile seit einigen Jahren und die Entwicklung hat mich nicht enttäuscht, im Gegenteil. Ich bin begeistert und nutze für meine Grafik und Bildarbeiten fast nur noch dieses kostenlose Open Source Programm. Neben meiner uralten Version von Photoshop (CS 1, Versionsnummer 8.0, aus dem Jahr 2003), die ich mittlerweile so gut kenne, und immer noch tut was sie soll, dass ich damit in vielen Dingen einfach am schnellsten Arbeiten kann.

Jedoch hat das fast 20 Jahre alte Programm in einigen Bereichen einfach ausgedient und aus Kostengründen, sowie meiner Überzeugung von Open Source Software, ist es bei mir nie zu einem Upgrade gekommen. Dazu muss ich sagen, dass sie für mich als Webdesigner und Grafiker völlig ausreichend war, zumindest bis vor zwei bis drei Jahren noch, als ich mich dann doch auf die Suche nach einer Alternative machte. Das Original war schlicht und einfach zu teuer, und ein Freund von Abos bin ich aufgrund der laufenden Kosten überhaupt nicht. Erst recht nicht wenn Photoshop als Webdesigner nicht mein Hauptwerkzeug ist.

Alternativen

Eine gute Alternative musste also her. Gefunden habe ich erst mal nichts. zumindest nichts was wirklich stabil läuft, einigermaßen ähnlich wie Photoshop aufgebaut ist, so dass ich nicht erst eine Einlernphase von mehreren Monaten brauche und nichts kostet oder zumindest bezahlbar ist.

GIMP war bekannt, ist relativ stabil, aber funktioniert aus meiner Sicht einfach anders als Photoshop und ist sehr gewöhnungsbedürftig. Dann gab es ein paar bezahlbare Alternativen, aber dort hat mich wieder immer ein fehlendes Feature gestört oder die Tatsache, dass es nur auf dem MAC erhältlich ist oder nur auf Windows läuft. Linux? Wurde nicht mal erwähnt, auch wenn Linux mittlerweile nicht nur den Webservermarkt beherrscht.

aller Anfang ist schwer

Ein Programm viel mir dann aber doch auf und ich habe es getestet. Erfolglos. Was heute mein fast einziges Programm in Sachen Druck, Bild-, und Grafikbearbeitung ist, war vor ein paar Jahren noch so instabil, dass ich mich nicht getraut habe etwas professionelles darin zu erstellen. Es ist einfach ständig abgestürzt, hängen geblieben oder war so verdammt langsam, dass eine normale Nutzung einfach nicht möglich war. Oft saß ich da und wünschte mir einfach nur die Features problemlos nutzen zu können. Sie überstiegen vor Jahren schon was mein altes Photoshop konnte.

Nun, das war vor ein paar Jahren. Und das Programm mit der damaligen Versionsnummer 3.+ ist spätesten mit Version 4.+ erwachsen und stabil geworden. Sehr stabil. Das Entwicklerteam macht einen super Job eine Open Source Software zu erstellen, mit Features die zum Teil sogar von Adobe kopiert und in Photoshop eingebaut werden. Mittlerweile ist Version 5.+ veröffentlicht.

Krita bekommt den Zuschlag

Darf ich vorstellen, Krita. Das professionelle und kostenlose Open Source Malprogramm.

Zugegeben, es ist keine Kopie von Photoshop und die Werkzeuge funktionieren zum Teil anders und auch die Shortcuts sind anders belegt. Macht es das zu einer schlechten Alternative? Oh nein!

andere Herkunft

Krita kommt aus dem Bereich für digitales Malen und digitale Kunst. Hat mittlerweile aber einen Funktionsumfang in den Bereichen Illustration, Bildbearbeitung, und Druckmedien, die vollkommen ausreichen dieses Programm dafür professionell zu nutzen.

Währenddessen kommt Photoshop ursprünglich aus dem Bereich der Bildbearbeitung. Aber jeder Grafiker und digitale Künstler weiß, dass Photoshop auch für diese Bereiche die unangefochtene Nummer eins ist. Digitale Zeichnungen und manuelle Renderings sind in Photoshop gang und gäbe auch wenn das Programm ursprünglich für Bildbearbeitung entwickelt wurde.

Top Entwickler

Ähnlich verhält es sich mit Krita und der Bildbearbeitung. Sehr erfreut war ich als das Programm ab Version 4.+ endlich ohne Probleme startete und alle Features problemlos genutzt werden konnten. Nicht ohne Grund. Das Entwicklerteam von Krita hat alleine von 2020 bis Ende 2021 14 Releases veröffentlicht. Dabei in jedem Release Bugfixes ohne Ende. Die Stabilität der Software auf allen drei großen Betriebssystemen (Windows, Macintosh und Linux), stand, und steht immer noch, an oberster Stelle.

Dazu kommen neue, zum Teil sehr innovative Features. Der Funktionsumfang übersteigt meine altes Photoshop bei weitem. Zugegeben ein Programm aus dem Jahr 2003 ist einfach veraltet und das neue Photoshop in vielen Belangen wohl immer noch bei weitem besser. Aber bei allen? Auf keinen Fall. Wer gern auch mal mit dem Stylus Pen zeichnet wird beeindruckt sein von den Möglichkeiten und Brushes in Krita. Gibt es Bildbearbeitungstools und Filter? Ohne Ende. Selbst PSD Dateien können geöffnet und bearbeitet werden. Auch wenn die Kompatibilität hier nicht immer 100% ist, geht Krita den Weg für offene Systeme und Dateiarten, anstatt zu versuchen das eigene Format (.kra) in der digitalen Kunst als Standard zu positionieren. Immerhin handelt es sich um ein Open Source Programm, dass mit Spenden weiterentwickelt wird. Möglichst viel Transparenz bringt auf Dauer mehr, ist hier Teil der Philosophie.

Kiki, das Maskottchen von Krita.

Fazit

Wer eine kostenlose Photoshop Alternative sucht, bereit ist etwas Zeit zum einlernen einzuplanen und keinen Photoshop Klon benötigt. Ist mit Krita sehr sehr gut bedient.

Auch wer Künstler, Fotograf oder Designer ist und die ein oder andere Möglichkeit, das ein oder andere Feature, bei Photoshop vermisst, oder ein zusätzliches Werkzeug mit weiteren Möglichkeiten ausprobieren möchte, ist bei KRITA genau richtig.

Die Software gibt es kostenlos unter krita.org für Mac, Windows und Linux.

Mai 3, 2022 0 Kommentar
3 FacebookTwitterPinterestWhatsappEmail
DownloadsFeaturedFreeHTMLTemplates

Full Cover, responsives HTML Template

von admin April 29, 2022
geschrieben von admin

Eine kostenlose und einfache, gut aussehende, responsive HTML/CSS-Vorlage mit vollständigem Cover Hintergrund. Perfekt für anstehende Websites und Projekte, Einführungsseiten oder sogar als Teil anderer Vorlagen.

Das Template basiert auf W3.css und kann frei verwendet werden. Das Bild kann leicht ausgetauscht werden, daher passt es zu fast jedem anderen Design oder jeder anderen Website.

Live Vorschau | Download (zip)

April 29, 2022 0 Kommentar
0 FacebookTwitterPinterestWhatsappEmail
DownloadsFeaturedFreeGrafikWallpaper

Linux (Ubuntu) Wallpaper

von admin November 16, 2021
geschrieben von admin

Ich hab ein paar schöne, hochaufgelöste Desktop Wallpaper mit dem Ubuntu Logo erstellt. Statt sie nur für mich alleine zu nutzen, denke ich wäre es schön wenn andere auch was davon haben. Deshalb habe ich mich dazu entschieden sie hier zu teilen. Das Format ist 3840px x 2160px.

Viel Spass beim nutzen, ich würde mich über einen Kommentar freuen.
Bei kommerzieller Nutzung bitte auch kurz Kontakt aufnehmen.

Dankeschön ich bin gespannt ob sie euch gefallen und welches euer Favorit ist. Bei mir ist es aktuell das dunkle.

Download Full Resolution
Download Full Resolution

Download Full Resolution
Download Full Resolution
November 16, 2021 0 Kommentar
0 FacebookTwitterPinterestWhatsappEmail

Suche

Neueste Beiträge

  • Was wird benötigt um eine Webseite zu erstellen?
  • Echte kostenlose Alternative zu Photoshop
  • Full Cover, responsives HTML Template
  • Linux (Ubuntu) Wallpaper

Neueste Kommentare

    Kategorien

    • Apps
    • Downloads
    • Featured
    • Free
    • Grafik
    • HTML
    • Software
    • Templates
    • Tutorial
    • Wallpaper
    • Webdesign

    Über Tino-Designs

    Über Tino-Designs

    Selbständig seit 2003 im Bereich Web-Entwicklung und Medien Gestaltung. — Angebote, Informationen, Hilfen, Leistungen, Downloads und mehr rund um die Bereiche der modernen Medien des Internet, Druck sowie Audio und Video.

    Categories

    • Apps (2)
    • Downloads (2)
    • Featured (4)
    • Free (3)
    • Grafik (2)
    • HTML (2)
    • Software (2)
    • Templates (1)
    • Tutorial (1)
    • Wallpaper (1)
    • Webdesign (1)

    Popular Posts

    • 1

      Was wird benötigt um eine Webseite zu erstellen?

      Mai 5, 2022
    • 2

      Full Cover, responsives HTML Template

      April 29, 2022
    • 3

      Linux (Ubuntu) Wallpaper

      November 16, 2021

    AUF DEM LAUFENDEN BLEIBEN

    Melde Dich bei meinem Newsletter an um über neue Blog Beiträge, Tips, Downloads und mehr informiert zu werden!

      © 2022 - Tino-Designs.com. All Rights Reserved.
      Sitemap | Datenschutz | Impressum | Privacy Settings

      Tino-Designs.com
      • Startseite
      • Portfolio
      • Über mich
        • Skillset
        • Leben und Heimaten
        • Leistungen
      • Blog
      • Kontakt
        • Impressum
      • EN
      • DE
      © 2022 - Tino-Designs.com. All Rights Reserved.
      Sitemap | Datenschutz | Impressum | Privacy Settings
      de_DE
      de_DE
      en_US