Styles communs de l'interface utilisateur Web
Les jours suivants, je dois présenter un prototype d'application Web à l'un de mes clients. En réalité, je ne suis pas très bon en CSS et, pire encore, je ne suis presque jamais satisfait des résultats obtenus.
Le codage de la logique métier ne me pose aucun problème, mais la conception de l'interface utilisateur prend plus de 80% de mon temps. Je n'ai besoin de rien à couper le souffle, juste d'un environnement propre, agréable et présentable, un exemple:
alt text http://i48.tinypic.com/t0p1fq.png
C’est un problème récurrent que j’ai eu. Je souhaite que le développement de l’interface Web ait un style par défaut moins nu}, une approche similaire à Visual Studio ou 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’ya qu’un seul style attrayant à choisir.
Est-ce qu'il y a quelque chose comme ça pour le web? Un framework d'interface utilisateur CSS ou Javascript neutre mais sympa?
Options jusqu'à présent:
- Bootstrap
- Qooxdoo
- Interface utilisateur jQuery
- Outils jQuery
- MochaUI
- Ext JS
- Yahoo! Bibliothèque d'interface utilisateur
- BlueTrip
- Plan
- Uki ( Demo )
- Napkee
- YAML
- Baseline
- iPlotz
- Sproutcore
- ForeUI
Je voudrais 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 Web UI , mais la plupart d'entre elles (du moins les bonnes) semblent être spécifiques à Java, existe-t-il des alternatives aussi bonnes en pure CSS ou JS?
PS: Je ne m'intéresse pas à AJAX, aux effets, aux comportements, etc., ma principale préoccupation est le style.
Merci à tous pour les suggestions!
Après un examen très attentif de toutes les bibliothèques d'interface utilisateur suggérées, je suis parvenu à la conclusion qu'ExtJS et Qooxdoo étaient ceux qui répondaient le mieux à mes besoins. jQuery UI semble prometteur mais n'offre qu'une quantité réduite d'éléments.
En ce qui concerne les bibliothèques exclusivement CSS, j'ai trouvé BlueTrip/BluePrint et les thèmes suggérés par tambler comme étant les meilleurs. En dehors de cela, Flex et Napkee semblent également mériter d'être explorés.
Il est temps d'apprendre ExtJS maintenant! =)
Je ne peux pas croire que personne n'ait mentionné:
C’est un framework commercial, mais assez abordable, et il est très facile de composer une interface utilisateur agréable. Il existe un ensemble d’éléments bien plus complet que jqueryui, conçu pour créer une application complète. Je n'y ai joué qu'un peu, mais je l'aime vraiment jusqu'à présent. Gratuit pour un usage personnel.
Si vous voulez vraiment avoir une idée de l'interface utilisateur complète développée avec EXT, essayez l'URL suivante:
http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/feed-viewer/feed-viewer.html
Associez-vous à quelqu'un qui spécialise dans la conception de l'interface utilisateur.
Si vous maîtrisez mieux la logique métier, il est préférable de passer votre temps exclusivement à coder la logique métier afin que vous puissiez la maîtriser. Cela vous demandera d’apprendre à interagir avec une autre personne qui excelle lors de la présentation. ( xml et json sont des moyens courants)
La logique métier et la présentation sont très différentes. Il est assez difficile de concevoir un système qui soit non seulement esthétique, mais aussi intuitif et facile à utiliser. Aussi difficile et fastidieux que d'établir le fonctionnement interne 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 utilise Excel pour la présentation. J'ai eu la chance de croiser des chemins avec quelqu'un qui était d'abord ... très motivé et ensuite très bon en "logique d'entreprise". Il avait beaucoup plus d'expérience dans la planification et la mise en œuvre de systèmes complexes, alors que je me concentrais principalement sur la conception d'interfaces.
Si vous êtes plus productif dans l'architecture système, la planification, le développement, etc., vous devez vous pousser dans cette direction. Bien que les projets de développement en solo puissent être plutôt satisfaisants, je les considère comme inefficaces. Il est très rare que quelqu'un possède les compétences nécessaires pour développer des applications de haut niveau en solo.
Le défi consiste à trouver quelqu'un avec qui vous travaillez bien.
Découvrez Google Web Toolkit . Il a un look assez propre par défaut. Ils ont exemples . En particulier, leur Showcase exemple montre tous les widgets disponibles et le style css utilisé pour obtenir l'apparence.
Vous pourriez envisager de naviguer sur le site suivant:
http://themeforest.net/category/site-templates/admin-skins
Plusieurs thèmes «administratifs» disponibles à l’achat ici peuvent répondre à vos besoins.
Il existe quelques cadres visant à (G) UI Design; Qooxdoo , JQuery UI et MochaUI en étant quelques-uns (bien que le dernier constitue davantage une preuve de concept qu'un cadre utilisable). Ces frameworks offrent généralement divers éléments basés sur 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 éventuellement de les styler à votre guise.
Peut-être que vous familiariser avec un framework CSS (tel que 960GS ) pourrait compléter les frameworks JS UI ci-dessus.
(En tant que clause de non responsabilité personnelle; j'ai 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.)
Cela ne vous aidera pas pour votre projet actuel, mais cela vaut la peine d'être envisagé pour de futurs projets. Après avoir passé de nombreuses années à créer des applications graphiques en HTML 4 et à lutter constamment contre les limitations de CSS et de HTML, j'ai décidé d'essayer Adobe Flex. Quelle amélioration!
Plutôt que de simuler un contrôle de page à onglet ou une grille de données, avec Flex ou Silverlight, votre balisage peut simplement spécifier un contrôle de page à onglet ou une grille de données. Et les frameworks viennent 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 constituent une bien meilleure alternative.
Si vous ciblez des navigateurs modernes et non-IE, vous devriez vérifier Sproutcore . J'utilise mockingbird pour les maquettes.
Un cadre relativement nouveau PHP spécialement conçu pour le développement de logiciels centré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.
de telles maquettes en fil de fer sont une excellente façon de commencer.
Ayant utilisé la plupart des cadres d’interface utilisateur dont il est question ici, je voudrais vous guider vers jQueryUi pour les raisons suivantes:
le framework CSS jQueryUI prend en charge le CSS cohérent et sympa (c'est vraiment facile - créez du balisage et appliquez les classes)
jQueryUI a tabcontrol et regorge de méthodes simples et rapides pour styliser les formulaires.
Avez-vous essayé Axure ? C'est un outil permettant de créer rapidement des structures filaires, des prototypes et des spécifications pour des applications et des sites Web.
Cela fonctionne de la même manière que Balsamiq, mais cela vous permet d’exporter vos wireframes/prototypes au format HTML, CSS et Javascript.
Vous pouvez ensuite télécharger ceci sur un serveur ou l'exécuter sur votre ordinateur à titre d'exemple.
Vous pouvez créer des formulaires, des liens, des onglets, des survols, des effets Javascript.
Une combinaison de 960gs pour la mise en page et les outils jQuery-UI ou Jquery est excellente Je les utilise presque dans chaque projet, mais j'aimerais 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 bien
Si vous utilisez déjà des maquettes balsamiques pour vos prototypes, tenez compte de Napkee . Pour citer le site Web "Napkee vous permet d’exporter des maquettes Balsamiq au format HTML/CSS/JS et Adobe Flex 3 en un clic de souris".
Je suis tombé sur ce problème il y a quelque temps et je ne pouvais rien trouver. Je l'ai donc saisi comme une opportunité d'apprendre le CSS. Mais depuis lors, il semble que de grands progrès aient été accomplis dans ce domaine.
- Pour résumer votre problème, il existe une page wikipedia .
- Il y a yaml-css , qui prend yaml et le transforme en css
- Il y a baseline , mais cela suppose des connaissances en CSS.
- Je suggèrerais également de regarder Adobe Dreamweaver . Ils ont beaucoup d'outils CSS et de génération de style qui produisent un code très lisible et compatible w3c.
J'espère que ça aide.
J'ai récemment découvert un site Web de Nice 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 communs, ainsi que de nombreuses autres fonctionnalités de gestion Tout le projet et le partager avec d'autres en ligne.
Je dois avouer que je ne l'ai pas encore essayé moi-même, mais je l'ai un peu examiné et cela semble plutôt cool. Je vais probablement l'utiliser assez tôt.
J'aime ajouter Bootstrap , c'est un framework frontal puissant et intuitif pour un développement Web plus rapide et plus facile.
Sass semble avoir un potentiel pour atténuer certains maux de tête css.
J'aime RocketCSS . Beau design épuré, essayez-le.