How can I achieve a cool looking photo gallery page? I don't know Flash, but can learn, and thought about a random collage that 'pulls out' a photo that you hover over.
It's for a photographer, so no thumbnails, grids, etc.
If you're looking for a tool that's pretty flexible and will support itself later on as you can just train the user to work with it check out JAlbum.
To work on integrating this yourself you can check out AJAX ASP Photo Gallery or something like this one.
If you're looking for a flash/flex based solution that they can just "plug-in" as a stand-alone product which incorporates some of the features you've described StudioCloud has a nice one that has a monthly fee...
I have had good results using the Galleria plugin for jQuery: http://devkick.com/lab/galleria/.
It will require an html page as a source, but this is relatively easy to produce automatically from a database or directory structure using ASP.NET
If the data does not need to be updated too often you could even produce the HTML by hand in a pinch. It wouldnt be difficult though it isnt easy to maintain.
I agree with Mat - JAlbum is excellent - but I'd also like to add that it's even better with the BananAlbum skin.
There are dozens of off the shelf apps available. Gallery, Wordpress (after configuration), and a few ASP.Net based ones. Flash is certainly not required.
That said, in order to learn a bit about Pylons, I wrote my own basic photo blog. If you can do basic CRUD development, it shouldn't be too hard.
Regarding your collage idea, you can accomplish that with JavaScript as well. See this article for similar effects stuff.
A little random, but the Silverlight deep zoom functionality is pretty cool around this area (although whether it's worth learning for this is another matter):
Example here: http://memorabilia.hardrock.com/
Related
I have been searching for and have not located (I fear it doesn't exist) a wire frame application that will use our current css for objects.
We have spent a lot of time perfecting our css to get the look we want, now I want to be able to use that css for new mockups without creating new objects each time we add something (as we would have to in photoshop).
In a perfect world, it would even handle the page layout so all that remains is the logic.
Has anyone heard of a tool that can do this?
I haven't used it, and I can't vouch for it, but https://alpha.easel.io/ might fit the bill. It's still in beta, but looks very interesting.
From their homepage: "Implement designs quickly using exact CSS properties rather than guessing from a mockup."
http://axure.com is a popular wireframing tool. There ways to make it use custom CSS: http://enterpriseux.tumblr.com/post/8972215862/an-axure-html-prototype-hack
I am using SimpleViewer to show images on a website. It's a nice and elegant tool. But, as it is using Flash not all devices (e.g. iPad?) will/can show the images. Does anybody know about a non-Flash alternative? Maybe totally CSS cased?
I know this is an old question, but I found something that looks quite a bit like SimplerViewer called Gallerific. https://github.com/iamvery/galleriffic
If you check out the example 2 you'll see a layout that looks a lot like SimpleView
Well, I have checked under every rock and I can't find a good non-flash alternative to SimpleViewer (i'm really curious now to if there's one!). There are rumours about it soon being changed to HTML5 (a wise decision), but I don't know if you can wait that long.
I would say the best option is jQuery and CSS, you can personalise and style your gallery as you wish, but you will have to be at least a bit comfortable with html editing. It's not complicated at all, you should give it a try.
You can find lots of jQuery galleries and sliders tutorials here for example: http://vandelaydesign.com/blog/web-development/jquery-image-galleries/
Do some search engine research to get the best options, there are tons of different galleries.
Good luck!
They have now, see: this comment at the SimpleViewer Forum. It's called Universal Playback.
I have to present a prototype of an web app in the following days to one of my clients, the thing is I'm not so good at CSS and worst of all I'm almost never happy with the results I get.
Coding the business logic poses no challenge to me, the UI design however takes more than 80% of my time. I don't need nothing breathtaking, just a clean, nice and presentable environment, an example:
This is a recurring problem I've been having, I wish web UI development could have a less naked default style, an approach similar to Visual Studio or iPhone SDK would be very useful to me.
The above mockup created with Balsamiq Mockups is a great example, all the most common "components" are available to use, and best of all: there is only one good-looking style to choose from.
Is there something like this for the web? A neutral yet nice CSS or Javascript UI framework?
Options so far:
Bootstrap
Qooxdoo
jQuery UI
jQuery Tools
MochaUI
Ext JS
Yahoo! User Interface Library
BlueTrip
BluePrint
Uki (Demo)
Napkee
YAML
Baseline
iPlotz
Sproutcore
ForeUI
I'm interested in knowing if there are any CSS-only UI frameworks.
I found this page with a very nice list of Web UI Libraries, but most of them (at least the good ones) seem to be specific to Java, are there any equally good alternatives in pure CSS or JS?
PS: I'm not interested in AJAX, effects, behaviors and so on... my main (only) concern is style.
Thanks for all the suggestions everyone!
After a very careful consideration of all the UI libraries suggested, I've come to the conclusion that ExtJS and Qooxdoo are the ones that most closely fit my needs. jQuery UI seems promising but only offers a reduced amount of elements.
As far as CSS-only libraries go I've found BlueTrip / BluePrint and the themes suggested by tambler to be the best. Aside from that, Flex and Napkee also seem to be worth exploring.
Time to learn ExtJS now! =)
A combination of 960gs for layout and jQuery-UI for styling is probably what you are after.
You could also consider the blueprint CSS framework instead of 960gs.
I can't believe nobody has mentioned:
http://www.extjs.com/
Its a commercial js frameworks, but pretty affordable, and makes putting together a nice UI a breeze. There's a much more complete set of elements then jqueryui, and its designed to make an entire app. I've only played with it a little, but I really love it so far. Free for personal use.
If you really want to get a feel for a complete UI developed with EXT, try this url:
http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/feed-viewer/feed-viewer.html
What about using dojo and dijit?
Dijit is a fast way to create widgets and elements. It also comes with 3 default themes which are easy to modify.
A good list of different widgets here
Pair up with someone who specializes in UI design.
If you are better at dealing with business logic, your time is better off spent exclusively coding business logic so you can master it. This will require you to learn how to interface with someone else who excels at presentation. (xml and json are common means)
Business logic and presentation are very different. Designing a system that not only looks good, but is intuitive and easy to use is quite difficult. Equally as difficult and time-consuming as establishing the inner workings of a complex application.
A good interface is not as simple as including a css framework.
I consider myself to be a more 'creative' programmer who does excel in presentation. I happened to be lucky enough to cross path's with someone who was, first of all... very motivated, and second of all very good at 'business logic'. He had a lot more experience planning and implementing complex systems, while I mainly have been focusing on interface design.
If you are more productive doing system architecture, planning, developing, whatever... you should push yourself in that direction. While solo development projects can be rather fulfilling, I view it as inefficient. It is very rare that someone possess skills to develop top-level applications solo.
The challenge is finding someone who you work well with.
Check out Google Web Toolkit. It has a pretty clean default look. They have examples . In particular, their Showcase example demonstrates all of the available widgets and the css styling used to achieve the look.
There are a few frameworks aimed at (G)UI Design; Qooxdoo, JQuery UI and MochaUI being a few of them (although the last is more a proof-of-concept than a usable framework). These frameworks usually offer a variety of JS-powered elements (form elements, such as input fields and submit buttons, but other elements like tabs as well). However, it will still be up to you to position these elements, and perhaps style them, to your liking.
Perhaps familiarizing yourself with a CSS framework (such as 960GS) might complement the above JS UI Frameworks.
(As a personal disclaimer; I have very little experience with any of the frameworks mentioned above. But I'm sure either Google or SO can provide answers I can't.)
This won't help you out for your current project, but it's worth considering for future projects. After spending many years creating GUI applications in HTML 4 and constantly wrestling against the limitations of CSS and HTML, I thought I'd try out Adobe Flex. What an improvement!
Rather than faking a tabbed page control or data grid, with Flex or Silverlight, your markup can simply specify a tabbed page control or data grid. And the frameworks come with default styles that are boring but not at all bad. I'm not saying these completely replace HTML, but if you need widgets and GUI layout, I believe they're a much better alternative.
You might consider browsing the following site:
http://themeforest.net/category/site-templates/admin-skins
There are several "Administrative" themes available for purchase here that may suit your needs.
wireframe mockups like that are a brilliant way to start.
Having used most of the UI framewroks discussed here, I'd liek to steer you towards jQueryUi for the following reasons:
jQueryUI CSS framework takes care of the consistent and cool looking CSS for you (it's really easy - just make some markup and apply the classes)
jQueryUI has tabcontrol, and heaps on neat quick easy ways to style forms.
If you are targeting modern, non IE, browsers, then you should check out Sproutcore. For mockups I use mockingbird.
A relatively new PHP framework specifically designed for development of UI-focused software. Elements you have here including Tabs, Filters and Grids are included and will take you about 20 lines of code to implement.
http://agiletoolkit.org/
Have you tried Axure? It's a tool for rapidly creating wireframes, prototypes and specifications for applications and web sites.
It works in a similar way to Balsamiq, but it allows you to export your wireframes/prototype as HTML, CSS and Javascript.
You can then upload this to a server or run it on your computer as a working example.
You can create forms, links, tabs, rollovers, Javascript effects.
If you are already using Balsamic Mockups for your prototypes then you should consider Napkee. To quote the website "Napkee lets you to export Balsamiq Mockups to HTML/CSS/JS and Adobe Flex 3 at a click of a button."
I ran into this awhile ago, and couldn't find anything, so I took it as an opportunity to learn css. But since then it seems great strides have been made towards this subject.
Summarizing your problem, there is a wikipedia page.
There is yaml-css, which takes yaml and turns it into css
There is baseline, but it assumes some css knowledge.
I'd also suggest looking at Adobe's Dreamweaver. They have a lot of css and style generation tools which produce very readable and w3c compatible code.
I hope that helps.
A combination of 960gs for layout and jQuery-UI or Jquery tools is great
i use them almost in every project but i'd like to add to http://easyframework.com/
although its not a business friendly so
make sure to check out its license
but i like it
I recently discovered a nice website called iplotz.com where you can create a mockup of your application/website/project online without installing anything.
It also has most of the common controls, along with much more features for managing thw whole project and sharing it with others online.
I must admit, i didn't try it yet myself, but i looked at it a bit and it seems pretty cool. I'll probably be using it soon enough.
Sass looks like it has potential as a way to mitigate some css headaches.
I like to add Bootstrap it's intuitive, and powerful front-end framework for faster and easier web development.
I like RocketCSS. Nice clean design, give it a go.
I am working on the rewrite of a large VB6-based application. We are moving from Windows Forms to web-based deployment using ASP .Net. There are about 50 core users and all are internal to the company.
We need an efficient way to try out different designs in order to investigate the information architecture of the site, the workflow, and the overall look and feel. Ideally, the prototype would look good enough to show to the users in order to gather feedback.
A few ajax-style drop-down menus or controls would be useful to demonstrate our ideas, but not at the expense of quick prototyping.
It feels too early to break out Visual Studio, and we need something more than pen and paper or Visio... Any suggestions?
Jeff Atwood had a nice article a while back about this:
http://www.codinghorror.com/blog/archives/001091.html
We used Visio the last project and while the Visio document screens look nearly identical to the end result I'd recommend against doing a pixel-perfect prototype. Simple rectangles and simple coloring are better and gives the designed and the web developers more freedom.
In our case some of the screens were developed by a person without good knowledge of limitations of web apps. Depending on the team members, this could lead to endless discussions about what is possible and what is not.
Have you taken a look at the excellent Balsamiq?
I use JustProto.com - it's very simple but works very fast. I regret there are no ready components to use but you can create your own masters.
Anyway - I did a few prototypes with JP and for me it's fine enough.
In the past we've used full page graphics - either pretty designs from our design team, or just Visio/PowerPoint (don't ask) mockups - dropped into HTML pages as a background and then added ImageMap links and dropped some dynamic controls on top - Drop-downs, pop-up/accordian menus etc to link most of them together.
This worked quite well in for A/B usability testing with our users - some were slightly confused by the pretty design versions, as they looked more like usable web pages, but they quickly got the hang of it.
For large systems, you really need something with masters/templates. Two good threads here on SO:
What tools are there:
https://stackoverflow.com/questions/156937/balsamiq-mockups-alternative-for-building-wireframes
Why mockup tool instead of IDE:
Whats the best way to create interactive application prototypes?
And here is the most complete list of mockup tools I know of:
http://c2.com/cgi/wiki?GuiPrototypingTools
(I am the author of this one: MockupScreens).
You can use Balsamiq mockups, is a very good software and easy to use for prototyping, mockups can make dynamic and complexity you need, not very expensive and has an evaluation version and limited version online.
If you want a much more complex software has components and functional and you can use Axure is a prototyping software very complete, you can export and test the prototype in the browser with all the features, I invite you to go to the official pages there you can find examples.
Balsamiq link: http://balsamiq.com/products/mockups/
Axure link: http://www.axure.com/
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 6 years ago.
Improve this question
As a little side project, I am starting to build a new website for a certain organization I am affiliated to, which current site is simply outdated.
I am regularly a Java developer, and last time I really did some web development was back in the late 90s, when <p> was still more popular than <div> and Javascript was cutting-edge technology (JQuery is for lazy bums these days :) ).
Anyway, I feel really outdated. The website basically is going to be:
Django based
mostly serve static information pages
it will have a dynamic news and updates page (based on Django admin capabilites)
and some basic apps I'll develop myself (polls, small registration app, etc...)
My problem is designing the whole thing. I found some nice web-based CSS layout generators that got me going, but I still feel I'm wasting my time smoothing out the CSS files and aligning <div>s.
Are there any tools - the simpler and faster, the better - that you recommend I can use to speed up the design part of the site so I can concentrate on the real work?
I don't need anything fancy, just a nice looking layout and design that I can tweak a bit so the site will look presentable.
I second Brandon's suggestion to use a CSS framework. It won't give you 100% freedom to design anything you like, but it can speed up your design process greatly and free up your hands to do the coding you really want.
Suggestions Updated July 2013:
Twitter Bootstrap http://twitter.github.io/bootstrap/ - complete grid, typo, UI widget prototyping framework
ZURB Foundation http://foundation.zurb.com/ - responsive grid, type, UI widget prototyping framework (similar in scope to Twitter Bootstrap, but feels 'cleaner' in some ways)
960 http://960.gs/ - grid layout system
Tripoli http://devkick.com/lab/tripoli/ - really good typography, but no grid system
YUI Grids http://developer.yahoo.com/yui/grids/ - very customizable (to the point of overkill) grid system
Blueprint http://www.blueprintcss.org/ - grid system and basic typography
BlueTrip http://www.bluetrip.org - a hybrid system, mixing the best of the Blueprint grid with the best of the Tripoli typography
I won't lie to you. This website isn't the best place to go if you're looking for reliable Web Design advice. Stack Overflow is a programming community and programmers rarely know anything about design. If you want to get some real advice then I would strongly recommend the main Web Design/Development forums on the Internet, especially SitePoint.
That being said, as a former freelance Web Designer/Developer I'll offer my input on the issue. Not that you should value it, of course. After all, this is a programming website.
NEVER EVER SAY CSS LAYOUT GENERATOR EVER AGAIN! If you're going to seriously get into designing web pages then you need to learn semantic XHTML and CSS first. Whilst many people tout W3Schools as the definitive resource I see it as a programmers answer (i.e. not very good) and would prefer that you read up on the subject using...Google. There are countless examples of great websites to pick up the basics of Web Design/Development that Google is probably the best website for the job. Also, with a plethora of new websites offering this information you know it's going to be more improved than W3Schools. You'll seriously want to get clued-up on writing your design because it'll be much harder to fix things later on in the project.
If you're going to be designing web pages it would be a good idea to learn what actually makes a good design. Check out CSS Vault for a fantastic resource of some of the best-designed web pages around, of course with all the source code intact so you can have a play around with their code and see how they've managed some of the wonderful effects they've produced. I've learnt more than a thing or two from websites that have been featured on CSS Vault. On top of that you should read up on Web Design from the big Web Design/Development sites. Two of my favourites are SitePoint and A List Apart, two names that you'll near time and time again when you hear people talk about resources. Browse those websites, check their forums, see what REAL Web Designers/Developers are using, not what programmers are using.
On the subject of CSS Frameworks; they do help! The problem with using them is that you'll often spend so much time looking for a worthwhile framework that you could have finished most of the CSS for your website yourself. You'll either love them or hate them, but many people will say that they're not necessary.
Once you've got your mind set on what a good design looks like and you've got the resources you need to make something of value I suggest that you get to work! In reality when you're designing a web page all you really need is a text editor with a save function, an image manipulation program, a browser window and FireBug. An IDE helps a lot of people, but if you do use one then you'll definitely want to work in its text mode. I use NotePad++ or Emacs exclusively but a lot of people like to use Aptana Studio, so it may be worth a look.
When you're getting to actually building the code behind your website you can't really go much worse than your favourite IDE/Text Editor and a source control tool. As a Java programmer you're better suited to talk about programming so I won't lecture you on a subject you already know.
In the end, Web Design is going to take time and many of the tools that we choose to use that we claim will "save time" save very little in reality. If you're not a design guru then it will take you a substantial amount of time to create a great-looking website. It's a fact of life. Call me old-fashioned (a funny word coming from a 21 year old) but I still think that the quickest way is to sketch a design out on a piece of paper (a image program if really necessary) and to just get out there and make the damn thing! Again, I'll have to take this hunting for the silver bullet mentality as a programmers trait, one that really won't help that much when designing, because designing a web page is vastly different to writing a Java program.
In short, ignore everything you read here, read what REAL designers are doing and just make the damn thing!
There's one piece of advice that saves more time than any other when it comes to rapid development of CSS styled sites and that's KEEP IT SIMPLE
Use an attractive simple layout that doesn't require pixel perfection and that can 'gracefully' degrade in less compliant browsers (IE6). Minimise the amount of CSS and fix the basic bugs mentioned by meouw above. Then get on an concentrate on content and functionality...the real work
In my previous employment I created dozens of templates for websites.
The most useful too I ever discovered is the Firefox Web Developer Toolbar.
It has a wealth of small useful tools. My favorite feature is the ability to edit the CSS and see the results in real-time. This saves on the whole edit - upload - refresh cycle. Watch out for ie CSS inconsistencies though!
Off the top of my head, these are the most important gotchas.
double margin bug [google: double margin bug]
incorrect (but more intuitive) box model [google: box model]
incorrect (but more intuitive) float clearing [google: clearfix]
FireBug is another really usefull Firefox plugin for more in depth analysis.
I've always found Open Source Web Design to be a good resource when looking to get started trying to design something.
- http://patterntap.com/
- http://www.dotemplate.com/ (interesting concept of customizing template)
- http://www.templatemonster.com/
- http://www.freelayouts.com/websites/html-templates
- http://www.templateyes.com/
No idea what the site is going to be, but have you thought of using a pre-build CMS like Drupal, Joomla etc etc.? You can then tweak templates etc, rather than worrying about making it from scratch.
This question is pretty old, but since we're in 2012, it's only proper that I answer my own question with the exact thing I was looking for, back in 2009.
Twitter Bootstrap
Have you looked into any CSS frameworks? If you are competent enough with CSS something like a framework could help speed things up.
Don't forget firebug :) if you're worried about tweaking the design it's really great. With the inspect feature allowing you to real-time edit the CSS of your page.
https://addons.mozilla.org/en-US/firefox/addon/1843
I second Jens Roland's list of CSS frameworks.
But I would also suggest you have a look at websites such as Smashing Magazine. You might find this article of interest, amongst a lot of others. They tend to do a lot of nice and long mash-ups for the web developers that will at least give you inspiration if not a direct solution.
A colleague of mine has been trying to convince me all week that Dreamweaver, 5 years after I was last forced to use it at gunpoint, is actually now worthwhile for knocking up a design quickly and painlessly, and is also now competent at producing the HTML for that design.
I refuse to invest the 10 minutes it would take to find out based on my previous experiences of it, but you might like to give the demo a quick run around the block :)
I'd recommend finding a CMS package, since you're using Django, look into django-cms. It has TinyMCE and Markdown Support so updating your pages should be easy. Also django-cms integrates well with the Django admin interface.
A piece of paper to sketch your design
A text editor (preferably set up to save directly to a development server local or otherwise) to write up the initial HTML/CSS
FireBug/IEDeveloperToolbar to inspect each element that looks wrong and edit its CSS directly in the browser until it looks fine, followed by commits with the text editor
If you're doing any JavaScript development, use an advanced editor that highlights errors and warnings as you type. This kind of functionality has until recently been the province of static language editors only, but the free NetBeans 6 achieves this amazing feat. Traditionally, you first discovered JavaScript typos and simple bugs when first loading the parent page into a browser. The speed-up you get from being able to short-cut these iterations is profound.
NetBeans 6 also highlights CSS errors and is a more than capable editor for most all languages a web developer is likely to use these days.
You can also use www.zbugs.com - it will help you speed up a process of compressing and gzipping your CSS and Javascript files