I gots a new website


diligentcircle

Well-Known Member
Joined
Aug 29, 2011
Messages
1,594
Age
30
Location
Milky Way galaxy
Website
onpon4.github.io
I might as well mention it. I used to use Weebly for my personal website, but I migrated to 000webhost today. Just stuff and links and other stuff.


http://onpon4.comule.com


If anyone has any critiques of the design, I want to hear them. :p I tried to incorporate the strengths of my old website's design and make it better (and less dark).
 
Last edited by a moderator:
is nice, I read that 'white blue and greys' are most soothing colours for a user. :)


I noticed on the 'other' page...


the aside content for 'other ways to contact me' is a dead link, pointing to the host pages. should probably link to an anchor on bottom of contact page where you mention your facebook acc?


on the 'apps' page, the categories are not linked, even the ones you have items for, like 'education'.


I'd personally look at making menu responsive, I'm forever changing my sites but now always use responsive as so many people browse on tablets and phones now.


that's me getting critical though. site looks nice to me. I'm guessing you've just not finished all the links yet as it's new.


content it all good.


is good to share.
 
I think the BG should be lighter, as the black-on-grey text is a little hard to read
 
is nice, I read that 'white blue and greys' are most soothing colours for a user. :)
I think the BG should be lighter, as the black-on-grey text is a little hard to read

Hmm... I'll experiment with other colors and see how it looks. I honestly like the gray, it's easy on the eyes, but maybe it could be a bit brighter.

I noticed on the 'other' page...


the aside content for 'other ways to contact me' is a dead link, pointing to the host pages. should probably link to an anchor on bottom of contact page where you mention your facebook acc?

Whoops, that isn't supposed to be there. It's there because of the way I did the site; that box is from the home page. And the links are broken because they're all relative. Thanks for the spot! :)


The creator of the design I'm using showed examples with those side elements as news/blog snippets, but I decided to do something different with them on each page (partly because, with so many pages, the effort to update them if they're all the same would be crazy). I don't know of what I could use it for on the "other" page, though, maybe star items or something.

on the 'apps' page, the categories are not linked, even the ones you have items for, like 'education'.

That hasn't been implemented yet mostly because it's low-priority right now with only two games and three apps (four apps when I upload my "I'd rather... than" generator soon), and I had a busy weekend. I think what I'll do is just have a separate page for each category, since I don't know of any Javascript. Though the only type of command I would need is to show and hide certain divs (based on a custom attribute(s), like "category" and "genre"), so maybe it's easy enough that I'll implement it that that way (after learning how to do it).


Heck, I kind of want some sort of rating buttons (like/dislike) and the rating widget I used in my old website defaults to Flash and makes LibreJS mad, so I guess I'll want to learn Javascript anyway.

I'd personally look at making menu responsive, I'm forever changing my sites but now always use responsive as so many people browse on tablets and phones now.

There aren't any menus on my website per se, just regular links and web pages. What part is unresponsive?
 
Last edited by a moderator:
The creator of the design I'm using showed examples with those side elements as news/blog snippets, but I decided to do something different with them on each page (partly because, with so many pages, the effort to update them if they're all the same would be crazy). I don't know of what I could use it for on the "other" page, though, maybe star items or something.

Do your host support any sort of PHP or the like? Since, from the sound of it, it seems you are doing this with static HTML (the "having to update them all" bit) and that is something I'd never do if I wasn't forced at gunpoint. Just the ability to do a straight include of repeated elements (like navigation or persistent sidebars or whatever) is worth its weight in gold, really.


For some reason the site is down right now, so I can't check - If this is obviously wrong, just blame the internets. But if it isn't - Look into "include". Srsly.
 
There aren't any menus on my website per se, just regular links and web pages. What part is unresponsive?

I meant the top/main menu...


home/about/games/apps/projects/other/links/contact


When adjusting my browser window it doesn't respond.


Same when I look on my phone, it is same as desktop site and you really need to zoom in to see the text at a readable size - but then your menu doesn't respond and means you need to scroll to view it.
 
