YAFLogo

TommyB
  • TommyB
  • 100% (Exalted)
  • YAF Commander Topic Starter
16 years ago
What's the progress on using css friendly html instread tables?

Would be great to remove lot of tables out of yaf. It's a lot of work but I'm sure it is a good idea.

Also why not use the app_themes feature from asp.net? this would make the theming much more comfortable :)

I thought to made it by my own, but I don't know when 1.9.3 will be released and how to merge the changes.

Don't want to see the final version to be released just when I have finished my work ^^


- Sry for my english ;)

BattCursor.Net  - Official homepage of that tool for vista laptops!

Sponsor
stewartlab
16 years ago
TommyB, i totally agree with you on having a CSS/DIV page layout than a table based forum, because it gives you complete control over rendering when its not table based,but............ this not going to be an easy task as in you will have to rewrite pretty much the entire forum. I say go for it if you have time to spare and more power to you if you get it accomplished.

I know all the designers will really appreciate it if you do. I would also ask Jaben to give you some Donation money too, because that is a huge undertaking.

Best of Luck if you do.

Kyle

One other thing, it is still table based in 1.9.3, so if you havent toyed with it dont do it to a 1.9.1.8 version, there are a ton of more features in 1.9.3

Mek
  • Mek
  • 100% (Exalted)
  • YAF Developer
16 years ago
Tables are for table data. I very very very much doubt we'll be removing them completely, the amount of headaches we'd have with DNN and site integration in attempting to pull off a pure DIV layout makes the idea unfeasible. Please note: I'm not adverse to changing how we manage the layout at all.

I'd very much like to head down a templating engine method where you guys can easily put the work in and be happy, whilst the official can remain tablerised. (Albeit a lot neater πŸ™‚ )


UserPostedImage

"It's a case of RTFM.. the only problem being we don't have a manual!"

When I post FP:Mek in a topic, I'm leaving my footprint there so I can track it once I get into coding/supporting. (Yes I stole this off Ederon πŸ™‚ )

TommyB
  • TommyB
  • 100% (Exalted)
  • YAF Commander Topic Starter
16 years ago
Thanks for your reply :)

I thought already to ask jaben to create a poll for it if this feature is wanted.

Yes, I know this is not be easy, but I'm sure I will not have to rewrite the entire forum. Only the web part ^^ (It's much work anyways, I know)

I simply don't want to do the work for me only, but it seems some others like this idea, too :)

Also it seems no one is working on this task yet.

I will try it. I have already started with some improvements, for example moving down the d*mmit viewstate to the bottom of the page, together with the scripts and web resources used by ajax. It works already, only the smart scrolling still makes some problems.

Also maybe someone has noticed my c# knownledgements, they are as good as my english ^^' I'm a vb developer, but it shouldn't be a big problem. I think the problem is bigger for jaben and / or the other developers to merge the changes if I start with the 1.9.3 RC2 ^^ Maybe someone of them wants to leave a comment in here ;)

Nice idea with donation, but I use yaf for free, so I like to help the project for free, too. Maybe I get a line in the changelog, but this is not required :)

@mek: I will not modify existing templates. you are still able to use table based layout for dnn. this small amount of tables created by yaf won't be a problem, compared to dnn's html source.

This is what I mean with app_themes. no design is fixed, you can use tables and table-free designs together and choose what you want. You are a developer, for example have a look at the ITemplate interface πŸ˜‰


- Sry for my english ;)

BattCursor.Net  - Official homepage of that tool for vista laptops!

Mek
  • Mek
  • 100% (Exalted)
  • YAF Developer
16 years ago

@mek: I will not modify existing templates. you are still able to use table based layout for dnn. this small amount of tables created by yaf won't be a problem, compared to dnn's html source.

This is what I mean with app_themes. no design is fixed, you can use tables and table-free designs together and choose what you want. You are a developer, for example have a look at the ITemplate interface ;)

TommyB wrote:

Yup thats pretty much the direction I want to head in, and I have knocked together some "proof of concepts" for jaben, the idea being we can create our own controls i.e. YAF grids instead of repeaters etc.. that can be complete templated. But this is quite a while off for me since I have commitments to my portal coming first atm.

