PHPBeginner.net - First Draft
Moderator: General Moderators
- RobertGonzalez
- Site Administrator
- Posts: 14293
- Joined: Tue Sep 09, 2003 6:04 pm
- Location: Fremont, CA, USA
- Ollie Saunders
- DevNet Master
- Posts: 3179
- Joined: Tue May 24, 2005 6:01 pm
- Location: UK
Nice one Everah! Really nice.
Couple of things:
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.
- Chris Corbyn
- Breakbeat Nuttzer
- Posts: 13098
- Joined: Wed Mar 24, 2004 7:57 am
- Location: Melbourne, Australia
PerfectEverah wrote:@d11, can you have a look now and see if the bolding did anything for you?
http://www.w3style.co.uk/~d11wtq/screen-full3.png
- superdezign
- DevNet Master
- Posts: 4135
- Joined: Sat Jan 20, 2007 11:06 pm
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:[*]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.
Lol. What about the highlighting syntax here?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]
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;
}- RobertGonzalez
- Site Administrator
- Posts: 14293
- Joined: Tue Sep 09, 2003 6:04 pm
- Location: Fremont, CA, USA
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.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.
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.
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.superdezign wrote:Lol. What about the highlighting syntax here?
@d11, thanks for the screenshot. Man, it renders so much different in that browser than the three I use on Windows.
- Ollie Saunders
- DevNet Master
- Posts: 3179
- Joined: Tue May 24, 2005 6:01 pm
- Location: UK
Hehe he. OK cool man.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.
OK I'll try and remember to dig it out tomorrow.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).
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.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.
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
Nothing wrong with the visual output just the markup itself. This is just a fraction of itCan you throw out a screen shot of the syntax highlighting.
Code: Select all
<br /> * @return boolean True if all criteria is met, false otherwise
<br /> */
<br /></span><span style="color: #007700">function </span><span style="color: #0000BB">is_value_set</span><span style="color: #007700">(</span><span style="color: #0000BB">$required</span><span style="color: #007700">, </span><span style="color: #0000BB">$checkthis</span><span style="color: #007700">, </span><span style="color: #0000BB">$requireall </span><span style="color: #007700">= </span><span style="color: #0000BB">false</span><span style="color: #007700">)
<br />{
<br /> </span><span style="color: #FF8000">// If the index or array to check are empty, return false
<br /> </span><span style="color: #007700">if (empty(</span><span style="color: #0000BB">$required</span><span style="color: #007700">) || empty(</span><span style="color: #0000BB">$checkthis</span><span style="color: #007700">))
<br /> {
<br /> return </span><span style="color: #0000BB">false</span><span style="color: #007700">;
<br /> }
<br />
<br /> </span><span style="color: #FF8000">// If the required value to check is a string or number
<br /> </span><span style="color: #007700">if (</span><span style="color: #0000BB">is_string</span><span style="color: #007700">(</span><span style="color: #0000BB">$required</span><span style="color: #007700">) || </span><span style="color: #0000BB">is_numeric</span><span style="color: #007700">(</span><span style="color: #0000BB">$required</span><span style="color: #007700">))- superdezign
- DevNet Master
- Posts: 4135
- Joined: Sat Jan 20, 2007 11:06 pm
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.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.
- RobertGonzalez
- Site Administrator
- Posts: 14293
- Joined: Tue Sep 09, 2003 6:04 pm
- Location: Fremont, CA, USA
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.
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.
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 (' ', ' ', $code); // 2 spaces > 1 space + 1 nbsp
$code = str_replace (chr(9), ' ', $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;
}
}- Kieran Huggins
- DevNet Master
- Posts: 3635
- Joined: Wed Dec 06, 2006 4:14 pm
- Location: Toronto, Canada
- Contact:
Now I love Stuart Langridge as much as the next guy, but you could replace his entire tree script with:
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.
Code: Select all
$(function(){
$('.tree-navigation li').click(function(){
$(this).toggleClass("branch-closed").toggleClass("branch-open").focus();
});
$('.tree-navigation ul').click(function(){
return false;
});
});Oh, and LUG Radio totally rocks.
- superdezign
- DevNet Master
- Posts: 4135
- Joined: Sat Jan 20, 2007 11:06 pm
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.Kieran Huggins wrote:In fact, I'd even add a piece in there to do the initial hiding to make it non-javascript friendly!
- RobertGonzalez
- Site Administrator
- Posts: 14293
- Joined: Tue Sep 09, 2003 6:04 pm
- Location: Fremont, CA, USA
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).
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).
- RobertGonzalez
- Site Administrator
- Posts: 14293
- Joined: Tue Sep 09, 2003 6:04 pm
- Location: Fremont, CA, USA
- Kieran Huggins
- DevNet Master
- Posts: 3635
- Joined: Wed Dec 06, 2006 4:14 pm
- Location: Toronto, Canada
- Contact:
- RobertGonzalez
- Site Administrator
- Posts: 14293
- Joined: Tue Sep 09, 2003 6:04 pm
- Location: Fremont, CA, USA