PHPBeginner.net - First Draft

It doesn't matter if you do all the error checking in the world, or if you have the most beautiful graphics, if your site or application design isn't usable, it's not going to do well. Get input and advice on usability and user interface issues here.

Moderator: General Moderators

User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

@d11, can you have a look now and see if the bolding did anything for you?
User avatar
Ollie Saunders
DevNet Master
Posts: 3179
Joined: Tue May 24, 2005 6:01 pm
Location: UK

Post by Ollie Saunders »

Nice one Everah! Really nice.

Couple of things:
  • Not supporting IE: I understand your principles, but you are just being a bit lazy really. You should at least support IE 7?
  • In places you made fall short of the W3C's colour contrast standards. There's an extension you can get for FireFox that will tell you where you do. I can give you the link when I'm at work if you like/care.
  • In the navigation tree I think it would be more user friendly is only one branch was expanded at a time. This avoids, overloading the user with too many options and the need to close branches.
  • The markup generated by the PHP syntax highlighting is fugly. I'm not sure how important it is but I just thought I'd point it out.
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

Everah wrote:@d11, can you have a look now and see if the bolding did anything for you?
Perfect :) You need another screenshot? :)

http://www.w3style.co.uk/~d11wtq/screen-full3.png
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

ole wrote:[*]In the navigation tree I think it would be more user friendly is only one branch was expanded at a time. This avoids, overloading the user with too many options and the need to close branches.
Or two, the active one, and the next one that the opened. (Takes more programming, but it's worth it to the user... They don't care how much you work :-p)
ole wrote:[*]The markup generated by the PHP syntax highlighting is fugly. I'm not sure how important it is but I just thought I'd point it out.
[/list]
Lol. What about the highlighting syntax here?

Code: Select all

// Does this syntax suck?
private function Hola($i)
{
    switch($i)
    {
        case 'Awesome':
            echo 'Hola Mundo';
            break;
        default:
            echo 'Default is bolded!';
    }
    return;
}
Edit: The only difference is the class names versus actually defining the colors. (The class names DO look cleaner :-p, and generate smaller file sizes)
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

ole wrote:Nice one Everah! Really nice.

Couple of things:
  • Not supporting IE: I understand your principles, but you are just being a bit lazy really. You should at least support IE 7?
  • In places you made fall short of the W3C's colour contrast standards. There's an extension you can get for FireFox that will tell you where you do. I can give you the link when I'm at work if you like/care.
  • In the navigation tree I think it would be more user friendly is only one branch was expanded at a time. This avoids, overloading the user with too many options and the need to close branches.
  • The markup generated by the PHP syntax highlighting is fugly. I'm not sure how important it is but I just thought I'd point it out.
I support coding to the standard. If IE7 handles standards, then the users should have no problem. In all actuality, I did hack this quite a bit to make it IE6 compatible. I am just not going to mess with little things like fixing positional elements requiring a border to render properly, or IE handling if fieldset background colors that extend to the top of the legend element. For the most part, however, the site will work just fine in IE (6) if you can live with the minute details that I really don't want to fix. ;)

As for the color contrast... you can send me the link. There are no guarantees that I'll change the colors (it took a little while to find just the right light version of the already lighter colors I am using).

I thought about setting it up to allow only one open branch (and it is not hard to force that). But I thought would limit the user experience a bit in forcing a user to choose which section they want to see. If it were me, and I wanted to see the entire tree, if the thing kept closing my sections, I'd leave. But that is me.

Can you throw out a screen shot of the syntax highlighting. It is using the base PHP highlight styles, but I hacked it a bit (made it bolder) because of an issue is rendering on Macs. I would love to see what you are seeing to see if there is a way to make it better seeing as the core of the site will be code examples that should look nice enough to make people want to look at them long enough to learn. ;)
superdezign wrote:Lol. What about the highlighting syntax here?
Ultimately the syntax highlighting will be handled by the application. The settings will be configurable, and I may go with a lower level color base to make it a little easier on the eyes. At the moment the colors are PHP's core highlight_string() colors as taken from a vanilla php install.

