Ik moet de komende dagen een prototype van een web-app presenteren aan een van mijn klanten, het punt is dat ik niet zo goed ben in CSS en het ergste van alles is dat ik bijna nooit tevreden ben met de resultaten die ik krijg.
Het coderen van de bedrijfslogica vormt voor mij geen uitdaging, het UI-ontwerp neemt echter meer dan 80% van mijn tijd in beslag. Ik heb niets adembenemends nodig, alleen een schone, mooie en representatieve omgeving, een voorbeeld:
Dit is een terugkerend probleem dat ik heb. Ik zou willen dat de ontwikkeling van web-UI een minder naakte standaardstijlzou hebben, een benadering die vergelijkbaar is met Visual Studioof iPhone SDKzou erg handig zijn voor mij.
De bovenstaande mockup gemaakt met Balsamiq Mockupsis een geweldig voorbeeld, alle meest voorkomende “componenten” zijn beschikbaar voor gebruik, en het beste van alles: er is maar één mooie stijl om uit te kiezen .
Is er zoiets voor het web? Een neutraal maar mooi CSS- of Javascript UI-framework?
Opties tot nu toe:
- Bootstrap
- Qooxdoo
- jQuery-gebruikersinterface
- jQuery-hulpprogramma’s
- MochaUI
- Ext JS
- Yahoo! Bibliotheek gebruikersinterface
- BlueTrip
- BluePrint
- Uki(Demo)
- Napkee
- YAML
- Basislijn
- iPlotz
- Sproutcore
- ForeUI
Ik ben benieuwd of er UI-frameworks met alleen CSS zijn.
Ik vond deze pagina met een zeer mooie lijst van Web UI-bibliotheken, maar de meeste (althans de goede) lijken specifiek te zijn voor Java, zijn er even goede alternatieven in pure CSS of JS?
PS: Ik ben niet geïnteresseerd in AJAX, effecten, gedrag enzovoort… mijn grootste (enige) zorg is stijl.
Bedankt voor alle suggesties iedereen!
Na een zeer zorgvuldige overweging van alle voorgestelde UI-bibliotheken, ben ik tot de conclusie gekomen dat ExtJS en Qooxdoo degenen zijn die het beste aansluiten bij mijn behoeften. jQuery UI lijkt veelbelovend, maar biedt slechts een beperkt aantal elementen.
Voor zover het alleen CSS-bibliotheken betreft, vond ik BlueTrip / BluePrint en de thema’s die door tambler werden voorgesteld als de beste. Afgezien daarvan lijken Flex en Napkee ook het ontdekken waard.
Tijd om ExtJS nu te leren! =)
Antwoord 1, autoriteit 100%
Een combinatie van 960gsvoor lay-out en jQuery-UIvoor styling is waarschijnlijk wat u zoekt.
Je zou ook het blueprintCSS-framework kunnen overwegen in plaats van 960gs.
Antwoord 2, autoriteit 64%
Ik kan niet geloven dat niemand heeft genoemd:
Het is een commercieel js-framework, maar redelijk betaalbaar, en maakt het samenstellen van een mooie gebruikersinterface een fluitje van een cent. Er is een veel completere set elementen dan jqueryui, en het is ontworpen om een hele app te maken. Ik heb er maar een beetje mee gespeeld, maar ik vind het tot nu toe erg leuk. Gratis voor persoonlijk gebruik.
Als je echt een idee wilt krijgen van een complete gebruikersinterface die is ontwikkeld met EXT, probeer dan deze url:
http:/ /docs.sencha.com/extjs/4.2.1/extjs-build/examples/feed-viewer/feed-viewer.html
Antwoord 3, autoriteit 64%
Hoe zit het met het gebruik van dojoen dijit?
Dijit is een snelle manier om widgets en elementen te maken. Het wordt ook geleverd met 3 standaardthema’s die gemakkelijk aan te passen zijn.
Een goede lijst met verschillende widgets hier
Antwoord 4, autoriteit 55%
Koppel met iemand diegespecialiseerd is in UI-ontwerp.
Als u beter bent in het omgaan met bedrijfslogica, kunt u uw tijd beter besteden aan het uitsluitend coderen van bedrijfslogica, zodat u deze onder de knie kunt krijgen. Hiervoor moet je leren communiceren met iemand anders die uitblinkt in presenteren. (xmlen jsonzijn gebruikelijke middelen)
Bedrijfslogica en presentatie zijn heel verschillend. Het ontwerpen van een systeem dat er niet alleen goed uitziet, maar ook intuïtief en gebruiksvriendelijk is, is best moeilijk. Net zo moeilijk en tijdrovend als het vaststellen van de interne werking van een complexe applicatie.
Een goede interface is niet zo eenvoudig als het opnemen van een css-framework.
Ik beschouw mezelf als een meer ‘creatieve’ programmeur die wel uitblinkt in presentatie. Ik had het geluk dat ik het pad kruiste met iemand die in de eerste plaats… zeer gemotiveerd, en ten tweede zeergoed was in ‘business logic’. Hij had veel meer ervaring met het plannen en implementeren van complexe systemen, terwijl ik me vooral bezig hield met interface design.
Als je productiever bent met systeemarchitectuur, planning, ontwikkeling, wat dan ook… moet je jezelf in die richting duwen. Hoewel solo-ontwikkelingsprojecten behoorlijk bevredigend kunnen zijn, beschouw ik het als inefficiënt. Het komt zelden voor dat iemand over de vaardigheden beschikt om solo-applicaties op het hoogste niveau te ontwikkelen.
De uitdaging is om iemand te vinden met wie je goed kunt samenwerken.
Antwoord 5, autoriteit 36%
Bekijk Google Web Toolkit. Het heeft een vrij schone standaardlook. Ze hebben voorbeelden. Met name hun Showcase-voorbeeld demonstreert alle beschikbare widgets en de CSS-stijl gebruikt om de look te bereiken.
Antwoord 6, autoriteit 27%
Er zijn een aantal frameworks gericht op (G)UI Design; Qooxdoo, JQuery-gebruikersinterface en MochaUIzijn er een paar (hoewel de laatste meer een proof-of-concept is dan een bruikbaar kader). Deze frameworks bieden meestal een verscheidenheid aan JS-aangedreven elementen (formulierelementen, zoals invoervelden en verzendknoppen, maar ook andere elementen zoals tabbladen). Het is echter nog steeds aan jou om deze elementen te positioneren, en misschien te stylen, naar jouw smaak.
Misschien kan het vertrouwd raken met een CSS-framework (zoals 960GS) een aanvulling zijn op de bovenstaande JS UI Frameworks.
p>
(Als persoonlijke disclaimer; ik heb heel weinig ervaring met een van de hierboven genoemde frameworks. Maar ik weet zeker dat Google of SO antwoorden kunnen geven die ik niet kan.)
Antwoord 7, autoriteit 27%
Dit zal je niet helpen voor je huidige project, maar het is het overwegen waard voor toekomstige projecten. Na vele jaren bezig te zijn geweest met het maken van GUI-applicaties in HTML 4 en constant geworsteld te hebben met de beperkingen van CSS en HTML, dacht ik dat ik Adobe Flex eens zou proberen. Wat een verbetering!
In plaats van een besturingselement met tabbladen of gegevensraster te vervalsen, kunt u met Flex of Silverlight in uw markeringen eenvoudig een besturingselement voor pagina’s met tabbladen of gegevensraster opgeven. En de kaders worden geleverd met standaardstijlen die saai maar helemaal niet slecht zijn. Ik zeg niet dat deze HTML volledig vervangen, maar als je widgets en GUI-lay-out nodig hebt, denk ik dat ze een veel beter alternatief zijn.
Antwoord 8, autoriteit 27%
Je zou kunnen overwegen om de volgende site te bezoeken:
http://themeforest.net/category/site-templates/admin-skins
Er zijn hier verschillende “Administratieve” thema’s die u hier kunt kopen, die mogelijk aan uw behoeften voldoen.
Antwoord 9, autoriteit 18%
Dit soort wireframe-mockups zijn een briljante manier om te beginnen.
Nadat ik de meeste van de hier besproken UI-framewroks heb gebruikt, zou ik u om de volgende redenen naar jQueryUi willen sturen:
-
jQueryUI CSS-framework zorgt voor de consistente en cool ogende CSS voor u (het is heel eenvoudig – maak gewoon wat opmaak en pas de klassen toe)
-
jQueryUI heeft tabcontrole en biedt veel handige, snelle manieren om formulieren op te maken.
Antwoord 10, autoriteit 18%
Als u zich richt op moderne, niet-IE-browsers, moet u Sproutcoreeens bekijken. Voor mockups gebruik ik mockingbird.
Antwoord 11, autoriteit 18%
Een relatief nieuw PHP-framework dat speciaal is ontworpen voor de ontwikkeling van UI-gerichte software. Elementen die je hier hebt, waaronder tabbladen, filters en rasters, zijn inbegrepen en je hebt ongeveer 20 regels code nodig om te implementeren.
Antwoord 12, autoriteit 9%
Heb je Axuregeprobeerd? Het is een tool om snel wireframes, prototypes en specificaties voor applicaties en websites te maken.
Het werkt op dezelfde manier als Balsamiq, maar u kunt uw wireframes/prototype exporteren als HTML, CSS en Javascript.
U kunt dit vervolgens uploaden naar een server of het als werkend voorbeeld op uw computer uitvoeren.
Je kunt formulieren, links, tabbladen, rollovers en Javascript-effecten maken.
Antwoord 13, autoriteit 9%
Als je al Balsamic Mockups voor je prototypes gebruikt, moet je Napkeeoverwegen. Om de website te citeren: “Met Napkee kunt u Balsamiq-mockups met één klik op de knop exporteren naar HTML/CSS/JS en Adobe Flex 3.”
Antwoord 14, autoriteit 9%
Ik kwam dit een tijdje geleden tegen en kon niets vinden, dus nam ik het als een kans om CSS te leren. Maar sindsdien lijkt het erop dat er grote stappen zijn gezet in de richting van dit onderwerp.
- Om uw probleem samen te vatten, er is een wikipedia-pagina.
- Er is yaml-css, die yaml neemt en er css van maakt
- Er is baseline, maar het veronderstelt enige css-kennis.
- Ik raad ook aan om Adobe’s Dreamweaverte bekijken. Ze hebben veel tools voor het genereren van css en stijlen die zeer leesbare en w3c-compatibele code produceren.
Ik hoop dat dat helpt.
Antwoord 15, autoriteit 9%
Een combinatie van 960gs voor lay-out en jQuery-UI of JQuery-tools is geweldig
ik gebruik ze bijna in elk project, maar ik zou graag willen toevoegen aan http://easyframework.com/
hoewel het niet zakelijk vriendelijk is, dus?
zorg ervoor dat je de licentie bekijkt
maar ik vind het leuk
Antwoord 16, autoriteit 9%
Ik ontdekte onlangs een mooie website genaamd iplotz.com waar je online een mockup van je applicatie/website/project kunt maken zonder iets te installeren.
Het heeft ook de meeste algemene bedieningselementen, samen met veel meer functies voor het beheren van het hele project en het online delen met anderen.
Ik moet toegeven, ik heb het zelf nog niet geprobeerd, maar ik heb er even naar gekeken en het lijkt me best gaaf. Ik zal het waarschijnlijk snel genoeg gebruiken.
Antwoord 17
Sassziet eruit alsof het potentieel heeft als een manier om sommige css-hoofdpijn te verlichten.
Antwoord 18
Ik voeg graag Bootstraptoe, het is een intuïtief en krachtig front-end framework voor sneller en gemakkelijker internet ontwikkeling.
Antwoord 19
Ik hou van RocketCSS. Mooi strak ontwerp, probeer het eens.