Comment développer le front end (UI) pour mon site Django


26

J'apprends Django et je suis nouveau dans le développement web. Veuillez m'excuser si vous trouvez cette question trop stupide.

Je crée donc une application Facebook à l'aide de Django que j'aimerais héberger dans Google App Engine. Le projet se concentrerait sur la lecture des flux RSS / Atom de n'importe quel site Web (c'est tout ce que je peux dire maintenant).

Je suis assez sûr pour traiter les fichiers RSS / Atom mais je suis inquiet pour la partie front-end (User Interface) - "La partie design". Je ne connais pas HTML / CSS / JavaScript (je peux gérer des trucs HTML simples mais cela ne mène à aucune conception).

Tout d'abord, j'ai pensé à utiliser des outils comme dreamweaver ou tout autre logiciel équivalent pour concevoir l'interface utilisateur, mais quand j'ai vraiment commencé à apprendre le django et à y entrer, cela semble être une chose "impossible".

Alors,

  • Comment dois-je concevoir la partie UI de mon site? Je ne peux pas utiliser des outils comme dreamweaver?

    • Si NON, quelle est la meilleure façon pour un gars comme moi qui ne connaît pas JavaScript / CSS
    • Si OUI, quelle est la meilleure alternative open source à dreamweaver?
    • Google App Engine peut-il gérer tout cela?
  • Comment les personnes qui traitent avec Django modifient ces pages de modèle. Le Django mentionne qu'il séparera les parties logiques (vues) et de conception (modèles) afin que les différents services d'une entreprise puissent gérer séparément. Mais compte tenu du fait que les pages HTML de Django sont remplies de "balises" qui n'ont aucun lien avec HTML (conception), comment les utilisateurs de l'interface utilisateur le gèrent-ils?


1
D'abord, faites-le fonctionner, puis rendez-le joli.
msw

Réponses:


18

Les documents Django n'ont jamais mentionné qu'une personne qui ne sait pas de quoi parle HTML / JS / CSS peut l'utiliser. La séparation des préoccupations se fait également dans le backend, où l'action réelle (les vues) est séparée de la couche de base de données ou de la logique de routage d'URL - Cela permet un couplage lâche. Cela ne signifie jamais que vous pouvez écrire des vues sans jamais comprendre vos modèles. De même (enfin, pas de la même façon), vous devez avoir une compréhension de HTML / CSS pour obtenir des pages Web de base. Vous voudrez peut-être ou non apprendre certains JS, mais je pense qu'avec HTML5, il est plus ou moins essentiel de connaître un peu de JavaScript.

Aucun développeur Web sensé ne conseillera d'utiliser un éditeur WYSIWYG comme DreamWeaver. Écrivez du HTML à la main. Vous pouvez toutefois utiliser des éléments comme HTML5 Bolierplate pour démarrer rapidement votre projet.

Google AppEngine est un PaaS que vous pouvez utiliser pour déployer votre application. Il fournira entre autres le runtime Python, une banque de données à haute réplication, etc. - mais il ne se chargera pas de générer votre front-end.

Si vous allez embaucher quelqu'un pour prendre en charge le front-end, cette personne devrait de toute façon savoir comment utiliser les balises Django, car en réalité (si vous suivez de près le modèle MVC - ou MTV), ils définissent la ligne floue entre les pages Web "statiques" et "dynamiques". Même si vous choisissez d'embaucher un développeur frontend, je vous suggère de saisir les bases du HTML et du CSS (au moins tellement que vous savez comment cela fonctionne et comment allez-vous servir les fichiers statiques CSS). Cela ne vous aidera qu'à long terme.

Toutes les personnes n'ont pas de bonnes compétences en conception, et la conception est sans aucun doute mieux laissée à des personnes qualifiées, mais lorsqu'il s'agit de servir réellement des pages avec cette conception, tout est HTML et CSS. Vous pouvez donc embaucher une personne qui se double (la plupart le font) en tant que concepteur et développeur front-end. Mais je vous suggère de ne pas ignorer complètement les technologies frontales.


2
+1 "pas de développeur web sensé"
msw

Il est probablement vrai qu'aucun développeur Web sensé ne voudrait créer des modèles HTML dans quelque chose qui ressemble à Dreamweaver. Mais la plupart des concepteurs Web semblent vouloir utiliser Dreamweaver ou similaire pour le CSS, et la question mentionne le CSS. Il serait donc agréable d'avoir une certaine direction en ce qui concerne le travail avec Dreamweaver et Django.
Westcroft_to_Apse

4

Ce que je fais, c'est soit concevoir une mise en page dans dreamweaver, soit embaucher un concepteur pour créer des "wireframes" HTML avec de fausses données, puis je les passe en revue et j'utilise les balises de modèle de Django (ou Jinja) pour en faire un modèle de travail. Je connais du HTML, mais je ne serais jamais en mesure de rendre quelque chose d'attrayant. Fonctionnel? Oui! Agréable à regarder? Glob non!

Donc, en conclusion; Avec juste quelques connaissances de base en HTML, vous pouvez modifier un document HTML prédéfini pour qu'il fonctionne comme un modèle.


1

Quoi qu'il en soit, vous devrez comprendre comment fonctionne HTML. Vous pouvez commencer avec une mise en page simple sans aucune beauté graphique.

Vous pouvez utiliser n'importe quel éditeur que vous aimez (Dreamweaver ou autre) mais les balises de django lient le modèle au code du programme, donc aucun éditeur ne peut le faire avec WYSIWYG (ce que vous voyez est ce que vous obtenez). Certains IDE ont peu d'aide pour ces balises, mais pas plus, ils automatisent simplement des choses comme la fermeture des balises, etc.

Ou vous pouvez embaucher un pigiste pour créer et intégrer un modèle dans votre application, mais ce n'est pas la meilleure façon d'apprendre quelque chose :)


0

Peut-être apprendre à utiliser html + bootstrap. Bootstrap est un package moderne pour créer des sites réactifs où le CSS et les JavaScripts sont presque, sinon tous, pris en charge pour vous. Il n'est donc pas nécessaire de creuser trop profondément en html + css + js.

Ce que vous ferez une fois que vous en saurez assez sur le bootstrap, vous devrez consulter ces exemples de bootstrap, puis commencer vos conceptions Web à partir de là. Ensuite, lorsque vous aurez besoin d'éléments spécifiques au composant, accédez à ce lien .

Je savais très peu de choses sur HTML, CSS et JS et Bootstrap m'a vraiment sauvé le cul. Vous aurez besoin de connaître les rudiments de ceux-ci, mais si vous êtes sur le développement Web, cela ne devrait pas faire de mal.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.