?

Log in

Bob's best photographs - unixish [entries|archive|friends|userinfo]
Unixish - Solving problems the UNIX way

[ userinfo | livejournal userinfo ]
[ archive | journal archive ]

Bob's best photographs [Sep. 20th, 2006|11:01 am]
Unixish - Solving problems the UNIX way
unixish
[yaarg]
Well tuomov correctly identified Problem 2 as the famous Bin Packing problem and although it can be solved to a certain degree mdlbear was correct to point out that my wording was flawed in the use of optimal. Apologies. Nobody stepped up to write a solution in sh but pauldoo did provide a solution written in Ruby.

Anyway back to our scheduled programme..

Problem 3:

With 'HTML 4.0 for Dummies' at his side Bob spent his weeekend writing up a simple series of webpages to display his best photographs online. Each page simply linked each image below each other like so:
<img src="./images/best1.png"><br/>
<img src="./images/best2.png"><br/>
...


It wasn't the nicest looking page in the world but Bob was happy with what he'd achieved. It wasn't until he was skimming the 'top tips' section at the back of the book Bob discovered that he'd missed width and height attributes of the img tags however. Although the images would still display the page wouldn't render as nicely as the different photos took different times to load making the 'page jump' and after reading that tip Bob kept noticing! Bob was annoyed but he didn't have time to open up each photograph in the Gimp and get its corresponding height and width to fill out the img tags manually. Annoyed Bob threw his keyboard at his monitor and stumbled off to bed.

Can you help Bob before he wakes up?-)
LinkReply

Comments:
[User Picture]From: scimon
2006-09-20 10:47 am (UTC)
Well I'm a Perl coder for my sins so I'd go with.

perl -i.bak -lpe 'while(m!img\s+src="([^"]+)"!){$add = `identify -format "height=\"%h\" width=\"%w\" " $1`;s!$1"!$1" $add!;' files


Which does assume you've got ImageMagick installed. Should be fun from the directory file is in. This is assuming all the URL's for the image files are as displayed.

But I guess that's just what Perl does to your head. The While is there in case any lines have more than one image on them. You could just change it for an if if you are cure there is only one image on a line.

Of course you could do the whole thing in a replace but that's a little harder to understand....
(Reply) (Thread)
From: yaarg
2006-09-20 01:51 pm (UTC)
What you lose in clarity you gain in l33tness. ;) Nice.
(Reply) (Parent) (Thread)
[User Picture]From: scimon
2006-09-20 01:54 pm (UTC)
The scary thing? To me that's totally clear.

And I'm not sure it would work....

perl -i.bak -lpe 'while(m!img\s+src="([^"]+)"!){$f = $1;$add = `identify -format "height=\"%h\" width=\"%w\" " $f`;s!$f"!$f" $add!;' files


Would do the trick though.
(Reply) (Parent) (Thread)
(Deleted comment)
From: yaarg
2006-09-20 01:50 pm (UTC)
I didn't know about the format flag. Neato.
(Reply) (Parent) (Thread)
[User Picture]From: lightning_rose
2006-09-20 01:35 pm (UTC)

I don't quite understand Bob's problem. What is "page jump"?

Using height and width attributes in the img tags will do nothing to speed the loading time. It's the size of the image file that determines how long it takes to transfer that image, and images of the same dimensions can have significantly different file sizes.

Bob really needs to learn Javascript. One of the three clever things I've learned to do in js is to calculate the size of an image and manipulate the img height/width tags to fit the image to the browser frame. ie:

http://www.lightning-rose.com/colorado/frontrange.htm

(Reply) (Thread)
From: yaarg
2006-09-20 01:37 pm (UTC)
Erm having height and width attributes will make the browser render a space for the image if it's taking time to load. It's a well documented problem - please google. Anyway that's not really the point...

Javascript is a TERRIBLE way to do it - there's simply no need and what if javascript is disabled?! And it's completely off-topic in this community anyway.
(Reply) (Parent) (Thread)
[User Picture]From: scimon
2006-09-20 01:53 pm (UTC)
Hear hear!
(Reply) (Parent) (Thread)
[User Picture]From: lightning_rose
2006-09-20 02:02 pm (UTC)

http://www.google.com/search?hl=en&lr=&safe=off&q=%22page+jump%22&btnG=Search

My, that was certainly enlightening.



And if you're going to ask a web design related question, then IMNSHO, javascript is certainly on topic.

(Reply) (Parent) (Thread)
From: yaarg
2006-09-20 02:10 pm (UTC)
The problem is really just a matter of inserting some text into some other text using some UNIX tools. That's basically the question I asked. That's how the previous two commentors understood it and successfully presented solutions. I didn't ask what's the best way to do this? Is this good web design? Hence the question is NOT web design!
(Reply) (Parent) (Thread)
[User Picture]From: lightning_rose
2006-09-20 02:21 pm (UTC)

Except for the undefined term "page jump", I understood what you were asking for: a script based solution to turn a horrible web page into a merely annoying web page.

If Bob wants a decent looking web page, he needs to learn to use the tools available to him and no amount of scripting in his working directory is going to help him.

(Reply) (Parent) (Thread)
From: (Anonymous)
2006-09-20 02:38 pm (UTC)
Again Bob's web design skills are not the topic of this problem. *sighs*

(Reply) (Parent) (Thread)
[User Picture]From: lightning_rose
2006-09-20 03:12 pm (UTC)

