This is a read-only snapshot of the ComputerCraft forums, taken in April 2020.
Alice's profile picture

[WEBSITE] Death's Website!

Started by Alice, 04 February 2014 - 07:55 PM
Alice #1
Posted 04 February 2014 - 08:55 PM
Remade website, here's a link.
Adding more information about projects ASAP, can't push changes at current location.
OPI finally got around to hosting my website. If anyone wants to check it out, visit it at http://108.246.54.244/index2.html.
If you have any suggestions, please, tell me them. I'm fully open for suggestions
Languages I plan on building the site in are Lua and jQuery. I'll try to implement minimal PHP.
Credit to Liam Stanley for a lot of the design.
Edited on 12 March 2014 - 06:04 PM
theoriginalbit #2
Posted 04 February 2014 - 08:57 PM
buttons/links definitely need some kind of rollover styling

EDIT: also the "welcome" div is sitting in a strange place that sits over text
EDIT 2: also be aware that the way you've positioned your footer — the text "death" — will be problematic when you get more content on the page, I suggest having a read of this tutorial and making use of its techniques as then the footer will either be at the bottom of the screen or the bottom of the content, whichever is greater.
Edited on 04 February 2014 - 08:04 PM
Alice #3
Posted 04 February 2014 - 10:23 PM
buttons/links definitely need some kind of rollover styling

EDIT: also the "welcome" div is sitting in a strange place that sits over text
EDIT 2: also be aware that the way you've positioned your footer — the text "death" — will be problematic when you get more content on the page, I suggest having a read of this tutorial and making use of its techniques as then the footer will either be at the bottom of the screen or the bottom of the content, whichever is greater.

The welcome div, I've never seen it be a problem, but I'll minimize the size of it.
What do you mean by rollover styling?

Sorry if it does seem a bit noobish of a website, I'm not that good at designing things.
Edited on 04 February 2014 - 09:23 PM
theoriginalbit #4
Posted 04 February 2014 - 10:31 PM
The welcome div, I've never seen it be a problem, but I'll minimize the size of it.
Well now it's sitting in a completely different spot than before! http://puu.sh/6KrVf.png

What do you mean by rollover styling?
As in when hovering the mouse over them they look different. Take a look at the links in the navigation on my site to see what I mean. btw if you do want to see how I've done something on my site it'll be easier if you look through the repo than trying to explore the source in the browser.
Edited on 04 February 2014 - 09:42 PM
awsmazinggenius #5
Posted 04 February 2014 - 10:49 PM
I wonder why BIT chose the iOS 7 (or one that looks like it) don't, or maybe that's just my iPad Air. Anyways, nice site BIT. Looks different then I saw it yesterday, or that could be my Ad Block.
theoriginalbit #6
Posted 04 February 2014 - 10:53 PM
I wonder why BIT chose the iOS 7
what? o.O

Anyways, nice site BIT. Looks different then I saw it yesterday, or that could be my Ad Block.
Thanks. you probably saw the main non-computercraft site yesterday.
awsmazinggenius #7
Posted 04 February 2014 - 11:09 PM
Oh, yes, I did. The font looks like iOS 7 to me, but that might be my iPad Air.

Edit: Screenshot from my iPad: http://imgur.com/v5qonQ4
Edited on 04 February 2014 - 10:13 PM
theoriginalbit #8
Posted 04 February 2014 - 11:11 PM
Oh, yes, I did. The font looks like iOS 7 to me, but that might be my iPad Air.
Oh I see, yeah well its an Apple font
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
Alice #9
Posted 04 February 2014 - 11:49 PM
The welcome div, I've never seen it be a problem, but I'll minimize the size of it.
Well now it's sitting in a completely different spot than before! http://puu.sh/6KrVf.png

What do you mean by rollover styling?
As in when hovering the mouse over them they look different. Take a look at the links in the navigation on my site to see what I mean. btw if you do want to see how I've done something on my site it'll be easier if you look through the repo than trying to explore the source in the browser.

I don't understand why it twists like that, I edited it to fit closer to the top left corner. And yes, it's different because I was testing some things.



