Please login or register.

Login with username, password and session length
Advanced search  
Pages: 1 [2] 3 4

Author Topic: sNews goes HTML5  (Read 11063 times)

Sven

  • ULTIMATE member
  • ******
  • Karma: 88
  • Posts: 2029
  • Chasing MY bugs!
    • hiseo.fr - rédacteur Web
Re: sNews goes HTML5
« Reply #15 on: October 01, 2009, 09:00:56 AM »

Ok, go.
Vini, vidi, convinci.
Webkit browsers and Firefox okey.
Of course, with IE8 Ball-Ball's design is destroyed (Paul's and mine too).
What have you changed in the core?

Fred K

  • Still trying to learn stuff
  • ULTIMATE member
  • ******
  • Karma: 130
  • Posts: 2728
    • Personal
Re: sNews goes HTML5
« Reply #16 on: October 01, 2009, 11:00:06 AM »

Vini, vidi, convinci.
:)

Webkit browsers and Firefox okey.
Of course, with IE8 Ball-Ball's design is destroyed (Paul's and mine too).
Yeah, sort of expected, what with the number of CSS3 effects in place, plus no extras whatsoever for IE models in place. Although I was quietly hoping that IE8 at least would understand the basic configuration (most CSS3 effects should fail gracefully, or that's the idea anyway).

What have you changed in the core?

Ah, if I remember all the details... (some are commented, some not)
1: Separated server config and site() to 2 separate files, one for local setup and one for remote web server setup, per an earlier discussion we've had, somewhere, if I can find it. In general questions, I think. I'll look for it. Here it is, although the trick I'm using is the split suggested by our friend nukpana and that particular comment has vanished from the discussion! Sad. Anyway, the site() separation works quite nicely I think.

2: changed the title() function to a more complete head() function, leaving only the <head></head> tags plus the jQuery javascript reference in index.php, everything else for the head part is now in snews.php. Reason is so you only need to look in one place to change the head info, not two. The jQuery reference is temporary which is why I left it in index.php -- didn't know for sure how the style switcher would go over.

3: Changed all /> endings on input, img and br tags to >. It's not necessary to do that with HTML5, I did it in this wip to see how much work it would be to turn an XHTML-ized script to normal HTML, and partly to clearly differentiate 1.7 standard from 1.7 HTML5 core. It's also easier to convert an HTML5 core to an HTML4 core this way, should one want that.

4: Moved the date line in articles() to directly after the title, partly because I 5: added a couple of HTML lines in the title if-elses to create different containers depending on if $_ID or not (e.g if on an index page or full article), which gives an extra option for styling articles differently depending on where they appear (index page or full article view), and partly because I personally prefer to have the date line next to the title. I'd prefer to have the readmore link appear at the end of or below the article, but I haven't done anything about that yet.

6: Added an if _ADMIN check in index.php to create the partly different content presentation in the admin panel (in case anyone's looked) -- when logged in you get the admin panels full page width because the sidebar is only present when not logged in. This could be extended if I move the layout separation to snews.php instead of index.php and think a little more about which parts are needed in the admin panel and which aren't needed so much, but that's another thing I haven't done yet as it requires both a bit of planning and a bunch of rewriting. And I'm not sure it's the best fit for a template.

7: I moved the "commentsbox" start to the top of comments() and turned it into a section instead of a div. Keeps the structure better together in the HTML5 context and allows for a <header> part where necessary.

Almost forgot one. 8: Modified the paginator to better suit my liking, which required an addition to the lang file (the word "of" has been added under #paginator).

That's about it, I think, other than structural changes in the index.php, but that's mostly a case of some div's changing name to header, nav, section, article, aside and footer where appropriate.

Minor modifications, in other words.
« Last Edit: October 01, 2009, 11:08:57 AM by Fred K (agentsmith) »
Logged

Sven

  • ULTIMATE member
  • ******
  • Karma: 88
  • Posts: 2029
  • Chasing MY bugs!
    • hiseo.fr - rédacteur Web
Re: sNews goes HTML5
« Reply #17 on: October 01, 2009, 11:43:17 AM »

What have you changed in the core?

Ah, if I remember all the details... (some are commented, some not)
1: Separated server config and site() (..)
Missed that trick. >:( It's tremendous!
Quote from: Fred K (agentsmith)
2: changed the title() function to a more complete head() function, leaving only the <head></head> tags plus the jQuery javascript reference in index.php, everything else for the head part is now in snews.php. Reason is so you only need to look in one place to change the head info, not two. The jQuery reference is temporary which is why I left it in index.php -- didn't know for sure how the style switcher would go over.
Yeap. I did the same for my previous playground. My index.php head is naked, till the body. Its comfortable.
Quote from: Fred K (agentsmith)
3: Changed all /> endings on input, img and br tags to >. It's not necessary to do that with HTML5, I did it in this wip to see how much work it would be to turn an XHTML-ized script to normal HTML, and partly to clearly differentiate 1.7 standard from 1.7 HTML5 core. It's also easier to convert an HTML5 core to an HTML4 core this way, should one want that.
:o For my little head it's gonna be a source of problems and confusion. I'm sure I will mix HTML and XHTML. ;D
Quote from: Fred K (agentsmith)
4: Moved the date line in articles() to directly after the title, partly because I 5: added a couple of HTML lines in the title if-elses to create different containers depending on if $_ID or not (e.g if on an index page or full article), which gives an extra option for styling articles differently depending on where they appear (index page or full article view)
Smart. I can imagine the result but wonder how you made it.
Quote from: Fred K (agentsmith)
6: Added an if _ADMIN check in index.php to create the partly different content presentation in the admin panel (in case anyone's looked) -- when logged in you get the admin panels full page width because the sidebar is only present when not logged in. This could be extended if I move the layout separation to snews.php instead of index.php and think a little more about which parts are needed in the admin panel and which aren't needed so much, but that's another thing I haven't done yet as it requires both a bit of planning and a bunch of rewriting. And I'm not sure it's the best fit for a template.
I went there earlier.
In this cool way I suppose. 8)
Thanks again. ;)
Quote from: Fred K (agentsmith)
7: I moved the "commentsbox" start to the top of comments() and turned it into a section instead of a div. Keeps the structure better together in the HTML5 context and allows for a <header> part where necessary.
Yeap! Let's avoid the Div soup! I'll do the same.
Quote from: Fred K (agentsmith)
Almost forgot one. 8: Modified the paginator to better suit my liking, which required an addition to the lang file (the word "of" has been added under #paginator).
There I'm stuck.
Quote from: Fred K (agentsmith)
That's about it, I think, other than structural changes in the index.php, but that's mostly a case of some div's changing name to header, nav, section, article, aside and footer where appropriate.
Minor modifications, in other words.
And so sNews goes semantic.
But this has nothing to see with sNews. ;)  ;D

PS: I'm building a wall with large stones, concrete and cement (wife's order). And as ce que femme veut is my priority it'll take some time to code further more. Hope next week to be able to have an online version to share our ideas and more.

Fred K

  • Still trying to learn stuff
  • ULTIMATE member
  • ******
  • Karma: 130
  • Posts: 2728
    • Personal
Re: sNews goes HTML5
« Reply #18 on: October 01, 2009, 01:02:11 PM »

Re. #4 above:
Quote from: Sven
Smart ... wonder how you made it.

1. (in articles function)
Quote
$title = $r['title'];
         if ($r['displaytitle'] == 'YES') {
            if (!$_ID)  {
               echo '<div class="post">
               <h1>'.$link.$uri.'/'.$r['asef'].'/">'.$title.'</a></h1>

               ';
            } else {
               echo '<h1>'.$title.'</h1>
               ';
            }
         }

2. (Still in articles)
Moved
Code: [Select]
file_include(str_replace('[break]', '',$text), $shorten);to just before
Code: [Select]
if (!empty($currentPage) && ($num> $article_limit) && $on) {
Here's the whole "include(str_replace" bit. It's also modified to bring in the </div> on index pages:
Quote
file_include(str_replace('[break]', '',$text), $shorten);
         $commentable = $r['commentable'];
         $visiblity = $r['visible'] == 'YES' ? '<a href="'._SITE.'?action=process&amp;task=hide&amp;item=snews_articles&amp;id='.$r['aid'].'&amp;back='.$uri.'">'.l('hide').'</a>' : l('hidden').' ( <a href="'._SITE.'?action=process&amp;task=show&amp;item=snews_articles&amp;id='.$r['aid'].'&amp;back='.$uri.'">'.l('show').'</a> )';
         $edit_link = $link.'?action=admin_article&amp;id='.$r['aid'].'" title="'.$title.'">'.l('edit').'</a> ';
         $edit_link.= ' '.l('divider').' '.$visiblity;
         if(!$_ID) {
         echo '</div>';}


I'll try and make sure that all changes are commented in snews.php and index.php (and other related files) when I get as far as putting a template package together, it'll make more sense when you see it all in one piece.

Re. #6
Quote from: Sven
I went there earlier.
In this cool way I suppose. 8)

That is a cool mod :D
And, yes, sort of in that way but not so completely separated. You can try it yourself if you login with the standard user/pass. Basically you get the same layout but without the sidebar. It won't switch back the theme though, if you first change from original to sea for example. ;)
(The admin panels has a different font, slightly larger type and a white center also, which the public view doesn't have, obviously.)
Like I said, you can check it out yourself, it's a simple way of showing how much can be customized.
I was thinking of doing a more Wordpress-esque backend (even though I *know* we're not supposed to say that name out loud), but that requires a bit of rewriting of the admin bits in snews.php so I don't know if I'll fit that into this template or not. I think I must concentrate on earning my christmas gift list stash first, otherwise I'll have hell to pay come December... if you see what I mean.
« Last Edit: October 01, 2009, 01:13:58 PM by Fred K (agentsmith) »
Logged

nukpana

  • Hero Member
  • *****
  • Karma: 71
  • Posts: 663
Re: sNews goes HTML5
« Reply #19 on: October 01, 2009, 01:14:58 PM »

Quote
1: Separated server config and site() to 2 separate files, one for local setup and one for remote web server setup, per an earlier discussion we've had, somewhere, if I can find it. In general questions, I think. I'll look for it. Here it is, although the trick I'm using is the split suggested by our friend nukpana and that particular comment has vanished from the discussion! Sad. Anyway, the site() separation works quite nicely I think.

I took it down for some reason... I think I was testing it and messed somethign up and took it down, but may have realized it was good and forgot to put it back up... either way.. can you repost it?

Quote
Changed all /> endings on input, img and br tags to >. It's not necessary to do that with HTML5, I did it in this wip to see how much work it would be to turn an XHTML-ized script to normal HTML, and partly to clearly differentiate 1.7 standard from 1.7 HTML5 core. It's also easier to convert an HTML5 core to an HTML4 core this way, should one want that.
If I recall, and I could be wrong, but isn't that default HTML4 behaviour? Just a thought why does sNews use XHTML? It doesn't serve xml.... I forgot the reasoning

Logged

Joost

  • Guest
Re: sNews goes HTML5
« Reply #20 on: October 01, 2009, 01:40:09 PM »

Just a thought why does sNews use XHTML? It doesn't serve xml.... I forgot the reasoning

Not many things happen for good reasons. Many times there is no reason at all. ;)
Anyway...  Xhtml was promoted back then, as an evolutionary step towards xml. It simply never got there. But how could we know?
Although I followed the same route, I am glad the route is changing. Now I am waiting for NXD to extinct.
Logged

Fred K

  • Still trying to learn stuff
  • ULTIMATE member
  • ******
  • Karma: 130
  • Posts: 2728
    • Personal
Re: sNews goes HTML5
« Reply #21 on: October 01, 2009, 01:41:43 PM »

Quote
1: Separated server config and site() to 2 separate files...

I took it down for some reason... can you repost it?
Quote
Changed all /> endings on input, img and br tags to >. It's not necessary to do that with HTML5, I did it in this wip to see how much work it would be to turn an XHTML-ized script to normal HTML, and partly to clearly differentiate 1.7 standard from 1.7 HTML5 core. It's also easier to convert an HTML5 core to an HTML4 core this way, should one want that.
If I recall, and I could be wrong, but isn't that default HTML4 behaviour? Just a thought why does sNews use XHTML? It doesn't serve xml.... I forgot the reasoning

1. Sure thing.

Step 1: Cut the server config variables from snews.php into a new php file, like so -
Code: [Select]
<?php // CONFIGURATION VARIABLES

// DATABASE VARIABLES
function db($variable) {
$db = array(
// Edit here for the database information only
// MySQL host
'dbhost'  => 'localhost',
// Database name
'dbname'  => 'db-name',
// Database Username
'dbuname'  => 'user',
// Database password
'dbpass'  => 'pass',
// Table prefix for multiple sNews systems on one database
// if you don't need it just leave it blank
'prefix'  => ''
);
return $db[$variable];
}

Step two, change this bit in snews.php
Code: [Select]
//SITE - Automatically detects the scripts location.
function site() {
$host = 'http://'.$_SERVER['HTTP_HOST'];
$directory = dirname($_SERVER['SCRIPT_NAME']);
$website = $directory == '/' ? $host.'/' : $host.$directory.'/';
return $website;
}

To this, which we place in the new php file, after the code in step one:
Code: [Select]
//SITE - Automatically detects the scripts location.
function siteURL() {
$host = 'http://'.$_SERVER['HTTP_HOST'];
$directory = dirname( $_SERVER["SCRIPT_NAME"] );
$website = $directory == '/' ? $host.'/' : $host.$directory.'/';
return $website;
}
$siteURL = siteURL();
?>

Step three: Save the new php file in the same folder as snews.php and name it, for example, local.php if it's for a local dev purpose or web.php if it's for the web server. Then go back to snews.php and first add an include directly after session_start, like this:
Code: [Select]
// CONFIGURATION VARIABLES
// 'remote.php' for live server
include_once('local.php');

and then change the old function site() to this:
Code: [Select]
function site() {
global $siteURL;
return $siteURL;
}
define( '_SITE', site() );

That should be it. Now you can have a local config file for your local server and a "remote" config for your web server, so when you upload the site, only upload the remote config file (and snews.php of course) ;)
/*Edit: have posted the steps in a mod, here

2. Yes, the tag convention is the old HTML 4 convention. HTML 5 allows for both old HTML 4 tags _and_ XHTML 1 tags, to facilitate conversion. XHTML 1.0, served as HTML, which sNews uses, was supposed to be a bridge between the old --HTML 4-- and the new --XHTML as XML. But we bad-at-scripting developers never took to XML as a base format, too much abstract scripting going on there I suppose, so XHTML as HTML became a roadblock, not a bridge. But it also became a public fav, an "it" thing that everyone had to use, so everyone used (and uses) it. And that's why HTML 5 allows both styles of end tags. To make the transition easier. However, if we use HTML4 style endtags, it actually makes HTML 5 more backwards compatible, so much so that even IE5 and Netscape 5 can render an HTML 5 page correctly as far as the basic HTML structure goes (and if you take care to give each element an id or a class). They won't understand the completely new stuff, but standard things they will understand. More so than they did with XHTML 1.
« Last Edit: October 01, 2009, 02:16:30 PM by Fred K (agentsmith) »
Logged

Keyrocks

  • Doug
  • ULTIMATE member
  • ******
  • Karma: 449
  • Posts: 6019
  • Semantically Challenged
    • snews.ca
Re: sNews goes HTML5
« Reply #22 on: October 01, 2009, 05:09:07 PM »

PS: I'm building a wall with large stones, concrete and cement (wife's order). And as ce que femme veut is my priority it'll take some time to code further more. Hope next week to be able to have an online version to share our ideas and more.

@ Sven... your wife and mine must be communicating with each other behind our backs. Mine has me building a stone wall with concrete and cement as well. We must share how-to photos of our stonework with our fellow Dudes in the "Miscellaneous Discussions" section someday soon.  ;D
Logged
Do it now... later may not come.
-------------------------------------------------------------------------------------------------
sNews 1.6 MESU | sNews 1.6 MEMU

Sven

  • ULTIMATE member
  • ******
  • Karma: 88
  • Posts: 2029
  • Chasing MY bugs!
    • hiseo.fr - rédacteur Web
Re: sNews goes HTML5
« Reply #23 on: October 01, 2009, 05:16:44 PM »

PS: I'm building a wall with large stones, concrete and cement (wife's order). And as ce que femme veut is my priority it'll take some time to code further more. Hope next week to be able to have an online version to share our ideas and more.

@ Sven... your wife and mine must be communicating with each other behind our backs. Mine has me building a stone wall with concrete and cement as well. We must share how-to photos of our stonework with our fellow Dudes in the "Miscellaneous Discussions" section someday soon.  ;D
I will Doug (with my phone camera) in the right forum.
I carried 1 tonn of stone and 400 kg of gravels, sand and cement.
Friday: foundations!

BTW, remember you're semantically challenged.
You should start your HTML5 sNews tests right away! ;D

Joost

  • Guest
Re: sNews goes HTML5
« Reply #24 on: October 01, 2009, 05:25:08 PM »

. Mine has me building a stone wall with concrete and cement as well.

PS: I'm building a wall with large stones, concrete and cement (wife's order). And as ce que femme veut is my priority it'll take some time to code further more.

An old Dutch saying: One pussy tows more than ten horses.
Logged

Sven

  • ULTIMATE member
  • ******
  • Karma: 88
  • Posts: 2029
  • Chasing MY bugs!
    • hiseo.fr - rédacteur Web
Re: sNews goes HTML5
« Reply #25 on: October 01, 2009, 05:28:49 PM »

Re. #4
Code blah blah.. (...)
Oh oh.
I'll have to manage with another trick I use to have h2 on the home page and h1 for the article.
Gonna see that and will tell.
Thanks so much Fred.
Quote from: Fred K (agentsmith)
That is a cool mod :D
And, yes, sort of in that way but not so completely separated. You can try it yourself if you login with the standard user/pass.
Basically you get the same layout but without the sidebar. It won't switch back the theme though, if you first change from original to sea for example. ;)
(The admin panels has a different font, slightly larger type and a white center also, which the public view doesn't have, obviously.)
Like I said, you can check it out yourself, it's a simple way of showing how much can be customized.
I saw this morning.
Quote from: Fred K (agentsmith)
I was thinking of doing a more Wordpress-esque backend (even though I *know* we're not supposed to say that name out loud), but that requires a bit of rewriting of the admin bits in snews.php so I don't know if I'll fit that into this template or not. I think I must concentrate on earning my christmas gift list stash first, otherwise I'll have hell to pay come December... if you see what I mean.
I see what you mean. Stay focus on christmas.
WORDPRESS. Still live?.

Fred K

  • Still trying to learn stuff
  • ULTIMATE member
  • ******
  • Karma: 130
  • Posts: 2728
    • Personal
Re: sNews goes HTML5
« Reply #26 on: October 02, 2009, 08:45:15 AM »

WORDPRESS. Still live?.

Not for much longer... :D
Logged

Fred K

  • Still trying to learn stuff
  • ULTIMATE member
  • ******
  • Karma: 130
  • Posts: 2728
    • Personal
Re: sNews goes HTML5
« Reply #27 on: October 06, 2009, 10:16:56 AM »

Had a little fun yesterday. See if you recognize this (now in HTML 5!) :D 8) Some structural bits needs looking over though...
Logged

Keyrocks

  • Doug
  • ULTIMATE member
  • ******
  • Karma: 449
  • Posts: 6019
  • Semantically Challenged
    • snews.ca
Re: sNews goes HTML5
« Reply #28 on: October 06, 2009, 02:31:18 PM »

Had a little fun yesterday. See if you recognize this (now in HTML 5!) :D 8) Some structural bits needs looking over though...

Nicely done Fred. Can you also get it to display properly in IE 6 & up? In IE7, no styling applies at all.
Logged
Do it now... later may not come.
-------------------------------------------------------------------------------------------------
sNews 1.6 MESU | sNews 1.6 MEMU

poppoll

  • Full Member
  • ***
  • Karma: 47
  • Posts: 199
    • Poppoll's sNews playground
Re: sNews goes HTML5
« Reply #29 on: October 06, 2009, 03:19:35 PM »

Fred,
To have the hidden div change from More to less when open add this:
Change to your needs..
This is my html:
Code: [Select]
<p class="footer_toggler"><a href="#" id="footer-toggle">Show Footer</a></p>The script:
Code: [Select]
//show hide footer
$(document).ready(function() {
 // hides the footer as soon as the DOM is ready
 // (a little sooner than page load)
  $('#footer').hide();
 // shows the footer on clicking the noted link
  //$('a#footer-show').click(function() {
 //$('#footer').show('slow');
 //return false;
  //});
 // hides the footer on clicking the noted link
 // $('a#footer-hide').click(function() {
 //$('#footer').hide('fast');
 //return false;
  //});
 // toggles the footer on clicking the noted link
  $('a#footer-toggle').click(function() {
 $('#footer').toggle(400);
 $(this).text($(this).text() == 'Show Footer' ? 'Hide Footer' : 'Show Footer');
 return false;
  });
});
// end show hide footer
You can remove the lines starting with //
PP
PS I think you forgot the html5.js script in the ifIE part
« Last Edit: October 06, 2009, 03:29:18 PM by poppoll »
Logged
Pages: 1 [2] 3 4