Welcome to Inkbunny...
Allowed ratings
To view member-only content, create an account. ( Hide )
humbird0

I have a new website!



www.humbird0.com/content/show.htm
My old free-hosted website kept going down due to "CPU Overload", so I finally cracked and bought hosting. I also completely re-designed my website from scratch. This sucker will even look great on phones and tablets!


PS:  You will see a clean, decoy version of the site if you go to www.humbird0.com
Viewed: 734 times
Added: 5 years, 7 months ago
 
Fleetpaw
5 years, 7 months ago
nice
Greystorm
5 years, 7 months ago
glad to hear it, finally you have your new website fully operating, good luck humbird0
Terl
5 years, 7 months ago
I really like the decoy idea, just wondering if its possible to easily blend images, so you have the default clean version on the decoy page, then any variations are stored as an image overlay with alpha blends etc.

Then again, would be nice if websites offered that as security for starters, especially if the blend file had the option to be accessed with an extended URL that included a password function for correct decryption or such.

Good luck with yor efforts. 8}
humbird0
5 years, 7 months ago
No, the website doesn't work like that.
All of the information about what projects exist and where all their resources are, is stored in the HTML file itself.
The Javascript reads these tags, stores them, then rewrites the HTML to display things with a nice fancy interface.
All the "pages" you see and browse are virtual, and generated by the Javascript.
The advantage of storing all the data in the HTML itself is that the website is potentially usable on devices that don't support Javascript or on non-standard web browsers that get "javascript errors" when they attempt to run it (Internet Explorer)
When the Javascript can't run, you just see the original HTML, which is a huge thumbnail gallery of every project, in the order that each one was made. It looks nice enough, though I decided not to display thumbnails in this view because you'd basically end up requesting every thumbnail for every project all at once as soon as you arrive at the website (even when Javascript is running)

There are 2 HTML files. One for each version of the website.
They're nearly identical, except for the project information stored within them.
So the same Javascript will display different projects depending on which HTML file you load.
Terl
5 years, 7 months ago
Nice setup, though theres something Ive seen thats been really annoying, is that even though many years ago I did someVery simple coding in HTML, I used a combination of Fixed and Relative values, that is, images had fixed sized placeholders so that layout could occur with the image having to be decoded first, then relative values were used, such as centre, so that the page etc would fit on the screen. Trouble is, the minimum resolution often considered for a page, is larger than my current display, and for some reason teh scroll bars get messed up as well.

I still think font should auto scale to a given fuunction of screen size, resolution, aspect, so that it does its best to display the data, then you wouldnt have to constantly recode for each new display, but that display would have a standards conversion file as default etc.?
humbird0
5 years, 7 months ago
CSS style sheets can use many different units for specifying the size of things.
If you size something using "em" units, then its size is relative to the surrounding font-size.
If you size something using "pt" units, then its size is relative to the screen's DPI.
Since I wanted to site to be readable on mobile browsers, I mostly used "pt" to set the size of most things.
Furthermore, the width of the page should automatically shrink down to the width of the screen / browser-window that's viewing it.
Pictures can also scale this way, but in order to maintain their aspect-ratio, CSS only allows scaling them down relative to their width. (as far as I know)
So portrait images will display pretty tall sometimes, no matter what screen-resolution you have.

There are 2 possible solutions:
- Use Photoshop to add blank space to the sides of the overly-tall images so that they won't look too huge when scaled by width.
- Use javascript to proportionally scale the images and limit the overall maximum size.

The 1st solution would probably be the most practical, and have the best performance.
humbird0
5 years, 7 months ago
Okay, it turns out that you can scale images to height instead of width in CSS.
So I've just modified the website to display all the full-size images relative to a fixed height instead of full-width.
This seems to look better in most cases.
Take a look and see what you think.
humbird0
5 years, 7 months ago
The fonts are scaled based on "pt" units which are based on screen DPI (pixels per inch), so they should be readable on any size screen.
I tested it on my small tablet in portrait mode and the smallest fonts were still readable.
PS: Contrary to what I expected, my tablet's portrait mode didn't behave like a narrow web-browser window. Instead it just scaled the entire site down. But the text was still big enough to read, so no problems there.
Shokuji
5 years, 7 months ago
Looks good. ^_^ Thanks for sharing.
Terl
5 years, 7 months ago
Checking on a 1024*768 LCD desktop, the image arrays lok good. The only thing I might be able to point out, is that on my machine, the background being grey, and the text being black makes teh constrast very low, while the, I believe its a white drop shadow to bottom right,? Creates a very high contrast, which over a very small area, due to fine lines, causes effctively Ringing in the visual system, that is, virtual or an optical effect that causes apparent variations in the text and background, obscuring the details.

You can do experiments on this by drawing blocks of contrasting colours and lightnesses ajoining each other, and you will see inverse colour, light effects at the boundaries.

Think of it as a form of antialiasing, but done by the eye, and possibly the deisplay in some cases.
humbird0
5 years, 7 months ago
I think the "anti-aliasing" effect you mention has a lot to do with the monitor.
On my LCD display, I can effortlessly see every pixel of your avatar.
Terl
5 years, 7 months ago
Hmm, strange. Im very short sighted, so without my spectacles I can focus right down on the LCD screen, and very clearly see the individual seperated cells, and Im not sure if I can see the verticle lines of the seperate Red, Green, Blue sub pixels. Looking at the white left, black right, theres a blue edging, and on the black left, white right, there is a red edging, Due to contrast?

Maybe I need to run some Moire pattern tests.

Sorry for any trouble.
New Comment:
Move reply box to top
Log in or create an account to comment.