Cómo desarrollar front-end (UI) para mi sitio web Django


26

Estoy aprendiendo Django y nuevo en el desarrollo web. Disculpe si encuentra esta pregunta demasiado tonta.

Por lo tanto, estoy creando una aplicación de Facebook usando Django que me gustaría alojar en Google App Engine. El proyecto se centraría en leer los canales RSS / Atom de cualquier sitio web (eso es todo lo que puedo decir ahora).

Estoy bastante seguro de procesar los archivos RSS / Atom, pero estoy preocupado por la parte de front-end (Interfaz de usuario): "La parte de diseño". No sé HTML / CSS / JavaScript (puedo manejar cosas HTML simples pero eso no lleva a ninguna cosa de diseño).

Primero, pensé en usar herramientas como Dreamweaver o cualquier software equivalente para diseñar la interfaz de usuario, pero cuando realmente comencé a aprender Django y me metí en él, parece ser algo "imposible".

Asi que,

  • ¿Cómo debo diseñar la parte de la interfaz de usuario de mi sitio? ¿No puedo usar herramientas como Dreamweaver?

    • En caso negativo, ¿cuál es la mejor manera para un tipo como yo que no conoce JavaScript / CSS?
    • En caso afirmativo, ¿cuál es la mejor alternativa de código abierto para Dreamweaver?
    • ¿Puede Google App Engine manejar todo este sufrimiento?
  • Cómo las personas que tratan con Django editan esas páginas de plantilla. El Django menciona que separará las partes lógicas (vistas) y de diseño (plantillas) para que los diferentes departamentos de una empresa puedan manejar por separado. Pero teniendo en cuenta el hecho de que las páginas HTML de Django están llenas de "etiquetas" que no están relacionadas con HTML (diseño), ¿cómo lo manejan las personas de la interfaz de usuario?


1
Primero, haz que funcione, luego hazlo bonito.
msw

Respuestas:


18

Los documentos de Django nunca mencionaron que una persona que no sabe de qué se trata HTML / JS / CSS puede usarlo. La separación de las preocupaciones también se realiza en el back-end, donde la acción real (las vistas) se separan de la capa de la base de datos o la lógica de enrutamiento de URL, lo que permite un acoplamiento flexible. Nunca significa que puede escribir vistas sin comprender sus modelos. De manera similar (bueno, no de manera similar), es necesario que comprenda HTML / CSS para obtener páginas web básicas. Es posible que desee o no aprender algo de JS, pero creo que con HTML5, es más o menos esencial saber algo de JavaScript.

Ningún desarrollador web sensato recomendará utilizar un editor WYSIWYG como DreamWeaver. Escribe HTML a mano. Sin embargo, puede usar cosas como HTML5 Bolierplate para comenzar su proyecto rápidamente.

Google AppEngine es un PaaS que puede usar para implementar su aplicación. Proporcionará, entre otras cosas, el tiempo de ejecución de Python, un almacén de datos de alta replicación, etc., pero no se encargará de generar su front-end.

Si vas a contratar a alguien para que se encargue del front-end, esa persona de todos modos debería saber cómo usar las etiquetas Django, ya que (si sigues de cerca el patrón MVC o MTV), definen la línea borrosa entre páginas web "estáticas" y "dinámicas". Incluso si elige contratar un desarrollador frontend, le sugiero que comprenda los conceptos básicos de HTML y CSS (al menos tanto que sepa cómo funciona y cómo servirá los archivos estáticos CSS). Solo te ayudará a largo plazo.

No todas las personas tienen buenas habilidades de diseño, y el diseño, sin duda, es mejor dejarlo a personas calificadas, pero cuando se trata de servir páginas con ese diseño, todo es HTML y CSS. Por lo tanto, puede contratar a una persona que se duplica (la mayoría lo hace) como diseñador front-end y desarrollador front-end. Pero le sugiero que no permanezca completamente inconsciente de las tecnologías front-end.


2
+1 "desarrollador web no cuerdo"
msw

Probablemente sea cierto que ningún desarrollador web sensato desearía crear plantillas HTML en algo parecido a Dreamweaver. Pero la mayoría de los diseñadores web parecen querer usar Dreamweaver o similar para el CSS, y la pregunta menciona CSS. Por lo tanto, sería bueno tener alguna dirección con respecto a trabajar con Dreamweaver y Django.
Westcroft_to_Apse

4

Lo que hago es diseñar un diseño en Dreamweaver o contratar a un diseñador para crear "wireframes" HTML con datos falsos, luego lo reviso y uso las etiquetas de plantilla de Django (o Jinja) para convertirlo en una plantilla de trabajo. Sé algo de HTML, pero nunca podría hacer nada atractivo. ¿Funcional? ¡Sí! ¿Agradable a la vista? Glob No!

Entonces, en conclusión; Con solo algunos conocimientos básicos de HTML, puede modificar un documento HTML prefabricado para que funcione como plantilla.


1

De todos modos, tendrás que entender cómo funciona HTML. Puede comenzar con un diseño simple sin bellezas gráficas.

Puede usar cualquier editor que desee (Dreamweaver o lo que sea) pero las etiquetas de django están vinculando la plantilla al código del programa, por lo que ningún editor puede hacerlo con WYSIWYG (lo que ve es lo que obtiene). Algunos IDE tienen pocos ayudantes para esas etiquetas, pero no más, simplemente automatizan cosas como cerrar etiquetas, etc.

O puede contratar a un profesional independiente para crear e integrar una plantilla en su aplicación, pero no es la mejor manera de aprender algo :)


0

Quizás aprenda a usar html + bootstrap. Bootstrap es un paquete moderno para hacer sitios receptivos donde los CSS y JavaScripts son casi, si no todos, atendidos por usted. Por lo tanto, no es necesario profundizar en html + css + js.

Lo que hará después de saber lo suficiente de bootstrap es ir a estos ejemplos de bootstrap y luego comenzar sus diseños web desde allí. Luego, cuando necesite elementos específicos del componente, vaya a este enlace .

Sabía muy poco sobre HTML, CSS y JS y Bootstrap realmente me salvó el culo. Sin embargo, necesitará conocer los principios básicos de esos, pero si está en desarrollo web, eso no debería doler.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.