Wie man ein Frontend (UI) für meine Django-Website entwickelt


26

Ich lerne Django und bin neu in der Webentwicklung. Bitte entschuldigen Sie, wenn Sie diese Frage zu dumm finden.

Ich erstelle eine Facebook-Anwendung mit Django, die ich in Google App Engine hosten möchte. Das Projekt würde sich darauf konzentrieren, RSS / Atom-Feeds jeder Website zu lesen (das ist alles, was ich jetzt sagen kann).

Ich bin mir sicher genug, um die RSS / Atom-Dateien zu verarbeiten, aber ich mache mir Sorgen um den Front-End-Teil (Benutzeroberfläche) - "Der Designteil". Ich kenne mich mit HTML / CSS / JavaScript nicht aus (ich kann mit einfachen HTML-Inhalten umgehen, aber das führt zu keiner Gestaltung).

Zuerst dachte ich daran, Tools wie Dreamweaver oder eine gleichwertige Software zum Entwerfen der Benutzeroberfläche zu verwenden, aber als ich anfing, Django zu lernen und mich darauf einzulassen, schien es eine "nicht mögliche" Sache zu sein.

So,

  • Wie soll ich den UI-Teil meiner Site gestalten? Kann ich keine Tools wie Dreamweaver verwenden?

    • Wenn NEIN, was ist der beste Weg für jemanden wie mich, der JavaScript / CSS nicht kennt
    • Wenn JA, welche ist die beste Open-Source-Alternative zu Dreamweaver?
    • Kann Google App Engine all diese Probleme bewältigen?
  • Wie Leute, die mit Django umgehen, diese Vorlagenseiten bearbeiten. Der Django erwähnt, dass er die logischen (Ansichten) und Design-Teile (Vorlagen) so trennt, dass verschiedene Abteilungen in einem Unternehmen separat damit umgehen können. Aber in Anbetracht der Tatsache, dass die HTML-Seiten des Django mit "Tags" gefüllt sind, die in keiner Weise mit HTML zu tun haben (Entwerfen), wie gehen die Benutzeroberflächen damit um?


1
Lassen Sie es zuerst funktionieren, und machen Sie es dann hübsch.
msw

Antworten:


18

In den Django-Dokumenten wurde nie erwähnt, dass eine Person, die nicht weiß, worum es bei HTML / JS / CSS geht, es verwenden kann. Die Trennung von Bedenken erfolgt auch im Backend, wo die eigentliche Aktion (die Ansichten) von der Datenbankschicht oder der URL-Routing-Logik getrennt ist - das ermöglicht eine lose Kopplung. Es bedeutet niemals, dass Sie Ansichten schreiben können, ohne Ihre Modelle zu verstehen. In ähnlicher Weise (nun ja, nicht so ähnlich) müssen Sie HTML / CSS verstehen, um grundlegende Webseiten aufzurufen. Vielleicht möchten Sie etwas über JS lernen oder auch nicht, aber ich denke, mit HTML5 ist es mehr oder weniger wichtig, etwas JavaScript zu kennen.

Kein vernünftiger Webentwickler wird raten, einen WYSIWYG-Editor wie DreamWeaver zu verwenden. HTML von Hand schreiben. Sie können jedoch HTML5 Bolierplate verwenden , um Ihr Projekt schnell zu starten .

Google AppEngine ist ein PaaS, mit dem Sie Ihre Anwendung bereitstellen können. Es stellt unter anderem die Python-Laufzeit, einen replikationsstarken Datenspeicher usw. bereit, kümmert sich jedoch nicht um die Generierung Ihres Frontends.

Wenn Sie jemanden einstellen, der sich um das Front-End kümmert, muss diese Person sowieso wissen, wie man Django-Tags verwendet (wenn Sie dem MVC- oder MTV-Muster genau folgen), definieren sie die unscharfe Linie zwischen "statischen" und "dynamischen" Webseiten. Selbst wenn Sie einen Frontend-Entwickler beauftragen, empfehle ich Ihnen, die Grundlagen von HTML und CSS zu verstehen (zumindest so viel, dass Sie wissen, wie es funktioniert und wie Sie die statischen CSS-Dateien bereitstellen). Es wird Ihnen nur auf lange Sicht helfen.

Nicht alle Leute haben gute Designfähigkeiten, und Design ist zweifellos am besten den Fachleuten überlassen, aber wenn es darum geht, Seiten mit diesem Design tatsächlich zu liefern, ist alles HTML und CSS. Sie können also eine Person einstellen, die gleichzeitig Front-End-Designer und Front-End-Entwickler ist (was die meisten tun). Ich empfehle Ihnen jedoch, sich der Front-End-Technologien nicht völlig zu entziehen.


2
+1 "no sane web-developer"
msw

Es ist wohl wahr , dass kein vernünftiger Web - Entwickler würde HTML - Templates in etwas wie Dreamweaver an Autor möge. Aber die meisten Web - Designer scheinen für die CSS verwenden Dreamweaver oder ähnlich zu wollen, und die Frage nicht erwähnt CSS. Es wäre also schön, wenn Sie eine Anleitung für die Arbeit mit Dreamweaver und Django hätten.
Westcroft_to_Apse

4

Ich entwerfe entweder ein Layout in Dreamweaver oder beauftrage einen Designer, um HTML- "Wireframes" mit gefälschten Daten zu erstellen. Dann gehe ich darüber und verwende Djangos (oder Jinjas) Template-Tags, um daraus ein funktionierendes Template zu machen. Ich kenne HTML, aber ich würde nie in der Lage sein, etwas attraktiv zu machen. Funktionell? Ja! Angenehm anzusehen? Glob Nein!

Also abschließend; Mit nur einigen grundlegenden HTML-Kenntnissen können Sie ein vorgefertigtes HTML-Dokument so ändern, dass es als Vorlage fungiert.


1

Wie auch immer, Sie müssen verstehen, wie HTML funktioniert. Sie können mit einem einfachen Layout ohne grafische Schönheiten beginnen.

Sie können einen beliebigen Editor verwenden (Dreamweaver oder was auch immer), aber Djangos Tags verknüpfen die Vorlage mit dem Programmcode, sodass kein Editor sie mit WYSIWYG erstellen kann (was Sie sehen, ist was Sie bekommen). Einige IDEs haben nur wenige Helfer für diese Tags, aber nicht mehr, sie automatisieren nur Dinge wie das Schließen von Tags und so weiter.

Sie können auch einen Freiberufler einstellen, um eine Vorlage zu erstellen und in Ihre Anwendung zu integrieren. Dies ist jedoch nicht der beste Weg, um etwas zu lernen :)


0

Vielleicht lernen Sie, wie man HTML + Bootstrap benutzt. Bootstrap ist ein modernes Paket, mit dem reaktionsschnelle Websites erstellt werden können, auf denen CSS und JavaScripts fast, wenn nicht alle, für Sie erledigt sind. Also keine Notwendigkeit, tief in HTML + CSS + Js zu graben.

Nachdem Sie genug über Bootstrap wissen, werden Sie diese Bootstrap-Beispiele durchgehen und dann Ihre Webdesigns von dort aus starten. Wenn Sie dann komponentenspezifische Elemente benötigen, gehen Sie zu diesem Link .

Ich wusste sehr wenig über HTML, CSS, und JS und Bootstrap haben mir wirklich den Arsch gerettet. Sie müssen die Grundlagen von denen zwar kennen, aber wenn Sie auf Netzentwicklung sind, sollte das nicht verletzen.

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.