But they *are*.

The *fundamental* question that Bob is asking is, "How do I make a decent looking web page?".

The superficial question is, "How does one take a list of file names and wrap some arbitrary text around them and write that text back to a file?"

Being able to identify the fundamental question or problem at hand is one of the things that seperates a skillful engineer from a mediocre one.

As with the previous problem posted in this community, the real solution has little to do with the question.

(Reply) (Parent) (Thread)
From: yaarg
2006-09-20 03:31 pm (UTC)
Quit trolling already. Did you just want a opportunity to spam your dated website?

Bob was fine with how his web page turned out overall - it suited his needs. It's was just the jump that annoyed him. The jump which has been solved now in the correct W3C recommended way. What's so hard about that?

The problem was specifically phrased in such a way to make it evident that the problem was adding the attributes NOTHING to do with the way Bob was solving his particular problem. It's really not hard.

(Reply) (Parent) (Thread)
[User Picture]From: lightning_rose
2006-09-20 05:11 pm (UTC)

Like Bob, my significantly less dated web site suits my needs.

The jump which has been solved now in the correct W3C recommended way.

I was told: the question is NOT web design!


Perhaps the fault lies with the wording of the problem.

(Reply) (Parent) (Thread)
From: yaarg
2006-09-20 05:17 pm (UTC)

Troll. Troll.

The problem still isn't about web design. But as it happens (and since) you mentioned it that's the right way to solve his problem any how. So huh? Come again?

The wording of the problem is fine, the fact two people submitted solutions quickly and didn't need to ask any further questions proves that.
(Reply) (Parent) (Thread)
From: yaarg
2006-09-20 05:19 pm (UTC)

Re: Troll. Troll.

In future I think I'll have to delete off-topic or inappropriate posts. I don't want trolls among people's useful contributions - the whole purpose of this community.
(Reply) (Parent) (Thread)
[User Picture]From: lightning_rose
2006-09-20 05:34 pm (UTC)

Re: Troll. Troll.


I did not mean to come off as a troll, but out of 3 problems posed in this community so far, only one was directly related to 'nix scripting.

(Reply) (Parent) (Thread)
From: yaarg
2006-09-20 07:45 pm (UTC)

Re: Troll. Troll.

Okay fine. Feel free to leave the community.
(Reply) (Parent) (Thread)
[User Picture]From: lightning_rose
2006-09-20 05:30 pm (UTC)

Re: Troll. Troll.


The first two posters also seemed to fail to understand the fundamental question being asked. It's a common problem, I've been doing this a long time and I've seen many projects, and even companies, fail for the same reason.

(Reply) (Parent) (Thread)
[User Picture]From: scimon
2006-09-20 06:02 pm (UTC)

Re: Troll. Troll.

Ummm. Pardon. The question being asked as I saw it was how to add the height and width attributes to a already existing web page, not a question about how the images should have been displayed.

If it had been I'd still not have used javascript alone as it really isn't required in this situation. I note that the links to open the thumbnails on the page you quoted won't acutally work if you have javascript turned off which I personally would never recommend anyone doing.

But hey, that's just me.
(Reply) (Parent) (Thread)
[User Picture]From: lightning_rose
2006-09-20 06:29 pm (UTC)

Re: Troll. Troll.


I presume you discourage enabling js for security reasons. There are far more dangerous things on the web than js hacks. And most of those are found on real or fake pr0n pages which I don't visit.

Even on MS-Win using IE I've only had one successful attack on my system and that was on a woefully out of date system, and even at that I noticed the attack within seconds.

(Reply) (Parent) (Thread)
[User Picture]From: scimon
2006-09-20 07:22 pm (UTC)

Re: Troll. Troll.

I love Javascript. By trade I'm a Web Developer and I've written some really neat bits of Javascript. I do it as a hobby.

But a lot of people don't use it for whatever reason, like their corporate IT department has locked it down or something, and if you don't provide for such cases then you are restricting a group or people for no good reason.

Whenever possible I provide a non javascript version and if that's not possible I ensure that the non javascript users still get basic access to site content. It's just good business sense.
(Reply) (Parent) (Thread)
From: yaarg
2006-09-20 07:48 pm (UTC)

Re: Troll. Troll.

Why are you *still* arguing about how the problem is solved? It's just not the point *here*. Go discuss it on a web design community!
(Reply) (Parent) (Thread)
[User Picture]From: scimon
2006-09-20 03:00 pm (UTC)
Page jump is what happens when the web browser doesn't know how much space to put aside for an image and when it finds out it page has to bee redrawn. With a slow connection it can be really, really annoying.

Don't get me wrong javascript it great for a number of things and will use it when required. But putting height and width attributes in img elements is just good practice.
(Reply) (Parent) (Thread)
[User Picture]From: lightning_rose
2006-09-20 05:25 pm (UTC)

I thought that was what might be meant as "page jump", but since it was not defined and google was of no help, I wanted clarification.

But I'd be willing to argue that with a slow connection (ie 56Kb or less dialup) redrawing a page with multiple large images is significantly *less* of a bottleneck than downloading the images in the first place.

If Bob doesn't want to learn js, then he should learn to use thumbnails and links. Depending on the size of the images, he could also cut the download time by a significant percentage by using jpg's instead of png's.

(Reply) (Parent) (Thread)