WEBSEITEN Projekt, speziell auf BANANAJOE

VORRAUSSETZUNGEN
EMPFEHLUNGEN SIND MIT MARKIERT.
Lass ein Danke da.

Dies ist als eine kleine Anleitung zu verstehen, um eine Webseite ins Netz zu bringen.

Was brauche ich:?

• 1.) eine eigene Mail Adresse, nur für das Projekt. z.B. page-bananajoe.@.web.de
  Diese Mail wird zur Registrierung und Wartung der Page benötigt.
• 2.) eine Domain oder eine Eigene Domain.
  z.B. www.bananajoe.lima-city.de von einem kostenlosen Hoster oder, als eigene Domain: www.bananajoe.de , www. bananajoe.com ...etc. aber eine Eigene Domain muss extra registriert und gemietet werden.
• 3.) einen Dienstleister (Hoster) der meine Page (Seite) fürs Internet bereit stellt.
  Aber Dienstleister bedeutet Kosten €
  z.B. Strato.de oder 1und1.de ...etc.
  Aber, es gibt auch Kostenlose Dienste z.B. Ĺima-City.de
  
• 4.) Inhalt und Code für meine Seite (Page),

- entweder selbst erstellen in HTML
- oder durch CMS-Lösungen (Content Managment Systeme).
- eigener Code ist schwierig oder zumindest etwas tricky.
- CMS-Lösungen sind Idiotensicher, einfach.
- für CMS-Lösungen gibt es verschiedene Mobile Ansätze, Apps wie in den TV-Spots beworben.
Aber: Vermutlich werden diese CMS-Apps auch etwas € Kosten,
denn die Katze der Entwickler muss auch was fressen.
+ Mir bekannte aber noch nicht probierte CMS-Apps sind z.B. JIMDO, WIX, ...etc.
Vermutlich wirft der PlayStore noch unzählig weitere Apps aus.

Wie fange ich an: ?

+ Ich registriere eine neue E-Mail Adresse für mich.
+ Ich suche im Netz nach kostenlosen Hostern und führe nach getroffener Auswahl eine Registrierung durch.
+ Natürlich werde ich von jeden Schritt (Step) einen Screenshot machen.
Ich vergesse sonst, welche Daten ich verwendet habe.
+ Selbstverständlich lege ich auch ein Lesezeichen (je eines) für die Startseite des Hosters sowie für die Login-Seite des Hosters an.
!! wie Anfangs beschrieben und im Titel der Abhandlung, ist dies nur ein PROJEKT oder ein sogenannter TESTLAUF, um zu sehen und zu verstehen wie der Hase läuft (folge denn Mauerhasen).
+ Wenn ich alle Schritte bis hierhin duchgearbeitet habe, dann habe ich eine Webseite im Internet nur ohne Inhalt (content).
+ Auf dem Gerät /SD Card lege ich einen Aussagekräftigen Ordner, nach dem Schema: webseite_projekt_2016 an, in welchem ich später weitere Ordner erstelle oder schiebe. Dort erstelle ich auch einen Ordner für die Screenshots.
Nur so habe ich alle an einem Ort zusammen und finde die zugehörigen Daten.
Die Zugangsdaten für meine Webseite, speichere ich selbstverständlich (sogar vorrangig) noch in meiner Passwort Manager App.
Meine bevorzugte App ist dafür Save in Cloud aus dem PlayStore, welche auch für den Desktop PC erhältlich ist.

Wie geht es Weiter:?