I'll get working on rollover effects sometime soon

——

New reply – IP.Board would probably combine the two
Made a nice little button animation on hover, changing a couple colors and the borders.
Still not sure why it did the thing in Safari or whatever browser BIT's using – if someone has a fix please PM me or reply!
Edited on 04 February 2014 - 11:51 PM
theoriginalbit #10
Posted 04 February 2014 - 11:55 PM
I don't understand why it twists like that, I edited it to fit closer to the top left corner. And yes, it's different because I was testing some things.
-image snip-
I'll get working on rollover effects sometime soon
How are you doing the rotation? CSS? Did you also add the browser specific transformations?

EDIT: Also you're getting a 404 on the file result-light.css
Edited on 04 February 2014 - 10:58 PM
Alice #11
Posted 05 February 2014 - 12:51 AM
I know I've got a 404 - I'll fix that later.
Yes it's CSS - I'll need to do some modifications for that.
I'll fix the CSS and I'm currently adding in a way to have webchat implemented into the page. The way I'm working on isn't working so I'll do it another way.
Edited on 05 February 2014 - 12:01 AM
theoriginalbit #12
Posted 05 February 2014 - 01:27 AM
Yes it's CSS - I'll need to do some modifications for that.
Browser specific rotations

transform: rotate(45deg);
-o-transform: rotate(45deg); /* Opera */
-ms-transform: rotate(45deg); /* IE 9 */
-moz-transform: rotate(45deg); /* Firefox */
-khtml-transform: rotate(45edg); /* Can't remember */
-webkit-transform: rotate(45deg); /* Safari and Chrome */
ingie #13
Posted 05 February 2014 - 01:34 AM
i really like it. nice and clean.

i like the buttons as they are now, with the corners curling into the radius nicely.

but yeah, you're not using browser-specific radii [edit: me derpa] transform css… but personally, i'd keep it that way, i'd rather just have fallback to something that looks ok [which it does], than use browser specific css myself, but that's just my personal feelings on it… so long as the fallback still maintains enough contrast to be accessible.

don't like the Welcome side strap though… it doesn't seem necessary. i'd be more inclined to use a font based illuminated text image as the corner strap, like a single corner border of a frame - using the font from your signature at the bottom but more embellished … but that'd need a graphic illustrator to get looking right…
Edited on 05 February 2014 - 12:41 AM
theoriginalbit #14
Posted 05 February 2014 - 01:39 AM
i'd rather just have fallback to something that looks ok [which it does], than use browser specific css myself, but that's just my personal feelings on it…
browser specific CSS looks the same as the standard, so it may as well just be included.
Alice #15
Posted 05 February 2014 - 01:40 AM
I think I added them all except -khtml-, which I shall add if anyone encounters a problem.

EDIT- I'm going to remove the webcome side strap, just leave that area blank :P/>
EDIT- removed. Please test for bugs in the IRC area, or if you want any modifications to it. No I'm not going to stop using webchat.
EDIT- Do you guys like the button rollover animation?
Edited on 05 February 2014 - 12:49 AM
ingie #16
Posted 05 February 2014 - 02:00 AM
i'd rather just have fallback to something that looks ok [which it does], than use browser specific css myself, but that's just my personal feelings on it…
browser specific CSS looks the same as the standard, so it may as well just be included.

as i said - personal opinion - in that it shouldn't be included as it makes for more possible errors, and the whole concept is basically evil in my mind - all major browsers support enough ACID compliant non-specific tags to make a perfectly nice website without any specifics… anything which falls outside that should be reconsidered and designed without it, rather than made specific or excluding… again, that's just how i feel about it [ and many designers and devs i've worked with in my job ] - i know others think otherwise and i'm happy for them :)/>

EDIT- Do you guys like the button rollover animation?

yup, i said that… i think - assuming what i described with the radii changing is what you mean :)/>
Alice #17
Posted 05 February 2014 - 02:02 AM
Totally didn't see that - sorry :D/>

Anything else you think I should add?
ingie #18
Posted 05 February 2014 - 02:08 AM
Totally didn't see that - sorry :D/>

