HTML Einfach HTML Einsteiger Frage zum Programmierkonzept

Pille1002 · 8. September 2017

Hallo Zusammen,

ich spiele gerade ein wenig mit HTML & JS.
Ich möchte mir eine kleine (Web) Anwendung schreiben, ich verwende hierzu HTML / JS und Bootstrap (für responsive).

Meine Frage:
In den Anfängen von HTML wurden eine Website mit Frames aufgeteilt (Head/Content/Footer usw.).
Da Frames nicht mehr verwendet werden überlege ich mir gerade wie momentan in der Modernen Webentwicklung sauber getrennt wird zwischen diesen bereichen.
In HTML 5 gibt es nun ja extra TAGs hierfür (Header / Footer usw).

Konkret stehe ich grad vor der Überlegung, das ich auf meiner Website oben eine Navbar (Bootstrap) eingefügt habe und mit einem Button auf eine Unterseite springen möchte (in meinem Verständnis würde ich jetzt einfach nur die unterseite.html aufrufen), dort müsste aber ja wieder die komplette Navbar/JS src / Bootstrap src eingebunden werden usw..

Ich denke das man heute einfach nur den Content austauscht in der Index?
Oder wie ist den heute das aktuelle verfahren hierzu?
Gerne auch einen Link.

Meine HTML Kenntnisse sind schon Jahre alt, daher bin ich momentan wieder eher ein Einsteiger wenn es um Web- Architektur geht.

Danke

Lawnmower · 8. September 2017

Wenn Du serverseitig z.B. mit PHP arbeitest, kannst Du Includes verwenden um z.B. die Navbar auszulagern.

Das mit Content austauschen, macht man mit AJAX (und das geht am besten mit Javascript), am einfachsten Du verwendest dafür das jQuery Framework (vereinfacht das Handling mit Javascript) und den dortigen Aufruf ajax() - die Dokumentation bei jQuery ist sehr gut und verständlich (solltest also mit diesen Stichworten weiterkommen). So könntest Du z.B. auch die Navbar auslagern und dann jeweils nachladen.

Pille1002 · 8. September 2017

Hallo Lawnmower,
das habe ich auch schon gelesen (Server seitig über PHP), ich verwende aber nur JS (Client seitig) HTML und CSS

Ergänzung (8. September 2017)

Lawnmower schrieb:
Wenn Du serverseitig z.B. mit PHP arbeitest, kannst Du Includes verwenden um z.B. die Navbar auszulagern.

Das mit Content austauschen, macht man mit AJAX (und das geht am besten mit Javascript), am einfachsten Du verwendest dafür das jQuery Framework (vereinfacht das Handling mit Javascript) und den dortigen Aufruf ajax() - die Dokumentation bei jQuery ist sehr gut und verständlich (solltest also mit diesen Stichworten weiterkommen).

Okey ..
JQuery als JS Framework verwende ich bereits..
Also wird der dynamische austausch immer noch mit AJAX gemacht.
Dachte in denn ganzen Jahren hätte sich mehr getan ^^ und es gibt schon "fancyere" Möglichkeiten..
Dank dir

Cool Master · 8. September 2017

Die Frage ist was willst du machen?

Ich würde auf ein CMS setzen und mich mit der entsprechenden Template Engine auseinander setzen. Ich nutze Drupal 8, hat eine sau große Community, extrem viele Plugins und eine sehr gut Doku mit Videos von div. Leuten.

Ansonstne gilt das:

HTML:

<!doctype html>
<html lang="de">
    <head>
        <meta charset="utf-8">
        <title>Titel der Seite</title>
        <meta name="description" content="Kleine Beschreibung der Seite.">
        <meta name="author" content="Wer hat es geschrieben...">
        <link rel="stylesheet" href="css/styles.css?v=1.0">
    </head>
    <body>
        <header>
            <nav>
                <!-- Inhalt hier... -->
            </nav>
        </header>
        <div>
            <!-- Inhalt hier... -->
        </div>
        <footer>
            <!-- Inhalt hier... -->
        </footer>
        <script src="js/scripts.js"></script>
    </body>
</html>

Kantico · 8. September 2017

Nennt sich Semantisches HTML:
https://www.w3schools.com/html/html5_semantic_elements.asp

Skaro · 8. September 2017

Pille1002 schrieb:
JQuery als JS Framework verwende ich bereits..
Also wird der dynamische austausch immer noch mit AJAX gemacht.
Dachte in denn ganzen Jahren hätte sich mehr getan ^^ und es gibt schon "fancyere" Möglichkeiten..

Dort hat sich schon mehr getan. Gibt mMn schon viel bessere Sachen als JQuery wie z.B. React oder Angular.

Angular von Google: https://angular.io/
React von Facebook: https://facebook.github.io/react/

Aktuell beschäftige ich mich mit React. React selbst ist nur für den DOM zuständig. Gibt viele Erweiterungen und ist alles Modular gehalten z.B. gibt es:
- React-Router für Single Page Apps wo man mehrere Seiten hat ohne die ganze Website neu zu Laden: https://reacttraining.com/react-router/
- Redux mit React-Redux "predictable state container" http://redux.js.org/

Und dann gibt es noch ein paar schöne UI Framesworks wie:
- http://www.material-ui.com/
- https://react.semantic-ui.com/
(Kannst ja mal durch die Beispiele klicken.)

Für Datenbanken Zugriffe gibt es auch GraphQL (auch Facebook) was meiner Meinung nach eine richtig gute Idee ist: http://graphql.org/learn/

Edit: Aber für den Einstieg ist das alles nichts. Wollte dir trotzdem mal ein Überblick geben.

Pille1002 · 8. September 2017

Danke für den Überblick,

Angular JS2 ist mir ein Bergriff (Singe Page Seiten), hatte ich aber erstmal ausgeschlossen.
React ist mir nur vom Namen bekannt (schaue ich mir mal an).

@Kantico du beziehst dich auf die neuen HTML5 Tags, schau ich mir auch nochmals an..

danke !

kling1 · 8. September 2017

spa ist die lösung.. da kannst du die üblichen evrdächtigen verwenden.. react, vue.js oder angular...

Teisi · 9. September 2017

Nur um das vielleicht zu spezifizieren, was ist für dich eine Webanwendung?

Suche

HTML Einfach HTML Einsteiger Frage zum Programmierkonzept

Pille1002

Lt. Junior Grade

Lawnmower

Maître de cuisine Pro

Pille1002

Lt. Junior Grade

Cool Master

Fleet Admiral

Kantico

Gast

Skaro

Lt. Commander Pro

Pille1002

Lt. Junior Grade

kling1

Gast

Teisi

Lt. Junior Grade