Do your host support any sort of PHP or the like? Since, from the sound of it, it seems you are doing this with static HTML (the "having to update them all" bit) and that is something I'd never do if I wasn't forced at gunpoint. Just the ability to do a straight include of repeated elements (like navigation or persistent sidebars or whatever) is worth its weight in gold, really.

Yeah, but I don't know any web programming, just HTML and CSS. The most I can do right now is maybe some really basic Javascript commands. I know nothing of how to use PHP.

I meant the top/main menu...


home/about/games/apps/projects/other/links/contact


When adjusting my browser window it doesn't respond.


Same when I look on my phone, it is same as desktop site and you really need to zoom in to see the text at a readable size - but then your menu doesn't respond and means you need to scroll to view it.

Oh, I get what you mean.


Well, it doesn't respond to size changes and such because the sizes are all set in pixels. I'm honestly not sure how to change that, I definitely don't want it to try to take up the whole width of the screen (would look awful on widescreen), and if I use relative widths, I don't know how to make it so that it doesn't only use 75% of the screen even on a 640 pixel wide display, for example. Is there a way to still use the absolute pixel sizes, but switch to relative sizes if the browser window is too small to show the whole width? I'd be interested in doing that, as long as it's plain CSS.
 
You need to learn to type <?php include("filename.php"); ?> and literally nothing more, in order to use the wonderful, wonderful power of file inclusion. Give me a day or two and I'll put together a couple of example files for you. It's super effective :)
 
You need to learn to type <?php include("filename.php"); ?> and literally nothing more, in order to use the wonderful, wonderful power of file inclusion. Give me a day or two and I'll put together a couple of example files for you. It's super effective :)

File inclusion? OK, what are the benefits of that (without being familiar with PHP)?


EDIT: I've made quite a few fixes to my site, including fixing some HTML errors I didn't see. I did notice something: 000webhost adds some code to all my pages that makes them invalid! It's just a call to some Javascript code that I guess counts how much traffic I get, but it's outside of the main HTML tag... :mellow:


http://validator.w3.org/check?uri=http%3a%2f%2fonpon4.comule.com%2f
 
Last edited by a moderator:
Since you have a relatively static header and footer, those would be easiest. Just take all the header code (all the way up to <html> if you want) and put it into a separate "header.php" file, the same for footer, put it all into a separate "footer.php" file. Then on all of your pages, replace your header and footer code with <?php include('path/to/header.php'); ?> at the top, and <?php include('path/to/footer.php'); ?> at the bottom, and it will include the content of those files in your document, as if the code was there in the first place. That way you only have to edit one file when changing the header/footer. Don't forget to rename all your pages to .php so the tags work!


I noticed you split up sections into their own subdirectories, like /games, /apps, etc. So you'd need to use include('../header.php'); if you store the header file in the root directory, as '../' will move up to the parent directory.


And last but not least I see you use class="current" to denote which topic is selected. With the header code repeated on each page you can easily modify it to do that, but with it in one location as an include, it's a bit more tricky since the code will have to be the same on each page it's included on. If you don't want to muck up your pages too much, one simple solution would be this:


At the top of every page, you'd have two lines.



Code:
<?php $page = 'Home';

include('header.php'); ?>

In the first line, just replace 'Home' with whatever page you want to be underlined in the navbar. Then, in the header file, use this code for the menu:





Code:
<ul id="menu">

		 <li<?php if($page == 'Home'){echo ' class="current"';}><a href="index.html">Home</a></li>

		 <li<?php if($page == 'About'){echo ' class="current"';}><a href="about/index.html">About</a></li>

		 <li<?php if($page == 'Games'){echo ' class="current"';}><a href="games/index.html">Games</a></li>

		 <li<?php if($page == 'Apps'){echo ' class="current"';}><a href="apps/index.html">Apps</a></li>

		 <li<?php if($page == 'Projects'){echo ' class="current"';}><a href="projects/index.html">Projects</a></li>

		 <li<?php if($page == 'Other'){echo ' class="current"';}><a href="other/index.html">Other</a></li>

		 <li<?php if($page == 'Links'){echo ' class="current"';}><a href="links/index.html">Links</a></li>

		 <li<?php if($page == 'Contact'){echo ' class="current"';}><a href="contact/index.html">Contact</a></li>