@d11, thanks for the screenshot. Man, it renders so much different in that browser than the three I use on Windows.
User avatar
Ollie Saunders
DevNet Master
Posts: 3179
Joined: Tue May 24, 2005 6:01 pm
Location: UK

Post by Ollie Saunders »

I support coding to the standard. If IE7 handles standards, then the users should have no problem. In all actuality, I did hack this quite a bit to make it IE6 compatible.
Hehe he. OK cool man.
As for the color contrast... you can send me the link. There are no guarantees that I'll change the colors (it took a little while to find just the right light version of the already lighter colors I am using).
OK I'll try and remember to dig it out tomorrow.
But I thought would limit the user experience a bit in forcing a user to choose which section they want to see. If it were me, and I wanted to see the entire tree, if the thing kept closing my sections, I'd leave. But that is me.
Thinking about it, your navigation doesn't have any of the problems that tree structures do, before there is no nesting and open/close action is easy to perform. I think my preference and yours are just that, preferences.

If you navigation were to evolve into a complex tree-based navigation there might be usability issues. Tree views have the following problems:
  • Not everybody is as confident with these are we like to think. We are very used to the concept of tree structures but many are not. Novices leave all there documents in a single folder and like to avoid compartmentalization for fear of the inability to find their way in and out of the many doors involved.
  • Things can get buried and suffer from poor categorization leading to frustration.
  • The choice is rarely contextual. Something like "related pages" is much more powerful
Can you throw out a screen shot of the syntax highlighting.
Nothing wrong with the visual output just the markup itself. This is just a fraction of it

Code: Select all

<br />&nbsp;*&nbsp;@return&nbsp;boolean&nbsp;True&nbsp;if&nbsp;all&nbsp;criteria&nbsp;is&nbsp;met,&nbsp;false&nbsp;otherwise
			<br />&nbsp;*/&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

			<br /></span><span style="color: #007700">function&nbsp;</span><span style="color: #0000BB">is_value_set</span><span style="color: #007700">(</span><span style="color: #0000BB">$required</span><span style="color: #007700">,&nbsp;</span><span style="color: #0000BB">$checkthis</span><span style="color: #007700">,&nbsp;</span><span style="color: #0000BB">$requireall&nbsp;</span><span style="color: #007700">=&nbsp;</span><span style="color: #0000BB">false</span><span style="color: #007700">)

			<br />{
			<br />&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #FF8000">//&nbsp;If&nbsp;the&nbsp;index&nbsp;or&nbsp;array&nbsp;to&nbsp;check&nbsp;are&nbsp;empty,&nbsp;return&nbsp;false
			<br />&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #007700">if&nbsp;(empty(</span><span style="color: #0000BB">$required</span><span style="color: #007700">)&nbsp;||&nbsp;empty(</span><span style="color: #0000BB">$checkthis</span><span style="color: #007700">))

			<br />&nbsp;&nbsp;&nbsp;&nbsp;{
			<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;</span><span style="color: #0000BB">false</span><span style="color: #007700">;
			<br />&nbsp;&nbsp;&nbsp;&nbsp;}
			<br />

			<br />&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #FF8000">//&nbsp;If&nbsp;the&nbsp;required&nbsp;value&nbsp;to&nbsp;check&nbsp;is&nbsp;a&nbsp;string&nbsp;or&nbsp;number

			<br />&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #007700">if&nbsp;(</span><span style="color: #0000BB">is_string</span><span style="color: #007700">(</span><span style="color: #0000BB">$required</span><span style="color: #007700">)&nbsp;||&nbsp;</span><span style="color: #0000BB">is_numeric</span><span style="color: #007700">(</span><span style="color: #0000BB">$required</span><span style="color: #007700">))
Personally I'm not sure I would be bothered to fix this given how much effort it might involve but, it is pretty horrific.
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

ole wrote:Not everybody is as confident with these are we like to think. We are very used to the concept of tree structures but many are not. Novices leave all there documents in a single folder and like to avoid compartmentalization for fear of the inability to find their way in and out of the many doors involved.
I believe QuirksMode allows users to select whether or not they want more than one menu open at a time. It's done through a cookie.
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

I'm sorry ole, I thought you meant how it rendered to the screen.

When it comes down to it, the output HTML will look a bit rough after all the highlighting gets done to it. That particular blurb was actually run through the highlight_string() function and I used its output straight from the generated source.

Sorry to make you go through all that fixing crap. Now I feel awful. :oops:
User avatar
vigge89
Forum Regular
Posts: 875
Joined: Wed Jul 30, 2003 3:29 am
Location: Sweden

Post by vigge89 »

I created a highlighter class (based on something which already existed) about two years ago which used highlight_string but cleaned everything up into something alot easier to handle (<span class='keyword'></span> etc.). I just took a quick look in it now for the first time since it was created (still had it on my harddrive) and it's really messy and not very reusable (I didn't know -anything- about OOP back then and only wrote it for a CMS I scrapped some months later), but you could maybe gain something out of it:

