Django 웹 사이트의 프론트 엔드 (UI)를 개발하는 방법


26

Django를 배우고 있으며 웹 개발에 익숙하지 않습니다. 이 질문이 너무 멍청하면 실례합니다.

그래서 장고를 사용하여 Google App Engine에서 호스팅하려는 Facebook 응용 프로그램을 만들고 있습니다. 이 프로젝트는 모든 웹 사이트의 RSS / Atom 피드를 읽는 데 중점을 둘 것입니다 (지금 내가 말할 수있는 전부입니다).

RSS / Atom 파일을 처리하기에 충분하지만 프론트 엔드 (사용자 인터페이스) 부분 ( "디자인 부분")이 걱정됩니다. HTML / CSS / JavaScript를 모르겠습니다 (단순한 HTML 작업은 처리 할 수 ​​있지만 디자인 작업으로 이어지지는 않습니다).

먼저 UI 디자인을 위해 dreamweaver 또는 이와 동등한 소프트웨어와 같은 도구를 사용하려고 생각했지만 실제로 장고를 배우고 들어가기 시작했을 때 "불가능한"것 같습니다.

그래서,

  • 내 사이트의 UI 부분을 어떻게 디자인해야합니까? 드림위버와 같은 도구를 사용할 수 없습니까?

    • 아니요 인 경우 JavaScript / CSS를 모르는 나와 같은 사람에게 가장 좋은 방법은 무엇입니까?
    • 그렇다면 드림위버에 가장 적합한 오픈 소스 대안은 무엇입니까?
    • Google App Engine에서이 모든 기능을 처리 할 수 ​​있습니까?
  • Django를 다루는 사람들이 템플릿 페이지를 편집하는 방법. Django는 회사의 다른 부서가 별도로 처리 할 수 ​​있도록 논리적 (보기) 및 디자인 (템플릿) 부분을 분리 할 것이라고 언급했습니다. 그러나 Django의 HTML 페이지가 HTML (디자인)과 관련이없는 "태그"로 채워져 있다는 사실을 고려하면 UI 사람들은 어떻게 그것을 처리합니까?


1
먼저 작동시킨 다음 예쁘게 만듭니다.
msw

답변:


18

Django 문서는 HTML / JS / CSS가 무엇인지 모르는 사람이 사용할 수 있다고 언급하지 않았습니다. 문제의 분리는 백엔드에서도 이루어지며, 실제 조치 (보기)는 데이터베이스 계층 또는 URL 라우팅 로직과 분리되어있어 느슨한 결합이 가능합니다. 절대 모델을 이해하지 않고도 뷰를 작성할 수 있다는 의미는 아닙니다. 유사하게 (잘 그렇지는 않지만) 기본 웹 페이지를 작성하려면 HTML / CSS에 대한 이해가 필요합니다. JS를 배우고 싶거나 원하지 않을 수도 있지만 HTML5에서는 JavaScript를 아는 것이 다소 중요하다고 생각합니다.

제정신 웹 개발자는 DreamWeaver와 같은 WYSIWYG 편집기를 사용하도록 조언하지 않습니다. 손으로 HTML을 작성하십시오. 그러나 HTML5 Bolierplate 과 같은 것을 사용 하여 프로젝트를 빠르게 시작할 수 있습니다.

Google AppEngine은 애플리케이션을 배포하는 데 사용할 수있는 PaaS입니다. 파이썬 런타임, 복제율이 높은 데이터 저장소 등을 제공하지만 프런트 엔드 생성을 처리하지는 않습니다.

프론트 엔드를 돌보는 사람을 고용하려는 경우 그 사람은 어쨌든 장고 태그를 사용하는 방법을 알아야합니다 (MVC 또는 MTV 패턴을 밀접하게 준수하는 경우). "정적"웹 페이지와 "동적"웹 페이지 간 프론트 엔드 개발자를 고용하기로 선택하더라도 HTML 및 CSS의 기본 사항을 이해하는 것이 좋습니다 (적어도 작동 방식과 CSS 정적 파일을 제공하는 방법을 알고 있음). 장기적으로 도움이 될 것입니다.

모든 사람이 훌륭한 디자인 기술을 가지고있는 것은 아니며, 디자인은 숙련 된 사람들에게 맡기는 것이 최선이지만, 실제로 해당 디자인이 포함 된 페이지를 제공 할 때는 모든 HTML과 CSS입니다. 따라서 프론트 엔드 디자이너와 프론트 엔드 개발자로 두 배나 많은 사람을 고용 할 수 있습니다. 그러나 프런트 엔드 기술을 완전히 인식하지 않는 것이 좋습니다.


2
+1 "정상적인 웹 개발자 없음"
msw

제정신의 웹 개발자 가 Dreamweaver와 유사한 HTML 템플릿을 제작하고 싶지 않다는 것은 사실 일 것입니다 . 그러나 대부분의 웹 디자이너 는 CSS에 Dreamweaver 또는 이와 유사한 것을 사용하는 것으로 보이며 질문에는 CSS가 언급되어 있습니다. 따라서 Dreamweaver 및 Django로 작업하는 것과 관련하여 어떤 방향을 갖는 것이 좋을 것입니다.
Westcroft_to_Apse

4

내가하는 일은 dreamweaver에서 레이아웃을 디자인하거나 가짜 데이터로 HTML "와이어 프레임"을 만들도록 디자이너를 고용 한 다음 Django (또는 Jinja) 템플릿 태그를 사용하여 작동하는 템플릿으로 만듭니다. 나는 HTML을 알고 있지만 결코 매력적인 것을 만들 수는 없습니다. 기능의? 예! 보고 싶습니까? 세계 아니오!

결론적으로; HTML에 대한 기본 지식 만 있으면 미리 만든 HTML 문서를 수정하여 템플릿으로 사용할 수 있습니다.


1

어쨌든 HTML의 작동 방식을 이해해야합니다. 그래픽 미인없이 간단한 레이아웃으로 시작할 수 있습니다.

원하는 편집기 (Dreamweaver 또는 기타)를 사용할 수 있지만 django의 태그는 템플릿을 프로그램 코드에 연결하므로 WYSIWYG로 편집기를 만들 수있는 편집기는 없습니다 (보이는 것입니다). 일부 IDE에는 해당 태그에 대한 도우미가 거의 없지만 더 이상 태그 닫기와 같은 것을 자동화하지 않습니다.

또는 프리랜서를 고용하여 응용 프로그램에서 템플릿을 만들고 통합 할 수 있지만 무언가를 배우는 가장 좋은 방법은 아닙니다. :)


0

html + 부트 스트랩 사용 방법을 배우십시오. 부트 스트랩은 CSS와 JavaScript가 거의 모든 부분을 처리 할 수있는 반응 형 사이트를 만들기위한 최신 패키지입니다. 따라서 html + css + js를 깊이 파고들 필요는 없습니다.

부트 스트랩을 충분히 알고 난 후에는이 부트 스트랩 예제 로 가서 웹 디자인을 시작해야합니다. 그런 다음 컴포넌트 특정 요소가 필요할 때이 링크 로 이동 하십시오 .

나는 HTML, CSS 및 JS에 대해 거의 알지 못했고 부트 스트랩은 실제로 내 엉덩이를 구했습니다. 그래도 기본적인 사항을 알아야하지만 웹 개발을하고 있다면 상처를 입지 않아야합니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.