We very much could do with someone contributing to the layout render, the question is seeing where your interests lie and where Jaben wants to specifically take the layout. If its possible we could then get alot of the work committed to the svn as you do it. Thus helping both the tables camp and the pure css div's camp. Put quite simply we could do someone with a specific interest in the layout onboard.


UserPostedImage

"It's a case of RTFM.. the only problem being we don't have a manual!"

When I post FP:Mek in a topic, I'm leaving my footprint there so I can track it once I get into coding/supporting. (Yes I stole this off Ederon πŸ™‚ )

TommyB
  • TommyB
  • 100% (Exalted)
  • YAF Commander Topic Starter
16 years ago
erm... correct me if I'm wrong but as I know the repeater does not create tables by itself, also it is themeable, so you could move the full template, alternating template, into an .skin file in app_themes.

My goals are:

* improve search engine compatiblity and (feeled) page creation time (move "useless" stuff to the end of page like scripts, viewstate)

* move all (or at least most of) the hardcoded html to app_themes

* not touch existing themes. (of course they will have to be moved from the "old" theming system to app_themes style, but html output will be the same)

* add an css friendly theme

* add an theme for mobile devices (already requested in here)

* (later) add a small tutorial how to create yaf themes using app_themes

Maybe I forgot a point now, but that are the main goals πŸ™‚


- Sry for my english ;)

BattCursor.Net  - Official homepage of that tool for vista laptops!

Mek
  • Mek
  • 100% (Exalted)
  • YAF Developer
16 years ago
Admirable goals, and I would very much like to see something along those lines.

Question though:

Is how to handle items that are not in a control with an itemplate i.e. that surround it? Plenty of examples of this in the code.

Also how to handle embedded controls.. i.e. a repeater within a repeater. I didn't think thats controls in .skin file were rendered

, or if they were then you'd have problem accessing the code behind without using FindControls everywhere.

Please please note I'm not trying to discourage any of your goals (which run parallel to mine) just voicing some of the issues I had thought about when going down the same road, and see if you have thought of something I hadn't.


UserPostedImage

"It's a case of RTFM.. the only problem being we don't have a manual!"

When I post FP:Mek in a topic, I'm leaving my footprint there so I can track it once I get into coding/supporting. (Yes I stole this off Ederon πŸ™‚ )

TommyB
  • TommyB
  • 100% (Exalted)
  • YAF Commander Topic Starter
16 years ago
the initialization of skins should be in between BeginInit and Init. In BeginInit you can specify a theme by source, after that not. So I think app themes wil be initialized before page_init and therefore should not make problems with findcontrol.

Anyways (only after I have had a quick look) I haven't found nested repeater.

Also, ITemplate is used mainly for repeated controls (eg for asp:repeater). for example the breadcrump (typed free by hand):

asax (or user control) file

<Example:YAFBreadCrump ID="Breadcrump" runat="server" SkinID="YafBreadcrump" />

.skin file: (friendly style used, tables are also possible)

<Example:YAFBreadCrump ID="Breadcrump" runat="server" SkinID="YafBreadcrump" LastItemClass="Last" BeforeTemplate="&lt;ul&gt;" AfterTemplate="&lt;/ul&gt;">
    <ItemTemplate>
        <li><a href="link"><%# eval blah and so on %></a></li>
    </ItemTemplate>
</Example:YAFBreadCrump>
You only have to add ITemplate for the nesting "control" (mainly property) ItemTemplate, and make the properties LastItemClass, BeforeTemplate and AfterTemplate mark as [Themeable(true)] to make it work. Any html source lies now in .skin file and can bee freely customized. Only a small override of the render method is required, sometimes even no new control is required as you said.

Also it is possible to create win forms skin designer as well. But I don't believe I will do that ^^

Don't know what exactly you mean with "how to handle embedded controls..." ... I have managed it already to add server controls to skin files, but it could be possible that there are limitations. Also, a skin file is not a deveoping file like asax and so on, it should declare controls style only, like my example above, but lets see. But of course you should be able to skin nested controls using skin id.

Or what issues you got while using it? Maybe I misunderstand you.


