I am now getting to the point that I want to sprite the images on www.trailbehind.com.
Most of the images are loaded by JavaScript functions, and I have lots of little images such as the map icons.
Is there any software that supports this? I know that you can use Django-sprites if your images are in Django templates. And you can use GWT similarly, if you want to write some Java code.
What's the best way to go about this for a website that is Python/Django with a Javascript front-end? I never show any HTML unless the user has JavaScript turned off.
You can also use Glue. It's an open-source command line tool to generate css sprites.
There is an online sprite generator. This can help the process greatly.
SpriteMe is a great option, it works as a bookmarklet so you can easily run it on any site you have to see the potential gains.
If you are on Mac, you can have tools for this. These tools are ordering sprites in an efficient way and generates the possible minimum sprite sheet. Also they are generating CSS output for you automatically. Thus, you don't need to fight with coordinates or counting pixels. You can use Sprite Master for this.
You can use http://draeton.github.com/stitches/ is an HTML5 online application.(To be opened with a modern browser)
You just have to drag and drop your images and you can generate the sprite image and the css code to use in your style sheet.
If you wanna generate tighter sprites output, try ZeroSprites.
ZeroSprites uses VLSI floorplanning algorithm.
Related
After many fruitless days of trying to get JQuery Mobile and AngularJS routing to work together, I'm considering my alternative options..
Is there a way to use the JQM CSS without relying on JQuery's javascript?
Or is there a substitute CSS package that are recommended? something with all header/footers and lists that is available in JQM?
Of course, there is an CSS file in the package you downloaded. But all the sites functionality and the mobile adaption will be broken. You can rename the classes and the id's or directly use the classes from the css file.
Greets
There are quite a few jQueryMobile functionalities that rely solely on the CSS fole, eg. the grids. You won't get the interactions, but all the buttons looks, shapes and colors are totally useful without the JS.
Still - depends on your expectations.
And when using it like that you need to understand a bit how JQM works to know the classes and html structure that's expected, because some of these are generated by javascript.
[kind of digression]
But maybe you just dislike how big jquerymobile is?
Then you probably want to use: http://jquerymobile.com/download-builder/ to get only stuff you need, and also use tte themeroller here: http://jquerymobile.com/themeroller/index.php to create only one theme (global) and remove other themes (A,B,C)
That's how you get it a lot smaller.
You can reuse the CSS file inside he downloaded JQM package. The file jquery.mobile-1.x.x.css can be included, but make sure to include the images folder as well and have it at the same location at the destination.
If you aren't sure of which classes to include for which purpose, you can simply find it out by inspecting a JQM demo page to find out (View source will not work due to the JQM javascript).
JQS provides support for ui animations and user experience enhancement. Removing libraries will dispart you from accessing css contents created and used by javascript in order to 'manage' a front-end design. –
Yes you can use jquery mobile theme and adapt it to your needs.
Just reading there was adapter releases for your situation : https://groups.google.com/forum/?fromgroups#!topic/angular/oIxRxpkn3L0
Perhaps substitutes to css packages are documented. About heavier JQM templating and using, there are some introduction to what you'll need to take a look at like adobe theme-control-jquery-mobile.html ..
I have previously created buttons and other graphics (footer bars) from within photoshop and then saved them out for web. Should I now be using css to create my buttons for me? I noticed these are quite code heavy.
You don't have to but the reason using css is considered the better way is because you will not need to make an extra http request to get the image. It really is personal preference.
If the design, you previously made, satisfies your goals there is no necessity to change it. But if you want to use advantages of CSS and if you are not scared of some problems with browsers which do not support CSS completely or support it with some bugs, you can create new CSS elements.
Here are some advantages and disadvantages of both ways.
Images
+ cross-browser solution. Easier to make GUI look the same way in all browsers.
- extra requests to the server
- extra traffic downloaded by users
- the page will weight more and load longer time
- much more time needed to make some little changes in the GUI appearance
CSS
+ no extra requests to the server
+ no extra traffic downloaded by users
+ the page will weight less and load faster
+ less time needed to make changes in the GUI appearance
- NOT a cross-browser solution. Harder to make GUI look the same way in all browsers.
As you can see, CSS has more advantages, but it is way harder to make a cross-browser design using it.
P.S. I'm sorry for my poor language.
Generally using code for things like buttons is currently the way to go. Buttons created in photoshop tend to look gimmicky (currently) and, if you look at the majority of websites you'll notice buttons are very clean, usually subtle gradients and slight box-shadows or such. With the benefit of not having an extra http request this gives it even more of an edge to use code to create such things.
There are many tools and pre-made buttons available to help create the buttons.
Twitter Bootstrap buttons are very clean and widely used. (You don't have to use the whole bootstrap system to use them, just look at their code and re-create :))
Or to customise your own button you can use websites such as CSS button generator
I have designed a log-in page in photoshop, saved the image in png format. but I dont know how to use this image in asp.net web page. Please help in this concern or show me the resource or the way I can design a good log-in without compromising on polished look and functionality.
Thanks
Changing a PSD Template into a CSS Template is not a easy task as it seems. Comprises may steps.
You have to following steps.
Slice the images in your psd template.
Export the images
Try to minimize the use of photoshop generated slices as less as possible. You should try to recreate the effect using CSS the best you can.
You can first try this into Table Structure, which is the default way Photoshop exports the slices and the HTML.
Later on, create a table less layout. It should be pretty easy once you have created the table layout.
I am assuming, you know how to find the tutorials, regarding the steps I have mentioned above.
You need to cut the Photoshop image into several small images, and then use css to style it. I recommend you to learn html and css.
You can have a look at this tutorial on how to create a webpage from a Photoshop file.
slice the psd file or copy merge ,and convert it into html page by using <div> and css. And name it as indexloginpage.html after converting .html what u have created the same in photoshop.
Rename the indexloginpage.html to indexloginpage.aspx and open this file in visual studio.
Apply code as per ur requirements.
We're currently generating reports for our web application using html5 / css3, and they look good on screen, but obviously when the user hits print who knows what is going to come out of the printer. So, what I would like to know is what is the best way to convert these reports to PDF for download / printing while maintaining the same visual quality of the on screen reports.
Update 2010-10-26 16:01: We're using both .NET and Perl
The only think I can think of that might work is wkHTMLtoPDF. It's a QT app that sits on top of WebKit to generate its PDF.
The good news is that it even evaluates JS so just about anything goes.
The other good news is that QT is available across a wide selection of platforms. Whatever you might be using, chances are you can use QT.
Try Prince XML, the results are pretty to look at.
If you are using some of the new HTML5 elements like Canvas, then probably even the popular PDF converter wont help you.
I suggest you to put suitable print-friendly version of your CSS. This could be achieved by using media="print" attribute in the <link rel="stylesheet"... tag of a separate CSS file, which is containing the definitions for print version.
Some options (all proprietary):
Aspose.Pdf for .NET: Expensive, very good though.
Winnovative HTML to PDF Converter: I've already use their tool, gets the job done.
ExpertPDF: Another good one.
For open-source alternatives, please see here:
Open Source HTML to PDF Renderer with Full CSS Support
ExpertPdf (www.html-to-pdf.net) supports html5 / css3.
You can try the online demo here:
http://www.html-to-pdf.net/free-online-pdf-converter.aspx
There is a node module html5-to-pdf that works pretty well.
Is free and open source.
It runs on Electron. There are some bugs (for example anchor tags render the hyperlink as well) - but it might be an easy fix.
If this is a question that shouldn't be on SO, please let me know.
Has anyone tried the website:
http://csssprites.org/
To autogenerate and use CSS Sprites? What are your thoughts? I'm thinking about implementing (constantly looking for new ways to improve performance)
Yes, sprites speed up a site because
less HTTP requests
avoid small overhead every image has
They make sense for icons etc
Downsides are
More difficult to change one icon
Can't cache control individual icons
I used CSS Sprites to create my first sprite, but I tend to chop them together myself now as I personally find it easier to create strips-of-sprites (i.e. long and thin) rather than big square sprites as its easier to update them if you understand the convention used to create them.
If you are using .net, check out http://www.RequestReduce.com. It not only creates the sprite file automatically, but it does it on the fly through an HttpModule along with merging and minifying all CSS. It lso optimizes the sprite image using quantization and lossless compression and it handles the serving of the generated files using ETags and Expires headers to ensure optimal browser caching. The setup is trivial involving just a simple web.config change. See my blog post about its adoption by the Microsoft Visual Studio and MSDN Samples gallery.