Je dois présenter un prototype d'application Web dans les jours suivants à l'un de mes clients, le fait est que je ne suis pas très bon en CSS et pire que tout, je ne suis presque jamais satisfait des résultats que j'obtiens.
Le codage de la logique métier ne me pose aucun défi, la conception de l'interface utilisateur prend cependant plus de 80% de mon temps. Je n'ai besoin de rien d'époustouflant, juste d'un environnement propre, agréable et présentable, un exemple:
C'est un problème récurrent que j'ai rencontré, je souhaite que le développement de l'interface utilisateur Web puisse avoir un style par défaut moins nu , une approche similaire à Visual Studio ou au SDK iPhone me serait très utile.
La maquette ci-dessus créée avec Balsamiq Mockups est un excellent exemple, tous les "composants" les plus courants sont disponibles et le meilleur de tous: il n'y a qu'un seul style beau à choisir.
Existe-t-il quelque chose comme ça pour le Web? Un cadre d'interface utilisateur CSS ou Javascript neutre mais agréable?
Options jusqu'à présent:
- Amorcer
- Qooxdoo
- jQuery UI
- Outils jQuery
- MochaUI
- Ext JS
- Yahoo! Bibliothèque d'interface utilisateur
- BlueTrip
- Plan
- Uki ( Démo )
- Napkee
- YAML
- Ligne de base
- iPlotz
- Sproutcore
- ForeUI
Je suis intéressé de savoir s'il existe des frameworks d'interface utilisateur uniquement CSS.
J'ai trouvé cette page avec une très belle liste de bibliothèques d'interface utilisateur Web , mais la plupart (du moins les bonnes) semblent être spécifiques à Java, y a-t-il des alternatives tout aussi bonnes en CSS pur ou JS?
PS: Je ne suis pas intéressé par AJAX, les effets, les comportements, etc. ma principale (seule) préoccupation est le style.
Merci pour toutes les suggestions à tous!
Après un examen très attentif de toutes les bibliothèques d'interface utilisateur suggérées, je suis arrivé à la conclusion qu'ExtJS et Qooxdoo sont ceux qui correspondent le plus à mes besoins. L'interface utilisateur jQuery semble prometteuse mais n'offre qu'un nombre réduit d'éléments.
En ce qui concerne les bibliothèques uniquement CSS, j'ai trouvé que BlueTrip / BluePrint et les thèmes suggérés par tambler étaient les meilleurs. En dehors de cela, Flex et Napkee semblent également valoir la peine d'être explorés.
Il est temps d'apprendre ExtJS maintenant! =)
la source
Réponses:
Je ne peux pas croire que personne n'ait mentionné:
http://www.extjs.com/
C'est un framework js commercial, mais assez abordable, et facilite la création d'une belle interface utilisateur. Il existe un ensemble d'éléments beaucoup plus complet que jqueryui, et il est conçu pour créer une application entière. Je n'ai que peu joué avec, mais je l'aime vraiment jusqu'à présent. Gratuit pour un usage personnel.
Si vous voulez vraiment avoir une idée d'une interface utilisateur complète développée avec EXT, essayez cette URL:
http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/feed-viewer/feed-viewer.html
la source
Une combinaison de 960g pour la mise en page et de jQuery-UI pour le style est probablement ce que vous recherchez.
Vous pouvez également envisager le framework CSS blueprint au lieu de 960gs.
la source
Qu'en est-il de l'utilisation de dojo et dijit ?
Dijit est un moyen rapide de créer des widgets et des éléments. Il est également livré avec 3 thèmes par défaut faciles à modifier.
Une bonne liste de différents widgets ici
la source
Faites équipe avec quelqu'un qui se spécialise dans la conception d'interface utilisateur.
Si vous maîtrisez mieux la logique métier, il vaut mieux passer votre temps à coder exclusivement la logique métier afin que vous puissiez la maîtriser. Cela vous demandera d'apprendre à interagir avec quelqu'un d'autre qui excelle dans la présentation. ( xml et json sont des moyens courants)
La logique métier et la présentation sont très différentes. Concevoir un système qui est non seulement beau, mais aussi intuitif et facile à utiliser est assez difficile. Tout aussi difficile et chronophage que d'établir les rouages d'une application complexe.
Une bonne interface n'est pas aussi simple que d'inclure un framework css.
Je me considère comme un programmeur plus «créatif» qui excelle dans la présentation. J'ai eu la chance de croiser le chemin de quelqu'un qui était, tout d'abord ... très motivé, et ensuite très bon en «logique métier». Il avait beaucoup plus d'expérience dans la planification et la mise en œuvre de systèmes complexes, alors que je me suis principalement concentré sur la conception d'interfaces.
Si vous êtes plus productif en matière d'architecture système, de planification, de développement, peu importe ... vous devriez vous pousser dans cette direction. Bien que les projets de développement en solo puissent être plutôt satisfaisants, je le considère comme inefficace. Il est très rare qu'une personne possède les compétences nécessaires pour développer des applications de haut niveau en solo.
Le défi est de trouver quelqu'un avec qui vous travaillez bien.
la source
Consultez Google Web Toolkit . Il a un look par défaut assez propre. Ils ont des exemples . En particulier, leur exemple Showcase montre tous les widgets disponibles et le style css utilisé pour obtenir le look.
la source
Il existe quelques cadres destinés à (G) UI Design; Qooxdoo , JQuery UI et MochaUI étant quelques-uns d'entre eux (bien que le dernier soit plus une preuve de concept qu'un cadre utilisable). Ces frameworks offrent généralement une variété d'éléments alimentés par JS (éléments de formulaire, tels que les champs de saisie et les boutons d'envoi, mais également d'autres éléments tels que les onglets). Cependant, il vous appartiendra toujours de positionner ces éléments, et peut-être de les styliser, à votre guise.
Peut-être que vous familiariser avec un framework CSS (tel que 960GS ) pourrait compléter les frameworks JS UI ci-dessus.
(À titre personnel, je n'ai que très peu d'expérience avec l'un des frameworks mentionnés ci-dessus. Mais je suis sûr que Google ou SO peuvent fournir des réponses que je ne peux pas.)
la source
Cela ne vous aidera pas pour votre projet actuel, mais cela vaut la peine d'être envisagé pour les projets futurs. Après avoir passé de nombreuses années à créer des applications GUI en HTML 4 et à lutter constamment contre les limites du CSS et du HTML, j'ai pensé essayer Adobe Flex. Quelle amélioration!
Plutôt que de simuler un contrôle de page à onglets ou une grille de données, avec Flex ou Silverlight, votre balisage peut simplement spécifier un contrôle de page à onglets ou une grille de données. Et les frameworks sont livrés avec des styles par défaut qui sont ennuyeux mais pas du tout mauvais. Je ne dis pas que ceux-ci remplacent complètement le HTML, mais si vous avez besoin de widgets et d'une présentation graphique, je pense qu'ils sont une bien meilleure alternative.
la source
Vous pouvez envisager de parcourir le site suivant:
http://themeforest.net/category/site-templates/admin-skins
Il existe plusieurs thèmes «administratifs» disponibles à l'achat ici qui peuvent répondre à vos besoins.
la source
Les maquettes filaires comme celle-ci sont un excellent moyen de commencer.
Après avoir utilisé la plupart des framewroks d'interface utilisateur discutés ici, je voudrais vous orienter vers jQueryUi pour les raisons suivantes:
Le framework CSS jQueryUI s'occupe du CSS cohérent et cool pour vous (c'est vraiment facile - il suffit de faire du balisage et d'appliquer les classes)
jQueryUI a tabcontrol et des tas de moyens simples et rapides pour styliser les formulaires.
la source
Si vous ciblez des navigateurs modernes, non IE, vous devriez consulter Sproutcore . Pour les maquettes, j'utilise mockingbird .
la source
Un framework PHP relativement nouveau spécialement conçu pour le développement de logiciels axés sur l'interface utilisateur. Les éléments que vous avez ici, y compris les onglets, les filtres et les grilles sont inclus et vous prendront environ 20 lignes de code à implémenter.
http://agiletoolkit.org/
la source
Avez-vous essayé Axure ? C'est un outil pour créer rapidement des wireframes, des prototypes et des spécifications pour des applications et des sites Web.
Il fonctionne de la même manière que Balsamiq, mais il vous permet d'exporter vos wireframes / prototype au format HTML, CSS et Javascript.
Vous pouvez ensuite le télécharger sur un serveur ou l'exécuter sur votre ordinateur comme exemple de travail.
Vous pouvez créer des formulaires, des liens, des onglets, des rollovers, des effets Javascript.
la source
Si vous utilisez déjà des maquettes balsamiques pour vos prototypes, vous devriez envisager Napkee . Pour citer le site Web "Napkee vous permet d'exporter des maquettes Balsamiq vers HTML / CSS / JS et Adobe Flex 3 en un clic."
la source
Je suis tombé sur ce problème il y a quelque temps, et je n'ai rien trouvé, alors j'en ai profité pour apprendre le CSS. Mais depuis, il semble que de grands progrès aient été accomplis vers ce sujet.
J'espère que cela aide.
la source
Une combinaison de 960g pour la mise en page et les outils jQuery-UI ou Jquery est géniale.Je les utilise presque dans tous les projets, mais je voudrais ajouter à http://easyframework.com/ bien que ce ne soit pas une entreprise conviviale, alors assurez-vous de vérifier sa licence mais je l'aime
la source
J'ai récemment découvert un joli site Web appelé iplotz.com où vous pouvez créer une maquette de votre application / site Web / projet en ligne sans rien installer. Il possède également la plupart des contrôles courants, ainsi que beaucoup plus de fonctionnalités pour gérer l'ensemble du projet et le partager avec d'autres en ligne.
Je dois admettre que je ne l'ai pas encore essayé moi-même, mais je l'ai regardé un peu et cela semble plutôt cool. Je vais probablement l'utiliser assez tôt.
la source
Sass semble avoir un potentiel pour atténuer certains maux de tête css.
la source
J'aime ajouter Bootstrap c'est un cadre frontal intuitif et puissant pour un développement Web plus rapide et plus facile.
la source
J'aime RocketCSS . Beau design épuré, essayez-le.
la source