- Sry for my english ;)

BattCursor.Net  - Official homepage of that tool for vista laptops!

Jaben
  • Jaben
  • 100% (Exalted)
  • YAF Developer
16 years ago

What's the progress on using css friendly html instread tables?

TommyB wrote:

I would like to question this assumption. Why is a "table-less" HTML more "CSS Friendly"?

I understand the need to remove them for layout reasons -- and I've made strides in this regard. But, they are for TABULAR layouts. I really don't get this recent idea that the only "good" HTML removes all tables. In fact the opposite is true. Sometimes you have to include so many DIVs and weird CSS to get a layout to look decent -- when you just could have used a table. I realize you can do with DIV and LI what you can do with table. But why bother? Someone deciding something is "bad" doesn't not constitute a good reason to me. All these bloggers and their "Tables vs. CSS" junk because they like making mountains out of molehills and telling people what they should and shouldn't do.

And for SEO... It's not like googlebot stops searching as soon as it hits

or something.
Jaben
  • Jaben
  • 100% (Exalted)
  • YAF Developer
16 years ago
http://phrogz.net/css/WhyTablesAreBadForLayout.html#designlock 

This is for someone who uses tables exclusively for layout. Obviously, a bad idea now.

Jaben
  • Jaben
  • 100% (Exalted)
  • YAF Developer
16 years ago

What's the progress on using css friendly html instread tables?

Jaben wrote:

I would like to question this assumption. Why is a "table-less" HTML more "CSS Friendly"?

I understand the need to remove them for layout reasons -- and I've made strides in this regard. But, they are for TABULAR layouts. I really don't get this recent idea that the only "good" HTML removes all tables. In fact the opposite is true. Sometimes you have to include so many DIVs and weird CSS to get a layout to look decent -- when you just could have used a table. I realize you can do with DIV and LI what you can do with table. But why bother? Someone deciding something is "bad" doesn't not constitute a good reason to me. All these bloggers and their "Tables vs. CSS" junk because they like making mountains out of molehills and telling people what they should and shouldn't do.

And for SEO... It's not like googlebot stops searching as soon as it hits

or something.

TommyB wrote:

Re-reading, it sounds a bit cranky. I apologize. I just don't like idea of re-doing all the layouts as div based on experience of doing just that.

Jaben
  • Jaben
  • 100% (Exalted)
  • YAF Developer
16 years ago

erm... correct me if I'm wrong but as I know the repeater does not create tables by itself, also it is themeable, so you could move the full template, alternating template, into an .skin file in app_themes.

My goals are:

* improve search engine compatiblity and (feeled) page creation time (move "useless" stuff to the end of page like scripts, viewstate)

* move all (or at least most of) the hardcoded html to app_themes

* not touch existing themes. (of course they will have to be moved from the "old" theming system to app_themes style, but html output will be the same)

* add an css friendly theme

* add an theme for mobile devices (already requested in here)

* (later) add a small tutorial how to create yaf themes using app_themes

Maybe I forgot a point now, but that are the main goals :)

TommyB wrote:

Wonderful list... It's be excellent if you helped move the project in this direction.

TommyB
  • TommyB
  • 100% (Exalted)
  • YAF Commander Topic Starter
16 years ago

Please explain why only "table-less" HTML is "CSS Friendly"

Jaben wrote:

That I have never said!

But do you use microsoft excel for picture editing? I'm pretty sure not. Excel is for table calculating, nothing else. html tables are to display tables (maybe like the manage forums in the administration) but not to create a style.

In fact, they are NEEDED for a lot of things.

Jaben wrote:

http://en.battcursor.net  . No table like display is required, so no table tag is used. Source is much smaller and understandable! Also it is much easier to port it to mobile devices and many other reasons to go this way. I Don't want to remove all tables out of yaf! But a table is not and should never be a style element. Yet another sorry, but we don't live in the 90s anymore. I think we, and yaf, should go with the future.

In fact the opposite is true. Sometimes you have to include so many DIVs and weird CSS to get a layout to look decent -- when you just could have used a table.

Jaben wrote:

