|
|
This thread is locked; no one can reply to it.
|
1
2
|
| Web Site Design -- Feedback, Tips, Color Suggestions |
|
bamccaig
Member #7,536
July 2006
|
Felix-The-Ghost said: Although I'm sorta ticked that you didn't acknowledge my posting here at all.
Sorry. In terms of PNG versus SVG, I don't have the practical experience to speak on it, but it seems SVG is more user-friendly. It doesn't seem the browser support is there yet, but it still seems easier than dealing with scaling raster graphics. In general, as a programmer with very limited graphical ability, vector graphics seem much more attractive. The Web site you found for generating round-corners CSS seemed poorly designed. I stumbled across it through Google, but couldn't understand how to get it to "work". I managed to "generate" CSS, but didn't know what it would do. In any case, it seemed to require markup to support it, and that would clutter the markup, obscuring the semantics of it. Ultimately, I decided to leave well enough alone (I might ultimately remove the rounded corners, or leave in equivalent standard CSS and leave it to the browsers to catch up). Felix-The-Ghost said: And what is Castopulence/what does it mean? --verbose A few years ago, I was going to a community college and the local university had recently partnered with a Scottish university to offer a video game oriented degree. As part of that, they decided to include our local university in Dare To Be Digital. However, to participate, our local university needed at least two teams to propose their game ideas to a board of judges. The better team would be picked to go to Scotland for the competition. Since the degree was new at our local university, an arrangement was made to allow willing students from the local community college too, as long as at least 3/5 members on a team were from the university. A friend of mine, who is also an A.cc member, and I both became part of a team with 3 random university students. I think we needed a team name so I began brainstorming at home one night after one of the first meetings. I tried various things that came to mind, and used an online thesaurus to shake things up[1]. I think influence from Final Fantasy VII lead me to "cast", as in "cast a spell". Another way to describe it is "to launch"[2]. I guess I was being optimistic at the time because I found myself at "opulence", which roughly means "wealth". In other words, Castopulence roughly translates to "cast wealth" or "launch wealth". I think of it almost as ironic because I prefer the FOSS model and would like to find a way to operate the "business" (or organization) that way. I'm not too sure though. I think there is room in for-profit for open source and FOSS can probably have a strong influence on other business ventures, so maybe it isn't ironic at all. In any case, that's how I came up with the name. It had a bit of a ring to it. It ended up being chosen as the team name. For trivia's sake, I think my main contribution for our game proposal's name was "G'd Up: Gravity Dearth" or something like it. The game idea itself was originally my idea as well: an astronaut simulator. I imagined a non-flashy experience where you'd be in a low or zero gravity environment inside and outside of NASA's space shuttle and/or the ISS (the game would have begun with an exciting launch and ended with a return to Earth). You would be asked to complete "grunt work" tasks, like fixing malfunctioning satellites or the shuttle itself or whatever. I guess the main influence was the low gravity, something that I myself didn't know how the player could realistically maneuver in without making them feel like "press X to not die". I imagined free movement, which is obviously complicated in low gravity, but I digress. For reasons we won't discuss here, it was blown way out of proportion by other team members and became ridiculous before presentation day. We were ill-equipped to be sent to Scotland regardless, but the ridiculous proposal we ended up making made us seem like complete amateurs (we were in terms of game development, but this made us seem like we'd never written a program worth of code in our lives). The judges described it as 4 mainstream games all in one, but we only had 10 weeks, according to Wikipedia, to write it. Our hotshot team member would apparently develop the engine from scratch in two weeks[3]. I liked the name though and I held onto it. At the moment, Castopulence is just my own pet project or whatever. It's the name I give to my "organization", which is unofficial currently and consists primarily of me. I don't know whether it has a second member or not, but it's up to him. References
-- acc.js | al4anim - Allegro 4 Animation library | Allegro 5 VS/NuGet Guide | Allegro.cc Mockup | Allegro.cc <code> Tag | Allegro 4 Timer Example (w/ Semaphores) | Allegro 5 "Winpkg" (MSVC readme) | Bambot | Blog | C++ STL Container Flowchart | Castopulence Software | Check Return Values | Derail? | Is This A Discussion? Flow Chart | Filesystem Hierarchy Standard | Clean Code Talks - Global State and Singletons | How To Use Header Files | GNU/Linux (Debian, Fedora, Gentoo) | rot (rot13, rot47, rotN) | Streaming |
|
Derezo
Member #1,666
April 2001
|
Very clean, but I'm not a fan of the colors. Red on gray has been known to cause me to vomit. I like slight gradient backgrounds with low contrast borders as a easy way to add a minimal amount of aesthetic appeal. I also like nav's that are just plain text with underlining hovers. Something like: Your current setup feels like a comic book/news paper though, but I would personally ditch the red for something else. [edit: attachment image link fail... I'm missing critical information "He who controls the stuffing controls the Universe" |
|
Felix-The-Ghost
Member #9,729
April 2008
|
@bamccaig Also, I knew what cast and opulence are, I guess I should've pieced the two together when you were talking about FFVII. Edit: For lulz, I attached a web project I was working on when school closed for Christmas...Haven't touched it since though. I don't know what you use to edit html, I used to use Mac's TextEdit in school but MS Notepad doesn't appear capable of opening it...correctly. Browsers open it though. Note that I'm missing any kind of header, and for strict I'd probably have to change some names to lowercase, but all my tags are closed to my knowledge. Don't remember if strict allows for tables, but since I don't have a strict header yet go ahead and see what happens. Browsers sorta anti-alias the scaling so it looks fine. I did notice that there's a problem to fix in IE, and some smaller view sizes in Firefox are weird. Probably because I couldn't get margins to do what I expected them to do--make a margin inside the border--it adds them outside the border instead so I had to resize my divs. If you can get the css open and see it (my Notepad won't do) you (should) see everything's in ems. The site itself isn't really finished. There's only one page and I wanted to implement hover buttons for the links but never got to it. |
|
bamccaig
Member #7,536
July 2006
|
Derezo said: Very clean, but I'm not a fan of the colors. Red on gray has been known to cause me to vomit.
I agree completely. The color situation is one that I'm ill-equipped to fix on my own. I just don't know what colors would go well. Maybe I should pull them from the white materia in the above "logo". I like those colors (normally, I prefer red, white, and black... I don't care as much for other colors. At least not on a regular basis, though sometimes I do like certain shades). Derezo said: I like slight gradient backgrounds with low contrast borders as a easy way to add a minimal amount of aesthetic appeal.
Yes, that sounds good. I'll just have to figure out how to do that. Felix-The-Ghost said: Did you notice that in this thread the post order keeps getting shuffled? Your argument for .svg is that is user friendly, but you also say the browser support is not there. If it helps you make a decision on png, I design for normal zoom, and then the browser resizes things on higher text sizes and it looks fine. But if everyone you know can use .svg go ahead. Anyone using a higher text size can expect some sites to be have error on large sizes anyway. My actual plan was to handle it server-side. I would create all graphics in SVG, but then make PNG conversions for unsupported browsers. I would figure out what to serve based on either request headers or known supported browsers. In theory, everyone would be covered this way, but browsers that support it would get the benefits of SVG. This is of course only theory for me at this point. Felix-The-Ghost said: For lulz, I attached a web project...
Thanks, I'll take a look at it. Felix-The-Ghost said: I don't know what you use to edit html, I used to use Mac's TextEdit in school but MS Notepad doesn't appear capable of opening it...correctly.
I use Vim. -- acc.js | al4anim - Allegro 4 Animation library | Allegro 5 VS/NuGet Guide | Allegro.cc Mockup | Allegro.cc <code> Tag | Allegro 4 Timer Example (w/ Semaphores) | Allegro 5 "Winpkg" (MSVC readme) | Bambot | Blog | C++ STL Container Flowchart | Castopulence Software | Check Return Values | Derail? | Is This A Discussion? Flow Chart | Filesystem Hierarchy Standard | Clean Code Talks - Global State and Singletons | How To Use Header Files | GNU/Linux (Debian, Fedora, Gentoo) | rot (rot13, rot47, rotN) | Streaming |
|
Derezo
Member #1,666
April 2001
|
bamccaig said: I just don't know what colors would go well. I suggest playing with a color theme generator of sorts, or just rip colors from a theme you like. You may find this tool handy. As for getting the gradient, you may want to find a nice graphics editor that you're comfortable with. "He who controls the stuffing controls the Universe" |
|
BAF
Member #2,981
December 2002
|
bamccaig said: In terms of PNG versus SVG, I don't have the practical experience to speak on it, but it seems SVG is more user-friendly. And in terms of TXT versus DOCX, it seems DOCX is more user-friendly. You're comparing apples to oranges, and calling a file format more user-friendly. When you say things like this, it makes my head spin. |
|
MiquelFire
Member #3,110
January 2003
|
Using the object tag for SVG, and img inside the object for the PNG, you don't need to handle it yourself. --- |
|
bamccaig
Member #7,536
July 2006
|
MiquelFire said: Using the object tag for SVG, and img inside the object for the PNG, you don't need to handle it yourself.
^ Even better plan. Thank you. --- I've gotten an XSL stylesheet mostly working and created XML stubs for the various pages. With a browser that supports XSL via the <?xml-stylesheet ... ?> directive you should be able to view it here: http://castopulence.org/devel/index.xml I plan to eventually implement a server-side transformation system (based on URL rewriting) so that client-side support isn't an issue, but for now it's good enough to demo and work on. It seemingly works in up-to-date Windows versions of Firefox, Chrome, Opera, and Safari. It should surprise no one that Internet Explorer displays only an XML tree. The only known issue is that the entry/body markup is lost as per here. I'm pretty lost as far as fixing that. So the paragraphs for the entry stubs become one big paragraph of text. -- acc.js | al4anim - Allegro 4 Animation library | Allegro 5 VS/NuGet Guide | Allegro.cc Mockup | Allegro.cc <code> Tag | Allegro 4 Timer Example (w/ Semaphores) | Allegro 5 "Winpkg" (MSVC readme) | Bambot | Blog | C++ STL Container Flowchart | Castopulence Software | Check Return Values | Derail? | Is This A Discussion? Flow Chart | Filesystem Hierarchy Standard | Clean Code Talks - Global State and Singletons | How To Use Header Files | GNU/Linux (Debian, Fedora, Gentoo) | rot (rot13, rot47, rotN) | Streaming |
|
Neil Walker
Member #210
April 2000
|
Why is the title (e.g. 'News' in the screenshots above) of the current page off-centre to the right? Neil. wii:0356-1384-6687-2022, kart:3308-4806-6002. XBOX:chucklepie |
|
bamccaig
Member #7,536
July 2006
|
I just noticed an error in the stylesheet that breaks the content header's (i.e., "News") background. It appears to have been there for a while based on the tarball backups I have. I'm guessing it was another substitution failure. -- acc.js | al4anim - Allegro 4 Animation library | Allegro 5 VS/NuGet Guide | Allegro.cc Mockup | Allegro.cc <code> Tag | Allegro 4 Timer Example (w/ Semaphores) | Allegro 5 "Winpkg" (MSVC readme) | Bambot | Blog | C++ STL Container Flowchart | Castopulence Software | Check Return Values | Derail? | Is This A Discussion? Flow Chart | Filesystem Hierarchy Standard | Clean Code Talks - Global State and Singletons | How To Use Header Files | GNU/Linux (Debian, Fedora, Gentoo) | rot (rot13, rot47, rotN) | Streaming |
|
Tobias Dammers
Member #2,604
August 2002
|
bamccaig said: It seems the only way to currently get rounded corners in Opera and IE (and maybe others) is to use ugly h4x, such as JavaScript or image overlays. No need for javascript. Hell no. IE at least has conditional comments, so you can serve image-based rounded corners for IE only. Instead of using overlays, however, I'd recommend spans with a special class set on them, containing a single space; float them to the left and right respectively, set their background color to transparent, with a fixed size, and a png background image for the rounded corner. bamccaig said: In any case, it could be the off centering is related to that. It might also just look off center because the page isn't perfectly symmetrical.
The heading is off center because its container has a margin of 40em to the left and right. At this text size, a total of 80em is more than a typical screen can accommodate, so the container is laid out as having zero width, and the left margin at least seems to be honoured. The h2 itself, as a result, also has zero width, and is positioned at 40em to the right of the left of the content area, but because its overflow doesn't clip, you can still see the whole text. display: block; text-align: center; margin: 0em; padding: 0em; background-color: transparent; This will make the h2 use the entire width of its parent container, and center the text in it. --- |
|
bamccaig
Member #7,536
July 2006
|
I appreciate the round corners suggestion, but I'm not very "graphically inclined" and prefer to stay away from image hacks. It doesn't bother me if certain browsers see square corners. That's those browers' users' and developers' problems. I have Firebug installed, but I don't have much experience with using it. Most of the Web application work I've done has been h4xy IE-centric stuff where Microsoft debuggers were primarily used. Non-IE support has been flaky at best. I intend to full circle with my own projects. I'll have to investigate the off center header. Another weird oddity is that at j0rb I noticed that the background of the content header (i.e., News) isn't white as it should be. I tried hard refreshes and that didn't seem to help. Now I'm back home and notice that even with hard refreshes it still works... -- acc.js | al4anim - Allegro 4 Animation library | Allegro 5 VS/NuGet Guide | Allegro.cc Mockup | Allegro.cc <code> Tag | Allegro 4 Timer Example (w/ Semaphores) | Allegro 5 "Winpkg" (MSVC readme) | Bambot | Blog | C++ STL Container Flowchart | Castopulence Software | Check Return Values | Derail? | Is This A Discussion? Flow Chart | Filesystem Hierarchy Standard | Clean Code Talks - Global State and Singletons | How To Use Header Files | GNU/Linux (Debian, Fedora, Gentoo) | rot (rot13, rot47, rotN) | Streaming |
|
Tobias Dammers
Member #2,604
August 2002
|
bamccaig said: Another weird oddity is that at j0rb I noticed that the background of the content header (i.e., News) isn't white as it should be. I tried hard refreshes and that didn't seem to help.
There are other variables in the equation than the stylesheet and the browser version. There's at least the screen resolution to consider, and probably also the system-wide font scaling setting and the browser's default fonts. Quote: It doesn't bother me if certain browsers see square corners. That's those browers' users' and developers' problems. Perfect attitude for a tech-community site, or one where people can't choose whether they use the site or not. Bad idea for a showcase or web show, where you want to look good to the largest possible part of the target audience. For people who don't know the details, a "plz download a better browser kthx" notice looks very unprofessional - to them, IE is a very good browser, so the problem must be on your end. The rest of the internet works fine, after all. --- |
|
bamccaig
Member #7,536
July 2006
|
Tobias Dammers said: There are other variables in the equation than the stylesheet and the browser version. There's at least the screen resolution to consider, and probably also the system-wide font scaling setting and the browser's default fonts.
Touché. That sounds very worth looking into... ** EDIT ** That did it. Swapping the margins for a relative width seems to have fixed it. I'm not sure what the best units of measure for the width would be though. I'm currently using percentage. Tobias Dammers said: Perfect attitude for a tech-community site, or one where people can't choose whether they use the site or not. Bad idea for a showcase or web show, where you want to look good to the largest possible part of the target audience. For people who don't know the details, a "plz download a better browser kthx" notice looks very unprofessional - to them, IE is a very good browser, so the problem must be on your end. The rest of the internet works fine, after all.
Those users will never know there are round corners because they'll probably never see the site in other browsers. In any case, for the time being, I don't really have a target audience. If anybody, I guess it would be technically minded people. Maybe in the future I might be able to offer services to the world, but I'll consider that possibility when I get there. Even then, I'd still rather be honest with people and tell them their browser sucks. -- acc.js | al4anim - Allegro 4 Animation library | Allegro 5 VS/NuGet Guide | Allegro.cc Mockup | Allegro.cc <code> Tag | Allegro 4 Timer Example (w/ Semaphores) | Allegro 5 "Winpkg" (MSVC readme) | Bambot | Blog | C++ STL Container Flowchart | Castopulence Software | Check Return Values | Derail? | Is This A Discussion? Flow Chart | Filesystem Hierarchy Standard | Clean Code Talks - Global State and Singletons | How To Use Header Files | GNU/Linux (Debian, Fedora, Gentoo) | rot (rot13, rot47, rotN) | Streaming |
|
|
1
2
|