+ Ich brauche Inhalt für oder auf meiner Page, welchen ich sowieso erstellen muss, über welchen ich mir Gedanken und Aufzeichnungen machen sollte.
Es ist von Vorteil wenn ich die einzelnen Unterseiten auf seperate Papierseiten skizziere, und achte darauf so einfach wie möglich zu schreiben, den Text nicht unnötig aufblase. + Jetzt muss mein Kram nur noch für eine Webseite aufgearbeitet werden.
+ Entweder ich schreibe den HTML Code selbst und gestalte sogar mein CSS-Code selbst, oder ich verwende bereits vorhandenen Code (Quell Code) welchen ich auf meine Seite anpasse und an meine Bedürfnisse. Es gibt diverse Möglichkeiten um den Quell Code einer Webselte auszulesen und zu Kopieren.
! Aber AUFGEPASST:! Meines Erachtnes, ist dieser Quell Code einer Webseite Urheberlich geschützt. Zumindest der CSS-Code (welcher das Design bestimmt) ist in den meisten Fällen mit einem Copyright versehen. Ich habe bereits Copyright Vermerke im Code einer oder zwei CSS-Code Dateien gelesen.
!* Ausserdem: wenn ich CODEN (Programieren) nicht vestehe oder beherrsche, können mir HTML-Tutorials als APP oder als YouTube Videos helfen.
Oder ich verwende eben eine CMS-Lösung. (Content Managment Systme) also Inhalts Verwaltungs Systeme.
+ Ich suche mir aus den Web Store/PlayStore einen Anbieter für CMS-Lösungen heraus, sowas wie JIMDO, WIX, etc.
Diese Webseiten Baukästen breiten die Webseiten auch gleich im sogenanten RESPONSIVE - Design auf, was wiederum soviel bedeutet wie: Die erstellte Webseite sieht auf allen Endgeräten gleich aus (PC oder Mobil) und eine reine PC-Webseite wird auf einem Mobilgerät nicht überbrodeln.
Mann kennt das ja, wenn man eine Mobile Webseite auf dem Smartphone betrachtet, ist alles gut. Nach dem Wechsel in die Desktop Ansicht, ist es mit einer Übersichtlichen Aufteilung vorbei.
+ Ich lade nach vorheriger Recherche drei oder vier dieser CMS-APPS auf mein Gerät und studiere die Geschäftsbedingungen und Kosten dieser Dienstleistung.
sehr genialer kleiner Code für eine Seite
auch wenn diese Musterseite eher fur Dokumente gedacht ist.
Meine erste Hompage
Da ist der Name Programm.
sehr nett und einfach beschrieben
(sehr wichtig um Rechtlich auf Sicher zu sein)
jeden Webseite auf der Gewerbliche Handlungen abgewickelt werden, MÜSSEN ein IMPRESSUM haben.

Webseiten Projekt: Blatt 2

Wenn ich eine eigene kleine Seite ins Netz stellen will, ohne CMS oder anderer Grafischen Spielereien, dann sollte ich mit einen Überblick verschaffen, wie eine Webseite aufgebaut ist.
Damit meine ich jetzt nicht den HTML Quellcode einer Seite, darüber hatte ich ja schon geschrieben, sondern vielmehr WIE eine Seite auf dem Server des Hosters abgelegt wird.
Zu diesem Zweck gibt es zum Beispiel ein sehr mächtiges Tool, welches Webseiten "Spiegeln" kann, was bedeutet, dass alle Dateien , welche der entsprechenden Webseite auf den Computer oder ein mobiles Endgerät gespeichert werden und dabei so verändert werden, dass die entsprechende Webseite offline betrachtet werden kann.
Für mobile Endgeräte ist meine favorisierte Anwendung dafür HTTP WEB COPIER , aus den PlayStore.
Noch einmal in der Wiederholung, Diese kleine App Kopiert mir die gewünschte Seite auf mein Gerät mit eben jener Struktur, mit welcher die Dateien auf dem dazugehörigen Server (Hoster) liegen.

Was kann ich jetzt damit machen•••?
Wenn ich mit dem Datei-Explorer meines Gerätes die herunter kopierten Dateien finde, klar finde ich diese, habe ja vorher das Zielverzeichnis benannt, dann sehe ich etwa sechs oder mehr Dateien in einem Ordner, welcher passenderweise den Namen der Kopierten Webseite trägt.
Dort sehe ich dann, dass zum Beispiel alle FOTOS welche auf der Webseite eingebunden werden in EINEM Ordner abgelegt werden, die ICONS oder EMOTJIES in einem anderen Ordner, unterstützender CODE in Form von JAVASCRIPT und weitere in einem Ordner der SCOURCE heißt abgelegt werden und in einem Ordner sind die weiteren Seiten der Webseite abgelegt.

Noch einmal Kurz.

• Ein Ordner für FOTOS (Images)
• ein Ordner für CODE (scource),
• ein Ordner für Icons,
• ein Ordner für weitere Seiten (der Webseite),
• vielleicht ein Ordner mit FONTS (Schriftarten),
• ein Ordner für das Design (CSS) der Webseite,
und
• ausserhalb der Ordner finden wir noch eine index.html Datei.

