I am looking for a command line tool, or a library (preferably in Perl) to download an HTML page and all its components: external CSS, external JavaScript, images, flash or other objects, etc.
I have not found a tool to do that. I could download the HTML page, and parse the HTML to find all the external links. But I'd rather not re-invent the wheel if an existing tool does that.
WGet may serve your needs, although I do not know about how it works with CSS.
wget will work easily, but ajax/xul/etc and similar issues it won't handle and for good reason.
Related
Can anyone know convert PSD files to HTML and CSS code via any open source software's, Plugins or Frameworks are available to convert it...?
Kindly assist me on this.
You need to have at least basic knowledge on using adobe Photoshop.
a. You need to know how to deal with layers so you can extract the website carefully.
b. Use slicing tool. after you carefully slice each part. then you can now press and hold Ctrl+Shift+Alt+s (all at the same time) then choose save
At the bottom option you can see "Format:" choose html and images then save it on your pc.
Second option is
you can convert you psd to html by going to this site.
http://psdtoweb.de/index.php
I personally don't recommend you to use these methods because the codes in html is not good. I recommend you is study bootstrap instead.
With as all being very careful about resources within web development I am looking for a tool that you can pass a url and it show what CSS is actually used on that page but more importantly have the ability to download or extract that CSS Selectors and the actual css to create a single css of only the css needed to render that page, I have tried DustMe and various plugins. I realized I am not using 89% of bootstrap for example but picking it apart is almost impossible on pre built sites.
thanks
There is a online tool which provides that service, its not free though, unused-css.com
I'd recommend using uncss (requires node).
It can be added to your grunt build scripts to remove the css your are not using and is easy to configure
uncss.io works pretty well. Just enter your page URL and it will give you the cleaned CSS. It works for me on some pages, but not other pages.
REF: unused-css - (Paid Service)
or CSS Trashman
EDIT:
Use uncss git which requires node.js. It can be added to your built-in scripts to remove the unused css.
I'm using Phonegap to build an iPad app.
The app is supposed to be offline (aside of form submission), so it will have mostly static pages, so I'm going to have lots of HTML files, since I am not using JS MVC / Require JS to minimize the complexity. The more I see it, it's basically a static site wrapped in Phonegap to build an app.
Since I'm gonna have lots and lots of HTML files, it will be a pain to manage changes in (for example) header/footer if I'm not using any templating engine. So far, I'm using Codekit to compile Jade files to HTML, and it works out fine, I'm only using Jade for the layout/block/include feature and HTML compilation.
The one thing I don't quite like of using Jade is if your file has lots of nested HTML tags (for example a complicated form design marked up with Zurb Foundation/Twitter Bootstrap), then suddenly Jade isn't looking so clean anymore.
Somehow I think there has to be a better way to do it, though. Has any of you done a mostly static pages app with Phonegap? Any better suggestion?
Thanks
you can use 1 file for all, save the data in sqlite or as variables in JS files.
the code should be like this:
<!doctype html>
<html>
<head></head>
<body>
<div id="page1" class="page">...</div>
<div id="page2" class="page">...</div>
<div id="page3" class="page">...</div>
<div id="page4" class="page">...</div>
</body>
</html>
then you can create a function "navigate(page_id)" in the js file:
public function navigate(pageid){
$('page').hide();
if(pageid == 'page1'){
$('#'+pageid).show();
// get data and append it in the div.
}
...
}
for sure you can use Jquery Mobile, but it will force you to use a pre-defined template, Personally i don't use it because writing my own template is much better and may give more options.
I use a very standard workflow that is catching huge popularity in web development - Grunt. Grunt does tasks very similar to how Codekit compiles jade, only that Grunt is very stable, has a huge community and supports jade by installing grunt-contrib-jade. It'd integrate with several templating engines.
Grunt might seem to have a learning curve in beginning, however it is a great alternative, open-source and free to use.
Grunt website: http://gruntjs.com/
I would suggest this framework. It's so easy to achieve page navigation, and you don't need to put all your pages into one file, that will make it very hard to read or maintain. This framework allows you separate any of your files(html, js, css) into very small ones so that each file is easy to read and maintain.
It also uses Ajax to get html(pages/partial views), so you can do what you like to with the html.
Our phonegap team have finished some projects based on this framework, and it's very successful. There are demos with source code on that site, which would help you setup your project. You can take a glance at the files structure through the source code.
I would NOT advise jQueryMobile as it's really a pain for phonegap apps. Here are some posts what explain why:
How jQuery Mobile Eats PhoneGap Performance, See Experiment
Who Is Murdering PhoneGap? It's jQuery Mobile
I'm using JQuery mobile successfully. I use RazorEngine as a template service and them compile the files down to static html. Jquery Mobile has a nice paging engine that uses ajax to fetch the static html files and then show those on the page, along with a lot of other nice mobile specific features.
In your post you mentioned you did not use an mvc framework. However I would advise you to look into backbone.js. Backbone is a technology that is often being used in combination with Phonegap. You could use Backbones views to organize your code.
When learned to make JSP pages, I was taught to use a common menu page separate from all other pages and then import the menu page to each page using <jsp:directive.include file="menu.jspx" />.
Is there a similar way to do this in HTML5? Or is there a better way to include a common menu/masthead on every page using HTML5?
No, html5 doesn't do this.
What you were doing in JSP was a server-side include.
What you are asking for is a client-side include, those don't exist in html5.
I you had a good reason for loading something client-side, you could use javascript.
Look into AJAX. A lot of .js libraries have good support, to make it easier.
jQuery for example has a load() function which takes some of the pain away.
I don't recommend using something like that for a navigation menu though.
Server-side includes would be better.
If you're simply working on a small project, maybe you're doing it locally, and you just want to make it so you don't have to copy-paste chunks of the page everywhere, php is an easy way to do it.
Use something like XAMPP to run php on your machine in an easy-to-follow way.
Then use php's include function, as demonstrated here: PHP Include to do what you want.
The standard way to do this is to use Server Side Includes. Most servers support this.
Further reading here
Is there a simple way to save an HTML page that has an external stylesheet (1 or more) referenced but force all of the rules to be inserted into the page itself, inline? So basically I want to move all external rules onto the elements that they affect themselves.
For what it's worth, I'm using nearly every major browser (incase the solution is browser-specific), and I'm on Windows (incase it's OS-specific).
I'm assuming you've seen the online tools that are available like this one? This online tool (which I have not tested but looks like it works) gives you the option of providing a url or source code and shows warnings for cross-browser compatibilities with your styles.
I use a tool that does something like that, but it was written for Ruby and TextMate for Mac. It is released by Campaign Monitor as a way of preparing HTML emails. It brings all the rules from the stylesheet and makes them inline styles.
It might give you a good start. I'll keep looking.
TextMate Email Bundle
The piece that does the heavy lifting is the TamTam RubyGem which brings the CSS inline. However, it seems to only support one style element (not link elements). If you could work with those restrictions, you could get it to work on Windows using Ruby and a ruby script file. Not quite drag and drop I'm afraid.
i use chrome extension Save Page WE