Jak opracować interfejs użytkownika (UI) dla mojej witryny Django


26

Uczę się Django i nowego w tworzeniu stron internetowych. Przepraszam, jeśli uznasz to pytanie za głupie.

Tak więc tworzę aplikację na Facebooku za pomocą Django, którą chciałbym hostować w Google App Engine. Projekt koncentrowałby się na czytaniu kanałów RSS / Atom z dowolnej strony internetowej (to wszystko, co mogę teraz powiedzieć).

Jestem pewien, że mogę przetwarzać pliki RSS / Atom, ale martwię się o część frontową (Interfejs użytkownika) - „Część projektową”. Nie znam HTML / CSS / JavaScript (mogę obsługiwać proste rzeczy HTML, ale to nie prowadzi do żadnych problemów projektowych).

Po pierwsze, pomyślałem o użyciu narzędzi takich jak Dreamweaver lub innego równoważnego oprogramowania do projektowania interfejsu użytkownika, ale kiedy naprawdę zacząłem uczyć się django i wchodzić w to, wydaje się, że jest to „niemożliwe”.

Więc,

  • Jak zaprojektować część interfejsu użytkownika mojej witryny? Czy nie mogę używać narzędzi takich jak Dreamweaver?

    • Jeśli NIE, jaki jest najlepszy sposób dla faceta takiego jak ja, który nie zna JavaScript / CSS
    • Jeśli TAK, jaka jest najlepsza alternatywa open source dla Dreamweaver?
    • Czy Google App Engine poradzi sobie z tym wszystkim?
  • Jak osoby zajmujące się Django edytują te strony szablonów. Django wspomina, że ​​oddzieli części logiczne (widoki) i projektowe (szablony), aby różne działy w firmie mogły obsługiwać osobno. Ale biorąc pod uwagę fakt, że strony HTML Django są wypełnione „znacznikami”, które nie są w żaden sposób powiązane z HTML (projektowanie), jak ludzie UI sobie z tym radzą?


1
Najpierw spraw, aby działało, a następnie spraw, aby było ładne.
msw

Odpowiedzi:


18

Dokumenty Django nigdy nie wspominały, że osoba, która nie wie, o co chodzi w HTML / JS / CSS, może z niego korzystać. Oddzielenie problemów odbywa się również w wewnętrznej bazie danych, gdzie rzeczywiste działanie (widoki) jest oddzielone od warstwy bazy danych lub logiki routingu adresów URL - To pozwala na luźne sprzężenie. To nigdy nie oznacza, że ​​możesz pisać widoki bez zrozumienia swoich modeli. Podobnie (cóż, niezupełnie podobnie), musisz znać HTML / CSS, aby uzyskać dostęp do podstawowych stron internetowych. Możesz lub nie chcesz nauczyć się JS, ale myślę, że w HTML5 znajomość JavaScript jest mniej lub bardziej niezbędna.

Żaden rozsądny twórca stron internetowych nie zaleciłby używania edytora WYSIWYG, takiego jak DreamWeaver. Pisz HTML ręcznie. Możesz jednak użyć rzeczy takich jak HTML5 Bolierplate, aby szybko rozpocząć projekt.

Google AppEngine to PaaS, którego można użyć do wdrożenia aplikacji. Zapewni między innymi środowisko wykonawcze Python, magazyn danych o wysokiej replikacji itp. - ale nie zajmie się generowaniem interfejsu użytkownika.

Jeśli zamierzasz zatrudnić kogoś, kto zajmie się front-endem, ta osoba i tak musiałaby wiedzieć, jak używać tagów Django, ponieważ tak naprawdę (jeśli ściśle przestrzegasz wzorca MVC - lub MTV), definiują one rozmytą linię między „statycznymi” i „dynamicznymi” stronami internetowymi. Nawet jeśli zdecydujesz się zatrudnić programistę frontend, sugeruję, abyś zapoznał się z podstawami HTML i CSS (przynajmniej tyle, że wiesz, jak to działa i jak zamierzasz obsługiwać pliki statyczne CSS). Pomoże ci to tylko na dłuższą metę.

Nie wszyscy ludzie mają dobre umiejętności projektowe, a projektowanie najlepiej jest pozostawić wykwalifikowanym ludziom, ale jeśli chodzi o faktyczne wyświetlanie stron z tym projektem, to wszystko to HTML i CSS. Możesz więc zatrudnić osobę, która podwaja się (większość robi) jako front-end designer i front-end developer. Ale sugeruję, abyś nie pozostawał całkowicie nieświadomy technologii front-end.


2
+1 „bez rozsądnego twórcy stron internetowych”
msw

Prawdopodobnie prawdą jest, że żaden rozsądny programista nie chciałby tworzyć szablonów HTML w niczym przypominającym Dreamweaver. Ale większość projektantów stron internetowych chce używać programu Dreamweaver lub podobnego do CSS, a pytanie zawiera CSS. Byłoby miło mieć pewien kierunek w odniesieniu do współpracy z Dreamweaver i Django.
Westcroft_to_Apse

4

To, co robię, to albo projektuję układ w programie Dreamweaver, albo wynajmuję projektanta do tworzenia „szkieletów” HTML z fałszywymi danymi, a następnie przeglądam go i używam tagów szablonu Django (lub Jinji), aby przekształcić go w działający szablon. Znam trochę HTML, ale nigdy nie byłbym w stanie zrobić nic atrakcyjnego. Funkcjonalny? Tak! Przyjemnie na to patrzeć? Glob No!

Podsumowując; Mając tylko podstawową wiedzę o HTML, możesz zmodyfikować gotowy dokument HTML, aby działał jako szablon.


1

W każdym razie musisz zrozumieć, jak działa HTML. Możesz zacząć od prostego układu bez żadnych graficznych piękności.

Możesz użyć dowolnego edytora, który ci się podoba (Dreamweaver lub cokolwiek innego), ale tagi django łączą szablon z kodem programu, więc żaden edytor nie jest w stanie tego zrobić za pomocą WYSIWYG (to, co widzisz, dostajesz). Niektóre IDE mają niewiele pomocników dla tych tagów, ale nie więcej, po prostu automatyzują takie rzeczy jak zamykanie tagów i tak dalej.

Możesz też zatrudnić freelancera, aby utworzyć i zintegrować szablon z aplikacją, ale nie jest to najlepszy sposób, aby się czegoś nauczyć :)


0

Być może naucz się korzystać z html + bootstrap. Bootstrap to nowoczesny pakiet do tworzenia responsywnych witryn, w których CSS i JavaScript są prawie, jeśli nie wszystkie, zadbane. Więc nie musisz kopać sposobu, aby zagłębić się w HTML + CSS + JS.

To, co zrobisz, gdy będziesz wiedział, co to jest bootstrap, to przejrzenie tych przykładów bootstrap, a następnie rozpoczęcie projektowania stron internetowych. Kiedy będziesz potrzebować elementów specyficznych dla komponentu, przejdź do tego linku .

Wiedziałem bardzo niewiele o HTML, CSS, a JS i Bootstrap naprawdę uratowały mi tyłek. Będziesz jednak musiał znać podstawowe informacje na ich temat, ale jeśli zajmujesz się tworzeniem stron internetowych, nie powinno to boleć.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.