Wichtig. Diese index.html Datei ist die Startseite der entsprechenden Webseite.
Eigentlich auch der Zentrale Anlaufpunkt der Seite
Aber bleiben wir einmal dabei, nur eine EINSEITIGE Webseite, eine Personalpage oder Landingpage ins Netz stellen zu wollen. Dann haben wir nur ein HTML Dokument, welches wir bearbeiten, nämlich das INDEX.HTML Dokument. Soweit nur die Vor Informationen. Wir installieren aus dem PlayStore die App Http Webseite COPIER, und einen Editor mit welchem wir den Code vernünftig bearbeiten können. Mein Favorit DRIODEDIT. Dann suche ich mir eine kleine niedliche Seite aus dem Netz, nach deren Muster ich meine Seite gestalten möchte. Wir nehmen hier heute einmal www.Nicepops.de . Sehr klein, sehr übersichtlich. Wenn wir diese Seite nun Kopiert haben und in unserem Zielordner sehen, dann sehen wir die eingangs erwähnten vier oder sechs Ordner der Seite. In etwa: "Code", "JS- (was für Javascript steht), "Images, "Style" und das "HTML". Wir haben also eine funktionierende Webseite aber vollständig OFFLINE. Das bedeutet für uns, dass wir unsere Versuche diese Seite an USER Projekt anzupassen, jederzeit auf Funktionalität und Aussehen überprüfen können. Wir ersetzen die eingebundenen Fotos durch unsere Eigenen, verändern den Text nach unseren Vorstellungen, und später können wir auch noch das Stylesheet (CSS) nach unserem Geschmack modifizieren. Sehen wir uns als ERSTES die HTML-DATEI an, denn in dieser steht letztendlich der später auf der Seite zu sehende Text (oder Fotos etc). Wir können diese HTML-DATEI mit dem Text-Editor öffnen und damit auch bearbeiten, also editieren. Aber. In einem reinen Text-Editor sieht der Text, schwarzer Text auf weißem Grund gleichmäßig aus. Es gibt keinen optischen Hinweis auf die Relevanz der jeweiligen Textzeile. Besser macht es da ein HTML-EDITOR, welcher den HTML CODE farblich anpasst und übersichtlich darstellt. So sind dort die puren HTML-ELEMENTE in einer Farbe, die Script Anweisungen in eigener Farbe und worauf es uns ankommt, der später Sichtbare Text auf der Seite hat eine Eigene Farbe. Dadurch können wir die richtigen Text Passagen gut erkennen und auch dementsprechend bearbeiten. Ja sicher, wir können den Text auch durch genaues betrachten der Datei lokalisieren und verändern. Hier noch eine Einschränkung zudem mit der Spiegelungs- Software erstellten Seite. Das ist wichtig um es genau zu verstehen. Diese so kopierte Seite wird durch das Programm umgeschrieben damit wir es Offline lesen können. In dem HTML Code entdecken wir die entsprechenden Veränderungen des Datei Pfades welcher nun natürlich auch den Speicherplatz auf unserem Gerät hinführt . Diese Umleitung des Datei Pfades müssen wir entweder noch zu einem Pfad auf unsere Seite ändern , oder.... hier kommt dann noch ein spezieller Trick zu diesem Thema, wir kopieren die Originaldatei von der erkorenen Webseite herunter und wir haben damit nicht mehr so viele Pfad-Umbenennungen. Wir benötigen nur die HTML DATEI , denn die anderen Dateien , Fotos , Scripte, Icons, etcetera bleiben davon unberührt . Die restlichen Schritte in diesem Projekt sind eher Finger Übungen . Textzeile für Textzeile wird auf unser Projekt umgeändert . Keine Sorge . Es muss nicht jedes Wort einzeln gelöscht werden, sondern es lassen sich natürlich ganze Textblöcke oder Textzeilen aufeinmal löschen. Ebenso lassen sich von uns vorgeschriebene Textzeilen oder eben auch ganze Textblöcke , mit einem Rutsch in das HTML Dokument kopieren. Was gibt es noch zu beachten ? Wenn wir die eingesetzten Bilder oder Hintergründe durch unsere eigenen ersetzen wollen , so müssen wir darauf achten, UNSERE BILDER mit den ursprünglichen Dateinamen zu versehen , denn nur so wird sichergestellt , dass die Bilder, Icons, etcetera, vom HTML Dokument auch gefunden und richtig angezeigt werden. .

SAMMLUNG WIRD FORTLAUFEND ERGÄNZT

— geändert am 29.08.2016 18:36:17