Yes there are some browser problems. Thats exactly the same like in jscript. non-ie browsers will do a bit other work as the ie. but pretty funny (sorry) you are able to handle with jscript, but not with newer html styles.

But what you told is wrong. I have had tons of problems with yaf and ftb for example (much other problems, too) where the designs will affect each other and the result of the css war looks ugly.

And let's not say for SEO... It's not like googlebot stops searching as soon as it hits

or something.

Jaben wrote:

Of course it is, if you believe it or not. Well the most common crawler will, and be happy about it, crawl the site to the end. I have never told they will not index sites with tables, because that is not true. But keep in mind some robots will only read the first eg 50kb of the page. Now please have a look at my sites html source and locate the navigation in it. Please keep in mind you are a stupid robot now. but with ul li you know this links are a block, so it is maybe a page navigation. Anything else can be a user posted link, a spam comment that is not deleted, ...

At line 63:

<ul id="Navigation">
    <li><strong>Übersicht</strong></li>
    <li><a href="/details.aspx">Details</a></li>
    <li><a href="/download.aspx">Download</a></li>
    <li><a href="/support.aspx">Support</a></li>
    <li class="Last"><a href="http://forum.devs-on.net/Default.aspx?g=topics&amp;f=22" target="_blank">Forum</a></li>
</ul>

At the opposite the yaf breadcrump:

<div id="ctl00_Main_forum_ctl01_PageLinks" class="yafPageLink">
    <a href="/">Yet Another Forum.NET</a><span class="linkSeperator">&#187;</span>
    <a href="/yaf_forum2_YAF-Forum-Discussions.aspx">YAF Forum Discussions</a><span class="linkSeperator">&#187;</span>
    <a href="/yaf_topics14_Forum-Announcements.aspx">Forum Announcements</a><span class="linkSeperator">&#187;</span>
    <span class="currentPageLink">BattCursor with YAF as support forum</span>
It is a span, or better, its nothing. noting that bounds the links together. nothing that says that the links are about the same topic or simular. (you may notice, i have not posted any table, but newer html styles strongly prefer ul li instread using "stupid inline links". Also you should notice the overhead only for the seperator spans betewwn the links) Now think as stupid robot, what links are better?

Believe it or not, there are tons of reasons to upgrade, I only showed 2 of them.

Pocket webs (windows mobile, ... is another already asked feature)

Also this forum is not unknown. so why not saving some bandwidth? This will lower your costs and page responses will be much faster. Yet another reason...


- Sry for my english ;)

BattCursor.Net  - Official homepage of that tool for vista laptops!

TommyB
  • TommyB
  • 100% (Exalted)
  • YAF Commander Topic Starter
16 years ago
eeerrrmmm...

ok jaben, now you managed it to totally confuse me 0.o

yet written, translated, corected and posted my reply to the first reply of you, I dont know what you think about it now ^^

Could you please merge the follow ups together to say whats on now? ^^

sorry

EDIT: LOL jaben, you should think about (like me) a footer in your post, like "work in progress, pease revisit in a few minutes" xD

Most of my above post is outdated now.

But why tables instread ul li... it saves traffic. and also it will not allow (or is not used for) large amount of text. only a small list, in the above example a list of links. in a div or span anything can take place, like headings how g@y our pr€sident guenter is, ... ul li wont allow it due xhtml. (for safty reasons "encrypred" and fictive name)

Also no spans in between. maybe using css, but css can be cached, the default.aspx not (not this way)

Also I told I dont want to remove any tables. only any tables that are used for style purpose, and that only for the friendly layout. the others will remain.


- Sry for my english ;)

BattCursor.Net  - Official homepage of that tool for vista laptops!

TommyB
  • TommyB
  • 100% (Exalted)
  • YAF Commander Topic Starter
16 years ago
Viewstate mover is done now and works on my forum. Haven't found any problems until now.

Feel free to test (only 1.9.3 RC2, because I have had to modify the smartscroller a bit). Source is attached, the smartscroller modification I have posted in the 1.9.3 RC2 thread.

Please make a backup of your files first!

ViewState Mover.zip 


- Sry for my english ;)

BattCursor.Net  - Official homepage of that tool for vista laptops!