Code: Select all

<?php

// static number variable
$cnum = 0;

class highlighter {
	var $code; // code to highlight
	var $adjust; // add <?php if needed?
	var $line_numbers; // show linenumbers?
	var $highlight_method; // highlight_string / highlight_file
	var $title; // title for code
	var $isphp; // php or other code?

############## HIGHLIGHTER - initiation
function highlighter ($br = false, $method = 'highlight_string') {
	$this->highlight_method = $method;
	// set defaults
	$this->adjust = true;
	$this->line_numbers = true;
	$this->title = "PHP Code";
	$this->isphp = true;
}

############## SET_CONFIG - set configuration
function set_config ($property, $value) {
	if (isset ($this->$property)) {
		$this->$property = $value;
		// if $isphp is changed
		if ($property == 'isphp' && $value == false && $this->title == "PHP Code") $this->title = 'Code';
		return true;
	} else {
		return false;
	}
}

############## SET_CODE - sets the code to highlight
function set ($code) {
	// trim the code from newlines, delete linebreaks anddecode special characters into real code
	$this->code = html_entity_decode (str_replace ('<br />', '', trim ($code, "\r\n \n"))); 
}

############## CLEAR - empty code
function clear () {
	$this->code = '';
}

############## MAKE_CSS - create html/css code
function make_css ($code) {

	if (PHP_VERSION >= 5) { // PHP 5 highlighting
	$code = preg_replace (
	'{([\w_]+)(\s*</span>)'.
	'(\s*<span\s+style="color: '.ini_get ('highlight.keyword').'">\s*\()}m',
	"<a class='function' rel='ext' href='http://www.php.net/$1'>$1</a>$2$3",
	$code);
	} else { // old highlighting
	$code = preg_replace (
	'{([\w_]+)(\s*</font>)'.
	'(\s*<font\s+color="'.ini_get ('highlight.keyword').'">\s*\()}m',
	"<a class='function' rel='ext' href='http://www.php.net/$1'>$1</a>$2$3",
	$code);
	}

	$colors[ini_get ('highlight.bg')] = 'background';
	$colors[ini_get ('highlight.comment')] = 'comment';
	$colors[ini_get ('highlight.default')] = 'default';
	$colors[ini_get ('highlight.html')] = 'html';
	$colors[ini_get ('highlight.keyword')] = 'keyword';
	$colors[ini_get ('highlight.string')] = 'string';

	foreach ($colors as $color=>$class) {
		$code = str_replace ('<span style="color: '.$color.'">', "<span class='$class'>", $code); // PHP 5 highlighting
		$code = str_replace ('<font color="'.$color.'">', "<span class='$class'>", $code); // old highlighting
	}

	return str_replace ('</font>', '</span>', $code);
}

############## PROCESS - processes code and creates output
function process () {

global $cnum;
$code = $this->code;
$hlfunc = $this->highlight_method;

if ($this->isphp) { // highlight if php

if ($this->adjust && !strstr ($code, '<?php') && !strstr ($code, '<?')) { // add php-tags {
	if (strpos ($code, "\r\n") === 0) $code = "<?php".$code."\r\n?>";
	else $code = "<?php\r\n".$code."\r\n?>";
} // } add php-tags

$code = $hlfunc ($code, true);
$code = $this->make_css ($code);
$lines = count (explode ('<br />', $code));
$output = @file_get_contents ('tpl/php.tpl');

} else { // not php
	$code = "<span class='keyword'>".nl2br (htmlentities ($code))."</span>";
	$code = str_replace ('  ', ' &nbsp;', $code); // 2 spaces > 1 space + 1 nbsp
	$code = str_replace (chr(9), '&nbsp; &nbsp; ', $code); // Tab > 4 spaces
	$lines = count (explode ('<br />', $code));
	$output = @file_get_contents ('tpl/code.tpl');
}

for ($i = 1; $i < ($lines + 1); $i++) {
	if($this->line_numbers) {
		$rownumbers .= "$i<br />";
	}
}

// convert brackets to entities to prevent formatting
$code = str_replace (chr(91), '[', $code); // [
$code = str_replace (chr(93), ']', $code); // ]

$cnum++; // increase the current number for box id

#### turn template into output
$output = str_replace ('{%title%}', $this->title, $output); // title
$output = str_replace ('{%rownumbers%}', $rownumbers, $output); // rownumbers
$output = str_replace ('{%code%}', $code, $output); // actual code
$output = str_replace ('{%numlines%}', $lines, $output); // number of lines
$output = str_replace ('{%id%}', $cnum, $output); // number of lines

return $output;
}

}
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