Anything else you think I should add?

s'okay :)/>

um… not really, i think it suits what i imagine you want, judging from your avatar and tag :)/>
of course, once you get content in, this sorta thing can change how the page really looks
- you should perhaps put some lorem ipsum in there to see how the pages flow when more full of content.

or use a suitable alternative :)/>


edit: one thing i did think was just that you should move the CSS into a separate file, and the javascript perhaps - it just makes it easier to manage later or apply an alternate theme quickly…
Edited on 05 February 2014 - 01:14 AM
Alice #19
Posted 05 February 2014 - 02:25 AM
I'll probably do some kind of placeholder somehow. I can't really use bacon ipsum as it's an ordered list-type thing
ingie #20
Posted 05 February 2014 - 02:39 AM
I can't really use bacon ipsum as it's an ordered list-type thing

there's 21 others to choose from on that link :)/>

but i see what you mean if your intended content is to be OLs. There's a few of those on that link that generate with custom tags, but don't think there's any LI options from what i saw… but you could easily do a fast search-replace on the generated ones to replace the DIVs or whatever with your OL

but no biggie… 'twas just a thought to aid the layout judgement. you get what i mean anyway; the method is immaterial :)/>
Alice #21
Posted 05 February 2014 - 03:05 AM
Just made a small bacon ipsum dolor stuff tacos thing to demonstrate the approx. size of the UL (Switched it.)
ingie #22
Posted 05 February 2014 - 03:42 AM
another thought…

the Links: and the Downloads: and Information: bits are superfluous really, as that is evident - and saying it twice detracts from the uncluttered style… and is tautological most of the time :)/>

I've seen some websites where it pretty much reads: "Welcome to the links page, on this page of links you'll find links to other pages"



:D/>

on the homepage, it should [and is on your design] obvious what to do next without saying "Links" - similarly on the others…

it's also bad practice in accessibility testing to have "click this" [or click here, or there, or anywhere] as it makes no sense for people using screen-readers etc… better to say "follow this link" or some other wording with the action tied semantically… but since that's inside the old-skool table based layout of espernet's own IFrame, there's not much you can do there… i say it here just to relieve the pain i feel in seeing it there :)/>
theoriginalbit #23
Posted 05 February 2014 - 03:51 AM
I've seen some websites where it pretty much reads: "Welcome to the links page, on this page of links you'll find links to other pages"

-mem snip-
bahaha! that's awesome! :P/>

boy am I glad that I've had
1. a good education in usability
2. enough common sense
to know that stating what you wrote above is just stupid and superfluous.
Edited on 05 February 2014 - 02:53 AM
ingie #24
Posted 05 February 2014 - 03:54 AM
2. enough common sense
to know that stating what you wrote above is just stupid and superfluous.

huh?

as in: are you referring to me as stupid? i wouldn't expect so, but if so, i'd like to know why…
i'm hoping i'm just not getting the context of "what you wrote" correct :)/>

edit2: methinks i'm tired - i'm now guessing you meant the bit i cited as being stupid myself. i'll go to sleep now.
Edited on 05 February 2014 - 03:04 AM
theoriginalbit #25
Posted 05 February 2014 - 04:27 AM
-snip-
yeah I wasn't calling you stupid.
oeed #26
Posted 05 February 2014 - 05:02 AM
Hmmm, where on earth have I see that font before :P/>
Totally didn't see that - sorry :D/>

Anything else you think I should add?
To be honest, I'm not keen on the outline around the buttons. It looks a bit 90's 'Windows 95' like. Also, add a bit of margin between them so they're not all clumped together.

I've seen some websites where it pretty much reads: "Welcome to the links page, on this page of links you'll find links to other pages"

-mem snip-
bahaha! that's awesome! :P/>

boy am I glad that I've had
1. a good education in usability
2. enough common sense
to know that stating what you wrote above is just stupid and superfluous.
Yep.
Simplicity/Ease of use > Pointless amounts of content.

