How to save a whole website as a jpg or png in order to post it on Behance? - web

I am finally done with my website and now I am looking for the best and easiest way to save it as .jpg or .png in order to be able to present it on Behance. What is the best way to do this?
I used HTML, CSS and JQuery to build my single page website.
I kindly ask you to help me with this as I am still new to coding and am still discovering the world of web design!
Thank you all in advance!

There are several addons that you can use to screen capture an entire webpage. Webpage Screenshot is one that works in Firefox and Chrome.
https://chrome.google.com/webstore/detail/webpage-screenshot/ckibcdccnfeookdmbahgiakhnjcddpki?hl=en
https://addons.mozilla.org/en-US/firefox/addon/fireshot/

If i understand it correctly, you want to save your webpage as an image to display it as a presentation.
There are many options you have.
One of them is to take a screenshot of the webpage and use a GFX editing program to crop it to your liking and save it.
Another of them is to use a browser add-ons to take a screenshot of the web page and save it.

Related

Chrome Extension i18n: Split the messages.json file?

I’m internationalizing my chrome extension but I really have a lot of text to translate. For better handling of all the text it would like to have different messages.json files, e.g. one for all the text of the options page, one for the pop-up page, one for the background script, etc.
I have not found any information how to do that. Is it even possible?
Thanks and regards, Tensai

How to better expose your chrome extension

I've developed a chrome extension because I needed something that could make pages view things in greyscale.
I tried addons like this but it was completely broken for me.
Anyway, after creating my own, with a lot more than just 'greyscale' functionality I called it something really generic.
So now I'm worried, anyone searching for 'greyscale' or 'webpage photo filter' wont find my extension!
My question is; is there any way to add tags to your extension listing in the store that searches will take into account? Or do you have suggestions on where I should spout keywords in the current description space?
Add keywords into your extension's description, either into sentences, bullet points, or just a simple list at the end.
There are no tags in Chrome Web Store listings. You have to get creative with your text.
A suggestion for your description:
Create your own webpage photo filters!
See things in;
black and white (greyscale)

google image search by image file(Not URL)

I've looked around, this question has been asked before but i would like to know if it was possible to do so, maybe without using an API, or using another search-engine.
I would like to check the web for images, by searching with an image.
Is there any way to do so, if so can anybody point me in the right direction, i just can't seem to get started.
Update: This is now supported natively in Chrome. You can right click and image and choose "Search Google for Image."
This extension is the best way. The tool is native to Google Chrome.
Right click to search by image URL. No copying and pasting.
Like so?
https://www.google.nl/search?tbm=isch&hl=nl&source=hp&biw=1680&bih=989&q=YourImageURL_Here
Or just drag the image in the search bar of google.
anyways, look at this post
Google image search: How do I construct a reverse image search URL?
You can use google search by image. Look at this http://www.google.com/insidesearch/features/images/searchbyimage.html
this is the direct link which work as of now. But not necessarily for forever.
https://www.google.com/searchbyimage?image_url=YOUR_IMAGE_URL

Any browser plugins for customizing web pages intelligently?

I generally use firebug to remove unwanted divs and tags and resize stuff on the web-page .. frequently for gaming sites like chessbomb. But this is tedious, and every time tab reloads, i would have to do it all over again.
So is there any plugin which would remember the setting for particular site and apply it on the load itself. For starters i just need something to remove div tags based on names. If it can resize too then thats all the more useful.
Thanks.
You can use Adblock Plus with some CSS selector usage to do this. Look at the doc related to this here.
For example, you could probably use something like
domain.com##div.class
to hide those divs.
This is a use case for the greasemonkey firefox plugin. You'll need to know a little javascript, but if you're doing these sorts of things in Firebug, I would assume you won't find greasemonkey too dofficult.
Have a look at http://www.greasespot.net/ and http://userscripts.org/ and you may even find someone has already written the script you're after.
To quote wikipedia on Greasemonkey:
Greasemonkey is a Mozilla Firefox extension that allows users to install scripts that make on-the-fly changes to HTML web page content on the DOMContentLoaded event, which happens immediately after it is loaded in the browser (also known as augmented browsing).
As Greasemonkey scripts are persistent, the changes made to the web pages are executed every time the page is opened, making them effectively permanent for the user running the script.

showing content on the blank screen after downloading a file

I've observed that under certain circumstances, a web browser will navigate to a blank page and then prompt the user to download a file. In my current situation, it's navigating to a URL that generates an Excel file. The download of the file works perfectly, but the user is now stranded on a blank page. There are two things I would like to figure out:
What causes the blank page to be displayed? It doesn't happen all the time. Is it the difference between using GET and POST (I can't recall seeing a hyperlink do it, but forms usually do)? Is it something to do with the Content-Disposition? In my current case, I've set the Content-Disposition to be "inline" because I want it to display in the browser in IE. Firefox (and presumably others) will of course prompt to download because they can't display it inline. It is the situation where the user chooses to save it that the blank screen results.
If it is possible, I'd like to display some content on this blank screen to provide the user with a message like "your file has been generated, click here to go back to the main screen" or somesuch. Is there a way I can do that?
I'm using an IIS extension written in C++, so solutions for ASP, PHP, etc will not be helpful unless they're generally applicable (though I wouldn't mind learning about solutions in those languages!). Thanks.
I think you practically answered your own question: setting content-disposition to inline does exactly that. One solution that comes to mind is browser detection: use inline disposition if the browser is IE, attachment otherwise.
BTW, as a user, I prefer sites which offer me a choice whether I want to download the file or view it inside the browser (when, for example, accessing a PDF file). In this case, I would consider having a link/button for downloading the file, and adding a second link/button for IE browsers to view it.

Resources