Posts: 9147
Threads: 83
Joined: May 22, 2013
Reputation:
46
RE: Help me with my new website!
December 7, 2017 at 5:48 pm
(This post was last modified: December 7, 2017 at 5:50 pm by bennyboy.)
You have the wrong idea about .png. This is a compressed format, and will cause very little overhead, especially for something as simple as a 2-color gradient image; maybe a super-complex Jackson Pollack painting or something would cause a slightly larger file size. Not only that, once your system has loaded the image in the .css once, it will stay buffered in you temp files pretty much forever. If you or your users can't load a super-simple image, than a website just isn't going to work out, anyway. A .png the size we're talking about will be maybe 100kB at most, and I'm pretty sure by using -width in css, you can use the same image for both the left and right corners.
I also use .svg: I use it for my company logo, which is circular and has an elaborate font. But please believe me when I tell you: unless you are going to be doing animated zooms in and out, you really don't want to use .svg. But don't believe me, try it yourself: take a screen clip of the corner of your page, save it as .jpeg or .png, save it at medium compression, and you will see exactly how many kB it does (read: doesn't) take.
Posts: 18510
Threads: 129
Joined: January 19, 2014
Reputation:
91
RE: Help me with my new website!
December 7, 2017 at 6:28 pm
That is... very old-school
The fool hath said in his heart, There is a God. They are corrupt, they have done abominable works, there is none that doeth good.
Psalm 14, KJV revised edition
Posts: 15351
Threads: 118
Joined: January 13, 2014
Reputation:
117
RE: Help me with my new website!
December 7, 2017 at 6:40 pm
(December 7, 2017 at 4:51 pm)FlatAssembler Wrote: Quote:As far as the OP, the PacMan game is unplayable, but I mean, good on you.
What exactly does it do on your smartphone? I've tested it on Samsung Galaxy SIII Mini and it works there.
The buttons are not responsive enough and PacMan doesn't move where you want him to go, there seems to be a lag between button press and actual movement.
"There remain four irreducible objections to religious faith: that it wholly misrepresents the origins of man and the cosmos, that because of this original error it manages to combine the maximum servility with the maximum of solipsism, that it is both the result and the cause of dangerous sexual repression, and that it is ultimately grounded on wish-thinking." ~Christopher Hitchens, god is not Great
PM me your email address to join the Slack chat! I'll give you a taco(or five) if you join! --->There's an app and everything!<---
Posts: 2020
Threads: 133
Joined: July 26, 2017
Reputation:
5
RE: Help me with my new website!
December 8, 2017 at 3:29 am
I've never actually experimented with image formats. I remember only we've learnt in school that PNG uses a lossless compression algorithm which doesn't do anything unless you have large areas of the same color. But nearly everything we've learnt in school about informatics (as well as linguistics or anything else I've studied further on the Internet) is either false or greatly oversimplified, so it may as well be that's also.
Does the Pacman follow your finger when you tap inside the maze on your smartphone?
Posts: 9147
Threads: 83
Joined: May 22, 2013
Reputation:
46
RE: Help me with my new website!
December 8, 2017 at 9:21 am
(This post was last modified: December 8, 2017 at 10:51 am by bennyboy.)
(December 8, 2017 at 3:29 am)FlatAssembler Wrote: I've never actually experimented with image formats. I remember only we've learnt in school that PNG uses a lossless compression algorithm which doesn't do anything unless you have large areas of the same color. But nearly everything we've learnt in school about informatics (as well as linguistics or anything else I've studied further on the Internet) is either false or greatly oversimplified, so it may as well be that's also.
As I said, you can check it yourself in about 10 seconds. Just take a clip of the browser when it's displaying your corner, save it as .png or .jpg, and see how many kB it takes. For something as simple as yours, I'm guessing like 20kB, but I'm not sure exactly how .png handles bi-axial gradients.
(December 8, 2017 at 9:21 am)bennyboy Wrote: (December 8, 2017 at 3:29 am)FlatAssembler Wrote: I've never actually experimented with image formats. I remember only we've learnt in school that PNG uses a lossless compression algorithm which doesn't do anything unless you have large areas of the same color. But nearly everything we've learnt in school about informatics (as well as linguistics or anything else I've studied further on the Internet) is either false or greatly oversimplified, so it may as well be that's also.
As I said, you can check it yourself in about 10 seconds. Just take a clip of the browser when it's displaying your corner, save it as .png or .jpg, and see how many kB it takes. For something as simple as yours, I'm guessing like 20kB, but I'm not sure exactly how .png handles bi-axial gradients.
Dude, I'm great. 1 corner renders down to almost exactly 20kB. i.e. it's nothing, even at your connection speed.
Set it as the background in a div using css, and you can easily update or change it later. And to answer your previous question-- yes, the current .svg graphic now seems to be scaling properly.
BTW the point of vector graphics is to have a super-smooth edge, but tbh in Chrome your border does not render out nearly as well as a photoshopped arc would if you smooth the edge. 100% it will look better if you make it in photoshop.
Posts: 2692
Threads: 11
Joined: May 13, 2013
Reputation:
17
RE: Help me with my new website!
December 8, 2017 at 11:24 am
Template page is easier on the eyes, but still pretty gaudy.
"The first principle is that you must not fool yourself — and you are the easiest person to fool." - Richard P. Feynman
Posts: 9147
Threads: 83
Joined: May 22, 2013
Reputation:
46
RE: Help me with my new website!
December 8, 2017 at 11:42 am
(December 8, 2017 at 11:24 am)Sal Wrote: Template page is easier on the eyes, but still pretty gaudy.
Maybe, but playing around with background designs, .svg, .png and stuff will give him experience that he can actually benefit from.
Posts: 2020
Threads: 133
Joined: July 26, 2017
Reputation:
5
RE: Help me with my new website!
December 9, 2017 at 10:55 am
(This post was last modified: December 9, 2017 at 12:16 pm by FlatAssembler.
Edit Reason: Grammar
)
I've chosen some nice background image for the homepage.
http://flatassembler.000webhostapp.com
It takes a few seconds to load, but I think it's worth it. While it loads, the browser allows you to scroll and to click the links, but it doesn't start the animations.
Could you please make some transparent PNGs for the corners (like ones I've done in SVG)? I've no idea how to do it.
Posts: 2020
Threads: 133
Joined: July 26, 2017
Reputation:
5
RE: Help me with my new website!
December 10, 2017 at 4:40 am
(This post was last modified: December 10, 2017 at 4:42 am by FlatAssembler.)
The bottom left corner is rendered quite poorly in different browsers (it sometimes appears to be transparent in the middle, which is not what I want), and there appears to be no easy fix for that in SVG. Perhaps using a transparent PNG would help. Do you know how to do it maybe?
Posts: 9147
Threads: 83
Joined: May 22, 2013
Reputation:
46
RE: Help me with my new website!
December 10, 2017 at 6:11 am
(This post was last modified: December 10, 2017 at 6:13 am by bennyboy.)
(December 10, 2017 at 4:40 am)FlatAssembler Wrote: The bottom left corner is rendered quite poorly in different browsers (it sometimes appears to be transparent in the middle, which is not what I want), and there appears to be no easy fix for that in SVG. Perhaps using a transparent PNG would help. Do you know how to do it maybe?
For sure, I can explain it. Question first, though-- do you have Photoshop? If so, you can very easily just make a circle, blur the edges very slightly to look smooth, and then cut out 1/4 of it.
|