Having your site covered in crap, e.g. this website (actually, it's not as bad as it used to be), makes the viewer confused leading them leave the website (or in the case of JB-HiFi's website, burn down every single store they have). Having a few simple buttons that are obvious as to where they go on a landing page makes your site easy to navigate, such as this site (not a fan of the 5 second back and forward video though). This approach works particuarly well for performers or people who mainly use social media.

As in when hovering the mouse over them they look different. Take a look at the links in the navigation on my site to see what I mean. btw if you do want to see how I've done something on my site it'll be easier if you look through the repo than trying to explore the source in the browser.

You might want to considering making the font size a bit larger/change to 'Light' instead of 'Ultra Light', the navbar text doesn't look great for me (a non-Retina MacBook Pro).

Readability is paramount for navigation bars.
theoriginalbit #27
Posted 05 February 2014 - 05:10 AM
You might want to considering making the font size a bit larger/change to 'Light' instead of 'Ultra Light', the navbar text doesn't look great for me (a non-Retina MacBook Pro).

Readability is paramount for navigation bars.
hmm doesn't quite look like that on mine (also non-Retina) I'll have a play with the font weight. Sadly there's no middle ground between that, and this.

EDIT: okay so I played with my CSS a little more and it seems that there was 2 in-between those linked, I just had another rule overriding it. Got it now.
Edited on 05 February 2014 - 04:24 AM
Alice #28
Posted 05 February 2014 - 09:57 AM
When I get back to the computer today I'll make the following changes:
  • Bolder/Larger text on buttons
  • Better spacing between the buttons
  • Tinker button CSS
  • Remove/replace useless crap
Lyqyd #29
Posted 05 February 2014 - 11:18 AM
This doesn't seem to be ComputerCraft-related. General isn't just a place for free advertising.
Alice #30
Posted 05 February 2014 - 12:28 PM
Most of the things I do will be ComputerCraft-related or based off ComputerCraft programs, such as the wolf3D engine I'm editing in love2D. I'll have to specify that in my 'Information' area for those who don't know me that well :D/>
oeed #31
Posted 05 February 2014 - 03:38 PM
You might want to considering making the font size a bit larger/change to 'Light' instead of 'Ultra Light', the navbar text doesn't look great for me (a non-Retina MacBook Pro).

Readability is paramount for navigation bars.
hmm doesn't quite look like that on mine (also non-Retina) I'll have a play with the font weight. Sadly there's no middle ground between that, and this.

EDIT: okay so I played with my CSS a little more and it seems that there was 2 in-between those linked, I just had another rule overriding it. Got it now.
On my Mac at least there's Helvetica Neue Thin, which is a middle ground between Light and UltraLight, I can never seem to access it with CSS. You could try uploading it and using an @font-face

This doesn't seem to be ComputerCraft-related. General isn't just a place for free advertising.

"Discuss Anything and Everything Relating to Anything and Everything"
Edited on 05 February 2014 - 02:38 PM
awsmazinggenius #32
Posted 05 February 2014 - 04:12 PM
About Lyqyd's comment: One thing that makes me wonder is that title oeed mentioned, maybe it needs to be changed.
Lyqyd #33
Posted 05 February 2014 - 04:51 PM
Discuss, certainly. Advertise, no. If there hadn't been useful feedback given already, it would have gotten locked like previous topics advertising unrelated websites have been. There are a couple examples on the second page of topics.
theoriginalbit #34
Posted 05 February 2014 - 05:59 PM
On my Mac at least there's Helvetica Neue Thin, which is a middle ground between Light and UltraLight, I can never seem to access it with CSS. You could try uploading it and using an @font-face
I feel like I should point out that I'm using Helvetica Neue, Helvetica, Arial, sans-serif. I never specifically specify Light UltraLight or Thin. I'm using font-weight to adjust the thickness, its currently sitting on 200. I don't like uploading fonts, 'cause if they take too long to download the webpage can look bad in the meantime; I prefer having just a system font and then similar looking fallbacks.
Edited on 05 February 2014 - 05:00 PM
awsmazinggenius #35
Posted 05 February 2014 - 06:29 PM
I think the font looks a tiny bit too heavy on Windows.