</ul>

That way, whatever page you set before including the header will be the one underlined. It's a little dirty, but would be easiest to implement with the current pages you have set up.
 
Last edited by a moderator:

Huh, sounds very interesting. I'll take a look. I've wanted to use something like variables or constants ever since I first learned HTML, and likewise with being able to split pages into multiple files, but I was told to just copy and paste. I should have guessed that PHP lets you do those, though the inclusion thing looks hackish.
 
Last edited by a moderator:
Exactly like that. The possibility to have code in one place instead of several is invaluable when you start having a little more complexity.
 
Yup, and when you do get more complex it never hurts to use include_once() instead of normal include(), that way even if you accidentally have multiple includes of the same file it'll only show up once in the generated html (unless of course you need to include something more than once, in which case normal include() would do :p ).
 
I finally got PHP into my website yesterday. I'm using include for the footer and for the info tables for the apps and games.


The thing is, I didn't try it, but it seems to me like Tensuke's suggestion for the header wouldn't work. There are three directory levels, so it seems to me this also needs to be accounted for in code. Am I actually wrong about this? If not, what should I do? I could just have a variable called "level" or something and add "../" strings, but is there a more elegant way?
 
There are several ways, of course :) however, I don't quite understand your question. Three levels?
 
If you're not creating dynamic data from a database, I'm not really seeing why PHP is really needed.. However you could reduce a lot of repetitive HTML code with PHP.. You could do many of the same things with Javascript too..


For example instead of adding those inline PHP elements for every item in your menu like in that example from Tensuke.. you can have your menu dynamically generated and make it easy to add new items using arrays..


This is just a crude example:



Code:
<?php


	 //setup an associated array of the category names and url links

	 $menu_array = array (

			 'Games' => 'games.html',

			 'Projects' => 'project.html',

			 'Etc..' => 'etc.html'

	 );



	 //loop through the menu array while creating the menu..

$html_out = "<ul id='menu'>\n";

foreach ($menu_array as $item_name => $url) {

$html_out .= "<li><a href='$url'>$item_name</a></li>\n";

}


$html_out .= "</ul>\n";

	 echo $html_out;

?>



will output:





Code:
<ul id='menu'>

<li><a href='games.html'>Games</a></li>

<li><a href='project.html'>Projects</a></li>

<li><a href='etc.html'>Etc..</a></li>

</ul>


you can set this up as a function call or make it a separate page and just include it in your current HTML.. It's up to you..
 
Last edited by a moderator:
There are several ways, of course :) however, I don't quite understand your question. Three levels?

Well, there's the root directory, of course, which contains the homepage. This is what I mean by "first" level. Then each page linked to at the top has its own directory, the "second" level; for pages in these directories, they would need to include "../header.php" instead of "header.php". Then each game and app has its own directory in its respective second-level directory, the "third" level; for pages in the game directories, "../../header.php" would need to be included.
 
TrashyMG: It was exactly to get rid of the repetitive cut-and-paste-ing that I suggested PHP. Of course, any serverside include functionality would work :) Anybody else remember good old apache serverside includes? :ph34r:


Yes, of course you'd have to have include paths that point to the included files :) Of course, you could solve that by having an absolute instead of relative path for the include. That is, if you keep all the commonly included bits in [root_dir]/include/, then you could refer to that by



Code:
 include($_SERVER['DOCUMENT_ROOT'] . "/include/menu.php");
or something like that. That would work on all levels.


EDIT: Added a slash before "include" - A quick test told me it was needed.
 
Last edited by a moderator:
Yes, of course you'd have to have include paths that point to the included files :) Of course, you could solve that by having an absolute instead of relative path for the include. That is, if you keep all the commonly included bits in [root_dir]/include/, then you could refer to that by



Code:
 include($_SERVER['DOCUMENT_ROOT'] . "/include/menu.php");
or something like that. That would work on all levels.


EDIT: Added a slash before "include" - A quick test told me it was needed.

Thanks for the info! I suppose the dot is a concatenation operator?
 
Back
Top