Now I love Stuart Langridge as much as the next guy, but you could replace his entire tree script with:

Code: Select all

$(function(){
	$('.tree-navigation li').click(function(){
		$(this).toggleClass("branch-closed").toggleClass("branch-open").focus();
	});
	$('.tree-navigation ul').click(function(){
		return false;
	});
});
In fact, I'd even add a piece in there to do the initial hiding to make it non-javascript friendly!

Oh, and LUG Radio totally rocks.
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

Kieran Huggins wrote:In fact, I'd even add a piece in there to do the initial hiding to make it non-javascript friendly!
Well, I think that, per section, he assigns the "closed" and "open" class to the appropriate menus so that users without JavaScript only see the current section. This also makes it so that users with browsers that read aloud to them do read every single menu item every time.
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

I have a highlighter class that I modified from another codebase that is currently not being developed anymore. It cleans things up considerably. The code in the template is there for visual evaluation at the moment. When it goes live, it will output better on the markup side of things.

I will totally look into that tree menu code Kieran. I grabbed that other code and tweaked it for something else I was using then tweaked it again for this. But if I could get it into Jquery I would do it in a heartbeat.

At first, the JS I was using only opened the UL that was classed as 'branch-open'. With JS off, the entire list showed, but was unstyled and looked like hell. I modified the class assignments in the list so that if JS is off, it will load the same way as if it were on, so the user sees no change in the way the page renders with or without JS. But I am definitely going to look into that Jquery code you posted. That would be my ultimate tingle, getting the site to run with Jquery (which I haven't spent a lot of time toying with yet).
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

Dude, Kieran, that freaking rocks. Thanks dude. That Jquery code is now implemented in my navigation.
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

Happy to help :-) I'd be willing to go a bit deeper and get rid of your class soup if you like.
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

Dude, I'll always take any help I can get. Keep in mind that this is still a first cut, so things will definitely get cleaned up. But if you want to help out with it, hell yes, I will take that.
Post Reply