Also, is it possible to just download the characters you need from Helvetica Neue (edit the font) so you aren't downloading a huge file, but still see it the same way across systems?
Edited on 05 February 2014 - 05:30 PM
theoriginalbit #36
Posted 05 February 2014 - 06:47 PM
I think the font looks a tiny bit too heavy on Windows.
-image snip-
Also, is it possible to just download the characters you need from Helvetica Neue (edit the font) so you aren't downloading a huge file, but still see it the same way across systems?
nothing can be done. can't have it both ways. its either going to be readable on both system
probably, but since the entire website is in that font — consistency is another attribute of good usability — I'm going to go ahead and say that I'll need every character.
awsmazinggenius #37
Posted 05 February 2014 - 09:34 PM
(I think Helvetica Neue has accents) I meant stuff like accents, special characters (The never-used ones like section signs and the others) and the like. Unless you are going to have input boxes where the user can type those, you are pretty good leaving them out.

EDIT: Even if you do have input boxes, those are good places to use Helvetica, Arial and Sans-Serif, as Helvetica Neue is just a bit odd for one unless you make it thick, which kind of defeats the purpose.
Edited on 05 February 2014 - 08:36 PM
Alice #38
Posted 05 February 2014 - 09:39 PM
So I was working on the website (reason for bump) and I can't seem to get the favicon.ico working on Firefox. I have it working in IE. Anyone mind testing in other browsers please?
theoriginalbit #39
Posted 05 February 2014 - 09:41 PM
Anyone mind testing in other browsers please?
NB: local caches cleared before testing
no on Safari
yes on Firefox Mac
yes on Chrome Mac
yes on Opera Mac
NB: All that state yes above did not have favicon beside URL but instead on the tab.
Edited on 05 February 2014 - 08:45 PM
awsmazinggenius #40
Posted 05 February 2014 - 09:41 PM
I'll test it in Chrome on OS X and later Windows, possibly Ubuntu too. And why a "bump"? You didn't double post and your post came only 5 minutes after mine :)/>

EDIT: Damn ninja :ph34r:/>
EDIT 2: Icon works with Chrome on OS X
Edited on 05 February 2014 - 08:43 PM
Alice #41
Posted 05 February 2014 - 09:44 PM
Browser decided it wanted to show the cached version of page or something, didn't see either of the posts above XD
Don't know why though.

It's working in IE but I've tried to use favicon, icon, and shortcut icon in ref, but none of those are working.

EDIT - It's a 30x30 image, finding a different one :P/>
EDIT - After getting a 16x16 one, still not working.
Edited on 05 February 2014 - 08:50 PM
theoriginalbit #42
Posted 05 February 2014 - 09:46 PM
did you do it as an .ico or .png?
awsmazinggenius #43
Posted 05 February 2014 - 09:48 PM
I thought the term "favicon" referred to 16x icons (or at least it used to ;)/>)
Alice #44
Posted 05 February 2014 - 09:53 PM
BIT: it's an .ico both on-site and in-folder.
Wasmazinggenius: favicon = favorite icon, I.E. when you bookmark, it used to be called 'favoriting' a page. That's the icon that would show up.
theoriginalbit #45
Posted 05 February 2014 - 09:55 PM
I thought the term "favicon" referred to 16x icons (or at least it used to ;)/>)
well it used to refer to the icon used for the favourites file, you never saw it unless you added it as a bookmark. Now days its quite often displayed beside the URL, on the dashboard of Chrome, on Android and iOS devices, etc, etc, etc… as such it is no longer a 16x16 icon either, there's a range of sizes that they recommend you support iirc all the way up to 256x256 (used by Chrome and Opera)

EDIT: @death try using a png, some browsers don't like ice files.
EDIT 2: okay so I was slightly off 195px is the largest, comprehensive tutorial.
Edited on 05 February 2014 - 09:01 PM
Alice #46
Posted 05 February 2014 - 10:02 PM
Thanks BIT; it's working now. Keeping favicon.ico just in case.
oeed #47
Posted 06 February 2014 - 12:28 AM
About Lyqyd's comment: One thing that makes me wonder is that title oeed mentioned, maybe it needs to be changed.
Yea, it probably could do with a few changes.

