I am looking to convert a clients website into HTML. I'm relatively new as my skills are more directed in the front end of websites (design) so I'm quite lost. The website is allegianceglobalinvestigations.com and if you scroll through it, each page has the same URL. How to I create a HTML file/template from this? I'm assuming that since there are 4 pages, I'll end up with 4 files? Do I need to use OCR for the text?
If you view the source it will show you the urls of the other frames. If you view just that url you can get the source for just that frame. You can use that source all together with some changes if you're trying to just "un-framify" the site. I think that was what you were asking.
There is very little text on there so the only OCR you will need is your eyes and a keyboard if you're trying to use real text on the site.
And yes, you will end up with 4 different files. One for each page.
Good luck with your project, the best way to learn is to dive right in!
This is a frame-based site with a top menu in one frame selecting between four pages in the other frame. The content of each subpage is encoded as a JPEG image in a table.
There are already files for each subpage: content.htm, sis.html, services.htm, and contact.htm. With this low amount of text, you may as well just type the text currently in the images into the body of these files instead of using OCR. Replace everything between <body> and </body> with the text, then use HTML to mark up to the content to your liking.
To eliminate the frames, paste the content of the body element from the menu.htm file into the start of the body element of the four subpages.
Related
This question already has an answer here:
Protect images download theory
(1 answer)
Closed 7 years ago.
I want to hide images from my HTML code. I've disabled right click, which is pretty easy however the page source can still be viewed. Is there a way to hide all images from the HTML code so that the images cannot be stolen from the source code?
I'm afraid that there isn't a way to 100% stop a user of your site from getting into the code.
Not sure what the images are for but a couple of things you can do are:
Watermark your images.
Obscure the link by converting it into hexadecimal. (More on this on Google)
Bury it in divs or a table
Use Low Res images.
But as you've already disabled right-clicking that stops casual users from taking them.
Your browser will always need som kind of source to view the image, so you'll always be able to find it in the source code. However, there are ways to make it a little bit more complicated.
For example, using PHP, you can load the image through a script to hide the real URL and prevent some users from seeing it.
But remember, if the image is visible on the page, there will always be ways to steal it.
If you publish something in the web, you can't restrict the user. They can save anything from your page to their computer. But you can use watermarks on your images but still the user can download but can't steal.
Other way is you can convert your image into data-uri so user can not download the image. But it has its own limitation. But it may worsen your site's performance depending on number of images and size of the image.
I am working with an old website designed in the mid-90s, which is coded very primitively: left-hand menu done via tables, no CSS, etc. The site consists of a bunch of .html pages. Instead of re-coding the site, I want to leave everything in place but put a header over every page with a banner saying "Go to the new site" or something similar.
This way the banner would look modern, but everything else can retain the retro look (including, most importantly, the URL structure). The header should be 100 pixels tall and fill the whole horizontal space regardless of how the tables below it are coded. The plan is to bulk-copy and paste the new code in every individual page.
What's the best way to write this header?
Assuming there is no og:image or link rel img_source, does anyone have any real-world experience or advice on better-than-random techniques to choose an image that best represents a web page?
Update: All answers are good, so upvoted them all and selected one, although it seems there is no great way of doing this. I will experiment with largest picture and screenshot of what it would like on a low-res client. Thanks all!
PS: I'm finding that quite a few pages seem to have og:image or link rel img_source anyway. More than I expected
Taking a screenshot of the website in its smallest possible form, how it would look on a notebook laptop or even a mobile (but not the mobile site version), would be a non-random approach.
Most good web designers will try to make sure users are able to see what the page is about immediately upon loading and include the most important and relevant information 'above the fold' as they say.
Choose the logo of your page as the og:image. That way your brand becomes associated with all your posts, without having to worry about what image best defines each individual page.
For other pages, you cannot control what image they have.
You could investigate how sharer.php works but other than that there is no silver bullet as to choose which image for a web page that has no definable image.
I don't have any experience with Facebook opengraph, but one trick I've used before is to grab favicons of sites I've linked to and use them as link button icons... They're small and are usually always associated with the company name and/or logo, and they're pretty universal across most professional websites. And the usually univeral filename favicon.ico makes it really easy to pick out of the html (or the link attributes if they change the filename).
Might give that a shot if that could be adapted into what you are trying to do. If you find that doesn't look too good, you can try a more "web 2.0" take and check for iPhone/iPad button apple-touch-icon png images (probably only find them on big name sites though)http://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
I would normally suggest that you simply scrape the page of img tags. However, these days, CSS background images are frequently applied to h1/header/div/a/etc. tags to display logos in place of text.
One possible solution is to grab all elements with 'logo' in their ID/class name:
var l = $('[id*="logo"],[id*="Logo"],[class*="logo"],[class*="Logo"]');
If this is/contains an img tag, chances are you have the site's logo. Otherwise, if it's a div or other such container, you'll need to dig into the child elements' CSS properties to see if they have a background image.
From this you can build a set of candidate images, which when combined with a heuristic based on (for example) image dimensions, should hopefully spit out a logo every time.
I hope this helps you on your way!
Going for the logo is usually the wrong way. Seeing it from a user of your website's point of view I would rather want no image than a logo all the time. This is the same as in Google+ or Facebook links. Only show images when it really does make sense.
However finding the corresponding image may not always be trivial if there is no og:image or rel="image_source" provided.
An article usually has a title which is presented as <h1> or <h2> tag. The nearest image may be the right one. However the nearest may also be a logo so this can go wrong.
I would do that very pragmatic. I would fetch the most likely image first and read the given EXIF data, if this is a real image there are informations provided. If this is just a logo, spacer or some other kind of layout graphic it does not have EXIF data and therefore is not relevant. If the first picture is not the right tough, I would fetch the next one and so on.
Another clue may be the HTML5 <article> tag which usually has the corresponding image to the post nested.
Nevertheless there are several web designer not using standards and their webpage may not be parable nicely.
First time overflowing the stack.
I'm making a website with several html pages that are identical except for the fact that they contain different images that are more or less identical in size - and thats how they are named, by the jpg that they feature.
The pictures look great with the website, but I have a 300 pixel header that pushes them downward > forcing you to scroll down to see the full image. This is built into the shared CSS for all these gallery pages.
I have simple text links below the images that are hard coded to point to the next image in the gallery. (I have a list of the 20 images im displaying). When someone clicks the image, it goes to that page and resets the scroll to the top, which makes the header push the image area down.
Can anyone tell me how to prevent the scroll reset behavior of the new link?
Without using something like jQuery, you could link the pages such that you have an anchor tag like <a name="gallery"></a> above the images on each page and when giving the link to the various pages, append a #gallery to the url such as Next Image. This is duplicated on each page however, and will not produce a robust webpage. You'll want to change things in the future and this will cause problems and further work, so I would consider a dynamic alternative.
Note this won't look as seamless as with jQuery and using AJAX to load in the images when needed. Or better yet, as most JS galleries work, load the images into the page invisible at first and then with JS have them show up on the link click. The benefit of this would be that you could generate the links in JS using the provided images. If the images are large enough that they may cause considerable lag on page load, consider making placeholder images of some sort. In any case, take a look at lightbox 2.
Also, I didn't get the feeling you were using any server side scripting to create this gallery. If the js solution doesn't suit you or you find the added benefit of generating part of the website automatically based on the content need at the time, take a look at using something like PHP, Python, Ruby, etc. If it's just a simple website you're after, a great solution might be Wordpress.
You could have one page and just replace the images?
http://www.quirksmode.org/dom/fir.html
Now of course you change the function to work on a "previous/next" button system, assuming you have a photo gallery of some sort.
Please post more details.
You want your link to look something like this:
<a href="http://www.w3schools.com/html_links.htm#tips">
Visit the Useful Tips Section</a>
and you want to give your image an id="tips" in this case.
Check out this fiddle to see an example. The only difference is that your href will have the rest of the url in there like the code posted above.
http://jsfiddle.net/QgzsL/
I get a .pdf complete with images, fancy fonts, styles, gradients and what have you. Basically it's handed off to me with the message, "Make me a web page that looks exactly like this." I've tried a few pdf to html tools and they all look terrible. I figure I've only got 2 options and i hate them both.
convert the pdf to one big image and use an imagemap to add the links.
the screen copy tool that comes with acrobat reader to chop the file up into it's parts (buttons, logos, etc).
She uses Quarks to make this pdf. I've never used it, but I hear it is very popular. Are these really my only two options? Someone tell me I'm wrong, please.
Grab what text you can out of the PDF and clean it up. Pull the PDF into Photoshop and slice out the graphical elements you want to use. Rebuild the page using the images and put your text in HTML format.
Make a slice of the gradients and use them as background images with repeat.
Try to explain to your client why the fancy font is unsuitable for this medium.
Edit:
If it's just going to be a screen shot, you might as well just put the PDF up in the first place. At least people can zoom in.
Do not use one big image map. The more content you can convert from image to text, the better (more efficient) your HTML page will be.
Chop up the PDF into parts. Make the logos, etc. images, make text plain text, and make buttons button controls.
Exactly like what Diodeus said except-
-
Find the fancy font and check to see how much it will cost to license or buy it. Build two bills and send them to your client, one with the fancy font and one with a standard font. Then see if she wants the fancy font. It will show that you take your job serious and may get you less strict project conditions.
No they are not:
Adobes Online pdf to html service
or
pdftohtml