Discuss, certainly. Advertise, no. If there hadn't been useful feedback given already, it would have gotten locked like previous topics advertising unrelated websites have been. There are a couple examples on the second page of topics.
Yes, I see where you're coming from. Topics like this one are completely useless. As long as it's asking for help/feedback I think it's fine though, I wouldn't say that it has to be CC related.

On my Mac at least there's Helvetica Neue Thin, which is a middle ground between Light and UltraLight, I can never seem to access it with CSS. You could try uploading it and using an @font-face
I feel like I should point out that I'm using Helvetica Neue, Helvetica, Arial, sans-serif. I never specifically specify Light UltraLight or Thin. I'm using font-weight to adjust the thickness, its currently sitting on 200. I don't like uploading fonts, 'cause if they take too long to download the webpage can look bad in the meantime; I prefer having just a system font and then similar looking fallbacks.

I generally use font-weight too, but when I make stuff in Photoshop/Illustrator I pretty much always use Thin. I see what you mean about the long wait though.
Alice #48
Posted 06 February 2014 - 01:27 AM
I'm really starting to like the comfortaa font - Thanks oeed :D/>
Also,
Spoiler
Edited on 06 February 2014 - 12:28 AM
oeed #49
Posted 06 February 2014 - 02:15 AM
I'm really starting to like the comfortaa font - Thanks oeed :D/>
Also,
Spoiler

Hmm, it's working for me. Where are you?


According to Uptime Robot it's been up 100% for the last week.
Alice #50
Posted 06 February 2014 - 02:27 AM
Augusta, KS
I'll try on other internet source.
Tested - Not working for either of the two sources.
Edited on 06 February 2014 - 01:29 AM
oeed #51
Posted 06 February 2014 - 03:05 AM
Augusta, KS
I'll try on other internet source.
Tested - Not working for either of the two sources.

Bizarre. By KS I presume you mean Kansas (people generally won't recognise state abbreviations unless they're from the US [or maybe Canada])
I'll try to find a proxy in Kansas and see what I get.
Try running it through an international proxy (UK, Australia etc)

Were you using the same computer in both instances?

Edit: It's working on a Kansas City based proxy.
Edited on 06 February 2014 - 02:09 AM
Alice #52
Posted 06 February 2014 - 03:37 AM
Sorry about the abbreviation :P/>
And sure, I'll try a proxy. Same computer.
It works - Not sure why my internet connection won't let me access it.
Edited on 06 February 2014 - 02:38 AM
oeed #53
Posted 06 February 2014 - 04:55 AM
Sorry about the abbreviation :P/>
And sure, I'll try a proxy. Same computer.
It works - Not sure why my internet connection won't let me access it.
It's probably something do with either your browser, proxy (router's), firewall or something like that.
You could also try clearing your cache.
Alice #54
Posted 06 February 2014 - 02:14 PM
Sorry about the abbreviation :P/>
And sure, I'll try a proxy. Same computer.
It works - Not sure why my internet connection won't let me access it.
It's probably something do with either your browser, proxy (router's), firewall or something like that.
You could also try clearing your cache.
I clear my cache a ton when working on websites - otherwise it won't load properly. I'll look into why it's doing that.
Alice #55
Posted 08 February 2014 - 10:45 PM
My dad decided he wanted to boot me off the computer and delete my website. Along with all my projects that were hosted alongside it. I might have a copy stored somewhere - I'll look for one.
awsmazinggenius #56
Posted 08 February 2014 - 10:53 PM
Death: Cloud backups rule :)/>
Alice #57
Posted 08 February 2014 - 10:56 PM
Yeah, I'm looking around. I'll find something somewhere.
awsmazinggenius #58
Posted 08 February 2014 - 10:59 PM
Hidden folders also rule :)/>
Sxw #59
Posted 08 February 2014 - 11:02 PM
Google Drive, Dropbox?
Alice #60
Posted 08 February 2014 - 11:03 PM
It was an uninstaller, and even if it wasn't, he always has it on.
I'll find a way to get it. He's found out what he's done and is searching.